codegouvfr · EmileRolley · Jul 11, 2024 · Jun 28, 2024 · Jun 28, 2024 · Jun 29, 2024
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -82,3 +82,23 @@ jobs:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
           VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
           IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}
+
+  publish_playground:
+    runs-on: ubuntu-latest
+    needs:
+      - publish_on_npm
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.ref }}
+      - uses: actions/setup-node@v4
+        with:
+          registry-url: https://registry.npmjs.org/
+      - uses: bahmutov/npm-install@v1
+        with:
+          working-directory: demo
+      - run: |
+          cd demo
+          yarn publish-to-gh-pages
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+demo
diff --git a/README.md b/README.md
@@ -124,3 +124,13 @@ The following options can be set for fields of type `array`:
 >        "ui:hideTitle": true,
 > ...
 > ```
+
+## Development
+
+Launch the playground to play with the DSFR theme :
+
+```sh
+cd demo
+yarn
+yarn start
+```
diff --git a/demo/.gitignore b/demo/.gitignore
@@ -0,0 +1,2 @@
+
+/public/dsfr/
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>rjsf-dsfr playground</title>
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
+    <script>
+      window.global = globalThis;
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <iframe id="antd-styles-iframe" style="display: none">
+      <!-- Antd .less styles will be inserted here so they aren't global -->
+    </iframe>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "playground",
+  "version": "1.0.0",
+  "description": "rjsf-dsfr playground",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "cs-check": "prettier -l \"src/**/*.ts?(x)\"",
+    "cs-format": "prettier \"src/**/*.ts?(x)\" --write",
+    "build": "rimraf build && cross-env NODE_ENV=production vite build",
+    "publish-to-gh-pages": "npm run build && gh-pages --dist dist/",
+    "start": "vite --force",
+    "preview": "vite preview",
+    "postinstall": "copy-dsfr-to-public",
+    "prestart": "only-include-used-icons",
+    "prebuild": "only-include-used-icons"
+  },
+  "lint-staged": {
+    "src/**/*.ts?(x)": [
+      "eslint --fix"
+    ]
+  },
+  "files": [
+    "dist",
+    "lib",
+    "src"
+  ],
+  "engineStrict": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@codegouvfr/react-dsfr": "^1.9.22",
+    "@codegouvfr/rjsf-dsfr": "^0.1.4",
+    "@rjsf/bootstrap-4": "^5.18.5",
+    "@rjsf/core": "^5.18.4",
+    "@rjsf/utils": "^5.18.4",
+    "@rjsf/validator-ajv8": "^5.18.4",
+    "ajv-i18n": "^4.2.0",
+    "atob": "^2.1.2",
+    "core-js": "^3.35.1",
+    "dayjs": "^1.11.10",
+    "deep-freeze-es6": "^1.4.1",
+    "framer-motion": "^5.6.0",
+    "jss": "^10.10.0",
+    "lodash": "^4.17.21",
+    "monaco-editor": "^0.38.0",
+    "react": "^18.3.1",
+    "react-bootstrap": "^1.6.8",
+    "react-dom": "^18.3.1",
+    "react-frame-component": "^4.1.3",
+    "react-is": "^18.2.0",
+    "react-portal": "^4.2.2"
+  },
+  "devDependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.20",
+    "@types/react-frame-component": "^4.1.6",
+    "@vitejs/plugin-react": "^4.2.1",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.18.20",
+    "gh-pages": "^5.0.0",
+    "html": "^1.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "loader-utils": "^3.2.1",
+    "mini-css-extract-plugin": "^2.8.0",
+    "prettier": "^3.3.2",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
+    "rimraf": "^5.0.5",
+    "source-map-loader": "^4.0.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.5.2"
+  }
+}
diff --git a/demo/public/.gitkeep b/demo/public/.gitkeep
diff --git a/demo/src/app.tsx b/demo/src/app.tsx
@@ -0,0 +1,39 @@
+import { templatesDSFR, widgetsDSFR } from '@codegouvfr/rjsf-dsfr'
+import { customizeValidator } from '@rjsf/validator-ajv8'
+import localize_fr from 'ajv-i18n/localize/fr'
+import { Theme as Bootstrap4Theme } from '@rjsf/bootstrap-4'
+
+import Layout from './layout'
+import Playground, { PlaygroundProps } from './components'
+
+const DSFRTheme = {
+  templates: templatesDSFR,
+  widgets: widgetsDSFR,
+}
+
+const frV8Validator = customizeValidator({}, localize_fr)
+
+const validators: PlaygroundProps['validators'] = {
+  AJV8: frV8Validator,
+}
+
+const themes: PlaygroundProps['themes'] = {
+  dsfr: {
+    stylesheets: ['/dsfr/dsfr.main.css', '/dsfr/utility/icons/icons.css'],
+    theme: DSFRTheme,
+  },
+  'bootstrap-4': {
+    stylesheets: [
+      'https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css',
+    ],
+    theme: Bootstrap4Theme,
+  },
+}
+
+export default function App() {
+  return (
+    <Layout>
+      <Playground themes={themes} validators={validators} />
+    </Layout>
+  )
+}
diff --git a/demo/src/components/CopyLink.tsx b/demo/src/components/CopyLink.tsx
@@ -0,0 +1,34 @@
+import { useRef } from 'react';
+
+interface CopyLinkProps {
+  shareURL: string | null;
+  onShare: () => void;
+}
+
+export default function CopyLink({ shareURL, onShare }: CopyLinkProps) {
+  const input = useRef<HTMLInputElement>(null);
+
+  function onCopyClick() {
+    input.current?.select();
+    navigator.clipboard.writeText(input.current?.value ?? '');
+  }
+
+  if (!shareURL) {
+    return (
+      <button className='btn btn-default' type='button' onClick={onShare}>
+        Share
+      </button>
+    );
+  }
+
+  return (
+    <div className='input-group'>
+      <input type='text' ref={input} className='form-control' defaultValue={shareURL} />
+      <span className='input-group-btn'>
+        <button className='btn btn-default' type='button' onClick={onCopyClick}>
+          <i className='glyphicon glyphicon-copy' />
+        </button>
+      </span>
+    </div>
+  );
+}
diff --git a/demo/src/components/DemoFrame.tsx b/demo/src/components/DemoFrame.tsx
@@ -0,0 +1,89 @@
+import {
+  useState,
+  useRef,
+  useCallback,
+  cloneElement,
+  ReactElement,
+  ReactNode,
+} from 'react'
+import { CacheProvider } from '@emotion/react'
+import createCache, { EmotionCache } from '@emotion/cache'
+import { create, Jss } from 'jss'
+import Frame, {
+  FrameComponentProps,
+  FrameContextConsumer,
+} from 'react-frame-component'
+
+interface DemoFrameProps extends FrameComponentProps {
+  theme: string
+  /** override children to be ReactElement to avoid Typescript issue. In this case we don't need to worry about
+   * children being of the other valid ReactNode types, undefined and string as it always contains an RJSF `Form`
+   */
+  children: ReactElement
+}
+
+export default function DemoFrame(props: DemoFrameProps) {
+  const { children, head, theme, ...frameProps } = props
+
+  const [jss, setJss] = useState<Jss>()
+  const [ready, setReady] = useState(false)
+  const [sheetsManager, setSheetsManager] = useState(new Map())
+  const [emotionCache, setEmotionCache] = useState<EmotionCache>(
+    createCache({ key: 'css' })
+  )
+  const [container, setContainer] = useState()
+  const [window, setWindow] = useState()
+
+  const instanceRef = useRef<any>()
+
+  const handleRef = useCallback(
+    (ref: any) => {
+      instanceRef.current = {
+        contentDocument: ref ? ref.node.contentDocument : null,
+        contentWindow: ref ? ref.node.contentWindow : null,
+      }
+    },
+    [instanceRef]
+  )
+
+  const onContentDidMount = useCallback(() => {
+    setReady(true)
+    setJss(
+      create({
+        //plugins: jssPreset().plugins,
+        insertionPoint: instanceRef.current.contentWindow['demo-frame-jss'],
+      })
+    )
+    setSheetsManager(new Map())
+    setEmotionCache(
+      createCache({
+        key: 'css',
+        prepend: true,
+        container: instanceRef.current.contentWindow['demo-frame-jss'],
+      })
+    )
+    setContainer(instanceRef.current.contentDocument.body)
+
+    setWindow(() => instanceRef.current.contentWindow)
+  }, [])
+
+  let body: ReactNode = children
+  if (theme === 'dsfr') {
+    body = ready ? (
+      <div>{children}</div>
+    ) : // TODO <AntdStyleProvider container={instanceRef.current.contentWindow['demo-frame-jss']}>{children}</AntdStyleProvider>
+    null
+  }
+
+  return (
+    <Frame
+      ref={handleRef}
+      contentDidMount={onContentDidMount}
+      head={head}
+      {...frameProps}
+    >
+      <div id="demo-frame-jss" />
+      {body}
+    </Frame>
+  )
+}