Migrate to CSF v3

Shopify · Apr 23, 2024 · d9ed16c · d9ed16c
1 parent 7f0c3ee
commit d9ed16c
Show file tree

Hide file tree

Showing 90 changed files with 36,606 additions and 35,035 deletions.
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
diff --git a/polaris-react/playground/KitchenSink.tsx b/polaris-react/playground/KitchenSink.tsx
@@ -23,37 +23,39 @@ Object.entries(modules).forEach(
   },
 );
 
-export function KitchenSink() {
-  return Object.entries(stories)
-    .filter(
-      ([id]) =>
-        ![
-          'Modal',
-          'ContextualSaveBar',
-          'TopBar',
-          'Sheet',
-          'Frame',
-          'Loading',
-          'AppProvider',
-        ].includes(id.split(':')[0]),
-    )
-    .map(([id, Story]) => {
-      return (
-        <div key={id}>
-          <RenderPerformanceProfiler
-            id={id.replace('All Components/', '')}
-            kind={id}
-            printToDOM
-          >
-            <Story />
-          </RenderPerformanceProfiler>
-          <hr
-            style={{
-              border: 'none',
-              margin: 10,
-            }}
-          />
-        </div>
-      );
-    });
-}
+export const KitchenSink = {
+  render() {
+    return Object.entries(stories)
+      .filter(
+        ([id]) =>
+          ![
+            'Modal',
+            'ContextualSaveBar',
+            'TopBar',
+            'Sheet',
+            'Frame',
+            'Loading',
+            'AppProvider',
+          ].includes(id.split(':')[0]),
+      )
+      .map(([id, Story]) => {
+        return (
+          <div key={id}>
+            <RenderPerformanceProfiler
+              id={id.replace('All Components/', '')}
+              kind={id}
+              printToDOM
+            >
+              <Story />
+            </RenderPerformanceProfiler>
+            <hr
+              style={{
+                border: 'none',
+                margin: 10,
+              }}
+            />
+          </div>
+        );
+      });
+  },
+};
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 
 import {Page} from '../src';
 
-export function Playground() {
-  return (
-    <Page title="Playground">
-      {/* Add the code you want to test in here */}
-    </Page>
-  );
-}
+export const Playground = {
+  render() {
+    return (
+      <Page title="Playground">
+        {/* Add the code you want to test in here */}
+      </Page>
+    );
+  },
+};
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
@@ -1,87 +1,95 @@
 import React, {useCallback, useState} from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Meta} from '@storybook/react';
 import {AccountConnection, Box, Link, Text, BlockStack} from '@shopify/polaris';
 
 export default {
   component: AccountConnection,
-} as ComponentMeta<typeof AccountConnection>;
+} as Meta<typeof AccountConnection>;
 
-export function All() {
-  return (
-    <>
-      <BlockStack gap="400">
-        <Text as="h2" variant="headingXl">
-          Default
-        </Text>
-        <Default />
-        <Box paddingBlockEnd="300" />
-      </BlockStack>
-      <BlockStack gap="400">
-        <Text as="h2" variant="headingXl">
-          With account connected
-        </Text>
-        <WithAccountConnected />
-        <Box paddingBlockEnd="300" />
-      </BlockStack>
-    </>
-  );
-}
+export const All = {
+  render() {
+    return (
+      /* eslint-disable react/jsx-pascal-case */
+      <>
+        <BlockStack gap="400">
+          <Text as="h2" variant="headingXl">
+            Default
+          </Text>
+          <Default.render />
+          <Box paddingBlockEnd="300" />
+        </BlockStack>
+        <BlockStack gap="400">
+          <Text as="h2" variant="headingXl">
+            With account connected
+          </Text>
+          <WithAccountConnected.render />
+          <Box paddingBlockEnd="300" />
+        </BlockStack>
+      </>
+      /* eslint-enable react/jsx-pascal-case */
+    );
+  },
+};
 
-export function Default() {
-  const [connected, setConnected] = useState(false);
-  const accountName = connected ? 'Olive Eight' : '';
+export const Default = {
+  render() {
+    const [connected, setConnected] = useState(false);
+    const accountName = connected ? 'Olive Eight' : '';
 
-  const handleAction = useCallback(() => {
-    setConnected((connected) => !connected);
-  }, []);
+    const handleAction = useCallback(() => {
+      setConnected((connected) => !connected);
+    }, []);
 
-  const buttonText = connected ? 'Disconnect' : 'Connect';
-  const details = connected ? 'Account connected' : 'No account connected';
+    const buttonText = connected ? 'Disconnect' : 'Connect';
+    const details = connected ? 'Account connected' : 'No account connected';
 
-  const terms = connected ? null : (
-    <Text as="p" variant="bodyMd">
-      By clicking Connect, you agree to accept Sample App’s{' '}
-      <Link url="Example App">terms and conditions</Link>. You’ll pay a
-      commission rate of 15% on sales made through Sample App.
-    </Text>
-  );
+    const terms = connected ? null : (
+      <Text as="p" variant="bodyMd">
+        By clicking Connect, you agree to accept Sample App’s{' '}
+        <Link url="Example App">terms and conditions</Link>. You’ll pay a
+        commission rate of 15% on sales made through Sample App.
+      </Text>
+    );
 
-  return (
-    <AccountConnection
-      accountName={accountName}
-      connected={connected}
-      title="Example App"
-      action={{
-        content: buttonText,
-        onAction: handleAction,
-      }}
-      details={details}
-      termsOfService={terms}
-    />
-  );
-}
+    return (
+      <AccountConnection
+        accountName={accountName}
+        connected={connected}
+        title="Example App"
+        action={{
+          content: buttonText,
+          onAction: handleAction,
+        }}
+        details={details}
+        termsOfService={terms}
+      />
+    );
+  },
+};
 
-export function WithAccountConnected() {
-  const [connected, setConnected] = useState(true);
-  const accountName = connected ? 'Olive Eight' : '';
+export const WithAccountConnected = {
+  render() {
+    const [connected, setConnected] = useState(true);
+    const accountName = connected ? 'Olive Eight' : '';
 
-  const handleAction = useCallback(() => {
-    setConnected((connected) => !connected);
-  }, []);
+    const handleAction = useCallback(() => {
+      setConnected((connected) => !connected);
+    }, []);
 
-  const buttonText = connected ? 'Disconnect' : 'Connect';
-  const details = connected ? 'Account connected' : 'No account connected';
+    const buttonText = connected ? 'Disconnect' : 'Connect';
+    const details = connected ? 'Account connected' : 'No account connected';
 
-  return (
-    <AccountConnection
-      accountName={accountName}
-      connected={connected}
-      title="Example App"
-      action={{
-        content: buttonText,
-        onAction: handleAction,
-      }}
-      details={details}
-    />
-  );
-}
+    return (
+      <AccountConnection
+        accountName={accountName}
+        connected={connected}
+        title="Example App"
+        action={{
+          content: buttonText,
+          onAction: handleAction,
+        }}
+        details={details}
+      />
+    );
+  },
+};