V3 1

.eslintrc.js

@@ -1,63 +1,75 @@
 module.exports = {
-  parser: `@typescript-eslint/parser`,
+  root: true,
+  parser: "@typescript-eslint/parser",
   env: {
     browser: true,
     node: true,
-    es2020: true,
+    es2022: true,
     jest: true,
   },
   extends: [
     "airbnb-typescript",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:storybook/recommended",
     "prettier",
   ],
   parserOptions: {
-    project: `./tsconfig.eslint.json`,
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 11,
+    project: "./tsconfig.eslint.json",
+    ecmaFeatures: { jsx: true },
+    ecmaVersion: 2022,
     sourceType: "module",
   },
   settings: {
+    react: { version: "detect" },
     "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx", ".js", ".jsx", ".svg"],
+      "@typescript-eslint/parser": [".ts", ".tsx", ".js", ".jsx"],
     },
     "import/resolver": {
-      typescript: {
-        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
-      },
+      typescript: { alwaysTryTypes: true },
     },
   },
-  plugins: ["@typescript-eslint", "prettier", "react", "jsx-a11y", "import"],
+  plugins: ["@typescript-eslint", "prettier", "react", "react-hooks", "jsx-a11y", "import"],
   rules: {
-    "prettier/prettier": ["error"],
-    "import/prefer-default-export": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/prop-types": 0,
-    "arrow-body-style": 0,
-    "react/self-closing-comp": 0,
-    "react/react-in-jsx-scope": 0,
-    "react/jsx-fragments": 0,
-    "react/require-default-props": 0,
-    "react/display-name": 1,
-    "@typescript-eslint/naming-convention": 0,
-    "@typescript-eslint/no-redeclare": 0,
-    "@typescript-eslint/ban-types": 0,
-    "@typescript-eslint/no-shadow": 0,
-    "@typescript-eslint/no-use-before-define": 0,
-    "@typescript-eslint/no-var-requires": 1,
-    "@typescript-eslint/ban-ts-comment": 1,
-    "@typescript-eslint/triple-slash-reference": 0,
-    "@typescript-eslint/no-unused-expressions": 0,
-    "@typescript-eslint/ban-ts-comment": 0,
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        devDependencies: true,
-      },
-    ],
+    "prettier/prettier": "error",
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-fragments": "off",
+    "react/require-default-props": "off",
+    "react/function-component-definition": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-redeclare": "off",
+    "@typescript-eslint/default-param-last": "off",
+    "react/display-name": "warn",
+    "jsx-a11y/no-autofocus": "warn",
+    "no-plusplus": "off",
+    "no-param-reassign": "off",
   },
+  overrides: [
+    {
+      files: ["**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"],
+      rules: {
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "react/display-name": "off",
+      },
+    },
+  ],
+  ignorePatterns: ["dist", "node_modules", "coverage", "storybook-static", ".eslintcache", "jest-test-results.json"],
 };

.github/CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 #### Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [amen.souissi@decathlon.com](mailto:amen.souissi@decathlon.com). All complaints will be reviewed and investigated and will result in a response that
+reported by contacting the project team at [amen.souissi@pricemoov.com](mailto:amen.souissi@pricemoov.com). All complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.
 Further details of specific enforcement policies may be posted separately.

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,4 +11,4 @@
 
 Please describe your pull request.
 
-💔Thank you!
+❤️ Thank you!

.github/workflows/ci.yml

@@ -7,9 +7,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
-      - name: Run tests
-        run: |
-          npm ci
-          npm run test
-          npm run lint
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npm test -- --ci
+      - run: npm run build

.github/workflows/npm-publish.yml

@@ -8,12 +8,15 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 12
+          node-version: 20
           registry-url: https://registry.npmjs.org/
+          cache: npm
       - run: npm ci
+      - run: npm test -- --ci
+      - run: npm run build
       - run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierignore

@@ -1,6 +1,8 @@
-coverage/*
-dist/*
-node_modules/*
-README.md
+coverage/
+dist/
+node_modules/
+storybook-static/
+.eslintcache
+package-lock.json
 stats.json
-jest-test-results.json
+jest-test-results.json

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-a11y", "@storybook/addon-jest"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    check: false,
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { addons } from "storybook/manager-api";
+import { themes, create } from "storybook/theming";
+
+addons.setConfig({
+  panelPosition: "right",
+  theme: create({
+    ...themes.light,
+    base: "light",
+    brandTitle: "@pricemoov/react-table",
+    brandUrl: "https://github.com/PricemoovOSS/react-table",
+    appBg: "white",
+    appBorderRadius: 4,
+  }),
+});

.storybook/preview-head.html

@@ -1 +1,17 @@
-<style id="stories-style"></style>
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+
+<style id="stories-style">
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { Preview } from "@storybook/react-vite";
+import { withTests } from "@storybook/addon-jest";
+
+import "../src/style/index.scss";
+
+let testResults: Parameters<typeof withTests>[0]["results"];
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  testResults = require("../jest-test-results.json");
+} catch {
+  testResults = { numTotalTests: 0 } as never;
+}
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i },
+    },
+    layout: "padded",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 16 }}>
+        <Story />
+      </div>
+    ),
+    withTests({ results: testResults }),
+  ],
+};
+
+export default preview;

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "selector-class-pattern": null,
+    "scss/at-import-partial-extension": null,
+    "no-descending-specificity": null,
+    "selector-no-vendor-prefix": null
+  }
+}