Feat/color picker

packages/storybook/src/theme-builder/ColorPicker.stories.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable react/prop-types */
+import { Meta, StoryObj } from '@storybook/react';
+import purmerendScrapedTokens from './project-wallace-purmerend.tokens.json';
+import { getTokenValue, isDesignToken } from '@nl-design-system-unstable/theme-toolkit/src/design-tokens';
+import { ColorSample } from '@utrecht/component-library-react/dist/css-module';
+import { ComboboxStory } from './Combobox';
+import { useId } from 'react';
+
+const ColorPickerCombobox = ({ tokens, ...restProps }) => {
+  const props = {
+    defaultValue: '',
+    expanded: false,
+    options: Object.entries(tokens['Color'])
+      .filter(([_, value]) => isDesignToken(value))
+      .map(([_, token], index) => {
+        return {
+          selected: index === 1,
+          value: String(getTokenValue(token as any)),
+          label: (
+            <>
+              <ColorSample color={String(getTokenValue(token as any))} />
+              {String(getTokenValue(token as any))}
+            </>
+          ),
+        };
+      }),
+    ...restProps,
+  };
+
+  return <ComboboxStory id={props.id || useId()} {...props} />;
+};
+
+const ColorPickerPoc = ({ tokens }) => {
+  return (
+    <div className="utrecht-document voorbeeld-theme">
+      <ColorPickerCombobox
+        tokens={tokens}
+        id="xxasdijfpij21435"
+        label="basis.link.color"
+        value="purmerend.Color.cyan-6"
+      />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpij123f" label="basis.primary-action.seed.color" value="white" />
+      <ColorPickerCombobox
+        tokens={tokens}
+        id="xxasdijfpij123f"
+        label="basis.primary-action.background-color"
+        value="navy"
+      />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpij123f" label="basis.primary-action.color" value="white" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpij123f" label="basis.primary-action.hover.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi123jf" label="basis.secondary-action.seed.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi132jf" label="basis.disabled.seed.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315jf" label="basis.form-accent.seed.color" />
+
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315j1f" label="basis.border.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315j2f" label="basis.border.disabled.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315j4f" label="basis.border.focus.color" />
+
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315j3f" label="basis.document/background.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315j6f" label="basis.border.line.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315jf5" label="basis.border.focus.color" />
+
+      <ColorPickerCombobox tokens={tokens} id="xvxasdijfpi54315jf5" label="basis.button.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxvasdijfpi54315jf5" label="basis.button.hover.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasvdijfpi54315jf5" label="basis.button.disabled.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasvdijfpi54315jf5" label="basis.button.primary.background.color" />
+
+      <ColorPickerCombobox tokens={tokens} id="dxxasdijfpi54315jf5" label="basis.alert.error.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315jf5" label="basis.alert.oke.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54315jf5" label="basis.alert.warning.color" />
+
+      <ColorPickerCombobox tokens={tokens} id="dxxasdijfpi54315jf5" label="basis.form-control.focus.background.color" />
+      <ColorPickerCombobox tokens={tokens} id="xdxasdijfpi54315jf5" label="basis.form-control.focus.border.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasddijfpi54315jf5" label="basis.form-control.focus.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54d315jf5" label="basis.form-control.disabled.accent.color" />
+
+      <ColorPickerCombobox
+        tokens={tokens}
+        id="xxasdijfpi54315jf5"
+        label="basis.footer-contact-button-background-hover.color"
+      />
+      <ColorPickerCombobox
+        tokens={tokens}
+        id="xxasdijfpi54315jf5"
+        label="basis.footer-contact-button-text-hover.color"
+      />
+
+      <ColorPickerCombobox tokens={tokens} id="dxxasdijfpi54315jf5" label="basis.form-border.color" />
+      <ColorPickerCombobox tokens={tokens} id="xdxasdijfpi54315jf5" label="basis.menu.icon.color" />
+      <ColorPickerCombobox
+        tokens={tokens}
+        id="xxasddijfpi54315jf5"
+        label="basis.vacature.dienstverband.background.color"
+      />
+
+      <ColorPickerCombobox tokens={tokens} id="xxasdijdfpi54315jf5" label="basis.link.visited.color" />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54d315jfg5" label="basis.primary.icon.color" expanded />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'Theme Builder/Color Picker',
+  id: 'theme-builder-color-picker',
+  component: ColorPickerPoc,
+  args: {
+    tokens: {},
+  },
+  argTypes: {
+    tokens: {},
+  },
+} satisfies Meta<typeof ColorPickerPoc>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Purmerend: Story = {
+  args: {
+    tokens: purmerendScrapedTokens,
+  },
+};

packages/storybook/src/theme-builder/Combobox.tsx

@@ -0,0 +1,138 @@
+import {
+  Combobox,
+  ComboboxPopoverProps,
+  FormField,
+  FormLabel,
+  Listbox,
+  ListboxOption,
+  ListboxOptionGroup,
+  Textbox,
+} from '@utrecht/component-library-react';
+import { clsx } from 'clsx';
+import React, { PropsWithChildren, ReactNode } from 'react';
+
+export interface ComboboxStoryProps {
+  id: string;
+  name?: string;
+  activeId?: string;
+  popoverId?: string;
+  label?: string;
+  placeholder?: string;
+  expanded?: boolean;
+  defaultValue?: string;
+  position?: string;
+  options: {
+    id: string;
+    label: ReactNode;
+    active?: boolean;
+    selected?: boolean;
+    value?: any;
+    options?: {
+      id: string;
+      label: ReactNode;
+      active?: boolean;
+      selected?: boolean;
+      value?: any;
+    }[];
+  }[];
+}
+
+const ComboboxTextbox = ({ ...restProps }) => <Textbox className="utrecht-combobox__input" {...restProps} />;
+
+const ComboboxListboxPopover = ({
+  expanded,
+  position,
+  ...restProps
+}: PropsWithChildren<{ expanded?: boolean } & ComboboxPopoverProps>) => (
+  <Listbox
+    className={clsx('utrecht-combobox__popover', {
+      'utrecht-combobox__popover--block-end': !position || position === 'block-end',
+      'utrecht-combobox__popover--block-start': position === 'block-start',
+      'utrecht-combobox__popover--hidden': !expanded,
+    })}
+    hidden={!expanded}
+    tabIndex={-1}
+    {...restProps}
+  />
+);
+
+export const ComboboxStory = ({
+  id,
+  activeId,
+  options,
+  expanded,
+  popoverId,
+  label,
+  placeholder,
+  defaultValue,
+  position,
+}: ComboboxStoryProps) => {
+  const flatOptions = options.reduce(
+    (arr: { active?: boolean; id: string }[], item) =>
+      Array.isArray(item.options) ? [...arr, ...item.options] : [...arr, item],
+    [],
+  );
+  return (
+    <FormField
+      label={<FormLabel htmlFor={id}>{label}</FormLabel>}
+      input={
+        <Combobox>
+          <ComboboxTextbox
+            id={id}
+            autoComplete="off"
+            aria-autocomplete="list"
+            aria-haspopup="listbox"
+            aria-label={label || undefined}
+            placeholder={placeholder || undefined}
+            aria-activedescendant={flatOptions.find(({ active }) => active)?.id}
+            aria-controls={popoverId}
+            defaultValue={defaultValue}
+          />
+          {Array.isArray(options) && (
+            <ComboboxListboxPopover expanded={expanded} id={popoverId} position={position}>
+              {
+                options.reduce(
+                  (result: { list: ReactNode[]; itemIndex: number }, group) => {
+                    if (group.options && Array.isArray(group.options)) {
+                      result.list.push(
+                        <ListboxOptionGroup key={group.id} label={group?.label}>
+                          {group.options.map((item) => {
+                            result.itemIndex++;
+                            return (
+                              <ListboxOption
+                                active={item.active || (!!activeId && item.id === activeId)}
+                                key={item.id}
+                                id={item.id}
+                                selected={item.selected}
+                              >
+                                {item.label}
+                              </ListboxOption>
+                            );
+                          })}
+                        </ListboxOptionGroup>,
+                      );
+                    } else {
+                      result.list.push(
+                        <ListboxOption
+                          active={group.active || (!!activeId && group.id === activeId)}
+                          key={group.id}
+                          id={group.id}
+                          selected={group.selected}
+                        >
+                          {group.label}
+                        </ListboxOption>,
+                      );
+                    }
+
+                    return result;
+                  },
+                  { list: [], itemIndex: 0 },
+                ).list
+              }
+            </ComboboxListboxPopover>
+          )}
+        </Combobox>
+      }
+    ></FormField>
+  );
+};

packages/storybook/src/theme-builder/FontFamily.stories.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable react/prop-types */
+import { Meta, StoryObj } from '@storybook/react';
+import purmerendScrapedTokens from './project-wallace-purmerend.tokens.json';
+import { getTokenValue, isDesignToken } from '@nl-design-system-unstable/theme-toolkit/src/design-tokens';
+// import {} from '@utrecht/component-library-react/dist/css-module';
+import { ComboboxStory } from './Combobox';
+import { useId } from 'react';
+import { Heading } from '@utrecht/component-library-react';
+import { text } from 'stream/consumers';
+
+const projectWallaceWorkaround = (projectWallaceValue) => {
+  let value = projectWallaceValue;
+
+  // Project Wallace workaround
+  if (Array.isArray(value) && typeof value[0] === 'string') {
+    value = value[0];
+  }
+  return value;
+};
+
+const unquote = (fontFamily: string) => fontFamily.replace(/^["'\s]+|["'\s+]$/g, '');
+
+const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
+const sortByName = ([, a], [, b]) =>
+  stringSort(unquote(projectWallaceWorkaround(getTokenValue(a))), unquote(projectWallaceWorkaround(getTokenValue(b))));
+
+const FontFamilyPickerCombobox = ({ tokens, ...restProps }) => {
+  console.log(Object.entries(tokens).map(unquote(projectWallaceWorkaround(getTokenValue(a))));
+  const props = {
+    defaultValue: '',
+    expanded: false,
+    options: Object.entries(tokens['FontFamily'])
+      .filter(([_, value]) => isDesignToken(value))
+      // Filter out any values that are not CSS font-family values.
+      .filter(([_, token]) => !/var\(/.test(getTokenValue(token)))
+
+      // Filter out any values that are CSS font family `generic-name` values.
+      .filter(([_, token]) => {
+        const value = projectWallaceWorkaround(getTokenValue(token));
+
+        const isGenericName = ['monospace', 'sans-serif', 'serif'].includes(value);
+
+        return !isGenericName;
+      })
+      .sort(sortByName)
+
+      // For example, exclude: var(--my-fav-font)
+      .map(([_, token], index) => {
+        let fontFamily = unquote(projectWallaceWorkaround(getTokenValue(token)));
+
+        // Exclude any CSS font-family fallback values from the design token.
+        // For example: "Times New Roman", sans-serif
+        // will become: "Times New Roman"
+        fontFamily = String(getTokenValue(token as any)).replace(/,.*/gim, '');
+
+        return {
+          selected: index === 1,
+          value: String(getTokenValue(token as any)),
+          label: <div style={{ fontFamily }}>{fontFamily}</div>,
+        };
+      }),
+    ...restProps,
+  };
+
+  return <ComboboxStory id={props.id || useId()} {...props} />;
+};
+
+const FontFamilyPoc = ({ tokens }) => {
+  return (
+    <div className="utrecht-document voorbeeld-theme">
+      <FontFamilyPickerCombobox tokens={tokens} id="xxasdijfpi54315jfg5" label="basis.typography.body.font-family" />
+
+      <FontFamilyPickerCombobox tokens={tokens} id="xxasdijfpi54315jfg5" label="basis.typography.heading.font-family" />
+
+      <FontFamilyPickerCombobox
+        tokens={tokens}
+        id="xxasdijfpi54315jfg5"
+        label="basis.typography.input.font-family"
+        expanded
+      />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'Theme Builder/FontFamily Picker',
+  id: 'theme-builder-fontfamily-picker',
+  component: FontFamilyPoc,
+  args: {
+    tokens: {},
+  },
+  argTypes: {
+    tokens: {},
+  },
+} satisfies Meta<typeof FontFamilyPoc>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Purmerend: Story = {
+  args: {
+    tokens: purmerendScrapedTokens,
+  },
+};