nntc-ui 0.2.4 → 0.2.6

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

@@ -0,0 +1,87 @@
+.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

@@ -0,0 +1,49 @@
+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/{components/common/Select/ui/SelectPopover/index.d.ts → src/components/common/Select/ui/SelectPopover/index.ts}

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

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,28 @@
+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/{components/common/WrapForLabel/index.d.ts → src/components/common/WrapForLabel/index.ts}

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

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

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,24 @@
+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/{components/layout/Layout/index.d.ts → src/components/layout/Layout/index.ts}

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

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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,33 @@
+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/{components/layout/Surface/index.d.ts → src/components/layout/Surface/index.ts}

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

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

@@ -0,0 +1,47 @@
+.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;
+}