Example with Next(typescript, scss) that uses UI shared components(typescript, scss) with Storybook examples

[7iomka]

Describe the feature you'd like to request

I want to start my new Next.js project, but I'm new with turborepo.
So I want to have example of repo with

• Next.js project with single page and single component used on it, which uses inside another component from UI shared components, AND it typescript types/interfaces (this is especially important, since the current examples do not show how to work correctly with importing interfaces, and if I try to export some interface from Ui component, and use it in next project, even from default example (which uses next-transpile-modules) I have error > export interface => Module parse failed: Unexpected token (6:7) You may need an appropriate loader to handle this file type, currently ...
  I don't found how to solve this issue (Maybe similar "yarn workspace" commands don't work martpie/next-transpile-modules#101, but I use npm and issue still present)
• Ui shared components with storybook examples. I prefer to make component folder and put inside it all related things like styles (.module.scss), storybook story (.stories.tsx), and other. So it would be really nice to see an example how to configure that (I mean - where do I write commands to run and install dependencies)
• Format on save feature (I use VsCode) working correctly according to the desired settings of tsconfig.json in each app/package, without need to open each folder in separate editor window
• (Optional) Typescript paths aliases working correctly and with sync with vscode path-intellisense.mappings
• (Optional) If I want to use Tailwind as a utility tool, and want to use same settings in Ui components AND in per-project components, where I need to setup this things to have it shareable for common use?

Describe the solution you'd like

Any worked solution

Describe alternatives you've considered

[kylemh]

Related: #983

[leerob]

Update: We now have a design system example using:

• 🏎 Turborepo — High-performance build system for Monorepos
• 🚀 React — JavaScript library for user interfaces
• 🛠 Tsup — TypeScript bundler powered by esbuild
• 📖 Storybook — UI component environment powered by Vite

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

[raiyansarker]

How to make it work with tailwind? I am trying really hard but it is not working!

[wileymc]

@leerob It would be super useful to see this example a bit more fleshed out with scss modules. Integrating turbo repo is proving to be a challenge with lots of scss modules and there is a lack of documentation on the best practice

[raiyansarker]

@leerob It would be super useful to see this example a bit more fleshed out with scss modules. Integrating turbo repo is proving to be a challenge with lots of scss modules and there is a lack of documentation on the best practice

I saw this repo, now I have a working design system.

[wileymc]

@leerob It would be super useful to see this example a bit more fleshed out with scss modules. Integrating turbo repo is proving to be a challenge with lots of scss modules and there is a lack of documentation on the best practice

I saw this repo, now I have a working design system.

Tailwind is great but compiling CSS/SCSS in a monorepo is a different beast