Design system

A Vue 3 component library scaffolded with Vite, TypeScript, SCSS, Storybook, and Vitest.

Installation

npm install @by-muris/ui

App Setup

import { createApp } from 'vue'
import MurisDesignLib, { defaultTheme } from '@by-muris/ui'
import '@by-muris/ui/style.css'

import App from './App.vue'

const app = createApp(App)

app.use(MurisDesignLib, { theme: defaultTheme })
app.mount('#app')

The plugin injects theme tokens into :root[data-theme]. Components and composables are named exports and can be imported from the root package or dedicated subpaths.

<script setup lang="ts">
import { MdButton } from '@by-muris/ui/components'
import { useToast } from '@by-muris/ui/composables'

const toast = useToast({
  duration: 4000,
})
</script>

Theme authoring helpers are exported from @by-muris/ui/theme.

import { defaultTheme, extendTheme, type Theme } from '@by-muris/ui/theme'

const theme: Theme = extendTheme(defaultTheme, {
  name: 'acme',
  tokens: {
    primitives: {
      color: {
        blue: {
          500: '#3457d5',
        },
      },
    },
  },
})

Development

npm run storybook
npm run test
npm run build

After cloning or initializing git, run npm run prepare once to install Husky hooks.

Infrastructure

AWS CDK infrastructure for Design Syste.

Stack

The current stack creates:

• an S3 bucket
• a CloudFront distribution

Cost Explorer Tags

The stack applies these tags to taggable resources:

Project=design-system
ManagedBy=aws-cdk

To filter costs by these tags, activate their keys under AWS Billing and Cost Management:

Cost allocation tags -> User-defined cost allocation tags -> Activate

AWS can take up to 24 hours to show new tag keys for activation, and up to another 24 hours to activate them in Cost Explorer.

Commands

npm install
npm run build-storybook
npx cdk bootstrap
npm run synth
npm run deploy