feat(Sandbox): Integrate StackBlitz (#1796)

* kinda working stackblitz example * customized sandbox * refactor(Sandbox): make baseCode reusable across stackblitz and sandpack * feat: add broken console * feat: replace default sandbox * feat: skip peer installation * feat: use pnpm instead of npm * feat: add pnpm-lock code * feat: rollback lockfile change
razorpay · Nov 17, 2023 · 4f8c780 · 4f8c780
1 parent 1532208
commit 4f8c780
Show file tree

Hide file tree

Showing 26 changed files with 518 additions and 140 deletions.
diff --git a/packages/blade/.storybook/react/main.js b/packages/blade/.storybook/react/main.js
@@ -64,6 +64,17 @@ module.exports = {
       }),
     ];
 
+    // config.module.rules[0].exclude = new RegExp('/node_modules/(?!(@stackblitz)).*/');
+
+    config.module.rules.push({
+      test: /@stackblitz\/sdk[\\/].*\.m?js$/,
+      loader: 'babel-loader',
+      options: {
+        presets: ['@babel/preset-env'],
+        plugins: ['@babel/plugin-proposal-optional-chaining'],
+      },
+    });
+
     // Return the altered config
     return {
       ...config,

diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -147,6 +147,7 @@
     "@rollup/plugin-node-resolve": "15.2.1",
     "@rollup/plugin-replace": "5.0.2",
     "@size-limit/preset-big-lib": "8.2.4",
+    "@stackblitz/sdk": "1.9.0",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-actions": "6.5.16",
     "@storybook/addon-controls": "6.5.16",

diff --git a/packages/blade/src/components/ActionList/docs/ActionListDocs.tsx b/packages/blade/src/components/ActionList/docs/ActionListDocs.tsx
@@ -3,7 +3,7 @@ import { ActionList, ActionListItem, ActionListSection, Playground } from './sto
 import { actionListPropsTables } from './propsTable';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Code, Text, Title } from '~components/Typography';
-import { Sandbox, VerticalSandbox } from '~utils/storybook/Sandbox';
+import { Sandbox, VerticalSandbox } from '~utils/storybook/Sandbox/SandpackEditor';
 import { Box } from '~components/Box';
 import BaseBox from '~components/Box/BaseBox';
 import { ArgsTable } from '~utils/storybook/ArgsTable';

diff --git a/packages/blade/src/components/Alert/Alert.stories.tsx b/packages/blade/src/components/Alert/Alert.stories.tsx
@@ -24,43 +24,32 @@ const Page = (): ReactElement => {
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
         {`
-        import { useState } from 'react';
-        import { Alert, Button, Box } from '@razorpay/blade/components';
+        import { Alert } from '@razorpay/blade/components';
 
         function App() {
-          const [showAlert, setShowAlert] = useState(false);
           return (
-            <Box>
-              <Button onClick={() => setShowAlert(!showAlert)}>
-                Click to be alerted!
-              </Button>
-              { 
-                showAlert 
-                ? <Alert 
-                    title="The Button is Clicked 👀" 
-                    description="Click the Button again to hide alert"
-                    marginTop="spacing.4"
-                    actions={{
-                      primary: {
-                        onClick: () => {
-                          alert('Alert from the alert hehe')
-                        },
-                        text: 'Primary Action'
-                      },
-                      secondary: {
-                        href: 'https://razorpay.com',
-                        target: '_blank',
-                        text: 'Go to Razorpay.com'
-                      }
-                    }}
-                  /> 
-                : null 
-              }
-            </Box>
-          )
+            <Alert
+              title="Alert Title"
+              description="Add your description message here"
+              marginTop="spacing.4"
+              actions={{
+                primary: {
+                  onClick: () => {
+                    alert('Alert from the alert hehe');
+                  },
+                  text: 'Primary Action',
+                },
+                secondary: {
+                  href: 'https://razorpay.com',
+                  target: '_blank',
+                  text: 'Go to Razorpay.com',
+                },
+              }}
+            />
+          );
         }
-
-        export default App;
+        
+        export default App;        
         `}
       </Sandbox>
     </StoryPageWrapper>

diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -75,7 +75,7 @@ const Page = (): React.ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole editorHeight={600}>
+      <Sandbox editorHeight={600}>
         {`
           import React from 'react';
           import { 

diff --git a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
@@ -4,7 +4,11 @@ import BaseBox from './BaseBox';
 import { Box } from '.';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Code, Heading, Text, Title } from '~components/Typography';
-import { Sandbox, SandboxProvider, SandboxHighlighter } from '~utils/storybook/Sandbox';
+import {
+  Sandbox,
+  SandboxProvider,
+  SandboxHighlighter,
+} from '~utils/storybook/Sandbox/SandpackEditor';
 import { List, ListItem, ListItemCode, ListItemLink } from '~components/List';
 import { Link } from '~components/Link';
 import { castWebType } from '~utils';

diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -24,7 +24,7 @@ const Page = (): React.ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole editorHeight={400} editorWidthPercentage={60}>
+      <Sandbox showConsole editorHeight={400}>
         {`
           import { CheckboxGroup, Checkbox } from '@razorpay/blade/components';
 

diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
@@ -45,7 +45,7 @@ const Page = (): React.ReactElement => {
       }
     >
       <Title>Usage</Title>
-      <Sandbox showConsole editorHeight={400} editorWidthPercentage={60}>
+      <Sandbox showConsole editorHeight={400}>
         {`
           import { Box, Chip, ChipGroup, Text } from '@razorpay/blade/components';
 

diff --git a/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx b/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
@@ -9,7 +9,7 @@ import {
 import { getSimpleAutoComplete } from './autoCompleteStories';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Code, Heading, Text, Title } from '~components/Typography';
-import { Sandbox, VerticalSandbox } from '~utils/storybook/Sandbox';
+import { Sandbox, VerticalSandbox } from '~utils/storybook/Sandbox/SandpackEditor';
 import { Box } from '~components/Box';
 import { ArgsTable } from '~utils/storybook/ArgsTable';
 import { List, ListItem, ListItemLink } from '~components/List';

diff --git a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
@@ -25,7 +25,7 @@ const Page = (): ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole>
+      <Sandbox>
         {`
           import { PasswordInput } from '@razorpay/blade/components';
 

diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
@@ -230,7 +230,7 @@ export default {
           }}
         >
           <Title>Usage</Title>
-          <Sandbox showConsole>
+          <Sandbox>
             {`
               import { TextInput } from '@razorpay/blade/components';
 

diff --git a/packages/blade/src/components/Popover/Popover.stories.tsx b/packages/blade/src/components/Popover/Popover.stories.tsx
@@ -41,7 +41,7 @@ const Page = (): React.ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole>
+      <Sandbox>
         {`
         import { Popover, Button } from '@razorpay/blade/components'
         

diff --git a/packages/blade/src/components/Radio/Radio.stories.tsx b/packages/blade/src/components/Radio/Radio.stories.tsx
@@ -26,7 +26,7 @@ const Page = (): React.ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole editorHeight={400} editorWidthPercentage={60}>
+      <Sandbox showConsole editorHeight={400}>
         {`
           import { RadioGroup, Radio } from '@razorpay/blade/components';
 

diff --git a/packages/blade/src/components/Switch/Switch.stories.tsx b/packages/blade/src/components/Switch/Switch.stories.tsx
@@ -31,18 +31,21 @@ const Page = (): React.ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole>
+      <Sandbox>
         {`
-        import { Switch } from '@razorpay/blade/components'
-        
+        import { Switch } from '@razorpay/blade/components';
+
         function App(): React.ReactElement {
           return (
             // Check console
-            <Switch onChange={(e) => console.log(e.isChecked)} accessibilityLabel="Toggle DarkMode" />
-          )
+            <Switch
+              onChange={(e) => console.log(e.isChecked)}
+              accessibilityLabel="Toggle DarkMode"
+            />
+          );
         }
-
-        export default App;
+        
+        export default App;        
       `}
       </Sandbox>
     </StoryPageWrapper>

diff --git a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
@@ -32,7 +32,7 @@ const Page = (): React.ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox showConsole>
+      <Sandbox>
         {`
         import { Tooltip, Button } from '@razorpay/blade/components'
         

diff --git a/packages/blade/src/components/Typography/Code/Code.stories.tsx b/packages/blade/src/components/Typography/Code/Code.stories.tsx
@@ -22,7 +22,7 @@ const Page = (): ReactElement => {
       }}
     >
       <Title>Usage</Title>
-      <Sandbox editorWidthPercentage={60}>
+      <Sandbox>
         {`
           import { Code, Text } from '@razorpay/blade/components';
 

diff --git a/...tils/storybook/Sandbox/Sandbox.native.tsx → ...Sandbox/SandpackEditor/Sandbox.native.tsx b/...tils/storybook/Sandbox/Sandbox.native.tsx → ...Sandbox/SandpackEditor/Sandbox.native.tsx
@@ -1,7 +1,7 @@
 import dedent from 'dedent';
 import type { CodeViewerProps } from '@codesandbox/sandpack-react';
 import { ScrollView } from 'react-native';
-import type { RecipeSandboxProps, SandboxProps } from './types';
+import type { RecipeSandboxProps, SandboxProps } from '../types';
 import { BaseText } from '~components/Typography/BaseText';
 import { Link } from '~components/Link';
 import { Text } from '~components/Typography';

diff --git a/...c/utils/storybook/Sandbox/Sandbox.web.tsx → ...ok/Sandbox/SandpackEditor/Sandbox.web.tsx b/...c/utils/storybook/Sandbox/Sandbox.web.tsx → ...ok/Sandbox/SandpackEditor/Sandbox.web.tsx
@@ -10,28 +10,15 @@ import {
 } from '@codesandbox/sandpack-react';
 import { DocsContext } from '@storybook/addon-docs';
 import dedent from 'dedent';
-import type { RecipeSandboxProps, SandboxProps } from './types';
+import type { RecipeSandboxProps, SandboxProps } from '../types';
 // @ts-expect-error We don't resolve JSON files right now. didn't want to change TS config for single JSON
 import packageJson from '../../../../package.json'; // eslint-disable-line
+import { getIndexTSX, getReactScriptsJSDependencies } from '../baseCode';
 import BaseBox from '~components/Box/BaseBox';
 import { castWebType } from '~utils';
 import { Box } from '~components/Box';
 import { Button } from '~components/Button';
 
-const getBladeVersion = (): string => {
-  // We don't publish codesandbox ci on master so version is not present
-  const isMaster = process.env.GITHUB_REF === 'refs/heads/master';
-  const sha = process.env.GITHUB_SHA;
-  if (sha && !isMaster) {
-    const shortSha = sha.slice(0, 8);
-    return `https://pkg.csb.dev/razorpay/blade/commit/${shortSha}/@razorpay/blade`;
-  }
-
-  return '*';
-};
-
-const bladeVersion = getBladeVersion();
-
 const useSandpackSetup = ({
   code,
   language = 'tsx',
@@ -49,77 +36,10 @@ const useSandpackSetup = ({
   return {
     template: 'react-ts',
     files: {
-      '/index.tsx': dedent`import { StrictMode } from "react";
-            import { createRoot } from "react-dom/client";
-            import { createGlobalStyle } from "styled-components";
-  
-            import { BladeProvider, Box, Theme } from "@razorpay/blade/components";
-            import { ${themeTokenName}, createTheme } from "@razorpay/blade/tokens";
-            
-            import App from "./App";
-
-            // Only way to load font correctly in sandbpack. Use @fontsource/lato in your actual projects
-            document.head.innerHTML += \`
-            <link rel="preconnect" href="https://fonts.googleapis.com">
-            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-            <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
-            \`
-  
-            const GlobalStyles = createGlobalStyle\`
-              * { 
-                box-sizing: border-box;
-              }
-              body {
-                margin: 0;
-                padding: 0;
-                font-family: 'Lato', sans-serif;
-              }
-            \`;
-            
-            const rootElement = document.getElementById("root");
-            
-            if (!rootElement) {
-              throw new Error("root is null");
-            }
-            const root = createRoot(rootElement);
-            
-            const getTheme = () => {
-              if(${Boolean(brandColor)}){
-                return createTheme({
-                  brandColor: "${brandColor}",
-                });
-              }
-              return ${themeTokenName};
-            }
-
-            root.render(
-              <StrictMode>
-                <BladeProvider themeTokens={getTheme()} colorScheme="${colorScheme}">
-                  <GlobalStyles />
-                  <Box 
-                    backgroundColor="surface.background.level1.lowContrast"
-                    minHeight="100vh"
-                    padding={['spacing.4', 'spacing.7']}
-                  >
-                    <App />
-                  </Box>
-                </BladeProvider>
-              </StrictMode>
-            );
-
-            console.clear(); // There could be some codesandbox warnings, clearing them here on init
-            `,
+      '/index.tsx': getIndexTSX({ themeTokenName, brandColor, colorScheme }),
       [`/App.${language}`]: dedent(code),
     },
-    customSetup: {
-      dependencies: {
-        react: packageJson.peerDependencies.react,
-        'react-dom': packageJson.peerDependencies['react-dom'],
-        'react-scripts': '4.0.3',
-        '@razorpay/blade': bladeVersion,
-        'styled-components': packageJson.peerDependencies['styled-components'],
-      },
-    },
+    customSetup: getReactScriptsJSDependencies(),
   };
 };
 

diff --git a/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/index.ts b/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/index.ts
@@ -0,0 +1 @@
+export * from './Sandbox';
diff --git a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.native.tsx b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.native.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import dedent from 'dedent';
+import { ScrollView } from 'react-native';
+import type { SandboxProps } from '../types';
+import { BaseText } from '~components/Typography/BaseText';
+import { Link } from '~components/Link';
+
+// In React Native, the codesandbox doesn't work. So replacing it with normal text display for native
+function Sandbox({ children, uri }: SandboxProps): JSX.Element {
+  return (
+    <ScrollView>
+      {uri ? <Link href={uri}>Open Story in Web</Link> : null}
+      <BaseText marginTop="spacing.5" fontFamily="code">
+        {dedent(children)}
+      </BaseText>
+    </ScrollView>
+  );
+}
+
+export { Sandbox };