Sapient UI Library

Web components library for Sapient Design System.

It's built on top of Stenciljs.

Installation

Install dependencies and link module with:

yarn install

Note: Yarn Workspaces will create symlinks for all modules listed in property workspaces of root package.json.

Usage

Folders structure

This library is split in different packages:

• examples: some example apps that use the components
• packages/
  • core: the stencil project where web components implementation lives
  • react: the react project wrapper

Build

To get started, you should build all library modules that are define in packages/.

With this command in root folder:

yarn build

or if you want to edit the code in watch mode:

yarn build:watch

In that case it should be more readable to run each module in different terminal.

Deploy Storybook 📖

Storybook is deployed using Firebase Hosting.

yarn deploy

To test deployment locally you must log the CLI into Firebase with ./node_modules/.bin/firebase login after being added to the corresponding Firebase projects (see .firebaserc file to see project names).

Try your components

There are many ways to try your components.

In Stencil Sandbox

You can use any component in packages/core/src/index.html. In that case, you should run stencil server like this:

cd packages/core
yarn start

Note: Hot reload is not working very well in this mode, alternatively you can refresh your browser's tab.

In React App example

You can edit the code in examples/react-app as you want and run it with:

cd examples/react-app
yarn start

This app already depends on sapient-ui-core and sapient-ui-react.

Other ways

Feel free to imagine another way, what about:

• Create a Vue app ?
• Create an Angular app ?
• And so on

Storybook

cd packages/core
yarn build:watch
yarn storybook

Contributing

Let's make a branch and submit a PR. Don't hesitate to notify #pod-web-components to let others know 😉.

Enjoy 🥳.