Merge pull request #146 from NiceNode/ui-redesign

UI/UX major redesign

.erb/configs/webpack.config.renderer.dev.ts

@@ -7,6 +7,7 @@ import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { execSync, spawn } from 'child_process';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
 import baseConfig from './webpack.config.base';
 import webpackPaths from './webpack.paths';
 import checkNodeEnv from '../scripts/check-node-env';
@@ -63,6 +64,28 @@ const configuration: webpack.Configuration = {
 
   module: {
     rules: [
+      // Required for vanilla-extract to set classes on components
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              babelrc: false,
+              presets: [
+                '@babel/preset-typescript',
+                ['@babel/preset-react', { runtime: 'automatic' }],
+                [
+                  '@babel/preset-env',
+                  { targets: { node: 14 }, modules: false },
+                ],
+              ],
+              plugins: ['@vanilla-extract/babel-plugin'],
+            },
+          },
+        ],
+      },
       {
         test: /\.s?css$/,
         use: [
@@ -91,9 +114,29 @@ const configuration: webpack.Configuration = {
       },
       // Images
       {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        test: /\.(png|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
+      // SVGs - converts svg files to React Components
+      {
+        test: /\.svg$/,
+        issuer: /\.[jt]sx?$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: false,
+              svgoConfig: {
+                plugins: [{ removeViewBox: false }],
+              },
+              titleProp: true,
+              ref: true,
+            },
+          },
+          'file-loader',
+        ],
+      },
     ],
   },
   plugins: [
@@ -131,6 +174,8 @@ const configuration: webpack.Configuration = {
 
     new ReactRefreshWebpackPlugin(),
 
+    new VanillaExtractPlugin({ identifiers: 'debug' }),
+
     new HtmlWebpackPlugin({
       filename: path.join('index.html'),
       template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),

.erb/configs/webpack.config.renderer.prod.ts

@@ -8,6 +8,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
 import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import baseConfig from './webpack.config.base';
@@ -45,6 +46,28 @@ const configuration: webpack.Configuration = {
 
   module: {
     rules: [
+      // Required for vanilla-extract to set classes on components
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              babelrc: false,
+              presets: [
+                '@babel/preset-typescript',
+                ['@babel/preset-react', { runtime: 'automatic' }],
+                [
+                  '@babel/preset-env',
+                  { targets: { node: 14 }, modules: false },
+                ],
+              ],
+              plugins: ['@vanilla-extract/babel-plugin'],
+            },
+          },
+        ],
+      },
       {
         test: /\.s?(a|c)ss$/,
         use: [
@@ -73,9 +96,29 @@ const configuration: webpack.Configuration = {
       },
       // Images
       {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        test: /\.(png|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
+      // SVGs - converts svg files to React Components
+      {
+        test: /\.svg$/,
+        issuer: /\.[jt]sx?$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: false,
+              svgoConfig: {
+                plugins: [{ removeViewBox: false }],
+              },
+              titleProp: true,
+              ref: true,
+            },
+          },
+          'file-loader',
+        ],
+      },
     ],
   },
 
@@ -112,6 +155,8 @@ const configuration: webpack.Configuration = {
       analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
     }),
 
+    new VanillaExtractPlugin(),
+
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),

.eslintignore

@@ -36,5 +36,9 @@ npm-debug.log.*
 # minified dependency doesn't satisfy eslint
 src/renderer/ethers.js
 
-# ignore just for now
+# ignore storybook build files
+# ignore source for now
 src/stories
+src/stories/Generic
+src/stories/Presentational
+storybook-static

.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
   extends: 'erb',
   rules: {
+    // Javascript can handle cycles in dependencies
+    'import/no-cycle': 'off',
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'error',

.github/workflows/package.yml

@@ -0,0 +1,49 @@
+name: Package
+
+on: [pull_request]
+
+# asar is disabled for pm2 & electron build to work
+#   with asar disabled, hard links needs to be disabled
+env:
+  USE_HARD_LINKS: false
+
+jobs:
+  package:
+    timeout-minutes: 25
+
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, windows-latest, ubuntu-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Install Node.js and NPM
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+
+      - name: npm install
+        run: |
+          npm install
+
+      # This dependency wasn't needed until suddenly on Dec. 2, 2022
+      - name: install dmg-license
+        run: |
+          if [ "$RUNNER_OS" == "macOS" ]; then
+            npm i dmg-license
+          else
+            exit 0
+          fi
+        shell: bash
+
+      - name: npm package
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          npm run package

.github/workflows/publish.yml

@@ -4,8 +4,8 @@ on:
   push:
     branches:
       - main
-      - multi-nodes-and-docker
-      - teest-new-github-action-vs
+      - ui-redesign
+      - chore/update-deps
 
 # asar is disabled for pm2 & electron build to work
 #   with asar disabled, hard links needs to be disabled
@@ -38,6 +38,16 @@ jobs:
         run: |
           npm install
 
+      # This dependency wasn't needed until suddenly on Dec. 2, 2022
+      - name: install dmg-license
+        run: |
+          if [ "$RUNNER_OS" == "macOS" ]; then
+            npm i -D dmg-license
+          else
+            exit 0
+          fi
+        shell: bash
+
       - name: Publish releases
         env:
           # These values are used for auto updates signing

.github/workflows/test.yml

@@ -31,12 +31,9 @@ jobs:
         run: |
           npm install
 
-      - name: npm package
-        env:
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+      - name: npm build
         run: |
-          npm run package
+          npm run build
 
       - name: npm lint
         run: |

.husky/pre-commit

@@ -3,5 +3,6 @@
 
 npx lint-staged
 npm run lint
+npm exec tsc
 npm run postinstall
-npm run test
+npm run test-precommit

.storybook/main.js

@@ -2,19 +2,47 @@ const path = require('path');
 
 module.exports = {
   "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "addons": [path.resolve('./.storybook/vanilla-extract.js'), "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
   "framework": "@storybook/react",
+  "logLevel": "debug",
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
 
+
+      // disable whatever is already set to load SVGs
+      config.module.rules
+      .filter(rule => rule.test.test('.svg'))
+      .forEach(rule => rule.exclude = /\.svg$/i);
+
     // Make whatever fine-grained changes you need
     config.module.rules.push({
       test: /\.scss$/,
       use: ['style-loader', 'css-loader', 'sass-loader'],
       include: path.resolve(__dirname, '../'),
     },
+    // SVG
+    {
+      test: /\.svg$/,
+      issuer: /\.[jt]sx?$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            prettier: false,
+            svgo: false,
+            svgoConfig: {
+              plugins: [{ removeViewBox: false }],
+            },
+            titleProp: true,
+            ref: true,
+          },
+        },
+        'file-loader',
+      ],
+      // include: path.resolve(__dirname, '../')
+    },
     {
       test: /\.(png|woff|woff2|eot|ttf|svg)$/,
       include: path.resolve(__dirname, '../')

.storybook/manager.js

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

.storybook/niceNodeTheme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'NiceNode UI Components',
+  brandUrl: 'https://nndesign.netlify.app/',
+  brandImage: 'https://www.nicenode.xyz/img/icon.png',
+  brandTarget: '_self',
+});

.storybook/preview.js

@@ -1,11 +1,23 @@
-import '../src/renderer/assets/sass/app.scss';
+import '../src/renderer/reset.css';
+import '../src/renderer/Generics/redesign/globalStyle.css';
+import '../src/renderer/i18n';
+
+import RedesignContainer from '../src/renderer/Generics/redesign/RedesignContainer';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};
+
+export const decorators = [
+  (Story) => (
+    <RedesignContainer>
+      <Story />
+    </RedesignContainer>
+  ),
+];