chore: Convert to monorepo

.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 workspace @itwin/itwinui-react storybook &
+      - 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,31 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # dependencies
-node_modules/
-node_modules/*
+node_modules
+.pnp
+.pnp.js
 
 # testing
-coverage/
-coverage/*
+coverage
 
-# production
-build/
-build/*
+# next.js
+.next/
+out/
+build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
-# Error/Debug logs
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-debug.log*
-
-# Compiled Components
-lib/
-lib/*
+.pnpm-debug.log*
 
-# Compiled Styles
-src/**/*.css
-
-# Storybook
-storybook-static/*
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Yalc
-.yalc/*
-yalc.lock
+# turbo
+.turbo

README.md

@@ -1,105 +1,43 @@
-<p align="center">
-  <img src="https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-logo.png" alt="iTwinUI logo" />
-</p>
+# Turborepo starter
 
-<h1 align="center">iTwinUI-react</h1>
+This is the monorepo for iTwinUI-react.
 
-<div align="center">
-
-  [![itwinui-react on npm](https://img.shields.io/npm/v/@itwin/itwinui-react)](https://www.npmjs.com/package/@itwin/itwinui-react)
-  [![Build status](https://github.com/iTwin/iTwinUI-react/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/iTwin/iTwinUI-react/actions/workflows/build.yml?query=branch%3Amain)
+## What's inside?
 
-</div>
+This repo uses [Yarn v1](https://classic.yarnpkg.com/lang/en/) as a package manager. It includes the following packages/apps:
 
-## What is iTwinUI-react?
+### Apps and Packages
 
-iTwinUI-react is a library built on top of the [iTwinUI](https://github.com/iTwin/iTwinUI) library.
-The goal of this project is to provide React components for using the styles and components from the core `iTwinUI` project. Check out the [demo website](https://itwin.github.io/iTwinUI-react/?path=/story/overview--overview) to see the components in action.
+- `packages/iTwinUI-react`: the main library containing all iTwinUI-react components.
+- `apps/playground`: a Vite app for testing iTwinUI-react components in a realistic setting.
 
----
+## Development
 
-## Installation
+### Build
 
-```
-npm install @itwin/itwinui-react
-```
-
-```
-yarn add @itwin/itwinui-react
-```
-
----
-
-## Usage
-
-Import the component you want and start using it!
-
-```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const App = () => (
-  <Button>Hello!</Button>
-);
-```
-
-Yes, that's really all you need as you can see in this live interactive demo:
+To build all apps and packages, run the following command from the monorepo root:
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/itwinui-react-minimal-example-xq2t3)
-
----
-
-## Theming
-
-By default, all components use the light theme but we also provide support for switching to dark theme in two different ways:
-
-- Use `ThemeProvider` in your root component where you can pass one of the following values:
-  - `light` (default)
-  - `dark`
-  - `os` (which respects the color scheme of the operating system)
-
-```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
-
-const App = () => (
-  <>
-    <ThemeProvider theme='dark' />
-    // Your code goes here.
-  </>
-);
+```console
+yarn run build
 ```
 
-- The `useTheme` hook also provides the same functionality as `ThemeProvider`.
+### Develop
 
-```jsx
-import { useTheme } from '@itwin/itwinui-react';
+To develop all apps and packages, run the following command from the monorepo root:
 
-const App = () => {
-  useTheme('dark');
-  return (
-    <>
-      // Your code goes here.
-    </>
-  );
-};
+```console
+yarn run dev
 ```
 
-*Note: You only need to use one of these methods, and it only needs to be done once.*
-
----
-
-## FAQ
-
-For a list of frequently asked questions, visit the [wiki](https://github.com/iTwin/iTwinUI-react/wiki/FAQ).
-
----
-
-## Contributing
-
-We welcome you to contribute and make this UI design system better. You can submit feature requests or bugs by creating an [issue](https://github.com/iTwin/iTwinUI-react/issues).
-Please read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI-react/blob/main/CONTRIBUTING.md) for more information.
+This will start the vite playground at https://localhost:4000 and storybook at https://localhost:6006
 
----
+## Useful Links
 
-## Changelog
+Learn more about the power of Turborepo:
 
-Read our [CHANGELOG.md](https://github.com/iTwin/iTwinUI-react/blob/main/CHANGELOG.md) to find recent changes.
+- [Pipelines](https://turborepo.org/docs/features/pipelines)
+- [Caching](https://turborepo.org/docs/features/caching)
+- [Remote Caching (Beta)](https://turborepo.org/docs/features/remote-caching)
+- [Scoped Tasks](https://turborepo.org/docs/features/scopes)
+- [Configuration Options](https://turborepo.org/docs/reference/configuration)
+- [CLI Usage](https://turborepo.org/docs/reference/command-line-reference)

apps/playground/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# yalc shit
+.yalc
+yalc.lock

apps/playground/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <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>