Motorsport UI-Kit

Rus

Публичный UI Kit компании Motorsport Network.

Установка и использование

Для установки в проект необходимо:

npm i motorsport-ui-kit

Также, необходимо подключить стили библиотеки в любом удобном месте, к примеру в глобальных стилях проекта:

import "motorsport-ui-kit/dist/motorsport-ui-kit.cjs.development.css"

В случае использования компонента LilCards или GallerySlider содержащего слайдер необходимо, также подключить стили библиотеки react-image-gallery:

import "react-image-gallery/styles/scss/image-gallery.scss";

Используемый стек технологий:

• React
• Typescript
• Next JS
• CSS Modules + SCSS
• Jest

Список доступных компонентов:

Breadcrumbs, Button, Checkbox, Chips, FileUploader, Input, SelectionControls, Select, Search, Modal, Overlay, LilCards, TextArea, SplitTwoColumns, GallerySlider, Accordion, SnackBar,

Examples with requires props (примеры базового использования, только обязательные props):

• Breadcrumbs:

<Breadcrumbs
  pathList={[
    {
      href: 'https://google.com',
      name: 'Google home'
    },
    {
      href: 'https://docs.google.com/document/u/0/',
      name: 'Google docs'
    },
    {
      href: 'https://workspace.google.com/products/docs/',
      name: 'Workspace'
    }
  ]}
 />

• Button:

<Button
    onClick={function that will be executed by clicking}
>
  Default button
</Button>

• Checkbox:

<Checkbox
  checkboxName="FirstCheckbox"
  label="Remember Me"
  onChange={something function that is ready to accept the returned result onChange act}
/>

• Chips:

<ChipGroup
  changeFunc={something function that is ready to accept the returned result onChange act}
  chipsData={[
    {
      chipName: 'Buy a Car',
      id: 0
    },
    {
      chipName: 'Sell a Car',
      id: 1
    },
    {
      chipName: 'Donate a Car',
      id: 2
    }
  ]}
/>

• FileUploader:

<FileUploader
    uploaderName="uploader_name"
    onUploadFile={something function that is ready to accept the returned result onUpload file act} />

• Input:

<Input
  inputName="input_name"
  onChange={something function that is ready to accept the returned result onChange act}
/>

• SelectionControls:

<SelectionControls
    name="radio_input"
    onChange={something function that is ready to accept the returned result onChange act}
/>

• Select:

<Select
    options={[
        {value: "ferrary", label: "Ferrary" },
        { value: "ford", label: "Ford" },
        { value: "bmw", label: "BMW" },
        ]}
    title=""
    iconAfter={something icon for render on the right in select}
    getSelected={something function that is ready to accept the returned result onChange act}
    name="select_name"
/>

• Search:

<Search searchName="search_name"
    onChange=(value, name, category) => (func which launch by change input's value)
    onEnterDown=(value, name, category) => (func which launch by keydown's Enter)
   />

• Modal:

<Modal
        isShow
        hideFunc={func which change status for isShowProp}
        modalContent={
          <>
            <h2>Title</h2>
            <h4>Text text text...</h4>
          </>
        }
      />

• Overlay:

<Overlay isShow type="dark_black" onClick={func which launch by click's event} />

• LilCards:

<LilCards
          columns={2}
          rows="all"
          cardItems={carts}
          uploadBtn
          uploadBtnProps={{
            uploadFunc: () => func which upload fresh data for new cards render),
            uploadName: "Load More and More",
          }}
        />

• TextArea:

<TextArea
  textAreaName="text_area_name"
  onChange={something function that is ready to accept the returned result onChange act}
/>

• SplitTwoColumns:

<SplitTwoColumns>
    <section>Lorem 20 ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum nam numquam corrupti
    illo illum nostrum eligendi ipsam placeat quibusdam inventore.</section>
    <section>Lorem 20 ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum nam numquam corrupti
    illo illum nostrum eligendi ipsam placeat quibusdam inventore.</section>
</SplitTwoColumns>

• GallerySlider:

<GallerySlider sliderImages={[
  {original: 'img_source', thumbnail: 'img_source'},
  {original: 'img_source', thumbnail: 'img_source'} ... etc.]} />

• Accordion:

<Accordion list={[{
  id: 0,
  title: "Some title",
  content: "Some content,
}, etc.]}/>

• SnackBar:

<SnackBar hideFunc={() => {}} message="Something was wrong" show />

Eng

The public UI Kit of the Motorsport Network company.

Installation and use

To install it in the project, you must:

npm i motorsport-ui-kit

Also, you need to connect the library styles in any convenient place, for example, in the global styles of the project:

import "motorsport-ui-kit/dust/motorsport-ui-kit.cs.development.css"

In the case of using the LilCards or GallerySlider component containing a slider, it is also necessary to connect the styles of the react-image-gallery library:

import "react-image-gallery/styles/css/image-gallery.css";

Technology stack used:

• React
• Typescript
• Next JS
• CSS Modules + CSS
• Just

List of available components:

Breadcrumbs, Button, Checkbox, Chips, FileUploader, Input, SelectionControls, Select, Search, Modal, Overlay, LilCards, TextArea, SplitTwoColumns, GallerySlider, Accordion, SnackBar,

See the usage examples above.