About The Project

This library was created to cater the design requirements of Kodebi web applications. It provides a basic set of components like Buttons, Inputs, Dropdowns, etc., which come with the default Kodebi styles but are also customizable to a certain degree. Future versions will provide even more components with even more customization options.

Built With

Getting Started

Installation

Install the package via npm

  npm i @kodebi/libkodebi-ui

Run Locally

Clone the project

git clone https://github.com/kodebi/libkodebi-ui.git

Go to the project directory

cd path/to/where_you_cloned_the_repo

Install all the dependencies

npm install

Start Storybook and start developing

npm run storybook

Run Tests

To run tests with the library, run the following command:

npm run test

Usage

Quick Start

In order to use a component in your project, just run the following command:

import { Button } from '@kodebi/libkodebi-ui';

function App() {
	return <Button variant="action" type="submit" label="Test" />;
}

Components

Components from the library come with a default styling, but are also customizable to some extent. In order to give a proper overview, we provide a full list of attributes for each component.

AppShell

| Prop | Type | Optional? | Description | | ------------ | ----------- | --------- | ------------------------------------------------------------------ | | children | ReactNode | no | wraps other components with the shell to inherit the Kodebi styles | | defaultStyle | boolean | yes | applies default kodebi styles |

Box

| Prop | Type | Optional? | Description | | --------------- | ------------ | --------- | ------------------------------------------ | | variant | BoxVariant | no | defines the flex layout of the div | | children | ReactNode | no | passes children objects to the div | | width | string | yes | customizes the width of the Box | | height | string | yes | customizes the height of the Box | | margin | string | yes | sets a custom margin for the Box | | className | string | yes | adds custom styling via classes to the div | | padding | string | yes | sets a custom padding to the div | | position | string | yes | accepts fixed, absolute, relative | | backgroundColor | string | yes | gives your Box a proper color | | maxWidth | string | yes | sets the maximum width of the div |

BoxVariant

| Prop | Pass as | | ------------------ | -------- | | default | string | | center | string | | flex-col | string | | flex-col-start | string | | flex-space-between | string | | flex-align-start | string | | flex-align-end | string | | flexible-flex | string | | shelf | string | | grid-center | string |

Button

| Prop | Type | Optional? | Description | | --------- | ------------- | --------- | -------------------------------------------------------- | | label | string | no | gives the Button a label tag | | variant | ButtonStyle | yes | defines the style of the Button | | type | ButtonType | yes | sets the button type | | width | string | yes | customizes the width of the Button | | margin | string | yes | sets a custom margin for the Button | | className | string | yes | adds custom styling via classes | | onClick | function | yes | passes a function if the Button should perform an action | | children | ReactNode | yes | passes children objects to the Card component |

ButtonStyle

| Prop | Pass as | | ---------------- | -------- | | signin (default) | string | | action | string | | filter | string |

ButtonType

| Prop | Pass as | | ---------------- | -------- | | button (default) | string | | submit | string | | reset | string |

Card

| Prop | Type | Optional? | Description | | --------------- | ---------------- | --------- | ------------------------------------------------------------ | | withBorders | boolean | yes | sets a border for the Card component | | shadow | CardShadowType | yes | defines the shadow of the border if border is passed as true | | center | boolean | yes | centers content within the Card | | width | string | yes | customizes the width of the Card | | height | string | yes | sets a custom height for the Card | | backgroundColor | string | yes | sets a custom backgroundColor for the Card | | borderColor | string | yes | sets a custom borderColor for the Card | | children | ReactNode | yes | passes children objects to the Card component |

CardShadowType

| Prop | Pass as | | ------ | -------- | | none | string | | light | string | | bright | string |

Footer

| Prop | Type | Optional? | Description | | ------- | ------------------------ | --------- | ------------------------------------------ | | element | ReactElement<any> | no | pass a Link component for internal routing | | links | Array of any | yes | passes an array of links to the footer | | icons | Array of IconWrapper | yes | passes an arry of icons to the footer |

Input

| Prop | Type | Optional? | Description | | ----------- | --------------- | --------- | -------------------------------------------------------------- | | variant | InputVariant | yes | defines the style of the Input | | name | string | yes | gives the Input a dedicated name tag | | id | string | yes | sets an unique id for the Input | | type | InputType | yes | sets the Input type | | width | string | yes | customizes the width of the Input | | margin | string | yes | sets a custom margin for the Input | | position | LabelPosition | yes | defines the relative position of the label | | className | string | yes | adds custom styling via classes | | placeholder | string | yes | sets a placeholder to display a CTA within the input field | | value | string | yes | used to react to user inputs | | marginRight | string | yes | defines a right margin for the label | | required | boolean | yes | defines if the Input is mandatory to be filled out by the user | | onChange | function | yes | passes a function if the Input should listen to changes | | textarea | boolean | yes | if true, the Input gets replaced with a Textarea | | rows | number | yes | defines how many rows the textarea should span | | cols | number | yes | defines how many cols the textarea should span | | textLength | string | yes | sets the overall text length of the textarea | | borderColor | string | yes | sets a custom borderColor for the Input | | labelColor | string | yes | sets a custom color for the Input label | | wrap | string | yes | defines if the textarea content should wrap or no |

InputVariant

| Prop | Pass as | | ----------------- | -------- | | primary (default) | string | | secondary | string | | search | string |

InputType

| Prop | Pass as | | -------------- | -------- | | text (default) | string | | email | string | | password | string | | url | string | | search | string | | number | string |

LabelPosition

| Prop | Pass as | | ----- | -------- | | above | string | | left | string |

LinkWrapper

| Prop | Type | Optional? | Description | | -------- | ----------- | --------- | ---------------------------------------------------- | | type | LinkType | yes | accepts default, menu and footer for styling | | children | ReactNode | yes | passes children objects to the LinkWrapper component |

LinkType

| Prop | Pass as | | ------- | -------- | | default | string | | menu | string | | footer | string |

IconWrapper

| Prop | Type | Optional? | Description | | -------- | ----------- | --------- | ---------------------------------------------------- | | href | string | yes | passes the path to link to external URLs | | fontSize | string | yes | sets the size of the icon wrapper | | children | ReactNode | yes | passes children objects to the IconWrapper component |

Dropdown

| Prop | Type | Optional? | Description | | ----------- | -------------------- | --------- | ----------------------------------------------------------- | | options | Array of Options | yes | pass an array of options to choose from | | variant | DropdownType | yes | defines the style of the Dropdown menu | | name | string | yes | give the Dropdown a dedicated name tag | | id | string | yes | set an unique id for the Dropdown | | width | string | yes | customizes the width of the Select component | | margin | string | yes | sets a custom margin for the Select component | | padding | string | yes | sets a padding for the Dropdown | | className | string | yes | adds custom styling via classes | | placeholder | string | yes | sets a placeholder to display a CTA within the select field | | value | string | yes | used to react to user inputs | | label | boolean | yes | defines if the Dropdown needs a label tag or not | | position | LabelPosition | yes | defines the relative position of the label | | onChange | function | yes | passes a function if the Dropdown should listen to changes |

Options

| Prop | Type | Optional? | Description | | --------- | -------------------- | --------- | ---------------------------------------------------------- | --- | | key | string | yes | passes the index of the array as unique key | | value | string or number | yes | sets a value for the option component | | | width | string | yes | sets a custom width for the option | | className | string | yes | adds custom styling via classes | | onClick | function | yes | passes a function which propagates to the Select component |

DropdownType

| Prop | Pass as | | ------- | -------- | | default | string | | filter | string |

Text

| Prop | Type | Optional? | Description | | --------- | ------------ | --------- | ---------------------------------------- | | weight | TextWeight | yes | defines the weight of the Text | | color | string | yes | sets the color of the Text | | padding | string | yes | sets a custom padding for the Text | | margin | string | yes | sets a custom margin for the Text | | className | string | yes | adds custom styling via classes | | children | ReactNode | yes | passes children objects to the paragraph | | fontSize | string | yes | alters the size of the font |

TextWeight

| Prop | Pass as | | ------- | -------- | | regular | string | | bold | string |

Contributing

Contributions are always welcome. Feel free to fork the repository, create a new branch and start developing. For merging your contributions, please open a PR and explicitly add me as a reviewer. After carefully checking and resolving potential merge conflicts or any remarks, the contributions will be merged. A release cycle needs to be determined in due time, so any propositions are highly welcome as well.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Chris Schimetschka - - [email protected]

Project Link: https://github.com/kodebi/libkobei-ui

Acknowledgments

TBD