Wads NPM | npm.io

WADS Library

Downloads

WADS is a Design System built entirely with StencilJS and crafted from the ground up to be Easy to Integrate, Easy to Use and Easy to Extend

What is Easy to Integrate?

With this, we mean that the library must be accessible and easy to install on as many frameworks/libraries as possible, providing detailed guidelines for developers and providing them with the best approach.

Easy to use?

Every component is simple to use and fits well on different environments.

Easy to extend?

The Open-Closed principle tells us that a good software architecture must be open to extension, but not for modification. With that in mind, we always ensure that every approach we follows meets this requirement, allowing developers to change how the components look and behave in different scenarios.

Getting started

For using wads the first step is to add the library as a project dependency

npm install wads --save

Now you are ready for starting the setup process!

Seting up WADS on an Angular Project

For using the WADS Library within an Angular CLI project follow these steps:

Include the CUSTOM_ELEMENTS_SCHEMA constant in any module that renders wads components

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Call the defineCustomElements() function from the main.ts file.

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from 'wads/loader';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  catch(err => console.log(err));
defineCustomElements();

Include the WADS Library global styles on your styles.scss file

# styles.scss
@import url('wads/dist/wads/wads.css');

That's it! You should now be able to use wads components inside your app!

Seting up WADS on a React Project

With an application built using the create-react-app script the easiest way to include the component library is to call defineCustomElements() from the index.js file. Note that in this scenario applyPolyfills is needed if you are targeting Edge or IE11.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { applyPolyfills, defineCustomElements } from 'wads/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements();
});

Then include the global styles

# index.css
@import url('wads/dist/wads/wads.css');

No frameworks/libraries setup

No complex JS setups? We got you covered! Integrating WADS to a project without a JavaScript framework is straight forward. If you're using a simple HTML page, you can add your component via a script tag. For example, adding the CDN reference like this:

<html>
  <head>
    <script src="https://unpkg.com/wads/dist/wads/wads.esm.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/wads/dist/wads/wads.css" />
  </head>
  <body>
    <wads-typography>I'm a Web Componet</wads-typography>
  </body>
</html>

Thanks for using our Design System!

WADS Dev Team