Fixed responsive values

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/app/(docs)/components/button/page.mdx

@@ -129,11 +129,7 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<ButtonSnippet story="Responsive" />}
+<CodeBlock
   code={`<Button variant={{ initial: 'primary', lg: 'secondary' }}>
     Responsive Button
   </Button>`}

canon-docs/src/app/(docs)/components/heading/page.mdx

@@ -67,10 +67,7 @@ appearance of the heading.
 You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
-<Snippet
-  py={4}
-  open
-  preview={<HeadingSnippet story="Responsive" />}
+<CodeBlock
   code={`<Heading variant={{ initial: 'title2', lg: 'title1' }}>
     Responsive heading
   </Heading>`}

canon-docs/src/app/(docs)/components/icon-button/page.mdx

@@ -92,10 +92,6 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<IconButtonSnippet story="Responsive" />}
+<CodeBlock
   code={`<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`}
 />

canon-docs/src/app/(docs)/components/text/page.mdx

@@ -107,9 +107,7 @@ appearance of the text.
 You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
-<Snippet
-  open
-  preview={<TextSnippet story="Responsive" />}
+<CodeBlock
   code={`<Text variant={{ initial: 'body', lg: 'subtitle' }}>
     Responsive text
   </Text>`}

canon-docs/src/snippets/box.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 
 export const BoxSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(BoxStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Preview') return <stories.Preview />;
 

canon-docs/src/snippets/button.tsx

@@ -2,17 +2,9 @@
 
 import { composeStories } from '@storybook/react';
 import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
-import { useEffect, useState } from 'react';
 
 export const ButtonSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(ButtonStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Variants') return <stories.Variants />;
   if (story === 'Sizes') return <stories.Sizes />;

canon-docs/src/snippets/checkbox.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 
 export const CheckboxSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(CheckboxStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'AllVariants') return <stories.AllVariants />;

canon-docs/src/snippets/container.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 
 export const ContainerSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(ContainerStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Preview') return <stories.Preview />;
 

canon-docs/src/snippets/field.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
 
 export const FieldSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(FieldStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'WithLabelAndDescription')

canon-docs/src/snippets/flex.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
 
 export const FlexSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(FlexStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 

canon-docs/src/snippets/grid.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 
 export const GridSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(GridStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 

canon-docs/src/snippets/heading.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
 
 export const HeadingSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(HeadingStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'Title1') return <stories.Title1 />;

canon-docs/src/snippets/icon-button.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
 
 export const IconButtonSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(IconButtonStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Variants') return <stories.Variants />;
   if (story === 'Sizes') return <stories.Sizes />;

canon-docs/src/snippets/icon.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 
 export const IconSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(IconStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 

canon-docs/src/snippets/input.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
 
 export const InputSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(InputStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Primary') return <stories.Primary />;
   if (story === 'Sizes') return <stories.Sizes />;

canon-docs/src/snippets/text.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 
 export const TextSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(TextStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'AllVariants') return <stories.AllVariants />;

packages/canon/src/components/Flex/Flex.stories.tsx

@@ -61,21 +61,33 @@ const DecorativeBox = () => {
 
 export const Default: Story = {
   args: {
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 
 export const ColumnDirection: Story = {
   args: {
     direction: 'column',
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 
 export const RowDirection: Story = {
   args: {
     direction: 'row',
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };