search

vercel / turborepo

Build system optimized for JavaScript and TypeScript, written in Rust
https://turbo.build/repo/docs
MIT License
26.4k stars 1.84k forks source link

Example: Component library where each component it it's own package #209

Closed leerob closed 2 years ago

leerob commented 2 years ago

Describe the feature you'd like to request

A starter example component library where each component is published as its own NPM package.

Describe the solution you'd like

Describe alternatives you've considered

Maybe tsup is a better solution here? Open to suggestions.

Storybook doesn't seem like the right choice because it brings in webpack and Babel and ideally this solution avoids those entirely.

leerob commented 2 years ago

Another thought: maybe the component library includes our preferred way of staying - is it Tailwind? Stitches?

jaredpalmer commented 2 years ago

Great idea

kylemh commented 2 years ago

IMO #269 doesn't resolve this issue. The key thing missing would be per-component versioning.

I need to do this for work anyways, so I don't mind contributing back!

How far can I go with this template? Want me to integrate husky + lint-staged? Can I integrate Intuit's Auto? @leerob said no Storybook and I haven't been able to set it up anyways so I can go with Nextra.

AbdallahAbis commented 2 years ago

@kylemh @jaredpalmer @leerob any updates on this. The current template is very basic as it's missing testing and previewing components using storybook or something similar. also it misses Husky and lint-staged and maybe commitlint. also, it would be great if eslint is treated as tsconfig, so you can have both browser and server rules seprated.

kylemh commented 2 years ago

I'll definitely contribute as soon as I have any free time.

I did what I could to help by outlining what I think is missing here

I'm sure Jared is absolutely trying his best to tackle everything, always, all at once ❤️

leerob commented 2 years ago

Update: We now have a design system example using:

https://github.com/vercel/turborepo/tree/main/examples/design-system

krisb commented 2 years ago

Was going to raise an issue on best practice for nextjs + design system package + storybook, and stumbled on this one. Seems like the design system example is good basis. I had a couple of queries on it...

  1. Storybook is added to the app, not the package - I would expect storybook to be used to test and validate the components (atoms, molecules etc)
  2. An example using Image would be good as I think this presents some challenges due to the nextjs static image loading from public - a use case would be a background repeating image for texture or something similar - this is pretty much a major stumbling block for me at present
pravinfullstack commented 2 years ago

@leerob Is there any example available related to Vue & Storybook ?