rxn-ui 0.4.0

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/cli/index.mjs

@@ -0,0 +1,119 @@
+#!/usr/bin/env node // Указывает системе запускать файл через Node.js (CLI-скрипт)
+
+import fs from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url) // Получаем абсолютный путь к текущему файлу (аналог __filename)
+const __dirname = path.dirname(__filename) // Получаем директорию текущего файла (аналог __dirname)
+
+const COMPONENTS_DIR = path.join(__dirname, '..', 'src', 'components') // Путь к компонентам внутри пакета
+const STYLES_DIR = path.join(__dirname, '..', 'src', 'styles') // Путь к стилям внутри пакета
+const REGISTRY_JSON = path.join(__dirname, 'registry.json') // Путь к файлу registry.json
+
+const cwd = process.cwd() // Текущая директория, где пользователь запустил CLI
+
+function readRegistry() {
+  if (!fs.existsSync(REGISTRY_JSON)) {
+    // Проверяем, существует ли registry.json
+    console.error('Registry not found')
+    process.exit(1)
+  }
+  return JSON.parse(fs.readFileSync(REGISTRY_JSON, 'utf8'))
+}
+
+function detectProject() {
+  // Функция для автоопределения структуры проекта
+  const hasSrc = fs.existsSync(path.join(cwd, 'src')) // Проверяем, есть ли папка src
+  return {
+    components: hasSrc ? 'src/components/ui' : 'components/ui',
+    styles: hasSrc ? 'src/styles' : 'styles',
+  }
+}
+
+function copyDir(src, dest) {
+  // Рекурсивная функция копирования папки
+  fs.mkdirSync(dest, { recursive: true }) // Создаём папку назначения (если её нет)
+  for (const file of fs.readdirSync(src)) {
+    // Перебираем все файлы и папки в исходной директории
+    const s = path.join(src, file) // Формируем полный путь к исходному файлу
+    const d = path.join(dest, file) // Формируем полный путь к файлу назначения
+    if (fs.statSync(s).isDirectory()) {
+      // Если это папка
+      copyDir(s, d) // Рекурсивно копируем её содержимое
+    } else {
+      // Если это файл
+      if (!fs.existsSync(d)) {
+        // Проверяем, не существует ли файл уже
+        fs.copyFileSync(s, d) // Копируем файл
+        console.log('add', path.relative(cwd, d)) // Выводим относительный путь добавленного файла
+      }
+    }
+  }
+}
+
+function init() {
+  const configPath = path.join(cwd, 'rxn-ui.json') // Путь к конфигурационному файлу
+  if (fs.existsSync(configPath)) {
+    console.log('✔ already initialized')
+    return
+  }
+
+  const config = detectProject()
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2)) // Сохраняем конфиг в файл
+
+  if (fs.existsSync(STYLES_DIR)) {
+    copyDir(STYLES_DIR, path.join(cwd, config.styles)) // Копируем стили в проект пользователя
+  }
+
+  console.log('✔ rxn-ui initialized')
+}
+
+function add(name) {
+  const registry = readRegistry() // Читаем registry.json
+  const entry = registry[name] // Получаем запись компонента по имени
+
+  if (!entry) {
+    // Если компонент не найден
+    console.error('Component not found:', name)
+    process.exit(1)
+  }
+
+  const configPath = path.join(cwd, 'rxn-ui.json') // Путь к конфигу
+  if (!fs.existsSync(configPath)) {
+    console.log('Initializing...\n') // Сообщаем, что запускается инициализация
+    init() // Выполняем init автоматически
+  }
+
+  const config = JSON.parse(fs.readFileSync(configPath, 'utf8')) // Загружаем конфигурацию
+
+  const src = path.join(COMPONENTS_DIR, name) // Путь к компоненту в пакете
+  const dest = path.join(cwd, config.components, name) // Путь установки компонента в проекте
+
+  fs.mkdirSync(dest, { recursive: true })
+  for (const file of entry.files) {
+    const s = path.join(src, file)
+    const d = path.join(dest, file)
+    if (fs.existsSync(s)) {
+      fs.copyFileSync(s, d)
+      console.log('add', path.relative(cwd, d))
+    }
+  }
+
+  console.log(`\n✔ ${name} added`)
+}
+
+const [cmd, arg] = process.argv.slice(2) // Получаем аргументы командной строки
+
+if (cmd === 'init') init()
+else if (cmd === 'add') add(arg)
+else {
+  console.log(` 
+rxn-ui
+
+Usage:
+  npx rxn-ui init
+  npx rxn-ui add button
+`)
+}

package/cli/registry.json

@@ -0,0 +1,57 @@
+{
+  "button-base": {
+    "files": [
+      "ButtonBase.vue",
+      "types.ts"
+    ]
+  },
+  "card-base": {
+    "files": [
+      "CardBase.vue",
+      "CardContent.vue",
+      "CardDescription.vue",
+      "CardFooter.vue",
+      "CardHeader.vue",
+      "CardTitle.vue"
+    ]
+  },
+  "checkbox-base": {
+    "files": [
+      "CheckboxBase.vue"
+    ]
+  },
+  "input-base": {
+    "files": [
+      "InputBase.vue",
+      "types.ts"
+    ]
+  },
+  "range-base": {
+    "files": [
+      "RangeBase.vue",
+      "RangeOutput.vue",
+      "types.ts"
+    ]
+  },
+  "switch-base": {
+    "files": [
+      "SwitchBase.vue"
+    ]
+  },
+  "tabs": {
+    "files": [
+      "context.ts",
+      "TabsBase.vue",
+      "TabsIndicator.vue",
+      "TabsList.vue",
+      "TabsPanel.vue",
+      "TabsTab.vue",
+      "types.ts"
+    ]
+  },
+  "theme-toggle": {
+    "files": [
+      "ThemeToggle.vue"
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "rxn-ui",
+  "description": "Vue 3 UI component library",
+  "version": "0.4.0",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "author": "Artur Hareksian <artharexian@gmail.com> (https://github.com/r2-h)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/r2-h/artharexian-ui.git"
+  },
+  "bin": {
+    "rxn-ui": "./cli/index.mjs"
+  },
+  "files": [
+    "cli",
+    "src/components",
+    "src/styles"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-vitest": "^10.2.10",
+    "@storybook/vue3-vite": "^10.2.10",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^10.0.0",
+    "eslint-plugin-storybook": "^10.2.10",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
+    "storybook": "^10.2.10",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/components/button-base/ButtonBase.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { ButtonProps } from './types'
+
+const { variant = 'default', shape = 'radius-default', is = 'button' } = defineProps<ButtonProps>()
+</script>
+
+<template>
+  <component :is :class="['btn', shape, variant]" :aria-busy="isPending">
+    <slot>button</slot>
+  </component>
+</template>
+
+<style scoped>
+.btn {
+  display: inline-flex;
+  text-wrap: nowrap;
+  font-weight: 500;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 0.3rem solid var(--color-border);
+  background: var(--background);
+  box-shadow: var(--shadow-raised);
+  transition:
+    scale 0.2s ease-in-out,
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.1s ease-in-out,
+    border-color 0.1s ease-in-out;
+
+  &:active {
+    box-shadow: var(--shadow-inset);
+    scale: 97%;
+  }
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.2rem;
+  }
+  &:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+}
+
+.radius-default {
+  border-radius: var(--radius-xl);
+  padding-inline: 1.6rem;
+  aspect-ratio: 1;
+  height: 4.8rem;
+}
+.radius-circle {
+  border-radius: 5rem;
+  padding: 1rem;
+  min-width: 5rem;
+  aspect-ratio: 1;
+}
+
+.primary {
+  color: var(--primary);
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--primary), transparent 97%),
+    color-mix(in oklch, var(--primary), transparent 78%)
+  );
+}
+
+.default {
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--muted), transparent 97%),
+    color-mix(in oklch, var(--muted), transparent 5%)
+  );
+}
+
+.danger {
+  color: var(--color-danger);
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--color-danger), transparent 97%),
+    color-mix(in oklch, var(--color-danger), transparent 78%)
+  );
+}
+</style>

package/src/components/button-base/index.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import ButtonBase from './ButtonBase.vue'
+import type { ButtonProps } from './types'
+
+const meta = {
+  title: 'components/ButtonBase',
+  component: ButtonBase,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'default', 'danger'] satisfies ButtonProps['variant'][],
+    },
+    shape: {
+      control: 'select',
+      options: ['radius-default', 'radius-circle'] satisfies ButtonProps['shape'][],
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'] satisfies ButtonProps['type'][],
+    },
+    is: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+    // @ts-ignore: attribute
+    disabled: {
+      control: 'boolean',
+    },
+    isPending: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof ButtonBase>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    default: 'Button',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    default: 'Primary Button',
+    variant: 'primary',
+    isPending: false,
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    default: 'Danger Button',
+    variant: 'danger',
+  },
+}
+
+export const CircleShape: Story = {
+  args: {
+    default: '✓',
+    shape: 'radius-circle',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    default: 'Disabled',
+    // @ts-ignore: attribute
+    disabled: true,
+  },
+}
+
+export const Pending: Story = {
+  args: {
+    default: 'Loading...',
+    isPending: true,
+    variant: 'primary',
+  },
+}
+
+export const AsLink: Story = {
+  args: {
+    default: 'Link Button',
+    is: 'a',
+    // @ts-ignore: attribute
+    href: '#',
+    variant: 'primary',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { ButtonBase },
+    template: `
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+        <ButtonBase variant="default">Default</ButtonBase>
+        <ButtonBase variant="primary">Primary</ButtonBase>
+        <ButtonBase variant="danger">Danger</ButtonBase>
+        <ButtonBase shape="radius-circle">✓</ButtonBase>
+        <ButtonBase disabled>Disabled</ButtonBase>
+        <ButtonBase isPending variant="primary">Pending</ButtonBase>
+      </div>
+    `,
+  }),
+}

package/src/components/button-base/types.ts

@@ -0,0 +1,10 @@
+export type ButtonVariant = 'primary' | 'default' | 'danger'
+export type ButtonShape = 'radius-default' | 'radius-circle'
+
+export type ButtonProps = {
+  isPending?: boolean
+  variant?: ButtonVariant
+  shape?: ButtonShape
+  type?: 'button' | 'submit' | 'reset'
+  is?: 'button' | 'a'
+}

package/src/components/card-base/CardBase.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { variant = 'raised' } = defineProps<{ variant?: 'raised' | 'inset' }>()
+</script>
+
+<template>
+  <section :class="['card', variant]">
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.card {
+  border-radius: var(--radius-2xl);
+  border: 0.3rem solid var(--color-border);
+}
+
+.raised {
+  box-shadow: var(--shadow-raised);
+}
+.inset {
+  box-shadow: var(--shadow-inset);
+}
+</style>

package/src/components/card-base/CardContent.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{ as?: 'div' | 'section' | 'ul' | 'main' | 'ol' }>(), { as: 'main' })
+</script>
+
+<template>
+  <component :is="as" class="content">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.content {
+  padding: 0 2.4rem 2.4rem 2.4rem;
+}
+</style>

package/src/components/card-base/CardDescription.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ as?: 'p' | 'div' | 'span' }>(), {
+  as: 'p',
+})
+</script>
+
+<template>
+  <component :is="as" class="description">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.description {
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+}
+</style>

package/src/components/card-base/CardFooter.vue

@@ -0,0 +1,11 @@
+<template>
+  <footer class="footer">
+    <slot />
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  padding: 0 2.4rem 2.4rem 2.4rem;
+}
+</style>

package/src/components/card-base/CardHeader.vue

@@ -0,0 +1,14 @@
+<template>
+  <header class="header">
+    <slot />
+  </header>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+  flex-direction: column;
+  padding: 2.4rem;
+  row-gap: 0.6rem;
+}
+</style>

package/src/components/card-base/CardTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' }>(), {
+  as: 'h2',
+})
+</script>
+
+<template>
+  <component :is="as" class="title">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.title {
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--tracking-tight);
+}
+</style>

package/src/components/checkbox-base/CheckboxBase.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { type Component } from 'vue'
+
+import CheckIcon from '../assets/CheckIcon.vue'
+
+withDefaults(defineProps<{ isDisabled?: boolean; icon?: Component }>(), { icon: CheckIcon })
+const modelValue = defineModel({ default: false })
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <label :class="['wrapper', { 'is-disabled': isDisabled }]">
+    <input type="checkbox" v-model="modelValue" v-bind="$attrs" />
+    <div class="checkbox">
+      <component :is="icon" class="indicator" />
+    </div>
+    <slot />
+  </label>
+</template>
+
+<style scoped>
+.wrapper {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+input {
+  appearance: none;
+
+  &:focus-visible + .checkbox {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.4rem;
+  }
+
+  &:checked + .checkbox {
+    color: var(--primary);
+
+    background-image: linear-gradient(
+      to top left,
+      color-mix(in oklch, var(--primary), transparent 95%),
+      color-mix(in oklch, var(--primary), transparent 75%)
+    );
+    box-shadow: var(--shadow-raised);
+  }
+
+  &:checked + .checkbox .indicator {
+    display: block;
+  }
+}
+
+.checkbox {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-sm);
+  border: 0.1rem solid var(--color-highlight);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset);
+  transition:
+    background-color 250ms ease-out,
+    color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+
+.indicator {
+  display: none;
+}
+</style>

package/src/components/input-base/InputBase.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { InputProps } from './types'
+
+const model = defineModel<string>({ required: false })
+const {
+  disabled = false,
+  error = '',
+  defaultErrorMessage = '',
+  isPending = false,
+  ...props
+} = defineProps<InputProps>()
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <div :class="['container', cls?.container]">
+    <input
+      v-bind="{ ...$attrs, ...props }"
+      :disabled="isPending || disabled"
+      :class="[{ 'input-error': error, pending: isPending }, cls?.input]"
+      @input="model = ($event.target as HTMLInputElement)?.value"
+    />
+    <span v-if="error" :class="['error-info', cls?.error]">{{ defaultErrorMessage || error }}</span>
+    <span v-else :class="['error-info native-error', cls?.error]">
+      {{ defaultErrorMessage || error }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+input {
+  border: 0.1rem solid var(--color-highlight);
+  background: var(--background);
+  box-shadow: var(--shadow-inset);
+  padding: 0.8rem 1.2rem;
+  font-size: var(--text-sm);
+  border-radius: var(--radius-md);
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.3rem;
+  }
+}
+
+.container:has(input:user-invalid) .native-error {
+  display: inline-block;
+}
+
+.error-info {
+  font-size: 0.8rem;
+  color: var(--color-danger);
+  margin-top: 0.4rem;
+}
+
+.native-error {
+  display: none;
+}
+.pending {
+  cursor: progress;
+}
+.input-error {
+  border-color: var(--color-danger);
+}
+</style>