Skip to content

Commit 2aa04d0

Browse files
garronejgarronej
committed
Move on with the documentation
1 parent 0cc8276 commit 2aa04d0

File tree

4 files changed

+193
-52
lines changed

4 files changed

+193
-52
lines changed

‎docs/Markdown.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import typescript from "react-syntax-highlighter/dist/cjs/languages/prism/typesc
77
import bash from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
88
import json from "react-syntax-highlighter/dist/cjs/languages/prism/json";
99
import diff from "react-syntax-highlighter/dist/cjs/languages/prism/diff";
10+
import ejs from "react-syntax-highlighter/dist/cjs/languages/prism/ejs";
1011
import rangeParser from "parse-numeric-range";
1112
import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
1213
import oneLight from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
@@ -24,6 +25,7 @@ SyntaxHighlighter.registerLanguage("typescript", typescript);
2425
SyntaxHighlighter.registerLanguage("bash", bash);
2526
SyntaxHighlighter.registerLanguage("json", json);
2627
SyntaxHighlighter.registerLanguage("diff", diff);
28+
SyntaxHighlighter.registerLanguage("ejs", ejs);
2729

2830
//SEE: https://amirardalan.com/blog/syntax-highlight-code-in-markdown
2931

‎docs/quick-start-2.stories.mdx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Meta } from "@storybook/addon-docs";
2+
import { Markdown } from "./Markdown";
3+
//import { Markdown } from "./tools/Markdown";
4+
import { Alert } from "../dist/Alert";
5+
6+
<Meta
7+
title="Guides/🔧 Initial setup 2"
8+
parameters={{
9+
"viewMode": "docs",
10+
"previewTabs": {
11+
"canvas": { "hidden": true },
12+
"zoom": { "hidden": true },
13+
"storybook/background": { "hidden": true },
14+
"storybook/viewport": { "hidden": true },
15+
},
16+
}}
17+
/>
18+
19+
20+
export const node = <Markdown>{`
21+
* Remove [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
22+
* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
23+
* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \`<html/>\` tag.
24+
25+
\`\`\`diff {0}
26+
+ new line
27+
- removed line
28+
- removed line
29+
- removed line
30+
- removed line
31+
nothing
32+
+ added
33+
sdf
34+
sdf
35+
sdf
36+
sdf
37+
\`\`\`
38+
39+
\`\`\`tsx {1}
40+
const node = <div>{cool}</div>;
41+
\`\`\`
42+
43+
This is the end of the _markdown_
44+
`}</Markdown>
45+
46+
<>{node}</>
47+
48+
<Alert title="This is the title" description={node} severity="success" />
49+
50+
51+
52+
53+

‎docs/quick-start.stories copy.mdx.2.disabled‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Meta } from "@storybook/addon-docs";
2+
import { Alert } from "../dist/Alert";
3+
import { Tabs } from "../dist/Tabs";
4+
import ReactMarkdown from "react-markdown";
5+
6+
7+
<Meta
8+
title="Guides/🔧 Initial setup"
9+
parameters={{
10+
"viewMode": "docs",
11+
"previewTabs": {
12+
"canvas": { "hidden": true },
13+
"zoom": { "hidden": true },
14+
"storybook/background": { "hidden": true },
15+
"storybook/viewport": { "hidden": true },
16+
},
17+
}}
18+
/>
19+
20+
21+
# 🔧 Initial setup
22+
23+
_Setup `@codegouvfr/react-dsfr` in your project_
24+
25+
<Alert
26+
severity="warning"
27+
title="Warning: If you already had the DSFR installed in your project"
28+
isClosable
29+
description={<ReactMarkdown>{`
30+
* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
31+
* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
32+
* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \`<html/>\` tag.`
33+
}</ReactMarkdown>}
34+
/>
35+
36+
```bash
37+
yarn add @codegouvfr/react-dsfr # Or: 'npm install --save @codegouvfr/react-dsfr'
38+
```
39+
40+
export const craContent = <ReactMarkdown>{`
41+
#### package.json
42+
43+
\`\`\`diff
44+
"scripts": {
45+
+ "postinstall": "copy-dsfr-to-public"
46+
+ "prestart": "only-include-used-icons",
47+
+ "prebuild": "only-include-used-icons"
48+
}
49+
\`\`\`
50+
51+
\`update_dsfr_static_resources\` is a \`bin\` script of \`@codegouvfr/react-dsfr\` that copies \`@gouvfr/dsfr/dist\` into \`public/dsfr\`
52+
53+
#### .gitignore
54+
55+
\`\`\`diff
56+
+ /public/dsfr
57+
\`\`\`
58+
59+
#### public/index.html
60+
61+
Add the following code in the \`<head />\`
62+
63+
\`\`\`ejs
64+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
65+
<link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />
66+
<link rel="shortcut icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.ico" type="image/x-icon" />
67+
<link rel="manifest" href="%PUBLIC_URL%/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
68+
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/dsfr.min.css" />
69+
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/utility/icons/icons.min.css" />
70+
\`\`\`
71+
72+
#### src/index.tsx
73+
74+
\`\`\`diff
75+
import React from 'react';
76+
import ReactDOM from 'react-dom/client';
77+
import App from './App';
78+
+import { startDsfrReact } from "@codegouvfr/react-dsfr";
79+
+startDsfrReact({ "defaultColorScheme": "system" });
80+
const root = ReactDOM.createRoot(
81+
document.getElementById('root') as HTMLElement
82+
);
83+
root.render(
84+
<React.StrictMode>
85+
<App />
86+
</React.StrictMode>
87+
);
88+
\`\`\`
89+
90+
You can find an example setup [here](https://github.com/codegouvfr/dsfr-react/tree/main/src/test/frameworks/cra).
91+
92+
`}</ReactMarkdown>;
93+
94+
<Tabs
95+
tabs={[
96+
{ "label": "Create React App", "content": craContent },
97+
{ "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": <p>Content of tab2</p> },
98+
{ "label": "Tab 3", "content": <p>Content of tab3</p> }
99+
]}
100+
/>

‎docs/quick-start.stories.mdx‎

Lines changed: 38 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Meta } from "@storybook/addon-docs";
22
import { Alert } from "../dist/Alert";
33
import { Tabs } from "../dist/Tabs";
4-
import ReactMarkdown from "react-markdown";
4+
import { Markdown } from "./Markdown";
55

66

77
<Meta
@@ -19,83 +19,59 @@ import ReactMarkdown from "react-markdown";
1919

2020

2121
# 🔧 Initial setup
22-
22+
2323
_Setup `@codegouvfr/react-dsfr` in your project_
24-
24+
2525
<Alert
2626
severity="warning"
2727
title="Warning: If you already had the DSFR installed in your project"
2828
isClosable
29-
description={<ReactMarkdown>{
30-
`* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
29+
description={<Markdown>{`
30+
* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
3131
* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
3232
* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \`<html/>\` tag.`
33-
}</ReactMarkdown>}
33+
}</Markdown>}
3434
/>
3535

3636
```bash
3737
yarn add @codegouvfr/react-dsfr # Or: 'npm install --save @codegouvfr/react-dsfr'
3838
```
3939

40-
export const craContent =
41-
`# The content
40+
export const craContent = <Markdown>{`
41+
#### package.json
4242
43-
\`\`\`diff
43+
\`\`\`diff {0}
4444
"scripts": {
45-
+ "postinstall": "copy-dsfr-to-public"
46-
+ "prestart": "only-include-used-icons",
47-
+ "prebuild": "only-include-used-icons"
45+
+ "postinstall": "copy-dsfr-to-public"
46+
+ "prestart": "only-include-used-icons",
47+
+ "prebuild": "only-include-used-icons"
4848
}
4949
\`\`\`
50-
\`\`\`tsx
51-
const node =(<div>ok</div>);
52-
\`\`\`
5350
54-
`;
55-
56-
57-
<Tabs
58-
tabs={[
59-
{ "label": "Create React App", "content": <ReactMarkdown>{craContent}</ReactMarkdown> },
60-
{ "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": <p>Content of tab2</p> },
61-
{ "label": "Tab 3", "content": <p>Content of tab3</p> }
62-
]}
63-
/>
64-
65-
#### package.json
66-
67-
```diff
68-
"scripts": {
69-
+ "postinstall": "copy-dsfr-to-public"
70-
+ "prestart": "only-include-used-icons",
71-
+ "prebuild": "only-include-used-icons"
72-
}
73-
```
74-
75-
`update_dsfr_static_resources` is a `bin` script of `@codegouvfr/react-dsfr` that copies `@gouvfr/dsfr/dist` into `public/dsfr`
76-
51+
\`copy-dsfr-to-public\` is a \`bin\` script of \`@codegouvfr/react-dsfr\` that copies \`@gouvfr/dsfr/dist\` into \`public/dsfr\`
52+
7753
#### .gitignore
78-
79-
```diff
54+
55+
\`\`\`diff {0}
8056
+ /public/dsfr
81-
```
82-
57+
\`\`\`
58+
8359
#### public/index.html
84-
85-
Add the following code in the `<head />`&#x20;
86-
87-
```ejs
60+
61+
Add the following code in the \`<head />\`
62+
63+
\`\`\`ejs {0}
8864
<link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
8965
<link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />
9066
<link rel="shortcut icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.ico" type="image/x-icon" />
9167
<link rel="manifest" href="%PUBLIC_URL%/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
9268
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/dsfr.min.css" />
9369
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/utility/icons/icons.min.css" />
94-
```
95-
70+
\`\`\`
71+
9672
#### src/index.tsx
97-
98-
```diff
73+
74+
\`\`\`diff {0}
9975
import React from 'react';
10076
import ReactDOM from 'react-dom/client';
10177
import App from './App';
@@ -109,7 +85,17 @@ Add the following code in the `<head />`&#x20;
10985
<App />
11086
</React.StrictMode>
11187
);
112-
```
113-
88+
\`\`\`
89+
11490
You can find an example setup [here](https://github.com/codegouvfr/dsfr-react/tree/main/src/test/frameworks/cra).
91+
92+
`}</Markdown>;
93+
11594

95+
<Tabs
96+
tabs={[
97+
{ "label": "Create React App", "content": craContent },
98+
{ "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": <p>Content of tab2</p> },
99+
{ "label": "Tab 3", "content": <p>Content of tab3</p> }
100+
]}
101+
/>

0 commit comments

Comments
 (0)