Move stories into the docs directory

Author: garronej

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
     "stories": [
-        "../test/stories/**/*.stories.mdx",
-        "../test/stories/**/*.stories.@(ts|tsx)",
+        "../docs/*.stories.mdx",
+        "../docs/*.stories.@(ts|tsx)",
     ],
     "addons": [
         "@storybook/addon-links",

README.md

@@ -56,9 +56,6 @@ Here are instructions for contributing, if you are looking to **use** `@codegouv
 git clone https://github.com/codegouvfr/react-dsfr
 cd react-dsfr
 yarn
-yarn build
-npx tsc -p src/bin -w & npx tsc -p src -w
-# Open another Terminal
 yarn start-cra  # For testing in in a Create React App setup
 yarn start-next # For testing in a Next.js setup
 yarn start_vite # For testing in a Vite setup
@@ -69,14 +66,8 @@ yarn test
 npx vitest -t "Resolution of CSS variables"
 
 # Debugging while unit testing
-
-
 ```
 
-> When you want to import assets from the `./dsfr/` directory
-> you must assume it's located in `./src/dsfr` because it's where
-> it's going to be relative to the transpiled JS files.
-
 ## How to publish a new version on NPM, how to release a beta version
 
 This repo was bootstrapped form [garronej/ts-ci](https://github.com/garronej/ts-ci) have a look at the

test/stories/Alert.stories.tsx renamed to docs/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import { Alert } from "../../dist/Alert";
+import { Alert } from "../dist/Alert";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 
@@ -12,6 +12,6 @@ export default meta;
 
 export const Success = getStory({
     "severity": "success",
-    "title": "Message sucessfuly sent",
+    "title": "Message successfully sent",
     "description": "Everything went well"
 });

test/stories/getStory.tsx renamed to docs/getStory.tsx

@@ -2,11 +2,10 @@ import React, { useEffect } from "react";
 import type { Meta, Story } from "@storybook/react";
 import type { ArgType } from "@storybook/addons";
 import { symToStr } from "tsafe/symToStr";
-import { startDsfrReact, useIsDark, useColors } from "../../dist";
 import { id } from "tsafe/id";
-import { GlobalStyles } from "tss-react/compat";
-
-import "../../dist/dsfr/dsfr.css";
+import { GlobalStyles } from "tss-react";
+import "../dist/dsfr/dsfr.css";
+import { startDsfrReact, useIsDark, useColors } from "../dist";
 
 startDsfrReact({ "defaultColorScheme": "system" });
 
@@ -68,7 +67,7 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         const out = Template.bind({});
 
         out.args = {
-            "darkMode": false,
+            "darkMode": window.matchMedia("(prefers-color-scheme: dark)").matches,
             "width": defaultWidth ?? 0,
             ...props
         };

test/stories/global.d.ts renamed to docs/global.d.ts

@@ -21,7 +21,7 @@
         "format": "yarn _format --write",
         "format:check": "yarn _format --list-different",
         "grant_exec_perms": "node dist/bin/tools/grant_exec_perms",
-        "storybook": "yarn build -w && start-storybook -p 6006",
+        "storybook": "yarn build && ((tsc -w -p src) & start-storybook -p 6006)",
         "build-storybook": "yarn build && build-storybook"
     },
     "bin": {