@bigbinary/neeto-commons-frontend 2.0.25 → 2.0.26

package/configs/eslint/react.js

@@ -0,0 +1,92 @@
+module.exports = {
+  rules: {
+    // not-auto-fixable: Prevent missing props validation in a React component definition.
+    "react/prop-types": "off",
+    // not-auto-fixable: Detect unescaped HTML entities, which might represent malformed tags.
+    "react/no-unescaped-entities": "off",
+    // not-auto-fixable: Prevent missing displayName in a React component definition. Useful when using React extensions in browser and checking for component name.
+    "react/display-name": "error",
+    // not-auto-fixable: Reports when this.state is accessed within setState.
+    "react/no-access-state-in-setstate": "error",
+    // not-auto-fixable: Prevent usage of dangerous JSX props. Currently jam3 plugin will take care of handling this.
+    "react/no-danger": "off",
+    // not-auto-fixable: Report when a DOM element is using both children and dangerouslySetInnerHTML.
+    "react/no-danger-with-children": "warn",
+    // not-auto-fixable: Prevent definitions of unused prop types.
+    "react/no-unused-prop-types": "error",
+    // not-auto-fixable: Report missing key props in iterators/collection literals. Important rule!
+    "react/jsx-key": ["error", { checkFragmentShorthand: true }],
+    // not-auto-fixable: Enforce no duplicate props.
+    "react/jsx-no-duplicate-props": "error",
+    // not-auto-fixable: Disallow undeclared variables in JSX.
+    "react/jsx-no-undef": "error",
+    // not-auto-fixable: Enforce PascalCase for user-defined JSX components.
+    "react/jsx-pascal-case": ["error", { allowNamespace: true }],
+    // not-auto-fixable: Prevent React to be incorrectly marked as unused.
+    "react/jsx-uses-react": "error",
+    // not-auto-fixable: Prevent variables used in JSX to be marked as unused.
+    "react/jsx-uses-vars": "error",
+    // not-auto-fixable: Ensures https://reactjs.org/docs/hooks-rules.html.
+    "react-hooks/rules-of-hooks": "error",
+    // not-auto-fixable: Ensures https://reactjs.org/docs/hooks-rules.html - Checks effect dependencies.
+    "react-hooks/exhaustive-deps": "warn",
+    // auto-fixable: A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
+    "react/jsx-no-useless-fragment": ["error", { allowExpressions: true }],
+    // auto-fixable: Prefer arrow function expressions for component declaration.
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
+    // auto-fixable: Components without children can be self-closed to avoid unnecessary extra closing tag.
+    "react/self-closing-comp": [
+      "error",
+      {
+        component: true,
+        html: true,
+      },
+    ],
+    // auto-fixable: Wrapping multiline JSX in parentheses can improve readability and/or convenience.
+    "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",
+      },
+    ],
+    // not-auto-fixable: Make sure files containing JSX is having .jsx extension.
+    "react/jsx-filename-extension": ["error", { allow: "as-needed" }],
+    // auto-fixable: Omit mentioning the "true" value if it can be implicitly understood in props.
+    "react/jsx-boolean-value": "error",
+    // auto-fixable: Partially fixable. Make sure the state and setter have symmertic naming.
+    "react/hook-use-state": "error",
+    // auto-fixable: Shorthand notations should always be at the top and also enforce props alphabetical sorting.
+    "react/jsx-sort-props": [
+      "error",
+      {
+        callbacksLast: true,
+        shorthandFirst: true,
+        multiline: "last",
+        reservedFirst: false,
+        locale: "auto",
+      },
+    ],
+    // auto-fixable: Disallow unnecessary curly braces in JSX props and/or children.
+    "react/jsx-curly-brace-presence": [
+      "error",
+      {
+        props: "never",
+        children: "never",
+        // JSX prop values that are JSX elements should be enclosed in braces.
+        propElementValues: "always",
+      },
+    ],
+  },
+};

package/configs/prettier.js

@@ -0,0 +1,16 @@
+module.exports = {
+  tailwindConfig: "./tailwind.config.js",
+  trailingComma: "es5",
+  arrowParens: "avoid",
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  quoteProps: "as-needed",
+  jsxSingleQuote: false,
+  singleQuote: false,
+  bracketSpacing: true,
+  bracketSameLine: false,
+  proseWrap: "always",
+  endOfLine: "lf",
+};

package/configs/tailwind.js

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

package/configs/webpack/helpers/customize-default-rules.js

@@ -0,0 +1,57 @@
+/*
+  Customize default webpack rules/loaders configuration.
+  A custom helpers till shakapacker introduces the feature.
+  Track the following the issues to get the status of feature development in shakapacker:
+  https://github.com/shakacode/shakapacker/issues/80
+  https://github.com/shakacode/shakapacker/issues/87
+  Usage:
+    const customizeWebpackDefaultRules = require("./helpers/customize-default-rules");
+    const defaultRules = {
+      "asset/resource": {
+        test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2)$/
+      },
+      "asset/source": {
+        exclude: /\.(js|mjs|jsx|ts|tsx|js)$/,
+      },
+    };
+    const customWebpackConfig = customizeWebpackDefaultRules(webpackConfig, defaultRules);
+  NOTE:
+    - Check if the option to output default configuration is introduced or not before upgrading further.
+    - Update the defaultRuleType constant whenever shakapacker introduces a new default rule/loader.
+*/
+const {
+  findBy,
+  findIndexBy,
+} = require("@bigbinary/neeto-commons-frontend/pure");
+
+const modifyDefaultRulesConfig = (webpackConfig, rules = {}) => {
+  const defaultRuleType = ["asset/resource", "asset/source"];
+
+  Object.keys(rules).forEach(ruleName => {
+    if (defaultRuleType.includes(ruleName)) {
+      const rule = findBy(
+        { type: "asset/resource" },
+        webpackConfig.module.rules
+      );
+
+      const rulePosition = findIndexBy(
+        { type: ruleName },
+        webpackConfig.module.rules
+      );
+
+      Object.keys(rules[ruleName]).forEach(attribute => {
+        if (rule[attribute] !== undefined) {
+          rule[attribute] = rules[ruleName][attribute];
+        }
+      });
+
+      webpackConfig.module.rules[rulePosition] = rule;
+    } else {
+      throw new Error("Invalid default rule type");
+    }
+  });
+
+  return webpackConfig;
+};
+
+module.exports = modifyDefaultRulesConfig;

package/configs/webpack/index.js

@@ -0,0 +1,41 @@
+const process = require("process");
+
+const Dotenv = require("dotenv-webpack");
+const { webpackConfig, merge } = require("shakapacker");
+const webpack = require("webpack");
+
+const customizeWebpackDefaultRules = require("./helpers/customize-default-rules");
+const resolve = require("./resolve");
+const rules = require("./rules");
+
+const dotEnvFileSuffix =
+  process.env.NODE_ENV === "production" ? "" : `.${process.env.NODE_ENV}`;
+
+const commonOptions = {
+  infrastructureLogging: { level: "warn" },
+  devtool: "source-map",
+  resolve,
+  module: { rules },
+  plugins: [
+    new webpack.ProvidePlugin({ process: "process/browser" }),
+    new Dotenv({
+      path: `./.env${dotEnvFileSuffix}`,
+      systemvars: true,
+      silent: true,
+    }),
+  ],
+};
+
+// This rule is causing issues to react-svg-loader
+const defaultRules = {
+  "asset/resource": {
+    test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2)$/,
+  },
+};
+
+const customWebpackConfig = customizeWebpackDefaultRules(
+  webpackConfig,
+  defaultRules
+);
+
+module.exports = merge(customWebpackConfig, commonOptions);

package/configs/webpack/resolve.js

@@ -0,0 +1,47 @@
+const path = require("path");
+
+const absolutePath = basePath =>
+  path.resolve(__dirname, "../../../../../", `app/javascript/${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",
+    images: path.resolve(__dirname, "../../../../../", "app/assets/images"),
+  },
+  extensions: [
+    ".ts",
+    ".mjs",
+    ".js",
+    ".sass",
+    ".scss",
+    ".css",
+    ".module.sass",
+    ".module.scss",
+    ".module.css",
+    ".png",
+    ".svg",
+    ".gif",
+    ".jpeg",
+    ".jpg",
+  ],
+  fallback: {
+    util: require.resolve("util/"),
+    url: require.resolve("url/"),
+    fs: false,
+  },
+};

package/configs/webpack/rules.js

@@ -0,0 +1,43 @@
+module.exports = [
+  {
+    test: /\.svg$/i,
+    use: [
+      {
+        loader: "@svgr/webpack",
+        options: {
+          svgoConfig: { plugins: ["preset-default"] },
+        },
+      },
+    ],
+  },
+  {
+    test: /\.ts$/,
+    exclude: /node_modules/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: ["@babel/preset-env", "@babel/preset-typescript"],
+      },
+    },
+  },
+  {
+    test: /\.mp3$/,
+    use: [
+      "babel-loader",
+      {
+        loader: "file-loader",
+        options: {
+          query: {
+            name: "static/media/[name].[hash:8].[ext]",
+          },
+        },
+      },
+    ],
+  },
+  {
+    test: /\.m?js$/,
+    resolve: {
+      fullySpecified: false, // allows webpack to ignore some package rules as the Strict EcmaScript Module mode.
+    },
+  },
+];

package/initializers.cjs.js

@@ -1142,9 +1142,9 @@ var neetoCommons = {
 			},
 			body: {
 				values: {
-					embedCode: "<p>Hi,</p> <p>We are going to use {{selectedWidgets}}. Please find the code snippet for the installation of the {{selectedWidgets}} widget. You can find the documentation regarding this at <configureLink>{{neetoKbUrl}}</configureLink>.</p> <p>If you still need help then send an email to <mail>{{helpEmail}}</mail>.</p>",
-					userIdentity: "Hey there. This is the object structure that you can use to specify the user identity for neetoWidget. You can find the documentation at - {{userIdentityKbUrl}}.",
-					sessionContext: "Hey there. This is the object structure that you can use to specify the contextual values for neetoReplay sessions. You can find the documentation at - {{sessionContextKbUrl}}."
+					embedCode: "<p>Hi,</p> <p>We are going to use {{selectedWidgets}}.</p> <p>Please find the code snippet for the installation of the {{selectedWidgets}} widget.</p> <p>You can find the documentation regarding this at <configureLink>{{neetoKbUrl}}</configureLink>.</p> <p>If you still need help then send an email to <mail>{{helpEmail}}</mail>.</p>",
+					userIdentity: "<p>Hi,</p> <p>This is the object structure that you can use to specify the user identity for neetoWidget.</p> <p>You can find the documentation at <configureLink>{{userIdentityKbUrl}}</configureLink>.</p>",
+					sessionContext: "<p>Hi,</p> <p>This is the object structure that you can use to specify the contextual values for neetoReplay sessions.</p> <p>You can find the documentation at <configureLink>{{sessionContextKbUrl}}</configureLink>.</p>"
 				}
 			},
 			actions: {

package/initializers.js

@@ -1130,9 +1130,9 @@ var neetoCommons = {
 			},
 			body: {
 				values: {
-					embedCode: "<p>Hi,</p> <p>We are going to use {{selectedWidgets}}. Please find the code snippet for the installation of the {{selectedWidgets}} widget. You can find the documentation regarding this at <configureLink>{{neetoKbUrl}}</configureLink>.</p> <p>If you still need help then send an email to <mail>{{helpEmail}}</mail>.</p>",
-					userIdentity: "Hey there. This is the object structure that you can use to specify the user identity for neetoWidget. You can find the documentation at - {{userIdentityKbUrl}}.",
-					sessionContext: "Hey there. This is the object structure that you can use to specify the contextual values for neetoReplay sessions. You can find the documentation at - {{sessionContextKbUrl}}."
+					embedCode: "<p>Hi,</p> <p>We are going to use {{selectedWidgets}}.</p> <p>Please find the code snippet for the installation of the {{selectedWidgets}} widget.</p> <p>You can find the documentation regarding this at <configureLink>{{neetoKbUrl}}</configureLink>.</p> <p>If you still need help then send an email to <mail>{{helpEmail}}</mail>.</p>",
+					userIdentity: "<p>Hi,</p> <p>This is the object structure that you can use to specify the user identity for neetoWidget.</p> <p>You can find the documentation at <configureLink>{{userIdentityKbUrl}}</configureLink>.</p>",
+					sessionContext: "<p>Hi,</p> <p>This is the object structure that you can use to specify the contextual values for neetoReplay sessions.</p> <p>You can find the documentation at <configureLink>{{sessionContextKbUrl}}</configureLink>.</p>"
 				}
 			},
 			actions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -16,7 +16,8 @@
     "initializers.*",
     "react-utils.*",
     "utils.*",
-    "pure.*"
+    "pure.*",
+    "configs"
   ],
   "lint-staged": {
     "**/*.{js,jsx,json}": [
@@ -39,7 +40,8 @@
     "./initializers": {
       "import": "./initializers.js",
       "require": "./initializers.cjs.js"
-    }
+    },
+    "./configs/*": "./configs/*"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.18.2",
@@ -60,9 +62,10 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "13.5.0",
     "antd": "4.18.7",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.13",
     "axios": "^0.27.2",
     "babel-jest": "27.0.6",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "dayjs": "1.11.1",
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
@@ -100,21 +103,26 @@
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "yup": "^0.32.11",
-    "zustand": "^4.1.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
+    "zustand": "^4.1.2"
   },
   "dependencies": {},
   "peerDependencies": {
     "@bigbinary/neeto-icons": "^1.8.35",
     "@bigbinary/neetoui": "^4.1.1",
     "@honeybadger-io/react": "2.0.1",
+    "@svgr/webpack": "^6.5.1",
     "antd": "4.18.7",
+    "autoprefixer": "^10.4.13",
     "axios": "^0.27.2",
     "dayjs": "1.11.1",
+    "dotenv-webpack": "^8.0.1",
     "formik": "^2.2.9",
     "i18next": "21.7.0",
     "js-logger": "^1.6.1",
     "mixpanel-browser": "^2.45.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-env": "^7.8.3",
     "ramda": "^0.28.0",
     "react": "^17.0.2",
     "react-helmet": "^6.1.0",
@@ -122,6 +130,9 @@
     "react-query": "^3.39.2",
     "react-router-dom": "^5.2.0",
     "react-toastify": "^9.0.8",
+    "shakapacker": "^6.5.5",
+    "tailwindcss": "^3.2.4",
+    "webpack": "^5.75.0",
     "yup": "^0.32.11"
   }
 }