chore: Convert to monorepo (#613)

Converted this repo into a monorepo using turborepo on top of yarn workspaces. Directory structure is split into apps/ and packages/.

- Moved all iTwinUI-react and config files into packages/
- Added a vite playground under apps/ which uses the linked itwinui-react package just for testing components in a more reliable setting compared to storybook.
- In the future, the documentation website folder will also live under apps/

lockfile was recreated so there were a lot of random changes I had to make for new deps, mostly in tests.

.github/workflows/build.yml

@@ -15,20 +15,20 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
 
       - run: yarn audit
 
       - run: yarn lint
-      - run: yarn lint:copyright ${{ github.workspace }}/*/**.{js,ts,tsx}
+      - run: yarn workspace @itwin/itwinui-react lint:copyright ${{ github.workspace }}/*/**.{js,ts,tsx}
       - run: yarn build
-      - run: yarn build-storybook
+      - run: yarn workspace @itwin/itwinui-react build-storybook
 
   unit-test:
     name: Run unit tests
@@ -37,21 +37,21 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
 
-      - run: yarn test --coverage
+      - run: yarn workspace @itwin/itwinui-react test --coverage
 
       - name: Publish test results
         uses: EnricoMi/publish-unit-test-result-action@v1.16
         if: always()
         with:
-          files: 'coverage/junit.xml'
+          files: 'packages/iTwinUI-react/coverage/junit.xml'
           comment_mode: off
           check_name: 'Test results'
           fail_on: 'nothing'
@@ -63,14 +63,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
 
       # `&` symbol is needed as it prevents Storybook from running endlessly
-      - run: yarn storybook &
-      - run: yarn creevey
+      - run: yarn dev &
+      - run: yarn workspace @itwin/itwinui-react creevey

.github/workflows/publish-storybook.yml

@@ -13,13 +13,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
-        uses: actions/setup-node@v2.1.5
+      - name: Use Node 16.X
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
+          cache: yarn
 
       - run: yarn install --frozen-lockfile
-      - run: yarn build-storybook
+      - run: yarn workspace @itwin/itwinui-react build-storybook
 
       - name: Publish storybook
         uses: peaceiris/actions-gh-pages@v3.7.3

.github/workflows/release-please.yml

@@ -28,17 +28,17 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           registry-url: https://registry.npmjs.org/
 
       - run: yarn install
       - run: yarn build
 
       - run: npm publish --access public
-        working-directory: './lib'
+        working-directory: './packages/iTwinUI-react'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPMJS_PUBLISH_ITWIN }}
 

.gitignore

@@ -1,40 +1,13 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-node_modules/
-node_modules/*
-
-# testing
-coverage/
-coverage/*
-
-# production
-build/
-build/*
-
-# misc
+node_modules
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.turbo
 
-# Error/Debug logs
-npm-debug.log*
+# debug
 yarn-debug.log*
 yarn-error.log*
-debug.log*
 
-# Compiled Components
-lib/
-lib/*
-
-# Compiled Styles
-src/**/*.css
-
-# Storybook
-storybook-static/*
-
-# Yalc
-.yalc/*
-yalc.lock
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.vscode/settings.json

@@ -2,17 +2,10 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
-  "prettier.disableLanguages": ["vue", "markdown"],
   "files.insertFinalNewline": true,
-  "files.exclude": {
-    "**/src/**/*.css": true
-  },
-  "search.exclude": {
-    "**/src/**/*.css": true
-  },
-  "files.watcherExclude": {
-    "**/lib/**": true,
-    "**/src/**/*.css": true
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[markdown]": {
+    "editor.defaultFormatter": "vscode.markdown-language-features"
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true

apps/playground/.gitignore

@@ -0,0 +1,7 @@
+# Logs
+logs
+*.log
+
+dist
+dist-ssr
+*.local

apps/playground/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>iTwinUI test app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/playground/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "itwinui-playground",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@itwin/itwinui-react": "*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "configs": "*",
+    "linaria": "^2.3.1",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0",
+    "vite-plugin-linaria": "^1.0.0"
+  },
+  "prettier": "configs/prettier-config"
+}

apps/playground/src/App.tsx

@@ -0,0 +1,7 @@
+import { Button } from '@itwin/itwinui-react';
+
+const App = () => {
+  return <Button>Hello world</Button>;
+};
+
+export default App;

apps/playground/src/main.css

@@ -0,0 +1,8 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html {
+  color-scheme: dark light;
+}

apps/playground/src/main.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './main.css';
+import { styled } from 'linaria/react';
+import { useTheme } from '@itwin/itwinui-react';
+import App from './App';
+
+const Shell = () => {
+  const [theme, setTheme] = React.useState<'light' | 'dark'>(() =>
+    matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+  );
+
+  useTheme(theme);
+
+  return (
+    <Main>
+      <ThemeButton
+        onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
+      >
+        <svg aria-hidden viewBox='0 0 15 15'>
+          <path
+            fill='currentColor'
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d={
+              theme === 'light'
+                ? 'M7.5 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5ZM2.197 2.197a.5.5 0 0 1 .707 0L4.318 3.61a.5.5 0 0 1-.707.707L2.197 2.904a.5.5 0 0 1 0-.707ZM.5 7a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Zm1.697 5.803a.5.5 0 0 1 0-.707l1.414-1.414a.5.5 0 1 1 .707.707l-1.414 1.414a.5.5 0 0 1-.707 0ZM12.5 7a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2Zm-1.818-2.682a.5.5 0 0 1 0-.707l1.414-1.414a.5.5 0 1 1 .707.707L11.39 4.318a.5.5 0 0 1-.707 0ZM8 12.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0v-2Zm2.682-1.818a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 1 1-.707.707l-1.414-1.414a.5.5 0 0 1 0-.707ZM5.5 7.5a2 2 0 1 1 4 0a2 2 0 0 1-4 0Zm2-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z'
+                : 'M2.9.5a.4.4 0 0 0-.8 0v.6h-.6a.4.4 0 1 0 0 .8h.6v.6a.4.4 0 1 0 .8 0v-.6h.6a.4.4 0 0 0 0-.8h-.6V.5Zm3 3a.4.4 0 1 0-.8 0v.6h-.6a.4.4 0 1 0 0 .8h.6v.6a.4.4 0 1 0 .8 0v-.6h.6a.4.4 0 0 0 0-.8h-.6v-.6Zm-4 3a.4.4 0 1 0-.8 0v.6H.5a.4.4 0 1 0 0 .8h.6v.6a.4.4 0 0 0 .8 0v-.6h.6a.4.4 0 0 0 0-.8h-.6v-.6ZM8.544.982l-.298-.04c-.213-.024-.34.224-.217.4A6.57 6.57 0 0 1 9.203 5.1a6.602 6.602 0 0 1-6.243 6.59c-.214.012-.333.264-.183.417a6.8 6.8 0 0 0 .21.206l.072.066l.26.226l.188.148l.121.09l.187.131l.176.115c.12.076.244.149.37.217l.264.135l.26.12l.303.122l.244.086a6.568 6.568 0 0 0 1.103.26l.317.04l.267.02a6.6 6.6 0 0 0 6.943-7.328l-.037-.277a6.557 6.557 0 0 0-.384-1.415l-.113-.268l-.077-.166l-.074-.148a6.602 6.602 0 0 0-.546-.883l-.153-.2l-.199-.24l-.163-.18l-.12-.124l-.16-.158l-.223-.2l-.32-.26l-.245-.177l-.292-.19l-.321-.186l-.328-.165l-.113-.052l-.24-.101l-.276-.104l-.252-.082l-.325-.09l-.265-.06l-.292-.053Zm1.86 4.318a7.578 7.578 0 0 0-.572-2.894a5.601 5.601 0 1 1-4.748 10.146a7.61 7.61 0 0 0 3.66-2.51a.749.749 0 0 0 1.355-.442a.75.75 0 0 0-.584-.732c.062-.116.122-.235.178-.355A1.25 1.25 0 1 0 10.35 6.2c.034-.295.052-.595.052-.9Z'
+            }
+          ></path>
+        </svg>
+      </ThemeButton>
+      <App />
+    </Main>
+  );
+};
+
+const Main = styled.main`
+  margin: 2rem 1rem;
+`;
+
+const ThemeButton = styled.button`
+  all: unset;
+  display: inline-grid;
+  place-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:hover {
+    background: hsl(0 0% 0% / 0.2);
+  }
+
+  & > * {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`;
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Shell />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

apps/playground/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />