chore(Storybook): Enable the Docs tab

.storybook/preview.tsx

@@ -211,7 +211,7 @@ const parameters = {
 
     docs: {
         /** Disable the `code` tab */
-        codePanel: false,
+        codePanel: true,
     },
 
     controls: {
@@ -227,6 +227,8 @@ const parameters = {
     actions: {
         disable: true,
     },
+
+    tags: ['autodocs'],
 };
 
 const preview: Preview = {

package.json

@@ -67,9 +67,9 @@
         "@azure/storage-blob": "^12.9.0",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/git": "^10.0.1",
-        "@storybook/addon-docs": "^10.1.9",
+        "@storybook/addon-docs": "^10.1.11",
         "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-        "@storybook/react-webpack5": "^10.1.4",
+        "@storybook/react-webpack5": "^10.1.11",
         "@swc/cli": "^0.1.62",
         "@swc/core": "^1.3.95",
         "@swc/jest": "^0.2.29",
@@ -107,7 +107,7 @@
         "es6-promise-pool": "^2.5.0",
         "eslint": "^8.57.0",
         "eslint-plugin-mistica-local-rules": "workspace:*",
-        "eslint-plugin-storybook": "^10.1.4",
+        "eslint-plugin-storybook": "^10.1.11",
         "glob": "^7.2.0",
         "gzip-size": "^6.0.0",
         "husky": "^7.0.4",
@@ -134,11 +134,11 @@
         "rollup-plugin-preserve-directives": "^0.2.0",
         "semantic-release": "^19.0.2",
         "serve-handler": "^6.1.5",
-        "storybook": "^10.1.4",
+        "storybook": "^10.1.11",
         "style-loader": "^4.0.0",
         "swc-loader": "^0.2.3",
         "typescript": "^5.9.3",
-        "vite": "^4.5.0",
+        "vite": "^5.0.0",
         "vite-plugin-no-bundle": "^2.0.3",
         "webpack-react-component-name": "^5.0.5"
     },

src/__stories__/accordion-story.tsx

@@ -35,6 +35,15 @@ export default {
             control: {type: 'select'},
         },
     },
+    decorators: [
+        (Story: any, context: any) => (
+            <ResponsiveLayout fullWidth variant={context.args.variantOutside || 'default'}>
+                <Box padding={16}>
+                    <Story />
+                </Box>
+            </ResponsiveLayout>
+        ),
+    ],
 };
 
 type Args = {
@@ -55,7 +64,6 @@ const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
     right,
     singleOpen,
     variant,
-    variantOutside,
     type,
 }) => {
     const content = <Placeholder height={100} />;
@@ -79,66 +87,62 @@ const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
     };
 
     return (
-        <ResponsiveLayout fullWidth variant={variantOutside}>
-            <Box padding={16}>
-                <AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        dataAttributes={{testid: 'accordion-item-1'}}
-                    />
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<IconThumbUpFilled size={24} />}
-                        dataAttributes={{testid: 'accordion-item-2'}}
-                    />
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={
-                            <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
-                                <IconMobileDeviceRegular color={skinVars.colors.brand} />
-                            </Circle>
-                        }
-                        dataAttributes={{testid: 'accordion-item-3'}}
-                    />
-
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<Circle size={40} backgroundImage={laptopImg} />}
-                        dataAttributes={{testid: 'accordion-item-4'}}
-                    />
-
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
-                        dataAttributes={{testid: 'accordion-item-5'}}
-                    />
-
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
-                        dataAttributes={{testid: 'accordion-item-6'}}
-                    />
-
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
-                        dataAttributes={{testid: 'accordion-item-7'}}
-                    />
-
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<Avatar size={40} src={avatarImg} />}
-                        dataAttributes={{testid: 'accordion-item-8'}}
-                    />
-
-                    <ItemComponent
-                        {...getAccordionItemContentProps()}
-                        asset={<Avatar size={40} initials="MS" />}
-                        dataAttributes={{testid: 'accordion-item-9'}}
-                    />
-                </AccordionComponent>
-            </Box>
-        </ResponsiveLayout>
+        <AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                dataAttributes={{testid: 'accordion-item-1'}}
+            />
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<IconThumbUpFilled size={24} />}
+                dataAttributes={{testid: 'accordion-item-2'}}
+            />
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={
+                    <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
+                        <IconMobileDeviceRegular color={skinVars.colors.brand} />
+                    </Circle>
+                }
+                dataAttributes={{testid: 'accordion-item-3'}}
+            />
+
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<Circle size={40} backgroundImage={laptopImg} />}
+                dataAttributes={{testid: 'accordion-item-4'}}
+            />
+
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
+                dataAttributes={{testid: 'accordion-item-5'}}
+            />
+
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
+                dataAttributes={{testid: 'accordion-item-6'}}
+            />
+
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
+                dataAttributes={{testid: 'accordion-item-7'}}
+            />
+
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<Avatar size={40} src={avatarImg} />}
+                dataAttributes={{testid: 'accordion-item-8'}}
+            />
+
+            <ItemComponent
+                {...getAccordionItemContentProps()}
+                asset={<Avatar size={40} initials="MS" />}
+                dataAttributes={{testid: 'accordion-item-9'}}
+            />
+        </AccordionComponent>
     );
 };
 

src/__stories__/align-story.tsx

@@ -19,6 +19,13 @@ export default {
             control: {type: 'range', min: 200, max: 400, step: 20},
         },
     },
+    decorators: [
+        (Story: any) => (
+            <div style={{display: 'inline-block', border: '1px solid red'}}>
+                <Story />
+            </div>
+        ),
+    ],
 };
 
 type Props = {
@@ -30,11 +37,9 @@ type Props = {
 
 export const Default: StoryComponent<Props> = ({x, y, width, height}) => {
     return (
-        <div style={{display: 'inline-block', border: '1px solid red'}}>
-            <Align width={width} height={height} x={x} y={y} dataAttributes={{testid: 'story'}}>
-                <Text2 regular>Content</Text2>
-            </Align>
-        </div>
+        <Align width={width} height={height} x={x} y={y} dataAttributes={{testid: 'story'}}>
+            <Text2 regular>Content</Text2>
+        </Align>
     );
 };
 

src/__stories__/avatar-story.tsx

@@ -1,33 +1,50 @@
 import * as React from 'react';
-import {Avatar, IconBrainRegular, IconFireRegular, IconStarFilled, ResponsiveLayout, Box} from '..';
+import { Avatar, IconBrainRegular, IconFireRegular, IconStarFilled, ResponsiveLayout, Box } from '..';
 import avatarImg from './images/avatar.jpg';
 
-import type {Variant} from '../theme-variant-context';
+import type { Variant } from '../theme-variant-context';
 
 const badgeOptions = ['true', 'false', 'undefined', '0', '1', '5', '10'];
 
 export default {
     title: 'Components/Avatar',
     argTypes: {
         size: {
-            control: {type: 'range', min: 24, max: 128, step: 4},
+            control: { type: 'range', min: 24, max: 128, step: 4 },
         },
         badge: {
             options: badgeOptions,
-            control: {type: 'select'},
+            control: { type: 'select' },
         },
         icon: {
             options: ['undefined', 'IconStarFilled', 'IconFireRegular', 'IconBrainRegular'],
-            control: {type: 'select'},
+            control: { type: 'select' },
         },
         variantOutside: {
             options: ['default', 'brand', 'negative', 'alternative'],
-            control: {type: 'select'},
+            control: { type: 'select' },
         },
     },
     parameters: {
         fullScreen: true,
     },
+    decorators: [
+        (Story: any, context: any) => (
+            <ResponsiveLayout variant={context.args.variantOutside || 'default'} fullWidth>
+                <Box padding={16} width="fit-content" dataAttributes={{ testid: 'avatar' }}>
+                    <div
+                        style={{
+                            // prevent line-height from affecting the height of the container;
+                            // happens when changing the base font size
+                            lineHeight: 0,
+                        }}
+                    >
+                        <Story />
+                    </div>
+                </Box>
+            </ResponsiveLayout>
+        ),
+    ],
 };
 
 type Args = {
@@ -49,38 +66,25 @@ export const Default: StoryComponent<Args> = ({
     badge,
     src,
     icon,
-    variantOutside,
     hideImage,
     hideInitials,
     ariaLabel,
     border,
 }) => {
     // eslint-disable-next-line no-eval
     const badgeValue = badgeOptions.includes(badge) ? eval(badge) : undefined;
-    const Icon = {IconStarFilled, IconFireRegular, IconBrainRegular}[icon];
+    const Icon = { IconStarFilled, IconFireRegular, IconBrainRegular }[icon];
 
     return (
-        <ResponsiveLayout variant={variantOutside} fullWidth>
-            <Box padding={16} width="fit-content" dataAttributes={{testid: 'avatar'}}>
-                <div
-                    style={{
-                        // prevent line-height from affecting the height of the container;
-                        // happens when changing the base font size
-                        lineHeight: 0,
-                    }}
-                >
-                    <Avatar
-                        size={size}
-                        src={hideImage ? undefined : src || undefined}
-                        initials={hideInitials ? undefined : initials}
-                        badge={badgeValue}
-                        Icon={Icon}
-                        aria-label={ariaLabel}
-                        border={border}
-                    />
-                </div>
-            </Box>
-        </ResponsiveLayout>
+        <Avatar
+            size={size}
+            src={hideImage ? undefined : src || undefined}
+            initials={hideInitials ? undefined : initials}
+            badge={badgeValue}
+            Icon={Icon}
+            aria-label={ariaLabel}
+            border={border}
+        />
     );
 };
 

src/__stories__/badge-story.tsx

@@ -16,28 +16,33 @@ export default {
         },
     },
     parameters: {fullScreen: true},
+    decorators: [
+        (Story: any, context: any) => (
+            <ResponsiveLayout variant={context.args.variantOutside || 'default'} fullWidth>
+                <Box padding={16} width="fit-content" dataAttributes={{testid: 'content'}}>
+                    <Story />
+                </Box>
+            </ResponsiveLayout>
+        ),
+    ],
 };
 
 type Args = {
     variantOutside: Variant;
     value: string;
 };
 
-export const Default: StoryComponent<Args> = ({variantOutside, value}) => {
+export const Default: StoryComponent<Args> = ({value}) => {
     return (
-        <ResponsiveLayout variant={variantOutside} fullWidth>
-            <Box padding={16} width="fit-content" dataAttributes={{testid: 'content'}}>
-                <Badge value={value !== 'undefined' ? +value : undefined}>
-                    <Touchable
-                        style={{display: 'inline-block', width: 24, height: 24}}
-                        onPress={() => {}}
-                        aria-label="Read notifications"
-                    >
-                        <IconBellFilled />
-                    </Touchable>
-                </Badge>
-            </Box>
-        </ResponsiveLayout>
+        <Badge value={value !== 'undefined' ? +value : undefined}>
+            <Touchable
+                style={{display: 'inline-block', width: 24, height: 24}}
+                onPress={() => {}}
+                aria-label="Read notifications"
+            >
+                <IconBellFilled />
+            </Touchable>
+        </Badge>
     );
 };