Skip to content
This repository was archived by the owner on May 15, 2023. It is now read-only.

Commit 88ce456

Browse files
rsparks-club-osrsparks-club-os
committed
gitpkg
0 parents  commit 88ce456

File tree

542 files changed

+40008
-0
lines changed

Some content is hidden

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

542 files changed

+40008
-0
lines changed

‎.storybook/main.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module.exports = {
2+
'stories': [
3+
"../src/**/*.stories.tsx",
4+
'../src/**/*.stories.mdx',
5+
'../src/**/*.stories.@(js|jsx|ts|tsx)'
6+
],
7+
'addons': [
8+
'@storybook/addon-links',
9+
'@storybook/addon-essentials',
10+
'@storybook/preset-scss',
11+
'storybook-css-modules-preset'
12+
],
13+
'framework': '@storybook/react',
14+
'webpackFinal': async (config) => {
15+
config.resolve.alias = {
16+
...config.resolve.alias,
17+
'@axios': `${__dirname}/../src/axios`,
18+
'@components': `${__dirname}/../src/components`,
19+
'@global': `${__dirname}/../src/global`,
20+
'@parts': `${__dirname}/../src/parts`,
21+
'@redux': `${__dirname}/../src/redux`,
22+
'@utils': `${__dirname}/../src/utils`
23+
}
24+
return config
25+
}
26+
}

‎.storybook/preview.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const parameters = {
2+
actions: { argTypesRegex: "^on[A-Z].*" },
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/,
7+
},
8+
},
9+
}

‎README.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# Technique-component-library
2+
3+
## Description
4+
5+
This is a package library of components to be injected on the clubOS site. We have internal components that will only be used on the library itself and then we have parts. Parts are the components that will be mounted into the clubOS site and they might have some buissiness logic in them.
6+
7+
The project is using react-bootstrap and bootstrap for base components and styles, although bootstrap variables are changed to accomodate clubOS style guide. Because the clubOS page already uses bootstrap and custom classes whenever a part is mounted on the site it's wrapped by a div with a special class guaranteeing that library styles won't be override.
8+
9+
This library uses storybook to display the components made without having to inject them on the site.
10+
11+
Each part mounted is a different react tree but if the all use redux they will still share the same store.
12+
13+
## Installation and running the project
14+
15+
First make sure the node version is 16.13.0 or higher and npm version is 8.1.0 or higher
16+
17+
### Instalation
18+
19+
- Clone the repo
20+
- run `npm install`
21+
22+
### Run scripts
23+
24+
| Scripts | What they do |
25+
| ----------------- | --------------------------------------------------------------- |
26+
| `rollup` | builds the project for a dev environment \* |
27+
| `rollup:build` | builds the project for a production envirnment \* |
28+
| `storybook` | runs the storybook server. Opens in `http://localhost:6006/` |
29+
| `build-storybook` | creates a build of storybook |
30+
| `lint` | runs linting on the project and fixes what can be fixed |
31+
| `lint:css` | runs linting on all the css and styled-component files |
32+
| `test` | runs all the tests once |
33+
| `test:changed` | runs the test that changed |
34+
| `test:watch` | runs all tests and keeps watching for changes on them |
35+
| `test:coverage` | runs the tests and collects the coverage of them |
36+
| `new:component` | hygen script to create components. Has prompt to specify things |
37+
38+
\* The built files will be on `src/dist/esm`
39+
40+
## Components & Parts
41+
42+
### Components and Atomic components
43+
44+
This are the components that the parts will be using, the building blocks of our parts. As such they should never be rendered directly onto the clubOS site.
45+
46+
#### Atoms
47+
48+
This are small atomic components to be used either on other components or the parts. Normally this components will just render the `react-bootstrap` components but with some more logic or easier ways to customize it.
49+
50+
#### Components
51+
52+
They are also small components but can be made from atoms. They still won't be renderd on the clubOS site and they should be based on `bootstrap` and `react-bootstrap` as much as possible
53+
54+
### Parts
55+
56+
This are the different parts of the page that will be mounted on the site. This are bigger that a component but smaller that a page. Once all the parts of a page are replaces by parts then a page, or container, must be created. Parts can have redux, and should if there is some logic on them. Although they will be mounted on different react trees the store and reducer will still be the same.
57+
58+
### Create with hygen
59+
60+
When creating any component run the command `npm run new:component`. This will prompt some questions on the console for the creation of it.
61+
62+
- Type of component: Atom, Regular component or Part
63+
- If redux will be used or not
64+
- Name of the component. The name will be cammelized no matter what is writtel. The folder will have the firs letter lower case and the name of the component will have it upper case.
65+
66+
By creating the component this way all the basis will be set up for you:
67+
68+
- Folder and files created
69+
- Imports on the atoms, components or parts `index.js`
70+
- If the component is a `part` the render function for it will also be created on the render object
71+
- A base story file will be create
72+
- A base test file will be created. This file will have the snapshot and render tests already created
73+
- If the component uses redux then redux files and connections will be setup for the component and the story
74+
75+
### Deleting a component
76+
77+
When deleting a component make sure to remove the `imports/exports` on the `index.js` files and to remove the function from `src/render.js`
78+
79+
### Custom styles
80+
81+
Although `bootstrap` and `react-bootstrap` are being used there might be a situation when custom styles have to be added. In this case css modules should be used. **This should be used only when there is no other option. The main styles should be the ones from bootstrap**
82+
83+
## How to use it
84+
85+
Once the parts are created they have to be mounted on the clubOS site. Before this can happen the project must be built and used from the `technique-web` code base. To do this there are two options:
86+
87+
- Create a npm package
88+
- update the version in package.json.
89+
- push the code in branch. When the code is merged in main branch, it will get auto deploy to github Package.
90+
- Create `Personal access token` with the `write:packages` scope on Github to use in other project like `technique-web`.
91+
- Create a new file in root of the project with name `.npmrc` and write below line in it and replace YOUR_GITHUB_TOKEN with your `Personal access token`.
92+
`@techniquesoftware:registry=https://npm.pkg.github.com/`
93+
`//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN`
94+
- Import the library into `technique-web` and use it like npm install @techniquesoftware/component-library@1.0.2 Version can be use as per requirement.
95+
96+
Once the library is in the `technique-web` project the way to add a component is easy.
97+
98+
First create a div where the component should go with an unique id. This is the div where the component will be mounted to
99+
100+
```html
101+
<div id="new-phone-inquiry"></div>
102+
```
103+
104+
Secondly create a scrip in the same page that will import `render` from the library and it will call a function depending on what part should be mounted. The function has to be called with an `id` argument that is going to be the same as the id of the div created above. It can also have andother argument name `props` with all the different props that should be sent to the part component. The differen functions of the `render` object can be found on the [render file](./src/render.js)
105+
106+
```html
107+
<script type="module">
108+
import { render } from '/technique-web/js/react/pkg/index.js';
109+
110+
render.newPhoneInquiry({
111+
id: 'new-phone-inquiry',
112+
props: {
113+
onSubmit: () => console.log('submiting'),
114+
},
115+
});
116+
</script>
117+
```
118+
119+
The end result might look like this
120+
121+
```html
122+
<div id="new-phone-inquiry"></div>
123+
124+
<script type="module">
125+
import { render } from '/js/react/pkg/index.js';
126+
127+
render.newPhoneInquiry({
128+
id: 'new-phone-inquiry',
129+
props: {
130+
onSubmit: () => console.log('submiting'),
131+
},
132+
});
133+
</script>
134+
```
135+
136+
The path from where render is being imported might change depending on where the libray is located.
137+
138+
### Multiple parts in a same page
139+
140+
It is posible to add several parts in a same page. Just create a div with a unique `id` for each part to be render and call the specific functions.
141+
142+
```html
143+
<div id="new-phone-inquiry"></div>
144+
<div id="messages"></div>
145+
<div id="follow-ups"></div>
146+
147+
<script type="module">
148+
import { render } from '/js/react/pkg/index.js'
149+
150+
render.newPhoneInquiry({
151+
id: 'new-phone-inquiry',
152+
props: {
153+
onSubmit: () => console.log('submiting')
154+
}
155+
})
156+
157+
render.newPhoneInquiry({
158+
id: 'messages',
159+
props: {
160+
messages: {...}
161+
}
162+
})
163+
164+
render.newPhoneInquiry({ id: 'follow-ups' })
165+
</script>
166+
```
167+
168+
## Testing
169+
170+
Tests are done using `jest` and `react-testing-library`. Component tests must cover everything that depends on props and internal logic. No need to test styles if they are hardcoded.
171+
172+
Redux actions, reducers, selectors and sagas should also be tested.
173+
174+
A test coverage of 75 is accepted. Anything below that should not be merged into `main`

‎index.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lerna.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"packages": [
3+
"src/*"
4+
],
5+
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
6+
"useWorkspaces": true,
7+
"version": "0.0.0"
8+
}

‎lib/index.esm.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/index.esm.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
{
2+
"name": "technique-component-library",
3+
"version": "1.0.3",
4+
"description": "This is a WIP to reconstruct our two component libraries into one",
5+
"main": "index.js",
6+
"module": "lib/index.esm.js",
7+
"types": "lib/index.d.ts",
8+
"scripts": {
9+
"test": "echo \"Error: no test specified\" && exit 1",
10+
"storybook": "start-storybook -p 6006",
11+
"build-storybook": "build-storybook",
12+
"link": "npx lerna link",
13+
"bootstrap": "npx lerna bootstrap --hoist --ci ",
14+
"deploy": " gitpkg publish && cd ../..",
15+
"publish": "npx lerna publish from-git && git push && npm run deploy"
16+
},
17+
"repository": {
18+
"type": "git",
19+
"url": "git+https://github.com/rsparks-club-os/technique-component-library.git"
20+
},
21+
"keywords": [],
22+
"author": "",
23+
"license": "ISC",
24+
"bugs": {
25+
"url": "https://github.com/rsparks-club-os/technique-component-library/issues"
26+
},
27+
"homepage": "https://github.com/rsparks-club-os/technique-component-library#readme",
28+
"devDependencies": {
29+
"@babel/cli": "^7.2.3",
30+
"@babel/core": "^7.21.3",
31+
"@babel/plugin-proposal-class-properties": "^7.3.0",
32+
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
33+
"@babel/plugin-transform-arrow-functions": "^7.2.0",
34+
"@babel/plugin-transform-runtime": "^7.17.0",
35+
"@babel/plugin-transform-typescript": "^7.3.2",
36+
"@babel/preset-env": "^7.3.1",
37+
"@babel/preset-react": "^7.0.0",
38+
"@babel/preset-typescript": "^7.1.0",
39+
"@material-ui/core": "4.12.4",
40+
"@material-ui/icons": "^4.0.0",
41+
"@rollup/plugin-alias": "^3.1.9",
42+
"@rollup/plugin-commonjs": "^21.1.0",
43+
"@rollup/plugin-image": "^3.0.1",
44+
"@rollup/plugin-json": "^4.1.0",
45+
"@rollup/plugin-node-resolve": "^13.3.0",
46+
"@rollup/plugin-replace": "^3.0.1",
47+
"@storybook/addon-actions": "^6.5.16",
48+
"@storybook/addon-essentials": "^6.5.16",
49+
"@storybook/addon-interactions": "^6.5.16",
50+
"@storybook/addon-knobs": "6.4.0",
51+
"@storybook/addon-links": "^6.5.16",
52+
"@storybook/addon-viewport": "5.1.11",
53+
"@storybook/addons": "5.1.11",
54+
"@storybook/builder-webpack4": "^6.5.16",
55+
"@storybook/manager-webpack4": "^6.5.16",
56+
"@storybook/preset-scss": "^1.0.3",
57+
"@storybook/react": "^6.5.16",
58+
"@storybook/testing-library": "^0.0.13",
59+
"@testing-library/dom": "^8.11.3",
60+
"@testing-library/jest-dom": "^5.16.1",
61+
"@testing-library/react": "^12.1.2",
62+
"@testing-library/user-event": "^13.5.0",
63+
"@types/autosuggest-highlight": "^3.1.0",
64+
"@types/classnames": "^2.2.7",
65+
"@types/enzyme": "^3.1.17",
66+
"@types/faker": "^4.1.0",
67+
"@types/jest": "24.0.0",
68+
"@types/jss": "^9.5.8",
69+
"@types/moment-timezone": "^0.5.6",
70+
"@types/node": "10.12.21",
71+
"@types/pluralize": "0.0.29",
72+
"@types/react": "^17.0.2",
73+
"@types/react-dom": "16.9.8",
74+
"@types/react-router": "5.1.18",
75+
"@types/react-router-dom": "^5.3.3",
76+
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
77+
"awesome-typescript-loader": "^5.2.1",
78+
"axios": "^0.21.4",
79+
"babel-jest": "^23.6.0",
80+
"babel-loader": "^8.3.0",
81+
"bootstrap": "5.1.3",
82+
"classnames": "^2.2.6",
83+
"core-js": "^3.0.1",
84+
"css-loader": "^5.2.6",
85+
"dotenv": "^16.0.0",
86+
"draft-convert": "^2.1.12",
87+
"draft-js": "^0.11.7",
88+
"enzyme": "^3.9.0",
89+
"eslint": "^8.7.0",
90+
"eslint-config-airbnb": "^19.0.4",
91+
"eslint-config-react-app": "^7.0.0",
92+
"eslint-plugin-jsx-a11y": "^6.5.1",
93+
"eslint-plugin-react": "^7.28.0",
94+
"eslint-plugin-react-hooks": "^4.3.0",
95+
"faker": "^4.1.0",
96+
"google-libphonenumber": "^3.2.31",
97+
"hoist-non-react-statics": "^3.3.2",
98+
"html-webpack-plugin": "^5.5.0",
99+
"humps": "^2.0.1",
100+
"husky": "^7.0.4",
101+
"hygen": "^6.1.0",
102+
"identity-obj-proxy": "^3.0.0",
103+
"immer": "^9.0.12",
104+
"invariant": "^2.2.4",
105+
"jest": "^23.1.0",
106+
"jss": "10.0.0-alpha.16",
107+
"lerna": "^6.6.1",
108+
"lodash": "^4.17.21",
109+
"moment": "^2.22.2",
110+
"moment-timezone": "^0.5.21",
111+
"multiselect-react-dropdown": "^2.0.25",
112+
"pluralize": "^7.0.0",
113+
"postcss": "^8.4.21",
114+
"prop-types": "^15.7.2",
115+
"react": "^17.0.2",
116+
"react-beautiful-dnd": "^13.1.1",
117+
"react-bootstrap": "^2.2.3",
118+
"react-dom": "^17.0.2",
119+
"react-draft-wysiwyg": "^1.14.7",
120+
"react-icons": "^4.3.1",
121+
"react-multi-select-component": "^4.3.4",
122+
"react-redux": "^7.2.6",
123+
"react-router": "5.3.4",
124+
"redux": "^4.1.2",
125+
"redux-saga": "^1.1.3",
126+
"reselect": "^4.1.5",
127+
"sass": "^1.49.7",
128+
"sass-loader": "^10.1.1",
129+
"storybook-css-modules-preset": "^1.1.1",
130+
"style-loader": "^2.0.0",
131+
"stylelint": "^14.3.0",
132+
"stylelint-config-css-modules": "^4.1.0",
133+
"stylelint-config-recommended": "^6.0.0",
134+
"stylelint-config-recommended-scss": "^6.0.0",
135+
"ts-jest": "^23.10.5",
136+
"tslint": "^5.12.1",
137+
"tslint-config-airbnb": "^5.11.1",
138+
"tslint-react": "^3.6.0",
139+
"typescript": "3.5.1",
140+
"webpack": "^5.76.3"
141+
},
142+
"peerDependencies": {
143+
"@types/jss": "^9.5.8",
144+
"react": "^17.0.2",
145+
"react-dom": "^17.0.2"
146+
},
147+
"dependencies": {
148+
"@material-ui/lab": "^4.0.0-alpha.61",
149+
"@storybook/addon-notes": "^5.3.21",
150+
"autosuggest-highlight": "^3.1.1",
151+
"notistack": "^0.9.7",
152+
"rollup-plugin-typescript2": "^0.34.1",
153+
"gitpkg": "^1.0.0-beta.1"
154+
},
155+
"workspaces": [
156+
"packages/*"
157+
]
158+
}

‎src/assets/icons/assessment.png‎

1.17 KB
Loading

0 commit comments

Comments
 (0)