@superannotate/supernova NPM

Supernova

Supernova is an open source design system developed by SuperAnnotate.\ This library contains a rich set of native Angular UI components developed using Supernova Design System.

Get Started

Supernova's components can be used in any project in Angular environment.

Installation

Install package from npm: npm install @superannotate/supernova --save.

Usage

Import Supernova Design System's styles in your project's styles.scss:

@import '~@superannotate/supernova/assets/styles';

Import the component modules you want to use in your app.module.ts file:

import { AvatarModule, SidebarModule, ButtonModule } from '@superannotate/supernova'; 

@NgModule({
    imports: [
        AvatarModule, 
        SidebarModule, 
        ButtonModule
    ]
})
export class AppModule {}

Add import style in your project's angular.json under build -> options -> assets:

{
    "glob": "**/*",
    "input": "./node_modules/@superannotate/supernova/assets",
    "output": "/assets/"
}

Use the components:

<button sn-button size="small" text="Click me!" icon="settings"></button>

Development

Supernova is written as an Angular library. It uses Storybook to showcase its UI components.

git clone https://github.com/superannotateai/supernova.git
npm install
npm run storybook

Browser will open components in Storybook automatically.

NOTE: Notice we are using just the icon name(id) to reference it in all our components. This works because we generate a sprite on every build consisting of svg files listed in source icons. If you want to change/remove an icon or add your own icons, just do it in source icons, and run storybook again: this will generate a new sprite.svg file and the icon's id would be the name you gave to your new file.