Storybook/Export to CodeSandbox

.storybook/babel.plugin.js

@@ -0,0 +1,32 @@
+// This Babel plugin adds context.parameters.fullSource property to Storybook stories,
+// which contains source of of the file where story is present.
+// It’s utilized by Export to CodeSandbox.
+
+// @ts-ignore
+module.exports = function (babel) {
+  const { types: t } = babel;
+  return {
+    name: 'literal-replacer',
+    visitor: {
+      // @ts-ignore
+      MemberExpression(path) {
+        if (path.node.property.name === 'parameters' && path.parentPath.isAssignmentExpression()) {
+          const storyName = path.node.object.name;
+          const expression = t.expressionStatement(
+            t.assignmentExpression(
+              '=',
+              t.memberExpression(
+                t.memberExpression(t.identifier(storyName), t.identifier('parameters')),
+                t.identifier('fullSource'),
+              ),
+              t.identifier('__STORY__'),
+            ),
+          );
+          const expressionStatement = path.findParent(p => p.isExpressionStatement());
+          expressionStatement.insertAfter(expression);
+          path.stop();
+        }
+      },
+    },
+  };
+};

.storybook/main.js

@@ -39,6 +39,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
     '@storybook/addon-a11y',
     '@storybook/addon-knobs/preset',
     'storybook-addon-performance',
+    'storybook-addon-export-to-codesandbox',
   ],
   webpackFinal: config => {
     const tsPaths = new TsconfigPathsPlugin({
@@ -51,6 +52,17 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
 
     if (config.module && config.module.rules) {
       overrideDefaultBabelLoader(/** @type {import("webpack").RuleSetRule[]} */ (config.module.rules));
+
+      config.module.rules.unshift({
+        test: /\.stories\.tsx$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [require('./babel.plugin')],
+          },
+        },
+      });
     }
 
     return config;

change/@fluentui-react-button-d1f817e2-ff90-495f-bdc9-27c91f7931ef.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update stories structure to make them exportable to CodeSandbox",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-components-ac6ea616-3cc3-4a01-ae02-aa2fb02937fe.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add export to CodeSandbox for stories",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -230,7 +230,8 @@
     "webpack-merge": "5.7.3",
     "workspace-tools": "0.12.3",
     "yargs": "13.3.2",
-    "yargs-parser": "13.1.2"
+    "yargs-parser": "13.1.2",
+    "storybook-addon-export-to-codesandbox": "0.2.3"
   },
   "license": "MIT",
   "workspaces": {

packages/react-button/src/components/Button/Button.stories.tsx

@@ -1,168 +1,20 @@
-import * as React from 'react';
-import { Button, ButtonProps } from '../../Button';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
+import { Button } from '@fluentui/react-button';
 import { Meta } from '@storybook/react';
-import { CalendarMonth24Regular } from '@fluentui/react-icons';
+
 import descriptionMd from './ButtonDescription.md';
 import bestPracticesMd from './ButtonBestPractices.md';
 
-export const Default = (props: ButtonProps) => <Button {...props}>Button</Button>;
-
-export const Emphasis = () => (
-  <>
-    <Button primary>Primary button</Button>
-    <Button>Default button</Button>
-    <Button outline>Outline button</Button>
-    <Button subtle>Subtle button</Button>
-    <Button transparent>Transparent button</Button>
-  </>
-);
-Emphasis.parameters = {
-  docs: {
-    description: {
-      story:
-        '- `primary` button is used for the most important action on the page or in a view\n' +
-        '- `default` button is used for subordinate actions\n' +
-        '- `outline` has no background styling and is emphasized through the styling of its content and borders\n' +
-        '- `transparent` has no background or border styling and is just emphasized through its content styling\n' +
-        '- `subtle` button blends into its background and becomes less emphasized\n',
-    },
-  },
-};
-
-export const ButtonWithIcon = () => (
-  <>
-    <Button icon={<CalendarMonth24Regular />}>Text</Button>
-    <Button icon={<CalendarMonth24Regular />} iconPosition="after">
-      Text
-    </Button>
-    <Button icon={<CalendarMonth24Regular />} />
-  </>
-);
-ButtonWithIcon.parameters = {
-  docs: {
-    description: {
-      story:
-        'Button has an `icon` slot that, if specified, renders an icon either `before` or `after` the children, ' +
-        'as specified by the `iconPosition` prop.',
-    },
-  },
-};
-
-export const CircularButton = () => (
-  <>
-    <Button circular>Button</Button>
-    <Button circular outline icon={<CalendarMonth24Regular />} />
-    <Button circular subtle icon={<CalendarMonth24Regular />} />
-    <Button circular transparent icon={<CalendarMonth24Regular />} />
-  </>
-);
-CircularButton.parameters = {
-  docs: {
-    description: {
-      story: 'A button can have completely rounded corners.',
-    },
-  },
-};
-
-export const ButtonSize = () => {
-  const groupStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '0.5em' };
-  const headerStyles: React.CSSProperties = { width: '100%', margin: 0 };
-  return (
-    <>
-      <div style={groupStyles}>
-        <h4 style={headerStyles}>small</h4>
-        <Button size="small">Text</Button>
-        <Button size="small" icon={<CalendarMonth24Regular />}>
-          Text
-        </Button>
-        <Button size="small" icon={<CalendarMonth24Regular />} />
-      </div>
-      <div style={groupStyles}>
-        <h4 style={headerStyles}>medium</h4>
-        <Button>Text</Button>
-        <Button icon={<CalendarMonth24Regular />}>Text</Button>
-        <Button icon={<CalendarMonth24Regular />} />
-      </div>
-      <div style={groupStyles}>
-        <h4 style={headerStyles}>large</h4>
-        <Button size="large">Text</Button>
-        <Button size="large" icon={<CalendarMonth24Regular />}>
-          Text
-        </Button>
-        <Button size="large" icon={<CalendarMonth24Regular />} />
-      </div>
-    </>
-  );
-};
-ButtonSize.parameters = {
-  docs: {
-    description: {
-      story: 'A button supports `small`, `medium` and `large` size. Default size is `medium`.',
-    },
-  },
-};
-
-export const BlockButton = () => (
-  <>
-    <Button block>Block button</Button>
-  </>
-);
-BlockButton.parameters = {
-  docs: {
-    description: {
-      story: 'A button can fill the width of its container.',
-    },
-  },
-};
-
-export const DisabledButton = () => {
-  const groupStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '0.5em' };
+export { Emphasis } from './ButtonEmphasis.stories';
+export { Default } from './ButtonDefault.stories';
+export { Disabled } from './ButtonDisabled.stories';
 
-  return (
-    <>
-      <div style={groupStyles}>
-        <Button>Default</Button>
-        <Button disabled>Disabled</Button>
-        <Button disabledFocusable>Disabled focusable</Button>
-      </div>
-      <div style={groupStyles}>
-        <Button primary icon={<CalendarMonth24Regular />}>
-          Primary
-        </Button>
-        <Button primary disabled icon={<CalendarMonth24Regular />}>
-          Primary disabled
-        </Button>
-        <Button primary disabledFocusable>
-          Primary disabled focusable
-        </Button>
-      </div>
-    </>
-  );
-};
-DisabledButton.parameters = {
-  docs: {
-    description: {
-      story: `A button can be \`disabled\` or \`disabledFocusable\`.
-              \`disabledFocusable\` is used in scenarios where it is important to keep a consistent tab order
-              for screen reader and keyboard users. The primary example of this pattern is when
-              the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.`,
-    },
-  },
-};
-
-export const ButtonWithLongText = () => (
-  <>
-    <Button>Text</Button>
-    <Button>Text truncates after it hits the max width token value</Button>
-  </>
-);
-ButtonWithLongText.parameters = {
-  docs: {
-    description: {
-      story: 'Text truncates after it hits the max width theme token value.',
-    },
-  },
-};
+export { WithIcon } from './ButtonWithIcon.stories';
+export { Circular } from './ButtonCircular.stories';
+export { Size } from './ButtonSize.stories';
+export { Block } from './ButtonBlock.stories';
+export { WithLongText } from './ButtonWithLongText.stories';
 
 export default {
   title: 'Components/Button',
@@ -174,11 +26,4 @@ export default {
       },
     },
   },
-  decorators: [
-    Story => (
-      <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta;

packages/react-button/src/components/Button/ButtonBlock.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
+import { Button } from '@fluentui/react-button';
+
+export const Block = () => (
+  <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+    <Button block>Block button</Button>
+  </div>
+);
+Block.parameters = {
+  docs: {
+    description: {
+      story: 'A button can fill the width of its container.',
+    },
+  },
+};

packages/react-button/src/components/Button/ButtonCircular.stories.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
+import { Button } from '@fluentui/react-button';
+import { CalendarMonth24Regular } from '@fluentui/react-icons';
+
+export const Circular = () => (
+  <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+    <Button circular>Button</Button>
+    <Button circular outline icon={<CalendarMonth24Regular />} />
+    <Button circular subtle icon={<CalendarMonth24Regular />} />
+    <Button circular transparent icon={<CalendarMonth24Regular />} />
+  </div>
+);
+Circular.parameters = {
+  docs: {
+    description: {
+      story: 'A button can have completely rounded corners.',
+    },
+  },
+};

packages/react-button/src/components/Button/ButtonDefault.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - add link to this comment please  (see https://github.com/microsoft/fluentui/pull/18695)
+import { Button, ButtonProps } from '@fluentui/react-button';
+
+export const Default = (props: ButtonProps) => (
+  <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+    <Button {...props}>Button</Button>
+  </div>
+);