feat: migrate on npm and update design system

.editorconfig

@@ -1,22 +1,9 @@
 root = true
 
 [*]
-charset = utf-8
-end_of_line = lf
-indent_size = 4
 indent_style = space
-insert_final_newline = true
-max_line_length = 120
-trim_trailing_whitespace = true
-
-[*.js]
-indent_size = 2
-
-[*.scss]
-indent_size = 2
-
-[*.rb]
-indent_size = 2
-
-[Rakefile]
 indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/actions/restore-npm-cache/action.yml

@@ -0,0 +1,11 @@
+name: restore-npm-cache
+description: Restore NPM Cache
+runs:
+  using: composite
+  steps:
+    - name: Restore NPM Cache
+      uses: actions/cache@v3
+      with:
+        path: "**/node_modules"
+        key: cache-node-modules-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: cache-node-modules-npm run

.github/workflows/checks-and-tests.yml

@@ -0,0 +1,121 @@
+name: Run checks and tests
+
+on: workflow_call
+
+jobs:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+
+  validate-markdown:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Validate markdown authors and posts
+        id: validate_markdown
+        run: npm run validate-markdown --ci
+
+      - name: Add a comment to the PR after failed markdown validation
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: github.event_name == 'pull_request' && failure()
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.pull_request.number }}
+          header: validate-markdown
+          message: |
+            #### Markdown invalid 🖌
+
+            The markdown of the file **${{ steps.validate_markdown.outputs.filePath }}** is invalid !
+            > ${{ steps.validate_markdown.outputs.reason }}
+
+      - name: Remove a comment to the PR after success markdown validation
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: github.event_name == 'pull_request' && success()
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.pull_request.number }}
+          header: validate-markdown
+          delete: true
+
+  eslint:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Lint code
+        run: npm run lint:es
+
+  stylelint:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Lint code
+        run: npm run lint:style
+
+  compile:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Run Compile TypeScript
+        run: npx tsc
+
+  test:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Run Tests
+        run: npm run test
+
+  build:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Build Design System
+        run: npm run build
+
+  build-storybook:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Build Storybook
+        run: npm run build:storybook

.github/workflows/continuous-integration-and-deployment.yml

@@ -0,0 +1,30 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+  checks-and-tests:
+    needs: setup
+    uses: ./.github/workflows/checks-and-tests.yml
+  deploy:
+    needs: checks-and-tests
+    uses: ./.github/workflows/deploy.yml
+    with:
+      AWS_DEFAULT_REGION: eu-west-2
+    secrets:
+      ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+      ALGOLIA_INDEX_DEV: ${{ secrets.ALGOLIA_INDEX_DEV }}
+      ALGOLIA_API_INDEXING_KEY_DEV: ${{ secrets.ALGOLIA_API_INDEXING_KEY_DEV }}
+      ALGOLIA_API_SEARCH_KEY_DEV: ${{ secrets.ALGOLIA_API_SEARCH_KEY_DEV }}
+      GTM_ID_DEV: ${{ secrets.GTM_ID_DEV }}
+      ALGOLIA_INDEX_PRODUCTION: ${{ secrets.ALGOLIA_INDEX_PRODUCTION }}
+      ALGOLIA_API_INDEXING_KEY_PRODUCTION: ${{ secrets.ALGOLIA_API_INDEXING_KEY_PRODUCTION }}
+      ALGOLIA_API_SEARCH_KEY_PRODUCTION: ${{ secrets.ALGOLIA_API_SEARCH_KEY_PRODUCTION }}
+      GTM_ID_PRODUCTION: ${{ secrets.GTM_ID_PRODUCTION }}
+      GOOGLE_SITE_VERIFICATION: ${{ secrets.GOOGLE_SITE_VERIFICATION }}

.github/workflows/deploy.yml

@@ -1,26 +1,53 @@
 name: Deploy
 
-on:
-  push:
-    branches:
-      - master
-  pull_request:
 
-env:
-  AWS_DEFAULT_REGION: eu-west-2
+on:
+  workflow_call:
+    inputs:
+      AWS_DEFAULT_REGION:
+        required: true
+        type: string
+    secrets:
+      ALGOLIA_APP_ID:
+        required: true
+      ALGOLIA_INDEX_DEV:
+        required: true
+      ALGOLIA_API_INDEXING_KEY_DEV:
+        required: true
+      ALGOLIA_API_SEARCH_KEY_DEV:
+        required: true
+      GTM_ID_DEV:
+        required: true
+      ALGOLIA_INDEX_PRODUCTION:
+        required: true
+      ALGOLIA_API_INDEXING_KEY_PRODUCTION:
+        required: true
+      ALGOLIA_API_SEARCH_KEY_PRODUCTION:
+        required: true
+      GTM_ID_PRODUCTION:
+        required: true
+      GOOGLE_SITE_VERIFICATION:
+        required: true
 
 jobs:
-  deploy:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+
+  deploy-website:
     runs-on: ubuntu-latest
+    needs: setup
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
 
       - name: Sets env vars for dev
         if: github.event_name == 'pull_request'
         run: |
           echo "ENV=dev-${{ github.head_ref }}" >> $GITHUB_ENV
-          echo "ENV_URL=http://dev.blog.eleven-labs.com.s3-website.${{ env.AWS_DEFAULT_REGION }}.amazonaws.com/${{ github.head_ref }}" >> $GITHUB_ENV
+          echo "ENV_URL=http://dev.blog.eleven-labs.com.s3-website.${{ inputs.AWS_DEFAULT_REGION }}.amazonaws.com/${{ github.head_ref }}" >> $GITHUB_ENV
           echo "BASE_URL=/${{ github.head_ref }}/" >> $GITHUB_ENV
           echo "ALGOLIA_APP_ID=${{ secrets.ALGOLIA_APP_ID }}" >> $GITHUB_ENV
           echo "ALGOLIA_INDEX=${{ secrets.ALGOLIA_INDEX_DEV }}" >> $GITHUB_ENV
@@ -41,66 +68,8 @@ jobs:
           echo "GTM_ID=${{ secrets.GTM_ID_PRODUCTION }}" >> $GITHUB_ENV
           echo "GOOGLE_SITE_VERIFICATION==${{ secrets.GOOGLE_SITE_VERIFICATION }}" >> $GITHUB_ENV
 
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          bundler-cache: true
-          node-version: 16
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "yarnCacheDir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.yarnCacheDir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install modules
-        run: yarn install --frozen-lockfile
-
-      - name: Validate markdown authors and posts
-        id: validate_markdown
-        run: yarn validate-markdown --ci
-
-      - name: Add a comment to the PR after failed markdown validation
-        uses: marocchino/sticky-pull-request-comment@v2
-        if: github.event_name == 'pull_request' && failure()
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          header: validate-markdown
-          message: |
-            #### Markdown invalid 🖌
-
-            The markdown of the file **${{ steps.validate_markdown.outputs.filePath }}** is invalid !
-            > ${{ steps.validate_markdown.outputs.reason }}
-
-      - name: Remove a comment to the PR after success markdown validation
-        uses: marocchino/sticky-pull-request-comment@v2
-        if: github.event_name == 'pull_request' && success()
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          header: validate-markdown
-          delete: true
-
-      - name: Run ESLint
-        run: yarn lint:es
-
-      - name: Run Stylelint
-        run: yarn lint:style
-
-      - name: Run Compile TypeScript
-        run: yarn tsc
-
-      - name: Run Test
-        run: yarn test
-
       - name: Build
-        run: yarn prerender
+        run: npm run prerender
         env:
           NODE_ENV: production
           BASE_URL: ${{ env.BASE_URL }}
@@ -140,7 +109,7 @@ jobs:
           aws cloudfront create-invalidation --distribution-id "${{ secrets.CLOUDFRONT_DISTRIBUTION }}" --paths "/*"
 
       - name: Indexing on Algolia
-        run: yarn indexation:algolia
+        run: npm run indexation:algolia
         env:
           ALGOLIA_APP_ID: ${{ env.ALGOLIA_APP_ID }}
           ALGOLIA_API_INDEXING_KEY: ${{ env.ALGOLIA_API_INDEXING_KEY }}
@@ -194,3 +163,26 @@ jobs:
           number: ${{ github.event.pull_request.number }}
           header: lighthouse
           message: ${{ steps.format_lighthouse_score.outputs.comment }}
+
+  deploy-storybook:
+    runs-on: ubuntu-latest
+    needs: setup
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
+      - name: Build Storybook
+        run: npm run build:storybook
+
+      - name: Deploy Storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static