@accera/solar-components

Solar Components

This is a implementation of Accera's Design System in WebComponents.

Why Stencil?

Stencil is a compiler for building Web Components with ease.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start developing new components in this lib, clone this repo to a new directory:

and run:

npm install
npm start

Follow Stencil docs to create your component.

This lib is build based on the Atomic Design, taking advantage of it modularity approach.

To build this lib for production, run:

npm run build

Components Guidelines

• Naming: All components should start with ac prefix;
• Styling: Don't use :slotted CSS selector, because it not works properly in Edge and it breaks the rules of Atomic Design.

Using this Library

With any application

• In your project, run npm install @accera/solar-components@beta --save
• Put a script tag similar to this in the head of your index.html:

<script src='node_modules/@accera/solar-components/dist/solar.js'></script>

• Then you can use an Solar element anywhere in your template, JSX, html etc
• Note that your project needs to support NPM packages

With React

• In your project, run npm install @accera/solar-components@beta --save
• In the main script of your application, update the code to something like:

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

// test-component is the name of our made up Web Component that we have
// published to npm:
import { defineCustomElements } from '@accera/solar-components/dist/loader';

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

• Anytime you want to use a web component from this library, you use:

import { SolarComponent } from '@accera/solar-components/dist/collection/react';

export function Example (props) {
  return (
    <SolarComponent
      componet="ac-input"
      type="password"
      helperText="This is your password"
      onChange={this.handleChange}
    />
  );
}

Theming

This library use CSS variables to work with themes. You can customize colors declaring it in your main CSS file:

:root {
  --color-primary-normal: #FF5E00;
  --color-primary-normal-rgb: 255, 94, 0;
  --color-primary-dark: #cc4b00;
  --color-primary-dark-rgb: 204, 75.2, 0;
  --color-primary-light: #ff7e33;
  --color-primary-light-rgb: 255, 126.2, 51;
  --color-secondary-normal: #0080FF;
  --color-secondary-normal-rgb: 0, 128, 255;
  --color-secondary-dark: #0066cc;
  --color-secondary-dark-rgb: 0, 102.4, 204;
  --color-secondary-light: #3399ff;
  --color-secondary-light-rgb: 51, 153.4, 255;
}

Check out the _default.theme.scss to discover all the theme variables that you can customize.

Extending your Style

Also, you can apply the global style of Solar in your application putting this code in the head of your index.html.

<link rel="stylesheet" href="@import "node_modules/@accera/solar-components/dist/solar.css">

Or import it in your CSS/SCSS using:

@import "node_modules/@accera/solar-components/dist/solar.css";

This will add some features like:

• Typography Styles (h1 h2 p...)
• Webkit scrollbar styles
• Tooltip util

You can also use the variables defined in this lib in your SCSS:

@import "node_modules/@accera/solar-components/dist/theme/variables";

Contributing

Consider follow these documentations to contribute in this repo:

• Stenciljs Styleguide
• Atomic Design

Best Practices

• WebComponents.org
• Google WebComponents
• Open WebComponents
• WebComponents Gold Standard