shui-components-bhabani

v1.0.0

Published

2 years ago

Beginning of the core component library, following the [SHUI Style Guide](https://www.gitbook.com/read/book/shui/shui-styleguide?key=1864-2301-6763). It's a selection of self-contained Web Components, ready to be used standalone or integrated in any JS li

Downloads

0High
0Medium
0Low

prasadb

SHUI Web Components

Beginning of the core component library, following the SHUI Style Guide. It's a selection of self-contained Web Components, ready to be used standalone or integrated in any JS library/framework that is able to render into the DOM.

Use it for prototyping and (in the future) in production.

List of components

Why web components?

Web components lets us encapsulate opinionated HTML/CSS/JS into standardized HTML elements. This allows different approaches to developing common components, while offering a familiar way of using them. As it is a standard W3 specification, it requires no dependency management in order to render the components. Once included, it just works.

Reading material:

Desktop vs. Touch

Components are aware of the device context, which means the same ones can be used on desktop or touch devices. We want to make sure the core of the component is shared and build whatever adaptations are needed directly into it.

Installation

NPM module

The library can be installed as a dependency through NPM.

npm install @ideo/shui-components --save

Then include it into your pipeline:

// ES6
import '@ideo/shui-components';
import '@ideo/shui-components/shui-components.css';

// ES5
require('@ideo/shui-components');
require('@ideo/shui-components/shui-components.css');

<!-- HTML -->
<script src="/node_modules/@ideo/shui-components/shui-components.js"></script>
<link rel="stylesheet" type="text/css" href="/node_modules/@ideo/shui-components/shui-components.css">

or even some other way. Whatever you prefer.

Standalone

Find the library files in /dist folder and include them like you see in examples above. Make sure to update the path so it points to the correct files.

Usage

Components get defined as HTML Custom elements as soon as the library loads. Now you should be able to use it in the <body> of your HTML file, or within the DOM rendering function of your frontend framework of choice. If you know HTML, the syntax should look familiar:

<sh-component-name attr="value">Children</sh-component-name>

Development

To serve public/index.html, start the development server:

$ npm start

Structure

src
└─── sh-component-name
      └─── src
      │     └─── sh-component-name.css
      │     └─── sh-component-name.js
      └─── example
      │     └─── sh-component-name.html
      └─── tests
            └─── TBD
      └─── README.md
└─── ...

Templates

We've created a React-flavored web component template for developing new components. To create a component that encapsulates another technology, create another template by using this one as a base.

Testing

To do.

Building

$ npm run build

Publishing

To build the production library, deploy examples, update the version and publish the package on NPM, run:

$ npm run publish

Browser support

Out of the box we support all modern browsers (Chrome, Firefox, Safari, Edge). It should work in IE11 too, however there is no guarantee it will render properly.

Components are packaged as Web components following the Custom Elements v1 (check support) specification. It has become very stable recently and is currently heavily supported by the Google Chrome team.

In case the browser you are targeting is not yet supported, consider including these polyfills.

NOTE: Currently the library comes bundled with webcomponents-hi-ce polyfill. This will probably be removed in the future.