Skip to content

Commit 8450b1b

Browse files
steverydzsteverydz
committed
Install Storybook
Install Storybook Update package info Add initial README Add linting Setup from scratch Fix setup Update README
1 parent ef872d6 commit 8450b1b

File tree

105 files changed

+19100
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+19100
-2
lines changed

‎.babelrc

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
6+
],
7+
"plugins": [
8+
"@babel/plugin-proposal-class-properties",
9+
"babel-plugin-typescript-to-proptypes",
10+
[
11+
"module-resolver",
12+
{
13+
"root": ["./src"],
14+
"alias": {
15+
"enums": "./src/enums",
16+
"components": "./src/components",
17+
"hooks": "./src/hooks",
18+
"types": "./src/types",
19+
"utils": "./src/utils"
20+
}
21+
}
22+
]
23+
]
24+
}

‎.circleci/config.yml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
defaults: &defaults
2+
docker:
3+
- image: cimg/node:lts
4+
5+
version: 2
6+
jobs:
7+
percy:
8+
<<: *defaults
9+
steps:
10+
- checkout
11+
- run:
12+
# https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix
13+
name: Install puppeteer dependencies
14+
command: |
15+
sudo apt-get update
16+
sudo apt-get -y upgrade
17+
sudo apt-get -yq install gconf-service libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 libatk1.0-0 libc6 ca-certificates fonts-liberation lsb-release xdg-utils wget libgbm-dev
18+
# Download and cache dependencies
19+
- restore_cache:
20+
keys:
21+
- yarn-node:lts-{{ checksum "yarn.lock" }}
22+
- run: yarn install
23+
- run: yarn percy
24+
- save_cache:
25+
key: yarn-node:lts-{{ checksum "yarn.lock" }}
26+
paths:
27+
- node_modules
28+
29+
workflows:
30+
version: 2
31+
build_lint_and_test:
32+
jobs:
33+
- percy

‎.env

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
PORT=8403
2+
CYPRESS_INSTALL_BINARY=0

‎.eslintrc.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
module.exports = {
2+
parser: "@babel/eslint-parser",
3+
plugins: ["prettier", "cypress", "testing-library"],
4+
extends: [
5+
"react-app", // Use the recommended rules from CRA.
6+
"plugin:cypress/recommended",
7+
"plugin:prettier/recommended", // Ensure this is last in the list.
8+
],
9+
parserOptions: {
10+
ecmaFeatures: {
11+
jsx: true,
12+
},
13+
ecmaVersion: 2018,
14+
sourceType: "module",
15+
},
16+
rules: {
17+
"prettier/prettier": "error",
18+
"react/forbid-component-props": [
19+
"error",
20+
{
21+
forbid: [
22+
{
23+
propName: "data-test",
24+
message: "Use `data-testid` instead of `data-test` attribute",
25+
},
26+
],
27+
},
28+
],
29+
"react/forbid-dom-props": [
30+
"error",
31+
{
32+
forbid: [
33+
{
34+
propName: "data-test",
35+
message: "Use `data-testid` instead of `data-test` attribute",
36+
},
37+
],
38+
},
39+
],
40+
},
41+
settings: {
42+
react: {
43+
version: "detect",
44+
},
45+
},
46+
overrides: [
47+
{
48+
files: ["**/*.ts?(x)"],
49+
parser: "@typescript-eslint/parser",
50+
extends: [
51+
"react-app", // Uses the recommended rules from CRA.
52+
"plugin:prettier/recommended", // Ensure this is last in the list.
53+
],
54+
parserOptions: {
55+
ecmaFeatures: {
56+
jsx: true,
57+
},
58+
ecmaVersion: 2018,
59+
sourceType: "module",
60+
},
61+
rules: {
62+
"prettier/prettier": "error",
63+
},
64+
settings: {
65+
react: {
66+
version: "detect",
67+
},
68+
},
69+
},
70+
{
71+
files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
72+
extends: ["plugin:testing-library/react"],
73+
rules: {
74+
"testing-library/no-node-access": "warn",
75+
"testing-library/no-container": "warn",
76+
"testing-library/no-render-in-setup": "warn",
77+
},
78+
},
79+
],
80+
};

‎.github/labeler.yml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Maintenance 🔨:
2+
- package.json
3+
- .gitignore

‎.github/pull_request_template.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
## Done
2+
3+
- Itemised list of what was changed by this PR.
4+
5+
## QA
6+
7+
### Storybook
8+
9+
To see rendered examples of all store-components, run:
10+
11+
```shell
12+
yarn start
13+
```
14+
15+
### QA in your project
16+
17+
from `store-components` run:
18+
19+
```shell
20+
yarn build
21+
npm pack
22+
```
23+
24+
Install the resulting tarball in your project with:
25+
26+
```shell
27+
yarn add <path-to-tarball>
28+
```
29+
30+
### QA steps
31+
32+
- Steps for QA.
33+
34+
## Fixes
35+
36+
Fixes: # .

‎.github/release-drafter.yml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name-template: "v$NEXT_PATCH_VERSION"
2+
tag-template: "v$NEXT_PATCH_VERSION"
3+
categories:
4+
- title: "🚀 Features"
5+
label: "Feature 🎁"
6+
- title: "💣 Breaking Change"
7+
label: "Breaking Change 💣"
8+
- title: "🐛 Bug Fixes"
9+
label: "Bug 🐛"
10+
- title: "📝 Documentation"
11+
label: "Documentation 📖"
12+
- title: "🔨 Maintenance"
13+
label: "Maintenance 🔨"
14+
change-template: "- $TITLE (#$NUMBER)"
15+
template: |
16+
## v$NEXT_PATCH_VERSION
17+
18+
$CHANGES

‎.github/workflows/cypress.yaml

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
name: Cypress chrome headless
2+
on: [push]
3+
jobs:
4+
cypress-run:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- uses: actions/checkout@main
8+
- uses: cypress-io/github-action@v2
9+
env:
10+
CYPRESS_INSTALL_BINARY:
11+
with:
12+
start: yarn run start-storybook --port 6006
13+
wait-on: "http://localhost:6006"
14+
browser: chrome
15+
headless: true
16+
env: port=6006
17+
- uses: actions/upload-artifact@v3
18+
if: failure()
19+
with:
20+
name: cypress-screenshots
21+
path: cypress/screenshots
22+
- uses: actions/upload-artifact@v3
23+
if: failure()
24+
with:
25+
name: cypress-videos
26+
path: cypress/videos

‎.github/workflows/labeler.yaml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
name: "Pull Request Labeler"
2+
on:
3+
- pull_request_target
4+
5+
jobs:
6+
triage:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- uses: actions/labeler@v4
10+
with:
11+
repo-token: "${{ secrets.GITHUB_TOKEN }}"

‎.github/workflows/publish-on-release.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Publish to NPM
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
jobs:
8+
publish-npm:
9+
name: Publish to NPM
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v3
13+
- uses: actions/setup-node@v3
14+
with:
15+
node-version: 14
16+
registry-url: https://registry.npmjs.org/
17+
- run: yarn install
18+
- run: yarn build
19+
- run: yarn lint
20+
- run: yarn test
21+
env:
22+
CI: true
23+
- run: npm publish --access public
24+
env:
25+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

‎.github/workflows/release-drafter.yml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: Release Drafter
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
update_release_draft:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- name: Draft release notes
13+
uses: release-drafter/release-drafter@v5
14+
env:
15+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/test.yaml

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
name: CI
2+
on:
3+
push:
4+
branches:
5+
- main
6+
pull_request:
7+
branches:
8+
- main
9+
jobs:
10+
build:
11+
name: Lint, build and test
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v3
15+
16+
- name: Use Node.js
17+
uses: actions/setup-node@v3
18+
with:
19+
node-version: 16
20+
21+
- name: Install dependencies
22+
run: CYPRESS_INSTALL_BINARY=0 yarn install
23+
24+
- name: Lint
25+
run: yarn lint
26+
27+
- name: Build
28+
run: yarn build
29+
30+
- name: Test
31+
run: yarn test
32+
env:
33+
CI: true
34+
35+
inclusive-naming-check:
36+
name: Inclusive naming check
37+
runs-on: ubuntu-latest
38+
39+
steps:
40+
- name: Checkout
41+
uses: actions/checkout@v3
42+
43+
- name: Check inclusive naming
44+
uses: canonical/inclusive-naming@main
45+
with:
46+
github-token: ${{ secrets.GITHUB_TOKEN }}
47+
reporter: github-pr-check
48+
fail-on-error: true

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ yarn-error.log*
1414

1515
storybook-static/
1616
*.fuse*
17+
18+
cypress/screenshots/
19+
cypress/videos
20+
/package-lock.json

‎.percy.yml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
version: 2
2+
snapshot:
3+
widths: [1280]
4+
enable-javascript: true

‎.prettierrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎.storybook/main.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const path = require("path");
2+
3+
module.exports = {
4+
core: {
5+
builder: 'webpack5',
6+
},
7+
stories: ["../src/**/*.stories.@(js|ts|jsx|tsx|mdx)"],
8+
addons: [
9+
"@storybook/addon-docs/preset",
10+
"@storybook/addon-controls",
11+
"@storybook/addon-a11y",
12+
],
13+
webpackFinal: async (config, { configType }) => {
14+
config.module.rules.push({
15+
test: /\.scss$/,
16+
use: ["style-loader", "css-loader", "sass-loader"],
17+
include: path.resolve(__dirname, "../"),
18+
});
19+
return config;
20+
},
21+
};

0 commit comments

Comments
 (0)