Poweruser search, use / to focus on searchinput

.eslintrc.js

@@ -55,7 +55,7 @@ module.exports = {
         devDependencies: ['tests/**/*.js', '.webpack/**/*.js'],
       },
     ],
-    'max-len': ['error', {code: 120}],
+    'max-len': ['error', {code: 150}],
     'no-alert': 0,
     'no-bitwise': 0,
     'no-new': 0,
@@ -70,6 +70,7 @@ module.exports = {
     ],
     'prefer-destructuring': ['error', {object: true, array: false}],
     'no-shadow': 'off',
+    'no-useless-constructor': 'off',
     '@typescript-eslint/no-shadow': ['error'],
   },
   settings: {

.github/workflows/build.yml

@@ -11,19 +11,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup node env
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Copy Webpack config
-        run: cp ./webpack/.env-example ./webpack/.env
-
       - name: Build assets
         run: npm run build
 
@@ -32,6 +29,7 @@ jobs:
           rm .git/ -rf
           rm .github/ -rf
           rm .storybook/ -rf
+          rm docker/ -rf
           rm node_modules/ -rf
           rm src/ -rf
           rm stories/ -rf

.github/workflows/cd.yml

@@ -16,18 +16,18 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: Setup node env
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
 
       - name: Install dependencies
         run: npm ci
 
       - name: Generate
-        run: npm run build-storybook
+        run: npm run storybook:build
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

.github/workflows/lint.yml

@@ -1,29 +1,46 @@
 name: Lint
 on: [ push, pull_request ]
 jobs:
-  stylelint:
-    name: SCSS Lint
+  stylelint_prettier:
+    name: Stylelint & Prettier
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
+
+      # Install project dependencies
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Lint scss
-        run: npm ci && npm run scss-lint
+      # Run Prettier check command
+      - name: Run Prettier check
+        run: |
+          npm run prettier || {
+            echo "::error::Prettier check failed. Run 'npm run prettier:fix' to format your code."
+            exit 1
+          }
+
+      # Run Stylelint check command
+      - name: Run Stylelint check
+        run: |
+          npm run stylelint || {
+            echo "::error::Stylelint check failed. Run 'npm run stylelint:fix' to autofix issues."
+            exit 1
+          }
   eslint:
     name: ESLint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
       - name: Lint js
-        run: touch ./webpack/.env && npm ci && npm run lint
+        run: npm ci && npm run lint

.github/workflows/tests.yml

@@ -9,15 +9,15 @@ jobs:
         js: [ '20' ]
     steps:
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.js }}
 
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Cache Node Directory
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/typecheck.yml

@@ -5,12 +5,12 @@ jobs:
     name: TypeScript type check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
       - name: Build and check types
-        run: touch ./webpack/.env && npm ci && npm run build
+        run: npm ci && npm run build

.gitignore

@@ -2,3 +2,4 @@ node_modules
 assets
 .env
 coverage
+storybook-static

.nvmrc

@@ -0,0 +1 @@
+v20.19.4

.prettierrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  overrides: [
+    {
+      files: "*.scss",
+      options: {
+        printWidth: 100,
+        tabWidth: 2,
+        useTabs: false,
+        singleQuote: false,
+        bracketSpacing: true,
+        parser: "scss",
+      },
+    },
+  ],
+};

.storybook/main.js

@@ -1,43 +1,73 @@
 const path = require('path');
 
 module.exports = {
-  "stories": [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
     '@storybook/addon-a11y',
+    '@storybook/addon-webpack5-compiler-swc'
   ],
-  "framework": "@storybook/html",
-  "core": {
-    "builder": "webpack5"
+
+  framework: {
+    name: '@storybook/html-webpack5',
+    options: {}
   },
+
   webpackFinal: (config) => {
-    config.module.rules[3].use = 'html-loader?minimize=false';
+    // Add support for HTML
+    config.module.rules = config.module.rules.map((rule) => {
+      if (rule.test && rule.test.toString().includes('\\.html$')) {
+        return {
+          ...rule,
+          use: {
+            loader: 'html-loader',
+          }
+        };
+      }
+      return rule;
+    });
+
+    // Add support for SCSS
     config.module.rules.push({
       test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              // Removes deprecation warnings from Bootstrap
+              quietDeps: true,
+            }
+          }
+        }
+      ],
       include: path.resolve(__dirname, '../'),
     });
 
+    // Add path aliases
     config.resolve.alias = {
       ...config.resolve.alias,
       '@js': path.resolve(__dirname, '../src/js'),
       '@services': path.resolve(__dirname, '../src/js/services'),
       '@constants': path.resolve(__dirname, '../src/js/constants'),
       '@helpers': path.resolve(__dirname, '../src/js/helpers'),
-    }
+    };
 
+    // Define external libraries
     config.externals = {
       ...config.externals,
       prestashop: 'prestashop',
     };
 
     return config;
   },
-  addonActionsTheme: {
-    BASE_COLOR: 'red',
-  },
-}
+
+  docs: {}
+};

.storybook/manager.js

@@ -1,5 +1,4 @@
-import {addons} from '@storybook/addons';
-import {themes} from '@storybook/theming';
+import { addons } from '@storybook/preview-api';
 import psTheme from './ps-theme';
 
 addons.setConfig({

.storybook/preview.js

@@ -19,17 +19,11 @@ window.prestashop = {
   }
 }
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
+const preview = {
+  parameters: {
+    // Add parameters here
   },
-  options: {
-    storySort: {
-      order: ['Theme', ['Introduction', 'JavaScript', ['Components', ['Introduction']]], 'UI', ['Introduction']],
-    },
-  },
-}
+
+  tags: ['autodocs']
+};
+export default preview;

.stylelintrc

@@ -4,16 +4,21 @@
   ],
   "customSyntax": "postcss-scss",
   "rules": {
+    "declaration-colon-newline-after": null,
+    "function-disallowed-list": null,
+    "property-disallowed-list": null,
+    "selector-class-pattern": null,
     "selector-id-pattern": null,
-    "selector-max-id": null,
     "selector-max-class": null,
-    "selector-max-type": null,
+    "selector-max-combinators": null,
     "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-max-type": null,
     "selector-no-qualifying-type": null,
-    "selector-max-combinators": null,
-    "selector-class-pattern": null,
-    "function-disallowed-list": null,
+    "value-list-comma-newline-after": null,
+    "value-list-comma-space-after": null,
     "scss/dollar-variable-default": null,
-    "property-disallowed-list": null
+    "scss/operator-no-newline-after": null,
+    "scss/percent-placeholder-pattern": null
   }
 }