feat(project): initialized project

.commitlintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+    extends: ['@commitlint/config-conventional'],
+    rules  : {
+      'scope-enum': [
+        2, 'always', [
+          'project',
+        ],
+      ],
+    },
+  };
+

.eslintrc.js

@@ -0,0 +1,131 @@
+const restrictedGlobals = require('confusing-browser-globals');
+
+module.exports = {
+  parser: '@typescript-eslint/parser',
+
+  plugins: [
+    // Enable Typescript linting
+    '@typescript-eslint',
+
+    // Enable linting imports
+    'import',
+  ],
+
+  extends: [
+    // Use default ESLint rules
+    'eslint:recommended',
+
+    // Use recommended TS rules
+    'plugin:@typescript-eslint/recommended',
+
+    // Use recommended React rules
+    'plugin:react/recommended',
+
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+  ],
+
+  env: {
+    // Browser conf
+    browser: true,
+    es6: true,
+
+    // Jest conf
+    jest: true,
+    node: true,
+  },
+
+  rules: {
+    // Prevent development/debugging statements
+    'no-console': ['error', { allow: ['warn', 'error', 'info', 'debug'] }],
+    'no-alert': 'error',
+    'no-debugger': 'error',
+
+    // Prevent usage of confusing globals
+    'no-restricted-globals': ['error'].concat(restrictedGlobals),
+
+    // Assignments in function returns is confusing and could lead to unwanted side-effects
+    'no-return-assign': ['error', 'always'],
+
+    // Strict import ordering
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+        pathGroups: [
+          // Sort absolute root imports before parent imports
+          {
+            pattern: '/**',
+            group: 'parent',
+            position: 'before',
+          },
+        ],
+        'newlines-between': 'always',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.js'],
+      env: {
+        // We may still use CJS in .js files (eg. local scripts)
+        commonjs: true,
+      },
+      rules: {
+        // `require` is still allowed/recommended in JS
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        // TypeScript 4.0 adds 'any' or 'unknown' type annotation on catch clause variables.
+        // We need to make sure error is of the type we are expecting
+        '@typescript-eslint/no-implicit-any-catch': 'error',
+
+        // These are handled by TS
+        '@typescript-eslint/no-explicit-any': [
+          'warn',
+          { ignoreRestArgs: true },
+        ],
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-inferrable-types': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'import/no-unresolved': 'off',
+      },
+    },
+    {
+      files: ['*.jsx', '*.tsx'],
+      plugins: [
+        // Enable linting React code
+        'react',
+        'react-hooks',
+      ],
+      rules: {
+        // Help with Hooks syntax
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
+
+        // Handled by Typescript
+        'react/prop-types': 'off',
+
+        // This rule causes too many false positives, eg. with default exports or child render function
+        'react/display-name': 'off',
+      },
+    },
+  ],
+
+  settings: {
+    react: {
+      pragma: 'React',
+      version: '17',
+    },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+};

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,23 @@
+## Description
+
+<!-- Describe the proposed solution/fix/feature in this pull request here. -->
+
+This PR solves # .
+
+### Steps completed:
+
+<!-- Check all completed steps so we know  -->
+
+According to our definition of done, I have completed the following steps:
+
+- [ ] User stories met
+- [ ] Storybook stories
+- [ ] Unit tests added
+- [ ] Linting passing
+- [ ] Unit tests passing
+- [ ] Docs updated (including config and env variables)
+- [ ] Translations added
+- [ ] UX tested
+- [ ] Browsers / platforms tested
+- [ ] Rebased & ready to merge without conflicts
+- [ ] Reviewed own code

.github/workflows/lhci.yml

@@ -0,0 +1,22 @@
+name: lhci
+on: [push]
+jobs: 
+  lhci:
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: yarn install, build
+        run: |
+          yarn install
+          yarn run build
+      - name: install Lighthouse CI
+        run: |
+          sudo yarn global add @lhci/cli@0.7.x http-server
+      - name: run Lighthouse CI
+        run: |
+          lhci autorun

.github/workflows/main.yml

@@ -0,0 +1,26 @@
+name: Jest
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: yarn install, build, and test
+        run: |
+          yarn
+          yarn test
+        env:
+          CI: true

.gitignore

@@ -0,0 +1,3 @@
+.snowpack
+build
+node_modules

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

blueprint/base/Base.module.scss

@@ -0,0 +1,7 @@
+// remove these, if you don't need them
+@import './path/styles/base/colors';
+@import './path/styles/base/breakpoints';
+@import './path/styles/base/mixins';
+
+.basis {
+}

blueprint/base/Base.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+
+import Base from './Base';
+
+describe('Base Component tests', () => {
+  test('dummy test', () => {
+    render(<Base></Base>);
+    expect(screen.getByText('hello world')).toBeInTheDocument();
+  });
+});

blueprint/base/Base.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './Base.module.scss';
+
+type BaseProps = {
+  dummy?: string;
+};
+
+const Base: React.FC<BaseProps> = ({ dummy = 'defaultValue' }: BaseProps) => {
+  return (
+    <div className={styles['base']}>
+      <p>hello world</p>
+      <p>{dummy}</p>
+    </div>
+  );
+};
+
+export default Base;

blueprint/index.js

@@ -0,0 +1,67 @@
+'use-strict';
+
+const { writeFileSync, readFileSync, mkdirSync } = require('fs');
+
+if (process.argv.length < 3) {
+  console.error(`
+    Please pass new component name including path in kebab case!
+    Example:
+    components/basic/form-example-divider
+    Result:
+    components/basic/FormExampleDivider.tsx
+    components/basic/FormExampleDivider.test.tsx
+    components/basic/FormExampleDivider.module.scss
+  `);
+  return;
+}
+
+const path = process.argv[2];
+const splitPath = path.split('/');
+
+const componentName = {
+  kebabCase: splitPath[splitPath.length - 1],
+  pascalCase: toPascalCase(splitPath[splitPath.length - 1]),
+};
+
+const baseTsx = readFileSync('./scripts/blueprint/base/Base.tsx');
+const baseTestTsx = readFileSync('./scripts/blueprint/base/Base.test.tsx');
+const baseScss = readFileSync('./scripts/blueprint/base/Base.module.scss');
+
+// creates target directory
+const dir = `./src/${path}`;
+mkdirSync(dir, { recursive: true });
+
+// TSX
+const componentTsx = baseTsx
+  .toString()
+  .replace(/Base/g, componentName.pascalCase)
+  .replace(/base/g, componentName.kebabCase);
+writeFileSync(`${dir}/${componentName.pascalCase}.tsx`, componentTsx);
+
+// TEST.TSX
+const componentTestTsx = baseTestTsx
+  .toString()
+  .replace(/Base/g, componentName.pascalCase)
+  .replace(/base/g, componentName.kebabCase);
+writeFileSync(`${dir}/${componentName.pascalCase}.test.tsx`, componentTestTsx);
+
+// SCSS
+const componentScss = baseScss
+  .toString()
+  .replace(/basis/g, componentName.kebabCase)
+  .replace(
+    /.\/path\//g,
+    `./${new Array(splitPath.length).fill('../').join('')}`
+  );
+writeFileSync(`${dir}/${componentName.pascalCase}.module.scss`, componentScss);
+
+// Helpers
+function toPascalCase(input) {
+  const split = input.split('-');
+  return split.map((i) => capitalize(i)).join('');
+}
+
+function capitalize(s) {
+  if (typeof s !== 'string') return '';
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    ...require('@snowpack/app-scripts-react/jest.config.js')(),
+  };

lighthouserc.js

@@ -0,0 +1,18 @@
+module.exports = {
+    ci: {
+      collect: {
+        url: [
+          "http://127.0.0.1:4000"
+        ],
+        startServerCommand: "http-server ./build -p 4000 -g",
+        startServerReadyPattern: "Available on",
+        numberOfRuns: 1
+      },
+      upload: {
+        "target": "temporary-public-storage"
+      },
+      assert: {
+        "preset": "lighthouse:recommended",
+      }
+    }
+  };