nntc-ui 0.0.1

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "nntc-ui",
+  "version": "0.0.1",
+  "description": "React UI-kit for NNTC",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./icons": {
+      "import": "./icons/index.js",
+      "types": "./icons/index.d.ts"
+    },
+    "./index.css": "./index.css",
+    "./styles/themes/dark.css": "./styles/themes/dark.css",
+    "./styles/themes/light.css": "./styles/themes/light.css",
+    "./styles/global.css": "./styles/global.css"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup && copyfiles package.json README.md dist && copyfiles -u 1 \"src/styles/**/*\" dist",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix"
+  },
+  "keywords": [
+    "react",
+    "ui-kit",
+    "components"
+  ],
+  "author": "NNTC",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@floating-ui/react": "^0.27.8",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.8",
+    "classnames": "^2.5.1",
+    "copyfiles": "^2.4.1",
+    "dayjs": "^1.11.13",
+    "i18next": "^23.10.0",
+    "react-colorful": "^5.6.1",
+    "react-i18next": "^14.0.5",
+    "react-merge-refs": "^3.0.2",
+    "uuid": "^11.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/compat": "^1.2.9",
+    "@eslint/eslintrc": "^3.0.0",
+    "@eslint/js": "^9.0.0",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^4.3.4",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-optimize-regex": "^1.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss-modules": "^6.0.1",
+    "prettier": "^3.2.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^8.0.0",
+    "tsup": "^7.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/styles/global.css

@@ -0,0 +1,148 @@
+:root {
+  --text-headline1-size: 96px;
+  --text-headline1-weight: 300;
+  --text-headline1-height: 112px;
+  --text-headline1-letter: -1.5px;
+
+  --text-headline2-size: 60px;
+  --text-headline2-weight: 300;
+  --text-headline2-height: 72px;
+  --text-headline2-letter: -0.5px;
+
+  --text-headline3-size: 48px;
+  --text-headline3-weight: 400;
+  --text-headline3-height: 56px;
+  --text-headline3-letter: normal;
+
+  --text-headline4-size: 34px;
+  --text-headline4-weight: 400;
+  --text-headline4-height: 36px;
+  --text-headline4-letter: normal;
+
+  --text-headline5-size: 24px;
+  --text-headline5-weight: 400;
+  --text-headline5-height: 24px;
+  --text-headline5-letter: 0.18px;
+
+  --text-headline6-size: 20px;
+  --text-headline6-weight: 500;
+  --text-headline6-height: 24px;
+  --text-headline6-letter: 0.15px;
+
+  --text-headline7-size: 20px;
+  --text-headline7-weight: 400;
+  --text-headline7-height: 24px;
+  --text-headline7-letter: 0.15px;
+
+  --text-subtitle1-size: 16px;
+  --text-subtitle1-weight: 400;
+  --text-subtitle1-height: 24px;
+  --text-subtitle1-letter: 0.15px;
+
+  --text-subtitle2-size: 14px;
+  --text-subtitle2-weight: 400;
+  --text-subtitle2-height: 24px;
+  --text-subtitle2-letter: 0.1px;
+
+  --text-body1-size: 16px;
+  --text-body1-weight: 400;
+  --text-body1-height: 24px;
+  --text-body1-letter: 0.5px;
+
+  --text-body2-size: 14px;
+  --text-body2-weight: 400;
+  --text-body2-height: 20px;
+  --text-body2-letter: 0.25px;
+
+  --text-button-size: 14px;
+  --text-button-weight: 500;
+  --text-button-height: 20px;
+  --text-button-letter: 0.1px;
+
+  --text-caption-size: 12px;
+  --text-caption-weight: 400;
+  --text-caption-height: 16px;
+  --text-caption-letter: 0.4px;
+
+  --text-overline-size: 10px;
+  --text-overline-weight: 500;
+  --text-overline-height: 16px;
+  --text-overline-letter: 1.5px;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  background-color: var(--theme-surface-layout);
+  color: var(--theme-text-primary);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+body {
+  font-family: Roboto, sans-serif;
+  font-size: var(--text-body2-size);
+  font-weight: var(--text-body2-weight);
+  line-height: var(--text-body2-height);
+  letter-spacing: var(--text-body2-letter);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input[type='password']::-ms-reveal {
+  display: none;
+  height: 100%;
+  opacity: 1;
+}
+
+:global(#react_root) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+:global(.styledScroll) {
+  margin-right: -16px !important;
+  margin-bottom: -16px !important;
+  overflow: scroll;
+}
+
+/* общая зона скроллбара */
+:global(.styledScroll)::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 12px;
+}
+
+/* зона перетаскивания */
+:global(.styledScroll)::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 12px;
+}
+
+/* уголок между горизонтальным и вертикальным скроллбарами */
+:global(.styledScroll)::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* зона трека */
+:global(.styledScroll)::-webkit-scrollbar-track {
+  background-color: transparent;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 12px;
+}

package/styles/themes/dark.css

@@ -0,0 +1,97 @@
+:root {
+  --theme-surface-layout: #373737;
+  --theme-surface-panel: #424242;
+  --theme-surface-background: #2b2b2b;
+  --theme-surface-modal: #373737;
+
+  --theme-legend-background: rgba(0, 0, 0, 0.12);
+
+  --theme-surface-dropdown: #515151;
+
+  --theme-modal-shadow-background: rgba(81, 81, 81, 0.5);
+  --theme-modal-background: #515151;
+  --theme-modal-translucent-background: #515151aa;
+
+  --theme-divider: rgba(255, 255, 255, 0.24);
+
+  --theme-text-primary: rgba(255, 255, 255, 0.87);
+  --theme-text-secondary: rgba(255, 255, 255, 0.64);
+  --theme-text-inactive: rgba(255, 255, 255, 0.32);
+  --theme-text-button-primary: #fcfcff;
+  --theme-text-button-invert: rgba(0, 0, 0, 0.72);
+
+  --theme-icon-primary: rgba(255, 255, 255, 0.64);
+  --theme-icon-secondary: rgba(255, 255, 255, 0.32);
+  --theme-icon-hover: rgba(255, 255, 255, 0.12);
+  --theme-icon-hover-on-selected: rgba(255, 255, 255, 0.24);
+
+  --theme-accent: #7bd3f6;
+
+  --theme-success: #4caf50;
+  --theme-warning: #ee7918;
+  --theme-error: #ef5350;
+  --theme-focus: #7bd3f6;
+
+  --theme-table-background: #424242;
+  --theme-table-header: #515151;
+  --theme-table-even-row: #494949;
+  --theme-table-hover-row: #494949;
+  --theme-table-selected-row: rgba(3, 169, 244, 0.08);
+  --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
+  --theme-table-error: rgba(211, 47, 47, 0.3);
+
+  --theme-tooltip-background: rgba(40, 40, 40, 0.9);
+
+  --theme-alert-default-color: rgba(255, 255, 255, 0.87);
+  --theme-alert-default-background: #6d6d6d;
+  --theme-alert-success-color: #1e4620;
+  --theme-alert-success-background: #edf7ed;
+  --theme-alert-warning-color: #663c00;
+  --theme-alert-warning-background: #fff4e5;
+  --theme-alert-error-color: #5f2120;
+  --theme-alert-error-background: #fdeded;
+  --theme-alert-info-color: #014361;
+  --theme-alert-info-background: #e5f6fd;
+
+  --theme-grey-300: #e0e0e0;
+  --theme-grey-400: #bdbdbd;
+  --theme-grey-500: #9e9e9e;
+  --theme-grey-600: #757575;
+  --theme-grey-700: #616161;
+
+  --theme-overlay-4: rgba(123, 211, 246, 0.04);
+  --theme-overlay-8: rgba(123, 211, 246, 0.08);
+  --theme-overlay-10: rgba(123, 211, 246, 0.1);
+  --theme-overlay-12: rgba(123, 211, 246, 0.12);
+
+  --theme-button-elevated: #424242;
+  --theme-button-tonal: #435864;
+
+  --theme-input-filled: rgba(255, 255, 255, 0.08);
+  --theme-input-filled-hover: rgba(255, 255, 255, 0.16);
+
+  --theme-input-border: rgba(255, 255, 255, 0.4);
+  --theme-input-border-hover: rgba(255, 255, 255, 0.8);
+
+  --theme-selection-border: rgba(255, 255, 255, 0.6);
+  --theme-selection-border-disabled: rgba(255, 255, 255, 0.38);
+  --theme-selection-hover: rgba(255, 255, 255, 0.04);
+  --theme-selection-focused: rgba(255, 255, 255, 0.12);
+  --theme-selection-pressed: rgba(255, 255, 255, 0.1);
+  --theme-selection-selected-hover: rgba(255, 255, 255, 0.04);
+  --theme-selection-selected-focused: rgba(255, 255, 255, 0.12);
+  --theme-selection-selected-pressed: rgba(255, 255, 255, 0.1);
+
+  --theme-date-range: rgba(255, 255, 255, 0.12);
+
+  --theme-thumb: rgba(255, 255, 255, 0.16);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--theme-text-inactive);
+}
+
+.styledScroll::-webkit-scrollbar-thumb {
+  background-color: var(--theme-thumb);
+}

package/styles/themes/light.css

@@ -0,0 +1,97 @@
+:root {
+  --theme-surface-layout: #f8f8f8;
+  --theme-surface-panel: #ffffff;
+  --theme-surface-background: #ffffff;
+  --theme-surface-modal: #ffffff;
+
+  --theme-legend-background: rgba(0, 0, 0, 0.12);
+
+  --theme-surface-dropdown: #ffffff;
+
+  --theme-modal-shadow-background: rgba(255, 255, 255, 0.5);
+  --theme-modal-background: #ffffff;
+  --theme-modal-translucent-background: #515151aa;
+
+  --theme-divider: rgba(0, 0, 0, 0.12);
+
+  --theme-text-primary: rgba(0, 0, 0, 0.87);
+  --theme-text-secondary: rgba(0, 0, 0, 0.64);
+  --theme-text-inactive: rgba(0, 0, 0, 0.32);
+  --theme-text-button-primary: rgba(0, 0, 0, 0.72);
+  --theme-text-button-invert: #ffffff;
+
+  --theme-icon-primary: rgba(0, 0, 0, 0.64);
+  --theme-icon-secondary: rgba(0, 0, 0, 0.32);
+  --theme-icon-hover: #eeeeee;
+  --theme-icon-hover-on-selected: #e0e0e0;
+
+  --theme-accent: #03a9f4;
+
+  --theme-success: #2e7d32;
+  --theme-warning: #ee7918;
+  --theme-error: #d32f2f;
+  --theme-focus: #03a9f4;
+
+  --theme-table-background: #ffffff;
+  --theme-table-header: #f5f5f5;
+  --theme-table-even-row: #f5f5f5;
+  --theme-table-hover-row: #f5f5f5;
+  --theme-table-selected-row: rgba(3, 169, 244, 0.08);
+  --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
+  --theme-table-error: rgba(211, 47, 47, 0.3);
+
+  --theme-tooltip-background: rgba(215, 215, 215, 0.9);
+
+  --theme-alert-default-color: rgba(0, 0, 0, 0.87);
+  --theme-alert-default-background: #ffffff;
+  --theme-alert-success-color: #1e4620;
+  --theme-alert-success-background: #edf7ed;
+  --theme-alert-warning-color: #663c00;
+  --theme-alert-warning-background: #fff4e5;
+  --theme-alert-error-color: #5f2120;
+  --theme-alert-error-background: ##fdeded;
+  --theme-alert-info-color: #014361;
+  --theme-alert-info-background: #e5f6fd;
+
+  --theme-grey-300: #e0e0e0;
+  --theme-grey-400: #bdbdbd;
+  --theme-grey-500: #9e9e9e;
+  --theme-grey-600: #757575;
+  --theme-grey-700: #616161;
+
+  --theme-overlay-4: rgba(255, 255, 255, 0.04);
+  --theme-overlay-8: rgba(255, 255, 255, 0.08);
+  --theme-overlay-10: rgba(255, 255, 255, 0.1);
+  --theme-overlay-12: rgba(255, 255, 255, 0.12);
+
+  --theme-button-elevated: rgba(3, 169, 244, 0.04);
+  --theme-button-tonal: rgba(3, 169, 244, 0.16);
+
+  --theme-input-filled: #f5f5f5;
+  --theme-input-filled-hover: #eeeeee;
+
+  --theme-input-border: rgba(0, 0, 0, 0.4);
+  --theme-input-border-hover: rgba(0, 0, 0, 0.8);
+
+  --theme-selection-border: rgba(0, 0, 0, 0.6);
+  --theme-selection-border-disabled: rgba(0, 0, 0, 0.32);
+  --theme-selection-hover: rgba(0, 0, 0, 0.04);
+  --theme-selection-focused: rgba(0, 0, 0, 0.12);
+  --theme-selection-pressed: rgba(0, 0, 0, 0.1);
+  --theme-selection-selected-hover: rgba(3, 169, 244, 0.04);
+  --theme-selection-selected-focused: rgba(3, 169, 244, 0.12);
+  --theme-selection-selected-pressed: rgba(3, 169, 244, 0.1);
+
+  --theme-date-range: rgba(3, 169, 244, 0.12);
+
+  --theme-thumb: rgba(0, 0, 0, 0.16);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--theme-text-inactive);
+}
+
+.styledScroll::-webkit-scrollbar-thumb {
+  background-color: var(--theme-thumb);
+}