Merge pull request #15 from maykinmedia/feature/#23-toolbar-items

✨ #23 - feat: Implemented the `items` prop for the toolbar a…
maykinmedia · Jan 30, 2024 · d1ddabd · d1ddabd
2 parents 5399457 + fedef4b
commit d1ddabd
Show file tree

Hide file tree

Showing 30 changed files with 292 additions and 157 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,8 @@
 import type { Preview } from "@storybook/react";
 import * as React from "react";
 
+import "../src/settings/tokens.css";
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@storybook/addon-essentials": "^7.6.7",

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -1,5 +1,4 @@
 import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
@@ -8,17 +7,17 @@ import postcss_url from "postcss-url";
 
 export default [
   {
+    external: ["@floating-ui/react", "@heroicons/react/24/outline", "@heroicons/react/24/solid", "clsx"],
     input: "src/index.tsx",
     output: {
       dir: "dist",
-      format: "esm",
+      format: "cjs",
       sourcemap: true,
       preserveModules: true,
     },
     plugins: [
       peerDepsExternal(),
       commonjs(),
-      resolve(),
       typescript({ tsconfig: "./tsconfig.json" }),
       postcss({
         autoModules: true,

diff --git a/src/components/boolean/boolean.scss b/src/components/boolean/boolean.scss
@@ -1,5 +1,3 @@
-@import "../../settings/style";
-
 .mykn-boolean {
   align-items: center;
   border-radius: var(--border-radus-m);

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -1,5 +1,3 @@
-@use "../../settings/style";
-
 .mykn-button {
   --mykn-button-color-background: var(--theme-color-primary-800);
   --mykn-button-color-shadow: var(--theme-shade-1000);

diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
@@ -1,4 +1,4 @@
-@use "../../settings/style";
+@use "../../settings/constants";
 
 .mykn-dropdown {
   display: inline-flex;
@@ -24,20 +24,20 @@
     z-index: 1000;
   }
 
-  @media screen and (max-width: style.$breakpoint-desktop - 1px) {
+  @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
     &__dropdown {
       width: 100%; // Fallback.
       width: min(100%, max(calc(100vw - 2 * var(--spacing-h-xl)), 100cqw));
     }
   }
 
-  @media screen and (min-width: style.$breakpoint-desktop) {
+  @media screen and (min-width: constants.$breakpoint-desktop) {
     &__dropdown .mykn-toolbar--direction-horizontal {
       width: min-content;
     }
   }
 
-  @media screen and (min-width: style.$breakpoint-desktop) {
+  @media screen and (min-width: constants.$breakpoint-desktop) {
     &__dropdown .mykn-toolbar--direction-vertical {
       width: max-content;
     }

diff --git a/src/components/dropdown/dropdown.stories.tsx b/src/components/dropdown/dropdown.stories.tsx
@@ -45,7 +45,7 @@ const meta = {
 } satisfies Meta<typeof Dropdown>;
 
 const DEFAULT_CHILDREN = (
-  <Toolbar direction="vertical">
+  <>
     <Button variant="transparent">
       <Outline.PencilIcon />
       Zaaktypen
@@ -69,7 +69,7 @@ const DEFAULT_CHILDREN = (
       <Outline.ArrowRightStartOnRectangleIcon />
       Uitloggen
     </Button>
-  </Toolbar>
+  </>
 );
 
 export default meta;
@@ -174,8 +174,11 @@ export const HorizontalDropdown: Story = {
         <Outline.EllipsisHorizontalIcon />
       </>
     ),
+    toolbarProps: {
+      direction: "horizontal",
+    },
     children: (
-      <Toolbar direction="horizontal">
+      <>
         <Button variant="transparent">
           <Outline.PencilIcon />
           Zaaktypen
@@ -199,7 +202,7 @@ export const HorizontalDropdown: Story = {
           <Outline.ArrowRightStartOnRectangleIcon />
           Uitloggen
         </Button>
-      </Toolbar>
+      </>
     ),
   },
 };
@@ -254,7 +257,7 @@ export const NestedDropdown: Story = {
     ),
     variant: "primary",
     children: (
-      <Toolbar direction="vertical">
+      <>
         <Button variant="transparent">
           <Outline.PencilIcon />
           Zaaktypen
@@ -292,7 +295,55 @@ export const NestedDropdown: Story = {
             </Button>
           </Toolbar>
         </Dropdown>
-      </Toolbar>
+      </>
+    ),
+  },
+};
+
+export const DropdownWithItemsProp: Story = {
+  args: {
+    label: (
+      <>
+        {" "}
+        Click me!
+        <Outline.EllipsisVerticalIcon />
+      </>
     ),
+    items: [
+      {
+        variant: "transparent",
+        children: (
+          <>
+            <Outline.PencilIcon /> Zaaktypen
+          </>
+        ),
+      },
+      {
+        variant: "transparent",
+        children: (
+          <>
+            <Outline.ClipboardDocumentIcon /> Documenttypen
+          </>
+        ),
+      },
+      {
+        href: "https://www.example.com",
+        target: "_blank",
+        variant: "transparent",
+        children: (
+          <>
+            <Outline.UserIcon /> Admin
+          </>
+        ),
+      },
+      {
+        variant: "transparent",
+        children: (
+          <>
+            <Outline.ArrowRightStartOnRectangleIcon /> Uitloggen
+          </>
+        ),
+      },
+    ],
   },
 };
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -34,8 +34,17 @@ export type DropdownProps = ButtonProps & {
   /** Whether the dropdown should be open. */
   open?: boolean;
 
-  /** `Children` should be a `Toolbar` component containing the individual items. */
-  children: React.ReactElement<ToolbarProps>;
+  /** The items shown inside the dropdown. */
+  items?: ToolbarProps["items"];
+
+  /** Any additional props to pass to the toolbar. */
+  toolbarProps?: Omit<ToolbarProps, "items">;
+  // toolbarProps?: unknown;
+};
+
+type TOOLBAR_MODULE_STUB = {
+  Toolbar: React.FC<ToolbarProps>;
+  ToolbarProps: ToolbarProps;
 };
 
 /**
@@ -56,8 +65,20 @@ export const Dropdown: React.FC<DropdownProps> = ({
   label,
   open = false,
   placement = "bottom",
+  items,
+  toolbarProps,
   ...props
 }) => {
+  // FIXME: Experimental approach for avoiding circular dependency.
+  const [toolbarModuleState, setToolbarModuleState] =
+    useState<TOOLBAR_MODULE_STUB | null>(null);
+
+  if (!toolbarModuleState) {
+    import("../toolbar/toolbar").then((toolbarModule) =>
+      setToolbarModuleState(toolbarModule as TOOLBAR_MODULE_STUB),
+    );
+  }
+
   const [isOpen, setIsOpen] = useState(false);
 
   /**
@@ -98,6 +119,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
     role,
   ]);
 
+  const isToolbarModuleLoaded = (
+    toolbarModuleState: TOOLBAR_MODULE_STUB | null,
+  ): toolbarModuleState is TOOLBAR_MODULE_STUB => Boolean(toolbarModuleState);
+
   return (
     <div className={clsx("mykn-dropdown", { "mykn-dropdown--open": isOpen })}>
       <Button ref={refs.setReference} {...getReferenceProps()} {...props}>
@@ -111,7 +136,16 @@ export const Dropdown: React.FC<DropdownProps> = ({
             style={floatingStyles}
             {...getFloatingProps()}
           >
-            {children}
+            {isToolbarModuleLoaded(toolbarModuleState) && (
+              <toolbarModuleState.Toolbar
+                align="start"
+                direction="vertical"
+                items={items}
+                {...toolbarProps}
+              >
+                {children}
+              </toolbarModuleState.Toolbar>
+            )}
           </div>
         </FloatingFocusManager>
       )}

diff --git a/src/components/form/select/select.scss b/src/components/form/select/select.scss
@@ -1,5 +1,3 @@
-@use "../../../settings/style";
-
 .mykn-select {
   align-items: center;
   background: var(--typography-color-background);

diff --git a/src/components/layout/column/column.scss b/src/components/layout/column/column.scss
@@ -1,4 +1,4 @@
-@use "../../../settings/style";
+@use "../../../settings/constants";
 
 .mykn-column {
   grid-column: auto / 6 span;
@@ -16,10 +16,10 @@
   }
 
   &--debug[data-testid]:before {
-    content: attr(data-testid)!important;
+    content: attr(data-testid) !important;
   }
 
-  @media screen and (min-width: style.$breakpoint-desktop) {
+  @media screen and (min-width: constants.$breakpoint-desktop) {
     @for $i from 1 through 12 {
       &--span-#{$i} {
         grid-column: auto / span #{$i};
@@ -31,4 +31,3 @@
     }
   }
 }
-
diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss
@@ -1,4 +1,4 @@
-@use "../../../settings/style";
+@use "../../../settings/constants";
 
 .mykn-grid {
   display: grid;
@@ -23,7 +23,7 @@
     content: attr(data-testid);
   }
 
-  @media screen and (min-width: style.$breakpoint-desktop) {
+  @media screen and (min-width: constants.$breakpoint-desktop) {
     & {
       grid-template-columns: repeat(12, auto);
       gap: var(--gutter-v-desktop) var(--gutter-h-desktop);