stp-ui-kit 0.0.1

package/package.json

@@ -0,0 +1,87 @@
+{
+  "main": "dist/stp-ui-kit.cjs.js",
+  "module": "dist/stp-ui-kit.es.js",
+  "types": "dist/types/index.d.ts",
+  "style": "dist/styles/index.css",
+  "files": [
+    "dist",
+    "src/styles/_variables.scss"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "name": "stp-ui-kit",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint --ext .ts,.tsx ./src",
+    "preview": "vite preview",
+    "format": "yarn prettier ./src/**/*.{ts,tsx} --write",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "interface:locales": "yarn run interface:locales:ru && yarn run interface:locales:kz && yarn run interface:locales:uz && yarn run interface:locales:en",
+    "interface:locales:kz": "i18next-resources-for-ts interface -i ./src/shared/i18n/locales/kz -o ./src/shared/@types/resources.d.ts",
+    "interface:locales:ru": "i18next-resources-for-ts interface -i ./src/shared/i18n/locales/ru -o ./src/shared/@types/resources.d.ts",
+    "interface:locales:uz": "i18next-resources-for-ts interface -i ./src/shared/i18n/locales/uz -o ./src/shared/@types/resources.d.ts",
+    "interface:locales:en": "i18next-resources-for-ts interface -i ./src/shared/i18n/locales/en -o ./src/shared/@types/resources.d.ts",
+    "generate-tokens": "tsx scripts/generate-tokens.ts"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.7",
+    "classnames": "^2.5.1",
+    "i18next": "^24.2.2",
+    "immer": "^10.1.1",
+    "lucide-react": "^0.511.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^7.6.0",
+    "tailwindcss": "^4.0.7",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.3.0",
+    "@feature-sliced/eslint-config": "^0.1.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-i18next": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "dayjs": "^1.11.11",
+    "eslint": "8.x",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-boundaries": "^4.2.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^15.3.0",
+    "i18next-resources-for-ts": "^1.5.0",
+    "prettier": "^3.2.5",
+    "react-i18next": "^14.1.2",
+    "sass": "^1.89.0",
+    "storybook": "^8.6.14",
+    "tsx": "^4.19.4",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^7.10.0",
+    "vite": "^5.2.0"
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,431 @@
+// New STP Design System
+
+// Breakpoints
+$lg: 1200px;
+$md: 1000px;
+$sm: 700px;
+$mobile: 480px;
+
+// Spacing
+$spacing: 4px;
+$space-0: 0 * $spacing;
+$space-025: 0.25 * $spacing;
+$space-050: 0.5 * $spacing;
+$space-100: 1 * $spacing;
+$space-150: 1.5 * $spacing;
+$space-200: 2 * $spacing;
+$space-300: 3 * $spacing;
+$space-350: 3.5 * $spacing;
+$space-400: 4 * $spacing;
+$space-500: 5 * $spacing;
+$space-550: 5.5 * $spacing;
+$space-600: 6 * $spacing;
+$space-750: 7.5 * $spacing;
+$space-800: 8 * $spacing;
+$space-1000: 10 * $spacing;
+$space-1100: 11 * $spacing;
+$space-1200: 12 * $spacing;
+$space-1300: 13 * $spacing;
+$space-1600: 16 * $spacing;
+$space-2000: 20 * $spacing;
+$space-2400: 24 * $spacing;
+$space-3200: 32 * $spacing;
+
+// Shadow
+$shadow-0: "0 0 0 0 #00000000";
+$shadow-100: "0 1px 0 0 #1A1A1A12";
+$shadow-200: "0 3px 1px -1px #1A1A1A12";
+$shadow-300: "0 4px 6px -2px #1A1A1A33";
+$shadow-400: "0 8px 16 -4px #1A1A1A38";
+$shadow-500: "0 12px 20px -8px #1A1A1A3D";
+$shadow-600: "0 20px 20px -8px #1A1A1A47";
+
+.shadow-0 {
+  box-shadow: $shadow-0;
+}
+.shadow-100 {
+  box-shadow: $shadow-100;
+}
+.shadow-200 {
+  box-shadow: $shadow-200;
+}
+.shadow-300 {
+  box-shadow: $shadow-300;
+}
+.shadow-400 {
+  box-shadow: $shadow-400;
+}
+.shadow-500 {
+  box-shadow: $shadow-500;
+}
+.shadow-600 {
+  box-shadow: $shadow-600;
+}
+
+// Border
+
+$border-radius-0: 0 * $spacing;
+$border-radius-200: 2 * $spacing;
+$border-radius-full: 50%;
+
+$border-width-025: 0.25 * $spacing;
+
+// Typography
+
+$font-family-sans: "Inter";
+
+$font-weight-regular: 450;
+$font-weight-medium: 550;
+$font-weight-semibold: 650;
+$font-weight-bold: 700;
+
+$font-letter-spacing-denser: -0.3px;
+$font-letter-spacing-dense: -0.2px;
+$font-letter-spacing-normal: 0px;
+
+$font-size-300: 12px;
+$font-size-350: 14px;
+$font-size-400: 16px;
+$font-size-500: 20px;
+$font-size-600: 24px;
+$font-size-750: 30px;
+
+$font-line-height-400: 16px;
+$font-line-height-500: 20px;
+$font-line-height-600: 24px;
+$font-line-height-800: 32px;
+$font-line-height-1000: 40px;
+
+//Colors
+$color-neutral-00: #ffffff;
+$color-neutral-50: #f8f9fa;
+$color-neutral-100: #f1f3f6;
+$color-neutral-150: #ebeef2;
+$color-neutral-200: #e4e8ed;
+$color-neutral-250: #dee1e7;
+$color-neutral-300: #d2d5dc;
+$color-neutral-350: #c5c8d0;
+$color-neutral-400: #b9bcc5;
+$color-neutral-450: #acafb8;
+$color-neutral-500: #9fa2ab;
+$color-neutral-550: #92959e;
+$color-neutral-600: #868892;
+$color-neutral-650: #797b85;
+$color-neutral-700: #6c6e78;
+$color-neutral-750: #5f616b;
+$color-neutral-800: #52545d;
+$color-neutral-850: #444750;
+$color-neutral-900: #373a42;
+$color-neutral-950: #020817;
+
+$color-red-50: #fef2f2;
+$color-red-100: #fee2e2;
+$color-red-200: #fecaca;
+$color-red-300: #fca5a5;
+$color-red-400: #f87171;
+$color-red-500: #ef4444;
+$color-red-600: #dc2626;
+$color-red-700: #b91c1c;
+$color-red-800: #991b1b;
+$color-red-900: #7f1d1d;
+$color-red-950: #450a0a;
+
+$color-amber-50: #fffbeb;
+$color-amber-100: #fef3c7;
+$color-amber-200: #fde68a;
+$color-amber-300: #fcd34d;
+$color-amber-400: #fbbf24;
+$color-amber-500: #f59e0b;
+$color-amber-600: #d97706;
+$color-amber-700: #b45309;
+$color-amber-800: #92400e;
+$color-amber-900: #78350f;
+$color-amber-950: #451a03;
+
+$color-green-50: #f0fdf4;
+$color-green-100: #dcfce7;
+$color-green-200: #bbf7d0;
+$color-green-300: #86efac;
+$color-green-400: #4ade80;
+$color-green-500: #22c55e;
+$color-green-600: #16a34a;
+$color-green-700: #15803d;
+$color-green-800: #166534;
+$color-green-900: #14532d;
+$color-green-950: #052e16;
+
+$color-blue-50: #eff6ff;
+$color-blue-100: #dbeafe;
+$color-blue-200: #bfdbfe;
+$color-blue-300: #93c5fd;
+$color-blue-400: #60a5fa;
+$color-blue-500: #3b82f6;
+$color-blue-600: #2563eb;
+$color-blue-700: #1d4ed8;
+$color-blue-800: #1e40af;
+$color-blue-900: #1e3a8a;
+$color-blue-950: #172554;
+
+$color-violet-50: #f5f3ff;
+$color-violet-100: #ede9fe;
+$color-violet-200: #ddd6fe;
+$color-violet-300: #c4b5fd;
+$color-violet-400: #a78bfa;
+$color-violet-500: #8b5cf6;
+$color-violet-600: #8b5cf6;
+$color-violet-700: #8b5cf6;
+$color-violet-800: #5b21b6;
+$color-violet-900: #4c1d95;
+$color-violet-950: #2e1065;
+
+$color-teal-50: #f0fdfa;
+$color-teal-100: #ccfbf1;
+$color-teal-200: #99f6e4;
+$color-teal-300: #5eead4;
+$color-teal-400: #2dd4bf;
+$color-teal-500: #14b8a6;
+$color-teal-600: #0d9488;
+$color-teal-700: #0f766e;
+$color-teal-800: #115e59;
+$color-teal-900: #115e59;
+$color-teal-950: #042f2e;
+
+$color-fuchsia-50: #fdf4ff;
+$color-fuchsia-100: #fae8ff;
+$color-fuchsia-200: #f5d0fe;
+$color-fuchsia-300: #f0abfc;
+$color-fuchsia-400: #e879f9;
+$color-fuchsia-500: #d946ef;
+$color-fuchsia-600: #c026d3;
+$color-fuchsia-700: #c026d3;
+$color-fuchsia-800: #86198f;
+$color-fuchsia-900: #701a75;
+$color-fuchsia-950: #4a044e;
+
+//Primary tokens
+
+$text: $color-neutral-900;
+$text-secondary: $color-neutral-700;
+$text-disabled: $color-neutral-600;
+$text-on-fill-brand: $color-neutral-00;
+$text-critical: $color-red-800;
+$text-emphasis: $color-blue-800;
+$text-emphasis-hover: $color-blue-900;
+$text-emphasis-on-press: $color-blue-950;
+$text-emphasis-selected: $color-blue-950;
+
+$link: $color-blue-800;
+$link-hover: $color-blue-900;
+$link-on-press: $color-blue-950;
+
+$bg: $color-neutral-50;
+$bg-inverse: $color-neutral-950;
+
+$surface: $color-neutral-00;
+$surface-hover: $color-neutral-100;
+$surface-on-press: $color-neutral-200;
+$surface-selected: $color-neutral-200;
+$surface-secondary: $color-neutral-100;
+$surface-secondary-hover: $color-neutral-200;
+$surface-secondary-on-press: $color-neutral-200;
+$surface-secondary-selected: $color-neutral-300;
+
+$fill: $color-neutral-00;
+$fill-hover: $color-neutral-200;
+$fill-on-press: $color-neutral-300;
+$fill-selected: $color-neutral-300;
+$fill-disabled: $color-neutral-250;
+$fill-brand: $color-blue-600;
+$fill-brand-hover: $color-blue-700;
+$fill-brand-on-press: $color-blue-800;
+$fill-brand-selected: $color-blue-900;
+$fill-brand-disabled: $color-neutral-400;
+$fill-critical: $color-red-50;
+
+$border: $color-neutral-250;
+$border-active: $color-neutral-700;
+$border-disabled: $color-neutral-250;
+$border-critical: $color-red-700;
+$border-input: $color-neutral-400;
+$border-input-active: $color-neutral-700;
+$border-input-disabled: $color-neutral-250;
+
+$surface: $color-neutral-00;
+$surface-hover: $color-neutral-100;
+$surface-on-press: $color-neutral-200;
+$surface-selected: $color-neutral-200;
+$surface-secondary: $color-neutral-100;
+$surface-secondary-hover: $color-neutral-200;
+$surface-secondary-on-press: $color-neutral-200;
+$surface-secondary-selected: $color-neutral-300;
+
+$fill: $color-neutral-00;
+$fill-hover: $color-neutral-200;
+$fill-on-press: $color-neutral-300;
+$fill-selected: $color-neutral-300;
+$fill-disabled: $color-neutral-250;
+$fill-brand: $color-blue-600;
+$fill-brand-hover: $color-blue-700;
+$fill-brand-on-press: $color-blue-800;
+$fill-brand-selected: $color-blue-900;
+$fill-brand-disabled: $color-neutral-400;
+$fill-critical: $color-red-50;
+
+$icon: $color-neutral-800;
+$icon-secondary: $color-neutral-600;
+$icon-disabled: $color-neutral-450;
+$icon-on-bg-fill-brand: $color-blue-100;
+$icon-critical: $color-red-800;
+$icon-emphasis: $color-blue-800;
+$icon-emphasis-hover: $color-blue-900;
+$icon-emphasis-on-press: $color-blue-950;
+$icon-emphasis-selected: $color-blue-950;
+
+$input-bg-surface: $color-neutral-00;
+$input-bg-surface-hover: $color-neutral-100;
+$input-bg-surface-active: $color-neutral-00;
+$input-bg-surface-disabled: $color-neutral-250;
+
+$nav-bg: $color-neutral-150;
+$nav-bg-surface: $color-neutral-150;
+$nav-bg-surface-hover: $color-neutral-50;
+$nav-bg-surface-on-press: $color-neutral-00;
+$nav-bg-surface-selected: $color-neutral-00;
+$nav-bg-surface-selected-no-hover: $color-neutral-200;
+
+$backdrop: #00000030;
+
+$button-group-gap: $space-200;
+$card-padding: $space-400;
+$card-padding-mobile: $space-300;
+$card-gap: $space-500;
+$card-gap-mobile: $space-400;
+$icon-text-gap: $space-200;
+
+// Old STP Design System(do not use)
+$white: #ffffff;
+$white_background: #fefefe;
+$white_blue: #f3f7ff;
+$white_silver: #f4f4f4;
+$black: #000000;
+$blue_text: #2a2f48;
+$blue_gray: #6e738a;
+$blue_silver: #4d4d4d;
+$blue_navy: #4ba5ec;
+$black_transparent: rgba(0, 0, 0, 0.08);
+$light_gray: #d8d7d7;
+$light: #eeeeee;
+$light_filter: rgba(255, 255, 255, 0.9);
+$shadow: rgba(0, 0, 0, 0.23);
+$harmonies: #b6d7ff;
+$blue_royal: #8dacfc;
+$alice_blue: #ecf5ff;
+$black_medium: #4a4c54;
+$black_gray: #666668;
+$white_dark: #f0f4ff;
+$blue_very_light: #e1e3f1;
+$white_smoke: #f3f2f2;
+$black_ghost: rgba(75, 75, 75, 0.9);
+$modal_background: rgba(19, 20, 23, 0.5);
+$red: #ee3153;
+$yellow: #ffc100;
+$light-yellow: #fff8e7;
+$darker-light-yellow: #f5e6c7;
+$green: #00d742;
+$green_gray: #18bc46;
+$blue_dark: #233240;
+$blue_dark_hover: #0153b4;
+$blue_tabs_hover: #d8ecfb;
+$secondary_dark: #51606f;
+$text_dark: #06253c;
+$blue_secondary: #5ab2f9;
+$blue-background: #e8f2ff;
+$blue-border: #b9c8da;
+$blue-icon: #4ba5ec;
+$blue-icon-light: #61d9ff;
+$gray-info: #8392a3;
+$gray-language-tab: #d5e4f7;
+$blue-dark-tab: #3a4857;
+$black_light: #06253c;
+$input_focus: #4ba5ec;
+$blue_secondary_placholder: #9eadbe;
+$gray_placeholder: #51606f;
+$profile_complete_card_background: #fcfcfc;
+$gray_light: #f5f5f5;
+$white_blue: #ebf6ff;
+$light-green: #ecfdf3;
+$dark-green: #12b76a;
+$light-blue: #eff8ff;
+$light-gray: #a0aec0;
+$red_danger: #eb5757;
+$red_danger_bg: #fffbfa;
+$light-red: #fff1f3;
+$dark-red: #c01048;
+$light-purple: #eef4ff;
+$dark-purple: #3538cd;
+$grey-bg: #fafafa;
+$grey-text: #718096;
+$grey-border: #e2e8f0;
+$blue_heading: #08314c;
+$midnight-blue: #003e64;
+$dark_card_blue: #d1e5fd;
+$grey_text_lms: #828282;
+$grey_bg_lms: #f0f0f0;
+$grey_bg_lms_icon: #f7fafc;
+$grey_lms_header: #ececec;
+$green_correct: #6fcf97;
+$green_bg: #f8fdfa;
+$blue-box: #008fff;
+$purple-box: #ae2db1;
+$blue-box-filler: #cee5ff;
+$grey_pdf: #f2f2f0;
+$pink: #cebdff;
+$grey_voice: #e1e1e1;
+$gray_border: #eaecf0;
+$dark_gray: #475467;
+$btn_gray: #ced4da;
+$blue_bg: #e9f4fd;
+$gray_progress: #e0e0de;
+$gray_button: #ced4da;
+$gray_bg_mobile: #f9fafb;
+$gray_divider: #d0d5dd;
+$blue_light: #c6e1f6;
+$gray_tabs: #667085;
+$gray_card: #f3f5f6;
+$dark_text: #344054;
+$mobile_bg: #f0f0f0;
+$gray_tabs_bg: #dde1e5;
+$gray_tabs_text: #667a8b;
+$gray_border_two: #f1f1f1;
+$red: #df5440;
+$red_line: #e83354;
+$pearl-green: #d8fe67;
+$blue_linear: #173c83;
+$blue_gradient: #0d2532;
+$yellow_light: #ffcb66;
+$gray_proftest: #eef0f2;
+$gray_bars: #e4e7ec;
+$yellow_border: #ffb552;
+$yellow_background: #f8e8c0;
+$gray_not_activated: #dadbdf;
+$black_almost: #0e1d2a;
+$gray_proftest: #eef0f2;
+$gray_bars: #e4e7ec;
+$gray_price: #f3f4f6;
+$gray_admin: #e9edf7;
+$gray_admin_text: #718096;
+$gray_admin_light: #f8fafd;
+$gray_black_notif_text: #1a202c;
+$black_notif_text: #151c22;
+$gray_notif_date: #737373;
+$gray_feedback_question: #8897a5;
+$kaspi_red: #f14634;
+$halloween: #ef8014;
+$blue_support: #007aff;
+$blue_new: #135ba3;
+$blue_bg_dark: #d0e4f7;
+$blue_bg_light: #e8f4ff;
+$gray_new: #f0f0f0;
+$blue_new_gradient: linear-gradient(94.4deg, #173c83 0%, #0d2532 100%);
+$orange_gradient: linear-gradient(105.28deg, #ffcb0f 0%, #ff8a0d 100%);
+$yellow_gradient: linear-gradient(105.28deg, #ffcb0f 0%, #ff9c32 100%);