Better storybook setup

Author: garronej

.storybook/DocsContainer.js

@@ -20,6 +20,9 @@ export const DocsContainer = ({ children, context }) => {
                 .docs-story {
                     background-color: ${backgroundColor};
                 }
+                [id^=story--] .container {
+                    border: 1px dashed #e8e8e8;
+                }
             `}</style>
             <BaseContainer
                 context={{

docs/Alert.stories.tsx

@@ -1,11 +1,23 @@
 import { Alert } from "../dist/Alert";
+import type { AlertProps } from "../dist/Alert";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+const severities = ["success", "warning", "info", "error"] as const;
+
+assert<Equals<typeof severities[number], AlertProps["severity"]>>();
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
     "wrappedComponent": { Alert },
-    "defaultWidth": 500
+    "argTypes": {
+        "severity": {
+            "options": severities,
+            "control": { "type": "radio" }
+        }
+    }
 });
 
 export default meta;

docs/getStory.tsx

@@ -3,9 +3,8 @@ import type { Meta, Story } from "@storybook/react";
 import type { ArgType } from "@storybook/addons";
 import { symToStr } from "tsafe/symToStr";
 import { id } from "tsafe/id";
-import { GlobalStyles } from "tss-react";
 import "../dist/dsfr/dsfr.css";
-import { startDsfrReact, useIsDark, useColors } from "../dist";
+import { startDsfrReact, useIsDark } from "../dist";
 
 startDsfrReact({ "defaultColorScheme": "system" });
 
@@ -14,32 +13,28 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
     wrappedComponent: Record<string, (props: Props) => JSX.Element | null>;
     /** https://storybook.js.org/docs/react/essentials/controls */
     argTypes?: Partial<Record<keyof Props, ArgType>>;
-    defaultWidth?: number;
+    defaultContainerWidth?: number;
 }) {
-    const { sectionName, wrappedComponent, argTypes = {}, defaultWidth } = params;
+    const { sectionName, wrappedComponent, argTypes = {}, defaultContainerWidth } = params;
 
     const Component: any = Object.entries(wrappedComponent).map(([, component]) => component)[0];
 
     const Template: Story<
         Props & {
             darkMode: boolean;
-            width: number;
+            containerWidth: number;
         }
-    > = ({ darkMode, width, ...props }) => {
+    > = ({ darkMode, containerWidth, ...props }) => {
         const { setIsDark } = useIsDark();
 
         useEffect(() => {
             setIsDark(darkMode);
         }, [darkMode]);
 
-        return (
-            <div
-                style={{
-                    "width": width || undefined,
-                    "border": "1px dashed #e8e8e8",
-                    "display": "inline-block"
-                }}
-            >
+        return containerWidth === 0 ? (
+            <Component {...props} />
+        ) : (
+            <div className="container" style={{ "width": containerWidth }}>
                 <Component {...props} />
             </div>
         );
@@ -50,7 +45,7 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
 
         out.args = {
             "darkMode": window.matchMedia("(prefers-color-scheme: dark)").matches,
-            "width": defaultWidth ?? 0,
+            "containerWidth": defaultContainerWidth ?? 0,
             ...props
         };
 
@@ -62,7 +57,7 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
             "title": `${sectionName}/${symToStr(wrappedComponent)}`,
             "component": Component,
             "argTypes": {
-                "width": {
+                "containerWidth": {
                     "control": {
                         "type": "range",
                         "min": 0,

yarn.lock

@@ -1248,17 +1248,6 @@
     source-map "^0.5.7"
     stylis "4.0.13"
 
-"@emotion/cache@*":
-  version "11.10.5"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
-  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
-  dependencies:
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/sheet" "^1.2.1"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.1.3"
-
 "@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3":
   version "11.10.3"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87"
@@ -1301,17 +1290,6 @@
     "@emotion/weak-memoize" "^0.3.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
-  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
-  dependencies:
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/unitless" "^0.8.0"
-    "@emotion/utils" "^1.2.0"
-    csstype "^3.0.2"
-
 "@emotion/serialize@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8"
@@ -1328,11 +1306,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5"
   integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
 
-"@emotion/sheet@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
-  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
-
 "@emotion/styled@^11.10.4":
   version "11.10.4"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4"
@@ -1355,7 +1328,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
   integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
 
-"@emotion/utils@*", "@emotion/utils@^1.2.0":
+"@emotion/utils@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
   integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
@@ -10855,11 +10828,6 @@ stylis@4.0.13:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
   integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
-stylis@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
-  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
-
 supports-color@8.1.1, supports-color@^8.0.0:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
@@ -11221,15 +11189,6 @@ tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tss-react@^4.4.4:
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.4.4.tgz#12207842dfc58676a9f4d0f532741257428a78e7"
-  integrity sha512-Bzyg99bIQq3Lk4Rwc5XMOps58c1biw1rghCkApIX5XkAB+/VjGCIFSl63PePhmiRNvKRxJRpawGPPxHytiw1TA==
-  dependencies:
-    "@emotion/cache" "*"
-    "@emotion/serialize" "*"
-    "@emotion/utils" "*"
-
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"