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
  },
});