Kodebi UI Component Library

The 1.2.0 version of the UI components for the Kodebi Web App and Website.

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
   • Run Locally
   • Run Tests
3. Usage
   • Quick Start
   • Components
4. Contributing
5. License
6. Contact
7. Acknowledgments

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.

(back to top)

Built With

• Typescript
• React.js
• Emotion
• Storybook
• Rollup
• React Testing Library

(back to top)

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

(back to top)

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

(back to top)

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.

(back to top)

License

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

(back to top)

Contact

Chris Schimetschka - - chris.schimetschka@kodebi.de

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

(back to top)

Acknowledgments

TBD

(back to top)