migrate Spaced, syntaxhighligter to CSF3

code/ui/.storybook/main.ts

@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     },
     {
       directory: '../components/src/**/',
-      files: '@(Button|Badge|brand|form)/*.stories.@(js|jsx|ts|tsx|mdx)',
+      files: 'syntaxhighlighter/*.stories.@(js|jsx|ts|tsx|mdx)',
       titlePrefix: 'Components',
     },
     // '../components/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',

code/ui/components/src/spaced/Spaced.stories.tsx

@@ -14,59 +14,51 @@ const PlaceholderInline = styled.span(({ color }) => ({
   padding: 20,
 }));
 
-storiesOf('Basics/Spaced', module)
-  .add('row', () => (
+export default {
+  title: 'Basics/Spaced',
+  component: Spaced,
+};
+
+export const Default = (args) => (
+  <div>
+    <PlaceholderBlock color="silver" />
+    <Spaced {...args}>
+      <PlaceholderBlock />
+      <PlaceholderBlock />
+      <PlaceholderBlock />
+    </Spaced>
+    <PlaceholderBlock color="silver" />
+  </div>
+);
+
+export const Column = {
+  render: (args) => (
     <div>
       <PlaceholderBlock color="silver" />
-      <Spaced row={1}>
+      <Spaced {...args}>
         <PlaceholderBlock />
         <PlaceholderBlock />
         <PlaceholderBlock />
       </Spaced>
       <PlaceholderBlock color="silver" />
     </div>
-  ))
-  .add('row outer', () => (
-    <div>
-      <PlaceholderBlock color="silver" />
-      <Spaced row={1} outer>
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-      </Spaced>
-      <PlaceholderBlock color="silver" />
-    </div>
-  ))
-  .add('row multiply', () => (
-    <div>
-      <PlaceholderBlock color="silver" />
-      <Spaced row={3} outer={0.5}>
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-        <PlaceholderBlock />
-      </Spaced>
-      <PlaceholderBlock color="silver" />
-    </div>
-  ))
-  .add('col', () => (
+  ),
+};
+export const Row = {
+  render: (args) => (
     <div>
       <PlaceholderInline color="silver" />
-      <Spaced col={1}>
+      <Spaced {...args}>
         <PlaceholderInline />
         <PlaceholderInline />
         <PlaceholderInline />
       </Spaced>
       <PlaceholderInline color="silver" />
     </div>
-  ))
-  .add('col outer', () => (
-    <div>
-      <PlaceholderInline color="silver" />
-      <Spaced col={1} outer>
-        <PlaceholderInline />
-        <PlaceholderInline />
-        <PlaceholderInline />
-      </Spaced>
-      <PlaceholderInline color="silver" />
-    </div>
-  ));
+  ),
+  argTypes: {
+    col: {
+      defaultValue: 1,
+    },
+  },
+};

code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -1,212 +1,231 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { ThemeProvider, themes, ensure } from '@storybook/theming';
 import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
 
-storiesOf('Basics/SyntaxHighlighter', module)
-  .add('bash', () => (
-    <SyntaxHighlighter language="bash" copyable={false}>
-      npx npm-check-updates '/storybook/' -u && npm install
-    </SyntaxHighlighter>
-  ))
-  .add('css', () => (
-    <SyntaxHighlighter language="css" copyable={false}>
-      {`
-        .className {
-          border: 1px solid hotpink;
-        }
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('json', () => (
-    <SyntaxHighlighter language="json" copyable={false}>
-      {`
-      {
+export default {
+  title: 'Basics/SyntaxHighlighter',
+  component: SyntaxHighlighter,
+};
+
+export const JS = {
+  args: {
+    language: 'js',
+    children: `import React, { createElement } from 'react';
+import { Good, Things } from 'life';
+
+const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
+
+console.log(result);
+export { result as default };`,
+  },
+};
+
+export const Default = JS;
+
+export const Bash = {
+  args: {
+    language: 'bash',
+    children: `npx npm-check-updates ' / storybook / ' -u && npm install`,
+  },
+};
+
+export const CSS = {
+  args: {
+    language: 'css',
+    children: `.className {
+              border: 1px solid hotpink;
+            }`,
+  },
+};
+
+export const JSON = {
+  args: {
+    language: 'json',
+    children: `{
         "number": 1,
         "string": "something",
         "object": {
           "property": "value",
         },
         array: [1,2,3],
+      }`,
+  },
+};
+
+export const Markdown = {
+  args: {
+    language: 'markdown',
+    children: `
+# a big header
+
+some code:
+      
+\`\`\`js
+const name = "a string";
+\`\`\`
+      
+> crazy`,
+  },
+};
+
+export const Yaml = {
+  args: {
+    language: 'yaml',
+    children: `
+      product:
+        - sku: BL394D
+          quantity: 4
+          description: Basketball
+          price: 450.00
+`,
+  },
+};
+
+export const JSX = {
+  args: {
+    language: 'jsx',
+    children: `import { Good, Things } from 'life';
+
+    const result = () => <Good><Things all={true} /></Good>;
+
+    export { result as default };
+`,
+  },
+};
+
+export const GraphQL = {
+  args: {
+    language: 'graphql',
+    children: `query HeroNameAndFriends($episode: Episode) {
+      hero(episode: $episode) {
+        name
+      friends {
+          name
       }
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('markdown', () => (
-    <SyntaxHighlighter language="markdown" copyable={false}>
-      {`
-      # a big header
+    }
+  }
+`,
+  },
+};
 
-      some code:
-
-      ~~~js
-      const name = "a string";
-      ~~~
-
-      > crazy
-
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('yaml', () => (
-    <SyntaxHighlighter language="yaml" copyable={false}>
-      {`
-        product:
-        - sku         : BL394D
-          quantity    : 4
-          description : Basketball
-          price       : 450.00
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('jsx', () => (
-    <SyntaxHighlighter language="jsx" copyable={false}>
-      {`import { Good, Things } from 'life';
-
-        const result = () => <Good><Things all={true} /></Good>;
-
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('js', () => (
-    <SyntaxHighlighter language="jsx" copyable={false}>
-      {`import React, { createElement } from 'react';
-        import { Good, Things } from 'life';
-
-        const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
-
-        console.log(result);
-
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('graphql', () => (
-    <SyntaxHighlighter language="graphql" copyable={false}>
-      {`query HeroNameAndFriends($episode: Episode) {
-          hero(episode: $episode) {
-            name
-            friends {
-              name
-            }
-          }
-        }
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('unsupported', () => (
-    <SyntaxHighlighter language="C#" bordered copyable>
-      {`
-        // A Hello World! program in C#.
-        using System;
-        namespace HelloWorld
+export const Unsupported = {
+  args: {
+    language: 'C#',
+    children: `// A Hello World! program in C#.
+    using System;
+    namespace HelloWorld
+    {
+        class Hello
+      {
+          static void Main()
         {
-          class Hello 
-          {
-            static void Main() 
-            {
-              Console.WriteLine("Hello World!");
+            Console.WriteLine("Hello World!");
 
-              // Keep the console window open in debug mode.
-              Console.WriteLine("Press any key to exit.");
-              Console.ReadKey();
-            }
-          }
+          // Keep the console window open in debug mode.
+          Console.WriteLine("Press any key to exit.");
+          Console.ReadKey();
         }
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('dark unsupported', () => {
-    const theme = ensure(themes.dark);
-    return (
-      <ThemeProvider theme={theme}>
-        <SyntaxHighlighter bordered language="C#" copyable>
-          {`
-            // A Hello World! program in C#.
-            using System;
-            namespace HelloWorld
-            {
-              class Hello 
-              {
-                static void Main() 
-                {
-                  Console.WriteLine("Hello World!");
+      }
+    }`,
+  },
+};
 
-                  // Keep the console window open in debug mode.
-                  Console.WriteLine("Press any key to exit.");
-                  Console.ReadKey();
-                }
-              }
-            }
-          `}
-        </SyntaxHighlighter>
-      </ThemeProvider>
-    );
-  })
-  .add('story', () => (
-    <SyntaxHighlighter language="jsx" copyable={false}>
-      {`
-        import React from 'react';
-        import { storiesOf } from '@storybook/react';
-        import { styled } from '@storybook/theming';
+export const UnsupportedDark = {
+  args: {
+    language: 'C#',
+    children: `// A Hello World! program in C#.
+    using System;
+    namespace HelloWorld
+    {
+        class Hello
+      {
+          static void Main()
+        {
+            Console.WriteLine("Hello World!");
 
-        import Heading from './heading';
+          // Keep the console window open in debug mode.
+          Console.WriteLine("Press any key to exit.");
+          Console.ReadKey();
+        }
+      }
+    }`,
+  },
+  render: (args) => (
+    <ThemeProvider theme={ensure(themes.dark)}>
+      <SyntaxHighlighter {...args} />
+    </ThemeProvider>
+  ),
+};
 
-        const Holder = styled.div({
-          margin: 10,
-          border: '1px dashed deepskyblue',
-          // overflow: 'hidden',
-        });
+export const Story = {
+  args: {
+    language: 'jsx',
+    children: `import React from 'react';
+    import { storiesOf } from '@storybook/react';
+    import { styled } from '@storybook/theming';
 
-        storiesOf('Basics|Heading', module).add('types', () => (
-          <div>
-            <Holder>
-              <Heading>DEFAULT WITH ALL CAPS</Heading>
-            </Holder>
-            <Holder>
-              <Heading sub="With a great sub">THIS LONG DEFAULT WITH ALL CAPS & SUB</Heading>
-            </Holder>
-            <Holder>
-              <Heading type="page">page type</Heading>
-            </Holder>
-            <Holder>
-              <Heading type="page" sub="With a sub">
-                page type
-              </Heading>
-            </Holder>
-          </div>
-        ));
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('bordered & copy-able', () => (
-    <SyntaxHighlighter language="jsx" copyable bordered>
-      {`import { Good, Things } from 'life';
+    import Heading from './heading';
 
-        const result = () => <Good><Things /></Good>;
+    const Holder = styled.div({
+        margin: 10,
+      border: '1px dashed deepskyblue',
+      // overflow: 'hidden',
+    });
 
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('padded', () => (
-    <SyntaxHighlighter language="jsx" padded>
-      {`import { Good, Things } from 'life';
+    storiesOf('Basics|Heading', module).add('types', () => (
+        <div>
+        <Holder>
+          <Heading>DEFAULT WITH ALL CAPS</Heading>
+        </Holder>
+        <Holder>
+          <Heading sub="With a great sub">THIS LONG DEFAULT WITH ALL CAPS & SUB</Heading>
+        </Holder>
+        <Holder>
+          <Heading type="page">page type</Heading>
+        </Holder>
+        <Holder>
+          <Heading type="page" sub="With a sub">
+            page type
+          </Heading>
+        </Holder>
+      </div>
+    ));`,
+  },
+};
 
-        const result = () => <Good><Things /></Good>;
+export const BorderedCopyable = {
+  args: {
+    copyable: true,
+    bordered: true,
+    language: 'jsx',
+    children: `import { Good, Things } from 'life';
 
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ))
-  .add('showLineNumbers', () => (
-    <SyntaxHighlighter language="jsx" copyable={false} showLineNumbers>
-      {`import { Good, Things } from 'life';
+    const result = () => <Good><Things /></Good>;
 
-        const result = () => <Good><Things /></Good>;
+    export { result as default };`,
+  },
+};
 
-        export { result as default };
-      `}
-    </SyntaxHighlighter>
-  ));
+export const Padded = {
+  args: {
+    padded: true,
+    language: 'jsx',
+    children: `import { Good, Things } from 'life';
+
+    const result = () => <Good><Things /></Good>;
+
+    export { result as default };`,
+  },
+};
+
+export const ShowLineNumbers = {
+  args: {
+    showLineNumbers: true,
+    language: 'jsx',
+    children: `import { Good, Things } from 'life';
+
+    const result = () => <Good><Things /></Good>;
+
+    export { result as default };`,
+  },
+};