sui-web-components

Web Components with Utility Props for styling

Usage no npm install needed!

<script type="module">
  import suiWebComponents from 'https://cdn.skypack.dev/sui-web-components';
</script>

README

Screenshot of Utility Web Components in action with the <sui-box> component

Built With Stencil

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/sui-web-components@0.0.1/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" />