Skip to content

Commit f037e33

Browse files
Merge release/2.2.0 into main branch (#1014)
* Update issue templates (#995) * Create -ui-design-system--pr.md (#996) * uses yalc for linking the DS to RS (#1000) * Bump @adobe/css-tools from 4.2.0 to 4.3.1 (#989) * upgrade storybook to 7.4.1 (#1005) * add TypeScript (#992) * Fixes up TS config (#993) * upgrade dependencies for semver (#1010) * adds necessary final step for unlinking rs (#1011)
1 parent a40b590 commit f037e33

26 files changed

+11772
-34137
lines changed

.babelrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"presets": [
33
"@babel/preset-env",
4-
"@babel/preset-react"
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
56
],
67
"plugins": [
78
"@babel/plugin-transform-runtime",

.eslintrc

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
{
2-
"extends": "airbnb",
2+
"extends": [
3+
"airbnb",
4+
"plugin:@typescript-eslint/recommended",
5+
"plugin:import/typescript"
6+
],
7+
"parser": "@typescript-eslint/parser",
38
"overrides": [
49
{
510
"files": [
@@ -11,9 +16,9 @@
1116
},
1217
{
1318
"files": [
14-
"src/**/*.{js,jsx}",
15-
"spec/**/*.{js,jsx}",
16-
"stories/**/*.{js,jsx}"
19+
"src/**/*.{js,jsx,ts,tsx}",
20+
"spec/**/*.{js,jsx,ts,tsx}",
21+
"stories/**/*.{js,jsx,ts,tsx}"
1722
],
1823
"env": {
1924
"browser": true
@@ -117,6 +122,7 @@
117122
}
118123
},
119124
"rules": {
125+
"@typescript-eslint/explicit-function-return-type": "off",
120126
"class-methods-use-this": 0,
121127
"function-paren-newline": ["error", "consistent"],
122128
"func-names": ["error", "never"],
@@ -141,9 +147,22 @@
141147
"prefer-destructuring": "warn",
142148
"quotes": ["error", "single", { "allowTemplateLiterals" : true }],
143149
"radix": 0,
150+
"react/jsx-filename-extension": ["error", {
151+
"extensions": [".tsx", ".jsx"]
152+
}],
144153
"react/jsx-fragments": 0,
145154
"symbol-description": 0,
146155
"template-curly-spacing": "off",
147-
"indent": "off"
156+
"indent": "off",
157+
"import/extensions": [
158+
"error",
159+
"ignorePackages",
160+
{
161+
"js": "never",
162+
"jsx": "never",
163+
"ts": "never",
164+
"tsx": "never"
165+
}
166+
]
148167
}
149168
}
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
name: "'ui-design-system' issue"
3+
about: Submit an issue for 'ui-design-system'
4+
title: "[UIDS]"
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
---
11+
name: 'ui-design-system' issue
12+
projects: "user-interviews/15"
13+
about: An issue template for 'ui-design-system'
14+
title: "[UIDS]"
15+
assignees: ''
16+
17+
---
18+
19+
## Description
20+
21+
[Description of the problem / solution, screenshots, explanation of approach, links to docs, etc.]
22+
23+
## User Stories
24+
25+
- As a [persona], I want [feature/task] so that [benefit/reason].
26+
27+
## Acceptance Criteria
28+
29+
- [Criteria 1]
30+
- [Criteria 2]
31+
- [Criteria 3]
32+
33+
## Screenshots (if applicable)
34+
35+
[Add screenshots, if relevant, to provide visual context.]
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
closes #[issue]
2+
3+
### Context
4+
Description of the problem / solution, screenshots, explanation of approach, links to docs, etc.
5+
6+
Figma prototypes:
7+
8+
[Chromatic link](https://github.com/user-interviews/ui-design-system#chromatic-visual-testing--live-feedback):
9+
10+
### Reviewer Expectations
11+
Primary Reviewer:
12+
13+
Secondary Reviewer(s):
14+
15+
CC:
16+
17+
18+
### Checklist
19+
20+
<details open>
21+
<summary>Please review and check off the following items before moving the pull request from <strong>draft</strong> to <strong>ready for review</strong>:</summary>
22+
23+
~~Strike through~~ any items that are not applicable to this pull request.
24+
25+
- [ ] **Perform self review**: Perform a self-review of your pull request and point out concerns and/or questions to reviewers in the summary above or as GitHub comments.
26+
- [ ] **Documentation**: Create or update Storybook documentation in the `.mdx` files for any componenents related to the PR. See [Storybook MDX docs](https://storybook.js.org/docs/react/writing-docs/mdx)
27+
- [ ] **Tests**: Ensure that all tests are passing and that new tests have been added to cover any new functionality.
28+
29+
**Frontend**
30+
- [ ] **Accessibility**: Check that the application meets accessibility standards, such as proper semantic HTML, keyboard navigation, and screen reader compatibility. See [Accessibility Notion document](https://www.notion.so/user-interviews/Accessibility-3b755f2931ad43a79d40b215f09c8995) for more details.
31+
- [ ] **Cross-browser compatibility**: Test the application in multiple browsers to ensure consistent behavior and appearance across different platforms.
32+
- [ ] **Mobile responsiveness**: Confirm that the application looks and functions well on various screen sizes and devices, adjusting layout and functionality as needed.
33+
</details>

.storybook/main.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,12 @@ const config = {
2525
stories: [
2626
'../stories/Intro.stories.mdx',
2727
'../src/**/*.stories.@(js|mdx)',
28+
'../src/**/*.stories.@(ts|mdx)',
2829
'../src/**/*.stories.js[x]',
30+
'../src/**/*.stories.ts[x]',
2931
'../stories/**/*.stories.mdx',
30-
'../stories/**/*.stories.js[x]'
32+
'../stories/**/*.stories.js[x]',
33+
'../stories/**/*.stories.ts[x]'
3134
],
3235
features: {
3336
storyStoreV7: false,
@@ -36,6 +39,9 @@ const config = {
3639
name: '@storybook/react-webpack5',
3740
options: { fastRefresh: true },
3841
},
42+
typescript: {
43+
check: true,
44+
},
3945
};
4046

4147
export default config;

README.md

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -163,25 +163,23 @@ If you are not able to or choose not to use the github actions described above,
163163
## Developing against the Rails Server repo
164164

165165
### Starting up development
166-
1. run these commands inside the root of the DS repo:
166+
167+
1. Add `RAILS_SERVER_PATH` to a `.env` of this application
168+
*this will be the path to rails-server in your local machine*
169+
1. Run these commands inside the root of the DS repo:
170+
167171
````bash
168-
yarn rs:link && yarn rs:link:watch
172+
yarn rs:link
173+
# or using nodemon
174+
yarn rs:link:watch
169175
````
176+
170177
💡 at this point you should see a nodemon process running
171178

172-
2. run these commands inside the root of the RS repo:
173-
````bash
174-
bin/link-ds
175-
````
176179
### Wrapping up development
177-
1. run these commands inside the root of the RS repo:
178-
````bash
179-
bin/unlink-ds
180-
````
181-
2. run these commands inside the root of the DS repo:
180+
181+
1. Run these commands inside the root of the DS repo:
182+
182183
````bash
183184
yarn rs:unlink
184185
````
185-
186-
#### 🤔 Snags
187-
- you'll have to manually refresh your browser tab, after the automatic refresh, to see your expected changes.

bin/link-rs

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
#!/bin/bash
22

3-
yarn link
4-
cd node_modules/react
5-
yarn link
6-
cd ../../node_modules/react-dom
7-
yarn link
3+
source ./.env
4+
5+
if [ -z ${RAILS_SERVER_PATH+x} ]; then
6+
printf "Set RAILS_SERVER_PATH in your .env to link the DS to the RS\n"
7+
exit 1
8+
fi
9+
10+
yarn build
11+
yalc publish
12+
cd $RAILS_SERVER_PATH
13+
yalc link @user-interviews/ui-design-system

bin/unlink-rs

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
#!/bin/bash
22

3-
unlink()
4-
{
5-
local package_name="${2:-$1}"
3+
source ./.env
64

7-
output=$(eval "yarn unlink $1")
5+
if [ -z ${RAILS_SERVER_PATH+x} ]; then
6+
printf "Set RAILS_SERVER_PATH in your .env to link the DS to the RS\n"
7+
exit 1
8+
fi
89

9-
echo "$output"
10-
echo "== $package_name unlinked =="
11-
}
12-
13-
unlink '' 'DS package'
14-
unlink 'react'
15-
unlink 'react-dom'
16-
17-
yarn install --force
10+
cd $RAILS_SERVER_PATH
11+
yalc remove @user-interviews/ui-design-system
12+
yalc installations clean @user-interviews/ui-design-system
13+
yarn --check-files

nodemon.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"exec": "yarn build",
3-
"ext": "js,json,jsx,scss",
2+
"exec": "bin/link-rs",
3+
"ext": "js,json,jsx,ts,tsx,scss",
44
"verbose": true,
55
"watch": [
66
"scss",

package.json

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "2.1.1",
3+
"version": "2.2.0",
44
"dependencies": {
55
"@tiptap/core": "^2.0.3",
66
"@tiptap/extension-bold": "^2.0.3",
@@ -18,6 +18,8 @@
1818
"@tiptap/extension-text": "^2.0.3",
1919
"@tiptap/pm": "^2.0.3",
2020
"@tiptap/react": "^2.0.3",
21+
"@typescript-eslint/eslint-plugin": "^2",
22+
"@typescript-eslint/parser": "^2",
2123
"react-bootstrap": "^2.5.0",
2224
"react-currency-input-field": "^3.6.10",
2325
"react-loading-skeleton": "^3.1.0",
@@ -29,14 +31,15 @@
2931
"uuid": "^7.0.2"
3032
},
3133
"scripts": {
32-
"build": "NODE_ENV=production babel src --out-dir lib --copy-files",
34+
"build": "NODE_ENV=production babel src --out-dir lib --copy-files --extensions '.js,.jsx,.ts,.tsx' && tsc",
3335
"build-storybook": "storybook build -s public",
3436
"build-storybook-docs": "storybook build -s public --docs",
37+
"build-ts": "tsc",
3538
"chromatic": "npx chromatic",
3639
"lint": "eslint . --ext .js,.jsx",
3740
"prepublishOnly": "yarn build",
3841
"rs:link": "bin/link-rs",
39-
"rs:link:watch": "./node_modules/nodemon/bin/nodemon.js",
42+
"rs:link:watch": "nodemon",
4043
"rs:unlink": "bin/unlink-rs",
4144
"storybook": "storybook dev -p 9009 -s public",
4245
"test": "jest"
@@ -77,34 +80,38 @@
7780
"@babel/cli": "^7.8.4",
7881
"@babel/core": "^7.8.4",
7982
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
83+
"@babel/plugin-proposal-private-methods": "^7.18.6",
8084
"@babel/plugin-proposal-private-property-in-object": "^7.21.0",
8185
"@babel/plugin-transform-runtime": "^7.12.1",
8286
"@babel/preset-env": "^7.8.4",
87+
"@babel/preset-typescript": "^7.22.5",
8388
"@babel/runtime": "^7.12.5",
8489
"@fortawesome/fontawesome-svg-core": "^1.2.28",
8590
"@fortawesome/free-brands-svg-icons": "^5.15.3",
8691
"@fortawesome/pro-regular-svg-icons": "^6.4.0",
8792
"@fortawesome/pro-solid-svg-icons": "^6.4.0",
8893
"@fortawesome/react-fontawesome": "^0.2.0",
8994
"@popperjs/core": "^2.5.3",
90-
"@storybook/addon-a11y": "7.0.8",
91-
"@storybook/addon-actions": "7.0.8",
92-
"@storybook/addon-backgrounds": "7.0.8",
93-
"@storybook/addon-controls": "^7.0.8",
94-
"@storybook/addon-docs": "7.0.8",
95-
"@storybook/addon-jest": "7.0.8",
95+
"@storybook/addon-a11y": "7.4.1",
96+
"@storybook/addon-actions": "7.4.1",
97+
"@storybook/addon-backgrounds": "7.4.1",
98+
"@storybook/addon-controls": "^7.4.1",
99+
"@storybook/addon-docs": "7.4.1",
100+
"@storybook/addon-jest": "7.4.1",
96101
"@storybook/addon-knobs": "7.0.2",
97-
"@storybook/addon-links": "7.0.8",
98-
"@storybook/addon-mdx-gfm": "7.0.8",
99-
"@storybook/addon-storyshots": "7.0.8",
100-
"@storybook/addon-storysource": "7.0.8",
101-
"@storybook/addons": "7.0.8",
102-
"@storybook/react": "7.0.8",
103-
"@storybook/react-webpack5": "7.0.8",
102+
"@storybook/addon-links": "7.4.1",
103+
"@storybook/addon-mdx-gfm": "7.4.1",
104+
"@storybook/addon-storyshots": "7.4.1",
105+
"@storybook/addon-storysource": "7.4.1",
106+
"@storybook/addons": "7.4.1",
107+
"@storybook/react": "7.4.1",
108+
"@storybook/react-webpack5": "7.4.1",
104109
"@testing-library/jest-dom": "^5.15.0",
105110
"@testing-library/react": "^12.1.2",
106111
"@testing-library/react-hooks": "^3.2.1",
107112
"@testing-library/user-event": "^13.5.0",
113+
"@types/react": "16.14.0",
114+
"@types/react-dom": "^16.0.0",
108115
"babel-eslint": "^10.0.3",
109116
"babel-jest": "^27.4.6",
110117
"babel-loader": "^8.0.6",
@@ -114,11 +121,10 @@
114121
"bootstrap": "5.1",
115122
"chromatic": "^6.7.0",
116123
"classnames": "^2.2.5",
117-
"css-loader": "^3.4.2",
118-
"eslint": "^6.8.0",
124+
"css-loader": "^4.3.0",
125+
"eslint": "^7.32.0",
119126
"eslint-config-airbnb": "^18.0.1",
120127
"eslint-config-react-app": "^5.2.1",
121-
"eslint-import-resolver-webpack": "^0.11.1",
122128
"eslint-plugin-babel": "^5.3.0",
123129
"eslint-plugin-flowtype": "^4.7.0",
124130
"eslint-plugin-import": "^2.20.1",
@@ -129,7 +135,7 @@
129135
"jest": "^27.4.6",
130136
"jest-css-modules-transform": "^4.3.0",
131137
"node-sass": "^8.0.0",
132-
"nodemon": "^2.0.15",
138+
"nodemon": "^3.0.1",
133139
"prop-types": "^15.6.1",
134140
"react": "^18.0.2",
135141
"react-copy-to-clipboard": "^5.0.2",
@@ -139,13 +145,21 @@
139145
"react-test-renderer": "^18.0.2",
140146
"react-tracking": "8.1.0",
141147
"sass-loader": "^10.4.1",
142-
"storybook": "7.0.8",
148+
"storybook": "7.4.1",
143149
"storybook-addon-designs": "6.3.1",
144150
"style-loader": "^1.1.3",
145151
"styled-components": "^5.3.3",
146-
"webpack": "^5.80.0"
152+
"typescript": "^4.9.5",
153+
"webpack": "^5.80.0",
154+
"yalc": "^1.0.0-pre.53"
147155
},
148156
"resolutions": {
157+
"@babel/helper-create-regexp-features-plugin": "^7.22.15",
158+
"istanbul-lib-instrument": "^6.0.0",
159+
"jackspeak": "2.1.1",
160+
"make-dir": "4.0.0",
161+
"normalize-package-data": "^3.0.0",
162+
"semver": "^7.5.3",
149163
"styled-components": "^5"
150164
},
151165
"description": "UI Storybook design system",
@@ -157,7 +171,8 @@
157171
"node": ">= 16 < 19",
158172
"yarn": "^ 1.22"
159173
},
160-
"main": "lib/index.js",
174+
"main": "lib/index",
175+
"types": "lib/index",
161176
"publishConfig": {
162177
"registry": "https://npm.pkg.github.com/"
163178
},

0 commit comments

Comments
 (0)