@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

package/.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+  settings:{
+    'import/resolver':{
+      'babel-module':{},
+    },
+  },
+  env:{
+    browser:true,
+    node   :true,
+  },
+  parser :'@babel/eslint-parser',
+  extends:['airbnb'],
+  rules  :{
+    semi:[
+      2,
+      'never',
+    ],
+    'key-spacing':[
+      'error', {
+        multiLine:{
+          beforeColon:false,
+          afterColon :false,
+        },
+        align:{
+          beforeColon:false,
+          afterColon :false,
+          on         :'colon',
+        },
+      },
+    ],
+    'react/require-default-props':[
+      0,
+    ],
+    'react/jsx-props-no-spreading':[
+      0,
+    ],
+    'import/prefer-default-export':[
+      0,
+    ],
+  },
+}

package/.githooks/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+echo "\n\n** PRE-COMMIT => Running tests"
+#npm run test
+

package/.github/workflows/push-main-branches.yaml

@@ -0,0 +1,89 @@
+name: (push -> main branches) Test, Push to Chromatic
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - development
+      - staging
+      - production
+#on:
+#  push:
+#    branches: [ $default-branch ]
+#  pull_request:
+#    branches: [ $default-branch ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        #node-version: [12.x, 14.x]
+        node-version: [14.x]
+
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    #- run: npm ci
+    - id: cache-modules
+      uses: actions/cache@v1
+      with:
+        path: ./node_modules
+        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+    
+    - name: Install dependencies
+      if: steps.cache-pipenv.outputs.cache-hit != 'true'
+      run: |
+        npm install
+    
+    #- run: npm run build --if-present
+    #- name: Test
+    #  env:
+    #    CI: true
+    #    #run: npm run test
+
+    - name: Lint SCSS
+      run: npm run test:stylelint
+
+    - name: Test with Storyshots (Take Snapshots -> Compare)
+      run: npm run test:jest
+
+    - name: Test with Eslint
+      run: npm run test:eslint
+
+    #- name: Test with TSC
+    #run: npm run test:tsc
+
+  chromatic-deployment:
+    needs: test
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+
+      - id: cache-modules
+        uses: actions/cache@v1
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+      
+      - name: Install dependencies
+        if: steps.cache-pipenv.outputs.cache-hit != 'true'
+        run: |
+          npm install
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing, in case there are changes (but no errors)

package/.github/workflows/push-pr.yaml

@@ -0,0 +1,83 @@
+name: (pr) Test, and deploy to chromatic
+
+on:
+  push:
+    branches-ignore:
+      - development
+      - staging
+      - production
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        #node-version: [12.x, 14.x]
+        node-version: [14.x]
+
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    #- run: npm ci
+    - id: cache-modules
+      uses: actions/cache@v1
+      with:
+        path: ./node_modules
+        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+    
+    - name: Install dependencies
+      if: steps.cache-pipenv.outputs.cache-hit != 'true'
+      run: |
+        npm install
+    
+    #- run: npm run build --if-present
+    #- name: Test
+    #  env:
+    #    CI: true
+    #    #run: npm run test
+
+    - name: Lint SCSS
+      run: npm run test:stylelint
+
+    - name: Test with Storyshots (Take Snapshots -> Compare)
+      run: npm run test:jest
+
+    - name: Test with Eslint
+      run: npm run test:eslint
+
+    #- name: Test with TSC
+    #  run: npm run test:tsc
+  
+  chromatic-deployment:
+    needs: test
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+
+      - id: cache-modules
+        uses: actions/cache@v1
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+      
+      - name: Install dependencies
+        if: steps.cache-pipenv.outputs.cache-hit != 'true'
+        run: |
+          npm install
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing, in case there are changes (but no errors)

package/.github/workflows.old/push-production.yaml

@@ -0,0 +1,34 @@
+name: (push -> production) Node.js CI
+
+on: [pull_request]
+#on:
+#  push:
+#    branches: [ $default-branch ]
+#  pull_request:
+#    branches: [ $default-branch ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        #node-version: [12.x, 14.x]
+        node-version: [14.x]
+
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    #- run: npm ci
+    - run: npm i
+    #- run: npm run build --if-present
+    - name: Test
+      env:
+        CI: true
+      run: npm run test
+

package/.github/workflows.old/push-staging.yaml

@@ -0,0 +1,34 @@
+name: (push -> staging) Test, Push to Chromatic, and Publish Beta
+
+on: [pull_request]
+#on:
+#  push:
+#    branches: [ $default-branch ]
+#  pull_request:
+#    branches: [ $default-branch ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        #node-version: [12.x, 14.x]
+        node-version: [14.x]
+
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    #- run: npm ci
+    - run: npm i
+    #- run: npm run build --if-present
+    - name: Test
+      env:
+        CI: true
+      run: npm run test
+

package/.github/workflows.old/test-publish.no

@@ -0,0 +1,63 @@
+name: Node.js CI
+
+on: [push, pull_request]
+#on:
+#  push:
+#    branches: [ $default-branch ]
+#  pull_request:
+#    branches: [ $default-branch ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        #node-version: [12.x, 14.x]
+        node-version: [14.x]
+
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    #- run: npm ci
+    - run: npm i
+    #- run: npm run build --if-present
+    - name: Test
+      env:
+        CI: true
+      run: npm run test
+
+  publish:
+    needs: test
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+      #with:
+        #token: secrets.GH_PERSONAL_ACCESS_TOKEN
+    - uses: nelonoel/branch-name@v1.0.1
+    - name: Detect branch
+      run: echo "Currently on branch $BRANCH_NAME, will publish to npm"
+
+    - name: If branch development version bump alpha
+      if: env.BRANCH_NAME == 'development'
+      uses: phips28/gh-action-bump-version@master
+      env:
+        #GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}#this is the default but it doesnt work since gh cannot push to protected branches. This is why we used the PAT of tasks@HP.com
+        GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+      with:
+        default: prerelease --preid=alpha
+
+    - run: |
+          echo "name: ${{ steps.pkg.outputs.name }}"
+          echo "version: ${{ steps.pkg.outputs.version }}"
+          echo "release: ${{ steps.pkg.outputs.release }}"
+        #uses: JS-DevTools/npm-publish@v1
+        #  with:
+        #    token: ${{ secrets.NPM_AUTOMATION_KEY }}
+        #    tag: "latest"

package/.github/workflows.old/test-publish.yaml

@@ -0,0 +1,68 @@
+name: Node.js CI
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - production
+
+#on:
+#  push:
+#    branches: [ $default-branch ]
+#  pull_request:
+#    branches: [ $default-branch ]
+
+jobs:
+  Test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        #node-version: [12.x, 14.x]
+        node-version: [14.x]
+
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    #- run: npm ci
+    - run: npm i
+    #- run: npm run build --if-present
+    - name: Test
+      env:
+        CI: true
+      run: npm run test
+
+  publish:
+    needs: test
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+      #with:
+        #token: secrets.GH_PERSONAL_ACCESS_TOKEN
+    - uses: nelonoel/branch-name@v1.0.1
+    - name: Detect branch
+      run: echo "Currently on branch $BRANCH_NAME, will publish to npm"
+
+    - name: If branch development version bump alpha
+      if: env.BRANCH_NAME == 'development'
+      uses: phips28/gh-action-bump-version@master
+      env:
+        #GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}#this is the default but it doesnt work since gh cannot push to protected branches. This is why we used the PAT of tasks@HP.com
+        GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+      with:
+        default: prerelease --preid=alpha
+
+    - run: |
+          echo "name: ${{ steps.pkg.outputs.name }}"
+          echo "version: ${{ steps.pkg.outputs.version }}"
+          echo "release: ${{ steps.pkg.outputs.release }}"
+        #uses: JS-DevTools/npm-publish@v1
+        #  with:
+        #    token: ${{ secrets.NPM_AUTOMATION_KEY }}
+        #    tag: "latest"

package/.storybook/main.js

@@ -1,10 +1,59 @@
+const path=require('path')
+
 module.exports = {
+   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.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            //modules:{
+            //  mode:'global',
+            //},
+            //localIdentName:"[name]__hello_[local]__[hash:base64:5]"
+          },
+        },
+        {
+          loader:'sass-loader',
+          options: {
+            sassOptions: {
+              includePaths: [
+                //path.resolve(__dirname, '../node_modules'), // Already default
+                path.resolve(__dirname, '../src')
+              ]
+            }
+          }
+        }
+    ],
+      include: path.resolve(__dirname, '../..')
+    });
+
+    // Return the altered config
+    return config;
+  },
+
   "stories": [
     "../src/stories/**/*.stories.mdx",
     "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
+     {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      }
+    },
+    'storybook-addon-themes'
+  ],
+  reactOptions: {
+    fastRefresh: true,
+  }
 }

package/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+  #root {
+    height: 100%;
+  }
+</style>

package/.storybook/preview.js

@@ -1,4 +1,11 @@
+import '../src/local.scss'
+import '@pareto-engineering/styles/dist/main.min.css'
 
 export const parameters = {
+  layout:'fullscreen',
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  themes: [
+    { name: 'Colorscheme Light', class: 'ui-light', color: '#EFEFEF', default: true },
+    { name: 'Colorscheme Dark', class: 'ui-dark', color: '#121212' }
+  ],
+}

package/babel.config.js

@@ -1,51 +1,54 @@
-//Needs a bit of cleanup
+// Needs a bit of cleanup
 
 module.exports = function (api) {
-  //api.cache(false)
-  //var isProd = api.cache(() => process.env.NODE_ENV === 'production')
-  var isCjs = api.cache(() => process.env.COMPILE_ENV === 'cjs')
-  var isEs = api.cache(() => process.env.COMPILE_ENV === 'es')
+  // api.cache(false)
+  // var isProd = api.cache(() => process.env.NODE_ENV === 'production')
+  const isCjs = api.cache(() => process.env.COMPILE_ENV === 'cjs')
+  const isEs = api.cache(() => process.env.COMPILE_ENV === 'es')
+  const isTest = api.env('test')
 
   const modules = isEs ? false : 'commonjs'
-  /*
-  const targets = isProd ?
-    { node: '10' } :
-    isCjs ?
-      { esmodules: true } :
-      { browsers: 'last 4 versions' }
-  */
+
+  const targets = isTest
+    ? { node: '12' }
+    : isCjs
+      ? { esmodules: true }
+      : undefined
+
+  // { browsers: '>0.35%, not ie' }
 
   const presets = [
     [
       '@babel/preset-env',
       {
         modules,
-        //targets
+        targets,
         //        debug:true,
-      }
+      },
     ],
-    '@babel/preset-react'
+    '@babel/preset-react',
   ]
   const plugins = [
     ['module-resolver', {
-      root :['./src'],
-      alias:{
-        //'@fwrlines/ds':'./src/ui'
-      }
+      root:['./src'],
     }],
-    //['@babel/plugin-proposal-class-properties', { 'loose': true }],
-    /*['babel-plugin-inline-import', {
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }], // This is to silence a warning after upgrading storybook to 6.2.9
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+
+    // ['@babel/plugin-proposal-class-properties', { 'loose': true }],
+    /* ['babel-plugin-inline-import', {
       'extensions':[
         '.html',
         '.graphql',
         '.gql'
-      ]}],*/
+      ]}], */
     /*
     ['transform-react-remove-prop-types', {
       'mode':'wrap',
     }],
     */
-    //['add-module-exports'],
+    // ['add-module-exports'],
 
   ]
 
@@ -60,14 +63,14 @@ module.exports = function (api) {
   )}
 	*/
 
-  /*const env = { //UNUSED (??)
+  /* const env = { //UNUSED (??)
     'production': {
       'plugins': ['transform-react-remove-prop-types']
     }
-	}*/
+	} */
 
   return {
     presets,
-    plugins
+    plugins,
   }
 }