From 2992ff6c9d29ae8c936b34bd89e126cd8600bebb Mon Sep 17 00:00:00 2001 From: KJ Monahan Date: Mon, 4 Nov 2024 11:02:11 -0600 Subject: [PATCH 1/4] [148] Convert layout components to use typed objects --- .eslintrc.json | 2 +- source/02-layouts/Constrain/Constrain.stories.tsx | 2 +- source/02-layouts/Constrain/Constrain.tsx | 3 ++- source/02-layouts/Constrain/constrain.yml | 2 -- source/02-layouts/Constrain/constrainArgs.ts | 5 +++++ source/02-layouts/Footer/Footer.stories.tsx | 2 +- source/02-layouts/Footer/Footer.tsx | 3 ++- source/02-layouts/Footer/footer.yml | 4 ---- source/02-layouts/Footer/footerArgs.ts | 7 +++++++ source/02-layouts/Grid/Grid.stories.tsx | 2 +- source/02-layouts/Grid/Grid.tsx | 1 + source/02-layouts/Grid/grid.yml | 3 --- source/02-layouts/Grid/gridArgs.ts | 6 ++++++ source/02-layouts/Header/Header.stories.tsx | 2 +- source/02-layouts/Header/Header.tsx | 3 ++- source/02-layouts/Header/header.yml | 4 ---- source/02-layouts/Header/headerArgs.ts | 7 +++++++ .../02-layouts/InlineForm/InlineForm.stories.tsx | 2 +- source/02-layouts/InlineForm/InlineForm.tsx | 3 ++- source/02-layouts/InlineForm/inline-form.yml | 3 --- source/02-layouts/InlineForm/inlineFormArgs.ts | 6 ++++++ source/02-layouts/Main/Main.stories.tsx | 2 +- source/02-layouts/Main/Main.tsx | 5 +++-- source/02-layouts/Main/main.yml | 5 ----- source/02-layouts/Main/mainArgs.ts | 8 ++++++++ source/02-layouts/Media/Media.stories.tsx | 5 +---- source/02-layouts/Media/Media.tsx | 3 ++- source/02-layouts/Media/media.yml | 7 ------- source/02-layouts/Media/mediaArgs.tsx | 14 ++++++++++++++ .../ResponsiveTable/ResponsiveTable.stories.tsx | 2 +- .../02-layouts/ResponsiveTable/ResponsiveTable.tsx | 3 ++- .../ResponsiveTable/responsive-table.yml | 2 -- .../ResponsiveTable/responsiveTableArgs.ts | 5 +++++ source/02-layouts/Section/Section.stories.tsx | 2 +- source/02-layouts/Section/Section.tsx | 3 ++- source/02-layouts/Section/section.yml | 4 ---- source/02-layouts/Section/sectionArgs.ts | 7 +++++++ source/02-layouts/Sidebar/Sidebar.stories.tsx | 2 +- source/02-layouts/Sidebar/Sidebar.tsx | 3 ++- source/02-layouts/Sidebar/sidebar.yml | 2 -- source/02-layouts/Sidebar/sidebarArgs.ts | 6 ++++++ .../SiteContainer/SiteContainer.stories.tsx | 14 +++++++------- source/02-layouts/SiteContainer/SiteContainer.tsx | 3 ++- source/02-layouts/SiteContainer/site-container.yml | 2 -- .../02-layouts/SiteContainer/siteContainerArgs.tsx | 7 +++++++ 45 files changed, 118 insertions(+), 70 deletions(-) delete mode 100644 source/02-layouts/Constrain/constrain.yml create mode 100644 source/02-layouts/Constrain/constrainArgs.ts delete mode 100644 source/02-layouts/Footer/footer.yml create mode 100644 source/02-layouts/Footer/footerArgs.ts delete mode 100644 source/02-layouts/Grid/grid.yml create mode 100644 source/02-layouts/Grid/gridArgs.ts delete mode 100644 source/02-layouts/Header/header.yml create mode 100644 source/02-layouts/Header/headerArgs.ts delete mode 100644 source/02-layouts/InlineForm/inline-form.yml create mode 100644 source/02-layouts/InlineForm/inlineFormArgs.ts delete mode 100644 source/02-layouts/Main/main.yml create mode 100644 source/02-layouts/Main/mainArgs.ts delete mode 100644 source/02-layouts/Media/media.yml create mode 100644 source/02-layouts/Media/mediaArgs.tsx delete mode 100644 source/02-layouts/ResponsiveTable/responsive-table.yml create mode 100644 source/02-layouts/ResponsiveTable/responsiveTableArgs.ts delete mode 100644 source/02-layouts/Section/section.yml create mode 100644 source/02-layouts/Section/sectionArgs.ts delete mode 100644 source/02-layouts/Sidebar/sidebar.yml create mode 100644 source/02-layouts/Sidebar/sidebarArgs.ts delete mode 100644 source/02-layouts/SiteContainer/site-container.yml create mode 100644 source/02-layouts/SiteContainer/siteContainerArgs.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 2f805c12..65a270eb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -31,7 +31,7 @@ }, "overrides": [ { - "files": ["**/*.stories.tsx"], + "files": ["**/*.stories.tsx", "**/*Args.tsx"], "rules": { "@next/next/no-img-element": "off", "@typescript-eslint/no-unsafe-assignment": "off", diff --git a/source/02-layouts/Constrain/Constrain.stories.tsx b/source/02-layouts/Constrain/Constrain.stories.tsx index 87301d1c..5fdc370b 100644 --- a/source/02-layouts/Constrain/Constrain.stories.tsx +++ b/source/02-layouts/Constrain/Constrain.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import ConstrainLayout from './Constrain'; -import constrainArgs from './constrain.yml'; +import constrainArgs from './constrainArgs'; const meta: Meta = { title: 'Layouts/Constrain', diff --git a/source/02-layouts/Constrain/Constrain.tsx b/source/02-layouts/Constrain/Constrain.tsx index be345ad1..f56d14b9 100644 --- a/source/02-layouts/Constrain/Constrain.tsx +++ b/source/02-layouts/Constrain/Constrain.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import styles from './constrain.module.css'; interface ConstrainProps extends GessoComponent { @@ -21,3 +21,4 @@ function Constrain({ } export default Constrain; +export type { ConstrainProps }; diff --git a/source/02-layouts/Constrain/constrain.yml b/source/02-layouts/Constrain/constrain.yml deleted file mode 100644 index 84dc5daa..00000000 --- a/source/02-layouts/Constrain/constrain.yml +++ /dev/null @@ -1,2 +0,0 @@ ---- -modifierClasses: '' diff --git a/source/02-layouts/Constrain/constrainArgs.ts b/source/02-layouts/Constrain/constrainArgs.ts new file mode 100644 index 00000000..adb8d9aa --- /dev/null +++ b/source/02-layouts/Constrain/constrainArgs.ts @@ -0,0 +1,5 @@ +import { ConstrainProps } from '@/source/02-layouts/Constrain/Constrain'; + +export default { + modifierClasses: '', +} satisfies ConstrainProps; diff --git a/source/02-layouts/Footer/Footer.stories.tsx b/source/02-layouts/Footer/Footer.stories.tsx index a779997f..ccb861ff 100644 --- a/source/02-layouts/Footer/Footer.stories.tsx +++ b/source/02-layouts/Footer/Footer.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import FooterLayout from './Footer'; -import footerArgs from './footer.yml'; +import footerArgs from './footerArgs'; const meta: Meta = { title: 'Layouts/Footer', diff --git a/source/02-layouts/Footer/Footer.tsx b/source/02-layouts/Footer/Footer.tsx index 438a9bf8..5450a039 100644 --- a/source/02-layouts/Footer/Footer.tsx +++ b/source/02-layouts/Footer/Footer.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { ConstrainComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import Constrain from '../Constrain/Constrain'; import styles from './footer.module.css'; @@ -27,3 +27,4 @@ function Footer({ } export default Footer; +export type { FooterProps }; diff --git a/source/02-layouts/Footer/footer.yml b/source/02-layouts/Footer/footer.yml deleted file mode 100644 index caeb5abc..00000000 --- a/source/02-layouts/Footer/footer.yml +++ /dev/null @@ -1,4 +0,0 @@ ---- -hasConstrain: true -modifierClasses: '' -constrainClasses: '' diff --git a/source/02-layouts/Footer/footerArgs.ts b/source/02-layouts/Footer/footerArgs.ts new file mode 100644 index 00000000..b7ea20a3 --- /dev/null +++ b/source/02-layouts/Footer/footerArgs.ts @@ -0,0 +1,7 @@ +import { FooterProps } from '@/source/02-layouts/Footer/Footer'; + +export default { + hasConstrain: true, + modifierClasses: '', + constrainClasses: '', +} satisfies FooterProps; diff --git a/source/02-layouts/Grid/Grid.stories.tsx b/source/02-layouts/Grid/Grid.stories.tsx index 7dfb472d..ec4f1610 100644 --- a/source/02-layouts/Grid/Grid.stories.tsx +++ b/source/02-layouts/Grid/Grid.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import GridLayout from './Grid'; -import gridArgs from './grid.yml'; +import gridArgs from './gridArgs'; function GridDemo(): JSX.Element { const arr = Array.from(Array(6).keys()); diff --git a/source/02-layouts/Grid/Grid.tsx b/source/02-layouts/Grid/Grid.tsx index 4a4f30ed..a4a983d9 100644 --- a/source/02-layouts/Grid/Grid.tsx +++ b/source/02-layouts/Grid/Grid.tsx @@ -26,3 +26,4 @@ function Grid({ } export default Grid; +export type { GridProps }; diff --git a/source/02-layouts/Grid/grid.yml b/source/02-layouts/Grid/grid.yml deleted file mode 100644 index 1d38e77d..00000000 --- a/source/02-layouts/Grid/grid.yml +++ /dev/null @@ -1,3 +0,0 @@ ---- -numCols: 3 -modifierClasses: '' diff --git a/source/02-layouts/Grid/gridArgs.ts b/source/02-layouts/Grid/gridArgs.ts new file mode 100644 index 00000000..ecd70eee --- /dev/null +++ b/source/02-layouts/Grid/gridArgs.ts @@ -0,0 +1,6 @@ +import { GridProps } from '@/source/02-layouts/Grid/Grid'; + +export default { + numCols: 3, + modifierClasses: '', +} satisfies GridProps; diff --git a/source/02-layouts/Header/Header.stories.tsx b/source/02-layouts/Header/Header.stories.tsx index 3a3f2218..045944c3 100644 --- a/source/02-layouts/Header/Header.stories.tsx +++ b/source/02-layouts/Header/Header.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import HeaderLayout from './Header'; -import headerArgs from './header.yml'; +import headerArgs from './headerArgs'; const meta: Meta = { title: 'Layouts/Header', diff --git a/source/02-layouts/Header/Header.tsx b/source/02-layouts/Header/Header.tsx index 623e1823..42302d6b 100644 --- a/source/02-layouts/Header/Header.tsx +++ b/source/02-layouts/Header/Header.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { ConstrainComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import Constrain from '../Constrain/Constrain'; import styles from './header.module.css'; @@ -24,3 +24,4 @@ function Header({ } export default Header; +export type { HeaderProps }; diff --git a/source/02-layouts/Header/header.yml b/source/02-layouts/Header/header.yml deleted file mode 100644 index caeb5abc..00000000 --- a/source/02-layouts/Header/header.yml +++ /dev/null @@ -1,4 +0,0 @@ ---- -hasConstrain: true -modifierClasses: '' -constrainClasses: '' diff --git a/source/02-layouts/Header/headerArgs.ts b/source/02-layouts/Header/headerArgs.ts new file mode 100644 index 00000000..7948657d --- /dev/null +++ b/source/02-layouts/Header/headerArgs.ts @@ -0,0 +1,7 @@ +import { HeaderProps } from '@/source/02-layouts/Header/Header'; + +export default { + hasConstrain: true, + modifierClasses: '', + constrainClasses: '', +} satisfies HeaderProps; diff --git a/source/02-layouts/InlineForm/InlineForm.stories.tsx b/source/02-layouts/InlineForm/InlineForm.stories.tsx index 924b788f..d6369527 100644 --- a/source/02-layouts/InlineForm/InlineForm.stories.tsx +++ b/source/02-layouts/InlineForm/InlineForm.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import InlineFormLayout from './InlineForm'; -import inlineFormArgs from './inline-form.yml'; +import inlineFormArgs from './inlineFormArgs'; const meta: Meta = { title: 'Layouts/Inline Form', diff --git a/source/02-layouts/InlineForm/InlineForm.tsx b/source/02-layouts/InlineForm/InlineForm.tsx index 12849bcd..4f298d54 100644 --- a/source/02-layouts/InlineForm/InlineForm.tsx +++ b/source/02-layouts/InlineForm/InlineForm.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import styles from './inline-form.module.css'; interface InlineFormProps extends GessoComponent { @@ -23,3 +23,4 @@ function InlineForm({ } export default InlineForm; +export type { InlineFormProps }; diff --git a/source/02-layouts/InlineForm/inline-form.yml b/source/02-layouts/InlineForm/inline-form.yml deleted file mode 100644 index 6330aec7..00000000 --- a/source/02-layouts/InlineForm/inline-form.yml +++ /dev/null @@ -1,3 +0,0 @@ ---- -wrap: true -modifierClasses: '' diff --git a/source/02-layouts/InlineForm/inlineFormArgs.ts b/source/02-layouts/InlineForm/inlineFormArgs.ts new file mode 100644 index 00000000..3b39bf3b --- /dev/null +++ b/source/02-layouts/InlineForm/inlineFormArgs.ts @@ -0,0 +1,6 @@ +import { InlineFormProps } from '@/source/02-layouts/InlineForm/InlineForm'; + +export default { + wrap: true, + modifierClasses: '', +} satisfies InlineFormProps; diff --git a/source/02-layouts/Main/Main.stories.tsx b/source/02-layouts/Main/Main.stories.tsx index 14aa815a..48ccde60 100644 --- a/source/02-layouts/Main/Main.stories.tsx +++ b/source/02-layouts/Main/Main.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import MainLayout from './Main'; -import mainArgs from './main.yml'; +import mainArgs from './mainArgs'; const meta: Meta = { title: 'Layouts/Main', diff --git a/source/02-layouts/Main/Main.tsx b/source/02-layouts/Main/Main.tsx index 4f4db0f9..c8c13f5f 100644 --- a/source/02-layouts/Main/Main.tsx +++ b/source/02-layouts/Main/Main.tsx @@ -1,12 +1,12 @@ import clsx from 'clsx'; import { ConstrainComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import Constrain from '../Constrain/Constrain'; import styles from './main.module.css'; interface MainProps extends ConstrainComponent { id?: string; - children: ReactNode; + children?: ReactNode; } function Main({ @@ -31,3 +31,4 @@ function Main({ } export default Main; +export type { MainProps }; diff --git a/source/02-layouts/Main/main.yml b/source/02-layouts/Main/main.yml deleted file mode 100644 index cf3cb976..00000000 --- a/source/02-layouts/Main/main.yml +++ /dev/null @@ -1,5 +0,0 @@ ---- -id: 'main' -hasConstrain: true -modifierClasses: '' -constrainClasses: '' diff --git a/source/02-layouts/Main/mainArgs.ts b/source/02-layouts/Main/mainArgs.ts new file mode 100644 index 00000000..ca6120e9 --- /dev/null +++ b/source/02-layouts/Main/mainArgs.ts @@ -0,0 +1,8 @@ +import { MainProps } from '@/source/02-layouts/Main/Main'; + +export default { + id: 'main', + hasConstrain: true, + modifierClasses: '', + constrainClasses: '', +} satisfies MainProps; diff --git a/source/02-layouts/Media/Media.stories.tsx b/source/02-layouts/Media/Media.stories.tsx index 381585c7..0397eb2e 100644 --- a/source/02-layouts/Media/Media.stories.tsx +++ b/source/02-layouts/Media/Media.stories.tsx @@ -1,8 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; -import parse from 'html-react-parser'; import MediaLayout from './Media'; import styles from './media.module.css'; -import mediaArgs from './media.yml'; +import mediaArgs from './mediaArgs'; const meta: Meta = { title: 'Layouts/Media', @@ -22,8 +21,6 @@ type Story = StoryObj; const Default: Story = { args: { ...mediaArgs, - media: parse(mediaArgs.media), - mediaContent: parse(mediaArgs.mediaContent), }, }; diff --git a/source/02-layouts/Media/Media.tsx b/source/02-layouts/Media/Media.tsx index 6442b1cd..a6a86e0d 100644 --- a/source/02-layouts/Media/Media.tsx +++ b/source/02-layouts/Media/Media.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import styles from './media.module.css'; interface MediaProps extends GessoComponent { @@ -22,3 +22,4 @@ function Media({ } export default Media; +export type { MediaProps }; diff --git a/source/02-layouts/Media/media.yml b/source/02-layouts/Media/media.yml deleted file mode 100644 index 4c6e1ea1..00000000 --- a/source/02-layouts/Media/media.yml +++ /dev/null @@ -1,7 +0,0 @@ ---- -media: |- - Media Image -mediaContent: |- -

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae - necessitatibus fuga provident aut.

-modifierClasses: '' diff --git a/source/02-layouts/Media/mediaArgs.tsx b/source/02-layouts/Media/mediaArgs.tsx new file mode 100644 index 00000000..78f4d946 --- /dev/null +++ b/source/02-layouts/Media/mediaArgs.tsx @@ -0,0 +1,14 @@ +import { MediaProps } from '@/source/02-layouts/Media/Media'; + +export default { + media: ( + Media Image + ), + mediaContent: ( +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae + necessitatibus fuga provident aut. +

+ ), + modifierClasses: '', +} satisfies MediaProps; diff --git a/source/02-layouts/ResponsiveTable/ResponsiveTable.stories.tsx b/source/02-layouts/ResponsiveTable/ResponsiveTable.stories.tsx index 69e1f226..e90a33fd 100644 --- a/source/02-layouts/ResponsiveTable/ResponsiveTable.stories.tsx +++ b/source/02-layouts/ResponsiveTable/ResponsiveTable.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import ResponsiveTableComponent from './ResponsiveTable'; -import responsiveTableArgs from './responsive-table.yml'; +import responsiveTableArgs from './responsiveTableArgs'; const meta: Meta = { title: 'Layouts/Responsive Table', diff --git a/source/02-layouts/ResponsiveTable/ResponsiveTable.tsx b/source/02-layouts/ResponsiveTable/ResponsiveTable.tsx index 45ebaec9..c35a99b6 100644 --- a/source/02-layouts/ResponsiveTable/ResponsiveTable.tsx +++ b/source/02-layouts/ResponsiveTable/ResponsiveTable.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import styles from './responsive-table.module.css'; interface ResponsiveTableProps extends GessoComponent { @@ -26,3 +26,4 @@ function ResponsiveTable({ } export default ResponsiveTable; +export type { ResponsiveTableProps }; diff --git a/source/02-layouts/ResponsiveTable/responsive-table.yml b/source/02-layouts/ResponsiveTable/responsive-table.yml deleted file mode 100644 index 8cbeded9..00000000 --- a/source/02-layouts/ResponsiveTable/responsive-table.yml +++ /dev/null @@ -1,2 +0,0 @@ ---- -labelledBy: 'tablecaption01' diff --git a/source/02-layouts/ResponsiveTable/responsiveTableArgs.ts b/source/02-layouts/ResponsiveTable/responsiveTableArgs.ts new file mode 100644 index 00000000..1f125088 --- /dev/null +++ b/source/02-layouts/ResponsiveTable/responsiveTableArgs.ts @@ -0,0 +1,5 @@ +import { ResponsiveTableProps } from '@/source/02-layouts/ResponsiveTable/ResponsiveTable'; + +export default { + labelledBy: 'tablecaption01', +} satisfies ResponsiveTableProps; diff --git a/source/02-layouts/Section/Section.stories.tsx b/source/02-layouts/Section/Section.stories.tsx index 4d2b1572..14d0de47 100644 --- a/source/02-layouts/Section/Section.stories.tsx +++ b/source/02-layouts/Section/Section.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import SectionLayout from './Section'; -import sectionArgs from './section.yml'; +import sectionArgs from './sectionArgs'; const meta: Meta = { title: 'Layouts/Section', diff --git a/source/02-layouts/Section/Section.tsx b/source/02-layouts/Section/Section.tsx index e2e73df2..2d42e892 100644 --- a/source/02-layouts/Section/Section.tsx +++ b/source/02-layouts/Section/Section.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { ConstrainComponent } from 'gesso'; -import { ElementType, ReactNode } from 'react'; +import { ElementType, JSX, ReactNode } from 'react'; import Constrain from '../Constrain/Constrain'; import styles from './section.module.css'; @@ -29,3 +29,4 @@ function Section({ } export default Section; +export type { SectionProps }; diff --git a/source/02-layouts/Section/section.yml b/source/02-layouts/Section/section.yml deleted file mode 100644 index 80f47862..00000000 --- a/source/02-layouts/Section/section.yml +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 'Section title' -hasConstrain: false -titleElement: 'h2' diff --git a/source/02-layouts/Section/sectionArgs.ts b/source/02-layouts/Section/sectionArgs.ts new file mode 100644 index 00000000..9473e9a3 --- /dev/null +++ b/source/02-layouts/Section/sectionArgs.ts @@ -0,0 +1,7 @@ +import { SectionProps } from '@/source/02-layouts/Section/Section'; + +export default { + title: 'Section title', + hasConstrain: false, + titleElement: 'h2', +} satisfies SectionProps; diff --git a/source/02-layouts/Sidebar/Sidebar.stories.tsx b/source/02-layouts/Sidebar/Sidebar.stories.tsx index 9a51bdd9..8da1bc4e 100644 --- a/source/02-layouts/Sidebar/Sidebar.stories.tsx +++ b/source/02-layouts/Sidebar/Sidebar.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import SampleContent from '../../06-utility/storybook/SampleContent'; import SidebarLayout from './Sidebar'; -import sidebarArgs from './sidebar.yml'; +import sidebarArgs from './sidebarArgs'; const meta: Meta = { title: 'Layouts/Sidebar', diff --git a/source/02-layouts/Sidebar/Sidebar.tsx b/source/02-layouts/Sidebar/Sidebar.tsx index 30c8ac2d..b71ceeeb 100644 --- a/source/02-layouts/Sidebar/Sidebar.tsx +++ b/source/02-layouts/Sidebar/Sidebar.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import styles from './sidebar.module.css'; interface SidebarProps extends GessoComponent { @@ -48,3 +48,4 @@ function Sidebar({ } export default Sidebar; +export type { SidebarProps }; diff --git a/source/02-layouts/Sidebar/sidebar.yml b/source/02-layouts/Sidebar/sidebar.yml deleted file mode 100644 index 8a88bbe3..00000000 --- a/source/02-layouts/Sidebar/sidebar.yml +++ /dev/null @@ -1,2 +0,0 @@ -sidebarFirstLabel: '' -sidebarSecondLabel: '' diff --git a/source/02-layouts/Sidebar/sidebarArgs.ts b/source/02-layouts/Sidebar/sidebarArgs.ts new file mode 100644 index 00000000..ade93b01 --- /dev/null +++ b/source/02-layouts/Sidebar/sidebarArgs.ts @@ -0,0 +1,6 @@ +import { SidebarProps } from '@/source/02-layouts/Sidebar/Sidebar'; + +export default { + sidebarFirstLabel: '', + sidebarSecondLabel: '', +} satisfies SidebarProps; diff --git a/source/02-layouts/SiteContainer/SiteContainer.stories.tsx b/source/02-layouts/SiteContainer/SiteContainer.stories.tsx index 9e7da5d3..28b99fc7 100644 --- a/source/02-layouts/SiteContainer/SiteContainer.stories.tsx +++ b/source/02-layouts/SiteContainer/SiteContainer.stories.tsx @@ -1,22 +1,22 @@ import { Meta, StoryObj } from '@storybook/react'; -import SampleContent from '../../06-utility/storybook/SampleContent'; import SiteContainerLayout from './SiteContainer'; -import siteContainerArgs from './site-container.yml'; +import siteContainerArgs from './siteContainerArgs'; const meta: Meta = { title: 'Layouts/Site Container', component: SiteContainerLayout, + parameters: { + controls: { + exclude: ['children'], + }, + }, }; type Story = StoryObj; const SiteContainer: Story = { - render: args => ( - - Site Container Layout Content - - ), args: siteContainerArgs, }; + export default meta; export { SiteContainer }; diff --git a/source/02-layouts/SiteContainer/SiteContainer.tsx b/source/02-layouts/SiteContainer/SiteContainer.tsx index 820c73a3..03ff30f2 100644 --- a/source/02-layouts/SiteContainer/SiteContainer.tsx +++ b/source/02-layouts/SiteContainer/SiteContainer.tsx @@ -1,5 +1,5 @@ import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import styles from './site-container.module.css'; interface SiteContainerProps extends GessoComponent { @@ -11,3 +11,4 @@ function SiteContainer({ children }: SiteContainerProps): JSX.Element { } export default SiteContainer; +export type { SiteContainerProps }; diff --git a/source/02-layouts/SiteContainer/site-container.yml b/source/02-layouts/SiteContainer/site-container.yml deleted file mode 100644 index 84dc5daa..00000000 --- a/source/02-layouts/SiteContainer/site-container.yml +++ /dev/null @@ -1,2 +0,0 @@ ---- -modifierClasses: '' diff --git a/source/02-layouts/SiteContainer/siteContainerArgs.tsx b/source/02-layouts/SiteContainer/siteContainerArgs.tsx new file mode 100644 index 00000000..fb069f8a --- /dev/null +++ b/source/02-layouts/SiteContainer/siteContainerArgs.tsx @@ -0,0 +1,7 @@ +import { SiteContainerProps } from '@/source/02-layouts/SiteContainer/SiteContainer'; +import SampleContent from '@/source/06-utility/storybook/SampleContent'; + +export default { + modifierClasses: '', + children: Site Container Layout Content, +} satisfies SiteContainerProps; From f70c8156f8d71a7d181736da22a7bd572c4b98d0 Mon Sep 17 00:00:00 2001 From: KJ Monahan Date: Mon, 11 Nov 2024 11:13:10 -0600 Subject: [PATCH 2/4] [148] Convert remaining components to use typed objects --- .../Accordion/Accordion.stories.tsx | 17 +- source/03-components/Accordion/Accordion.tsx | 3 +- .../03-components/Accordion/AccordionItem.tsx | 7 +- source/03-components/Accordion/accordion.yml | 45 ------ .../03-components/Accordion/accordionArgs.tsx | 153 ++++++++++++++++++ .../03-components/Article/Article.stories.tsx | 147 +---------------- source/03-components/Article/Article.tsx | 3 +- source/03-components/Article/article.yml | 6 - source/03-components/Article/articleArgs.tsx | 145 +++++++++++++++++ .../BackToTop/BackToTop.stories.tsx | 2 +- source/03-components/BackToTop/BackToTop.tsx | 3 +- .../03-components/BackToTop/back-to-top.yml | 4 - .../03-components/BackToTop/backToTopArgs.ts | 9 ++ .../Breadcrumb/Breadcrumb.stories.tsx | 2 +- .../03-components/Breadcrumb/Breadcrumb.tsx | 3 +- .../03-components/Breadcrumb/breadcrumb.yml | 12 -- .../Breadcrumb/breadcrumbArgs.ts | 15 ++ .../03-components/Button/Button.stories.tsx | 3 +- source/03-components/Button/Button.tsx | 14 +- source/03-components/Button/button.yml | 4 - source/03-components/Button/buttonArgs.ts | 9 ++ .../ButtonGroup/ButtonGroup.stories.tsx | 2 +- .../03-components/ButtonGroup/ButtonGroup.tsx | 3 +- .../ButtonGroup/button-group.yml | 11 -- .../ButtonGroup/buttonGroupArgs.ts | 16 ++ .../CallToAction/CallToAction.stories.tsx | 9 +- .../CallToAction/CallToAction.tsx | 2 +- .../CallToAction/call-to-action.yml | 7 - .../CallToAction/callToActionArgs.tsx | 13 ++ source/03-components/Card/Card.stories.tsx | 9 +- source/03-components/Card/Card.tsx | 2 +- source/03-components/Card/card.yml | 18 --- source/03-components/Card/cardArgs.tsx | 30 ++++ .../03-components/Details/Details.stories.tsx | 8 +- source/03-components/Details/Details.tsx | 3 +- source/03-components/Details/details.yml | 7 - source/03-components/Details/detailsArgs.tsx | 11 ++ .../Fieldset/Fieldset.stories.tsx | 5 +- source/03-components/Fieldset/Fieldset.tsx | 3 +- source/03-components/Fieldset/fieldset.yml | 10 -- .../03-components/Fieldset/fieldsetArgs.tsx | 15 ++ .../03-components/Figure/Figure.stories.tsx | 8 +- source/03-components/Figure/Figure.tsx | 3 +- source/03-components/Figure/figure.yml | 4 - source/03-components/Figure/figureArgs.tsx | 17 ++ .../FormItem/FormItem.stories.tsx | 4 +- source/03-components/FormItem/FormItem.tsx | 3 +- .../03-components/FormItem/Input.stories.tsx | 32 ++-- .../03-components/FormItem/Select.stories.tsx | 15 +- .../FormItem/Textarea.stories.tsx | 2 +- source/03-components/FormItem/checkbox.yml | 6 - source/03-components/FormItem/checkboxArgs.ts | 11 ++ source/03-components/FormItem/color.yml | 4 - source/03-components/FormItem/colorArgs.ts | 9 ++ source/03-components/FormItem/date.yml | 7 - source/03-components/FormItem/dateArgs.ts | 12 ++ source/03-components/FormItem/decimal.yml | 6 - source/03-components/FormItem/decimalArgs.ts | 11 ++ source/03-components/FormItem/email.yml | 7 - source/03-components/FormItem/emailArgs.ts | 12 ++ source/03-components/FormItem/file.yml | 6 - source/03-components/FormItem/fileArgs.ts | 11 ++ source/03-components/FormItem/float.yml | 6 - source/03-components/FormItem/floatArgs.ts | 11 ++ source/03-components/FormItem/integer.yml | 6 - source/03-components/FormItem/integerArgs.ts | 11 ++ source/03-components/FormItem/month.yml | 5 - source/03-components/FormItem/monthArgs.ts | 10 ++ source/03-components/FormItem/password.yml | 6 - source/03-components/FormItem/passwordArgs.ts | 11 ++ source/03-components/FormItem/radio.yml | 7 - source/03-components/FormItem/radioArgs.ts | 12 ++ source/03-components/FormItem/range.yml | 7 - source/03-components/FormItem/rangeArgs.ts | 12 ++ source/03-components/FormItem/search.yml | 7 - source/03-components/FormItem/searchArgs.ts | 12 ++ .../FormItem/select-with-groups.yml | 14 -- source/03-components/FormItem/select.yml | 10 -- source/03-components/FormItem/selectArgs.tsx | 18 +++ .../FormItem/selectWithGroups.tsx | 22 +++ source/03-components/FormItem/telephone.yml | 5 - .../03-components/FormItem/telephoneArgs.ts | 10 ++ source/03-components/FormItem/text.yml | 7 - source/03-components/FormItem/textArgs.ts | 12 ++ source/03-components/FormItem/textarea.yml | 6 - source/03-components/FormItem/textareaArgs.ts | 11 ++ source/03-components/FormItem/time.yml | 7 - source/03-components/FormItem/timeArgs.ts | 12 ++ source/03-components/FormItem/url.yml | 6 - source/03-components/FormItem/urlArgs.ts | 11 ++ source/03-components/FormItem/week.yml | 5 - source/03-components/FormItem/weekArgs.ts | 10 ++ .../HeroBgImage/HeroBgImage.stories.tsx | 9 +- .../HeroBgImage/hero-bg-image.yml | 8 - .../HeroBgImage/heroBgImageArgs.tsx | 16 ++ .../HeroInlineImage.stories.tsx | 9 +- .../HeroInlineImage/HeroInlineImage.tsx | 1 + .../HeroInlineImage/hero-inline-image.yml | 28 ---- .../HeroInlineImage/heroInlineImageArgs.tsx | 35 ++++ .../ImageTeaser/ImageTeaser.stories.tsx | 9 +- .../03-components/ImageTeaser/ImageTeaser.tsx | 1 + .../ImageTeaser/image-teaser.yml | 15 -- .../ImageTeaser/imageTeaserArgs.tsx | 22 +++ source/03-components/Menu/Menu.stories.tsx | 4 +- .../Menu/OverlayMenu/OverlayMenu.stories.tsx | 2 +- .../Menu/OverlayMenu/OverlayMenu.tsx | 1 + .../Menu/OverlayMenu/overlay-menu.yml | 14 -- .../Menu/OverlayMenu/overlayMenuArgs.ts | 12 ++ .../ResponsiveMenu/ResponsiveMenu.stories.tsx | 2 +- .../Menu/ResponsiveMenu/ResponsiveMenu.tsx | 1 + .../Menu/ResponsiveMenu/responsive-menu.yml | 14 -- .../Menu/ResponsiveMenu/responsiveMenuArgs.ts | 12 ++ source/03-components/Menu/menu-footer.yml | 15 -- source/03-components/Menu/menu.yml | 8 - source/03-components/Menu/menuArgs.ts | 12 ++ source/03-components/Menu/menuFooterArgs.ts | 13 ++ source/03-components/Modal/Modal.stories.tsx | 8 +- source/03-components/Modal/Modal.tsx | 6 +- source/03-components/Modal/modal.yml | 8 - source/03-components/Modal/modalArgs.tsx | 26 +++ source/03-components/PageTitle/PageTitle.tsx | 3 +- .../03-components/PageTitle/pageTitleArgs.ts | 8 + source/03-components/Pager/Pager.stories.tsx | 4 +- source/03-components/Pager/Pager.tsx | 1 + source/03-components/Pager/pagerArgs.ts | 7 + .../ReadMoreLink/ReadMoreLink.stories.tsx | 2 +- .../ReadMoreLink/ReadMoreLink.tsx | 1 + .../ReadMoreLink/read-more-link.yml | 5 - .../ReadMoreLink/readMoreLinkArgs.ts | 10 ++ .../SiteName/SiteName.stories.tsx | 2 +- source/03-components/SiteName/SiteName.tsx | 2 + source/03-components/SiteName/site-name.yml | 3 - source/03-components/SiteName/siteNameArgs.ts | 8 + .../Skiplink/Skiplink.stories.tsx | 2 +- source/03-components/Skiplink/Skiplink.tsx | 2 + source/03-components/Skiplink/skiplink.yml | 2 - source/03-components/Skiplink/skiplinkArgs.ts | 7 + .../StyledSelect/StyledSelect.stories.tsx | 4 +- .../StyledSelect/StyledSelect.tsx | 1 + .../StyledSelect/styled-select.yml | 17 -- .../StyledSelect/styledSelectArgs.ts | 17 ++ .../StyledSelect/with-groups.yml | 21 --- .../StyledSelect/withGroupsArgs.ts | 27 ++++ source/03-components/Tag/Tag.stories.tsx | 2 +- source/03-components/Tag/Tag.tsx | 1 + source/03-components/Tag/tag.yml | 5 - source/03-components/Tag/tagArgs.ts | 10 ++ .../03-components/TagList/TagList.stories.tsx | 2 +- source/03-components/TagList/TagList.tsx | 1 + source/03-components/TagList/tagListArgs.ts | 13 ++ source/03-components/Video/Video.stories.tsx | 2 +- source/03-components/Video/Video.tsx | 2 + source/03-components/Video/video.yml | 3 - source/03-components/Video/videoArgs.ts | 8 + .../03-components/Wysiwyg/Wysiwyg.stories.tsx | 8 +- source/03-components/Wysiwyg/Wysiwyg.tsx | 3 +- source/03-components/Wysiwyg/wysiwyg.yml | 132 --------------- source/03-components/Wysiwyg/wysiwygArgs.tsx | 140 ++++++++++++++++ .../_components/views/FilmsListing.tsx | 2 +- 159 files changed, 1211 insertions(+), 859 deletions(-) delete mode 100644 source/03-components/Accordion/accordion.yml create mode 100644 source/03-components/Accordion/accordionArgs.tsx delete mode 100644 source/03-components/Article/article.yml create mode 100644 source/03-components/Article/articleArgs.tsx delete mode 100644 source/03-components/BackToTop/back-to-top.yml create mode 100644 source/03-components/BackToTop/backToTopArgs.ts delete mode 100644 source/03-components/Breadcrumb/breadcrumb.yml create mode 100644 source/03-components/Breadcrumb/breadcrumbArgs.ts delete mode 100644 source/03-components/Button/button.yml create mode 100644 source/03-components/Button/buttonArgs.ts delete mode 100644 source/03-components/ButtonGroup/button-group.yml create mode 100644 source/03-components/ButtonGroup/buttonGroupArgs.ts delete mode 100644 source/03-components/CallToAction/call-to-action.yml create mode 100644 source/03-components/CallToAction/callToActionArgs.tsx delete mode 100644 source/03-components/Card/card.yml create mode 100644 source/03-components/Card/cardArgs.tsx delete mode 100644 source/03-components/Details/details.yml create mode 100644 source/03-components/Details/detailsArgs.tsx delete mode 100644 source/03-components/Fieldset/fieldset.yml create mode 100644 source/03-components/Fieldset/fieldsetArgs.tsx delete mode 100644 source/03-components/Figure/figure.yml create mode 100644 source/03-components/Figure/figureArgs.tsx delete mode 100644 source/03-components/FormItem/checkbox.yml create mode 100644 source/03-components/FormItem/checkboxArgs.ts delete mode 100644 source/03-components/FormItem/color.yml create mode 100644 source/03-components/FormItem/colorArgs.ts delete mode 100644 source/03-components/FormItem/date.yml create mode 100644 source/03-components/FormItem/dateArgs.ts delete mode 100644 source/03-components/FormItem/decimal.yml create mode 100644 source/03-components/FormItem/decimalArgs.ts delete mode 100644 source/03-components/FormItem/email.yml create mode 100644 source/03-components/FormItem/emailArgs.ts delete mode 100644 source/03-components/FormItem/file.yml create mode 100644 source/03-components/FormItem/fileArgs.ts delete mode 100644 source/03-components/FormItem/float.yml create mode 100644 source/03-components/FormItem/floatArgs.ts delete mode 100644 source/03-components/FormItem/integer.yml create mode 100644 source/03-components/FormItem/integerArgs.ts delete mode 100644 source/03-components/FormItem/month.yml create mode 100644 source/03-components/FormItem/monthArgs.ts delete mode 100644 source/03-components/FormItem/password.yml create mode 100644 source/03-components/FormItem/passwordArgs.ts delete mode 100644 source/03-components/FormItem/radio.yml create mode 100644 source/03-components/FormItem/radioArgs.ts delete mode 100644 source/03-components/FormItem/range.yml create mode 100644 source/03-components/FormItem/rangeArgs.ts delete mode 100644 source/03-components/FormItem/search.yml create mode 100644 source/03-components/FormItem/searchArgs.ts delete mode 100644 source/03-components/FormItem/select-with-groups.yml delete mode 100644 source/03-components/FormItem/select.yml create mode 100644 source/03-components/FormItem/selectArgs.tsx create mode 100644 source/03-components/FormItem/selectWithGroups.tsx delete mode 100644 source/03-components/FormItem/telephone.yml create mode 100644 source/03-components/FormItem/telephoneArgs.ts delete mode 100644 source/03-components/FormItem/text.yml create mode 100644 source/03-components/FormItem/textArgs.ts delete mode 100644 source/03-components/FormItem/textarea.yml create mode 100644 source/03-components/FormItem/textareaArgs.ts delete mode 100644 source/03-components/FormItem/time.yml create mode 100644 source/03-components/FormItem/timeArgs.ts delete mode 100644 source/03-components/FormItem/url.yml create mode 100644 source/03-components/FormItem/urlArgs.ts delete mode 100644 source/03-components/FormItem/week.yml create mode 100644 source/03-components/FormItem/weekArgs.ts delete mode 100644 source/03-components/HeroBgImage/hero-bg-image.yml create mode 100644 source/03-components/HeroBgImage/heroBgImageArgs.tsx delete mode 100644 source/03-components/HeroInlineImage/hero-inline-image.yml create mode 100644 source/03-components/HeroInlineImage/heroInlineImageArgs.tsx delete mode 100644 source/03-components/ImageTeaser/image-teaser.yml create mode 100644 source/03-components/ImageTeaser/imageTeaserArgs.tsx delete mode 100644 source/03-components/Menu/OverlayMenu/overlay-menu.yml create mode 100644 source/03-components/Menu/OverlayMenu/overlayMenuArgs.ts delete mode 100644 source/03-components/Menu/ResponsiveMenu/responsive-menu.yml create mode 100644 source/03-components/Menu/ResponsiveMenu/responsiveMenuArgs.ts delete mode 100644 source/03-components/Menu/menu-footer.yml delete mode 100644 source/03-components/Menu/menu.yml create mode 100644 source/03-components/Menu/menuArgs.ts create mode 100644 source/03-components/Menu/menuFooterArgs.ts delete mode 100644 source/03-components/Modal/modal.yml create mode 100644 source/03-components/Modal/modalArgs.tsx create mode 100644 source/03-components/PageTitle/pageTitleArgs.ts create mode 100644 source/03-components/Pager/pagerArgs.ts delete mode 100644 source/03-components/ReadMoreLink/read-more-link.yml create mode 100644 source/03-components/ReadMoreLink/readMoreLinkArgs.ts delete mode 100644 source/03-components/SiteName/site-name.yml create mode 100644 source/03-components/SiteName/siteNameArgs.ts delete mode 100644 source/03-components/Skiplink/skiplink.yml create mode 100644 source/03-components/Skiplink/skiplinkArgs.ts delete mode 100644 source/03-components/StyledSelect/styled-select.yml create mode 100644 source/03-components/StyledSelect/styledSelectArgs.ts delete mode 100644 source/03-components/StyledSelect/with-groups.yml create mode 100644 source/03-components/StyledSelect/withGroupsArgs.ts delete mode 100644 source/03-components/Tag/tag.yml create mode 100644 source/03-components/Tag/tagArgs.ts create mode 100644 source/03-components/TagList/tagListArgs.ts delete mode 100644 source/03-components/Video/video.yml create mode 100644 source/03-components/Video/videoArgs.ts delete mode 100644 source/03-components/Wysiwyg/wysiwyg.yml create mode 100644 source/03-components/Wysiwyg/wysiwygArgs.tsx diff --git a/source/03-components/Accordion/Accordion.stories.tsx b/source/03-components/Accordion/Accordion.stories.tsx index ed861bd6..0a584573 100644 --- a/source/03-components/Accordion/Accordion.stories.tsx +++ b/source/03-components/Accordion/Accordion.stories.tsx @@ -1,8 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import parse from 'html-react-parser'; import AccordionComponent from './Accordion'; -import { AccordionItemProps } from './AccordionItem'; -import accordionArgs from './accordion.yml'; +import accordionArgs from './accordionArgs'; const meta: Meta = { title: 'Components/Accordion', @@ -12,19 +10,6 @@ const meta: Meta = { type Story = StoryObj; -accordionArgs.accordionItems = accordionArgs.accordionItems.map( - ( - item: - | (Omit & { content: string }) - | AccordionItemProps, - ) => { - if (typeof item.content === 'string') { - item.content = parse(item.content) as string; - } - return item; - }, -); - const Default: Story = { render: args => , args: { diff --git a/source/03-components/Accordion/Accordion.tsx b/source/03-components/Accordion/Accordion.tsx index 164e84e6..a73c805f 100644 --- a/source/03-components/Accordion/Accordion.tsx +++ b/source/03-components/Accordion/Accordion.tsx @@ -2,7 +2,7 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { KeyboardEvent, createRef, useId, useMemo, useState } from 'react'; +import { JSX, KeyboardEvent, createRef, useId, useMemo, useState } from 'react'; import getCssVar from '../../06-utility/getCssVar'; import AccordionItem, { AccordionItemProps } from './AccordionItem'; import styles from './accordion.module.css'; @@ -151,3 +151,4 @@ function Accordion({ } export default Accordion; +export type { AccordionProps }; diff --git a/source/03-components/Accordion/AccordionItem.tsx b/source/03-components/Accordion/AccordionItem.tsx index bad9a31d..357ae492 100644 --- a/source/03-components/Accordion/AccordionItem.tsx +++ b/source/03-components/Accordion/AccordionItem.tsx @@ -2,15 +2,17 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; import { ElementType, + JSX, MouseEventHandler, ReactNode, + RefObject, useEffect, useRef, } from 'react'; import { slideCollapse, slideExpand } from '../../06-utility/slide'; import styles from './accordion-item.module.css'; -export interface AccordionItemProps extends GessoComponent { +interface AccordionItemProps extends GessoComponent { id: string; title: string; content: ReactNode; @@ -18,7 +20,7 @@ export interface AccordionItemProps extends GessoComponent { isOpen?: boolean; isStepList?: boolean; accordionSpeed?: string; - toggleRef?: React.RefObject; + toggleRef?: RefObject; handleClick?: MouseEventHandler; } @@ -84,3 +86,4 @@ function AccordionItem({ } export default AccordionItem; +export type { AccordionItemProps }; diff --git a/source/03-components/Accordion/accordion.yml b/source/03-components/Accordion/accordion.yml deleted file mode 100644 index 9bea9c87..00000000 --- a/source/03-components/Accordion/accordion.yml +++ /dev/null @@ -1,45 +0,0 @@ ---- -allowMultiple: true -allowToggle: true -isStepList: false -accordionItems: - - title: 'First Accordion Heading' - isOpen: true - content: |- -

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

-

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

- - title: 'Second Accordion Heading' - isOpen: false - content: |- -

This accordion item has a lot more content so you see what it would look like.

-

This is WYSIWYG content, which can contain HTML markup. There is no limit to how long this content can be. It could have both internal and external links.

-

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

-

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

-
    -
  • This is a list item in an unordered list
    • -
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • -
  • - Lists can be nested inside of each other -
      -
    • This is a nested list item
      • -
    • This is another nested list item in an unordered list
      • -
    -
    • -
  • This is the last list item
    • -
-

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

-
-

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

- Jane Doe, President and CEO -
-

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

- - title: 'Third Accordion Heading' - isOpen: false - content: |- -

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

-

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

- - title: 'Fourth Accordion Heading' - isOpen: false - content: |- -

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

-

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer successive paragraphs indented with no margins between them.

diff --git a/source/03-components/Accordion/accordionArgs.tsx b/source/03-components/Accordion/accordionArgs.tsx new file mode 100644 index 00000000..d4e74ccb --- /dev/null +++ b/source/03-components/Accordion/accordionArgs.tsx @@ -0,0 +1,153 @@ +import { AccordionProps } from '@/source/03-components/Accordion/Accordion'; + +const accordionArgs = { + allowMultiple: true, + allowToggle: true, + isStepList: false, + accordionItems: [ + { + id: '', + title: 'First Accordion Heading', + isOpen: true, + content: ( + <> +

+ A paragraph (from the Greek paragraphos, “to write beside” or + “written beside”) is a self-contained unit of a discourse in writing + dealing with a particular point or idea. A paragraph consists of one + or more sentences. Though not required by the syntax of any + language, paragraphs are usually an expected part of formal writing, + used to organize longer prose. +

+

+ This is what a successive paragraph looks like. Some people prefer a + space between paragraphs, while others prefer successive paragraphs + indented with no margins between them. +

+ + ), + }, + { + id: '', + title: 'Second Accordion Heading', + isOpen: false, + content: ( + <> +

+ This accordion item has a lot more content so you see what it would + look like. +

+

+ This is WYSIWYG content, which can contain{' '} + HTML markup. There + is no limit to how long this content can be. It could have both{' '} + internal and{' '} + external links. +

+

+ A paragraph (from the Greek paragraphos, “to write beside” or + “written beside”) is a self-contained unit of a discourse in writing + dealing with a particular point or idea. A paragraph consists of one + or more sentences. Though not required by the syntax of any + language, paragraphs are usually an expected part of formal writing, + used to organize longer prose. +

+

+ This is what a successive paragraph looks like. Some people prefer a + space between paragraphs, while others prefer successive paragraphs + indented with no margins between them. +

+
    +
  • This is a list item in an unordered list
    • +
  • + An unordered list is a list in which the sequence of items is not + important. Sometimes, an unordered list is a bulleted list. And + this is a long list item in an unordered list that can wrap onto a + new line. +
    • +
  • + Lists can be nested inside of each other +
      +
    • This is a nested list item
      • +
    • This is another nested list item in an unordered list
      • +
    +
    • +
  • This is the last list item
    • +
+

+ A paragraph (from the Greek paragraphos, “to write beside” or + “written beside”) is a self-contained unit of a discourse in writing + dealing with a particular point or idea. A paragraph consists of one + or more sentences. Though not required by the syntax of any + language, paragraphs are usually an expected part of formal writing, + used to organize longer prose. +

+
+

+ A block quotation (also known as a long quotation or extract) is a + quotation in a written document, that is set off from the main + text as a paragraph, or block of text, and typically distinguished + visually using indentation and a different typeface or smaller + size quotation. +

+ Jane Doe, President and CEO +
+

+ A paragraph (from the Greek paragraphos, “to write beside” or + “written beside”) is a self-contained unit of a discourse in writing + dealing with a particular point or idea. A paragraph consists of one + or more sentences. Though not required by the syntax of any + language, paragraphs are usually an expected part of formal writing, + used to organize longer prose. +

+ + ), + }, + { + id: '', + title: 'Third Accordion Heading', + isOpen: false, + content: ( + <> +

+ A paragraph (from the Greek paragraphos, “to write beside” or + “written beside”) is a self-contained unit of a discourse in writing + dealing with a particular point or idea. A paragraph consists of one + or more sentences. Though not required by the syntax of any + language, paragraphs are usually an expected part of formal writing, + used to organize longer prose. +

+

+ This is what a successive paragraph looks like. Some people prefer a + space between paragraphs, while others prefer successive paragraphs + indented with no margins between them. +

+ + ), + }, + { + id: '', + title: 'Fourth Accordion Heading', + isOpen: false, + content: ( + <> +

+ A paragraph (from the Greek paragraphos, “to write beside” or + “written beside”) is a self-contained unit of a discourse in writing + dealing with a particular point or idea. A paragraph consists of one + or more sentences. Though not required by the syntax of any + language, paragraphs are usually an expected part of formal writing, + used to organize longer prose. +

+

+ This is what a successive paragraph looks like. Some people prefer a + space between paragraphs, while others prefer successive paragraphs + indented with no margins between them. +

+ + ), + }, + ], +} satisfies AccordionProps; + +export default accordionArgs; diff --git a/source/03-components/Article/Article.stories.tsx b/source/03-components/Article/Article.stories.tsx index bf456e0d..e09a10d4 100644 --- a/source/03-components/Article/Article.stories.tsx +++ b/source/03-components/Article/Article.stories.tsx @@ -1,157 +1,24 @@ import { Meta, StoryObj } from '@storybook/react'; -import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; import ArticleComponent from './Article'; -import articleArgs from './article.yml'; +import articleArgs from './articleArgs'; const meta: Meta = { title: 'Components/Article', component: ArticleComponent, decorators: [withGlobalWrapper], tags: ['autodocs'], + parameters: { + controls: { + exclude: ['children'], + }, + }, }; type Story = StoryObj; const Article: Story = { - render: args => ( - -

- This is WYSIWYG content, which can contain{' '} - HTML markup. There is no - limit to how long this content can be. it could have both{' '} - internal and external{' '} - links. -

-

Heading Level 2

-

- A paragraph (from the Greek paragraphos, “to write beside” or “written - beside”) is a self-contained unit of a discourse in writing dealing with - a particular point or idea. A paragraph consists of one or more - sentences. Though not required by the syntax of any language, paragraphs - are usually an expected part of formal writing, used to organize longer - prose. -

-

- This is what a successive paragraph looks like. Some people prefer a - space between paragraphs, while others prefer successive paragraphs - indented with no margins between them. -

-

Heading Level 3

-
    -
  • This is a list item in an unordered list
    • -
  • - An unordered list is a list in which the sequence of items is not - important. Sometimes, an unordered list is a bulleted list. And this - is a long list item in an unordered list that can wrap onto a new - line.{' '} -
    • -
  • - Lists can be nested inside of each other -
      -
    • This is a nested list item
      • -
    • This is another nested list item in an unordered list
      • -
    -
    • -
  • This is the last list item
    • -
-

Heading Level 4

-

- A paragraph (from the Greek paragraphos, “to write beside” or “written - beside”) is a self-contained unit of a discourse in writing dealing with - a particular point or idea. A paragraph consists of one or more - sentences. Though not required by the syntax of any language, paragraphs - are usually an expected part of formal writing, used to organize longer - prose. -

-
-

- A block quotation (also known as a long quotation or extract) is a - quotation in a written document, that is set off from the main text as - a paragraph, or block of text, and typically distinguished visually - using indentation and a different typeface or smaller size quotation. -

- Jane Doe, President and CEO -
-

- A paragraph (from the Greek paragraphos, “to write beside” or “written - beside”) is a self-contained unit of a discourse in writing dealing with - a particular point or idea. A paragraph consists of one or more - sentences. Though not required by the syntax of any language, paragraphs - are usually an expected part of formal writing, used to organize longer - prose. -

-
Heading Level 5
-
    -
  1. This is a list item in an ordered list
    2. -
  2. - An ordered list is a list in which the sequence of items is important. - An ordered list does not necessarily contain sequence characters. -
    3. -
  3. - Lists can be nested inside of each other -
      -
    1. This is a nested list item
      2. -
    2. This is another nested list item in an ordered list
      3. -
    -
    4. -
  4. This is the last list item
    5. -
-
Heading Level 6
-

- A paragraph (from the Greek paragraphos, “to write beside” or “written - beside”) is a self-contained unit of a discourse in writing dealing with - a particular point or idea. A paragraph consists of one or more - sentences. Though not required by the syntax of any language, paragraphs - are usually an expected part of formal writing, used to organize longer - prose. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table caption
Table Heading ATable Heading BTable Heading C
Table Cell A1Table Cell B1Table Cell C1
Table Cell A2Table Cell B2Table Cell C2
Table Cell A3Table Cell B3Table Cell C3
Table Cell A4Table Cell B4Table Cell C4
-

- A paragraph (from the Greek paragraphos, “to write beside” or “written - beside”) is a self-contained unit of a discourse in writing dealing with - a particular point or idea. A paragraph consists of one or more - sentences. Though not required by the syntax of any language, paragraphs - are usually an expected part of formal writing, used to organize longer - prose. -

- - ), - args: { - ...articleArgs, - author: parse(articleArgs.author), - }, + args: articleArgs, }; export default meta; diff --git a/source/03-components/Article/Article.tsx b/source/03-components/Article/Article.tsx index 54bb98fd..064d696e 100644 --- a/source/03-components/Article/Article.tsx +++ b/source/03-components/Article/Article.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { ReactNode } from 'react'; +import { JSX, ReactNode } from 'react'; import listStyles from '../List/list.module.css'; import PageTitle from '../PageTitle/PageTitle'; import Wysiwyg from '../Wysiwyg/Wysiwyg'; @@ -39,3 +39,4 @@ function Article({ } export default Article; +export type { ArticleProps }; diff --git a/source/03-components/Article/article.yml b/source/03-components/Article/article.yml deleted file mode 100644 index 14e8fa4b..00000000 --- a/source/03-components/Article/article.yml +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 'Article Title' -showFooter: true -author: 'Author Name' -date: 'September 28, 2016' -modifierClasses: '' diff --git a/source/03-components/Article/articleArgs.tsx b/source/03-components/Article/articleArgs.tsx new file mode 100644 index 00000000..83dd7a00 --- /dev/null +++ b/source/03-components/Article/articleArgs.tsx @@ -0,0 +1,145 @@ +import { ArticleProps } from '@/source/03-components/Article/Article'; + +const articleArgs = { + title: 'Article Title', + children: ( + <> +

+ This is WYSIWYG content, which can contain{' '} + HTML markup. There is no + limit to how long this content can be. it could have both{' '} + internal and external{' '} + links. +

+

Heading Level 2

+

+ A paragraph (from the Greek paragraphos, “to write beside” or “written + beside”) is a self-contained unit of a discourse in writing dealing with + a particular point or idea. A paragraph consists of one or more + sentences. Though not required by the syntax of any language, paragraphs + are usually an expected part of formal writing, used to organize longer + prose. +

+

+ This is what a successive paragraph looks like. Some people prefer a + space between paragraphs, while others prefer successive paragraphs + indented with no margins between them. +

+

Heading Level 3

+
    +
  • This is a list item in an unordered list
    • +
  • + An unordered list is a list in which the sequence of items is not + important. Sometimes, an unordered list is a bulleted list. And this + is a long list item in an unordered list that can wrap onto a new + line.{' '} +
    • +
  • + Lists can be nested inside of each other +
      +
    • This is a nested list item
      • +
    • This is another nested list item in an unordered list
      • +
    +
    • +
  • This is the last list item
    • +
+

Heading Level 4

+

+ A paragraph (from the Greek paragraphos, “to write beside” or “written + beside”) is a self-contained unit of a discourse in writing dealing with + a particular point or idea. A paragraph consists of one or more + sentences. Though not required by the syntax of any language, paragraphs + are usually an expected part of formal writing, used to organize longer + prose. +

+
+

+ A block quotation (also known as a long quotation or extract) is a + quotation in a written document, that is set off from the main text as + a paragraph, or block of text, and typically distinguished visually + using indentation and a different typeface or smaller size quotation. +

+ Jane Doe, President and CEO +
+

+ A paragraph (from the Greek paragraphos, “to write beside” or “written + beside”) is a self-contained unit of a discourse in writing dealing with + a particular point or idea. A paragraph consists of one or more + sentences. Though not required by the syntax of any language, paragraphs + are usually an expected part of formal writing, used to organize longer + prose. +

+
Heading Level 5
+
    +
  1. This is a list item in an ordered list
    2. +
  2. + An ordered list is a list in which the sequence of items is important. + An ordered list does not necessarily contain sequence characters. +
    3. +
  3. + Lists can be nested inside of each other +
      +
    1. This is a nested list item
      2. +
    2. This is another nested list item in an ordered list
      3. +
    +
    4. +
  4. This is the last list item
    5. +
+
Heading Level 6
+

+ A paragraph (from the Greek paragraphos, “to write beside” or “written + beside”) is a self-contained unit of a discourse in writing dealing with + a particular point or idea. A paragraph consists of one or more + sentences. Though not required by the syntax of any language, paragraphs + are usually an expected part of formal writing, used to organize longer + prose. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table caption
Table Heading ATable Heading BTable Heading C
Table Cell A1Table Cell B1Table Cell C1
Table Cell A2Table Cell B2Table Cell C2
Table Cell A3Table Cell B3Table Cell C3
Table Cell A4Table Cell B4Table Cell C4
+

+ A paragraph (from the Greek paragraphos, “to write beside” or “written + beside”) is a self-contained unit of a discourse in writing dealing with + a particular point or idea. A paragraph consists of one or more + sentences. Though not required by the syntax of any language, paragraphs + are usually an expected part of formal writing, used to organize longer + prose. +

+ + ), + showFooter: true, + author: Author Name, + date: 'September 28, 2016', + modifierClasses: '', +} satisfies ArticleProps; + +export default articleArgs; diff --git a/source/03-components/BackToTop/BackToTop.stories.tsx b/source/03-components/BackToTop/BackToTop.stories.tsx index 4483e9bf..dee25def 100644 --- a/source/03-components/BackToTop/BackToTop.stories.tsx +++ b/source/03-components/BackToTop/BackToTop.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import BackToTopComponent from './BackToTop'; import styles from './back-to-top.module.css'; -import backToTopArgs from './back-to-top.yml'; +import backToTopArgs from './backToTopArgs'; const meta: Meta = { title: 'Components/Back To Top', diff --git a/source/03-components/BackToTop/BackToTop.tsx b/source/03-components/BackToTop/BackToTop.tsx index cd085b41..95da51d6 100644 --- a/source/03-components/BackToTop/BackToTop.tsx +++ b/source/03-components/BackToTop/BackToTop.tsx @@ -2,7 +2,7 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; -import { MouseEvent, useEffect, useState } from 'react'; +import { JSX, MouseEvent, useEffect, useState } from 'react'; import AngleUp from '../../01-global/icon/icons/AngleUp'; import styles from './back-to-top.module.css'; @@ -76,3 +76,4 @@ function BackToTop({ } export default BackToTop; +export type { BackToTopProps }; diff --git a/source/03-components/BackToTop/back-to-top.yml b/source/03-components/BackToTop/back-to-top.yml deleted file mode 100644 index 1fcd6fc1..00000000 --- a/source/03-components/BackToTop/back-to-top.yml +++ /dev/null @@ -1,4 +0,0 @@ ---- -topElement: 'top' -text: 'Back to top' -isDemo: true diff --git a/source/03-components/BackToTop/backToTopArgs.ts b/source/03-components/BackToTop/backToTopArgs.ts new file mode 100644 index 00000000..dd75a59a --- /dev/null +++ b/source/03-components/BackToTop/backToTopArgs.ts @@ -0,0 +1,9 @@ +import { BackToTopProps } from '@/source/03-components/BackToTop/BackToTop'; + +const backToTopArgs = { + topElement: 'top', + text: 'Back to top', + isDemo: true, +} satisfies BackToTopProps; + +export default backToTopArgs; diff --git a/source/03-components/Breadcrumb/Breadcrumb.stories.tsx b/source/03-components/Breadcrumb/Breadcrumb.stories.tsx index 2fb76274..73d0597e 100644 --- a/source/03-components/Breadcrumb/Breadcrumb.stories.tsx +++ b/source/03-components/Breadcrumb/Breadcrumb.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import BreadcrumbComponent from './Breadcrumb'; -import breadcrumbArgs from './breadcrumb.yml'; +import breadcrumbArgs from './breadcrumbArgs'; const meta: Meta = { title: 'Components/Breadcrumb', diff --git a/source/03-components/Breadcrumb/Breadcrumb.tsx b/source/03-components/Breadcrumb/Breadcrumb.tsx index 471eb415..cc0257f0 100644 --- a/source/03-components/Breadcrumb/Breadcrumb.tsx +++ b/source/03-components/Breadcrumb/Breadcrumb.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import { GessoComponent } from 'gesso'; import Link from 'next/link'; -import { ElementType } from 'react'; +import { ElementType, JSX } from 'react'; import Constrain from '../../02-layouts/Constrain/Constrain'; import styles from './breadcrumb.module.css'; @@ -58,3 +58,4 @@ function Breadcrumb({ } export default Breadcrumb; +export type { BreadcrumbProps, Crumbs }; diff --git a/source/03-components/Breadcrumb/breadcrumb.yml b/source/03-components/Breadcrumb/breadcrumb.yml deleted file mode 100644 index 0273ba9c..00000000 --- a/source/03-components/Breadcrumb/breadcrumb.yml +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 'Breadcrumb' -breadcrumb: - - url: '#0' - text: 'Home' - - url: '#1' - text: 'Level 1' - - url: '#2' - text: 'Level 2' - - text: 'Current item' -titleElement: 'h2' -hideTitle: true diff --git a/source/03-components/Breadcrumb/breadcrumbArgs.ts b/source/03-components/Breadcrumb/breadcrumbArgs.ts new file mode 100644 index 00000000..99dd3b61 --- /dev/null +++ b/source/03-components/Breadcrumb/breadcrumbArgs.ts @@ -0,0 +1,15 @@ +import { BreadcrumbProps } from '@/source/03-components/Breadcrumb/Breadcrumb'; + +const breadcrumbArgs = { + title: 'Breadcrumb', + breadcrumb: [ + { url: '#0', text: 'Home' }, + { url: '#1', text: 'Level 1' }, + { url: '#2', text: 'Level 2' }, + { text: 'Current item' }, + ], + titleElement: 'h2', + hideTitle: true, +} satisfies BreadcrumbProps; + +export default breadcrumbArgs; diff --git a/source/03-components/Button/Button.stories.tsx b/source/03-components/Button/Button.stories.tsx index 52cc8149..7d6af6e9 100644 --- a/source/03-components/Button/Button.stories.tsx +++ b/source/03-components/Button/Button.stories.tsx @@ -5,7 +5,7 @@ import { LinkButton as LinkButtonComponent, SharedButtonProps, } from './Button'; -import buttonArgs from './button.yml'; +import buttonArgs from './buttonArgs'; function DemoButtons({ label, ...props }: SharedButtonProps): JSX.Element { return ( @@ -32,7 +32,6 @@ const meta: Meta = { control: { type: 'radio', }, - defaultValue: 'primary', }, }, }; diff --git a/source/03-components/Button/Button.tsx b/source/03-components/Button/Button.tsx index fbd1666b..aae50c3a 100644 --- a/source/03-components/Button/Button.tsx +++ b/source/03-components/Button/Button.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import { ComponentProps } from 'react'; +import { ComponentProps, JSX } from 'react'; import styles from './button.module.css'; interface SharedButtonProps { @@ -23,13 +23,13 @@ type LinkProps = SharedButtonProps & ComponentProps<'a'>; /** * Primary UI component for user interaction */ -const Button = ({ +function Button({ variant, styleSize = 'medium', label, type = 'button', ...props -}: ButtonProps) => { +}: ButtonProps): JSX.Element { return (