nntc-ui 0.2.6 → 0.2.8

package/src/components/common/Select/select.module.css

@@ -1,87 +0,0 @@
-.input {
-  cursor: pointer;
-}
-
-.input:disabled {
-  cursor: default;
-}
-
-.icon,
-.item-icon {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  transform: translateY(-50%);
-}
-
-[data-size='small'] .icon,
-[data-size='small'] .item-icon {
-  left: 6px;
-}
-
-[data-size='medium'] .icon,
-[data-size='medium'] .item-icon {
-  left: 8px;
-}
-
-[data-size='large'] .icon,
-[data-size='large'] .item-icon,
-[data-size='extraLarge'] .icon,
-[data-size='extraLarge'] .item-icon {
-  left: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-[data-size='small'] .icon + .item-icon {
-  left: 30px;
-}
-
-[data-size='medium'] .icon + .item-icon {
-  left: 32px;
-}
-
-[data-size='large'] .icon + .item-icon,
-[data-size='extraLarge'] .icon + .item-icon {
-  left: 36px;
-}
-
-.icon > svg,
-.item-icon > svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--theme-icon-primary);
-}
-
-[data-size='small'] .with-icon.with-item-icon > .input {
-  padding-left: 54px;
-}
-
-[data-size='medium'] .with-icon.with-item-icon > .input {
-  padding-left: 56px;
-}
-
-[data-size='large'] .with-icon.with-item-icon > .input,
-[data-size='extraLarge'] .with-icon.with-item-icon > .input {
-  padding-left: 64px;
-}
-
-.popover-target {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 0;
-}
-
-.popover-content {
-  max-height: 250px;
-  overflow: auto scroll;
-}

package/src/components/common/Select/ui/SelectPopover/SelectPopover.tsx

@@ -1,49 +0,0 @@
-import { useContext } from 'react';
-
-import { FieldSize } from '@components/common/FieldShell';
-import { Menu } from '@components/navigation/Menu';
-import { Divider as MenuDivider } from '@components/navigation/Menu/models/Divider';
-import { Item as MenuItem } from '@components/navigation/Menu/models/Item';
-import { PopoverContext } from '@components/view/Popover/ui/PopoverProvider/constants/PopoverContext';
-import { PropsObject, UiProps } from '@models/UiProps';
-
-import { Divider } from '../../models/Divider';
-import { Item, MaybeItem } from '../../models/Item';
-
-interface Props {
-  items: (Item | Divider)[];
-  componentSize?: FieldSize;
-  selectedValue?: string;
-  changeSelectedItem: (item: MaybeItem) => void;
-}
-
-export function SelectPopover(props: UiProps<Props>) {
-  const { items, componentSize, selectedValue, changeSelectedItem, classes } = props;
-
-  const popoverContext = useContext(PopoverContext);
-
-  return (
-    <Menu
-      componentSize={componentSize}
-      classes={classes?.menu as PropsObject | undefined}
-      items={items.map((i) =>
-        i.type === 'divider'
-          ? ({ type: 'divider', name: i.name } as MenuDivider)
-          : ({
-              type: 'item',
-              name: i.name,
-              icon: i.icon,
-              description: i.description,
-              disabled: i.disabled,
-              selected: i.value === selectedValue,
-              onClick: () => {
-                changeSelectedItem(i);
-                if (popoverContext) {
-                  popoverContext.setOpen(false);
-                }
-              },
-            } as MenuItem),
-      )}
-    />
-  );
-}

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

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { WrapForLabel } from './WrapForLabel';
-
-const meta: Meta<typeof WrapForLabel> = {
-  title: 'Components/WrapForLabel',
-  component: WrapForLabel,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    componentSize: {
-      control: 'select',
-      options: ['medium', 'small'],
-      description: 'Размер компонента',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof WrapForLabel>;
-
-export const Default: Story = {
-  args: {
-    componentSize: 'medium',
-    children: <div style={{ padding: '8px', border: '1px solid #ccc' }}>Содержимое компонента</div>,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    componentSize: 'small',
-    children: <div style={{ padding: '8px', border: '1px solid #ccc' }}>Маленький размер</div>,
-  },
-};

package/src/components/common/WrapForLabel/WrapForLabel.tsx

@@ -1,28 +0,0 @@
-import classnames from 'classnames';
-import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
-
-import { ChipSize } from '@models/ChipSize';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './wrapForLabel.module.css';
-
-type Style = keyof typeof styles;
-
-interface Props {
-  componentSize?: ChipSize;
-}
-
-export const WrapForLabel = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<UiProps<Props>> & HTMLAttributes<HTMLDivElement>
->(function WrapForLabel({ componentSize = 'medium', children, classes, className, ...rest }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={classnames(styles.root, styles[componentSize as Style], className, classes?.root)}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-});

package/src/components/common/WrapForLabel/wrapForLabel.module.css

@@ -1,14 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-}
-
-.medium {
-  height: 40px;
-  margin-top: 24px;
-}
-
-.small {
-  height: 32px;
-  margin-top: 20px;
-}

package/src/components/layout/Layout/Layout.stories.tsx

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Layout } from './Layout';
-
-const meta: Meta<typeof Layout> = {
-  title: 'Layout/Layout',
-  component: Layout,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    withoutHeader: {
-      control: 'boolean',
-      description: 'Убрать отступ для хедера',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Layout>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <div style={{ padding: '20px', background: '#f0f0f0' }}>
-        <h1>Основной контент</h1>
-        <p>Это пример контента внутри Layout компонента</p>
-      </div>
-    ),
-  },
-};
-
-export const WithoutHeader: Story = {
-  args: {
-    withoutHeader: true,
-    children: (
-      <div style={{ padding: '20px', background: '#f0f0f0' }}>
-        <h1>Контент без отступа для хедера</h1>
-        <p>Этот пример показывает Layout без отступа для хедера</p>
-      </div>
-    ),
-  },
-};

package/src/components/layout/Layout/Layout.tsx

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

package/src/components/layout/Layout/layout.module.css

@@ -1,16 +0,0 @@
-.root {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-  height: 100%;
-  padding: 8px;
-  overflow: hidden;
-  color: var(--theme-text-primary);
-  background-color: var(--theme-surface-layout);
-}
-
-.with-header {
-  padding: 66px 8px 8px 8px;
-}

package/src/components/layout/Surface/Surface.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Surface } from './Surface';
-
-const meta: Meta<typeof Surface> = {
-  title: 'Layout/Surface',
-  component: Surface,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['primary', 'panel', 'modal', 'overlay1', 'overlay2'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Surface>;
-
-export const Primary: Story = {
-  args: {
-    type: 'primary',
-    children: 'Primary Surface Content',
-  },
-};
-
-export const Panel: Story = {
-  args: {
-    type: 'panel',
-    children: 'Panel Surface Content',
-  },
-};
-
-export const Modal: Story = {
-  args: {
-    type: 'modal',
-    children: 'Modal Surface Content',
-  },
-};
-
-export const Overlay1: Story = {
-  args: {
-    type: 'overlay1',
-    children: 'Overlay 1 Surface Content',
-  },
-};
-
-export const Overlay2: Story = {
-  args: {
-    type: 'overlay2',
-    children: 'Overlay 2 Surface Content',
-  },
-};

package/src/components/layout/Surface/Surface.tsx

@@ -1,33 +0,0 @@
-import classnames from 'classnames';
-import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
-
-import { SurfaceSize } from '@models/SurfaceSize';
-import { SurfaceType } from '@models/SurfaceType';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './surface.module.css';
-
-interface Props {
-  type?: SurfaceType;
-  componentSize?: SurfaceSize;
-}
-
-export const Surface = forwardRef<HTMLDivElement, PropsWithChildren<UiProps<Props>> & HTMLAttributes<HTMLDivElement>>(
-  function Surface({ type = 'primary', componentSize = 'medium', children, classes, className, ...rest }, ref) {
-    return (
-      <div
-        ref={ref}
-        className={classnames(
-          styles.root,
-          className,
-          classes?.root,
-          styles[type as keyof typeof styles],
-          styles[componentSize as keyof typeof styles],
-        )}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);

package/src/components/layout/Surface/surface.module.css

@@ -1,47 +0,0 @@
-.root {
-  border-radius: 4px;
-}
-
-.primary {
-  background-color: var(--theme-surface-primary);
-  box-shadow:
-    0px 2px 4px 0px rgba(0, 0, 0, 0.2),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14);
-}
-
-.panel {
-  background-color: var(--theme-surface-panel);
-  box-shadow:
-    0px 2px 4px 0px rgba(0, 0, 0, 0.2),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14);
-}
-
-.modal {
-  background-color: var(--theme-surface-modal);
-}
-
-.overlay1 {
-  background-color: var(--theme-surface-overlay-1);
-  box-shadow:
-    0px 2px 4px 0px rgba(0, 0, 0, 0.2),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14);
-}
-
-.overlay2 {
-  background-color: var(--theme-surface-overlay-2);
-  box-shadow:
-    0px 2px 4px 0px rgba(0, 0, 0, 0.2),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14);
-}
-
-.small {
-  padding: 0;
-}
-
-.medium {
-  padding: 8px;
-}