@dnanpm/styleguide

DNA Styleguide

Styles and styled components for DNA.

Table of Contents

1. Prerequisites
2. Installation
3. Usage
4. IE11 Support NextJS
5. How to see all the components
6. Linting
7. Changelog
8. Contributing
9. Publishing

Prerequisites

Node v10.13.0 NPM v6.9.0

Installation

A step by step series of examples that tell you how to get a development env running.

npm install @dnanpm/styleguide

Usage

import { Label, createStyled } from "@dnanpm/styleguide";
import { ThemeInterface } from './theme';

const {
    styled,
    css,
    createGlobalStyle,
    keyframes,
    ThemeProvider,
    ServerStyleSheet,
} = createStyled<ThemeInterface>();

const TestComponent = () =>
    <ThemeProvider theme={theme}>
        <Label color="slateGray">Label text</Label>
    </ThemeProvider>

export default TestComponent;

IE11 Support NextJS

In next.config.js you need to use next-transpile-modules package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.

// next.config.js
const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);

module.exports = withTM();

How to see all the components

This package is using styleguidist to show and list all the components in it:

npm run styleguide

---

Linting

The project is using TSLINT.

To check if the project has any linting issues, run the following command:

npm run tslint-check

Changelog

Recently Updated? Please read the changelog.

Contributing

How to contribute? Please read the contributing.

Publishing

How to publish new version? Please read the publish.