Monorepo for WeVis design system documentation and cross-framework UI components
Documentation for how to use the package
Monorepo is managed by Turborepo
/ui: for @wevisdemo/ui NPM package- Cross-framework (Vue, Svelte and React) components with Mitosis
- CSS stylesheets for components and typography system with TailwindCSS
/docs: Documentation site with Astro
Mitosis allowed us to write a single .lite.tsx component and compiled to TypeScript React, Vue, and Svelte. Then, to make it importable by both JavaScript/TypeScript project, each component is transformed into a JavaScript format with corresponded type declaration (.d.ts) file.
flowchart TD
lite[Mitosis TS components *.lite.tsx] --> mitosis{Mitosis build}
mitosis --> tsx[React TS *.tsx]
mitosis --> vuets[Vue TS *.vue]
mitosis --> sveltets[Svelte TS *.svelte]
vuets --> vjsx(Strip off JSX type)
sveltets --> sjsx(Strip off JSX type)
tsx --> tsc{tsc}
tsc --> rjs[React JS *.js]
tsc --> dts[Type declarations *.d.ts]
vjsx --> vite{Vite}
vite --> vue[Vue JS *.js]
vite --> dts
sjsx --> sveltek{SvelteKit}
sveltek --> svelte[Svelte JS *.svelte]
sveltek --> dts
cssi[Stylesheet with Tailwind *.css] --> pcss{PostCSS}
pcss --> csso[Standard stylesheet *.css]
rjs --> pub{npm publish}
dts --> pub
vue --> pub
svelte --> pub
csso --> pub
pub --> pack[NPM Package]
Run development server, enable re-compile and hot-reload on changes
npm run devBuild packages and documentation site
npm run build