nntc-ui 0.2.6 → 0.2.7

package/eslint.config.mjs

@@ -1,160 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { fixupPluginRules } from '@eslint/compat';
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-import _import from 'eslint-plugin-import';
-import jsxA11Y from 'eslint-plugin-jsx-a11y';
-import optimizeRegex from 'eslint-plugin-optimize-regex';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-
-const filename = fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
-const compat = new FlatCompat({
-  baseDirectory: dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
-export default [
-  {
-    ignores: [
-      'node_modules/**/*',
-      '.idea/**/*',
-      '.vscode/**/*',
-      'dist/**/*',
-      '.storybook/**/*',
-      '*.config.mjs',
-      '*.config.js',
-      '*.config.cjs',
-      '*.config.ts',
-    ],
-  },
-  ...compat.extends(
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'plugin:jsx-a11y/recommended',
-    'plugin:optimize-regex/recommended',
-  ),
-  {
-    plugins: {
-      '@typescript-eslint': typescriptEslint,
-      import: fixupPluginRules(_import),
-      'jsx-a11y': jsxA11Y,
-      react: fixupPluginRules(react),
-      'react-hooks': fixupPluginRules(reactHooks),
-      'optimize-regex': optimizeRegex,
-    },
-
-    languageOptions: {
-      parser: tsParser,
-      ecmaVersion: 2020,
-      sourceType: 'module',
-
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-
-        project: './tsconfig.json',
-        tsconfigRootDir: dirname,
-      },
-    },
-
-    settings: {
-      react: {
-        version: 'detect',
-      },
-      'import/resolver': {
-        typescript: {
-          project: './tsconfig.json',
-        },
-      },
-    },
-
-    rules: {
-      'linebreak-style': ['error', 'unix'],
-
-      'max-len': [
-        'error',
-        {
-          code: 120,
-          ignoreTrailingComments: true,
-          ignoreUrls: true,
-        },
-      ],
-
-      'react/jsx-props-no-spreading': [
-        'error',
-        {
-          html: 'ignore',
-          custom: 'ignore',
-          exceptions: [''],
-        },
-      ],
-
-      'comma-dangle': [
-        'error',
-        {
-          arrays: 'always-multiline',
-          objects: 'always-multiline',
-          imports: 'always-multiline',
-          exports: 'always-multiline',
-          functions: 'always-multiline',
-        },
-      ],
-
-      'prefer-destructuring': [
-        'error',
-        {
-          object: true,
-          array: false,
-        },
-      ],
-
-      'no-plusplus': [
-        'warn',
-        {
-          allowForLoopAfterthoughts: true,
-        },
-      ],
-
-      '@typescript-eslint/no-unused-vars': 'warn',
-      '@typescript-eslint/no-unused-expressions': 'warn',
-      'jsx-a11y/anchor-is-valid': 'warn',
-      'jsx-a11y/no-autofocus': 'off',
-      'jsx-a11y/click-events-have-key-events': 'off',
-      'jsx-a11y/no-noninteractive-element-interactions': 'off',
-      'jsx-a11y/no-static-element-interactions': 'off',
-      'no-unused-vars': 'off',
-      'no-unused-expressions': 'off',
-
-      'sort-imports': [
-        'error',
-        {
-          ignoreCase: false,
-          ignoreDeclarationSort: true,
-          ignoreMemberSort: false,
-          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-          allowSeparatedGroups: true,
-        },
-      ],
-
-      'import/order': [
-        'error',
-        {
-          groups: ['builtin', 'external', 'internal', ['sibling', 'parent'], 'index', 'unknown'],
-          'newlines-between': 'always',
-          alphabetize: {
-            order: 'asc',
-            caseInsensitive: true,
-          },
-        },
-      ],
-    },
-  },
-];

package/nginx.conf

@@ -1,14 +0,0 @@
-server {
-    listen 80;
-    server_name localhost;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Включаем gzip сжатие
-    gzip on;
-    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-} 

package/package.dist.json

@@ -1,20 +0,0 @@
-{
-  "author": "NNTC",
-  "description": "React UI-kit for NNTC",
-  "keywords": ["react", "components", "nntc"],
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.mjs",
-      "require": "./index.js",
-      "default": "./index.js"
-    },
-    "./index.css": "./index.css"
-  },
-  "sideEffects": ["*.css"],
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  }
-}

package/postcss.config.cjs

@@ -1,12 +0,0 @@
-if (process.env.npm_lifecycle_event == 'build') {
-  module.exports = {
-    plugins: [
-      require('postcss-modules')({
-        localsConvention: 'camelCaseOnly',
-        generateScopedName: (name) => {
-          return name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-        },
-      }),
-    ],
-  };
-}

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

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

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

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

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