-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
626 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| repo_token: nrqVHIHupByIBoGrcvFwdOIpWpmv0m7BA | ||
| repo_token: L6D0g1PobZ0Wrn8lGAKGURRLIo3Ld13vD |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,203 @@ | ||
| # Tree Combiner | ||
| # Flexible chain [](https://github.com/facebook/react/blob/master/LICENSE) [](https://badge.fury.io/js/flexible-chain) [](https://travis-ci.org/iHaiduk/flexible-chain) [](https://coveralls.io/github/iHaiduk/flexible-chain?branch=master) [](https://david-dm.org/iHaiduk/flexible-chain?type=dev) | ||
|
|
||
| [](https://badge.fury.io/js/tree-combiner) | ||
| [](https://travis-ci.org/iHaiduk/tree-combiner) | ||
| [](https://coveralls.io/github/iHaiduk/tree-combiner?branch=master) | ||
| [](https://david-dm.org/iHaiduk/tree-combiner?type=dev) | ||
| ## Install | ||
|
|
||
| Install from the NPM repository using yarn or npm: | ||
|
|
||
| ```shell | ||
| yarn add flexible-chain | ||
| ``` | ||
| Or | ||
| ```shell | ||
| npm install flexible-chain | ||
| ``` | ||
|
|
||
| ## Motivation | ||
| We have a lot of repetitive code and the chore of writing different combinations. Also, over time, we forget what a piece of code should do and spend more time understanding it. This utility helps to make your code more flexible, understandable and transparent. | ||
|
|
||
| ## Solution | ||
| Tree Combiner is a small but powerful utility for creating tree chains and obtaining results after combining it. | ||
|
|
||
| ## Example | ||
|
|
||
| ### Simple | ||
| Simple use for creating various chains | ||
| ```typescript | ||
| import { combine, ValueOf } from "flexible-chain"; | ||
|
|
||
| const colorProps = { | ||
| Red: { | ||
| color: 'red', | ||
| }, | ||
| /* ... */ | ||
| }; | ||
|
|
||
| const sizeProps = { | ||
| L: { | ||
| fontSize: 16, | ||
| }, | ||
| /* ... */ | ||
| }; | ||
|
|
||
| export const initialFontTree = { ...colorProps, ...sizeProps }; | ||
|
|
||
| type ResultType = ValueOf<typeof colorProps> & ValueOf<typeof sizeProps>; | ||
|
|
||
| export const fontResult = { | ||
| View: (style: ResultType): ResultType => style, | ||
| Color: (style: ResultType): string => style.color, | ||
| Size: (style: ResultType): number => style.fontSize, | ||
| }; | ||
|
|
||
| const Font = combine(initialFontTree, fontResult); | ||
|
|
||
| console.log(Font.Red.View); // {color: 'red'} | ||
| console.log(Font.Red.L.View); // {color: 'red', fontSize: 16} | ||
|
|
||
| console.log(Font.Red.L.Color); // 'red' | ||
| console.log(Font.Red.L.Size); // 16 | ||
| ``` | ||
|
|
||
| ### Custom | ||
| More flexible and specific use of combine for your tasks. For example, when you want the state to be not an object (by default), but a different data type. | ||
| ```typescript | ||
| import { combine, ValueOf } from "flexible-chain"; | ||
|
|
||
| export const mainLanguageKey = { | ||
| Hello: 'Hello', | ||
| Welcome: 'Welcome', | ||
| }; | ||
|
|
||
| export const secondaryLanguageKey = { | ||
| Dear: 'dear', | ||
| To: 'to', | ||
| }; | ||
|
|
||
| export const initialLanguageTree = { ...mainLanguageKey, ...secondaryLanguageKey }; | ||
|
|
||
| type Keys = ValueOf<typeof mainLanguageKey> & ValueOf<typeof secondaryLanguageKey>; | ||
| type ResultLanguageType = Array<Keys>; | ||
|
|
||
| export const customResultTree = { | ||
| Key: (keys: ResultLanguageType) => keys.join('.'), | ||
| Keys: (keys: ResultLanguageType) => keys, | ||
| Name: (keys: ResultLanguageType) => (name: string) => `${[...keys, name].join(' ')}!`, | ||
| Length: (keys: ResultLanguageType) => keys.length, | ||
| }; | ||
|
|
||
| export const customConcatenationFn = (prev: ResultLanguageType, key: Keys) => [...prev, key]; | ||
|
|
||
| export const customInitialState = []; | ||
|
|
||
| const Salutation = combine(initialLanguageTree, customResultTree, customConcatenationFn, customInitialState); | ||
|
|
||
| console.log(Salutation.Hello.Dear.Key); // 'Hello.dear' | ||
| console.log(Salutation.Hello.Dear.Keys); // ['Hello', 'dear'] | ||
|
|
||
| console.log(Salutation.Hello.Length); // 1 | ||
| console.log(Salutation.Hello.Dear.Length); // 2 | ||
| /* ... N ... */ | ||
|
|
||
| console.log(Salutation.Hello.Name('Kris')); // 'Hello Kris!' | ||
| console.log(Salutation.Welcome.To.Name('flexible-chain')); // 'Welcome to flexible-chain!'; | ||
| ``` | ||
|
|
||
| ### React & React-Native | ||
| You can also make beautiful chains for react components. | ||
|
|
||
| ### React web style | ||
| ```typescript jsx | ||
| import { combine, combineComponent } from "flexible-chain"; | ||
|
|
||
| const SpanComponent = (props: any) => <span {...props} />; | ||
| const ParagraphComponent = (props: any) => <p {...props} />; | ||
|
|
||
| const componentColors = { | ||
| White: { | ||
| color: 'white', | ||
| }, | ||
| Red: { | ||
| color: 'red', | ||
| }, | ||
| /* ... */ | ||
| }; | ||
|
|
||
| const componentFontStyle = { | ||
| Italic: { | ||
| fontStyle: 'italic', | ||
| }, | ||
| Oblique: { | ||
| fontStyle: 'oblique', | ||
| }, | ||
| /* ... */ | ||
| }; | ||
|
|
||
| const componentFontWeight = { | ||
| Bold: { | ||
| fontWeight: 'bold', | ||
| }, | ||
| /* ... */ | ||
| }; | ||
|
|
||
| const componentStyles = { ...componentColors, ...componentFontStyle, ...componentFontWeight }; | ||
|
|
||
| type ComponentProps = {}; | ||
|
|
||
| const componentResult = { | ||
| Text: combineComponent<ComponentProps, typeof componentStyles>(SpanComponent, 'style'), | ||
| Paragraph: combineComponent<ComponentProps, typeof componentStyles>(ParagraphComponent, 'style'), | ||
| }; | ||
|
|
||
| const UserInfo = combine(componentStyles, componentResult); | ||
|
|
||
| const UserProfile = () => ( | ||
| <> | ||
| <UserInfo.White.Bold.Text>User Name</UserInfo.White.Bold.Text> | ||
| <UserInfo.White.Bold.Italic.Text>User Surname</UserInfo.White.Bold.Italic.Text> | ||
| <UserInfo.Red.Oblique.Paragraph>User Role</UserInfo.Red.Oblique.Paragraph> | ||
| /* ... */ | ||
| </> | ||
| ); | ||
|
|
||
| const HeaderUserInfo = () => ( | ||
| <> | ||
| <UserInfo.White.Bold.Paragraph>User Name</UserInfo.White.Bold.Paragraph> | ||
| <UserInfo.Red.Italic.Paragraph>User Role</UserInfo.Red.Italic.Paragraph> | ||
| /* ... */ | ||
| </> | ||
| ); | ||
|
|
||
| console.log(UserProfile); // -> | ||
| /* | ||
| <span style={{color: 'white', fontWeight: 'bold'}}>User Name</span> | ||
| <span style={{color: 'white', fontWeight: 'bold', fontStyle: 'italic'}}>User Surname</span> | ||
| <p style={{color: 'red', fontStyle: 'oblique'}}>User Role</p> | ||
| */ | ||
|
|
||
| ``` | ||
|
|
||
| ### React web classes | ||
| ```typescript jsx | ||
| import { combine, combineComponent } from "flexible-chain"; | ||
| import cs from 'classnames'; | ||
|
|
||
| import styles from './style.module.css'; | ||
|
|
||
| /* ... */ | ||
|
|
||
| const SpanComponent = ({classes, ...props}: any) => { | ||
| return <span className={cs(classes)} {...props} />; | ||
| } | ||
|
|
||
| const componentResult = { | ||
| Text: combineComponent(SpanComponent, 'classes'), | ||
| }; | ||
|
|
||
| const UserInfo = combine(styles, componentResult); | ||
|
|
||
| /* ... */ | ||
| ``` | ||
|
|
||
| #### P.S. | ||
| Above are the most simple and commonly used options. You can combine more complex and dynamic connections for easier reuse. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| module.exports = { | ||
| presets: [ | ||
| ['@babel/preset-env', {targets: {node: 'current'}}], | ||
| ['@babel/preset-env', { targets: { node: 'current' } }], | ||
| '@babel/preset-typescript', | ||
| '@babel/preset-react', | ||
| ], | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| export const componentColors = { | ||
| White: { | ||
| color: 'white', | ||
| }, | ||
| Red: { | ||
| color: 'red', | ||
| }, | ||
| }; | ||
|
|
||
| export const componentFontWeight = { | ||
| Bold: { | ||
| fontWeight: 'bold', | ||
| }, | ||
| }; | ||
|
|
||
| export const componentFontStyle = { | ||
| Italic: { | ||
| fontStyle: 'italic', | ||
| }, | ||
| Oblique: { | ||
| fontStyle: 'oblique', | ||
| }, | ||
| }; | ||
|
|
||
| export const componentStyles = { ...componentColors, ...componentFontWeight, ...componentFontStyle }; | ||
|
|
||
| export const SpanComponent = (props: any) => <span {...props} />; | ||
| export const ParagraphComponent = (props: any) => <p {...props} />; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { ValueOf } from '../types/helper.type'; | ||
|
|
||
| export const mainLanguageKey = { | ||
| Hello: 'Hello', | ||
| Welcome: 'Welcome', | ||
| }; | ||
|
|
||
| export const secondaryLanguageKey = { | ||
| Dear: 'dear', | ||
| To: 'to', | ||
| }; | ||
|
|
||
| export const initialLanguageTree = { ...mainLanguageKey, ...secondaryLanguageKey }; | ||
|
|
||
| type Keys = ValueOf<typeof mainLanguageKey> & ValueOf<typeof secondaryLanguageKey>; | ||
| type ResultLanguageType = Array<Keys>; | ||
|
|
||
| export const customResultTree = { | ||
| Key: (keys: ResultLanguageType) => keys.join('.'), | ||
| Keys: (keys: ResultLanguageType) => keys, | ||
| User: (keys: ResultLanguageType) => (name: string) => `${[...keys, name].join(' ')}!`, | ||
| Length: (keys: ResultLanguageType) => keys.length, | ||
| }; | ||
|
|
||
| export const customConcatenationFn = (prev: ResultLanguageType, key: Keys) => [...prev, key]; | ||
|
|
||
| export const customInitialState = []; |
Oops, something went wrong.