Merge branch 'refactor/v3' into develop

.ci/config/snapshot-resolver.js

@@ -0,0 +1,5 @@
+module.exports = {
+  testPathForConsistencyCheck: 'TextField/index.test.js',
+  resolveSnapshotPath: (path, ext) => path + ext,
+  resolveTestPath: (path, ext) => path.slice(0, -ext.length),
+};

.eslintignore

@@ -1,6 +1,4 @@
 node_modules
 dist
 coverage
-examples
-old
 storybook-static

.eslintrc.js

@@ -1,14 +1,29 @@
 module.exports = {
   extends: ['@poool/eslint-config-react'],
-  overrides: [{
-    files: ['packages/**/*.test.js'],
-    env: {
-      jest: true,
+  overrides: [
+    {
+      files: ['packages/**/*.test.js'],
+      env: {
+        jest: true,
+      },
     },
-  }, {
-    files: ['packages/junipero-native'],
-    extends: ['@poool/eslint-config-react-native'],
-  }],
+    {
+      files: ['packages/junipero-native'],
+      extends: ['@poool/eslint-config-react-native'],
+    },
+    {
+      files: ['packages/**/*.{ts,tsx}'],
+      parser: '@typescript-eslint/parser',
+      globals: {
+        JSX: 'readonly',
+        React: 'readonly',
+      },
+      rules: {
+        // function params are considered as unused vars
+        'no-unused-vars': 0,
+      },
+    },
+  ],
   rules: {
     // regex cannot be concatenated
     'max-len': [1, { ignoreRegExpLiterals: true }],
@@ -19,13 +34,5 @@ module.exports = {
     // Common props are not checked anyway
     'react/prop-types': [2, { ignore: ['className', 'children'] }],
     'react/react-in-jsx-scope': 0,
-
-    // Directly assigning this.state is sometimes required in addition to
-    // setState
-    'react/no-direct-mutation-state': 0,
-
-    // this.state.opened ? this.close() : this.open()
-    // is a false positive
-    'babel/no-unused-expressions': 0,
   },
 };

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: [master,develop]
+    branches: [master,develop,refactor/v3]
   pull_request:
     branches: [master,develop]
 

.npmignore

@@ -3,4 +3,3 @@ coverage
 .ci
 .github
 .storybook
-old

.storybook/index.styl → .storybook/index.sass

@@ -1,4 +1,4 @@
-@import "../packages/junipero/lib/index"
+@use "../packages/theme/lib/index"
 
 body
   padding: 20px

.storybook/main.js

@@ -2,10 +2,13 @@ const path = require('path');
 const autoprefixer = require('autoprefixer');
 
 module.exports = {
-  stories: ['../packages/**/*.stories.js'],
+  stories: [
+    '../packages/*/lib/*/*.stories.js',
+  ],
   addons: [
     '@storybook/addon-storysource',
     '@storybook/addon-actions/register',
+    'storybook-dark-mode',
   ],
   core: {
     builder: 'webpack5',
@@ -14,6 +17,10 @@ module.exports = {
     config.resolve.modules = ['node_modules', path.resolve('./node_modules')];
     config.resolve.alias = {
       'react-native': 'react-native-web',
+      '@junipero/core': path.resolve('./packages/core/lib'),
+      '@junipero/react': path.resolve('./packages/react/lib'),
+      '@junipero/hooks': path.resolve('./packages/hooks/lib'),
+      '@junipero/transitions': path.resolve('./packages/transitions/lib'),
     };
 
     config.module.rules.push({
@@ -41,6 +48,33 @@ module.exports = {
       ],
     });
 
+    config.module.rules.push({
+      test: /\.sass$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              sourceMap: true,
+              plugins: [autoprefixer],
+            },
+          },
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              includePaths: [
+                path.resolve('./packages/theme/lib/utils'),
+              ],
+            },
+          },
+        },
+      ],
+    });
+
     return config;
   },
 };

.storybook/preview-head.html

@@ -1,2 +1,2 @@
-<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

.storybook/preview.js

@@ -1 +1,13 @@
-import './index.styl';
+import { themes } from '@storybook/theming';
+
+import './index.sass';
+
+export const parameters = {
+  darkMode: {
+    dark: { ...themes.dark, appBg: '#181818', appContentBg: '#1A1A1A' },
+    darkClass: 'dark',
+    light: { ...themes.light, appBg: '#FEFEFE', appContentBg: '#FEFEFE' },
+    classTarget: 'html',
+    stylePreview: true,
+  },
+};