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)

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "@babel/plugin-transform-runtime",

.eslintrc

@@ -1,5 +1,10 @@
 {
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
   "overrides": [
     {
       "files": [
@@ -11,9 +16,9 @@
     },
     {
       "files": [
-        "src/**/*.{js,jsx}",
-        "spec/**/*.{js,jsx}",
-        "stories/**/*.{js,jsx}"
+        "src/**/*.{js,jsx,ts,tsx}",
+        "spec/**/*.{js,jsx,ts,tsx}",
+        "stories/**/*.{js,jsx,ts,tsx}"
       ],
       "env": {
         "browser": true
@@ -117,6 +122,7 @@
     }
   },
   "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
     "class-methods-use-this": 0,
     "function-paren-newline": ["error", "consistent"],
     "func-names": ["error", "never"],
@@ -141,9 +147,22 @@
     "prefer-destructuring": "warn",
     "quotes": ["error", "single", { "allowTemplateLiterals" : true }],
     "radix": 0,
+    "react/jsx-filename-extension": ["error", {
+      "extensions": [".tsx", ".jsx"]
+    }],
     "react/jsx-fragments": 0,
     "symbol-description": 0,
     "template-curly-spacing": "off",
-    "indent": "off"
+    "indent": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+   ]
   }
 }

.github/ISSUE_TEMPLATE/-ui-design-system--issue.md

@@ -0,0 +1,35 @@
+---
+name: "'ui-design-system' issue"
+about: Submit an issue for 'ui-design-system'
+title: "[UIDS]"
+labels: ''
+assignees: ''
+
+---
+
+---
+name: 'ui-design-system' issue
+projects: "user-interviews/15"
+about: An issue template for 'ui-design-system'
+title: "[UIDS]"
+assignees: ''
+
+---
+
+## Description
+
+[Description of the problem / solution, screenshots, explanation of approach, links to docs, etc.]
+
+## User Stories
+
+- As a [persona], I want [feature/task] so that [benefit/reason].
+
+## Acceptance Criteria
+
+- [Criteria 1]
+- [Criteria 2]
+- [Criteria 3]
+
+## Screenshots (if applicable)
+
+[Add screenshots, if relevant, to provide visual context.]

.github/PULL_REQUEST_TEMPLATE/-ui-design-system--pr.md

@@ -0,0 +1,33 @@
+closes #[issue]
+
+### Context
+Description of the problem / solution, screenshots, explanation of approach, links to docs, etc. 
+
+Figma prototypes: 
+
+[Chromatic link](https://github.com/user-interviews/ui-design-system#chromatic-visual-testing--live-feedback):
+
+### Reviewer Expectations
+Primary Reviewer:
+
+Secondary Reviewer(s): 
+
+CC: 
+
+
+### Checklist
+
+<details open>
+  <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>
+
+~~Strike through~~ any items that are not applicable to this pull request.
+
+- [ ]  **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.
+- [ ]  **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)
+- [ ]  **Tests**: Ensure that all tests are passing and that new tests have been added to cover any new functionality.
+
+**Frontend**
+- [ ]  **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.
+- [ ]  **Cross-browser compatibility**: Test the application in multiple browsers to ensure consistent behavior and appearance across different platforms.
+- [ ]  **Mobile responsiveness**: Confirm that the application looks and functions well on various screen sizes and devices, adjusting layout and functionality as needed.
+</details>

.storybook/main.js

@@ -25,9 +25,12 @@ const config = {
   stories: [
     '../stories/Intro.stories.mdx',
     '../src/**/*.stories.@(js|mdx)',
+    '../src/**/*.stories.@(ts|mdx)',
     '../src/**/*.stories.js[x]',
+    '../src/**/*.stories.ts[x]',
     '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.js[x]'
+    '../stories/**/*.stories.js[x]',
+    '../stories/**/*.stories.ts[x]'
   ],
   features: {
     storyStoreV7: false,
@@ -36,6 +39,9 @@ const config = {
     name: '@storybook/react-webpack5',
     options: { fastRefresh: true },
   },
+  typescript: {
+    check: true,
+  },
 };
 
 export default config;

README.md

@@ -163,25 +163,23 @@ If you are not able to or choose not to use the github actions described above,
 ## Developing against the Rails Server repo
 
 ### Starting up development
-1. run these commands inside the root of the DS repo:
+
+1. Add `RAILS_SERVER_PATH` to a `.env` of this application
+  *this will be the path to rails-server in your local machine*
+1. Run these commands inside the root of the DS repo:
+
 ````bash
-  yarn rs:link && yarn rs:link:watch
+  yarn rs:link
+  # or using nodemon
+  yarn rs:link:watch
 ````
+
 💡 at this point you should see a nodemon process running
 
-2. run these commands inside the root of the RS repo:
-````bash
-  bin/link-ds
-````
 ### Wrapping up development
-1. run these commands inside the root of the RS repo:
-````bash
-  bin/unlink-ds
-````
-2. run these commands inside the root of the DS repo:
+
+1. Run these commands inside the root of the DS repo:
+
 ````bash
   yarn rs:unlink
 ````
-
-#### 🤔 Snags
-- you'll have to manually refresh your browser tab, after the automatic refresh, to see your expected changes.

bin/link-rs

@@ -1,7 +1,13 @@
 #!/bin/bash
 
-yarn link
-cd node_modules/react
-yarn link
-cd ../../node_modules/react-dom
-yarn link
+source ./.env
+
+if [ -z ${RAILS_SERVER_PATH+x} ]; then
+  printf "Set RAILS_SERVER_PATH in your .env to link the DS to the RS\n"
+  exit 1
+fi
+
+yarn build
+yalc publish
+cd $RAILS_SERVER_PATH
+yalc link @user-interviews/ui-design-system

bin/unlink-rs

@@ -1,17 +1,13 @@
 #!/bin/bash
 
-unlink()
-{
-  local package_name="${2:-$1}"
+source ./.env
 
-  output=$(eval "yarn unlink $1")
+if [ -z ${RAILS_SERVER_PATH+x} ]; then
+  printf "Set RAILS_SERVER_PATH in your .env to link the DS to the RS\n"
+  exit 1
+fi
 
-  echo "$output"
-  echo "== $package_name unlinked =="
-}
-
-unlink '' 'DS package'
-unlink 'react'
-unlink 'react-dom'
-
-yarn install --force
+cd $RAILS_SERVER_PATH
+yalc remove @user-interviews/ui-design-system
+yalc installations clean @user-interviews/ui-design-system
+yarn --check-files

nodemon.json

@@ -1,6 +1,6 @@
 {
-  "exec": "yarn build",
-  "ext": "js,json,jsx,scss",
+  "exec": "bin/link-rs",
+  "ext": "js,json,jsx,ts,tsx,scss",
   "verbose": true,
   "watch": [
     "scss",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -18,6 +18,8 @@
     "@tiptap/extension-text": "^2.0.3",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
+    "@typescript-eslint/eslint-plugin": "^2",
+    "@typescript-eslint/parser": "^2",
     "react-bootstrap": "^2.5.0",
     "react-currency-input-field": "^3.6.10",
     "react-loading-skeleton": "^3.1.0",
@@ -29,14 +31,15 @@
     "uuid": "^7.0.2"
   },
   "scripts": {
-    "build": "NODE_ENV=production babel src --out-dir lib --copy-files",
+    "build": "NODE_ENV=production babel src --out-dir lib --copy-files --extensions '.js,.jsx,.ts,.tsx' && tsc",
     "build-storybook": "storybook build -s public",
     "build-storybook-docs": "storybook build -s public --docs",
+    "build-ts": "tsc",
     "chromatic": "npx chromatic",
     "lint": "eslint . --ext .js,.jsx",
     "prepublishOnly": "yarn build",
     "rs:link": "bin/link-rs",
-    "rs:link:watch": "./node_modules/nodemon/bin/nodemon.js",
+    "rs:link:watch": "nodemon",
     "rs:unlink": "bin/unlink-rs",
     "storybook": "storybook dev -p 9009 -s public",
     "test": "jest"
@@ -77,34 +80,38 @@
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.8.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.8.4",
+    "@babel/preset-typescript": "^7.22.5",
     "@babel/runtime": "^7.12.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/pro-regular-svg-icons": "^6.4.0",
     "@fortawesome/pro-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.5.3",
-    "@storybook/addon-a11y": "7.0.8",
-    "@storybook/addon-actions": "7.0.8",
-    "@storybook/addon-backgrounds": "7.0.8",
-    "@storybook/addon-controls": "^7.0.8",
-    "@storybook/addon-docs": "7.0.8",
-    "@storybook/addon-jest": "7.0.8",
+    "@storybook/addon-a11y": "7.4.1",
+    "@storybook/addon-actions": "7.4.1",
+    "@storybook/addon-backgrounds": "7.4.1",
+    "@storybook/addon-controls": "^7.4.1",
+    "@storybook/addon-docs": "7.4.1",
+    "@storybook/addon-jest": "7.4.1",
     "@storybook/addon-knobs": "7.0.2",
-    "@storybook/addon-links": "7.0.8",
-    "@storybook/addon-mdx-gfm": "7.0.8",
-    "@storybook/addon-storyshots": "7.0.8",
-    "@storybook/addon-storysource": "7.0.8",
-    "@storybook/addons": "7.0.8",
-    "@storybook/react": "7.0.8",
-    "@storybook/react-webpack5": "7.0.8",
+    "@storybook/addon-links": "7.4.1",
+    "@storybook/addon-mdx-gfm": "7.4.1",
+    "@storybook/addon-storyshots": "7.4.1",
+    "@storybook/addon-storysource": "7.4.1",
+    "@storybook/addons": "7.4.1",
+    "@storybook/react": "7.4.1",
+    "@storybook/react-webpack5": "7.4.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^13.5.0",
+    "@types/react": "16.14.0",
+    "@types/react-dom": "^16.0.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.0.6",
@@ -114,11 +121,10 @@
     "bootstrap": "5.1",
     "chromatic": "^6.7.0",
     "classnames": "^2.2.5",
-    "css-loader": "^3.4.2",
-    "eslint": "^6.8.0",
+    "css-loader": "^4.3.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-react-app": "^5.2.1",
-    "eslint-import-resolver-webpack": "^0.11.1",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-flowtype": "^4.7.0",
     "eslint-plugin-import": "^2.20.1",
@@ -129,7 +135,7 @@
     "jest": "^27.4.6",
     "jest-css-modules-transform": "^4.3.0",
     "node-sass": "^8.0.0",
-    "nodemon": "^2.0.15",
+    "nodemon": "^3.0.1",
     "prop-types": "^15.6.1",
     "react": "^18.0.2",
     "react-copy-to-clipboard": "^5.0.2",
@@ -139,13 +145,21 @@
     "react-test-renderer": "^18.0.2",
     "react-tracking": "8.1.0",
     "sass-loader": "^10.4.1",
-    "storybook": "7.0.8",
+    "storybook": "7.4.1",
     "storybook-addon-designs": "6.3.1",
     "style-loader": "^1.1.3",
     "styled-components": "^5.3.3",
-    "webpack": "^5.80.0"
+    "typescript": "^4.9.5",
+    "webpack": "^5.80.0",
+    "yalc": "^1.0.0-pre.53"
   },
   "resolutions": {
+    "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+    "istanbul-lib-instrument": "^6.0.0",
+    "jackspeak": "2.1.1",
+    "make-dir": "4.0.0",
+    "normalize-package-data": "^3.0.0",
+    "semver": "^7.5.3",
     "styled-components": "^5"
   },
   "description": "UI Storybook design system",
@@ -157,7 +171,8 @@
     "node": ">= 16 < 19",
     "yarn": "^ 1.22"
   },
-  "main": "lib/index.js",
+  "main": "lib/index",
+  "types": "lib/index",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },