Mottled-library NPM

🪴 Mottled Library 🪴

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

Library and decisions made

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.

The idea behind this library started as "creating our own design components", but after some serious brainstorming ended up as: "create our own substrate specific components" - meaning reusable combination of components (that are called recipes), which can help dApp devs to re-use in their projects without the need of rebuilding everything from scratch.

Library is separated in 3 basic "modules":

core: all common types/variables/functions/hooks that can be reused from components, recipes or the dev;
components: are shared, content-agnostic, and context-agnostic built for maximal reuse. These are the components you see in all the publicly-available design systems in the wild;
recipes: recipe components are specific compositions of design system components (for the most part) that are to be consistently used across a product, but aren’t agnostic enough to live in the design system. These are valuable, reusable components but may only apply to one product;

Commands:

yarn: Install all dependencies;
yarn run dev: builds the library and executes storybook. Once this is running all changes in existing components will depict in storybook running instance;
generate: receives 2 input parameters, type (component or recipe) and name of component, and generates a directory including .tsx, modules.css and *.stories.tsx files in respective type chosen
yarn run build: prepares the library for publishing (css and ts files);
yarn run css: Preparesall css files and places them in ./css directory;
yarn run format: formats all files based on prettier configuration;
yarn run deploy-storybook: prepares and deploys storybook (doc) at gh-pages;

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 />
      </>
  }
}

Storybook

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

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).