A proper package development tool

[GermaVinsmoke]

As per the Google Doc report, I created, I wrote this at that time -

Ooni-components size is 3.5MB, very heavy. It doesn’t even say if it’s tree-shakeable or not. Checked using Bundlephobia

V0.4.7 - 3.5MB minified
V0.4.6 - 2.2MB minified

Our design system is using rebass components and we’re exporting almost every component of rebass. So, I thought of investigating what all components are really being used. Went through 100 files in explorer repo importing ooni-components. Most of them are using these 10 components from the design system.

Flex
Box
Container
Link
Heading
Text
Select
Label
Input
Button

Note - The same case is with ooni run and probe-desktop.

We can use a module builder tool like tsdx which provides typescript support, comes with storybook also, tree-shaking, jest for testing, prettier, rollup for bundling and many more.

We can also organize our storybook in this manner.

atoms /
  | - button
  | - link
  | - flex
molecules /
  | - all-components-using-atoms
ooni-run /
  | - components-only-used-in-run
desktop-probe /
  | - components-used-in-electron-app

As a added bonus, it also got Typescript support.

So, what I want to propose is we move to a new repo - @ooni/design-system which is setup using tsdx, as it'll solve a lot of problems for us - a webpack bundler, tree shaking, typescript, code-redability.

*Sarath's reply -

1. Typescript support
We do want to move as much as possible to Typescript. This project is a good place to start shifting towards Typescript.

2. Package size
This is the most urgent issue to address in this project. Theoretically, it should be tree-shakable. The problem is with the way it is bundled. Simply using webpack/rollup/parcel itself should solve a big part of this problem.

3. Rebass component problem
The exporting code in components/index.js and components/components.js is a big mess. Most of those components imported and re-exported from rebass don't even exist in rebass anymore.

4. tsdx suggestion
tsdx looks like a promising tool that can help maintain the project. We already use jest, eslint and storybook, this can add typescript and bundling. Good suggestion!