Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }, | ||
| }; |