Skip to content
Web Components with Utility Props for styling
TypeScript CSS HTML JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
src
.editorconfig
.gitignore
LICENSE
custom-elements.json
package-lock.json
package.json
readme.md
screenshot.png
stencil.config.ts
tsconfig.json

readme.md

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" />
You can’t perform that action at this time.