chore: Convert to monorepo #613

mayank99 · 2022-04-01T18:30:42Z

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 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/

Most of the changes in this PR are simply additions from turborepo/vite and moving files around (git should show those as "renamed").

The only real "changes" are listed below:

Node 16+ / npm 7+ restriction is now set in root package.json.
iTwinUI-react build was changed to emit files into cjs/esm folders instead of lib so that it works with symlinks. There is no need to copy package.json into lib anymore.
Some commands in github workflows had to be updated to reference itwinui-react instead of running from root.
A lot of jest tests which test for tippy.js visibility started failing so I made some changes to get them to pass.
Storybook was giving me the following error so I had to add webpack@5 in the root package.json:
- Storybook build fails with "Cannot find module 'webpack/lib/util/makeSerializable.js" after upgrading storybook packages to 6.3.0 storybookjs/storybook#15336
Eslint+prettier was failing so I upgraded some deps and made changes accordingly.
ReactNodeArray is deprecated and was showing an error in Breadcrumbs so I changed it to ReactNode[].

A lot of those issues have nothing to do with turborepo but I think they started appearing because dependencies were updated when lockfile was moved.

Best way to test these changes:

Create a fresh clone of this repo and switch to this branch.
Run yarn to install everything.
Run yarn dev to start vite playground and storybook together.

For running any bespoke commands, you can cd into packages/itwinui-react or just run it from the repo root by prefixing yarn workspace @itwin/itwinui-react.

packages/iTwinUI-react/stories/core/Header.stories.tsx

veekeys

Storybook and playground did not load for me, so could not really check much.

veekeys · 2022-04-08T09:18:17Z

package.json

-    "react",
-    "ui",
-    "ux"
+  "name": "turborepo-basic-shared",


Installing gave me lots of messages of incopatibilities and warning on deps.
We had pretty clean install, so would be nice to keep it like that

Well, there's a lot of new dependencies so it makes sense idk

veekeys · 2022-04-08T09:24:58Z

package.json

-    "classnames": "^2.2.6",
-    "react-table": "^7.1.0",
-    "react-transition-group": "^4.1.1"
+    "build": "turbo run build",


Running yarn dev gave me this output

As a result, storybook didnnt load, even though message said its successfully running

well ok.. idk anymore..
I ran storybook from react package, seemed ok.
Then i ran again yarn dev and now it gave no errors :/ I still have all those prettier changes too, so not sure what happened here

yarn dev should be fixed now.

Those errors were because the @itwin/itwinui-react package needs to be built before it can be used in the vite playground. So I added ^build dependency and removed the --parallel flag.

Storybook should not be affected, I think it might have been because you had some other storybook running somewhere else.

package.json

.gitignore

packages/iTwinUI-react/src/core/Table/Table.test.tsx

packages/iTwinUI-react/src/core/Tooltip/Tooltip.test.tsx

packages/iTwinUI-react/stories/core/Header.stories.tsx

packages/iTwinUI-react/tsconfig.json

gretanausedaite

Repo starts, unit test runs and passes.
Main concerns:

Why yarn dev starts both playground and storybook? Is there a reason why it's more useful to look at both when coding/creating than just playground or storybook?
Visual tests are missing (at least I didn't find how to run them). Also creevey as is won't run on Mac M1, we could use this new repo opportunity to switch to other testing suite or fix creevey.

mayank99 · 2022-04-14T12:43:47Z

Why yarn dev starts both playground and storybook? Is there a reason why it's more useful to look at both when coding/creating than just playground or storybook?

That's the default behavior of turborepo and it also makes sense to me. When I'm working on any component, I have both storybook and test app running.

When we add website to this repo, it will also start with the same command

Visual tests are missing (at least I didn't find how to run them). Also creevey as is won't run on Mac M1, we could use this new repo opportunity to switch to other testing suite or fix creevey.

What visual tests are missing?

Good point about using this opportunity. I don't think we will be able to fix creevey but we could switch to cypress or something.

Update: I was playing around with using stories as cypress tests and got it running after a couple hours. But it's a lot of changes, so maybe it should be in a separate PR?

mayank99 · 2022-04-18T20:03:13Z

I've fixed linting/formatting issues by making the following changes:

As per turborepo's recommendation, I moved all configs into a shared configs package and added that package as a dev dependency in other packages.
As per prettier recommendation, I'm now using only eslint-config-prettier and have removed eslint-plugin-prettier. This seems to fix the conflicts I was getting between prettier and eslint.
As per eslint recommendation, I've added quotes around paths, which seemed to fixed the problem of eslint doing nothing when running yarn lint.
As per lint-staged recommendation, I've added lint-staged command to root package.json to forward it to individual packages. Tested and it's working fine after I added --max-warnings=0 to the eslint command.

veekeys · 2022-04-21T11:44:42Z

packages/configs/eslint-preset.js

+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    'prettier',


we had this before too plugin:prettier/recommended

veekeys · 2022-04-21T11:45:22Z

packages/configs/eslint-preset.js

+  ],
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    'react/prop-types': 'off',


and here this "prettier/prettier": [ 1 ],

veekeys · 2022-04-21T12:19:15Z

packages/iTwinUI-react/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "configs/tsconfig.base.json",


is this path correct? it shows error to me

It is correct. configs is the name of the package where I've moved this file.

Screen.Recording.2022-04-21.at.9.59.13.AM.mov

veekeys · 2022-04-21T12:59:05Z

Linter seems to work fine. I have tried messing up code and checking if on save fixes minor things.
Also checked, if yarn lint will catch warning (like any type), which worked fine too.
Really appreciate the links for recommendations, cause otherwise, it would be hard to understand the structure.
Just weird, that tsconfig error was not notified anywhere.. wonder if there are some more like that left

veekeys

Good job!
Welcome, Turborepo!

.github/workflows/release-please.yml

bentleyvk

Monorepo it is

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.

mayank99 added 3 commits April 1, 2022 14:30

Move to monorepo setup

5f73759

Fix build

a483695

Oopsie

b54e98a

mayank99 force-pushed the mayank/monorepo branch from 1cc5acf to b54e98a Compare April 1, 2022 19:32

mayank99 added 3 commits April 1, 2022 15:48

Fix README

0e5631b

Fix deprecation

e6db666

Fix publish workflows

f1c4901

mayank99 marked this pull request as ready for review April 1, 2022 20:08

mayank99 requested a review from a team as a code owner April 1, 2022 20:08

mayank99 requested review from a team, veekeys and elephantcatdog and removed request for a team April 1, 2022 20:08

mayank99 added 2 commits April 1, 2022 16:17

Install webpack5 in root

c976537

Increase delay in Header tests

aad0c98

mayank99 force-pushed the mayank/monorepo branch from fc172d2 to a65f190 Compare April 1, 2022 20:33

Merge branch 'main' into mayank/monorepo

0a768df

mayank99 force-pushed the mayank/monorepo branch from 2965084 to 0a768df Compare April 1, 2022 20:46

mayank99 commented Apr 1, 2022

View reviewed changes

packages/iTwinUI-react/stories/core/Header.stories.tsx Outdated Show resolved Hide resolved

veekeys assigned mayank99 Apr 4, 2022

veekeys reviewed Apr 8, 2022

View reviewed changes

mayank99 and others added 8 commits April 8, 2022 10:50

Merge branch 'main' into mayank/monorepo

ee5dc5b

Fix typo in tsconfig

8de8b26

Clean up gitignore

724299d

Whoops bad merge

042926e

Remove leftovers

6693de4

Fix parallel yarn dev

4ca5ca5

Fix format command

3ea4d4f

tests

257efe9

Merge branch 'main' into mayank/monorepo

4639a7b

gretanausedaite reviewed Apr 14, 2022

View reviewed changes

mayank99 added 6 commits April 18, 2022 15:23

Fix linting and move configs into separate package

dcc01f4

Merge branch 'main' into mayank/monorepo

23d82d5

Match os theme in playground

457bcda

Disallow pushing with eslint warnings

2e6979f

Clean up eslintignore

94d170e

Fix bad merge

112ecd1

Merge branch 'main' into mayank/monorepo

be2eee7

mayank99 force-pushed the mayank/monorepo branch from 7bab9f8 to be2eee7 Compare April 20, 2022 21:29

Merge branch 'main' into mayank/monorepo

d3a1212

veekeys reviewed Apr 21, 2022

View reviewed changes

mayank99 added 4 commits April 21, 2022 10:04

Merge branch 'main' into mayank/monorepo

28cbabf

Wrap tooltip timer in act to fix warning

80daaea

Lock to patch version of turbo

0523924

Remove eslint-plugin-node

b6c1f5f

veekeys approved these changes Apr 21, 2022

View reviewed changes

mayank99 added 2 commits April 21, 2022 14:58

Include md files in package

0b92fe3

Fix copy-files syntax

13c0c35

bentleyvk reviewed Apr 22, 2022

View reviewed changes

.github/workflows/release-please.yml Show resolved Hide resolved

bentleyvk approved these changes Apr 22, 2022

View reviewed changes

mayank99 merged commit f849155 into main Apr 22, 2022

mayank99 deleted the mayank/monorepo branch April 22, 2022 13:05

mayank99 mentioned this pull request May 3, 2022

chore: Fix prettier inconsistencies from duplicate versions #651

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Convert to monorepo #613

chore: Convert to monorepo #613

mayank99 commented Apr 1, 2022 •

edited

veekeys left a comment

veekeys Apr 8, 2022

mayank99 Apr 8, 2022

veekeys Apr 8, 2022

veekeys Apr 8, 2022

mayank99 Apr 8, 2022

gretanausedaite left a comment

mayank99 commented Apr 14, 2022 •

edited

mayank99 commented Apr 18, 2022 •

edited

veekeys Apr 21, 2022

mayank99 Apr 21, 2022

veekeys Apr 21, 2022

mayank99 Apr 21, 2022

veekeys Apr 21, 2022

mayank99 Apr 21, 2022

veekeys commented Apr 21, 2022

veekeys left a comment

bentleyvk left a comment

chore: Convert to monorepo #613

chore: Convert to monorepo #613

Conversation

mayank99 commented Apr 1, 2022 • edited

veekeys left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gretanausedaite left a comment

Choose a reason for hiding this comment

mayank99 commented Apr 14, 2022 • edited

mayank99 commented Apr 18, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

veekeys commented Apr 21, 2022

veekeys left a comment

Choose a reason for hiding this comment

bentleyvk left a comment

Choose a reason for hiding this comment

mayank99 commented Apr 1, 2022 •

edited

mayank99 commented Apr 14, 2022 •

edited

mayank99 commented Apr 18, 2022 •

edited