From 2aa04d0c112752d46ac260d9a31b677a81344add Mon Sep 17 00:00:00 2001
From: garronej
Date: Mon, 21 Nov 2022 21:43:11 +0100
Subject: [PATCH] Move on with the documentation
---
docs/Markdown.tsx | 2 +
docs/quick-start-2.stories.mdx | 53 ++++++++++
docs/quick-start.stories copy.mdx.2.disabled | 100 +++++++++++++++++++
docs/quick-start.stories.mdx | 90 +++++++----------
4 files changed, 193 insertions(+), 52 deletions(-)
create mode 100644 docs/quick-start-2.stories.mdx
create mode 100644 docs/quick-start.stories copy.mdx.2.disabled
diff --git a/docs/Markdown.tsx b/docs/Markdown.tsx
index b5db78c2d..954128a41 100644
--- a/docs/Markdown.tsx
+++ b/docs/Markdown.tsx
@@ -7,6 +7,7 @@ import typescript from "react-syntax-highlighter/dist/cjs/languages/prism/typesc
import bash from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
import json from "react-syntax-highlighter/dist/cjs/languages/prism/json";
import diff from "react-syntax-highlighter/dist/cjs/languages/prism/diff";
+import ejs from "react-syntax-highlighter/dist/cjs/languages/prism/ejs";
import rangeParser from "parse-numeric-range";
import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
import oneLight from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
@@ -24,6 +25,7 @@ SyntaxHighlighter.registerLanguage("typescript", typescript);
SyntaxHighlighter.registerLanguage("bash", bash);
SyntaxHighlighter.registerLanguage("json", json);
SyntaxHighlighter.registerLanguage("diff", diff);
+SyntaxHighlighter.registerLanguage("ejs", ejs);
//SEE: https://amirardalan.com/blog/syntax-highlight-code-in-markdown
diff --git a/docs/quick-start-2.stories.mdx b/docs/quick-start-2.stories.mdx
new file mode 100644
index 000000000..dea94f81b
--- /dev/null
+++ b/docs/quick-start-2.stories.mdx
@@ -0,0 +1,53 @@
+import { Meta } from "@storybook/addon-docs";
+import { Markdown } from "./Markdown";
+//import { Markdown } from "./tools/Markdown";
+import { Alert } from "../dist/Alert";
+
+
+
+
+export const node = {`
+* Remove [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
+* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
+* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \` \` tag.
+
+\`\`\`diff {0}
++ new line
+- removed line
+- removed line
+- removed line
+- removed line
+nothing
++ added
+sdf
+sdf
+sdf
+sdf
+\`\`\`
+
+\`\`\`tsx {1}
+const node = {cool}
;
+\`\`\`
+
+This is the end of the _markdown_
+`}
+
+<>{node}>
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/quick-start.stories copy.mdx.2.disabled b/docs/quick-start.stories copy.mdx.2.disabled
new file mode 100644
index 000000000..dcd9a42f5
--- /dev/null
+++ b/docs/quick-start.stories copy.mdx.2.disabled
@@ -0,0 +1,100 @@
+import { Meta } from "@storybook/addon-docs";
+import { Alert } from "../dist/Alert";
+import { Tabs } from "../dist/Tabs";
+import ReactMarkdown from "react-markdown";
+
+
+
+
+
+# 🔧 Initial setup
+
+_Setup `@codegouvfr/react-dsfr` in your project_
+
+{`
+* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
+* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
+* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \` \` tag.`
+ }}
+/>
+
+```bash
+yarn add @codegouvfr/react-dsfr # Or: 'npm install --save @codegouvfr/react-dsfr'
+```
+
+export const craContent = {`
+#### 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 \` \`
+
+\`\`\`ejs
+
+
+
+
+
+
+\`\`\`
+
+#### 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(
+
+
+
+ );
+\`\`\`
+
+You can find an example setup [here](https://github.com/codegouvfr/dsfr-react/tree/main/src/test/frameworks/cra).
+
+`};
+
+Content of tab2
},
+ { "label": "Tab 3", "content": Content of tab3
}
+ ]}
+/>
diff --git a/docs/quick-start.stories.mdx b/docs/quick-start.stories.mdx
index 24f30e3ed..0807bc7f7 100644
--- a/docs/quick-start.stories.mdx
+++ b/docs/quick-start.stories.mdx
@@ -1,7 +1,7 @@
import { Meta } from "@storybook/addon-docs";
import { Alert } from "../dist/Alert";
import { Tabs } from "../dist/Tabs";
-import ReactMarkdown from "react-markdown";
+import { Markdown } from "./Markdown";
{
-`* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
+ description={{`
+* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \` \` tag.`
- }}
+ }}
/>
```bash
yarn add @codegouvfr/react-dsfr # Or: 'npm install --save @codegouvfr/react-dsfr'
```
-export const craContent =
-`# The content
+export const craContent = {`
+#### package.json
-\`\`\`diff
+\`\`\`diff {0}
"scripts": {
-+ "postinstall": "copy-dsfr-to-public"
-+ "prestart": "only-include-used-icons",
-+ "prebuild": "only-include-used-icons"
++ "postinstall": "copy-dsfr-to-public"
++ "prestart": "only-include-used-icons",
++ "prebuild": "only-include-used-icons"
}
\`\`\`
-\`\`\`tsx
-const node =(ok
);
-\`\`\`
-`;
-
-
-{craContent} },
- { "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": Content of tab2
},
- { "label": "Tab 3", "content": Content of tab3
}
- ]}
-/>
-
-#### 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`
-
+\`copy-dsfr-to-public\` is a \`bin\` script of \`@codegouvfr/react-dsfr\` that copies \`@gouvfr/dsfr/dist\` into \`public/dsfr\`
+
#### .gitignore
-
-```diff
+
+\`\`\`diff {0}
+ /public/dsfr
-```
-
+\`\`\`
+
#### public/index.html
-
-Add the following code in the ` `
-
-```ejs
+
+Add the following code in the \` \`
+
+\`\`\`ejs {0}
-```
-
+\`\`\`
+
#### src/index.tsx
-
-```diff
+
+\`\`\`diff {0}
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
@@ -109,7 +85,17 @@ Add the following code in the `