Coad-UI

Component library based on React and Styled Components. For this moment it provides basic custom components, such as Button, Input, Select, Checkbox, Radio buttons etc.

Installing coad-ui

To install coad-ui run:

 npm install coad-ui

Using coad-ui

CoadUIProvider

In order to use components from coad-ui you have to wrap your app into .

Besides, you may pass your custom theme as a prop to have components according to your theme.

The theme should have the following structure:

interface ITheme {
  name: string;
  colors: {
    primary: {
      default: string;
      opacity75: string;
      opacity50: string;
      opacity25: string;
      opacity15: string;
    };
    secondary: {
      default: string;
      opacity75: string;
      opacity50: string;
      opacity25: string;
      opacity15: string;
    };
    tertiary: {
      default: string;
      opacity75: string;
      opacity50: string;
      opacity25: string;
      opacity15: string;
    };
    success: {
      default: string;
      opacity75: string;
      opacity50: string;
      opacity25: string;
      opacity15: string;
    };
    warning: {
      default: string;
      opacity75: string;
      opacity50: string;
      opacity25: string;
      opacity15: string;
    };
    error: {
      default: string;
      opacity75: string;
      opacity50: string;
      opacity25: string;
      opacity15: string;
    };
  };
  neutralColors: {
    black: {
      default: string;
      opacity75: string;
      medium: string;
      light: string;
    };
    dark: {
      default: string;
      medium: string;
      light: string;
    };
    medium: string;
    light: string;
    white: string;
  };
  shadows: {
    soft: string;
    medium: string;
    hard: string;
  };
  fontSizes: {
    XXL: { fontSize: string; lineHeight: string };
    XL: { fontSize: string; lineHeight: string };
    L: { fontSize: string; lineHeight: string };
    M: { fontSize: string; lineHeight: string };
    default: { fontSize: string; lineHeight: string };
    S: { fontSize: string; lineHeight: string };
    XS: { fontSize: string; lineHeight: string };
  };
  fontWeight: {
    regular: { fontFamily: string; fontWeight: number };
    medium: { fontFamily: string; fontWeight: number };
    bold: { fontFamily: string; fontWeight: number };
  };
  borderRadius: {
    semiRound: string;
    round: string;
    rectangle: string;
  };
  mediaQueries: {
    mobilePortrait: string;
    mobileLandscape: string;
    tablet: string;
    laptop: string;
    desktop: string;
  };
}

Usage

import React from 'react';
import styled from 'styled-components';
import { CoadUIProvider } from 'coad-ui';

function App() {
  return (
    <CoadUIProvider>
      <CustomComponents />
    </CoadUIProvider>
  );
}

Properties

| Property | Type | Required | Default | Description | | --------- | ------ | -------- | --------------------- | ------------- | | theme | ITheme | no | default library theme | Defines theme |

Button

The component provides styled button based on Styled Components. In order to override styles you may extend default Button component:

import styled from 'styled-components';
import { Button } from 'coad-ui';

const CustomButton = styled(Button)``;
...

//or

const CustomButton = styled(Button)`
  &&&{
   //your styles
  }
`;

Or using plain css:

CustomButton.tsx

import Button from 'coad-ui';
import './styled.css';
...
const CustomButton = (props) => <Button className='custom-button'/>;
...

styles.css

.custom-button.custom-button.custom-button {
  ...;
}

Usage

import React from 'react';
import { Button } from 'coad-ui';

const MyComponent = () => (
  <Button
    variant="outline"
    color="primary"
    fontSize="M"
    fontType="medium"
    shape="semiRound"
    onClick={handleClick}>
    Click
  </Button>
);

Button with Icon Use styled icons from here

<Button>
  <CreditCardAlt size="1.5em" />
  <span>Pay</span>
</Button>

Properties

| Property | Type | Required | Default | Possible values | Description | | ------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------------------------------------------------------- | ----------------------------------- | | variant | string | no | 'raised' | 'raised', 'outline', 'text' | Defines style of background color | | disabled | boolean | no | false | | Enable/Disable onClick | | block | boolean | no | false | | It makes the button full width | | color | string | no | 'primary' | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for select and options | | shape | string | no | 'rectangle' | 'semiRound', 'round', 'rectangle' | Defines border radius | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight | | onClick | (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | no | - | | Handler for onClick event | | |

Checkbox and CheckboxGroup

Checkbox and CheckboxGroup

The component provides styled select based on Styled Components with several options. In order to override styles you may extend default Checkbox or CheckboxGroup components:

import styled from 'styled-components';
import { Checkbox, CheckboxGroup } from 'coad-ui';

const StyledCheckbox = styled(Checkbox)`
  margin-left: 10rem;
  &:checked {
    border: 1px solid red;
    background-color: red;
  }
`;

const StyledCheckboxGroup = styled(CheckboxGroup)`
  width: 300px;
  input {
    &:checked {
      border: 1px solid red;
      background-color: red;
    }
  }
`;

//or

const StyledCheckbox = styled(Checkbox)`
  &&& {
    your styles
  }
`;

const StyledCheckboxGroup = styled(CheckboxGroup)`
  &&& {
    your styles
  }
`;

...

Or using plain css:

/CustomCheckbox.tsx

import { Checkbox, CheckboxGroup } from 'coad-ui';
import './styled.css';

const CustomCheckbox = (props) => <Checkbox className='custom-checkbox'/>;
const CustomCheckboxGroup = (props) => <CheckboxGroup items={items} className='custom-checkbox-group'/>;
...

/styles.css

.custom-checkbox.custom-checkbox.custom-checkbox {
  ...;
}

.custom-checkbox-group.custom-checkbox-group.custom-checkbox-group {
  ...;
}

Usage of single Checkbox

import React from 'react';
import { Checkbox } from 'coad-ui';

const MyCheckbox = () => (
  <Checkbox
    label="Checkbox"
    name="checkbox"
    color="primary"
    fontSize="M"
    fontType="bold"
    onChange={(e) => handleChange(e)}
  />
);

Usage of grouped CheckboxGroup

import React from 'react';
import { CheckboxGroup } from 'coad-ui';

const items = [
  {
    value: 'option1',
    label: 'Option'
  },
  {
    value: 'option2',
    label: 'Option',
    isDefaultChecked: true
  },
  {
    value: 'option3',
    label: 'Option',
    isDisabled: true
  }
];

const MyCheckboxGroup = () => (
  <MyCheckboxGroup
    label="CheckboxGroup"
    groupName="checkboxGroup"
    items={items}
    color="primary"
    fontSize="M"
    fontType="bold"
    onChange={(values) => handleChange(values)}
  />
);

Properties of Checkbox

| Property | Type | Required | Default | Possible values | Description | | -------------------- | ---------------- | -------- | --------- | ----------------------------------------------------------------- | ------------------------------------------ | | name | string | no | - | - | Defines name of checkbox | | onChange | (event) => void) | no | - | - | Handler for onChange event | | value | string or number | no | - | - | Defines value of checkbox | | label | string | no | - | - | Defines label of component | | isDefaultChecked | boolean | no | false | - | Defines if component is checked by default | | disabled | boolean | no | false | - | Enable/Disable onClick | | color | string | no | 'primary' | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for checkbox | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight |

Properties of CheckboxGroup

| Property | Type | Required | Default | Possible values | Description | | ------------- | --------------------------------------------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------- | ----------------------------------- | | groupName | string | no | - | - | Defines name of checkbox group | | label | string | no | - | - | Defines label of component | | onChange | (values: { [value: string]: boolean }) => void | no | - | - | Handler for onChange event | | items | array of objects: {value: string or number; label: string; isDefaultChecked?: boolean;} | yes | - | - | The data passed to checkbox options | | disabled | boolean | no | false | - | Enable/Disable onClick | | column | boolean | no | false | - | Defines column/row direction | | color | string | no | 'primary' | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for select and options | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight |

Input

Input

The component provides styled input based on Styled Components. In order to override styles you may extend default Input component:

import styled from 'styled-components';
import {Input} from 'coad-ui';

const StyledInput = styled(Input)`
  input {
    border: 2px solid red;
    color: blue;
    margin-left: 2rem;
  }
`;

// or

const StyledInput = styled(Input)`
  &&& {
    your styles
  }
`;
...

Or using plain css:

/CustomInput.tsx

import Input from 'coad-ui';
import './styled.css';
...
const CustomInput = (props) => <Input className='custom-Input'/>;
...

/styles.css

.custom-Input.custom-Input.custom-Input {
  ...;
}

Usage

import React from 'react';
import { Input } from 'coad-ui';

const MyComponent = () => (
  <Input
    label="Input label"
    placeholder="Placeholder"
    fontSize="M"
    fontType="medium"
    shape="semiRound"
    onChange={handleChange}
  />
);

Properties

| Property | Type | Required | Default | Possible values | Description | | ---------------- | ------------------------------------------------- | -------- | ----------- | ----------------------------------------------------------------- | ----------------------------------------------- | | label | string | no | - | - | Descriptive label that appears above the Input. | | placeholder | string | no | - | - | Placeholder to display initially | | textarea | boolean | no | - | - | Enables textarea type | | defaultValue | string | no | - | - | Default value | | value | string | no | - | - | Current value | | message | string | no | - | - | Input message | | maxLength | number | no | - | - | Max length of input value | | color | string | no | - | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for Input | | shape | string | no | 'rectangle' | 'semiRound', 'round', 'rectangle' | Defines border-radius of Input | | width | string | no | '250px' | - | Defines width of Input | | margin | string | no | 0 | - | Defines Input margin | | block | boolean | no | false' | - | Defines properties: display: block, width: 100% | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight | | disabled | boolean | no | false | - | Enable/Disable onClick | | onChange | (e: React.ChangeEvent) => void; | no | - | - | Handler for onChange event | | onClick | (e: React.SyntheticEvent) => void | no | - | - | Handler for onClick event |

RadioButton and RadioButtonGroup

RadioButton and RadioButtonGroup

The component provides styled select based on Styled Components with several options. In order to override styles you may extend default RadioButton or RadioButtonGroup components:

import styled from 'styled-components';
import { RadioButton, RadioButtonGroup } from 'coad-ui';

const StyledRadioButton = styled(RadioButton)`
  &:before {
    background-color: red;
  }
  &:after {
    border: 1px solid red;
  }
`;

const StyledRadioButtonGroup = styled(RadioButtonGroup)`
  width: 300px;
  input {
    &:before {
      background-color: red;
    }
    &:after {
      border: 1px solid red;
    }
  }
`;

// or

const StyledRadioButton = styled(RadioButton)`
  &&& {
    your styles
  }
`;

const StyledRadioButtonGroup = styled(RadioButtonGroup)`
  &&& {
    your styles
  }
`;
...

Or using plain css:

/CustomRadioButton.tsx

import { RadioButton, RadioButtonGroup } from 'coad-ui';
import './styled.css';

const CustomRadioButton = (props) => <RadioButton className='custom-radio-button'/>;
const CustomRadioButtonGroup = (props) => <RadioButtonGroup items={items} className='custom-radio-button-group'/>;
...

/styles.css

.custom-radio-button.custom-radio-button.custom-radio-button {
  ...;
}

.custom-radio-button-group.custom-radio-button-group.custom-radio-button-group {
  ...;
}

Usage of single RadioButton

import React from 'react';
import { RadioButton } from 'coad-ui';

const MyRadioButton = () => (
  <RadioButton
    label="RadioButton"
    name="radioButton"
    color="primary"
    fontSize="M"
    fontType="bold"
    onChange={(e) => handleChange(e)}
  />
);

Usage of grouped RadioButtonGroup

import React from 'react';
import { RadioButtonGroup } from 'coad-ui';

const items = [
  {
    label: 'Option',
    value: 'option1'
  },
  {
    label: 'Option',
    value: 'option2'
  },
  {
    label: 'Option',
    value: 'option3'
  },
  {
    label: 'Option',
    value: 'option4',
    isDisabled: true
  }
];

const MyRadioButtonGroup = () => (
  <RadioButtonGroup
    label="RadioButtonGroup"
    groupName="radioButtonGroup"
    items={items}
    color="primary"
    fontSize="M"
    fontType="bold"
    onChange={(value) => handleChange(value)}
  />
);

Properties of RadioButton

| Property | Type | Required | Default | Possible values | Description | | ------------ | ---------------- | -------- | --------- | ----------------------------------------------------------------- | --------------------------------- | | name | string | no | - | - | Defines name of radio button | | onChange | (event) => void) | no | - | - | Handler for onChange event | | value | string or number | no | - | - | Defines value of radio button | | label | string | no | - | - | Defines label of component | | disabled | boolean | no | false | - | Enable/Disable onClick | | color | string | no | 'primary' | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for radio button | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight |

Properties of RadioButtonGroup

| Property | Type | Required | Default | Possible values | Description | | ---------------- | ------------------------------------------------------------ | -------- | --------- | ----------------------------------------------------------------- | ------------------------------------------ | | groupName | string | no | - | - | Defines name of checkbox group | | label | string | no | - | - | Defines label of component | | onChange | (value) => void | no | - | - | Handler for onChange event | | items | array of objects: {value: string or number; label: string; } | yes | - | - | The data passed to checkbox options | | defaultValue | string | no | - | - | Defines value which will be set by default | | disabled | boolean | no | false | - | Enable/Disable onClick | | column | boolean | no | false | - | Defines column/row direction | | color | string | no | 'primary' | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for select and options | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight |

Select

Select

The component provides styled select based on Styled Components with several options. In order to override styles you may extend default Select component:

import styled from 'styled-components';
import {Select} from 'coad-ui';

const StyledSelect = styled(Select)`
  margin: 2rem;
  width: 200px;
`;

// or

const StyledSelect = styled(Select)`
  &&& {
    your styles
  }
`;
...

Or using plain css:

/CustomSelect.tsx

import Select from 'coad-ui';
import './styled.css';
...
const CustomSelect = (props) => <Select options={options} className='custom-select'/>;
...

/styles.css

.custom-select.custom-select.custom-select {
  ...;
}

Usage

import React from 'react';
import { Select } from 'coad-ui';

const MyComponent = () => (
  <Select
    options={options}
    name="Choose option"
    color="primary"
    fontSize="M"
    fontType="bold"
    defaultValue={2}
    onChange={(option) => handleChange(option)}
  />
);

Properties

| Property | Type | Required | Default | Possible values | Description | | ---------------- | --------------------------------- | -------- | --------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------- | | options | array | yes | - | array of objects: {key: number or string; value?: string or number; label: string} | The data passed to select options | | name | string | no | - | - | The value to display initially | | color | string | no | 'primary' | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for select and options | | width | string | no | '200px' | - | Defines width of select | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight | | variant | string | no | 'outlined' | 'outlined', 'text' | Defines variant of select
| defaultValue | number or string | no | - | - | Defines initially selected value from passed options | | disabled | boolean | no | false | - | Enable/Disable onClick | | block | boolean | no | false | - | Defines properties: display: block, width: 100% | | onChange | ({label, value}) => void) | no | - | - | Handler for onChange event | | onClick | (e: React.SyntheticEvent) => void | no | - | - | Handler for onClick event |

DatePicker

DatePicker This DatePicker is based on react-datepicker The component provides styled date-picker based on Styled Components. In order to override styles you may extend default DatePicker component:

import styled from 'styled-components';
import {DatePicker} from 'coad-ui';

const StyledDatePicker = styled(DatePicker)`
  border: 2px solid red;
  color: blue;
  margin-left: 2rem;
`;

// or

const StyledDatePicker = styled(DatePicker)`
  &&& {
    your styles
  }
`;
...

Or using plain css:

/CustomDatePicker.tsx

import DatePicker from 'coad-ui';
import './styled.css';
...
const CustomDatePicker = (props) => <DatePicker className='custom-DatePicker'/>;
...

/styles.css

.custom-DatePicker.custom-DatePicker.custom-DatePicker {
  ...;
}

Usage

import React, { useState } from 'react';
import { DatePicker } from 'coad-ui';

const MyComponent = () => (
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  return (
      <DatePicker
        label="Default"
        onChange={(date) => setStartDate(date)}
        placeholderText="Placeholder"
        selected={startDate}
      />
  )
);

Properties

| Property | Type | Required | Default | Possible values | Description | | ------------------- | ------------------------------------------------- | -------- | ----------- | ----------------------------------------------------------------- | ---------------------------------------------------- | | label | string | no | - | - | Descriptive label that appears above the DatePicker. | | placeholderText | string | no | - | - | Placeholder to display initially | | defaultValue | string | no | - | - | Default value | | value | string | no | - | - | Current value | | message | string | no | - | - | Input message | | maxLength | number | no | - | - | Max length of input value | | color | string | no | - | 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error' | Themed color for DatePicker | | shape | string | no | 'rectangle' | 'semiRound', 'round', 'rectangle' | Defines border-radius of DatePicker | | fontSize | string | no | 'default' | 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'default' | Defines font-size and line-height | | fontType | string | no | 'regular' | 'regular', 'medium', 'bold' | Defines font-weight | | disabled | boolean | no | false | - | Enable/ | | margin | string | no | 0 | - | Defines DatePicker margin | | Disable onClick | | onChange | (e: React.ChangeEvent) => void; | no | - | - | Handler for onChange event | | onClick | (e: React.SyntheticEvent) => void | no | - | - | Handler for onClick event |