slash-web-app-component

Slash Web APP Component - React

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

Placement in project structure:

--src/
   ---components/
      ---input/
          ---input.tsx
          ---inputBluePrintDecorator.tsx
          ---inputAntDesignDecorator.tsx
          ---inputReactstrap.tsx
    ---patterns/
       ---observer
       ---facade
       ---strategy
       ---decorator
       ---builder
    ---factory/
       ---formFactory.tsx

✨ Project Features

• 🌈 Used exsing popular UI designed for web applications Ant Design and Reactrap.
• 🛡 Written in TypeScript with predictable static types TypeScript setup
• Using storybook for documentation and demo in every detail.
• Using SASS and Classnames for stying. -❤️ We also add more feature to existing setup such as:
  • prettier/tslint/stylelint(scss)
  • husky/pre-commit
  • postCss/autoprefixer (optional maybe use inline css instead to make our code splitting)
  • already config code splitting to reduce buldle size

Link and Demo

• Libray Documentation.
• Git Repo.
• NPM.

Usage library

we could able to import components in two ways:

-->import along all the other components available in the library. This will increase your overall bundle size (assuming there's no tree shaking).

import { NextButton } from 'next-dev-component';
<NextButton label="Primary Icon"} />;

--> we only import NextButton. This approach can significantly reduce bundle siz (Recommend).
import NextButton from 'next-dev-component/lib/component/NextButton';

<NextButton label="Secondary Icon"} />;

Using Decorator Pattern: https://refactoring.guru/design-patterns/decorator/typescript/example

Write the text component

/**
 * The base Component interface defines operations that can be altered by
 * decorators.
 */
interface TextInputInterface {
    onChange(): void;
    setValue(): void;
    getValue(): string;
    render(): object;
}

/*
 * Class implementation
 */
class TextInput implements TextInputInterface {
    public onChange(e): void {
        this.value = e;
    }
    public setValue(value): void {
        this.value = value;
    }
    public getValue(): string {
        return this.value;
    }
    public render() {
        return <></>;
    }

}

/*
 * Base Decorator
 */
class TextInputDecorator implements TextInputInterface {
    protected component: Component;

    constructor(component: Component) {
        this.component = component;
    }
    public onChange(e): void {
        this.component.onChange(e);
    }
    public setValue(value): void {
        this.component.setValue(e);
    }
    public getValue(): string {
        return this.component.getValue();
    }
    public render(): object {
        return <input type="text" onChange={this.onChange} />;
    }

}

/*
 * Blueprint Decorator
 */
import { Input } from "@blueprint/core";

class TextInputBlueprintDecorator extends TextInputDecorator {
    public render(): object {
        return <Input onValueChange={({ target }) => super.onChange(target.value)}/>;
    }
}

/*
 * Reactstrap Decorator
 */
import { Input } from "reactstreap";

class TextInputBlueprintDecorator extends TextInputDecorator {
    public render(): object {
        return <Input onChange={({ target }) => super.onChange(target.value)}/>;
    }
} 

Development

clone locally:

$ git clone https://bitbucket.org/slashdigital/slash-web-app-component-react
$ cd slash-web-app-component-react
$ npm install or yarn
$ npm run dev or yarn dev

Open your browser and visit http://localhost:6006/ .

Export static document for storybook

$ yarn storybook:export

Publish to NPM

$ npm login (first time require)
$ npm publish

Publish to NPM and deploy document to Github Page

$ npm login (first time require)
$ yarn pubploy

❤️ Sponsors with love by: