snapflow-ui-kit 0.0.1

package/README.md

@@ -0,0 +1,45 @@
+# Snapflow UI Kit
+
+Библиотека React UI компонентов на TypeScript с Storybook документацией.
+
+> **Проект находится на начальной стадии разработки.** API и документация могут изменяться.
+
+## Разработка
+
+### Команды
+
+```bash
+pnpm dev              # Запуск Storybook (порт 6006)
+pnpm build            # Сборка библиотеки
+pnpm lint             # Проверка ESLint
+pnpm lint:fix         # Автоисправление ESLint
+pnpm lint:style       # Проверка Stylelint для CSS
+pnpm lint:style:fix   # Автоисправление Stylelint
+pnpm format           # Проверка Prettier
+pnpm format:fix       # Форматирование Prettier
+```
+
+### Структура компонентов
+
+```
+src/components/{ComponentName}/
+├── {ComponentName}.tsx         # Реализация компонента
+├── {ComponentName}.module.css  # CSS Module стили
+├── {ComponentName}.stories.tsx # Storybook истории
+└── index.ts                    # Экспорты
+```
+
+> **Важно:** После создания нового компонента добавьте его экспорт в `src/components/index.ts`.
+>
+> Это barrel-файл, через который все компоненты реэкспортируются наружу библиотеки.
+>
+> Без этого компонент не будет доступен пользователям.
+
+### Стек технологий
+
+- React 19
+- TypeScript
+- Vite
+- Storybook 10
+- CSS Modules
+- ESLint + Prettier + Stylelint

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text';
+type CommonProps = {
+    variant?: ButtonVariant;
+};
+type AsButtonProps = {
+    asLink?: false;
+} & CommonProps & ComponentPropsWithoutRef<'button'>;
+type AsLinkProps = {
+    asLink: true;
+} & CommonProps & ComponentPropsWithoutRef<'a'>;
+export type ButtonProps = AsButtonProps | AsLinkProps;
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Button/index.d.ts

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

package/dist/components/index.d.ts

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

package/dist/index.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--color-accent-100: #73a5ff;--color-accent-300: #4c8dff;--color-accent-500: #397df6;--color-accent-700: #2f68cc;--color-accent-900: #234e99;--color-success-100: #80ffbf;--color-success-300: #22e584;--color-success-500: #14cc70;--color-success-700: #0f9954;--color-success-900: #0a6638;--color-danger-100: #ff8099;--color-danger-300: #f23d61;--color-danger-500: #cc1439;--color-danger-700: #990f2b;--color-danger-900: #660a1d;--color-warning-100: #ffd073;--color-warning-300: #e5ac39;--color-warning-500: #d99000;--color-warning-700: #960;--color-warning-900: #640;--color-dark-100: #4c4c4c;--color-dark-300: #333;--color-dark-500: #171717;--color-dark-700: #0d0d0d;--color-dark-900: #000;--color-light-100: #fff;--color-light-300: #f7fbff;--color-light-500: #edf3fa;--color-light-700: #d5dae0;--color-light-900: #8d9094}html{box-sizing:border-box;font-size:100%}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;font-family:Inter,sans-serif}input,button,select,textarea,optgroup,option{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;color:inherit}._button_x75vv_1{all:unset;cursor:pointer;box-sizing:border-box;padding:6px 24px;border-radius:2px;font-weight:600;line-height:150%;text-align:center;transition-duration:.2s}._button_x75vv_1:disabled{cursor:not-allowed}._primary_x75vv_21{color:var(--color-light-100);background-color:var(--color-accent-500)}._primary_x75vv_21:active{color:var(--color-light-500);background-color:var(--color-accent-700)}._primary_x75vv_21:focus-visible{border:2px solid var(--color-accent-700)}._primary_x75vv_21:disabled{color:var(--color-light-900);background-color:var(--color-accent-900)}._primary_x75vv_21:hover:not(:active,:focus-visible){background-color:var(--color-accent-100)}._secondary_x75vv_44{color:var(--color-light-100);background-color:var(--color-dark-300)}._secondary_x75vv_44:active{color:var(--color-light-500);background-color:#212121}._secondary_x75vv_44:focus-visible{border:1px solid var(--color-accent-300)}._secondary_x75vv_44:disabled{color:var(--color-light-900);background-color:var(--color-dark-500)}._secondary_x75vv_44:hover:not(:active,:focus-visible){background-color:var(--color-dark-100)}._outlined_x75vv_67{border:1px solid var(--color-accent-500);color:var(--color-accent-500);background-color:transparent}._outlined_x75vv_67:active{border-color:var(--color-accent-700);color:var(--color-accent-700)}._outlined_x75vv_67:focus-visible{border:2px solid var(--color-accent-700);color:var(--color-accent-700)}._outlined_x75vv_67:disabled{border-color:var(--color-accent-900);color:var(--color-accent-900)}._outlined_x75vv_67:hover:not(:active,:focus-visible){border-color:var(--color-accent-100);color:var(--color-accent-100)}._text_x75vv_93{color:var(--color-accent-500)}._text_x75vv_93:active{color:var(--color-accent-700)}._text_x75vv_93:focus-visible{border:2px solid var(--color-accent-700)}._text_x75vv_93:disabled{color:var(--color-accent-900)}._text_x75vv_93:hover:not(:active,:focus-visible){color:var(--color-accent-100)}._icon_x75vv_113{color:#000;background-color:transparent}._link_x75vv_118{color:#00f;background-color:transparent}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import './styles/index.css';
+export * from './components';
+export { clsx } from 'clsx';

package/dist/index.js

@@ -0,0 +1,25 @@
+import { clsx as v } from "clsx";
+import { clsx as j } from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+const x = "_button_x75vv_1", l = "_primary_x75vv_21", m = "_secondary_x75vv_44", u = "_outlined_x75vv_67", p = "_text_x75vv_93", y = "_icon_x75vv_113", b = "_link_x75vv_118", s = {
+  button: x,
+  primary: l,
+  secondary: m,
+  outlined: u,
+  text: p,
+  icon: y,
+  link: b
+}, f = (r) => {
+  const { className: c, variant: _ = "primary", asLink: i, ...t } = r, o = v(s.button, s[_], c);
+  if (i) {
+    const { ...e } = t;
+    return /* @__PURE__ */ n("a", { className: o, ...e });
+  }
+  const { ...a } = t;
+  return /* @__PURE__ */ n("button", { className: o, ...a });
+};
+export {
+  f as Button,
+  j as clsx
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { clsx } from 'clsx'\n\nimport s from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text'\n\ntype CommonProps = {\n  variant?: ButtonVariant\n}\n\ntype AsButtonProps = {\n  asLink?: false\n} & CommonProps &\n  ComponentPropsWithoutRef<'button'>\n\ntype AsLinkProps = {\n  asLink: true\n} & CommonProps &\n  ComponentPropsWithoutRef<'a'>\n\nexport type ButtonProps = AsButtonProps | AsLinkProps\n\nexport const Button = (props: ButtonProps) => {\n  const { className, variant = 'primary', asLink, ...rest } = props\n  const classes = clsx(s.button, s[variant], className)\n\n  if (asLink) {\n    const { ...linkProps } = rest as AsLinkProps\n    return <a className={classes} {...linkProps} />\n  }\n\n  const { ...buttonProps } = rest as AsButtonProps\n  return <button className={classes} {...buttonProps} />\n}\n"],"names":["Button","props","className","variant","asLink","rest","classes","clsx","linkProps","jsx","buttonProps"],"mappings":";;;;;;;;;;;GAwBaA,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,QAAAC,GAAQ,GAAGC,MAASJ,GACtDK,IAAUC,EAAK,EAAE,QAAQ,EAAEJ,CAAO,GAAGD,CAAS;AAEpD,MAAIE,GAAQ;AACV,UAAM,EAAE,GAAGI,EAAA,IAAcH;AACzB,WAAO,gBAAAI,EAAC,KAAA,EAAE,WAAWH,GAAU,GAAGE,GAAW;AAAA,EAC/C;AAEA,QAAM,EAAE,GAAGE,EAAA,IAAgBL;AAC3B,SAAO,gBAAAI,EAAC,UAAA,EAAO,WAAWH,GAAU,GAAGI,GAAa;AACtD;"}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "snapflow-ui-kit",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "scripts": {
+    "start": "vite",
+    "dev": "storybook dev -p 6006",
+    "build": "vite build && tsc",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --report-unused-disable-directives --max-warnings 0 --fix",
+    "lint:style": "stylelint \"src/**/*.css\"",
+    "lint:style:fix": "stylelint \"src/**/*.css\" --fix",
+    "format": "prettier -c .",
+    "format:fix": "prettier -w .",
+    "preview": "vite preview",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/react-vite": "10.2.0",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "8.53.1",
+    "@typescript-eslint/parser": "8.53.1",
+    "eslint": "9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-storybook": "10.2.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "3.8.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "storybook": "10.2.0",
+    "stylelint": "^17.0.0",
+    "stylelint-config-clean-order": "8.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-order": "^7.0.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --report-unused-disable-directives --max-warnings 0"
+    ],
+    "*.css": [
+      "stylelint"
+    ],
+    "*": [
+      "prettier --check --ignore-unknown"
+    ]
+  }
+}