Merge pull request #410 from mashmatrix/update-latest-lib

Update libs to latest

Author: stomita

.circleci/config.yml

@@ -2,18 +2,21 @@ version: 2.1
 
 defaults: &defaults
   docker:
-    - image: regviz/node-xcb
+    - image: cimg/node:16.14.2-browsers
   working_directory: ~/project
 
+orbs:
+  browser-tools: circleci/[email protected]
+
 jobs:
   install:
     <<: *defaults
     steps:
       - checkout
       - restore_cache:
           keys:
-            - yarn-lock-{{ checksum "yarn.lock" }}
-            - yarn-cache-{{ checksum "yarn.lock" }}
+            - yarn-lock-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
+            - yarn-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
       - run:
           name: Environemnt Variable Check
           command: |
@@ -27,11 +30,11 @@ jobs:
           name: Install Dependencies
           command: yarn install
       - save_cache:
-          key: yarn-lock-{{ checksum "yarn.lock" }}
+          key: yarn-lock-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
       - save_cache:
-          key: yarn-cache-{{ checksum "yarn.lock" }}
+          key: yarn-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
           paths:
             - /usr/local/share/.cache/yarn
       - persist_to_workspace:
@@ -83,6 +86,8 @@ jobs:
   test_visual:
     <<: *defaults
     steps:
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
       - attach_workspace:
           at: ~/
       - run:

.eslintrc.js

@@ -1,12 +1,15 @@
 module.exports = {
   'parser': '@typescript-eslint/parser',
   'extends': [
-    'airbnb',
-    'plugin:prettier/recommended',
-    'prettier/react',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:react/recommended',
+    'prettier',
   ],
   'plugins': [
     '@typescript-eslint',
+    'jsx-a11y',
   ],
   'parserOptions': {
     'sourceType': 'module',
@@ -16,61 +19,23 @@ module.exports = {
     'browser': true
   },
   'rules': {
-    'no-nested-ternary': 0,
-    'react/no-multi-comp': 0,
-    'react/jsx-no-bind': 0,
-    'react/jsx-filename-extension': [1, { 'extensions': ['.js', '.jsx', '.ts', '.tsx'] }],
-    'jsx-a11y/no-static-element-interactions': 0,
-    'class-methods-use-this': 0,
-    'react/no-unused-prop-types': 1,
-    'react/prop-types': 0,
-    'import/no-extraneous-dependencies': ['error', {
-      devDependencies: true,
-    }],
-    'import/no-unresolved': 0,
-    'import/named': 0,
-
-    'jsx-a11y/label-has-for': 0,
-
-    'no-await-in-loop': 0,
-    'no-restricted-syntax': [2,
-      {
-        'selector': 'ForInStatement',
-        'message': 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.'
-      },
-      {
-        'selector': 'LabeledStatement',
-        'message': 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.'
-      },
-      {
-        'selector': 'WithStatement',
-        'message': '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.'
-      }
-    ],
-    'no-return-assign': [2, 'except-parens'],
-    'import/no-cycle': 0,
-
-    // TODO: Fix or disable
-    'react/require-default-props': 1,
-    'react/destructuring-assignment': 0,
-    'react/no-find-dom-node': 1,
-    'react/no-array-index-key': 2,
-    'react/button-has-type': 2,
-    'jsx-a11y/click-events-have-key-events': 1,
-    'jsx-a11y/no-noninteractive-tabindex': 2,
-    'jsx-a11y/role-has-required-aria-props': 2,
-    'jsx-a11y/anchor-is-valid': 1,
-    'jsx-a11y/interactive-supports-focus': 2,
-    'jsx-a11y/label-has-associated-control': [2, { assert: 'either' }],
-
-    // For TypeScript
-    'camelcase': 0,
-    '@typescript-eslint/camelcase': 2,
-    'no-array-constructor': 0,
-    '@typescript-eslint/no-array-constructor': 2,
-    'no-unused-vars': 0,
-    '@typescript-eslint/no-unused-vars': 2,
-
-    '@typescript-eslint/no-unnecessary-type-assertion': 2,
+    // temp disabled - start
+    '@typescript-eslint/no-explicit-any': 1,
+    '@typescript-eslint/no-unsafe-assignment': 1,
+    '@typescript-eslint/no-unsafe-argument': 1,
+    '@typescript-eslint/no-unsafe-member-access': 1,
+    '@typescript-eslint/no-unsafe-call': 1,
+    '@typescript-eslint/no-unsafe-return': 1,
+    '@typescript-eslint/ban-ts-comment': 1,
+    '@typescript-eslint/ban-types': 1,
+    '@typescript-eslint/restrict-template-expressions': 1,
+    '@typescript-eslint/unbound-method': 1,
+    '@typescript-eslint/no-non-null-assertion': 1,
+    '@typescript-eslint/restrict-plus-operands': 1,
+    '@typescript-eslint/no-empty-function': 1,
+    'react/prop-types': 1,
+    'react/display-name': 1,
+    'react/no-deprecated': 1,
+    // tmp disabled - end
   }
 };

.storybook/addons.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../stories/**/*Stories.tsx'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
+    'storycap',
+  ],
+};

.storybook/config.js

@@ -1,9 +1,7 @@
 <script>
 (function() {
   var stylesheetUrl =
-    (/\.sbook\.io$/.test(location.hostname) ? "//mashmatrix.github.io/react-lightning-design-system" :
-     location.hostname === "mashmatrix.github.io" ? "/react-lightning-design-system" :
-     "") +
+     (location.hostname === "mashmatrix.github.io" ? "/react-lightning-design-system" : "") +
     "/assets/styles/salesforce-lightning-design-system.min.css";
   var link = document.createElement('link');
   link.href = stylesheetUrl;
@@ -15,10 +13,4 @@
 html {
   background: #fff;
 }
-.content-wrapper {
-  padding: 16px;
-}
-.content-wrapper > div > div:nth-child(2) {
-  padding: 16px;
-}
 </style>

.storybook/infoAddonDefaults.js

@@ -0,0 +1,22 @@
+import 'core-js/stable';
+import { withScreenshot } from 'storycap';
+import wrapSLDS from './wrapSLDS';
+
+let assetRoot;
+if (typeof location !== 'undefined' && location.hostname === 'mashmatrix.github.io') {
+  assetRoot = '//mashmatrix.github.io/react-lightning-design-system/assets';
+}
+
+const withSLDS = wrapSLDS({ assetRoot });
+
+export const decorators = [
+  withScreenshot,
+  withSLDS,
+];
+
+export const parameters = {
+  // Global parameter is optional.
+  screenshot: {
+    // Put global screenshot parameters(e.g. viewport)
+  },
+};

.storybook/main.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import classnames from 'classnames';
 import { ComponentSettings } from '../src/scripts';
 
-export default function wrapContent(options) {
+export default function wrapSLDS(options) {
   return story => (
     <ComponentSettings assetRoot={ options.assetRoot } portalClassName='slds'>
-      <div className={ classnames('content-wrapper', options.className) }>{ story() }</div>
+      {story()}
     </ComponentSettings>
   );
 }