Extract from 5b5ab844c5b18e04ce290f59fb280281d9029d42

.github/workflows/deploy.yml

@@ -10,7 +10,7 @@ jobs:
       - name: Checkout the current branch
         uses: actions/checkout@v2
 
-      - name: Install node 14 for the rest of the workflow
+      - name: Install node for the rest of the workflow
         uses: actions/setup-node@v2
         with:
           node-version: '18'
@@ -31,5 +31,4 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./storybook-static
-          keep_files: true
           exclude_assets: ''

README.md

@@ -47,20 +47,20 @@ You don't have to relaunch the command at each time you create or update a compo
 
 To add Akeneo Design System to your React application, run:
 ```shell
-$ npm add akeneo-design-system
+npm add akeneo-design-system
 ```
 
 Once the package installed, you should provide the theme related to your project at the top of your application:
 ```tsx
 import React from 'react';
-import {ThemeProvider} from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 {/* change with your theme path */}
-import {theme} from 'akeneo-design-system/theme/pim'
+import { connectorTheme } from "akeneo-design-system";
 
 const App = () => {
   return (
     <>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={connectorTheme}>
         {/* All your application*/}
       </ThemeProvider>
     </>
@@ -81,6 +81,25 @@ const MyHomePage = () => (
 
 To know the props of each component, visit the dedicated page of the component here: https://dsm.akeneo.com. You can edit all properties and click on "Show code" in the playground section available for each components.
 
+## Play around with an hello world react App example
+
+This repository contains an example folder with a minimal React App already configured to be used with the Akeneo Design System.
+
+Go into the example directory
+```shell
+cd example
+```
+Install dependencies
+```shell
+npm install
+```
+Run the dev server
+```shell
+npm run dev
+```
+
+Feel free to adapt the `example/src/App.tsx` file and integrate other components of the DSM.
+
 ## Contribution
 
 This project has been automatically extracted from the following mono-repository: https://github.com/akeneo/pim-community-dev.

example/.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "e24a0eb5",
+  "configHash": "957c52de",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "b286a13c",
+  "optimized": {},
+  "chunks": {}
+}

example/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

example/README.md

@@ -1,29 +1,10 @@
-This is a create-react-app application, bootstraped with your **latest local build** of `akeneo-design-system`.
 
-During the install, your latest build in `../lib` is copied to `./node_modules/akeneo-design-system`, 
-you can then check this version of the DSM in real conditions.
-
-## Install
-
-```shell script
-yarn install
-```
-
-## Tests
-
-There is a few unit tests to check if the components are correctly exported and are working.
-
-```shell script
-yarn test
+## Install dependencies
+```shell
+npm install
 ```
 
-## Development
-
-```shell script
-yarn start
-```
-
-If you did a new build of `akeneo-design-system`, you can update it here with:
-```shell script
-yarn upgrade akeneo-design-system
-```
+## Run the dev server
+```shell
+npm run dev
+```

example/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

example/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Akeneo Design System - Hello world React App</title>
+  </head>
+  <body>
+    <script> const global = globalThis; </script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

example/jest.config.ts

@@ -0,0 +1,11 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    // process `*.tsx` files with `ts-jest`
+  },
+  moduleNameMapper: {
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/__mocks__/fileMock.js',
+  },
+};