Utility Web Components

Component library built using Web Components and utility-props. Build and style your app with flexible and declarative components using "utility CSS" style props.

<sui-box width={[1, 0.5, 0.3]} bg="black" color="white" p="2"></sui-box>

Browse component documentation in Storybook.

Components

• <sui-base>
• <sui-box>
• <sui-button>
• <sui-input>
• <sui-link>
• <sui-select>
• <sui-switch>
• <sui-text>
• <sui-textarea>

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/whoisryosuke/sui-web-components.git
cd sui-web-components
yarn
yarn start

To build the component for production, run:

yarn build

To run the unit tests for the components, run:

yarn test

Need help? Check out the StencilJS docs here.

Using these component

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install sui-web-components --save
• Put a script tag similar to this <script src='node_modules/sui-web-components/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install sui-web-components --save
• Add an import to the npm packages import sui-web-components;
• Then you can use the element anywhere in your template, JSX, html etc

Storybook

yarn storybook

Requires production build of StencilJS components (for the ./dist/ folder). Run yarn build before running Storybook and after any changes to components. Can't use with StencilJS in development mode, requires different configuration, see here.

CSF Format

• To use the Web Component knobs, make sure to provide the default export {} with the web component name as a property. Use full component name (e.g. <sui-button> would be component: "sui-button"). Then make sure to add the decorator and options properties with the knobs and knob panel name:

import { withKnobs } from "@storybook/addon-knobs";
import { withWebComponentsKnobs } from "storybook-addon-web-components-knobs";

export default {
  title: "Demo",
  component: "sui-button",
  decorators: [withKnobs, withWebComponentsKnobs],
  parameters: { options: { selectedPanel: "storybookjs/knobs/panel" } }
};

MDX Format

• Import components from production build: import { Link } from "../../../dist/index.js";
• To use the Web Component knobs, make sure to provide <Meta> component with the web component name as a prop. Use full component name (e.g. <sui-button> would be component: "sui-button").

import { withWebComponentsKnobs } from "storybook-addon-web-components-knobs";
import { withKnobs, text, number } from "@storybook/addon-knobs";

<Meta
  title="Components/Link"
  component={Link}
  parameters={{
    component: "sui-link",
    decorators: [withKnobs, withWebComponentsKnobs],
    options: { selectedPanel: "storybookjs/knobs/panel" }
  }}
/>

Your description here

## Example

<Preview withToolbar>
  <Story name="Simple">
    {html`
      <sui-link href="#">Hello World</sui-link>
    `}
  </Story>
</Preview>

## Props

<Props of="sui-link" />