@namelessdev/blocks

Nameless Blocks

Beta версия, не предназначена для продакшена

Пакет с функдаметральными блоками для построения вашего интерфейса. Эти блоки дают вам базовые стили и возможность какими html тегами или вашими личными компонентами они будут являтся. Так же у них есть возможность мигрировать в свой дочерний элемент, чтобы разделять свойства. но не добавлять колличесво тегов, аналог asChild из Radix-ui, но построена на библиотеке @namelessdev/slots. Для стилизации используется TailwindCSS, атрибут className расширен и принимает тип ClassValue из библиотеки clsx. Так же все функции типа grid, flex, conteiner и тому подобного назначатся при помощи TailwindCSS для облегчения функциональности, так как в TailwindCSS они уже есть и хорошо работают.

Box

Простой аналог div или другова элемента который вы укажете в as?: T | React.FC. Во круг него строятся все остальные компоненты этого пакета.

const DecorativeBox: FC = () => {};

<Box className="p-5 rounded-md" as={DecorativeBox}>
  <Heading>Hello</Heading>
</Box>;

<Box className="p-5 rounded-md">
  <DecorativeBox slot="parent">
    <Heading>Hello</Heading>
  </DecorativeBox>
</Box>

Flex

Компонент для создания flex layout. Это обёртка над Box, которые добавляет стили flex justify-center items-center gap-3. У него есть все теже функции, что и у Box. Отступы и другие настройки применяются при помощи классов TailwindCSS

<Flex
  as="menu"
  className={{
    "bg-blue-200 p-5": isVisibility,
  }}
>
  <Box className="w-5 h-5 rounded-md">1</Box>
  <Box className="w-5 h-5 rounded-md">2</Box>
  <Box className="w-5 h-5 rounded-md">3</Box>
  <Box className="w-5 h-5 rounded-md">4</Box>
</Flex>

Stack

Полный аналог компонента Flex, только с самого начала добавлсяет flex-col.

<Stack className="gap-3">
  <Box className="w-5 h-5 rounded-md">1</Box>
  <Box className="w-5 h-5 rounded-md">2</Box>
  <Box className="w-5 h-5 rounded-md">3</Box>
  <Box className="w-5 h-5 rounded-md">4</Box>
</Stack>

Grid

Компонент для создания сеток на основе css Grid. Настройки сетки применяются при помощи классов TailwindCSS.

<Grid
  className={{
    "grid-cols-2": isTrue,
    "grid-cols-[200px_minmax(900px,_1fr)]": isFalse,
    "gap-3": true,
  }}
>
  <Box className="w-5 h-5 rounded-md">1</Box>
  <Box className="w-5 h-5 rounded-md">2</Box>
  <Box className="w-5 h-5 rounded-md">3</Box>
  <Box className="w-5 h-5 rounded-md">4</Box>
</Grid>

Section

Это компонент для отделения секций. Это единственный компонент в пакете, который может быть только тегом section, так как это синтаксицеский компонент.

<Box className="py-5">
  <DecorativeBox>
    <Section slot="parent">
      <Heading>Hello World</Heading>
    </Section>
  </DecorativeBox>
</Box>

Container

Компонент для ограничения максимальной ширины страницы и выравнивания по центру. Все настройки так же применяются при помощи классов TailwindCSS container

<Container className="max-w-screen-lg p-5 rounded-md">
  <Flex slot="parent">
    <Heading>Hello World</Heading>
  </Flex>
</Container>