Merge pull request #415 from mashmatrix/fix-csf3-stories

Modifiy stories using CSF3 features

Author: stomita

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   'plugins': [
     '@typescript-eslint',
     'jsx-a11y',
+    'prettier',
   ],
   'parserOptions': {
     'sourceType': 'module',
@@ -37,5 +38,6 @@ module.exports = {
     'react/display-name': 1,
     'react/no-deprecated': 1,
     // tmp disabled - end
+    'prettier/prettier': 2,
   }
 };

.storybook/main.js

@@ -5,7 +5,7 @@ module.exports = {
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-actions',
-    '@storybook/addon-knobs',
+    '@storybook/addon-controls',
     'storycap',
   ],
 };

src/scripts/MediaObject.tsx

@@ -5,6 +5,7 @@ export type MediaObjectProps = {
   figureLeft?: ReactNode;
   figureRight?: ReactNode;
   figureCenter?: ReactNode;
+  children?: ReactNode;
 };
 
 export class MediaObject extends Component<MediaObjectProps, {}> {

stories/Badge.stories.tsx

@@ -1,32 +1,58 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { Badge } from '../src/scripts';
-export default {
+import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+
+/**
+ *
+ */
+const meta: ComponentMeta<typeof Badge> = {
   title: 'Badge',
+  component: Badge,
+  argTypes: {
+    onClick: { action: 'click' },
+  },
 };
-export const Default = {
-  render: () => <Badge onClick={action('click')}>Badge Label</Badge>,
+export default meta;
+
+/**
+ *
+ */
+export const Default: ComponentStoryObj<typeof Badge> = {
+  args: {
+    children: 'Badge Label',
+  },
   parameters: {
-    info: 'Default badge',
+    docs: {
+      storyDescription: 'Default badge',
+    },
   },
 };
-export const Shade = {
-  render: () => (
-    <Badge type='shade' onClick={action('click')}>
-      Badge Label
-    </Badge>
-  ),
+
+/**
+ *
+ */
+export const Shade: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'shade',
+    children: 'Badge Label',
+  },
   parameters: {
-    info: 'Badge with type: shade',
+    docs: {
+      storyDescription: 'Badge with type: shade',
+    },
   },
 };
-export const Inverse = {
-  render: () => (
-    <Badge type='inverse' onClick={action('click')}>
-      Badge Label
-    </Badge>
-  ),
+
+/**
+ *
+ */
+export const Inverse: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'inverse',
+    children: 'Badge Label',
+  },
   parameters: {
-    info: 'Badge with type: inverse',
+    docs: {
+      storyDescription: 'Badge with type: inverse',
+    },
   },
 };

stories/BreadCrumbs.stories.tsx

@@ -1,17 +1,49 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
+import React, { ComponentProps } from 'react';
 import { BreadCrumbs, Crumb } from '../src/scripts';
-export default {
+import { Meta, StoryObj } from '@storybook/react';
+
+type StoryProps = ComponentProps<typeof BreadCrumbs> & {
+  crumb1: ComponentProps<typeof Crumb>;
+  crumb1_onClick: ComponentProps<typeof Crumb>['onClick'];
+} & {
+  crumb2: ComponentProps<typeof Crumb>;
+  crumb2_onClick: ComponentProps<typeof Crumb>['onClick'];
+};
+
+/**
+ *
+ */
+const meta: Meta<StoryProps> = {
   title: 'BreadCrumbs',
+  component: BreadCrumbs,
+  argTypes: {
+    crumb1_onClick: { action: 'crumb1_click' },
+    crumb2_onClick: { action: 'crumb2_click' },
+  },
 };
-export const Default = {
-  render: () => (
-    <BreadCrumbs>
-      <Crumb onClick={action('crumb1#click')}>Parent Entity</Crumb>
-      <Crumb onClick={action('crumb2#click')}>Parent Record Name</Crumb>
+export default meta;
+
+/**
+ *
+ */
+export const Default: StoryObj<StoryProps> = {
+  render: ({ crumb1, crumb2, crumb1_onClick, crumb2_onClick, ...args }) => (
+    <BreadCrumbs {...args}>
+      <Crumb onClick={crumb1_onClick} {...crumb1} />
+      <Crumb onClick={crumb2_onClick} {...crumb2} />
     </BreadCrumbs>
   ),
+  args: {
+    crumb1: {
+      children: 'Parent Entity',
+    },
+    crumb2: {
+      children: 'Parent Record Name',
+    },
+  },
   parameters: {
-    info: 'Default BreadCrumbs',
+    docs: {
+      storyDescription: 'Default BreadCrumbs',
+    },
   },
 };