spoton-lib

SpotOn React.js UI Kit

⚠️ Spoton-lib has been deprecated and will no longer be actively maintained. The new nexus-react library is now available here

A set of components and SCSS assets you need to create a SpotOn front-end application.

📦 Installation

npm i spoton-lib

🔨 Usage

import { Button } from 'spoton-lib';
import { IProps } from './types';

export function MyComponent(props: IProps) {
    return (
        <Button type="primary" onClick={props.handleClick}>
            Sign up
        </Button>
    );
}

@import '~spoton-lib/styles/color-variables';
@import '~spoton-lib/styles/text';
@import '~spoton-lib/styles/responsive';

$tablet: get-breakpoint('tablet');
$desktop: get-breakpoint('desktop');

.Paragraph {
    color: $base10; // uses base10 Nexus color
    @include p; // Applies the paragraph weight and size

    @include screen-smaller-than($tablet) {
        border: 1px solid $base20;
    }
}

We use svg files for all the icons in the library. If you are using spoton-lib in a TypeScript project, make sure to add the global declaration for svg files like this:

declare module '*.svg' {
    import React = require('react');
    const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
    export default SVG;
}

✨ Features

• Nexus design system available as a set of React components
• TypeScript support
• SASS mixins and variables for breakpoints, colors and font styles
• Colors exported as a JS object

Local Development

Pre-requisites

• node (check .nvmrc for the correct version of node)

Running the Project

1. run npm i to install dependencies
2. run npm run storybook to start a local instance of storybook

🤝 Contributing

Check out our contributing guide for details on how to contribute to Nexus.