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
- 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
- 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
Install
npm install --save svelte-vitamin
and use it like that (see by yourself)
<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>
npm run dev # alias to npm run storybook for convenience
# 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
git push
# Publish to NPM
npm publish ./package
# And do not forget to publish the release on github