@bigbinary/neeto-commons-frontend 2.0.36 → 2.0.38

package/README.md

@@ -47,6 +47,9 @@ Category
 - [useLocalStorage](./docs/react/hooks.md#uselocalstorage)
 - [useOnClickOutside](./docs/react/hooks.md#useonclickoutside)
 - [useFieldSubmit](./docs/react/hooks.md#usefieldsubmit)
+- [useDisplayErrorPage](./docs/react/hooks.md#usedisplayerrorpage)
+- [useErrorDisplayStore](./docs/react/hooks.md#useerrordisplaystore)
+- [useHotKeys](./docs/react/hooks.md#useHotKeys)
 - [PrivateRoute](./docs/react/components.md#privateroute)
 - [HoneybadgerErrorBoundary](./docs/react/components.md#honeybadgererrorboundary)
 - [Sidebar](./docs/react/components.md#sidebar)
@@ -60,11 +63,13 @@ Category
 - [BrowserSupport](./docs/react/components.md#browsersupport)
 - [IpRestriction](./docs/react/components.md#iprestriction)
 - [PublishBlock](./docs/react/components.md#publishblock)
+- [KeyboardShortcutsPane](./docs/react/components.md#keyboardshortcutspane)
 - [withImmutableActions](./docs/react/utils.md#withimmutableactions)
 - [withTitle](./docs/react/utils.md#withtitle)
 - [registerBrowserNotifications](./docs/react/utils.md#registerbrowsernotifications)
 - [destroyBrowserSubscription](./docs/react/utils.md#destroybrowsersubscription)
 - [handleMetaClick](./docs/react/utils.md#handlemetaclick)
+- [isMetaKeyPressed](./docs/react/utils.md#ismetakeypressed)
 
 </td>
 <td  style="vertical-align: top;">

package/configs/babel.js

@@ -33,6 +33,7 @@ module.exports = function (api) {
       isTestEnv
         ? "babel-plugin-dynamic-import-node" // tests run in node environment
         : "@babel/plugin-syntax-dynamic-import",
+      ["istanbul", { useInlineSourceMaps: false }],
       isProductionEnv && [
         "babel-plugin-transform-react-remove-prop-types",
         { removeImport: true },

package/configs/eslint/helpers/index.js

@@ -1,62 +1,78 @@
 const fs = require("fs");
 const path = require("path");
 
-const { mergeDeepLeft } = require("ramda");
+const { mergeDeepLeft, mergeLeft, keys } = require("ramda");
 
 const loadJS = jsPath => {
   try {
-    return require(path.resolve(__dirname, "../../../..", jsPath));
+    return require(jsPath);
   } catch {
     return {};
   }
 };
 
-const buildPathGroupsBasedOnWebpackAliases = ({
-  customJSRoot = "app/javascript/",
-  customAliasPath = "config/webpack/resolve.js",
-}) => {
-  const rootOfProject = `${__dirname}/../../../../../../`;
+const doesFileExist = filePath =>
+  fs.existsSync(filePath) && fs.lstatSync(filePath).isFile();
+
+const generateAllPathsInsideDir = dirPath => {
+  const files = fs.readdirSync(dirPath, { withFileTypes: true });
 
-  const isFile = filePath =>
-    fs.existsSync(filePath) && fs.lstatSync(filePath).isFile();
+  return files.flatMap(file => {
+    const filePath = path.join(dirPath, file.name);
 
-  const isRailsProject = isFile(`${rootOfProject}Gemfile`);
+    return file.isDirectory() ? generateAllPathsInsideDir(filePath) : filePath;
+  });
+};
 
-  const emptyPathGroups = [];
+const generatePathGroupsFromAssets = assetsPath => {
+  if (!fs.existsSync(assetsPath)) return [];
 
-  if (!isRailsProject) return emptyPathGroups;
+  return generateAllPathsInsideDir(assetsPath).map(absPath => ({
+    pattern: absPath.replace(assetsPath, "").split(".")[0],
+    group: "internal",
+  }));
+};
 
-  const projectResolve = loadJS(rootOfProject + customAliasPath);
+const buildPathGroupsBasedOnWebpackAliases = ({
+  customAliasPath = "config/webpack/resolve.js",
+}) => {
+  const rootOfProject = path.join(__dirname, "../../../../../../");
+  const projectResolve = loadJS(path.join(rootOfProject, customAliasPath));
   const commonResolve = loadJS(
-    `${rootOfProject}node_modules/@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js`
+    path.join(
+      rootOfProject,
+      "node_modules/@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js"
+    )
   );
-  const { alias } = mergeDeepLeft(projectResolve, commonResolve);
-
-  const railsJSFilesRoot = rootOfProject + customJSRoot;
-
-  const pathGroups = Object.entries(alias).map(([name, path]) => {
-    // sometimes alias might be already resolved to full absolute path
-    const isAlreadyAnAbsolutePath =
-      path.includes("cypress-tests/") || path.includes("app/");
 
-    const absolutePath = isAlreadyAnAbsolutePath
-      ? path
-      : `${railsJSFilesRoot}${path}`;
+  const { dependencies = [], devDependencies = [] } = loadJS(
+    path.join(rootOfProject, "package.json")
+  );
+  const packages = keys(mergeLeft(dependencies, devDependencies));
+  const { alias = {}, extensions = [] } = mergeDeepLeft(
+    projectResolve,
+    commonResolve
+  );
 
-    const wildCard =
-      isFile(`${absolutePath}.js`) || isFile(`${absolutePath}.jsx`)
-        ? ""
-        : "/**";
+  const pathGroups = Object.entries(alias).flatMap(([pattern, aliasPath]) => {
+    const group = packages.includes(aliasPath) ? "external" : "internal";
+    const isFile = ["", ...extensions].some(extension =>
+      doesFileExist(`${aliasPath}${extension}`)
+    );
 
-    let group = "internal";
-    if (name === "neetoui") {
-      group = "external";
-    }
+    if (isFile) return { pattern, group };
 
-    return { pattern: `${name}${wildCard}`, group };
+    return [
+      { pattern, group },
+      { pattern: `${pattern}/**`, group },
+    ];
   });
 
-  return pathGroups;
+  const pathGroupsFromAssets = generatePathGroupsFromAssets(
+    path.join(rootOfProject, "app/assets/")
+  );
+
+  return pathGroups.concat(pathGroupsFromAssets);
 };
 
 module.exports = { buildPathGroupsBasedOnWebpackAliases };

package/configs/nanos/eslint/helpers/index.js

@@ -0,0 +1,49 @@
+const fs = require("fs");
+const path = require("path");
+
+const { mergeDeepLeft, mergeLeft, keys } = require("ramda");
+
+const rootOfTheProject = path.join(__dirname, "../../../../../../../");
+
+const loadJS = jsPath => {
+  try {
+    return require(path.join(rootOfTheProject, jsPath));
+  } catch {
+    return {};
+  }
+};
+
+const doesFileExist = filePath =>
+  fs.existsSync(filePath) && fs.lstatSync(filePath).isFile();
+
+const buildPathGroupsBasedOnWebpackAliases = ({
+  customAliasPath = "resolve.js",
+}) => {
+  const projectResolve = loadJS(customAliasPath);
+  const commonResolve = loadJS(
+    "node_modules/@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js"
+  );
+
+  const { dependencies = [], devDependencies = [] } = loadJS("package.json");
+  const packages = keys(mergeLeft(dependencies, devDependencies));
+  const { alias = {}, extensions = [] } = mergeDeepLeft(
+    projectResolve,
+    commonResolve
+  );
+
+  return Object.entries(alias).flatMap(([pattern, aliasPath]) => {
+    const group = packages.includes(aliasPath) ? "external" : "internal";
+    const isFile = ["", ...extensions].some(extension =>
+      doesFileExist(`${aliasPath}${extension}`)
+    );
+
+    if (isFile) return { pattern, group };
+
+    return [
+      { pattern, group },
+      { pattern: `${pattern}/**`, group },
+    ];
+  });
+};
+
+module.exports = { buildPathGroupsBasedOnWebpackAliases };

package/configs/nanos/eslint/imports/order.js

@@ -0,0 +1,18 @@
+const { assocPath } = require("ramda");
+
+const commonConfig = require("../../../eslint/imports/order");
+const { buildPathGroupsBasedOnWebpackAliases } = require("../helpers");
+
+const pathGroups = buildPathGroupsBasedOnWebpackAliases({});
+const pathGroupForKeepingReactImportsAtTop = {
+  pattern: "react+(-native|)",
+  group: "external",
+  position: "before",
+};
+pathGroups.push(pathGroupForKeepingReactImportsAtTop);
+
+module.exports = assocPath(
+  ["rules", "import/order", 1, "pathGroups"],
+  pathGroups,
+  commonConfig
+);

package/configs/nanos/eslint/index.js

@@ -0,0 +1,23 @@
+const { mergeLeft } = require("ramda");
+
+const commonConfiguration = require("../../eslint");
+
+const nanosConfiguration = {
+  extends: [
+    "plugin:@bigbinary/neeto/recommended",
+    "plugin:cypress/recommended",
+    "plugin:json/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/globals",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/nanos/eslint/imports/order",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/overrides",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/imports/enforced",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/react",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/promise",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/nanos/eslint/neeto",
+    "prettier",
+  ],
+};
+
+module.exports = mergeLeft(nanosConfiguration, commonConfiguration);

package/configs/nanos/eslint/neeto.js

@@ -0,0 +1,92 @@
+const path = require("path");
+
+const { mergeDeepLeft } = require("ramda");
+
+const rootOfTheProject = path.join(__dirname, "../../../../../../");
+const pathToTranslationFile = "src/translations/en.json";
+const pathToResolveFile = "resolve.js";
+const pathToJsConfigFile = "jsconfig.json";
+
+const loadJS = jsPath => {
+  try {
+    return require(path.join(rootOfTheProject, jsPath));
+  } catch {
+    return {};
+  }
+};
+
+const commonResolve = loadJS(
+  "node_modules/@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js"
+);
+const projectResolve = loadJS(pathToResolveFile);
+const en = loadJS(pathToTranslationFile);
+const resolve = mergeDeepLeft(projectResolve, commonResolve);
+
+module.exports = {
+  rules: {
+    "@bigbinary/neeto/file-name-and-export-name-standards": [
+      "warn",
+      {
+        basePath: path.join(rootOfTheProject, "src"),
+        default: {
+          filenameCase: "camelCase",
+          exportnameCase: "camelCase",
+        },
+        configs: [
+          {
+            filenameCase: "camelCase",
+            exportnameCase: "CONSTANT_CASE",
+            includes: ["/**/constants.{js,jsx}", "/**/constants/**"],
+          },
+          {
+            filenameCase: "camelCase",
+            includes: ["/**/utils.{js,jsx}", "/**/utils/**"],
+          },
+          {
+            filenameCase: "snake_case",
+            exportnameCase: "camelCase",
+            includes: "/apis/**",
+          },
+          {
+            filenameCase: "camelCase",
+            exportnameCase: "camelCase",
+            includes: "/channels/**",
+          },
+          {
+            filenameCase: "camelCase",
+            exportnameCase: "camelCase",
+            includes: "/**/hooks/**",
+          },
+          {
+            filenameCase: "camelCase",
+            includes: "/lib/**",
+          },
+          {
+            filenameCase: "camelCase",
+            exportnameCase: "camelCase",
+            includes: "/**/stores/**",
+          },
+          {
+            filenameCase: "PascalCase",
+            exportnameCase: "PascalCase",
+            includes: ["/components/**", "/*.jsx"],
+          },
+        ],
+      },
+    ],
+    "@bigbinary/neeto/no-axios-import-outside-apis": ["error", resolve.alias],
+    "@bigbinary/neeto/no-missing-localization": [
+      "error",
+      { name: "en.json", lng: "en", content: en },
+    ],
+    "@bigbinary/neeto/prefix-neeto-ui-import-alias": ["error", resolve.alias],
+    "@bigbinary/neeto/use-webpack-alias": ["error", resolve.alias],
+    "@bigbinary/neeto/webpack-aliases-and-jsconfig-paths-should-be-in-sync": [
+      "error",
+      {
+        jsconfigFilePath: path.join(rootOfTheProject, pathToJsConfigFile),
+        aliasFilePath: path.join(rootOfTheProject, pathToResolveFile),
+      },
+    ],
+  },
+};

package/configs/nanos/tailwind.js

@@ -0,0 +1,11 @@
+module.exports = {
+  important: true,
+  purge: {
+    enabled: process.env.NODE_ENV === "production",
+    content: [
+      "./{src,example}/**/*.{js,jsx}",
+      "./node_modules/@bigbinary/**/*.js",
+    ],
+    defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
+  },
+};

package/configs/nanos/webpack/resolve.js

@@ -0,0 +1,42 @@
+const path = require("path");
+
+const absolutePath = basePath =>
+  path.join(__dirname, "../../../../../../", basePath);
+
+module.exports = {
+  alias: {
+    apis: absolutePath("src/apis"),
+    assets: absolutePath("src/assets"),
+    components: absolutePath("src/components"),
+    hooks: absolutePath("src/hooks"),
+    reducers: absolutePath("src/reducers"),
+    routes: absolutePath("src/routes"),
+    stores: absolutePath("src/stores"),
+    translations: absolutePath("src/translations"),
+    utils: absolutePath("src/utils"),
+    src: absolutePath("src"),
+    neetoui: "@bigbinary/neetoui",
+    neetocommons: "@bigbinary/neeto-commons-frontend",
+    neetoicons: "@bigbinary/neeto-icons",
+    neetoteam: "@bigbinary/neeto-team-members-frontend",
+    neetoeditor: "@bigbinary/neeto-editor",
+    neetofilters: "@bigbinary/neeto-filters-frontend",
+  },
+  extensions: [
+    ".ts",
+    ".mjs",
+    ".js",
+    ".jsx",
+    ".sass",
+    ".scss",
+    ".css",
+    ".module.sass",
+    ".module.scss",
+    ".module.css",
+    ".png",
+    ".svg",
+    ".gif",
+    ".jpeg",
+    ".jpg",
+  ],
+};