From e8a62bc8767f14db472c0fd0daecf2b16ae2114b Mon Sep 17 00:00:00 2001 From: steveoh Date: Wed, 6 Nov 2024 15:32:07 -0700 Subject: [PATCH] chore(uds): convert all items to typescript --- .vscode/settings.json | 1 + .../src/components/AlertDialog.stories.tsx | 41 +++-- .../src/components/Avatar.stories.tsx | 44 ++++- .../src/components/Banner.stories.tsx | 18 ++ .../src/components/{Banner.jsx => Banner.tsx} | 8 +- .../src/components/Button.stories.tsx | 7 +- .../src/components/Checkbox.stories.tsx | 14 +- .../src/components/Footer.stories.tsx | 3 +- .../src/components/FormErrors.stories.tsx | 21 +++ .../components/{Form.jsx => FormErrors.tsx} | 15 +- .../src/components/Geocode.stories.tsx | 14 +- ...{Header.stories.jsx => Header.stories.tsx} | 31 ++-- .../src/components/Link.stories.tsx | 35 ++-- .../src/components/ListBox.stories.tsx | 31 ++-- .../src/components/Menu.stories.tsx | 156 ++++++++-------- .../src/components/Popover.stories.tsx | 43 +++-- ...dioGroup.stories.tsx => Radio.stories.tsx} | 20 +- .../src/components/Select.stories.tsx | 33 ++-- .../src/components/Sherlock.jsx | 2 +- .../src/components/Sherlock.stories.jsx | 171 ++++++++---------- .../src/components/SocialMedia.stories.jsx | 10 - .../src/components/SocialMedia.stories.tsx | 16 ++ .../{SocialMedia.jsx => SocialMedia.tsx} | 0 .../src/components/Spinner.stories.tsx | 16 ++ .../components/{Spinner.jsx => Spinner.tsx} | 20 +- .../src/components/Switch.stories.tsx | 12 +- .../src/components/Tabs.stories.tsx | 71 ++++---- .../src/components/TagGroup.stories.tsx | 25 +-- .../src/components/TextField.stories.tsx | 24 ++- .../src/components/UtahIdLogin.stories.tsx | 11 +- packages/utah-design-system/src/index.js | 8 +- 31 files changed, 499 insertions(+), 422 deletions(-) create mode 100644 packages/utah-design-system/src/components/Banner.stories.tsx rename packages/utah-design-system/src/components/{Banner.jsx => Banner.tsx} (80%) create mode 100644 packages/utah-design-system/src/components/FormErrors.stories.tsx rename packages/utah-design-system/src/components/{Form.jsx => FormErrors.tsx} (68%) rename packages/utah-design-system/src/components/{Header.stories.jsx => Header.stories.tsx} (97%) rename packages/utah-design-system/src/components/{RadioGroup.stories.tsx => Radio.stories.tsx} (65%) delete mode 100644 packages/utah-design-system/src/components/SocialMedia.stories.jsx create mode 100644 packages/utah-design-system/src/components/SocialMedia.stories.tsx rename packages/utah-design-system/src/components/{SocialMedia.jsx => SocialMedia.tsx} (100%) create mode 100644 packages/utah-design-system/src/components/Spinner.stories.tsx rename packages/utah-design-system/src/components/{Spinner.jsx => Spinner.tsx} (68%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 9111e9ff..fb28fe93 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,7 @@ { "cSpell.words": [ "arcgis", + "autodocs", "baselayer", "basemap", "Centerlines", diff --git a/packages/utah-design-system/src/components/AlertDialog.stories.tsx b/packages/utah-design-system/src/components/AlertDialog.stories.tsx index 8bddfae0..053ed348 100644 --- a/packages/utah-design-system/src/components/AlertDialog.stories.tsx +++ b/packages/utah-design-system/src/components/AlertDialog.stories.tsx @@ -1,32 +1,35 @@ import type { Meta } from '@storybook/react'; import { DialogTrigger } from 'react-aria-components'; -import { AlertDialog } from './AlertDialog'; +import { AlertDialog as Component } from './AlertDialog'; import { Button } from './Button'; import { Modal } from './Modal'; -const meta: Meta = { - component: AlertDialog, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, tags: ['autodocs'], + decorators: [ + (Story) => ( + + + + + + + ), + ], + argTypes: {}, + args: { + title: 'Delete folder', + children: + 'Are you sure you want to delete "Documents"? All contents will be permanently destroyed.', + variant: 'destructive', + actionLabel: 'Delete', + }, }; export default meta; -export const Example = (args: any) => ( - - - - - - -); - -Example.args = { - title: 'Delete folder', - children: - 'Are you sure you want to delete "Documents"? All contents will be permanently destroyed.', - variant: 'destructive', - actionLabel: 'Delete', -}; +export const Example = {}; diff --git a/packages/utah-design-system/src/components/Avatar.stories.tsx b/packages/utah-design-system/src/components/Avatar.stories.tsx index 128db6b6..70665f0c 100644 --- a/packages/utah-design-system/src/components/Avatar.stories.tsx +++ b/packages/utah-design-system/src/components/Avatar.stories.tsx @@ -1,20 +1,44 @@ -import { Avatar } from './Avatar'; +import { Meta } from '@storybook/react'; +import { Avatar as Component } from './Avatar'; -export default { - component: Avatar, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + argTypes: {}, + args: { + user: { + email: 'ugrc-developers@utah.gov', + displayName: 'UGRC Developers', + emailVerified: true, + isAnonymous: false, + metadata: {}, + providerData: [], + refreshToken: '', + tenantId: '', + getIdToken: () => Promise.resolve(''), + getIdTokenResult: () => Promise.resolve({} as any), + reload: () => Promise.resolve(), + toJSON: () => ({}), + delete: () => Promise.resolve(), + phoneNumber: null, + photoURL: null, + providerId: '', + uid: '', + }, + }, }; -export const Example = (args: any) => ; -Example.args = { - user: { email: 'ugrc-developers@utah.gov', displayName: 'UGRC Developers' }, -}; - -export const Anonymous = (args: any) => ; +export default meta; -export const NoGravatar = (args: any) => ; +export const Example = {}; +export const Anonymous = (args: any) => ; +Anonymous.args = { + user: undefined, +}; +export const NoGravatar = (args: any) => ; NoGravatar.args = { user: { email: 'test@test.com', displayName: 'Test User' }, }; diff --git a/packages/utah-design-system/src/components/Banner.stories.tsx b/packages/utah-design-system/src/components/Banner.stories.tsx new file mode 100644 index 00000000..7ac9e016 --- /dev/null +++ b/packages/utah-design-system/src/components/Banner.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta } from '@storybook/react'; +import { Banner as Component } from './Banner.tsx'; + +const meta: Meta = { + component: Component, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + args: { + children: 'Something went wrong', + }, +}; + +export default meta; + +export const Example = {}; diff --git a/packages/utah-design-system/src/components/Banner.jsx b/packages/utah-design-system/src/components/Banner.tsx similarity index 80% rename from packages/utah-design-system/src/components/Banner.jsx rename to packages/utah-design-system/src/components/Banner.tsx index 50af47f0..c4cac43a 100644 --- a/packages/utah-design-system/src/components/Banner.jsx +++ b/packages/utah-design-system/src/components/Banner.tsx @@ -1,8 +1,7 @@ import { TriangleAlertIcon } from 'lucide-react'; +import { ReactNode } from 'react'; -import PropTypes from 'prop-types'; - -export const Banner = ({ children }) => { +export const Banner = ({ children }: { children: ReactNode }) => { return (
@@ -14,6 +13,3 @@ export const Banner = ({ children }) => {
); }; -Banner.propTypes = { - children: PropTypes.node, -}; diff --git a/packages/utah-design-system/src/components/Button.stories.tsx b/packages/utah-design-system/src/components/Button.stories.tsx index 75e2559d..745561c3 100644 --- a/packages/utah-design-system/src/components/Button.stories.tsx +++ b/packages/utah-design-system/src/components/Button.stories.tsx @@ -1,11 +1,12 @@ import { Meta } from '@storybook/react'; -import { Button } from './Button'; +import { Button as Component } from './Button'; -const meta: Meta = { - component: Button, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], argTypes: { variant: { control: 'select', diff --git a/packages/utah-design-system/src/components/Checkbox.stories.tsx b/packages/utah-design-system/src/components/Checkbox.stories.tsx index 0ee77055..60338441 100644 --- a/packages/utah-design-system/src/components/Checkbox.stories.tsx +++ b/packages/utah-design-system/src/components/Checkbox.stories.tsx @@ -1,10 +1,12 @@ -import { Checkbox } from './Checkbox'; +import { Meta } from '@storybook/react'; +import { Checkbox as Component } from './Checkbox'; -export default { - component: Checkbox, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], argTypes: {}, args: { isDisabled: false, @@ -12,6 +14,6 @@ export default { }, }; -export const Default = { - args: {}, -}; +export default meta; + +export const Example = {}; diff --git a/packages/utah-design-system/src/components/Footer.stories.tsx b/packages/utah-design-system/src/components/Footer.stories.tsx index 8139385e..88457ce6 100644 --- a/packages/utah-design-system/src/components/Footer.stories.tsx +++ b/packages/utah-design-system/src/components/Footer.stories.tsx @@ -10,8 +10,9 @@ import type { FooterProps } from './Footer.tsx'; const meta: Meta = { component: Component, parameters: { - layout: 'centered', + layout: 'fullscreen', }, + tags: ['autodocs'], argTypes: {}, args: {}, }; diff --git a/packages/utah-design-system/src/components/FormErrors.stories.tsx b/packages/utah-design-system/src/components/FormErrors.stories.tsx new file mode 100644 index 00000000..b4aa6c88 --- /dev/null +++ b/packages/utah-design-system/src/components/FormErrors.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta } from '@storybook/react'; +import { FormErrors as Component } from './FormErrors.tsx'; + +const meta: Meta = { + component: Component, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + args: { + errors: { + email: new Error('Email is required'), + password: new Error('Password is required'), + }, + }, +}; + +export default meta; + +export const Example = {}; diff --git a/packages/utah-design-system/src/components/Form.jsx b/packages/utah-design-system/src/components/FormErrors.tsx similarity index 68% rename from packages/utah-design-system/src/components/Form.jsx rename to packages/utah-design-system/src/components/FormErrors.tsx index b59416b6..03bb035c 100644 --- a/packages/utah-design-system/src/components/Form.jsx +++ b/packages/utah-design-system/src/components/FormErrors.tsx @@ -1,7 +1,6 @@ -import PropTypes from 'prop-types'; -import { Banner } from './Banner'; +import { Banner } from './Banner.tsx'; -export const FormErrors = ({ errors }) => { +export const FormErrors = ({ errors }: { errors: Record }) => { const entries = Object.entries(errors); if (entries.length === 0) { @@ -27,12 +26,9 @@ export const FormErrors = ({ errors }) => { ); }; -FormErrors.propTypes = { - errors: PropTypes.object.isRequired, -}; -export const FormError = ({ children }) => { - if (children?.length === 0) { +export const FormError = ({ children }: { children: React.ReactNode }) => { + if (!children) { return null; } @@ -42,6 +38,3 @@ export const FormError = ({ children }) => { ); }; -FormError.propTypes = { - children: PropTypes.node, -}; diff --git a/packages/utah-design-system/src/components/Geocode.stories.tsx b/packages/utah-design-system/src/components/Geocode.stories.tsx index f6aeb1fd..d203d51c 100644 --- a/packages/utah-design-system/src/components/Geocode.stories.tsx +++ b/packages/utah-design-system/src/components/Geocode.stories.tsx @@ -1,12 +1,14 @@ -import { Geocode } from './Geocode.js'; +import { Meta } from '@storybook/react'; +import { Geocode as Component } from './Geocode.js'; import { fn, waitFor, userEvent, within, expect } from '@storybook/test'; import { http, HttpResponse } from 'msw'; -export default { - component: Geocode, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], argTypes: { format: { control: { @@ -31,9 +33,9 @@ export default { }, }; -export const Default = { - args: {}, -}; +export default meta; + +export const Example = {}; export const Milepost = { args: { type: 'route-milepost' }, diff --git a/packages/utah-design-system/src/components/Header.stories.jsx b/packages/utah-design-system/src/components/Header.stories.tsx similarity index 97% rename from packages/utah-design-system/src/components/Header.stories.jsx rename to packages/utah-design-system/src/components/Header.stories.tsx index d6abd344..c72d2dde 100644 --- a/packages/utah-design-system/src/components/Header.stories.jsx +++ b/packages/utah-design-system/src/components/Header.stories.tsx @@ -1,4 +1,4 @@ -import { Header as Component } from './Header.tsx'; +import { Header as Component, HeaderProps } from './Header.tsx'; import { FirebaseAppProvider, FirebaseAuthProvider, @@ -7,11 +7,16 @@ import { import { OAuthProvider } from 'firebase/auth'; import { UtahIdLogin } from './UtahIdLogin.tsx'; import { firebaseConfig } from '../../firebase.ts'; +import { Meta } from '@storybook/react'; const provider = new OAuthProvider('oidc.utahid'); -export default { +const meta: Meta = { component: Component, + parameters: { + layout: 'fullscreen', + }, + tags: ['autodocs'], decorators: [ (Story) => ( @@ -26,8 +31,12 @@ export default { ), ], + argTypes: {}, + args: {}, }; +export default meta; + const Logo = () => ( ( ); -export const Default = { - render: (args) => , -}; +export const Example = {}; export const HasLogo = { - render: (args) => ( - - - - ), + args: { + children: , + }, }; const links = [ @@ -101,11 +106,13 @@ const links = [ ]; export const HasMenu = { - render: (args) => , + args: { + links: links, + }, }; export const HasAll = { - render: (args) => { + render: (args: HeaderProps) => { // eslint-disable-next-line react-hooks/rules-of-hooks const { currentUser, logout } = useFirebaseAuth(); diff --git a/packages/utah-design-system/src/components/Link.stories.tsx b/packages/utah-design-system/src/components/Link.stories.tsx index 335fcd2d..e479d8b3 100644 --- a/packages/utah-design-system/src/components/Link.stories.tsx +++ b/packages/utah-design-system/src/components/Link.stories.tsx @@ -1,34 +1,33 @@ import type { Meta } from '@storybook/react'; -import { Link, ExternalLink } from './Link'; +import { Link as Component, ExternalLink } from './Link'; -const meta: Meta = { - component: Link, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + decorators: [ + (Story) => ( +

+ +

+ ), + ], + argTypes: {}, args: { quiet: false, + href: 'https://www.imdb.com/title/tt6348138/', + children: 'The Missing Link', }, }; export default meta; -export const Example = (args: any) => ( -

- The missing link -

-); - -Example.args = { - href: 'https://www.imdb.com/title/tt6348138/', -}; +export const Example = {}; export const ExternalExample = (args: any) => ( -

+ <> The missing link -

+ ); - -ExternalExample.args = { - href: 'https://www.imdb.com/title/tt6348138/', -}; diff --git a/packages/utah-design-system/src/components/ListBox.stories.tsx b/packages/utah-design-system/src/components/ListBox.stories.tsx index 49b3ef68..572aac00 100644 --- a/packages/utah-design-system/src/components/ListBox.stories.tsx +++ b/packages/utah-design-system/src/components/ListBox.stories.tsx @@ -1,31 +1,28 @@ import type { Meta } from '@storybook/react'; -import { ListBox, ListBoxItem } from './ListBox'; +import { ListBox as Component, ListBoxItem } from './ListBox'; -const meta: Meta = { - component: ListBox, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + argTypes: {}, + args: { + onAction: undefined, + selectionMode: 'multiple', + }, }; export default meta; export const Example = (args: any) => ( - + Chocolate - Mint + + Mint + Strawberry Vanilla - + ); - -Example.args = { - onAction: null, - selectionMode: 'multiple', -}; - -export const DisabledItems = (args: any) => ; -DisabledItems.args = { - ...Example.args, - disabledKeys: ['mint'], -}; diff --git a/packages/utah-design-system/src/components/Menu.stories.tsx b/packages/utah-design-system/src/components/Menu.stories.tsx index 3c9d765a..85fc6011 100644 --- a/packages/utah-design-system/src/components/Menu.stories.tsx +++ b/packages/utah-design-system/src/components/Menu.stories.tsx @@ -2,97 +2,97 @@ import type { Meta } from '@storybook/react'; import { MoreHorizontal } from 'lucide-react'; import { MenuTrigger, Popover, SubmenuTrigger } from 'react-aria-components'; import { Button } from './Button'; -import { Menu, MenuItem, MenuSection, MenuSeparator } from './Menu'; +import { + Menu as Component, + MenuItem, + MenuSection, + MenuSeparator, +} from './Menu'; -const meta: Meta = { - component: Menu, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + decorators: [ + (Story) => ( + + + + + ), + ], + argTypes: {}, + args: {}, }; export default meta; export const Example = (args: any) => ( - - - - New… - Open… - - Save - Save as… - - Print… - - + + New… + Open… + + + Save + + Save as… + + Print… + ); -export const DisabledItems = (args: any) => ; -DisabledItems.args = { - disabledKeys: ['save'], -}; - export const Sections = (args: any) => ( - - - - - Repositories - Projects - Organizations - Stars - Sponsors - - - Profile - Set status - Sign out - - - + + + Repositories + Projects + Organizations + Stars + Sponsors + + + Profile + Set status + Sign out + + ); export const Submenu = (args: any) => ( - - - - New… - - Open - - - Open in New Window - Open in Current Window - - - - - Print… - - Share - - - SMS - Twitter - - Email - - - Work - Personal - - - - - - - - + + New… + + Open + + + Open in New Window + Open in Current Window + + + + + Print… + + Share + + + SMS + Twitter + + Email + + + Work + Personal + + + + + + + ); diff --git a/packages/utah-design-system/src/components/Popover.stories.tsx b/packages/utah-design-system/src/components/Popover.stories.tsx index 4b3703dc..bde9fbf7 100644 --- a/packages/utah-design-system/src/components/Popover.stories.tsx +++ b/packages/utah-design-system/src/components/Popover.stories.tsx @@ -3,13 +3,25 @@ import { HelpCircle } from 'lucide-react'; import { DialogTrigger, Heading } from 'react-aria-components'; import { Button } from './Button'; import { Dialog } from './Dialog'; -import { Popover } from './Popover'; +import { Popover as Component } from './Popover'; -const meta: Meta = { - component: Popover, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + decorators: [ + (Story) => ( + + + + + ), + ], + argTypes: {}, args: { showArrow: true, }, @@ -18,19 +30,14 @@ const meta: Meta = { export default meta; export const Example = (args: any) => ( - - - - - - Help - -

- For help accessing your account, please contact support. -

- - - + + + + Help + +

+ For help accessing your account, please contact support. +

+ + ); diff --git a/packages/utah-design-system/src/components/RadioGroup.stories.tsx b/packages/utah-design-system/src/components/Radio.stories.tsx similarity index 65% rename from packages/utah-design-system/src/components/RadioGroup.stories.tsx rename to packages/utah-design-system/src/components/Radio.stories.tsx index d675220f..18c89b9c 100644 --- a/packages/utah-design-system/src/components/RadioGroup.stories.tsx +++ b/packages/utah-design-system/src/components/Radio.stories.tsx @@ -1,11 +1,13 @@ +import { Meta } from '@storybook/react'; import { Button } from './Button.tsx'; -import { Radio, RadioGroup } from './Radio.tsx'; +import { Radio, RadioGroup as Component } from './Radio.tsx'; -export default { - component: RadioGroup, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], argTypes: {}, args: { label: 'Favorite sport', @@ -15,16 +17,18 @@ export default { children: ( <> Soccer - Baseball + + Baseball + Basketball ), }, }; -export const Default = { - args: {}, -}; +export default meta; + +export const Default = {}; export const Validation = (args: any) => (
( }} className="flex flex-col items-start gap-2" > - + diff --git a/packages/utah-design-system/src/components/Select.stories.tsx b/packages/utah-design-system/src/components/Select.stories.tsx index 0d8ad54a..ea94e2e3 100644 --- a/packages/utah-design-system/src/components/Select.stories.tsx +++ b/packages/utah-design-system/src/components/Select.stories.tsx @@ -1,13 +1,14 @@ import type { Meta } from '@storybook/react'; -import { Form } from 'react-aria-components'; import { Button } from './Button'; -import { Select, SelectItem, SelectSection } from './Select'; +import { Select as Component, SelectItem, SelectSection } from './Select'; -const meta: Meta = { - component: Select, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + argTypes: {}, args: { label: 'Ice cream flavor', }, @@ -16,21 +17,16 @@ const meta: Meta = { export default meta; export const Example = (args: any) => ( - + ); -export const DisabledItems = (args: any) => ; -DisabledItems.args = { - disabledKeys: ['mint'], -}; - export const Sections = (args: any) => ( - + ); Sections.args = { @@ -59,12 +55,17 @@ Sections.args = { }; export const Validation = (args: any) => ( - + { + event.preventDefault(); + }} + className="flex flex-col items-start gap-2" + > - + ); Validation.args = { diff --git a/packages/utah-design-system/src/components/Sherlock.jsx b/packages/utah-design-system/src/components/Sherlock.jsx index 86e94f23..54252a75 100644 --- a/packages/utah-design-system/src/components/Sherlock.jsx +++ b/packages/utah-design-system/src/components/Sherlock.jsx @@ -1,7 +1,7 @@ import Graphic from '@arcgis/core/Graphic.js'; import { escapeRegExp } from 'lodash-es'; import { SearchIcon, ChevronsUpDownIcon, CheckIcon } from 'lucide-react'; -import { Spinner } from './Spinner.jsx'; +import { Spinner } from './Spinner.tsx'; import { Input, ListBox, diff --git a/packages/utah-design-system/src/components/Sherlock.stories.jsx b/packages/utah-design-system/src/components/Sherlock.stories.jsx index 521c80eb..b5c1f7be 100644 --- a/packages/utah-design-system/src/components/Sherlock.stories.jsx +++ b/packages/utah-design-system/src/components/Sherlock.stories.jsx @@ -24,113 +24,88 @@ const url = 'https://masquerade.ugrc.utah.gov/arcgis/rest/services/UtahLocator/GeocodeServer'; const srid = 26912; -export const HasMasqueradeProvider = { - render: (args) => ( - - ), +export const Example = { + args: { + label: 'Select a location', + placeholder: 'Search with masquerade', + provider: masqueradeProvider(url, srid), + }, }; -export const HasAPIProvider = { - render: (args) => ( - - ), +export const APIProvider = { + args: { + label: 'Select a place', + placeholder: 'Search with the UGRC API', + provider: ugrcApiProvider( + 'agrc-dev', + 'location.gnis_place_names', + 'name', + 'county', + ), + }, }; -export const HasFeatureServiceProvider = { - render: (args) => ( - - ), +export const FeatureServiceProvider = { + args: { + label: 'Select a road', + placeholder: 'Search the roads map service', + provider: featureServiceProvider( + 'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/UtahRoads/FeatureServer/0', + 'FULLNAME', + 'COUNTY_L', + ), + }, }; -export const HasFeatureServiceProviderWithKyOptions = { - render: (args) => ( - { - request.headers.set( - // must use a CORS-safelisted request header or the request will fail - 'Accept-Language', - await new Promise((resolve) => - setTimeout(() => resolve('es'), 10), - ), - ); - }, - ], - }, +export const FeatureServiceProviderWithKyOptions = { + args: { + label: 'Select a road', + placeholder: 'Search the roads map service', + provider: featureServiceProvider( + 'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/UtahRoads/FeatureServer/0', + 'FULLNAME', + 'COUNTY_L', + { + hooks: { + beforeRequest: [ + async (request) => { + request.headers.set( + // must use a CORS-safelisted request header or the request will fail + 'Accept-Language', + await new Promise((resolve) => + setTimeout(() => resolve('es'), 10), + ), + ); + }, + ], }, - )} - onSherlockMatch={console.log} - /> - ), -}; - -export const HasMultiProvider = { - render: (args) => ( - - ), + }, + ), + }, }; -export const HasError = { - render: (args) => ( - - ), + ), + masqueradeProvider(url, srid), + ]), + }, +}; + +export const Error = { + args: { + label: 'Select a road', + placeholder: 'Search the roads map service', + provider: featureServiceProvider( + 'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/UtahRoads/FeatureServer/0', + 'BAD_FIELD', + ), + }, }; diff --git a/packages/utah-design-system/src/components/SocialMedia.stories.jsx b/packages/utah-design-system/src/components/SocialMedia.stories.jsx deleted file mode 100644 index 5ba59fd9..00000000 --- a/packages/utah-design-system/src/components/SocialMedia.stories.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { SocialMedia as Component } from './SocialMedia.jsx'; - -export default { - component: Component, - parameters: { - layout: 'centered', - }, -}; - -export const Example = () => ; diff --git a/packages/utah-design-system/src/components/SocialMedia.stories.tsx b/packages/utah-design-system/src/components/SocialMedia.stories.tsx new file mode 100644 index 00000000..7cfec389 --- /dev/null +++ b/packages/utah-design-system/src/components/SocialMedia.stories.tsx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/react'; +import { SocialMedia as Component } from './SocialMedia.tsx'; + +const meta: Meta = { + component: Component, + parameters: { + layout: 'fullscreen', + }, + tags: ['autodocs'], + argTypes: {}, + args: {}, +}; + +export default meta; + +export const Example = {}; diff --git a/packages/utah-design-system/src/components/SocialMedia.jsx b/packages/utah-design-system/src/components/SocialMedia.tsx similarity index 100% rename from packages/utah-design-system/src/components/SocialMedia.jsx rename to packages/utah-design-system/src/components/SocialMedia.tsx diff --git a/packages/utah-design-system/src/components/Spinner.stories.tsx b/packages/utah-design-system/src/components/Spinner.stories.tsx new file mode 100644 index 00000000..be6317be --- /dev/null +++ b/packages/utah-design-system/src/components/Spinner.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta } from '@storybook/react'; +import { Spinner as Component } from './Spinner'; + +const meta: Meta = { + component: Component, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + args: {}, +}; + +export default meta; + +export const Example = {}; diff --git a/packages/utah-design-system/src/components/Spinner.jsx b/packages/utah-design-system/src/components/Spinner.tsx similarity index 68% rename from packages/utah-design-system/src/components/Spinner.jsx rename to packages/utah-design-system/src/components/Spinner.tsx index cece7c60..8a95f693 100644 --- a/packages/utah-design-system/src/components/Spinner.jsx +++ b/packages/utah-design-system/src/components/Spinner.tsx @@ -1,17 +1,3 @@ -// import { twMerge } from 'tailwind-merge'; - -// const SIZES = { -// xs: 'h-3 w-3', -// sm: 'h-3.5 w-3.5', -// base: 'h-4 w-4', -// lg: 'h-[1.125rem] w-[1.125rem]', -// xl: 'h-5 w-5', -// custom: null, -// }; - -/** - * @returns {JSX.Element} - */ export const Spinner = () => { return ( { ); }; -Spinner.sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -Spinner.minDelay = async (promise, ms = 2500) => { +Spinner.sleep = async (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + +Spinner.minDelay = async (promise: Promise, ms = 2500) => { await Promise.allSettled([promise, Spinner.sleep(ms)]); return promise; diff --git a/packages/utah-design-system/src/components/Switch.stories.tsx b/packages/utah-design-system/src/components/Switch.stories.tsx index bd05d919..bffbc572 100644 --- a/packages/utah-design-system/src/components/Switch.stories.tsx +++ b/packages/utah-design-system/src/components/Switch.stories.tsx @@ -1,14 +1,18 @@ import type { Meta } from '@storybook/react'; -import { Switch } from './Switch'; +import { Switch as Component } from './Switch'; -const meta: Meta = { - component: Switch, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, tags: ['autodocs'], + argTypes: {}, + args: { + children: 'Wi-Fi', + }, }; export default meta; -export const Example = (args: any) => Wi-Fi; +export const Example = {}; diff --git a/packages/utah-design-system/src/components/Tabs.stories.tsx b/packages/utah-design-system/src/components/Tabs.stories.tsx index 8d551c30..2c26a51e 100644 --- a/packages/utah-design-system/src/components/Tabs.stories.tsx +++ b/packages/utah-design-system/src/components/Tabs.stories.tsx @@ -1,50 +1,51 @@ import type { Meta } from '@storybook/react'; -import { Tab, TabList, TabPanel, Tabs } from './Tabs'; +import { Tab, TabList, TabPanel, Tabs as Component } from './Tabs'; -const meta: Meta = { - component: Tabs, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], + argTypes: {}, + args: {}, }; export default meta; export const Example = (args: any) => ( -
- - - Founding of Rome - Monarchy and Republic - - Empire - - - - Arma virumque cano, Troiae qui primus ab oris. - - Senatus Populusque Romanus. - Alea jacta est. - -
+ + + Founding of Rome + Monarchy and Republic + + Empire + + + Arma virumque cano, Troiae qui primus ab oris. + Senatus Populusque Romanus. + Alea jacta est. + ); export const Vertical = (args: any) => ( -
- - - Founding of Rome - Monarchy and Republic - - Empire - - - - Arma virumque cano, Troiae qui primus ab oris. - - Senatus Populusque Romanus. - Alea jacta est. - -
+ + + Founding of Rome + Monarchy and Republic + + Empire + + + Arma virumque cano, Troiae qui primus ab oris. + Senatus Populusque Romanus. + Alea jacta est. + ); diff --git a/packages/utah-design-system/src/components/TagGroup.stories.tsx b/packages/utah-design-system/src/components/TagGroup.stories.tsx index 58f510bd..9c58020a 100644 --- a/packages/utah-design-system/src/components/TagGroup.stories.tsx +++ b/packages/utah-design-system/src/components/TagGroup.stories.tsx @@ -1,26 +1,27 @@ import type { Meta } from '@storybook/react'; -import { Tag, TagGroup } from './TagGroup'; +import { Tag, TagGroup as Component } from './TagGroup'; -const meta: Meta = { - component: TagGroup, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', + actions: { argTypesRegex: '^on.*' }, + }, + tags: ['autodocs'], + argTypes: {}, + args: { + label: 'Ice cream flavor', + selectionMode: 'single', }, }; export default meta; export const Example = (args: any) => ( - + Chocolate - Mint + Mint Strawberry Vanilla - + ); - -Example.args = { - label: 'Ice cream flavor', - selectionMode: 'single', - onRemove: (key: string) => console.log('Removed:', key), -}; diff --git a/packages/utah-design-system/src/components/TextField.stories.tsx b/packages/utah-design-system/src/components/TextField.stories.tsx index bf9374c5..c732d7e3 100644 --- a/packages/utah-design-system/src/components/TextField.stories.tsx +++ b/packages/utah-design-system/src/components/TextField.stories.tsx @@ -1,14 +1,15 @@ import type { Meta } from '@storybook/react'; -import { Form } from 'react-aria-components'; import { Button } from './Button'; -import { TextField } from './TextField'; +import { TextField as Component } from './TextField'; import { Controller, useForm } from 'react-hook-form'; -const meta: Meta = { - component: TextField, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], + argTypes: {}, args: { label: 'Name', }, @@ -16,15 +17,20 @@ const meta: Meta = { export default meta; -export const Example = (args: any) => ; +export const Example = {}; export const HtmlValidation = (args: any) => ( -
- + { + event.preventDefault(); + }} + className="flex flex-col items-start gap-2" + > + - + ); export const ReactHookFormValidation = (args: any) => { @@ -44,7 +50,7 @@ export const ReactHookFormValidation = (args: any) => { name="name" rules={{ required: 'Name is required' }} render={({ field, fieldState }) => ( - = { - component: UtahIdLogin, +const meta: Meta = { + component: Component, parameters: { layout: 'centered', }, + tags: ['autodocs'], decorators: [ (Story) => ( @@ -20,8 +21,10 @@ const meta: Meta = { ), ], + argTypes: {}, + args: {}, }; export default meta; -export const Example = (args: any) => ; +export const Example = {}; diff --git a/packages/utah-design-system/src/index.js b/packages/utah-design-system/src/index.js index 42e81080..0f9348fd 100644 --- a/packages/utah-design-system/src/index.js +++ b/packages/utah-design-system/src/index.js @@ -1,13 +1,13 @@ export * from './components/AlertDialog.tsx'; export * from './components/Avatar.tsx'; -export * from './components/Banner.jsx'; +export * from './components/Banner.tsx'; export * from './components/Button.tsx'; export * from './components/Checkbox.tsx'; export * from './components/Dialog.tsx'; export * from './components/Drawer.tsx'; export * from './components/Field.tsx'; export * from './components/Footer.tsx'; -export * from './components/Form.jsx'; +export * from './components/FormErrors.tsx'; export * from './components/Geocode.tsx'; export * from './components/Header.tsx'; export * from './components/Link.tsx'; @@ -18,8 +18,8 @@ export * from './components/Popover.tsx'; export * from './components/Radio.tsx'; export * from './components/Select.tsx'; export * from './components/Sherlock.jsx'; -export * from './components/SocialMedia.jsx'; -export * from './components/Spinner.jsx'; +export * from './components/SocialMedia.tsx'; +export * from './components/Spinner.tsx'; export * from './components/Switch.tsx'; export * from './components/Tabs.tsx'; export * from './components/TagGroup.tsx';