Merge branch 'main' into figma-tokens

getflip · Dec 13, 2023 · d1fffac · d1fffac
2 parents c8d36f0 + a97a034
commit d1fffac
Show file tree

Hide file tree

Showing 71 changed files with 2,273 additions and 1,889 deletions.
diff --git a/.changeset/swift-onions-teach.md b/.changeset/swift-onions-teach.md
diff --git a/.gitignore b/.gitignore
@@ -157,6 +157,9 @@ apps/swirl-docs/specs/*
 apps/swirl-docs/problem.yml
 apps/swirl-docs/shared.yml
 apps/swirl-docs/users.yml
-apps/swirl-docs/usergroups.yml
 apps/swirl-docs/channels.yml
 apps/swirl-docs/src/documents/api/*
+apps/swirl-docs/users-common.yml
+apps/swirl-docs/users-roles-and-permissions.yml
+apps/swirl-docs/users-admin-user-groups.yml
+apps/swirl-docs/users-admin-usergroups.yml
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,

diff --git a/apps/swirl-docs/CHANGELOG.md b/apps/swirl-docs/CHANGELOG.md
@@ -1,5 +1,33 @@
 # swirl-docs
 
+## 0.1.235
+
+### Patch Changes
+
+- Updated dependencies
+  [[`d4567b59`](https://github.com/getflip/swirl/commit/d4567b592ab80a65545b57ce351a812de7b01f16)]:
+  - @getflip/swirl-components@0.118.3
+  - @getflip/swirl-components-react@0.118.3
+
+## 0.1.234
+
+### Patch Changes
+
+- Updated dependencies
+  [[`6c0affef`](https://github.com/getflip/swirl/commit/6c0affef835427fd76852dfa16b86d0b85a673a6)]:
+  - @getflip/swirl-components@0.118.2
+  - @getflip/swirl-components-react@0.118.2
+
+## 0.1.233
+
+### Patch Changes
+
+- Updated dependencies
+  [[`21bedf5b`](https://github.com/getflip/swirl/commit/21bedf5bc1a2e9c0a9cfca75da54a5a2080ed62f)]:
+  - @getflip/swirl-tokens@2.5.0
+  - @getflip/swirl-components@0.118.1
+  - @getflip/swirl-components-react@0.118.1
+
 ## 0.1.232
 
 ### Patch Changes

diff --git a/apps/swirl-docs/next.config.mjs b/apps/swirl-docs/next.config.mjs
@@ -19,7 +19,7 @@ const nextConfig = {
     defaultLocale: "en",
   },
   env: {
-    PASSWORD_PROTECT: true,
+    PASSWORD_PROTECT: "true",
   },
   // output: "standalone",
 };

diff --git a/apps/swirl-docs/package.json b/apps/swirl-docs/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "swirl-docs",
-  "version": "0.1.232",
+  "version": "0.1.235",
   "author": "Flip GmbH",
   "description": "Swirl documentation",
   "licence": "SEE LICENCE IN LICENSE.md",
@@ -27,10 +27,10 @@
     "@algolia/autocomplete-theme-classic": "^1.7.4",
     "@floating-ui/dom": "^1.1.0",
     "@floating-ui/react": "^0.18.0",
-    "@getflip/swirl-components": "^0.118.0",
-    "@getflip/swirl-components-react": "^0.118.0",
+    "@getflip/swirl-components": "^0.118.3",
+    "@getflip/swirl-components-react": "^0.118.3",
     "@getflip/swirl-icons": "^0.23.0",
-    "@getflip/swirl-tokens": "^2.4.0",
+    "@getflip/swirl-tokens": "^2.5.0",
     "@mdx-js/loader": "^2.1.3",
     "@next/mdx": "^12.2.5",
     "@readme/oas-to-har": "^20.1.1",
@@ -47,17 +47,17 @@
     "framer-motion": "^10.12.12",
     "gray-matter": "^4.0.3",
     "iframe-resizer-react": "^1.1.0",
-    "next": "12.2.5",
+    "next": "^14.0.4",
     "next-mdx-remote": "^4.1.0",
     "next-password-protect": "^1.8.0",
     "oas": "^20.5.3",
     "oas-normalize": "^11.0.1",
     "openapi-typescript": "^6.2.0",
     "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.29.0",
-    "react": "18.2.0",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-instantsearch-dom": "^6.38.1",
     "react-instantsearch-hooks-web": "^6.38.3",
     "react-markdown": "^8.0.6",
@@ -81,7 +81,7 @@
     "@types/react-instantsearch-dom": "^6.12.3",
     "autoprefixer": "^10.4.8",
     "eslint": "8.23.0",
-    "eslint-config-next": "12.2.5",
+    "eslint-config-next": "13",
     "postcss": "^8.4.31",
     "prettier": "^2.8.0",
     "tailwindcss": "^3.2.4",

diff --git a/apps/swirl-docs/src/components/CodePreview/NpmPackageLink.tsx b/apps/swirl-docs/src/components/CodePreview/NpmPackageLink.tsx
@@ -2,11 +2,11 @@ import { SwirlIconOpenInNew } from "@getflip/swirl-components-react";
 import Link from "next/link";
 export function NpmPackageLink() {
   return (
-    <Link href="https://www.npmjs.com/package/@getflip/swirl-components">
-      <a className="flex justify-center items-center text-[#F2F2F2] text-base font-medium mr-4">
-        npm package
-        <i className="swirl-icons-OpenInNew28 text-base ml-1"></i>
-      </a>
+    <Link
+      href="https://www.npmjs.com/package/@getflip/swirl-components"
+      className="flex justify-center items-center text-[#F2F2F2] text-base font-medium mr-4"
+    >
+      npm package<i className="swirl-icons-OpenInNew28 text-base ml-1"></i>
     </Link>
   );
 }
diff --git a/apps/swirl-docs/src/components/CommandMenu/CommandHit.tsx b/apps/swirl-docs/src/components/CommandMenu/CommandHit.tsx
@@ -7,18 +7,16 @@ type CommandHitProps = {
   description?: string;
   icon: ReactNode;
   handleOnSelect: (value: any) => void;
-  handleOnFocus: (value: any) => void;
 };
 
 export function CommandHit({
   title,
   icon,
   description,
   handleOnSelect,
-  handleOnFocus,
 }: CommandHitProps) {
   return (
-    <Command.Item onFocus={handleOnFocus} onSelect={handleOnSelect}>
+    <Command.Item onSelect={handleOnSelect}>
       <button
         type="button"
         className={classNames(

diff --git a/apps/swirl-docs/src/components/CommandMenu/CommandPalette.tsx b/apps/swirl-docs/src/components/CommandMenu/CommandPalette.tsx
@@ -126,7 +126,10 @@ export const CommandPalette = () => {
           />
 
           <Command.List className="max-h-[36rem] overflow-y-auto">
-            <CustomHits currentSearchString={searchString} />
+            <CustomHits
+              currentSearchString={searchString}
+              onSelected={() => setOpen(false)}
+            />
           </Command.List>
         </InstantSearch>
       </Command.Dialog>

diff --git a/apps/swirl-docs/src/components/CommandMenu/CustomHits.tsx b/apps/swirl-docs/src/components/CommandMenu/CustomHits.tsx
@@ -2,24 +2,25 @@ import { SwirlIconDescription } from "@getflip/swirl-components-react";
 import { AlgoliaRecord } from "@swirl/lib/search";
 import { Command } from "cmdk";
 import { useRouter } from "next/router";
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent } from "react";
 import { useHits } from "react-instantsearch-hooks-web";
 import { IconsMetaData } from "src/pages/components";
 import { CommandHit } from "./CommandHit";
 import { HitTokenPreview } from "./HitTokenPreview";
 
 interface CustomHitsProps {
   currentSearchString: string;
+  onSelected?: () => void;
 }
 
 export const CustomHits: FunctionComponent<CustomHitsProps> = ({
   currentSearchString,
+  onSelected,
 }) => {
   const icons: IconsMetaData = require("@getflip/swirl-icons/dist/metadata.js");
 
   const router = useRouter();
   const { hits } = useHits<AlgoliaRecord>();
-  const [activeItem, setActiveItem] = useState<any>();
 
   const tokenPagesHits = hits.filter((hit) => hit.path?.includes("-tokens"));
   const tokenHits = hits.filter((hit) => hit.type === "token");
@@ -60,9 +61,13 @@ export const CustomHits: FunctionComponent<CustomHitsProps> = ({
                     }16 text-icon-default w-5 h-5`}
                   ></i>
                 }
-                handleOnFocus={() => setActiveItem(hit)}
                 handleOnSelect={() => {
-                  router.push(activeItem.path.replace("-tokens", ""));
+                  if (!hit.path) {
+                    return;
+                  }
+
+                  router.push(hit.path.replace("-tokens", ""));
+                  onSelected?.();
                 }}
               />
             );
@@ -81,9 +86,13 @@ export const CustomHits: FunctionComponent<CustomHitsProps> = ({
               title={hit.objectID}
               description={hit.excerpt}
               icon={<SwirlIconDescription size={20} />}
-              handleOnFocus={() => setActiveItem(hit)}
-              handleOnSelect={() => {
-                router.push(activeItem.path.replace("-tokens", ""));
+              handleOnSelect={(hit) => {
+                if (!hit.path) {
+                  return;
+                }
+
+                router.push(hit.path.replace("-tokens", ""));
+                onSelected?.();
               }}
             />
           ))}
@@ -99,9 +108,13 @@ export const CustomHits: FunctionComponent<CustomHitsProps> = ({
                     tokenCategory={hit.tokenCategory}
                   />
                 }
-                handleOnFocus={() => setActiveItem(hit)}
                 handleOnSelect={() => {
-                  router.push(activeItem.path.replace("-tokens", ""));
+                  if (!hit.path) {
+                    return;
+                  }
+
+                  router.push(hit.path.replace("-tokens", ""));
+                  onSelected?.();
                 }}
               />
             );
@@ -126,9 +139,13 @@ export const CustomHits: FunctionComponent<CustomHitsProps> = ({
                   alt="component"
                 />
               }
-              handleOnFocus={() => setActiveItem(hit)}
               handleOnSelect={() => {
-                router.push(activeItem.path);
+                if (!hit.path) {
+                  return;
+                }
+
+                router.push(hit.path);
+                onSelected?.();
               }}
             />
           ))}

diff --git a/apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx b/apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx
@@ -1,8 +1,7 @@
 import classNames from "classnames";
 import { useDocumentationLayoutContext } from "../Layout/DocumentationLayoutContext";
-import { Tag } from "../Tags";
-import Heading from "../swirl-recreations/Headers";
 import { Text } from "../swirl-recreations";
+import Heading from "../swirl-recreations/Headers";
 
 export function DocumentationHeader({
   className: additionalClassNames,
@@ -13,15 +12,13 @@ export function DocumentationHeader({
 
   return (
     <header
-      className={classNames("border-b-1 pb-12 mb-12", additionalClassNames)}
+      className={classNames(
+        "flex flex-col gap-4",
+        "border-b-1 pb-[3.5rem] mb-12",
+        additionalClassNames
+      )}
     >
-      {/* DIV IS HERE FOR TAGS ONLY */}
-      <div className="mb-space-8 inline-flex items-center max-w-[37.5rem]">
-        <Heading level={1}>{frontMatter?.title as string}</Heading>
-        {frontMatter?.tags?.map((tag: string) => (
-          <Tag key={tag} content={tag} />
-        ))}
-      </div>
+      <Heading level={1}>{frontMatter?.title as string}</Heading>
       <Text className="max-w-[37.5rem]">{frontMatter?.description}</Text>
     </header>
   );

diff --git a/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx b/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx
@@ -9,7 +9,7 @@ import { EndpointParameterFactory } from "./ParameterFactory";
 
 interface EndpointDescription {
   endpoint: ApiEndpoint;
-  endpointId: string;
+  endpointId?: string;
   path: string;
 }
 
@@ -29,7 +29,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
   return (
     <div className="max-w-full md:max-w-[37.5rem] overflow-x-auto">
       <LinkedHeading href={path}>
-        <Heading level={3} id={endpointId}>
+        <Heading level={2} id={endpointId}>
           {endpoint.title}
           {endpoint.isDeprecated && (
             <span className="ml-2 inline-flex">
@@ -73,7 +73,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
 
           return (
             <div key={`${parameterType.title}-${index}`} className="mb-6">
-              <Heading level={4} className="mb-2">
+              <Heading level={3} className="mb-2">
                 {parameterType.title}
               </Heading>
               <div>{parameterFactory.renderProperties()}</div>
@@ -83,7 +83,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
 
         {requestbody && (
           <div className="mb-6">
-            <Heading level={4} className="mb-2">
+            <Heading level={3} className="mb-2">
               Request Body
             </Heading>
             <div>
@@ -97,7 +97,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
 
         {endpoint.responseBodySchemas.length && (
           <div className="mb-6">
-            <Heading level={4} className="mb-2">
+            <Heading level={3} className="mb-2">
               Response Body
             </Heading>
             <div>

diff --git a/apps/swirl-docs/src/components/HeaderNavigation/Mobile/List.tsx b/apps/swirl-docs/src/components/HeaderNavigation/Mobile/List.tsx
@@ -12,7 +12,7 @@ export default function List({
   return (
     <ul
       className={classNames(
-        "z-40 w-full h-[calc(100vh_-_64px)] max-h-[calc(100vh_-_64px)] bg-white",
+        "z-40 w-full h-[calc(100vh_-_64px)] max-h-[calc(100vh_-_64px)] bg-white px-4",
         { block: isOpen },
         { hidden: !isOpen }
       )}