boxis-uikit v1.5.5

Boxis UIKit

Styled react components

Installation

• Install NPM dependency

  	``npm install boxis-uikit``

• Connect styles in main js or css file

  JS

  	```js
  	import "boxis-uikit/dist/index.css";
  	```

  or

  CSS

  		@import url("boxis-uikit/dist/index.css");
  		```

API

Navigation

• Input
• Button
• Form
  • type FormValidationRule
  • enum ValidationRule
• Modal
• Select
  • type Option
• Dropdown
• Notifications
  • enum NotificationType
• type UIKitProviderProps

Input

Example

<Input
  border
  type='email'
  size='lg'
  name='email'
  placeholder='Type Email'
/>

Example with validation

<Input
  border
  type='email'
  size='lg'
  name='email'
  placeholder='Type Email'
  validation={[
    {
      rule: ValidationRule.Required,
      message: 'Fill required field!',
    },
    {
      rule: ValidationRule.RegExp,
      message: 'Incorrect email',
      value: /^\S+@\S+\.\S+$/,
    },
  ]}
/>

Props extends HTMLInputElement

Button

Example

const [count, setCount] = useState(0);

return (
  <Button
    size='lg'
    onClick={setCount((prev) => prev + 1)}
  >
    Increment
  </Button>
);

Props extends HTMLButtonElement

Form

Example

<Form>
  <Input
    border
    type='email'
    size='lg'
    name='email'
    placeholder='Type email'
    validation={[
      {
        rule: ValidationRule.Required,
        message: 'Fill required field!',
      },
      {
        rule: ValidationRule.RegExp,
        message: 'Incorrect email',
        value: /^\S+@\S+\.\S+$/,
      },
    ]}
  />
  <Input
    border
    type='password'
    size='lg'
    name='password'
    placeholder='Type password'
    validation={[
      {
        rule: ValidationRule.Required,
        message: 'Fill required field!',
      },
      {
        rule: ValidationRule.MaxLength,
        value: 18,
        message: 'Length cannot be higher of 8 symbols!',
      },
      {
        rule: ValidationRule.MinLength,
        value: 6,
        message: 'Length cannot be lower of 6 symbols!',
      },
    ]}
  />
  <Button size='lg' type='submit'>
    Register
  </Button>
</Form>

Props extends HTMLFormElement

Modal

Example

const [isShow, setIsShow] = useState(false);

return (
  <Modal isShow={isShow} onClose={() => setIsShow(false)}>
    <p>Do you agree with website rules?</p>
    <button>Yes</button>
    <button>No</button>
  </Modal>
);

Props

Select

Example

return (
  <Select
    placeholder='Choose your language'
    options={[
      { label: 'English', value: 'en' },
      { label: 'Deutsch', value: 'de' },
    ]}
  />
);

Props

Dropdown

Example

return (
  <div>
    <Button id='dropdown-btn'>
      Dropdown
    </Button>
    <Dropdown triggerId='dropdown-btn'>
      Some content
    </Dropdown>
  </div>
);

Props

Notifications

Example

const { addNotification } = useNotifications();

return (
  <UIKitProvider>
    <Button
      onClick={() =>
        addNotification({
          type: NotificationType.Success,
          title: 'Done!',
          description: 'Project has been successfully published!',
        })
      }
    >
      Call notification
    </Button>
  </UIKitProvider>
);

Props

type UIKitProviderProps

type Option

type FormValidationRule

enum ValidationRule

enum NotificationType