Merge pull request #8 from zer0-os/develop

Release 0.1.0

.eslintignore

@@ -1,4 +1,7 @@
 node_modules
-out
-next.config.js
-tailwind.config.js
+dist
+dist-storybook
+jest.config.js
+jest.setup.ts
+babel.config.js
+lint-staged.config.js

.eslintrc

@@ -1,72 +1,107 @@
 {
-  // Configuration for JavaScript files
-  "extends": ["airbnb-base", "plugin:prettier/recommended"],
-  "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "singleQuote": false,
-        "semi": true,
-        "arrowParens": "always",
-        "printWidth": 120
-      }
-    ]
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "root": true,
+  "env": {
+    "browser": true,
+    "amd": true,
+    "node": true,
+    "jest": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   },
   "overrides": [
-    // Configuration for TypeScript files
     {
-      "files": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
-      "plugins": ["@typescript-eslint", "unused-imports"],
-      "extends": ["airbnb-typescript", "plugin:prettier/recommended"],
-      "parserOptions": {
-        "project": "./tsconfig.json"
-      },
-      "parser": "@typescript-eslint/parser",
+      "files": ["*.js", ",*.jsx", "*.ts", "*.tsx"],
       "rules": {
-        "prettier/prettier": [
-          "error",
-          {
-            "singleQuote": false,
-            "semi": true,
-            "arrowParens": "always",
-            "printWidth": 120
-          }
-        ],
-        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
-        "jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system
-        "react/require-default-props": "off", // Allow non-defined react props as undefined
-        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
-        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
-        "import/order": [
-          "error",
-          {
-            "groups": ["builtin", "external", "internal"],
-            "pathGroups": [
-              {
-                "pattern": "react",
-                "group": "external",
-                "position": "before"
-              }
-            ],
-            "pathGroupsExcludedImportTypes": ["react"],
-            "newlines-between": "always",
-            "alphabetize": {
-              "order": "asc",
-              "caseInsensitive": true
-            }
-          }
-        ],
-        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
-        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
-        "class-methods-use-this": "off", // _document.tsx use render method without `this` keyword
-        "@typescript-eslint/no-unused-vars": "off",
-        "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": [
-          "error",
-          {
-            "argsIgnorePattern": "^_"
-          }
-        ]
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "react/display-name": 0,
+        "import/no-cycle": 2,
+        "import/no-anonymous-default-export": "off",
+        "array-bracket-spacing": 0,
+        "arrow-body-style": [0, "always"],
+        "func-names": 0,
+        "react/jsx-quotes": 0,
+        "jsx-quotes": 0,
+        "react/prop-types": 0,
+        "space-infix-ops": 0,
+        "no-dupe-class-members": 1,
+        "no-useless-constructor": 0,
+        "prefer-template": 0,
+        "no-param-reassign": 0,
+        "react/no-did-update-set-state": 0,
+        "react/no-did-mount-set-state": 0,
+        "no-unused-vars": [1, { "args": "none" }],
+        "camelcase": 0,
+        "quotes": 0,
+        "no-confusing-arrow": 0,
+        "no-extra-boolean-cast": 0,
+        "spaced-comment": 0,
+        "comma-spacing": 0,
+        "comma-dangle": [1, "never"],
+        "no-extraneous-dependencies": 0,
+        "import/no-extraneous-dependencies": 0,
+        "import/first": 0,
+        "import/extensions": 0,
+        "no-underscore-dangle": 0,
+        "function-paren-newline": 0,
+        "react/jsx-filename-extension": 0,
+        "arrow-parens": 0,
+        "no-restricted-syntax": 0,
+        "no-lonely-if": 0,
+        "no-continue": 0,
+        "no-plusplus": 0,
+        "object-curly-newline": 0,
+        "jsx-a11y/anchor-is-valid": 0,
+        "react/jsx-curly-brace-presence": 0,
+        "react/no-string-refs": 0,
+        "jsx-a11y/no-autofocus": 0,
+        "jsx-a11y/no-static-element-interactions": 0,
+        "jsx-a11y/click-events-have-key-events": 0,
+        "jsx-a11y/iframe-has-title": 0,
+        "react/no-find-dom-node": 0,
+        "react/no-array-index-key": 0,
+        "no-console": 0,
+        "no-empty-pattern": 0,
+        "import/no-named-as-default": 0,
+        "class-methods-use-this": 0,
+        "react/no-danger": 0,
+        "jsx-a11y/no-noninteractive-element-interactions": 0,
+        "import/prefer-default-export": 0,
+        "react/jsx-wrap-multilines": 0,
+        "jsx-a11y/label-has-for": 0,
+        "no-bitwise": 0,
+        "import/newline-after-import": 0,
+        "react/no-children-prop": 0,
+        "no-useless-concat": 0,
+        "no-useless-return": 0,
+        "react/jsx-no-bind": 0,
+        "react/no-unescaped-entities": 0,
+        "no-useless-escape": 0,
+        "react/no-unused-state": 0,
+        "no-mixed-operators": 0,
+        "react/no-typos": 0,
+        "no-self-compare": 0,
+        "no-restricted-globals": 0,
+        "jsx-a11y/anchor-has-content": 0,
+        "no-alert": 0,
+        "react/sort-comp": 0,
+        "prefer-destructuring": 0,
+        "react/destructuring-assignment": 0,
+        "prefer-const": 0
       }
     }
   ]

.gitignore

@@ -1,4 +1,7 @@
 node_modules/
 build/
-storybook-static/
-dist/
+dist-storybook/
+dist/
+idea/
+.npmrc
+*.tgz

.npmignore

@@ -0,0 +1,5 @@
+/*
+!dist/**/*
+dist/**/*.test.js
+dist/**/*.test.d.ts
+dist/**/*.test.d.ts.map

.nvmrc

@@ -0,0 +1 @@
+16.13.2

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+dist-storybook
+.idea
+.vscode

.prettierrc

@@ -1,6 +1,18 @@
-{
-  "singleQuote": false,
-  "semi": true,
-  "arrowParens": "always",
-  "printWidth": 120
-}
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "auto"
+}

.scripts/exportStyles.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+const path = require('path');
+const fse = require('fs-extra');
+
+const exportStyles = () => {
+  console.log('\x1b[36m', `Copying styles to dist...`, '\x1b[0m');
+
+  const srcDir = path.resolve(__dirname, '../src/styles');
+  const destDir = path.resolve(__dirname, '../dist/styles');
+
+  fse.copySync(srcDir, destDir, { overwrite: true });
+
+  console.log('\x1b[36m', 'Successfully copied!', '\x1b[0m');
+};
+
+exportStyles();

.storybook/main.js

@@ -1,16 +1,31 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin').default;
+const componentsFolder = '../src/components/';
+
 module.exports = {
-  stories: ["../src/**/*.stories.tsx"],
-  addons: ["@storybook/addon-essentials"],
-  typescript: {
-    check: false,
-    checkOptions: {},
-    reactDocgen: "react-docgen-typescript",
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-    },
+  stories: [componentsFolder + '**/*.stories.tsx', componentsFolder + '.storybook/**/*.stories.tsx'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: 'webpack5'
   },
-  features: {
-    postcss: false,
+  typescript: {
+    check: true
   },
+  webpackFinal: async config => {
+    // Remove the existing css rule (fixes imports from modules)
+    config.module.rules = config.module.rules.filter(rule => rule.test.toString() !== '/\\.css$/');
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader']
+    });
+
+    config.module.rules.push({
+      test: /\.css$/i,
+      use: ['style-loader', 'css-loader']
+    });
+
+    config.plugins = [...(config.plugins || []), new TsconfigPathsPlugin()];
+
+    return config;
+  }
 };

.storybook/manager-head.html

@@ -0,0 +1,4 @@
+<link
+  rel="icon"
+  href="https://res.cloudinary.com/fact0ry-dev/image/upload/v1648061030/zero-assets/zer0-os/zero-logo-round.png"
+/>

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import { theme } from './theme';
+
+addons.setConfig({
+  theme,
+  panelPosition: 'right'
+});

.storybook/preview-head.html

@@ -1,2 +1,4 @@
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-  rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.js

@@ -1,15 +1,29 @@
-import React from "react";
-
-import { ZeroUIProvider } from "../src/providers/ZeroUIProvider";
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import ZUIProvider from '../src/ZUIProvider';
 
 export const decorators = [
-  (Story) => (
-    <ZeroUIProvider>
-      <Story />
-    </ZeroUIProvider>
-  ),
+  Story => {
+    return (
+      <MemoryRouter initialEntries={['/']}>
+        <ZUIProvider>
+          <Story />
+        </ZUIProvider>
+      </MemoryRouter>
+    );
+  }
 ];
 
 export const parameters = {
-  controls: { expanded: true },
+  previewTabs: {
+    canvas: {
+      title: 'Story',
+      hidden: false
+    }
+  },
+  controls: {
+    expanded: true
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  options: { showPanel: true }
 };

.storybook/theme.js

@@ -0,0 +1,6 @@
+import { create } from '@storybook/theming';
+
+export const theme = create({
+  base: 'light',
+  brandTitle: 'ZUI Storybook'
+});

.stylelintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+dist-storybook
+.yarn/cache

.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["stylelint-config-recommended-scss", "stylelint-config-prettier"],
+  "rules": {
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["export"]
+      }
+    ]
+  }
+}