@bnb-tech-open/core

Changelog

0.2.0

Highlights ✨:

• intoduce bnb-scripts cli package 👏
• introduce additional formatting classes
• introduce an improved ActionCreator pattern
• match css naming styleguide and introduce stylelint
• add documentation 🎉
• And many more 🐛 bug fixes 📚 improvements.

⚠️ Breaking changes ⚒️

• [⚠️ BREAKING ⚒️]-[models]-[organization] fix typo from oragnization to organization
• [⚠️ BREAKING ⚒️]-[models]-[controls] rename models/core/ui/controls to models/core/ui/widgets
• [⚠️ BREAKING ⚒️]-[models]-[DataGrid] move from models/core/ui/widgets/data_grid to models/core/ui/data_grid
• [⚠️ BREAKING ⚒️]-[models]-[client] remove ClientIdExpirationUnit and switch to DurationUnit
• [⚠️ BREAKING ⚒️]-[models]-[widgets] move some widget Definitions to their respective place
  • NumericEntry
  • MarkdownEntry
  • RichTextEntry
  • ContainerWidget => container/ContainerWidget
  • Widget => widget/Widget
  • ...

• [⚠️ BREAKING ⚒️]-[modules]-[Module Manager] refactor module registry implementation from array to a Dictionary
• [⚠️ BREAKING ⚒️]-[modules]-[Plugin Manager] refactor plugin registry implementation from array to a Dictionary
• [⚠️ BREAKING ⚒️]-[modules]-[Middleware Manager] introduce MiddlewareManager

• [⚠️ BREAKING ⚒️]-[common] restructure common folder into logical subjects

• [⚠️ BREAKING ⚒️]-[pattern]-[action creator] refactor Action Creator strutcuring see Action Creators

• [⚠️ BREAKING ⚒️]-[state]-[login] add login reducer and Login handling
• [⚠️ BREAKING ⚒️]-[state]-[redux hooks] separate the hooks into individual files and folder (useSelector, useDispatch, useStore)
• [⚠️ BREAKING ⚒️]-[state]-[selectors] add wrapper for Reselect Selectors (createSelector, createSelectorCreator, defaultMemoize, createStructureSelector)
• [⚠️ BREAKING ⚒️]-[state]-[withConnect] move into individual subfolder connect
• [⚠️ BREAKING ⚒️]-[state]-[batchActions] move into individual subfolder actions
• [⚠️ BREAKING ⚒️]-[state]-[middleware] rename middlewares to middleware

• [⚠️ BREAKING ⚒️]-[helper]-[date] switch ImDates default implementation to DateFns
• [⚠️ BREAKING ⚒️]-[helper]-[date] rename function durationToMs to parseDuration
• [⚠️ BREAKING ⚒️]-[helper]-[date] move interfaces and enums to separate files
  • ImDateFormat & ImDateFormats => ImDateFormat

• [⚠️ BREAKING ⚒️]-[helper]-[ImColor] introduce ImColor class 🖍️
  • move color helper functions to ImColor class
  • rename getRGBColorFromColor to getContrastColor
• [⚠️ BREAKING ⚒️]-[helper]-[string] move stringReplaceAll to ImString class and rename to replaceAll

• [⚠️ BREAKING ⚒️]-[scss] refactor common and mixins Scss
• [⚠️ BREAKING ⚒️]-[scss] change css class names from camelCase to kebab-case
  • hide -> hidden
  • noDirection -> no-direction
  • noGrow -> no-grow
  • noShrink -> no-shrink
  • noFlex -> no-flex
  • verticalCentered -> vertical-centered
  • horizontalCentered -> horizontal-centered
• [⚠️ BREAKING ⚒️]-[scss] remove some classes
  • spacer
  • flexContainer
  • flexWrap
  • buttonIcon
  • hide

• [⚠️ BREAKING ⚒️] remove unity plugin

Changes

• [⚠️ BREAKING ⚒️]-[models]-[organization] fix typo from oragnization to organization
• [⚠️ BREAKING ⚒️]-[models]-[controls] rename models/core/ui/controls to models/core/ui/widgets
• [⚠️ BREAKING ⚒️]-[models]-[DataGrid] move from models/core/ui/widgets/data_grid to models/core/ui/data_grid
• [⚠️ BREAKING ⚒️]-[models]-[client] remove ClientIdExpirationUnit and switch to DurationUnit
• [⚠️ BREAKING ⚒️]-[models]-[widgets] move some widget Definitions to their respective place
  • NumericEntry
  • MarkdownEntry
  • RichTextEntry
  • ContainerWidget => container/ContainerWidget
  • Widget => widget/Widget
  • ...
• [models] add Profile definitions
• [models] add Device Info definitions
• [models] add additional Grid Cell and Column definitions
• [models] add RichTextEntry definitions
• [models] add MarkdownEntry definitions
• [models] add HierarchicalList definitions
• [models] add culture info retrieval selector
• [models] switch string.match to RegExp.exec to improve performance
• [models] remove RequestMethodtype alias

• [⚠️ BREAKING ⚒️]-[modules]-[Module Manager] refactor module registry implementation from array to a Dictionary
• [⚠️ BREAKING ⚒️]-[modules]-[Plugin Manager] refactor plugin registry implementation from array to a Dictionary
• [⚠️ BREAKING ⚒️]-[modules]-[Middleware Manager] introduce MiddlewareManager

• [⚠️ BREAKING ⚒️]-[common] restructure common folder into logical subjects
• [common] enable WiDiagnostic only in development mode
• [common] provide default exports to typeguards and most Helper functions and classes

• [⚠️ BREAKING ⚒️]-[pattern]-[action creator] refactor Action Creator strutcuring see Action Creators
• [pattern]-[action creator] add ActionCreator class to reduce Boiler Plate
• [pattern]-[singletons] improve getInstance method boilerplate

• [⚠️ BREAKING ⚒️]-[state]-[login] add login reducer and Login handling
• [⚠️ BREAKING ⚒️]-[state]-[redux hooks] separate the hooks into individual files and folder (useSelector, useDispatch, useStore)
• [⚠️ BREAKING ⚒️]-[state]-[selectors] add wrapper for Reselect Selectors (createSelector, createSelectorCreator, defaultMemoize, createStructureSelector)
• [⚠️ BREAKING ⚒️]-[state]-[withConnect] move into individual subfolder connect
• [⚠️ BREAKING ⚒️]-[state]-[batchActions] move into individual subfolder actions
• [⚠️ BREAKING ⚒️]-[state]-[middleware] rename middlewares to middleware
• [state] remove some unused reducers
• [state]-[user] omit user informations to User Store
• [state]-[middleware] add createMiddleware helper function
• [⚠️ BREAKING ⚒️]-[helper]-[date] switch ImDates default implementation to DateFns
• [⚠️ BREAKING ⚒️]-[helper]-[date] rename function durationToMs to parseDuration
• [⚠️ BREAKING ⚒️]-[helper]-[date] move interfaces and enums to separate files
  • ImDateFormat & ImDateFormats => ImDateFormat
• [helper]-[date] add ImDateMoment date class
• [helper]-[date] add parse function
• [helper]-[date] prepare relative time format for ImDate classes
• [helper]-[date] introduce add helper function
• [helper]-[Timer] add setInterval, clearInterval, setTimeout, clearTimeout functions as wrapper for window

• [⚠️ BREAKING ⚒️]-[helper]-[ImColor] introduce ImColor class 🖍️
  • move color helper functions to ImColor class
  • rename getRGBColorFromColor to getContrastColor
• [⚠️ BREAKING ⚒️]-[helper]-[string] move stringReplaceAll to ImString class and rename to replaceAll
• [helper]-[Dictionary] introduce Dictionary Interface, Type and add createDictionary and mergeDictionaries helper
• [helper]-[Immutable] add Immutable type
• [helper]-[clone] add clone function for real shallow- and deepcloning 🤯
• [helper]-[formatter] add ImFormatter helper class
• [helper]-[string] add ImString helper class
• [helper]-[number] add ImNumber number formatting helper class
• [helper]-[boolean] add ImBoolean helper class
• [helper]-[Debouncer] add static debounce method to enhance methods
• [helper]-[Debouncer] add static deferTick method to enqueue the given callback to the javascript execution queue
• [helper]-[**Base64] introduce ImBase64 class for easier interacting with Base64 strings

• [⚠️ BREAKING ⚒️]-[scss] refactor common and mixins Scss
• [⚠️ BREAKING ⚒️]-[scss] change css class names from camelCase to kebab-case
  • hide -> hidden
  • noDirection -> no-direction
  • noGrow -> no-grow
  • noShrink -> no-shrink
  • noFlex -> no-flex
  • verticalCentered -> vertical-centered
  • horizontalCentered -> horizontal-centered
• [⚠️ BREAKING ⚒️]-[scss] remove some classes
  • spacer
  • flexContainer
  • flexWrap
  • buttonIcon
  • hide
• [scss] introduce stylelint
• scss introduce some more mixins and functions e. g. spacing function and mixin

• [tests] introduce jest and improve test suite

• [⚠️ BREAKING ⚒️] remove unity plugin
• rename node_build to lib
• move wiki to docs
• add docsify to easily create documentation pages
• introduce browserlist
• add eslint with typescript plugin
• intoduce bnb-scripts cli package
• And many more 🐛 bug fixes 📚 improvements

Notes 📝

bnb-scripts

To reduce the need of having same build routine in every package and to reduce the amount of dev-dependencies, the @bnb-tech-open/scripts package was introduced. This package acts as a wrapper-package for react-scripts, but also introduces some features which have been best-practices for all @bnb-tech packages.

***Features: ***

• init template
• unified build scripts
• Storybook out of the box
• Jest default config
• eslint default config
• stylelint default config
• Sass support out of the box

Action creators

To better match the naming to the actual purpose of redux action creators we've refactored the pattern on how to create them. The main changes here result in the following structure:

// define your action identifier magic strings
export enum TodoActions {
    ADD_TODO = 'TODO.ADD_TODO'
}

// define your action interfaces
interface IAddTodoAction extends IBaseAction<TodoActions.ADD_TODO, ITodo> {
}

// define an type alias for all your actions
export type TodoAction = IAddTodoAction;

// define your action creator class
export class TodoActionCreator { 
    // define your action
    public static addTodo(todo: ITodo): IAddTodoAction { 
        // use to Action creator function to reduce the boilerplate
        return ActionCreator.createAction<TodoActions.ADD_TODO, ITodo>(
            TodoActions.ADD_TODO, todo
        );
    }
}

Singletons

To reduce the boilerplate for writing the singleton pattern in javascript we can make use of a little bit syntax sugar of js:

before:

class MySingleton {
    private static _instance: MySingleton;

    public static getInstance(): MySingleton {
        if (!this._instance) {
            this._instance = new MySingleton();
        }

        return this._instance;
    }
}

after:

class MySingleton {
    private static _instance: MySingleton;

    public static getInstance(): MySingleton {
        return this._instance || (this._instance = new this());
    }
}

Dictionionaries

If you need to create a Dictionary use the createDictionary function. If you wan't to define it yourself please consider using the following:

 Object.create(null);

In this way you create an empty object without prototype and object functions.

Scss

spacing function returns the demanded spacing as px

    @function spacing($multiplier: 1) {
        @return #{$spacingBase * $multiplier}px;
    }

allows you to create a dynamic spacing based on the core spacing unit:

    .myClass {
        @include spacing('margin', 'right');
    }

    .myClass {
        margin-right: 8px;
    }

@mixin spacing($type: 'margin', $direction: 'all', $multiplier: 1) {
    @if $direction == 'all' {
        #{$type}: spacing($multiplier);
    } @else {
        #{#{$type}-#{$direction}}: spacing($multiplier);
    }
}

class name changes change css class names from camelCase to kebab-case

• hide -> hidden
• noDirection -> no-direction
• noGrow -> no-grow
• noShrink -> no-shrink
• noFlex -> no-flex
• verticalCentered -> vertical-centered
• horizontalCentered -> horizontal-centered

remove unused classes some classes are be deprecated

• spacer
• flexContainer
• flexWrap
• buttonIcon
• hide

0.1.0

Release

Wiki

Storybook

To set up Storybook use these commands:

npx -p @storybook/cli sb init --type react

yarn add -D typescript awesome-typescript-loader @types/storybook__react jest @types/jest ts-jest

Then create a webpack.config.js file in the .storybook folder:

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve('awesome-typescript-loader'),
            },
            // Optional
            {
                loader: require.resolve('react-docgen-typescript-loader'),
            },
        ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

and update your config.js file:

import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.js$|\.stories\.tsx$/);
function loadStories() {
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Decorators

See the following Gist for usage details: Typescript class Decorators

Component Types

1. Component

2. Pure Component

3. React Functional Component (RFC)

State Handling

The following Blogpost explains some Do's and Dont's on the React Components State Handling: React setState usage

Higher Order Components

HOCs are mainly focused to compose and enhance Components. The idea behind is to prevent redundancy in your code when using the same props and patterns in your components.

For using the ES7 Decorator Syntax you must set "experimentalDecorators": true, in your tsconfig.json.

HOC Construct sample:

interface IInjectedProps {
    prop: test;
}

function withHOC(hocProps: string) {
    return <P extends {}, C extends React.ComponentType<P & IInjectedProps>>
    (WrappedComponent: C): React.ComponentType<P> => {
        // return whatever you want to do:
        // for example an simple component
        return function WithHOC(props: P) {
            return <WrappedComponent {...props} />;
        };
    };
}

@withHOC("hoc Property")
class MyExtendedClass extends React.Component<{} & IInjectedProps> {
    public render() {
        const { prop } = this.props;
        ....
    }
}

Also see this Blogpost for detailed information: React Higher Order Components Patterns

Markdown

Markdown is a great way of creating documentations and are well supported by any bigger SCM Provider (such as Github or Team Foundation Server)

It works as following:

See the following for detailed information

• Documentation
• Get Started
• Cheat Sheet