JS package reorganization

[pringshia]

Implements #501

Overview

4 new user-facing packages added as a replacement to annotation-toolkit:

• @annotated/shell
• @annotated/bbox
• @annotated/keypoint
• @annotated/video-player

1 new dev-facing package added:

• annotated/dev-scripts

Updated Storybook w/ new packages

An updated storybook added that refers to these new packages has been added to docs/sb.
docs/storybook currently exists during this transition phase, and will be deleted in an upcoming PR.

yarn 3 workspaces will now be required for package administration

A GitHub action has been setup to validate the monorepo configuration.

Acceptance criteria

Successfully run the storybook project with all components being pulled in from @annotated/* as opposed to the monolithic annotation-toolkit package.

# Before this PR:
$ cd packages/annotation-toolkit
$ npm run dev
$ cd ../../docs/storybook
$ npm run start

# After this PR:
$ yarn install
$ yarn build-all
$ yarn sb

Details & methodology

A subpackage can now invoke the build process from dev-scripts instead of re-implementing on it's own.

Example: @annotated/shell's package.json:

{
  "scripts": {
     "build": "dev-scripts build", // default is production build
     "build:dev": "BUILD_END=development dev-scripts build",
  }
}

---

To-Do

• Lay out directory structure
• Set up yarn workspaces w/ Lerna (guide)
  • Can we get it working with React Storybook? Yarn 2: Support Yarn v2 "Berry" storybookjs/storybook#9527
    • UPDATE - got it working, albeit with many bumps along the way. Will post an issue up highlighting these with the storybook team later.
    • Is this critical? Should this be timeboxed?
    • If we cannot is there a mitigation strategy to adapt non-workspace projects to work with workspace projects?
    • Barring all else, do we rollback and use just lerna instead, giving up on yarn workspace?
  • Migrate existing storybook configuration to new yarn berry-enabled setup
• Consolidate build scripts and common logic into @annotated/dev-scripts. Inspo: kcd-scripts
• Set up a GitHub Action to test monorepo setup. (Add a Github Action for testing Yarn 3 #574)

Future Work

• Test publish. Type up a release guide on the publishing/deployment workflow ([Proposal] Release process for UI npm packages #499)
• Add READMEs and documentation for each subdirectory in @annotated/

[codecov-commenter]

Codecov Report

Merging #565 (0def984) into main (dfc9857) will increase coverage by 0.05%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main     #565      +/-   ##
==========================================
+ Coverage   65.31%   65.36%   +0.05%     
==========================================
  Files          79       79              
  Lines        7297     7297              
==========================================
+ Hits         4766     4770       +4     
+ Misses       2531     2527       -4     

Impacted Files	Coverage Δ
mephisto/abstractions/architects/mock_architect.py	91.50% <0.00%> (+2.61%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dfc9857...0def984. Read the comment docs.

[JackUrb]

Overall I'm a huge fan of this refactor. I think this gives us a lot of room for growth moving forward, while also maintaining plenty of flexibility for people who want to use parts of annotated for their own projects.

Some questions inline (potentially short discussions) on documentation and possibly dead commented code.

[JackUrb]

TODO?

[JackUrb]

Also TODO? Overall I think that the structure of this lends well to us having strong component-based documentation, but I don't know how much of that you'd prefer to offload into the storybook (in which case perhaps we can do some kind of generator for these readmes, or via docusaurus?)

[pringshia]

yeah I think we need to figure out where to go from here. I do like how tools like radix and blueprintjs do their documentation, e.g. https://www.radix-ui.com/docs/primitives/components/switch

Docusaurus 2.0 has MDX integration with could allow us to write markdown docs with inline components. I'm leaning towards this option.

Definitely need to have a doc day soon lol

[s0mya]

Would a generic version that I derived from this code be useful in this package?

https://github.com/fairinternal/sketch_rig/blob/main/ui/www/src/components/PoseEditor.tsx

[pringshia]

yes.. this looks great! the only thing is that I don't have typescript support set up yet in @annotated/dev-scripts. I'd like to add that in, but it will most likely be a follow up PR. I'll update to your version of the PoseEditor in a follow-up PR along with that (this also makes for a great test case).

[s0mya]

Thanks for work Pratik! I'm looking forward to easily pulling in these components for the next project.

[pringshia]

Thanks for the feedback guys. A second and third set of eyes is especially helpful in large PRs like these where it's easy to be distracted by the forest over the trees.

I cleaned up comments, added some development docs for Yarn, cleaned up stray initialization artifacts from create-react-app that was used for bootstrapping the storybook, and also finished the migration and replacement of the old storybook.

Also using this issue to track some of the larger documentation initiatives: #505