Willykit UI Core

Основная библиотека компонентов Willykit UI.

Установка

# npm
npm install @willykit-ui/ui @emotion/react @emotion/styled

# yarn
yarn add @willykit-ui/ui @emotion/react @emotion/styled

# pnpm
pnpm add @willykit-ui/ui @emotion/react @emotion/styled

Использование

import { Button } from '@willykit-ui/components';

function App() {
  return (
    <div>
      <h1>Моё приложение</h1>
      <Button appName="myApp">Кликни меня</Button>
    </div>
  );
}

Компоненты

Button

Компонент кнопки с поддержкой стилизации через Emotion.

<Button appName="myApp">Кликни меня</Button>

Props

| Имя | Тип | Обязательный | Описание | | --- | --- | --- | --- | | appName | string | Да | Имя приложения | | children | ReactNode | Да | Контент кнопки | | className | string | Нет | CSS класс для стилизации | | css | SerializedStyles | Нет | Emotion CSS стили |

Стилизация

Использование css prop

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Button } from '@willykit-ui/components';

function App() {
  return (
    <Button 
      appName="myApp" 
      css={css`
        background-color: teal;
        padding: 12px 24px;
        &:hover {
          background-color: darkteal;
        }
      `}
    >
      Кликни меня
    </Button>
  );
}

Использование styled API

import styled from '@emotion/styled';
import { Button } from '@willykit-ui/components';

const GreenButton = styled(Button)`
  background-color: green;
  padding: 12px 24px;
  &:hover {
    background-color: darkgreen;
  }
`;

function App() {
  return <GreenButton appName="myApp">Зеленая кнопка</GreenButton>;
}

Разработка

Запуск тестов

pnpm test

Сборка

pnpm build

Документация

Полную документацию можно найти на сайте документации.