@bigbinary/neeto-commons-rn 1.8.4 → 1.8.5

package/eslint-config/index.js

@@ -0,0 +1,299 @@
+// Shared ESLint 9 flat config for neeto React Native apps.
+//
+// Usage in an app's eslint.config.js:
+//
+//   const neetoRNConfig = require("@bigbinary/neeto-commons-rn/eslint-config");
+//   const aliases = require("./aliases.json");
+//
+//   module.exports = neetoRNConfig({ aliases });
+//
+// The plugins are resolved from the consuming app's node_modules — install
+// the packages listed under peerDependencies (lint group) as devDependencies.
+const babelParser = require("@babel/eslint-parser");
+const js = require("@eslint/js");
+const prettierConfig = require("eslint-config-prettier");
+const importPlugin = require("eslint-plugin-import");
+const prettierPlugin = require("eslint-plugin-prettier");
+const promisePlugin = require("eslint-plugin-promise");
+const reactPlugin = require("eslint-plugin-react");
+const reactHooksPlugin = require("eslint-plugin-react-hooks");
+const reactNativePlugin = require("eslint-plugin-react-native");
+const unusedImportsPlugin = require("eslint-plugin-unused-imports");
+const globals = require("globals");
+
+const neetoPlugin = {
+  rules: {
+    "no-dangling-constants": require("./rules/no-dangling-constants"),
+    "no-redundant-string-templates": require("./rules/no-redundant-string-templates"),
+  },
+};
+
+const DEFAULT_IGNORES = [
+  "node_modules/**",
+  "android/**",
+  "ios/**",
+  "vendor/**",
+  "coverage/**",
+  "patches/**",
+  "**/*.json",
+];
+
+module.exports = ({ aliases = {}, ignores = [] } = {}) => [
+  {
+    ignores: [...DEFAULT_IGNORES, ...ignores],
+  },
+  js.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  promisePlugin.configs["flat/recommended"],
+  {
+    files: ["**/*.{js,jsx}"],
+    languageOptions: {
+      parser: babelParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021,
+        ...globals.jest,
+        ...(reactNativePlugin.environments?.["react-native"]?.globals ?? {}),
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+        // Makes logger function available everywhere. Else eslint will complain of undef-var.
+        logger: "readonly",
+        globalProps: "readonly",
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      "react-native": reactNativePlugin,
+      import: importPlugin,
+      "react-hooks": reactHooksPlugin,
+      "@bigbinary/neeto": neetoPlugin,
+      "unused-imports": unusedImportsPlugin,
+      prettier: prettierPlugin,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+      "import/resolver": {
+        "babel-module": {
+          root: ["."],
+          alias: aliases,
+        },
+      },
+      "react-native/style-sheet-object-names": ["StyleSheet"],
+    },
+    rules: {
+      // Disable stylistic rules that conflict with Prettier, then let
+      // prettier/prettier report formatting drift.
+      ...prettierConfig.rules,
+      "prettier/prettier": "error",
+
+      "@bigbinary/neeto/no-dangling-constants": 2,
+      "@bigbinary/neeto/no-redundant-string-templates": 2,
+      "import/no-unresolved": 2,
+      "require-await": 2,
+      "import/no-anonymous-default-export": 2,
+      "no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          caughtErrors: "all",
+        },
+      ],
+      "no-undef": "error",
+      // Dont use console statements. Use logger which babel will remove during bundling.
+      "no-console": "error",
+      "consistent-return": "error",
+      "padding-line-between-statements": [
+        "error",
+        { blankLine: "always", prev: "if", next: ["if", "return"] },
+        { blankLine: "always", prev: "*", next: "return" },
+        {
+          blankLine: "always",
+          prev: [
+            "block",
+            "multiline-block-like",
+            "function",
+            "iife",
+            "multiline-const",
+            "multiline-expression",
+          ],
+          next: ["function", "iife", "multiline-const", "multiline-expression"],
+        },
+      ],
+      curly: ["error", "multi-line"],
+      "no-else-return": "error",
+      "comma-dangle": [
+        "error",
+        {
+          arrays: "always-multiline",
+          objects: "always-multiline",
+          imports: "always-multiline",
+          exports: "always-multiline",
+          functions: "never",
+        },
+      ],
+      "prefer-const": "error",
+      eqeqeq: "error",
+      "no-unsafe-optional-chaining": "error",
+      "unused-imports/no-unused-imports": "error",
+      "no-nested-ternary": "warn",
+      "arrow-body-style": ["error", "as-needed"],
+      "prefer-template": "error",
+      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+      "object-shorthand": [
+        "error",
+        "always",
+        { avoidQuotes: true, ignoreConstructors: true },
+      ],
+      "prefer-arrow-callback": ["error", { allowUnboundThis: true }],
+      "no-duplicate-imports": ["error", { includeExports: true }],
+      "no-implicit-coercion": ["error", { allow: ["!!"] }],
+      "no-var": "error",
+
+      // Promise hygiene.
+      "promise/prefer-await-to-then": 2,
+      "promise/no-nesting": 2,
+      "promise/prefer-await-to-callbacks": 2,
+      "promise/no-new-statics": "error",
+
+      // Imports.
+      "import/order": [
+        "error",
+        {
+          "newlines-between": "always",
+          alphabetize: { order: "asc", caseInsensitive: true },
+          warnOnUnassignedImports: true,
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "index",
+            "sibling",
+            "parent",
+            "object",
+            "type",
+          ],
+          pathGroups: [
+            {
+              pattern: "react+(-native|)",
+              group: "external",
+              position: "before",
+            },
+          ],
+          // Ignore react imports so that they're always ordered to the top of the file.
+          pathGroupsExcludedImportTypes: ["react", "react-native"],
+        },
+      ],
+      "import/prefer-default-export": "off",
+      "import/no-cycle": ["error", { maxDepth: 1, ignoreExternal: true }],
+      "import/no-useless-path-segments": ["error", { noUselessIndex: true }],
+      "import/export": "error",
+      "import/no-mutable-exports": "error",
+      "import/first": "error",
+      "import/newline-after-import": ["error", { count: 1 }],
+      "import/extensions": [
+        "error",
+        "never",
+        {
+          ignorePackages: true,
+          pattern: { json: "always", mp3: "always" },
+        },
+      ],
+
+      // React.
+      "react/prop-types": "off",
+      "react/no-unescaped-entities": "off",
+      "react/display-name": "error",
+      "react/no-access-state-in-setstate": "error",
+      "react/no-danger": "warn",
+      "react/no-danger-with-children": "warn",
+      "react/no-unused-prop-types": "error",
+      "react/jsx-key": "error",
+      "react/jsx-no-duplicate-props": "error",
+      "react/jsx-no-undef": "error",
+      "react/jsx-pascal-case": [
+        "error",
+        { allowNamespace: true, ignore: ["FAB"] },
+      ],
+      "react/jsx-uses-react": "error",
+      "react/jsx-uses-vars": "error",
+      "react/jsx-no-useless-fragment": ["error", { allowExpressions: true }],
+      "react/function-component-definition": [
+        "error",
+        {
+          namedComponents: "arrow-function",
+          unnamedComponents: "arrow-function",
+        },
+      ],
+      "react/self-closing-comp": [
+        "error",
+        {
+          component: true,
+          html: true,
+        },
+      ],
+      "react/jsx-wrap-multilines": [
+        "error",
+        {
+          declaration: "parens-new-line",
+          assignment: "parens-new-line",
+          return: "parens-new-line",
+          arrow: "parens-new-line",
+          condition: "parens-new-line",
+          logical: "parens-new-line",
+          prop: "ignore",
+        },
+      ],
+      "react/jsx-filename-extension": ["error", { allow: "as-needed" }],
+      "react/jsx-boolean-value": "error",
+      "react/hook-use-state": "error",
+      "react/jsx-sort-props": [
+        "error",
+        {
+          callbacksLast: true,
+          shorthandFirst: true,
+          multiline: "last",
+          reservedFirst: false,
+          locale: "auto",
+        },
+      ],
+      "react/jsx-curly-brace-presence": [
+        "error",
+        {
+          props: "never",
+          children: "never",
+          propElementValues: "always",
+        },
+      ],
+      "react/jsx-newline": ["error", { prevent: true }],
+      // allowAsProps: React Navigation (tabBarIcon) and neetoui-rn
+      // (SuffixIcon, RightComponent) take render-prop components.
+      "react/no-unstable-nested-components": ["error", { allowAsProps: true }],
+
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+
+      "react-native/no-unused-styles": 2,
+      "react-native/split-platform-components": 1,
+      "react-native/no-inline-styles": 1,
+      "react-native/no-raw-text": 0,
+      "react-native/no-single-element-style-arrays": 1,
+    },
+  },
+  {
+    files: ["*.config.js", ".prettierrc.js", "babel.config.js"],
+    rules: {
+      "import/order": "off",
+      "react-hooks/rules-of-hooks": "off",
+    },
+  },
+];

package/eslint-config/rules/no-dangling-constants.js

@@ -0,0 +1,35 @@
+// Vendored from neetozone/eslint-plugin-neeto (src/lib/rules/constants/
+// no-dangling-constants.js) so the plugin — and its hard dependency on
+// neeto-commons-frontend — is not needed for the two rules this app uses.
+const path = require("path");
+
+const CONSTANT_CASE_PATTERN = /^[A-Z0-9_]*$/;
+const CONSTANTS_FILES = [/constants\//, /.*constants.(js|jsx)$/i];
+
+const isConstantsFile = filename =>
+  CONSTANTS_FILES.some(pattern => pattern.test(path.resolve(filename)));
+
+module.exports = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      url: "https://github.com/neetozone/eslint-plugin-neeto/blob/main/docs/src/rules/no-dangling-constants.md",
+      description:
+        "Indicates that any constant outside a constant.[js|jsx] file should be moved to a constant.[js|jsx] file.",
+    },
+  },
+  create: context => ({
+    VariableDeclaration(node) {
+      if (isConstantsFile(context.filename)) return;
+      if (node.kind !== "const") return;
+
+      const name = node.declarations[0]?.id?.name;
+      if (!name || !CONSTANT_CASE_PATTERN.test(name)) return;
+
+      context.report({
+        node,
+        message: `Move the constant ${name} to a constants.js file.`,
+      });
+    },
+  }),
+};

package/eslint-config/rules/no-redundant-string-templates.js

@@ -0,0 +1,85 @@
+// Vendored from neetozone/eslint-plugin-neeto (src/lib/rules/
+// no-redundant-string-templates/) so the plugin — and its hard dependency on
+// neeto-commons-frontend — is not needed for the two rules this app uses.
+const CHARACTERS_TO_IGNORE_PATTERN = /[\r\n\t\f\v&><}"{'`\\]/;
+const ENDS_WITH_SPACES_PATTERN = / +$/;
+const STARTS_OR_ENDS_WITH_SPACES_PATTERN = /^ +| +$/;
+const STARTS_WITH_SPACES_PATTERN = /^ +/;
+
+const getCode = (context, node) =>
+  context.sourceCode.text.slice(node.range[0], node.range[1]);
+
+const doQuasisHaveSpecialCharacters = node =>
+  node.quasis.some(quasi =>
+    CHARACTERS_TO_IGNORE_PATTERN.test(quasi.value.cooked)
+  );
+
+const isExpressionOnly = node =>
+  node.expressions.length === 1 &&
+  node.quasis.length === 2 &&
+  node.quasis[0].value.cooked === "" &&
+  node.quasis[1].value.cooked === "";
+
+const isInsideJsxElement = node =>
+  node.parent?.type === "JSXExpressionContainer" &&
+  ["JSXElement", "JSXFragment"].includes(node.parent.parent?.type) &&
+  !STARTS_WITH_SPACES_PATTERN.test(node.quasis[0]?.value.cooked ?? "") &&
+  !ENDS_WITH_SPACES_PATTERN.test(
+    node.quasis[node.quasis.length - 1]?.value.cooked ?? ""
+  );
+
+const isReplaceableQuasisOnly = node =>
+  node.expressions.length === 0 &&
+  node.quasis.length === 1 &&
+  !STARTS_OR_ENDS_WITH_SPACES_PATTERN.test(node.quasis[0].value.cooked);
+
+const getTemplateContent = (context, node) =>
+  node.expressions.reduce(
+    (acc, expression, index) =>
+      `${acc}{${getCode(context, expression)}}${
+        node.quasis[index + 1].value.cooked
+      }`,
+    node.quasis[0].value.cooked
+  );
+
+const canBeReplacedWith = fix => `Can be replaced with: ${fix}`;
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      url: "https://github.com/neetozone/eslint-plugin-neeto/blob/main/docs/src/rules/no-redundant-string-templates.md",
+      description:
+        "Prevent usage of string templates as direct children of JSX components.",
+    },
+    fixable: "code",
+  },
+  create: context => ({
+    TemplateLiteral(node) {
+      if (doQuasisHaveSpecialCharacters(node)) return;
+
+      if (isExpressionOnly(node)) {
+        const fix = getCode(context, node.expressions[0]);
+        context.report({
+          node,
+          message: canBeReplacedWith(fix),
+          fix: fixer => fixer.replaceText(node, fix),
+        });
+      } else if (isInsideJsxElement(node)) {
+        const fix = getTemplateContent(context, node);
+        context.report({
+          node,
+          message: canBeReplacedWith(fix),
+          fix: fixer => fixer.replaceText(node.parent, fix),
+        });
+      } else if (isReplaceableQuasisOnly(node)) {
+        const fix = `"${node.quasis[0].value.cooked}"`;
+        context.report({
+          node,
+          message: canBeReplacedWith(fix),
+          fix: fixer => fixer.replaceText(node, fix),
+        });
+      }
+    },
+  }),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-rn",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "main": ".",
   "files": [
     "api",
@@ -20,7 +20,6 @@
     "screens",
     "assets",
     "utils",
-    "index.d.ts",
     "eslint-config"
   ],
   "husky": {