nntc-ui 0.2.3 → 0.2.6

package/src/components/common/Button/Button.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AddIcon } from '@icons/AddIcon';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['filled', 'outlined', 'text', 'elevated', 'tonal'],
+    },
+    componentSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extraLarge'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    compact: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+    children: 'Кнопка',
+  },
+};
+
+export const Active: Story = {
+  args: {
+    variant: 'filled',
+    isActive: true,
+    children: 'Кнопка',
+  },
+};
+
+export const IconButton: Story = {
+  args: {
+    variant: 'filled',
+    children: 'Кнопка',
+    icon: <AddIcon />,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
+      <Button componentSize="small">Small</Button>
+      <Button componentSize="medium">Medium</Button>
+      <Button componentSize="large">Large</Button>
+      <Button componentSize="extraLarge">Extra large</Button>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+      <Button variant="filled">Filled</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="text">Text</Button>
+      <Button variant="elevated">Elevated</Button>
+      <Button variant="tonal">Tonal</Button>
+    </div>
+  ),
+};
+
+export const CompactText: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <span style={{ color: 'var(--theme-text-primary)' }}>Выбранное</span>
+      <Button variant="text" componentSize="small">
+        Text
+      </Button>
+      <Button variant="text" componentSize="small" compact>
+        Compact
+      </Button>
+    </div>
+  ),
+};

package/src/components/common/Button/Button.tsx

@@ -0,0 +1,59 @@
+import classnames from 'classnames';
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode, forwardRef } from 'react';
+
+import { ButtonVariant } from '@models/ButtonVariant';
+import { FieldSize } from '@models/FieldSize';
+import { UiProps } from '@models/UiProps';
+
+import * as styles from './button.module.css';
+
+export interface Props {
+  variant?: ButtonVariant;
+  componentSize?: FieldSize;
+  icon?: ReactNode;
+  textSecondary?: boolean;
+  isActive?: boolean;
+  compact?: boolean;
+}
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & UiProps<Props>
+>(function Button(
+  {
+    variant = 'filled',
+    componentSize = 'medium',
+    icon,
+    textSecondary,
+    isActive,
+    compact,
+    className,
+    children,
+    classes,
+    ...buttonProps
+  },
+  propRef,
+) {
+  return (
+    <button
+      className={classnames(
+        styles.root,
+        styles[variant as keyof typeof styles],
+        styles[componentSize as keyof typeof styles],
+        !icon ? styles.withoutIcon : !children ? styles.onlyIcon : styles.withIcon,
+        isActive ? styles.active : undefined,
+        textSecondary ? styles.textSecondary : undefined,
+        compact ? styles.compact : undefined,
+        className,
+        classes?.root,
+      )}
+      {...buttonProps}
+      ref={propRef}
+    >
+      <span className={classnames(styles.stateLayer, classes?.stateLayer)}>
+        {icon}
+        {children}
+      </span>
+    </button>
+  );
+});

package/src/components/common/Button/button.module.css

@@ -0,0 +1,337 @@
+.root {
+  padding: 0;
+  font-size: var(--text-button-size);
+  font-weight: var(--text-button-weight);
+  line-height: var(--text-button-height);
+  letter-spacing: var(--text-button-letter);
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 4px;
+}
+
+.state-layer {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: transparent;
+}
+
+.root:hover > .state-layer {
+  background-color: var(--theme-button-state-hover);
+}
+
+.root:focus-visible > .state-layer,
+.root.active > .state-layer {
+  background-color: var(--theme-button-state-focus);
+}
+
+.root:active > .state-layer {
+  background-color: var(--theme-button-state-pressed);
+}
+
+.filled {
+  color: var(--theme-text-button-invert);
+  background-color: var(--theme-focus);
+}
+
+.filled:hover > .state-layer {
+  background-color: var(--theme-button-filled-hover-layer);
+}
+
+.filled:focus-visible > .state-layer,
+.filled.active > .state-layer {
+  background-color: var(--theme-button-filled-focus-layer);
+}
+
+.filled:active > .state-layer {
+  background-color: var(--theme-button-filled-pressed-layer);
+}
+
+.filled:focus-visible,
+.filled.active {
+  background-color: var(--theme-button-filled-focus);
+}
+
+.filled:active {
+  background-color: var(--theme-button-filled-pressed);
+}
+
+.filled:hover {
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.3),
+    0 1px 3px 1px rgba(0, 0, 0, 0.15);
+}
+
+.filled:focus-visible:hover,
+.filled.active:hover {
+  background-color: var(--theme-button-filled-focus);
+}
+
+.outlined {
+  color: var(--theme-focus);
+  background-color: transparent;
+  border: 1px solid var(--theme-button-outlined-border);
+}
+
+.outlined:focus-visible,
+.outlined.active {
+  border-color: var(--theme-focus);
+}
+
+.text {
+  color: var(--theme-focus);
+  background-color: transparent;
+}
+
+.elevated {
+  color: var(--theme-focus);
+  background-color: var(--theme-button-elevated);
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.3),
+    0 1px 3px 1px rgba(0, 0, 0, 0.15);
+}
+
+.elevated:hover {
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.3),
+    0 2px 6px 2px rgba(0, 0, 0, 0.15);
+}
+
+.small.elevated,
+.medium.elevated,
+.large.elevated {
+  background-color: var(--theme-button-elevated-subtle);
+}
+
+.extraLarge.elevated {
+  background-color: var(--theme-button-elevated);
+  background-image: linear-gradient(var(--theme-overlay-8), var(--theme-overlay-8));
+}
+
+.tonal {
+  color: var(--theme-button-tonal-text);
+  background-color: var(--theme-button-tonal-subtle);
+}
+
+.extraLarge.tonal {
+  background-color: var(--theme-button-tonal);
+}
+
+.filled > .state-layer > svg {
+  fill: var(--theme-text-button-invert);
+}
+
+.outlined > .state-layer > svg,
+.text > .state-layer > svg,
+.elevated > .state-layer > svg {
+  fill: var(--theme-focus);
+}
+
+.tonal > .state-layer > svg {
+  fill: var(--theme-button-tonal-text);
+}
+
+.small,
+.small > .state-layer {
+  height: 24px;
+}
+
+.medium,
+.medium > .state-layer {
+  height: 28px;
+}
+
+.large,
+.large > .state-layer {
+  height: 32px;
+}
+
+.extraLarge,
+.extraLarge > .state-layer {
+  height: 40px;
+}
+
+.small .state-layer > svg {
+  width: 20px;
+  height: 20px;
+}
+
+.medium .state-layer > svg {
+  width: 20px;
+  height: 20px;
+}
+
+.large .state-layer > svg,
+.extraLarge .state-layer > svg {
+  width: 24px;
+  height: 24px;
+}
+
+.without-icon.small > .state-layer {
+  padding: 2px 12px;
+}
+
+.without-icon.medium > .state-layer {
+  padding: 4px 16px;
+}
+
+.without-icon.large > .state-layer {
+  padding: 6px 24px;
+}
+
+.without-icon.extraLarge > .state-layer {
+  padding: 10px 24px;
+}
+
+.with-icon.small > .state-layer {
+  gap: 4px;
+  padding: 2px 12px 2px 8px;
+}
+
+.with-icon.medium > .state-layer {
+  gap: 4px;
+  padding: 4px 16px 4px 12px;
+}
+
+.with-icon.large > .state-layer {
+  gap: 8px;
+  padding: 4px 20px 4px 8px;
+}
+
+.with-icon.extraLarge > .state-layer {
+  gap: 8px;
+  padding: 8px 20px 8px 8px;
+}
+
+.only-icon.small > .state-layer {
+  padding: 2px;
+}
+
+.only-icon.medium > .state-layer {
+  padding: 4px;
+}
+
+.only-icon.large > .state-layer {
+  padding: 4px;
+}
+
+.only-icon.extraLarge > .state-layer {
+  padding: 8px;
+}
+
+.text.without-icon.small > .state-layer {
+  padding: 2px 12px;
+}
+
+.text.without-icon.medium > .state-layer {
+  padding: 4px 12px;
+}
+
+.text.without-icon.large > .state-layer {
+  padding: 6px 24px;
+}
+
+.text.without-icon.extraLarge > .state-layer {
+  padding: 10px 24px;
+}
+
+.text.with-icon.small > .state-layer {
+  gap: 4px;
+  padding: 2px 12px 2px 8px;
+}
+
+.text.with-icon.medium > .state-layer {
+  gap: 4px;
+  padding: 4px 12px 4px 8px;
+}
+
+.text.with-icon.large > .state-layer {
+  gap: 8px;
+  padding: 6px 24px 6px 8px;
+}
+
+.text.with-icon.extraLarge > .state-layer {
+  gap: 8px;
+  padding: 10px 24px 10px 8px;
+}
+
+.text.only-icon.small > .state-layer {
+  padding: 2px;
+}
+
+.text.only-icon.medium > .state-layer {
+  padding: 4px;
+}
+
+.text.only-icon.large > .state-layer {
+  padding: 4px;
+}
+
+.text.only-icon.extraLarge > .state-layer {
+  padding: 8px;
+}
+
+.compact,
+.compact > .state-layer {
+  height: auto;
+}
+
+.compact > .state-layer {
+  width: auto;
+  padding: 0;
+}
+
+.compact:hover > .state-layer,
+.compact:focus-visible > .state-layer,
+.compact:active > .state-layer,
+.compact.active > .state-layer {
+  background-color: transparent;
+}
+
+.text-secondary {
+  color: var(--theme-text-secondary) !important;
+}
+
+.text-secondary:hover,
+.text-secondary:focus-visible,
+.text-secondary:active,
+.text-secondary.active {
+  color: var(--theme-focus) !important;
+}
+
+.text-secondary > span > svg {
+  fill: var(--theme-text-secondary) !important;
+}
+
+.text-secondary:hover > span > svg,
+.text-secondary:focus-visible > span > svg,
+.text-secondary:active > span > svg,
+.text-secondary.active > span > svg {
+  fill: var(--theme-focus) !important;
+}
+
+.root:disabled,
+.root[disabled] {
+  color: var(--theme-text-inactive);
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.tonal:disabled,
+.tonal[disabled],
+.elevated:disabled,
+.elevated[disabled],
+.filled:disabled,
+.filled[disabled] {
+  background-color: var(--theme-grey-700);
+  box-shadow: none;
+}
+
+.outlined:disabled,
+.outlined[disabled] {
+  border-color: var(--theme-button-outlined-border);
+}

package/src/components/common/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/components/common/ButtonsGroup/ButtonsGroup.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ButtonsGroup } from './ButtonsGroup';
+import { Button } from '../Button';
+
+const meta: Meta<typeof ButtonsGroup> = {
+  title: 'Components/ButtonsGroup',
+  component: ButtonsGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonsGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Кнопка 1</Button>
+        <Button>Кнопка 2</Button>
+        <Button>Кнопка 3</Button>
+      </>
+    ),
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Кнопка 1</Button>
+        <Button>Кнопка 2</Button>
+        <Button>Кнопка 3</Button>
+      </>
+    ),
+    classes: {
+      root: 'custom-buttons-group',
+    },
+  },
+};
+
+export const WithDifferentButtonTypes: Story = {
+  args: {
+    children: (
+      <>
+        <Button variant="filled">Заполненная</Button>
+        <Button variant="outlined">Контурная</Button>
+        <Button variant="text">Текстовая</Button>
+      </>
+    ),
+  },
+};

package/src/components/common/ButtonsGroup/ButtonsGroup.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
+
+import { UiProps } from '@models/UiProps';
+
+import * as styles from './buttonsGroup.module.css';
+
+interface Props {
+  fillEvenly?: boolean;
+}
+
+export const ButtonsGroup = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<UiProps<Props>> & HTMLAttributes<HTMLDivElement>
+>(function ButtonsGroup({ children, fillEvenly, classes, className, ...rest }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={classNames(styles.root, fillEvenly && styles.fillEvenly, className, classes?.root)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});

package/src/components/common/ButtonsGroup/buttonsGroup.module.css

@@ -0,0 +1,24 @@
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.fill-evenly > * {
+  flex-grow: 1;
+  width: 0;
+}
+
+.root > *:nth-child(n + 1) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.root > *:nth-child(n + 2) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.root > *:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}

package/{components/common/ButtonsGroup/index.d.ts → src/components/common/ButtonsGroup/index.ts}

@@ -1,2 +1 @@
 export { ButtonsGroup } from './ButtonsGroup';
-//# sourceMappingURL=index.d.ts.map

package/src/components/common/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    componentSize: {
+      control: 'select',
+      options: ['medium', 'large'],
+    },
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    several: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    label: 'Чекбокс',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'Выбранный чекбокс',
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Отключенный чекбокс',
+    checked: true,
+    disabled: true,
+  },
+};