.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -1,2 +1,6 @@
+vite.config.ts
+vitest.config.ts
 src/constants/tokenVariables.ts
+src/constants/tokenVariablesDesktop.ts
 src/components/Atoms/Svgs
+bin

.eslintrc

@@ -1,3 +1,14 @@
 {
-  "extends": "@elevenlabs/eslint-config"
+  "env": {
+    "jest": true
+  },
+  "extends": [
+    "@eleven-labs/eslint-config/typescript",
+    "@eleven-labs/eslint-config/react"
+  ],
+  "rules": {
+    "unicorn/prevent-abbreviations": "off",
+    "no-unused-vars": "off",
+    "react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}]
+  }
 }

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

@@ -0,0 +1,14 @@
+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
+    - name: Prepare project
+      shell: bash
+      run: npm run prepare

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

@@ -0,0 +1,98 @@
+name: Run checks and tests
+
+on: [pull_request]
+
+jobs:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+
+  commitlint:
+    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 commit
+        run: npx commitlint --from=HEAD
+
+  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/deploy-storybook.yml

@@ -1,32 +1,31 @@
 name: Build and Deploy Storybook
+
 on:
   push:
     branches:
       - master
+
 jobs:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+
   build-and-deploy-storybook:
     runs-on: ubuntu-latest
+    needs: setup
     permissions:
       contents: write
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install modules
-        run: yarn install --frozen-lockfile
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
       - name: Build Storybook
-        run: yarn build:storybook
+        run: npm run build:storybook
+
       - name: Deploy Storybook
         uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/publish-package.yml

@@ -1,36 +1,36 @@
 name: Publish package to NPM
+
 on:
   release:
     types: [created]
+
 jobs:
+  setup:
+    uses: ./.github/workflows/setup-nodejs-and-install-dependencies.yml
+
   publish-package:
     runs-on: ubuntu-latest
+    needs: setup
     permissions:
       contents: read
       packages: write
     steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install modules
-        run: yarn install --frozen-lockfile
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Restore NPM Cache
+        uses: ./.github/actions/restore-npm-cache
+
       - name: Build Library
-        run: yarn build
+        run: npm run build
+
       - uses: actions/setup-node@v3
         with:
           node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@eleven-labs'
+
       - name: Publish package
-        run: yarn publish --access public
+        run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/setup-nodejs-and-install-dependencies.yml

@@ -0,0 +1,40 @@
+name: Setup Node.js and install dependencies
+
+on:
+  workflow_call:
+    inputs:
+      node-version:
+        required: false
+        description: Node version to setup
+        type: string
+        default: 20.x
+      runner:
+        required: false
+        description: Job runner
+        type: string
+        default: ubuntu-latest
+
+jobs:
+  setup-nodejs-and-install-dependencies:
+    runs-on: ${{ inputs.runner }}
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ inputs.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ inputs.node-version }}
+          cache: npm
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        id: manager-cache-node-modules
+        with:
+          path: "**/node_modules"
+          key: cache-node-modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        if: steps.manager-cache-node-modules.outputs.cache-hit != 'true'
+        run: npm ci

.gitignore

@@ -2,15 +2,12 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
 node_modules
 dist
 dist-ssr
 *.local
+coverage
 
 # Editor directories and files
 .vscode/*
@@ -24,11 +21,14 @@ dist-ssr
 *.sw?
 
 # Custom
+reports/*
 storybook-static
 public/svgs
 src/components/Atoms/Svgs
 src/styles/_token-custom-properties.scss
+src/styles/_token-custom-properties-desktop.scss
 src/styles/abstracts/variables/_token-variables.scss
 src/styles/abstracts/variables/_variables.scss
 src/styles/_fonts.scss
 src/constants/tokenVariables.ts
+src/constants/tokenVariablesDesktop.ts

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn commitlint --edit 
+npx commitlint --edit

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint-staged
+npx lint-staged

.storybook/components/Layout/Layout.tsx

@@ -20,7 +20,7 @@ export const Layout: React.FC<LayoutProps> = ({ title, description, children })
     <Canvas>
       <main>
         {title && (
-          <Box bg="navy" color="white" px="l" py="xxl">
+          <Box bg="primary" color="white" px="l" py="xxl">
             <Heading as="p" size="xl">
               {title}
             </Heading>

.storybook/components/SystemPropsTable/SystemPropsTable.tsx

@@ -25,10 +25,10 @@ const getStoryTitleAndDesignTokenLabelByPropName = (
   if (Object.keys(spacingSystemProps).includes(propName) || ['gap', 'gapX', 'gapY'].includes(propName)) {
     designTokenName = 'spacing';
   }
-  if (['width', 'minWidth', 'maxWidth'].includes(propName)) {
+  if (['width'].includes(propName)) {
     designTokenName = 'width';
   }
-  if (['height', 'minHeight', 'maxHeight'].includes(propName)) {
+  if (['height'].includes(propName)) {
     designTokenName = 'height';
   }
 

.storybook/components/Table/Table.tsx

@@ -27,7 +27,7 @@ export const Table: React.FC<TableProps> = ({ title, columns, rows, ...boxProps
         } as React.CSSProperties
       }
     >
-      <Box py="xs" bg="ultra-light-grey" color="grey" className="storybook-table__head">
+      <Box py="xs" bg="secondary" color="primary-light" className="storybook-table__head">
         {columns.map((column) => (
           <Box key={column.name} px="xxs">
             {column.label}