Wevis's Design Systems

Monorepo for WeVis design system documentation and cross-framework UI components

Documentation for how to use the package

🍱 Project structure

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

🏗️ How cross-framework UI package work

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]

Loading

🪄 Commands

Run development server, enable re-compile and hot-reload on changes

npm run dev

Build packages and documentation site

npm run build