coad-ui v1.1.75

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

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

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

Properties of CheckboxGroup

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

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

Properties of RadioButtonGroup

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

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