@jsp83/ui-components

metronic template ui component

Storybook is a tool for UI development. It makes development faster and easier by isolating components. Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Tutorials

[UI-component] components built with [React][react-bootstrap][metronic][bootstrap 5][storybook][![npm][npm-badge]][npm]

Table of contents

• Prerequisites
• Available Scripts
• Components
• Tests

Prerequisites

1. good understanding of React
2. familiarity with TypeScript Types (2ality's guide is helpful. If you’re an absolute beginner in TypeScript, check out chibicode’s tutorial.)
3. having read the TypeScript section in the official React docs.
4. having read the React section of the new TypeScript playground (optional: also step through the 40+ examples under the playground's Examples section)

Available Scripts

In the project directory, you can run:

Installs package dependencies

    npm install 

Runs the app in the development mode.

   npm run storybook

Build package

   npm run tsc

Publish package npm

   npm publish

Components - React + TypeScript Starter

One of the core concepts of React is components. Here, we’ll be referring to standard components as of React v17.0, meaning ones that use hooks as opposed to classes.

Import React

import * as React from "react";
import * as ReactDOM from "react-dom";

This is the most futureproof way to import React. If you set --allowSyntheticDefaultImports (or add "allowSyntheticDefaultImports": true) in your tsconfig.json you can use more familiar imports:

import React from "react";
import ReactDOM from "react-dom";

Explanation

Why allowSyntheticDefaultImports over esModuleInterop? Daniel Rosenwasser has said that it's better for webpack/parcel. For more discussion check out https://github.com/wmonk/create-react-app-typescript/issues/214

You should also check the new TypeScript docs for official descriptions between each compiler flag!

Function Components

These can be written as normal functions that take a props argument and return a JSX element.

Props

You can define your props using either an interface or a type. Let’s look at another example:

    import React from 'react'

    type Props = {
    /** color to use for the background */
    color?: string;
    /** standard children prop: accepts any valid React Node */
    children: React.ReactNode;
    /** callback function passed to the onClick handler*/
    onClick: ()  => void;
    }

    const Button: React.FC<Props> = ({ children, color = 'tomato', onClick }) => {
    return <button style={{ backgroundColor: color }} onClick={onClick}>{children}</button>
    }

• Notice here we're using the function declaration with the interface Props

• “always use interface for public API’s definition when authoring a library or 3rd-party ambient type definitions.”
• “consider using type for your React Component Props and State, because it is more constrained.”

You can read more about the discussion and see a handy table comparing types vs interfaces here.

Hooks

The TypeScript type inference works well when using hooks

    // `value` is inferred as a string
    // `setValue` is inferred as (newValue: string) => void
    const [value, setValue] = useState('')

TypeScript infers the values given to use by the useState hook. This is an area where React and TypeScript just work together and it’s beautiful.

Source: react-typescript-cheatsheet Hooks section

Extending Component Props

Sometimes you want to take component props declared for one component and extend them to use them on another component. But you might want to modify one or two. Well, remember how we looked at the two ways to type component props, types or interfaces? Depending on which you used determines how you extend the component props. Let’s first look at the way using type:

    import React from 'react';

    type ButtonProps = {
        /** the background color of the button */
        color: string;
        /** the text to show inside the button */
        text: string;
    }

    type ContainerProps = ButtonProps & {
        /** the height of the container (value used with 'px') */
        height: number;
    }

    const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => {
    return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div>
    }

If you declared your props using an interface, then we can use the keyword extends to essentially “extend” that interface but make a modification or two:

    import React from 'react';

    interface ButtonProps {
        /** the background color of the button */
        color: string;
        /** the text to show inside the button */
        text: string;
    }

    interface ContainerProps extends ButtonProps {
        /** the height of the container (value used with 'px') */
        height: number;
    }

    const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => {
    return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div>
    }

Both methods solve the problem. It’s up to you to decide which to use. Personally, extending an interface feels more readable

Snapshot Tests

Snapshot testing is a common type of regression testing, where an image of a UI or UI component is captured as a reference and then when code changes are made a new capture is compared to the reference. Storyshots is an official Storybook addon for snapshot testing. Now that we have our component set up, let’s set up some Snapshot testing using Storyshot and Jest.

    $ npm i @storybook/addon-storyshots react-test-renderer

src/storybook.test.js

    npm run test