mottled-components

Mottled-library

A tree-shakeable library containing common reusable components for substrate based chains

Install and run dev

Package is using workspaces for custom build/bundle the library. Core components exist under dir packages/library. For documentation and development purposes Storybook was the tool of choice. This way contributors can catch up to speed with current components and also develop faster new ones. In order to install all required packages and execute in watch mode the library and storybook just run the command below:

yarn && yarn run dev

Usage

Principle followed in the library is to carry components and styling in different packages. This way the user of the library can decide if wants to style the components using his own css (overwrite classNames or using tailwind) or using default css.

In order to use default css see the following example:

import React, { Component } from "react"

// importing css for specific component
import 'mottled-library/css/SpecificComponent.css'

// importing the specific component
import { SpecificComponent } from "mottled-library"

class Example extends Component {
  render() {
    return (
      <>
        <SpecificComponent />
      </>
  }
}

In addition to components exists the core of the library that contains reusable variables and functions that are used from almost all components but can also be useful stand alone.

Storybook

As mentioned above, Storybook is used for documentation and development. In order to see a showcase of current components and recipes see here(Implementation pending)

Possible Errors:

error:0308010C:digital envelope routines::unsupported

An error:0308010C:digital envelope routines::unsupported occurs with the Node.js version 17 as it’s not the LTS version, and there is a breaking change in the OpenSSL. Use LTS version 16.14.0 for not facing the issue. NODE_OPTIONS could also be set, as an alternative, but is not a recommended approach (you can still try this on your local machine as a quick fix).