[148] Replace YAML with typed objects

.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",

lib/plop-templates/Data.hbs

@@ -1 +1,5 @@
----
+import { {{> propsName }} } from './{{ componentName }}';
+
+const {{> argsName }} = {} satisfies {{> propsName }};
+
+export default {{> argsName }};

lib/plop-templates/Story.hbs

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import {{> componentAlias }} from './{{ componentName }}';
-import data from './{{ kebabCase componentName }}.yml';
+import {{> argsName }} from './{{> argsName }}';
 
 const meta: Meta<typeof {{> componentAlias }}> = {
   title: '{{ titleCase (cascadeLayer componentFolder) }}/{{ componentTitle }}',
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof {{> componentAlias }}>;
 
 const Default: Story = {
   args: {
-    ...data,
+    ...{{> argsName }},
   },
 };
 

plopfile.mjs

@@ -93,6 +93,7 @@ async function generator(plop) {
 
   plop.setPartial('propsName', '{{ componentName }}Props');
   plop.setPartial('componentAlias', '{{ componentName }}Component');
+  plop.setPartial('argsName', '{{ camelCase componentName }}Args');
 
   plop.setGenerator('component', {
     description: 'Create a new React component',
@@ -194,7 +195,7 @@ Include Story?: {{ useStorybook }}
       if (data.useStorybook) {
         actions.push({
           type: 'add',
-          path: './source/{{ componentLocation }}/{{ componentName }}/{{ kebabCase componentName }}.yml',
+          path: './source/{{ componentLocation }}/{{ componentName }}/{{ camelCase componentName }}Args.ts',
           templateFile: './lib/plop-templates/Data.hbs',
         });
         actions.push({

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<typeof ConstrainLayout> = {
   title: 'Layouts/Constrain',

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 };

source/02-layouts/Constrain/constrainArgs.ts

@@ -0,0 +1,5 @@
+import { ConstrainProps } from '@/source/02-layouts/Constrain/Constrain';
+
+export default {
+  modifierClasses: '',
+} satisfies ConstrainProps;

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<typeof FooterLayout> = {
   title: 'Layouts/Footer',

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 };

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;

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());

source/02-layouts/Grid/Grid.tsx

@@ -26,3 +26,4 @@ function Grid({
 }
 
 export default Grid;
+export type { GridProps };

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;

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<typeof HeaderLayout> = {
   title: 'Layouts/Header',

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 };

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;

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<typeof InlineFormLayout> = {
   title: 'Layouts/Inline Form',

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 };

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;

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<typeof MainLayout> = {
   title: 'Layouts/Main',

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 };

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;

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<typeof MediaLayout> = {
   title: 'Layouts/Media',
@@ -22,8 +21,6 @@ type Story = StoryObj<typeof MediaLayout>;
 const Default: Story = {
   args: {
     ...mediaArgs,
-    media: parse(mediaArgs.media),
-    mediaContent: parse(mediaArgs.mediaContent),
   },
 };
 

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 };

source/02-layouts/Media/mediaArgs.tsx

@@ -0,0 +1,14 @@
+import { MediaProps } from '@/source/02-layouts/Media/Media';
+
+export default {
+  media: (
+    <img src="http://fpoimg.com/200x150?text=Media Image" alt="Media Image" />
+  ),
+  mediaContent: (
+    <p>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
+      necessitatibus fuga provident aut.
+    </p>
+  ),
+  modifierClasses: '',
+} satisfies MediaProps;

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<typeof ResponsiveTableComponent> = {
   title: 'Layouts/Responsive Table',

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 };

source/02-layouts/ResponsiveTable/responsiveTableArgs.ts

@@ -0,0 +1,5 @@
+import { ResponsiveTableProps } from '@/source/02-layouts/ResponsiveTable/ResponsiveTable';
+
+export default {
+  labelledBy: 'tablecaption01',
+} satisfies ResponsiveTableProps;

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<typeof SectionLayout> = {
   title: 'Layouts/Section',

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 };

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;

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<typeof SidebarLayout> = {
   title: 'Layouts/Sidebar',

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 };