SOON_ Component Library
A collection of SOON_ Components built with Svelte.
npm install @thisissoon/svelte-components
Development
A Svelte component library based on the sveltejs/component-template using rollup to run the build process.
-
Install
npm install -
Run storybook
npm run storybook -
Build
npm run build
Storybook
Storybook helps you build UI components in isolation from your app's business logic, data, and context. That makes it easy to develop hard-to-reach states. Save these UI states as stories to revisit during development, testing, or QA.
Run the storybook UI with npm run storybook.
Each component in src/components has a storybook entry to act as a demo
playground to demonstrate the component in use.
Consuming components
To use with a Svelte app you can import the source code directly, provided you're using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.
Plain JavaScript module (dist/index.mjs) or UMD script (dist/index.js) bundles are available for using the component library with another JS framework. For example:
import { Grid } from "@thisissoon/svelte-components";
const grid = new Grid({
target: document.getElementById("my-grid"),
props: {
smCols: 12,
mdCols: 6,
lgCols: 6
},
});