Initial commit

.editorconfig

@@ -0,0 +1,24 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+tab_width = 2
+
+[{*.ats,*.ts,getEmptyStatement}]
+indent_size = 2
+tab_width = 2
+
+[{*.cjs,*.js}]
+indent_size = 2
+tab_width = 2
+
+[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.stylelintrc,bowerrc,jest.config}]
+indent_size = 2
+
+[{*.yaml,*.yml}]
+indent_size = 2

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  ignorePatterns: ["*.js"],
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    "prettier/prettier": "error",
+    indent: ["error", 2],
+    "linebreak-style": "off",
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    "react/prop-types": "off",
+  },
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,29 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[Bug] Issue title"
+labels: ""
+assignees: ""
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Minimal code implementation or link to a sandbox that demonstrates the issue.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+
+- OS: [e.g. Windows]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+- NodeJS Version
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/pretty.yml

@@ -0,0 +1,14 @@
+name: Pretty
+on: push
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+        with:
+          persist-credentials: false
+      - name: Install and Pretty Check 🔧
+        run: | # Install npm packages and run tests
+          yarn
+          yarn prettier:check

.github/workflows/storybook-deployment.yml

@@ -0,0 +1,28 @@
+name: Storybook Deployment
+on: push
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          yarn
+          npx lerna bootstrap
+          yarn build
+          yarn build-storybook
+          mv ./storybook-static/index.html ./storybook-static/index.htm
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: storybook-static
+          CLEAN: true
+          SINGLE_COMMIT: true
+          # TARGET_FOLDER: docs # The folder that we serve our Storybook files
+          GIT_CONFIG_NAME: deploybot
+          GIT_CONFIG_EMAIL: [email protected]

.github/workflows/test.yml

@@ -0,0 +1,16 @@
+name: Testing
+on: push
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+        with:
+          persist-credentials: false
+      - name: Install and Test 🔧
+        run: | # Install npm packages and run tests
+          yarn
+          npx lerna bootstrap
+          yarn build
+          yarn test

.gitignore

@@ -0,0 +1,5 @@
+/packages/*/out
+.idea
+node_modules
+storybook-static
+yarn-error.log

.prettierignore

@@ -0,0 +1,6 @@
+/packages/*/out
+node_modules
+storybook-static
+lerna.json
+/packages/*/jest.config.js
+/**/*.js

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "trailingComma": "es5"
+}

.storybook/main.js

@@ -0,0 +1,33 @@
+const path = require("path")
+
+const toPath = (_path) => path.join(process.cwd(), _path)
+
+module.exports = {
+  stories: ['../packages/**/*.stories.@(js|jsx|mdx|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
+  refs: () => ({}),
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+        },
+      },
+    }
+  },
+  typescript: {
+    check: true,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+        module: 'CommonJS',
+      },
+    },
+  },
+};

.storybook/preview.js

@@ -0,0 +1,6 @@
+import { addParameters } from '@storybook/client-api';
+
+addParameters({
+  // viewMode: 'docs', // Remove if default view should be canvas mode
+  layout: "fullscreen",
+});

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Lukas Bach
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,38 @@
+# Typed React Package Starter
+
+![Testing](https://github.com/lukasbach/chakra-ui-deepdive/workflows/Testing/badge.svg)
+![Pretty](https://github.com/lukasbach/chakra-ui-deepdive/workflows/Pretty/badge.svg)
+![Storybook Deployment](https://github.com/lukasbach/chakra-ui-deepdive/workflows/Storybook%20Deployment/badge.svg)
+
+A template for repositories of custom React components and hooks, properly typed with Typescript, divided
+into sub packages with Lerna and visually testable with Storybook. `packages/` includes two examples for
+subpackages that you can build upon: `packages/component-package` with a sample implementation of a custom
+react component, including a _spec_ test-file, a storybook story and a MDX-based storybook documentation; And
+`packages/hook-package` with a sample implementation of a custom react hook, including a hook test implementation
+and a storybook story.
+
+It also automatically deploys the storybook to GitHub Pages. You can view the default storybook here:
+
+https://lukasbach.github.io/chakra-ui-deepdive
+
+## Setup
+
+- Create a new repo based off this template by [by clicking here](https://github.com/lukasbach/chakra-ui-deepdive/generate)
+- Deployment automatically happens. Initialize GitHub Pages by going to the Repo's settings, scrolling down to
+  _GitHub Pages_, selecting the `gh-pages` branch and click on _Save_ (root directory is fine).
+- Implement your components and hooks by copying the template packages. Make sure to adapt the package names, repository
+  url and author in the respective `package.json` files.
+- Make sure to remove the template packages if you don't need them anymore. You can always copy them from the original
+  template repo again.
+
+When developing locally, run in the root directory...
+
+- `yarn` to install dependencies
+- `yarn test` to run tests in all packages
+- `yarn build` to build distributables and typings in `packages/{package}/out`
+- `yarn storybook` to run a local storybook server
+- `yarn build-storybook` to build the storybook
+- [`npx lerna version`](https://github.com/lerna/lerna/tree/main/commands/version#readme) to interactively bump the
+  packages versions. This automatically commits the version, tags the commit and pushes to git remote.
+- [`npx lerna publish`](https://github.com/lerna/lerna/tree/main/commands/publish#readme) to publish all packages
+  to NPM that have changed since the last release. This automatically bumps the versions interactively.

config/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  roots: ["<rootDir>/src"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+};

config/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "es2018"],
+    "esModuleInterop": true,
+    "jsx": "react",
+    "declaration": true,
+    "module": "CommonJS",
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules", "../**/*.spec.ts", "../**/*.spec.tsx"]
+}

lerna.json

@@ -0,0 +1,6 @@
+{
+  "packages": ["packages/*"],
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "0.0.0"
+}

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "chakra-ui-deepdive",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:lukasbach/chakra-ui-deepdive.git"
+  },
+  "author": "Lukas Bach",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "start": "lerna run start --parallel --npm-client=yarn",
+    "build": "lerna run build --npm-client=yarn",
+    "test": "lerna run test --npm-client=yarn --stream",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-docs": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/addons": "^6.1.11",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^6.1.11",
+    "@types/storybook__react": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "lerna": "^3.22.1",
+    "prettier": "^2.2.1",
+    "react-docgen": "^5.3.1",
+    "react-docgen-typescript": "^1.20.5",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "storybook-addon-react-docgen": "^1.2.42",
+    "ts-loader": "^8.0.11"
+  },
+  "workspaces": [
+    "packages/*"
+  ]
+}

packages/synergies/.npmignore

@@ -0,0 +1,3 @@
+src/
+.idea
+node_modules

packages/synergies/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("../../config/jest.config");