Try to find a way to get storybook working as well as gitbook

garronej · garronej · commit a75d6269bb56 · 2022-11-21T02:54:08.000+01:00
diff --git a/.storybook/customTheme.js b/.storybook/customTheme.js
@@ -8,9 +8,9 @@ const fontCode= "monospace";
 
 export const darkTheme = create({
     "base": "dark",
-    "appBg": "#161616",
-    "appContentBg": "#1E1E1E",
-    "barBg": "#1E1E1E",
+    "appBg": "#1E1E1E",
+    "appContentBg": "#161616",
+    "barBg": "#161616",
     "colorSecondary": "#8585F6",
     "textColor": "#FFFFFF",
     brandImage,
@@ -22,8 +22,8 @@ export const darkTheme = create({
 
 export const lightTheme = create({
     "base": "light",
-    "appBg": "#FFFFFF",
-    "appContentBg": "#F6F6F6",
+    "appBg": "#F6F6F6",
+    "appContentBg": "#FFFFFF",
     "barBg": "#FFFFFF",
     "colorSecondary": "#000091",
     "textColor": "#212121",
diff --git a/docs/intro.stories.mdx b/docs/intro.stories.mdx
@@ -21,4 +21,6 @@ import { useDarkMode } from "storybook-dark-mode";
 
 This module is a React integration layer for [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR.  
 Comes with very precise type definitions. (But works fine in vanilla JavaScript projects.)
+<br/>
+This is <a href="https://github.com/codegouvfr/react-dsfr">@codegouvfr/react-dsfr</a>
 </div>
diff --git a/docs/quick-start.stories.mdx b/docs/quick-start.stories.mdx
@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 import { Alert } from "../dist/Alert";
+import { Tabs } from "../dist/Tabs";
 import ReactMarkdown from "react-markdown";
 
 
@@ -36,3 +37,79 @@ _Setup `@codegouvfr/react-dsfr` in your project_
 yarn add @codegouvfr/react-dsfr # Or: 'npm install --save @codegouvfr/react-dsfr'
 ```
 
+export const craContent = 
+`# The content
+  
+\`\`\`diff
+ "scripts": {
++    "postinstall": "copy-dsfr-to-public"
++    "prestart": "only-include-used-icons",
++    "prebuild": "only-include-used-icons"
+ }
+\`\`\`
+\`\`\`tsx
+const node =(<div>ok</div>);
+\`\`\`
+  
+`;
+
+
+<Tabs
+    tabs={[
+        { "label": "Create React App", "content": <ReactMarkdown>{craContent}</ReactMarkdown> },
+        { "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": <p>Content of tab2</p>  },
+        { "label": "Tab 3", "content": <p>Content of tab3</p> }
+    ]}
+/>
+
+#### package.json
+
+```diff
+ "scripts": {
++    "postinstall": "copy-dsfr-to-public"
++    "prestart": "only-include-used-icons",
++    "prebuild": "only-include-used-icons"
+ }
+```
+
+`update_dsfr_static_resources` is a `bin` script of `@codegouvfr/react-dsfr` that copies `@gouvfr/dsfr/dist` into `public/dsfr`
+
+#### .gitignore
+
+```diff
++ /public/dsfr
+```
+
+#### public/index.html
+
+Add the following code in the `<head />`&#x20;
+
+```ejs
+<link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
+<link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />
+<link rel="shortcut icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.ico" type="image/x-icon" />
+<link rel="manifest" href="%PUBLIC_URL%/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
+<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/dsfr.min.css" />
+<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/utility/icons/icons.min.css" />
+```
+
+#### src/index.tsx
+
+```diff
+ import React from 'react';
+ import ReactDOM from 'react-dom/client';
+ import App from './App';
++import { startDsfrReact } from "@codegouvfr/react-dsfr";
++startDsfrReact({ "defaultColorScheme": "system" });
+ const root = ReactDOM.createRoot(
+   document.getElementById('root') as HTMLElement
+ );
+ root.render(
+   <React.StrictMode>
+     <App />
+   </React.StrictMode>
+ );
+```
+
+You can find an example setup [here](https://github.com/codegouvfr/dsfr-react/tree/main/src/test/frameworks/cra).
+
