eslint-config-octaviaflow 1.0.0

package/README.md

@@ -0,0 +1,45 @@
+# eslint-config-octaviaflow
+
+> ESLint configuration for octaviaflow
+
+## Getting started
+
+To install `eslint-config-octaviaflow` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S eslint-config-octaviaflow
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add eslint-config-octaviaflow
+```
+
+## Usage
+
+You can use `eslint-config-octaviaflow` in your project by extending it in your
+`eslint` configuration. For example, if we had an `.eslintrc` file:
+
+```json
+{
+  "extends": ["octaviaflow"]
+}
+```
+
+The default configuration available under `eslint-config-octaviaflow` includes all
+ESLint configuration and plugins, including plugins for React.js development. If
+you'd like to not include these rules in your setup, you can also include a
+`base` or `vanilla` oriented configuration by doing the following:
+
+```json
+{
+  "extends": ["eslint-config-octaviaflow/base"]
+}
+```
+
+## 📝 License
+
+Licensed under the [Apache 2.0 License](/LICENSE).

package/base.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    babelOptions: {
+      presets: ['babel-preset-octaviaflow'],
+    },
+    requireConfigFile: false,
+  },
+  extends: [
+    'eslint:recommended',
+    require.resolve('./rules/best-practices'),
+    require.resolve('./plugins/jsdoc'),
+  ],
+  rules: {
+    // Handle cases where we are destructuring but may not be using the initial
+    // variables
+    'no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+  },
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
+    jest: true,
+    jasmine: true,
+  },
+  globals: {
+    __DEV__: true,
+  },
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "eslint-config-octaviaflow",
+  "description": "ESLint configuration for octaviaflow",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OctaviaFlow/OctaviaFlow-Design-System.git",
+    "directory": "config/eslint-config-octaviaflow"
+  },
+  "bugs": "https://github.com/OctaviaFlow/OctaviaFlow-Design-System/issues",
+  "files": [
+    "plugins",
+    "rules",
+    "base.js",
+    "index.js",
+    "react.js",
+    "vanilla.js"
+  ],
+  "keywords": [
+    "octaviaflow",
+    "octaviaflow",
+    "octaviaflow-design-system",
+    "components",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "eslint": "^9.0.0"
+  },
+  "dependencies": {
+    "@babel/eslint-parser": "^7.28.5",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.1.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-jsdoc": "^61.1.12",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-ssr-friendly": "^1.3.0",
+    "eslint-plugin-storybook": "^10.0.6",
+    "eslint-plugin-testing-library": "^7.13.3",
+    "eslint-restricted-globals": "^0.2.0"
+  },
+  "devDependencies": {
+    "babel-preset-octaviaflow": "^1.0.0",
+    "prettier": "^3.3.3"
+  }
+}

package/plugins/eslint-plugin-playwright.js

@@ -0,0 +1,34 @@
+const prefixes = [
+  '@avt-default-state',
+  '@avt-advanced-states',
+  '@avt-keyboard-nav',
+];
+const prefixesList = prefixes.join('  | \n');
+
+module.exports = {
+  plugins: ['eslint-plugin-playwright'],
+  overrides: [
+    {
+      extends: ['plugin:playwright/recommended'],
+      files: ['*-test.avt.e2e.js'],
+      rules: {
+        'playwright/valid-title': [
+          'error',
+          {
+            mustMatch: {
+              describe: [
+                /^(\s*@avt(\s+\S+)*\s*)$/.source,
+                `Describe titles should start with "@avt" prefix`,
+              ],
+              test: [
+                /^(\s*(@avt-default-state||@avt-advanced-states||@avt-keyboard-nav)(\s+\S+)*\s*)$/
+                  .source,
+                `Test titles should start with one of the following prefixes: ${prefixesList}`,
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+};

package/plugins/eslint-plugin-ssr-friendly.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['ssr-friendly'],
+  ignorePatterns: ['*.stories.js', '*-test.js'],
+  overrides: [
+    {
+      extends: ['plugin:ssr-friendly/recommended'],
+      files: ['*.js', '*.ts', '*.tsx'],
+    },
+  ],
+};

package/plugins/jest.js

@@ -0,0 +1,141 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['eslint-plugin-jest', 'jest-dom'],
+  overrides: [
+    {
+      extends: ['plugin:jest-dom/recommended'],
+      files: ['*-test.js', '*.test.js', '*-spec.js', '*.spec.js'],
+      env: {
+        'jest/globals': true,
+      },
+      rules: {
+        // Have control over test and it usages
+        'jest/consistent-test-it': 'off',
+
+        // Have control over test and it usages
+        'jest/expect-expect': [
+          'error',
+          {
+            assertFunctionNames: ['expect', 'assert*'],
+          },
+        ],
+
+        // Enforce lowercase test names
+        'jest/prefer-lowercase-title': 'off',
+
+        // Disallow alias methods
+        'jest/no-alias-methods': 'error',
+
+        // Disallow commented out tests
+        'jest/no-commented-out-tests': 'error',
+
+        // Prevent calling expect conditionally
+        'jest/no-conditional-expect': 'error',
+
+        // Disallow use of deprecated functions
+        'jest/no-deprecated-functions': 'error',
+
+        // Disallow disabled tests
+        'jest/no-disabled-tests': 'off',
+
+        // Avoid using a callback in asynchronous tests and hooks
+        'jest/no-done-callback': 'error',
+
+        // Disallow duplicate setup and teardown hooks
+        'jest/no-duplicate-hooks': 'error',
+
+        // Disallow using exports in files containing tests
+        'jest/no-export': 'error',
+
+        // Disallow focused tests
+        'jest/no-focused-tests': 'error',
+
+        // Disallow setup and teardown hooks
+        'jest/no-hooks': 'off',
+
+        // Disallow identical titles
+        'jest/no-identical-title': 'error',
+
+        // Disallow conditional logic
+        'jest/no-if': 'error',
+
+        // Disallow string interpolation inside snapshots
+        'jest/no-interpolation-in-snapshots': 'error',
+
+        // Disallow Jasmine globals
+        'jest/no-jasmine-globals': 'error',
+
+        // Disallow large snapshots
+        'jest/no-large-snapshots': 'off',
+
+        // Disallow manually importing from __mocks__
+        'jest/no-mocks-import': 'error',
+
+        // Disallow specific matchers & modifiers
+        'jest/no-restricted-matchers': 'off',
+
+        // Disallow using expect outside of it or test blocks
+        'jest/no-standalone-expect': 'error',
+
+        // Use .only and .skip over f and x
+        'jest/no-test-prefixes': 'off',
+
+        // Disallow explicitly returning from tests
+        'jest/no-test-return-statement': 'error',
+
+        // Suggest using toBeCalledWith() or toHaveBeenCalledWith()
+        'jest/prefer-called-with': 'off',
+
+        // Suggest using expect.assertions() OR expect.hasAssertions()
+        'jest/prefer-expect-assertions': 'off',
+
+        // Suggest having hooks before any test cases
+        'jest/prefer-hooks-on-top': 'error',
+
+        // Suggest using jest.spyOn()
+        'jest/prefer-spy-on': 'off',
+
+        // Suggest using toStrictEqual()
+        'jest/prefer-strict-equal': 'off',
+
+        // Suggest using toBe() for primitive literals
+        'jest/prefer-to-be': 'off',
+
+        // Suggest using toContain()
+        'jest/prefer-to-contain': 'off',
+
+        // Suggest using toHaveLength()
+        'jest/prefer-to-have-length': 'off',
+
+        // Suggest using test.todo
+        'jest/prefer-todo': 'off',
+
+        // Require a message for toThrow()
+        'jest/require-to-throw-message': 'off',
+
+        // Require test cases and hooks to be inside a describe block
+        'jest/require-top-level-describe': 'off',
+
+        // Enforce valid describe() callback
+        'jest/valid-describe-callback': 'error',
+
+        // Enforce valid expect() usage
+        'jest/valid-expect': 'error',
+
+        // Enforce having return statement when testing with promises
+        'jest/valid-expect-in-promise': 'error',
+
+        // Enforce valid titles
+        'jest/valid-title': 'error',
+      },
+    },
+  ],
+};

package/plugins/jsdoc.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['jsdoc'],
+  settings: {
+    jsdoc: {
+      tagNamePreference: {
+        augments: 'extends',
+      },
+    },
+  },
+  rules: {
+    'jsdoc/check-param-names': 2,
+    'jsdoc/check-tag-names': [
+      'error',
+      {
+        definedTags: ['jest-environment'],
+      },
+    ],
+    'jsdoc/check-types': 2,
+  },
+};

package/plugins/react.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: ['react', 'react-hooks'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    // react
+    'react/button-has-type': 'error',
+    'react/jsx-uses-vars': 1,
+    'react/jsx-uses-react': 1,
+    'react/no-find-dom-node': 1,
+    'react/jsx-no-useless-fragment': 2,
+    'react/no-typos': 2,
+    'react/sort-prop-types': 2,
+    'react/forbid-component-props': [
+      2,
+      { forbid: [{ propName: 'style', message: 'Avoid using style prop' }] },
+    ],
+    'react/forbid-dom-props': [
+      2,
+      { forbid: [{ propName: 'style', message: 'Avoid using style prop' }] },
+    ],
+
+    // react-hooks
+    'react-hooks/rules-of-hooks': 2,
+    'react-hooks/exhaustive-deps': [
+      2,
+      {
+        additionalHooks: 'useIsomorphicEffect',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      plugins: ['@typescript-eslint'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      rules: {
+        'no-unused-vars': 'off', // Disabled in favor of @typescript-eslint/no-unused-vars
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_',
+          },
+        ],
+        '@typescript-eslint/no-empty-function': 'off', // Disabled to support default empty functions used in PropTypes
+        '@typescript-eslint/no-explicit-any': 'off', // TODO: Enable once stricter typings of internal utilities are supported
+        '@typescript-eslint/ban-ts-comment': 'off', // Disabled to allow some instances where we won't be able to fix type errors
+      },
+    },
+    // Sometimes we'll want to define a quick component in a story to use as a
+    // wrapper for a component we're documenting. For example:
+    //
+    // function DemoComponent({ children }) {
+    //   return <p>{children}</p>;
+    // }
+    //
+    // In these cases, we don't need to handle prop type validation like we
+    // would for code we ship to users.
+    {
+      files: ['*-story.js', '*.stories.js'],
+      rules: {
+        'react/display-name': 0,
+        'react/prop-types': 0,
+        'react/forbid-component-props': 0,
+        'react/forbid-dom-props': 0,
+      },
+    },
+    // style prop is fine to be used in internal unit testing
+    {
+      files: ['*.e2e.js'],
+      rules: {
+        'react/forbid-component-props': 0,
+        'react/forbid-dom-props': 0,
+      },
+    },
+
+    // When writing fixtures, we tend to focus on the specific component and
+    // don't require React in scope as we never end up executing the code. The
+    // fixtures are often used for asserting transformations on the file
+    {
+      files: ['**/fixtures/**/*.js'],
+      rules: {
+        'react/react-in-jsx-scope': 0,
+      },
+    },
+
+    {
+      files: ['*-test.js'],
+      rules: {
+        // We often write inline functions for certain types of props, typically
+        // `render*` props. For example, `renderIcon={() => <div>test</div>}`
+        'react/display-name': 0,
+
+        // While writing tests, we often write helper components that are meant
+        // to emulate a specific situation or behavior. These do not require prop
+        // types as they are not shipped to end-users and are not valuable for
+        // test authors.
+        'react/prop-types': 0,
+      },
+    },
+  ],
+};

package/plugins/storybook.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+/**
+ * ESLint configuration for eslint-plugin-storybook
+ *
+ * @see https://github.com/storybookjs/eslint-plugin-storybook
+ */
+module.exports = {
+  plugins: ['storybook'],
+  overrides: [
+    {
+      files: ['*.stories.js', '*-story.js'],
+      extends: ['plugin:storybook/recommended'],
+      rules: {
+        // Interactions should be awaited
+        'storybook/await-interactions': 'error',
+
+        // Pass a context when invoking play function of another story
+        'storybook/context-in-play-function': 'error',
+
+        // The component property should be set
+        'storybook/csf-component': 'error',
+
+        // Story files should have a default export
+        'storybook/default-exports': 'error',
+
+        // Deprecated hierachy separator in title property
+        'storybook/hierarchy-separator': 'error',
+
+        'storybook/no-redundant-story-name': 'error',
+
+        // storiesOf is deprecated and should not be used
+        'storybook/no-stories-of': 'error',
+
+        // Do not define a title in meta
+        'storybook/no-title-property-in-meta': 'off',
+
+        // Stories should use PascalCase
+        'storybook/prefer-pascal-case': 'error',
+
+        // A story file must contain at least one story export
+        'storybook/story-exports': 'error',
+
+        // Use expect from @storybook/jest
+        'storybook/use-storybook-expect': 'error',
+
+        // Do not use testing-library directly on stories
+        'storybook/use-storybook-testing-library': 'error',
+      },
+    },
+  ],
+};

package/plugins/testing-library.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['testing-library'],
+  overrides: [
+    {
+      extends: ['plugin:testing-library/react'],
+      files: ['packages/react/**/*-test.js'],
+      rules: {
+        'testing-library/no-node-access': [
+          'error',
+          { allowContainerFirstChild: true },
+        ],
+      },
+    },
+  ],
+};

package/rules/best-practices.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+export default {
+  rules: {
+    // @see https://eslint.org/docs/rules/curly
+    curly: 'error',
+  },
+};

package/vanilla.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ */
+
+'use strict';
+
+module.exports = {
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'script',
+    babelOptions: {
+      presets: ['babel-preset-octaviaflow'],
+    },
+    requireConfigFile: false,
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['airbnb-base', 'prettier'],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'es5',
+      },
+    ],
+    'max-len': [2, 130, 4],
+    'no-param-reassign': [
+      2,
+      {
+        props: false,
+      },
+    ],
+    'no-plusplus': 0,
+    'no-underscore-dangle': 0,
+    'prefer-rest-params': 0,
+    'comma-dangle': [
+      2,
+      {
+        arrays: 'always-multiline',
+        objects: 'always-multiline',
+        imports: 'always-multiline',
+        exports: 'always-multiline',
+        functions: 'never',
+      },
+    ],
+    'import/no-extraneous-dependencies': [2, { devDependencies: true }],
+    'import/order': 0,
+  },
+};