svelte-vitamin

Try to build on my own a svelte wrapper around vitamin design system

Goal is to do some experiments and maybe, be integrated in or replace @vtmn/svelte

Ideas

• only abstract markup and class mechanics, avoid state mechanics such as hide/show (for now?)
• try to find some logic to classes naming construction (still work in progress)
• inspired by the code simplicity of sveltestrap
• build as much as possible to catch up with the other wrappers
• Use kit and new packaging features

Overview

• light use of typescript (not much to do with it)
• storybook
• svelte/kit
• cover the existing css as much as possible (some features are not yet implemented)
• 12/18 components available

How to use in a Svelte App?

Install

npm install --save svelte-vitamin

and use it like that

<script>
  import { Button, Snackbar } from "svelte-vitamin";
  let clicked = 0;
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
  <Snackbar>
    Hello Vitamin {clicked ? clicked : ''}
    <Button
      size='small'
      variant="conversion"
      on:click={() => clicked++}>
      click me
    </Button>
  </Snackbar>
</main>

How to develop?

npm run dev # alias to npm run storybook for convenience

How to publish a new version?

# bump the root package.json (Important to avoid 403 on NPM)
npm version <patch|minor|major>
# bundle everything using svelte kit package command
# https://kit.svelte.dev/docs#packaging
npx svelte-kit package
# Publish to NPM
npm publish ./package