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 `` ); -``` - +\`\`\` + 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

} + ]} +/>