docs: fix broken Sandbox example in Interactive Card story (#1835)

razorpay · Nov 23, 2023 · 00aa407 · 00aa407
1 parent af070d3
commit 00aa407
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/packages/blade/src/components/Card/CardInteractive.stories.tsx b/packages/blade/src/components/Card/CardInteractive.stories.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable no-alert */
 import type { Meta, ComponentStory } from '@storybook/react';
 import React from 'react';
-import { SandpackCodeEditor, SandpackLayout, SandpackPreview } from '@codesandbox/sandpack-react';
 import type { CardProps } from './Card';
 import {
   CardBody,
@@ -24,9 +23,9 @@ import { Box } from '~components/Box';
 import { Button } from '~components/Button';
 import { VisuallyHidden } from '~components/VisuallyHidden';
 import { Amount } from '~components/Amount';
-import { castWebType, isReactNative } from '~utils';
+import { isReactNative } from '~utils';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { SandboxProvider } from '~utils/storybook/Sandbox';
+import { Sandbox } from '~utils/storybook/Sandbox';
 import { Badge } from '~components/Badge';
 import { Radio, RadioGroup } from '~components/Radio';
 import { Checkbox, CheckboxGroup } from '~components/Checkbox';
@@ -45,8 +44,8 @@ const Page = (): React.ReactElement => {
     >
       <Title>Usage</Title>
       <Box marginY="spacing.6">
-        <SandboxProvider
-          code={`
+        <Sandbox>
+          {`
         import React from 'react';
         import { Card, CardBody, Box, Text, Amount, VisuallyHidden } from '@razorpay/blade/components';
 
@@ -158,14 +157,7 @@ const Page = (): React.ReactElement => {
 
         export default App;
         `}
-        >
-          <SandpackLayout>
-            <SandpackCodeEditor />
-            <Box display={castWebType({ base: 'none', m: 'block' })} height="200px" width="100%">
-              <SandpackPreview style={{ width: '100%', height: '100%' }} />
-            </Box>
-          </SandpackLayout>
-        </SandboxProvider>
+        </Sandbox>
       </Box>
     </StoryPageWrapper>
   );

diff --git a/packages/blade/src/components/Card/_KitchenSink.Card.stories.tsx b/packages/blade/src/components/Card/_KitchenSink.Card.stories.tsx
@@ -1,9 +1,13 @@
 import { composeStories } from '@storybook/react';
 import * as cardStories from './Card.stories';
+import * as interactiveCardStories from './CardInteractive.stories';
 import { Box } from '~components/Box';
 import { Heading } from '~components/Typography';
 
-const allStories = Object.values(composeStories(cardStories));
+const allStories = [
+  ...Object.values(composeStories(cardStories)),
+  ...Object.values(composeStories(interactiveCardStories)),
+];
 
 export const Card = (): JSX.Element => {
   return (