New version

.babelrc.js

@@ -0,0 +1,22 @@
+const styleXPlugin = require("@stylexjs/babel-plugin");
+
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
+  plugins: [
+    [
+      styleXPlugin,
+      {
+        // We use the babelrc only for testing
+        test: true,
+        // Required for CSS variable support
+        unstable_moduleResolution: {
+          // type: 'commonJS' | 'haste'
+          // default: 'commonJS'
+          type: "commonJS",
+          // The absolute path to the root directory of your project
+          rootDir: __dirname,
+        },
+      },
+    ],
+  ],
+};

.bin/jest.sh

@@ -0,0 +1,15 @@
+# Extract working directory based on jest config file
+
+# Path to Jest config file supplied by VSCode Jest Runner
+jest_config=$3
+
+# Remove part after last slash
+cwd=$(echo "$jest_config" | sed 's|\(.*\)/.*|\1|')
+
+cd "$cwd"
+
+command="yarn jest '$1' -c $jest_config -t '$5' $6"
+
+eval "$command"
+
+cd ../..

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env

@@ -0,0 +1 @@
+NX_SKIP_NX_CACHE=true

.eslintignore

@@ -1,11 +1,12 @@
 dist
 node_modules
+jest.config.js
 jest.config.ts
+jest.setup.ts
+**/jest.setup.ts
 babel.config.js
 rollup.config.js
-jest.setup.ts
 tsconfig.json
 coverage
 temp
-commitlint.config.js
-*lib*
+release.config.js

.eslintrc.json

@@ -19,77 +19,165 @@
       "version": "detect"
     }
   },
-  "plugins": ["react", "react-hooks"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:react-hooks/recommended",
-    "prettier",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
-    "airbnb",
-    "airbnb-typescript",
-    "plugin:prettier/recommended"
-  ],
-  "rules": {
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/prop-types": "off",
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-    "no-console": ["error", { "allow": ["warn", "error"] }],
-    "react/react-in-jsx-scope": "off",
-    "react/display-name": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/prefer-default-export": 0,
-    "import/no-cycle": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/lines-between-class-members": "off",
-    "prettier/prettier": ["error"],
-    "consistent-return": 0,
-    "@typescript-eslint/no-throw-literal": 0,
-    "no-underscore-dangle": 0,
-    "react/function-component-definition": 0,
-    "react/no-unused-prop-types": 0,
-    "react/no-array-index-key": 0,
-    "react/jsx-no-useless-fragment": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/require-default-props": 0,
-    "react/no-unknown-property": 0,
-    "testing-library/render-result-naming-convention": "off",
-    "import/order": [
-      "error",
-      {
-        "groups": [
-          ["builtin", "external"],
-          ["internal", "parent", "sibling", "index"]
+
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "plugins": ["react", "react-hooks", "eslint-plugin-prettier", "tree-shaking"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:react-hooks/recommended",
+        "prettier",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/typescript",
+        "airbnb",
+        "airbnb-typescript",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/prop-types": "off",
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "no-console": ["error", { "allow": ["warn", "error"] }],
+        "react/react-in-jsx-scope": "off",
+        "no-continue": "off",
+        "react/display-name": 0,
+        "import/no-extraneous-dependencies": 0,
+        "import/prefer-default-export": 0,
+        "import/no-cycle": 0,
+        "import/no-default-export": ["error"],
+        "max-lines": ["error", 400],
+        "@typescript-eslint/no-explicit-any": "error",
+        "@typescript-eslint/lines-between-class-members": "off",
+        "prettier/prettier": ["error"],
+        "consistent-return": 0,
+        "@typescript-eslint/no-throw-literal": 0,
+        "no-underscore-dangle": 0,
+        "react/jsx-props-no-spreading": 0,
+        "react/function-component-definition": 0,
+        "react/require-default-props": 0,
+        "testing-library/render-result-naming-convention": "off",
+        "max-params": ["error", 3],
+        "no-param-reassign": [
+          "error",
+          {
+            "props": true,
+            "ignorePropertyModificationsFor": ["draft", "acc"]
+          }
         ],
-        "pathGroups": [
-          { "pattern": "assets/**", "group": "sibling", "position": "after" },
+        "tree-shaking/no-side-effects-in-initialization": [
+          2,
           {
-            "pattern": "@external/**/*.css",
-            "group": "sibling",
-            "position": "after"
-          },
+            "noSideEffectsWhenCalled": [
+              { "function": "Object.freeze" },
+              {
+                "module": "react",
+                "functions": ["createContext", "createRef", "forwardRef", "memo"]
+              }
+            ]
+          }
+        ],
+        "import/order": [
+          "error",
           {
-            "pattern": "*.css",
-            "group": "index",
-            "patternOptions": { "matchBase": true },
-            "position": "after"
+            "groups": [
+              ["builtin", "external"],
+              ["internal", "parent", "sibling", "index"]
+            ],
+            "pathGroups": [
+              { "pattern": "assets/**", "group": "sibling", "position": "after" },
+              {
+                "pattern": "*.style{s,x}",
+                "group": "sibling",
+                "patternOptions": { "matchBase": true },
+                "position": "after"
+              }
+            ],
+            "warnOnUnassignedImports": true,
+            "pathGroupsExcludedImportTypes": ["css"],
+            "newlines-between": "always"
           }
         ],
-        "warnOnUnassignedImports": true,
-        "pathGroupsExcludedImportTypes": ["css"],
-        "newlines-between": "always"
+        "@typescript-eslint/naming-convention": [
+          "error",
+          // destructured variables come from other places so no format is enforced
+          {
+            "selector": "variable",
+            "modifiers": ["destructured"],
+            "format": null
+          },
+          // functions defined as constants must be constants (not var/let)
+          {
+            "selector": "variable",
+            "types": ["function"],
+            "modifiers": ["const"],
+            "format": ["camelCase", "PascalCase"]
+          },
+          // Constants can also be camelCase apart from UPPER_CASE
+          // - functional components (PascalCase)
+          {
+            "selector": "variable",
+            "modifiers": ["const"],
+            "format": ["UPPER_CASE", "camelCase", "PascalCase"]
+          },
+          // functions can be:
+          // - regular functions (camelCase)
+          {
+            "selector": "function",
+            "format": ["camelCase"]
+          },
+          // forbid lower case
+          {
+            "selector": "typeLike",
+            "format": ["PascalCase"]
+          },
+          // forbid lower case
+          {
+            "selector": "typeParameter",
+            "format": ["PascalCase"]
+          },
+          // Uppercase enums
+          {
+            "selector": "enumMember",
+            "format": ["UPPER_CASE"]
+          }
+        ]
       }
-    ]
-  },
-  "overrides": [
+    },
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.mdx"],
+      "rules": {
+        "react/jsx-filename-extension": "off"
+      }
+    },
+    {
+      "files": ["**/__tests__/**/*"],
       "rules": {
-        "testing-library/render-result-naming-convention": "off"
+        "max-lines": "off",
+        "tree-shaking/no-side-effects-in-initialization": 0
       }
+    },
+    {
+      // IMPORTANT: DO NOT ADD `*styles.{ts,tsx}` or `contexts.{ts,tsx}` here, we should keep all styles in stylex files!
+      // File naming must be consistent across the whole project
+      "files": [
+        "*theme.ts",
+        "*context.ts",
+        "**/__stories__/**/*",
+        "**/__docs__/**/*",
+        "*.stylex.{ts,tsx}",
+        "**/jest.setup.ts"
+      ],
+      "rules": {
+        "tree-shaking/no-side-effects-in-initialization": 0
+      }
+    },
+    {
+      "files": ["*.md", "*.mdx"],
+      "extends": "plugin:mdx/recommended"
     }
   ]
 }

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: [prc5]# Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [prc5] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username

.github/PULL_REQUEST_TEMPLATE/docs.md

@@ -0,0 +1,25 @@
+# Documentation 📖
+
+> [!NOTE]  
+> This is a friendly reminder of the steps needed to release documentation. Fill in the data in the next steps so that
+> the reviewer can take care of the rest.
+
+## Changes overview
+
+Summary of the changes and the related issue if applicable.
+
+- Added documentation for xyz
+- Documented x, y, z
+
+## Additional comments
+
+N/A
+
+---
+
+## Checklist
+
+### Reviewer responsibilities
+
+- [ ] No commented-out code in the PR
+- [ ] Documentation changes reflect the functionality in readable way