Boxis UIKit

Styled react components

Installation

• Install NPM dependency

  npm install boxis-uikit

• Connect styles in main js or css file

  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

Name	Type	Description
label?	string	Label of input
size?	md / lg	Input size
icon?	ReactNode	Icon in input
error?	boolean	Error state
errorText?	string	Error text
border?	boolean	Switch border
type?	text / email / password	Input type
validation?	FormValidationRule[]	Validation rules for element. Using only in Form

Button

Example

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

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

Props extends HTMLButtonElement

Name	Type	Description
size?	sm / md / lg	Size of button
outlined?	boolean	State of button with empty background and active border
borderless?	boolean	State of button without border
loading?	boolean	State of button with loader

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

Name	Type	Description
onSubmit	({ values, formData }) => void	Callback of form submit
onValidationFailed?	({ values, validation }) => void	Callback at failed validation

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

Name	Type	Description
portalElement?	HTMLElement	Portal HTML-element. Default: body
hideCloseButton?	boolean	Hide close button
disableOverlayClose?	boolean	Forbid closing modal on overlay click
isShow	boolean	Show modal
onClose	() => void	Callback of modal closing

Select

Example

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

Props

Name	Type	Description
className?	string	Class html attribute
name?	string	Name html attribute. Using with Form
placeholder?	string	Placeholder for Select
defaultValue?	string	Default value
options	Option[]	Select options
validation?	FormValidationRule[]	Validation rules for element. Using only in Form
onChange?	(value: string) => void	Callback at changing select option

Dropdown

Example

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

Props

Name	Type	Description
className?	string	Class html attribute
triggerId	string	Dropdown trigger id
topOffset?	number = 15	Top offset in px

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

Name	Type	Description
type	success / warning / error	Notification style - NotificationType
title	string	Title of notification
description	string	Description of notification

type UIKitProviderProps

Name	Type	Description
notifications	{ dismissTimeout: number }	Notification params. dismissTimeout - notification lifetime

type Option

Name	Type	Description
label	string	Label
value	string	Value
icon?	ReactNode	Icon
disabled?	boolean	Disable option's selectable

type FormValidationRule

Name	Type	Description
rule	ValidationRule	Rule identificator
message	string	Failed validation message
value?	unknown	Value for validation rule

enum ValidationRule

Name	Type	Description
Required	required	Required field
Match	match	Checking value is match
NotMatch	not_match	Checking value is not match
MinLength	min_length	Length of string equal or higher of value
MaxLength	max_length	Length of string equal or lower of value
RegExp	regexp	Checking value is match of regular expression
Custom	custom_<uuid>	Receives callback function (fieldValue) => boolean (where's argument fieldValue - field value) in value property in validation rule. If return true - validation will be successfuly, if return false - validation will be unsuccessfuly

enum NotificationType

Name	Type	Description
Success	success	Success notification style
Warning	warning	Warning notification style
Error	error	Error notification style