seven-design-ui 0.0.1

package/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }

package/next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "seven-design-ui",
+  "version": "0.0.1",
+  "description": "企业级 React UI 组件库",
+  "license": "MIT",
+  "author": "seven.zhong",
+  "scripts": {
+    "build": "pnpm --filter ./packages/** build",
+    "build:components": "pnpm --filter @seven-design-ui/components build",
+    "build:core": "pnpm --filter @seven-design-ui/core build",
+    "build:theme": "pnpm --filter @seven-design-ui/theme build",
+    "changeset": "changeset",
+    "clean": "pnpm --filter ./packages/** exec rm -rf dist",
+    "dev": "pnpm --filter @seven-design-ui/play dev",
+    "docs:build": "pnpm --filter docs build",
+    "docs:deploy": "pnpm docs:build && node scripts/deploy-docs.js",
+    "docs:dev": "pnpm --filter docs dev",
+    "docs:preview": "pnpm --filter docs preview",
+    "format": "prettier --write \"**/*.{ts,tsx,json,md}\"",
+    "lint": "eslint . --ext .ts,.tsx",
+    "prepare": "husky install",
+    "release": "pnpm build && changeset publish",
+    "test": "vitest",
+    "version-packages": "changeset version"
+  },
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "jiti": "latest",
+    "less": "latest",
+    "lightningcss": "latest",
+    "lucide-react": "0.562.0",
+    "next": "16.1.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "rspress": "1.47.0",
+    "sass": "latest",
+    "sass-embedded": "latest",
+    "stylus": "latest",
+    "sugarss": "latest",
+    "tailwind-merge": "3.4.0",
+    "tailwindcss-animate": "1.0.7",
+    "terser": "latest",
+    "tsx": "latest",
+    "yaml": "latest"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "gh-pages": "^6.3.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "postcss": "8.5.6",
+    "prettier": "^3.2.4",
+    "tailwindcss": "4.1.18",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.1"
+  },
+  "packageManager": "pnpm@8.15.0",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  }
+}

package/packages/components/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@seven-design-ui/components",
+  "version": "0.1.0",
+  "description": "SevenDesign React UI 组件库",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "@seven-design-ui/core": "workspace:*",
+    "@seven-design-ui/theme": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/components/src/button/Button.tsx

@@ -0,0 +1,83 @@
+import React from "react"
+import { forwardRef, ButtonHTMLAttributes } from 'react'
+import { classnames } from '@seven-design-ui/core'
+import './button.css'
+
+export type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type ButtonSize = 'large' | 'default' | 'small'
+export type NativeType = 'button' | 'submit' | 'reset'
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  /** 按钮类型 */
+  type?: ButtonType
+  /** 按钮尺寸 */
+  size?: ButtonSize
+  /** 是否为朴素按钮 */
+  plain?: boolean
+  /** 是否为圆角按钮 */
+  round?: boolean
+  /** 是否为圆形按钮 */
+  circle?: boolean
+  /** 是否为加载中状态 */
+  loading?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 原生 button 的 type 属性 */
+  nativeType?: NativeType
+  /** 图标组件 */
+  icon?: React.ReactNode
+  /** 自定义类名 */
+  className?: string
+  /** 子元素 */
+  children?: React.ReactNode
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    type = 'default',
+    size = 'default',
+    plain = false,
+    round = false,
+    circle = false,
+    loading = false,
+    disabled = false,
+    nativeType = 'button',
+    icon,
+    className,
+    children,
+    ...rest
+  } = props
+
+  const classes = classnames(
+    'sd-button',
+    `sd-button--${type}`,
+    `sd-button--${size}`,
+    {
+      'sd-button--plain': plain,
+      'sd-button--round': round,
+      'sd-button--circle': circle,
+      'sd-button--loading': loading,
+      'is-disabled': disabled || loading,
+    },
+    className
+  )
+
+  return (
+    <button ref={ref} type={nativeType} className={classes} disabled={disabled || loading} {...rest}>
+      {loading && (
+        <span className="sd-button__loading-icon">
+          <svg viewBox="0 0 1024 1024" className="sd-button__spinner">
+            <path
+              fill="currentColor"
+              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.2a32 32 0 0 1 0 45.248L692.992 376.32a32 32 0 0 1-45.248-45.248L783.552 195.2a32 32 0 0 1 45.248 0zM376.32 647.744a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
+            />
+          </svg>
+        </span>
+      )}
+      {icon && !loading && <span className="sd-button__icon">{icon}</span>}
+      {children && <span className="sd-button__text">{children}</span>}
+    </button>
+  )
+})
+
+Button.displayName = 'Button'

package/packages/components/src/button/button.css

@@ -0,0 +1,256 @@
+/* Button 组件样式 */
+.sd-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 15px;
+  font-size: var(--sd-font-size-base);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--sd-fill-color-blank);
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  color: var(--sd-text-color-regular);
+  transition: all var(--sd-transition-duration-fast) var(--sd-transition-function-ease-in-out-bezier);
+  user-select: none;
+  outline: none;
+}
+
+.sd-button:hover,
+.sd-button:focus {
+  color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary-light-7);
+  background-color: var(--sd-color-primary-light-9);
+}
+
+.sd-button:active {
+  color: var(--sd-color-primary-dark-2);
+  border-color: var(--sd-color-primary-dark-2);
+}
+
+/* 按钮类型 */
+.sd-button--primary {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary);
+}
+
+.sd-button--primary:hover,
+.sd-button--primary:focus {
+  background-color: var(--sd-color-primary-light-3);
+  border-color: var(--sd-color-primary-light-3);
+  color: var(--sd-color-white);
+}
+
+.sd-button--primary:active {
+  background-color: var(--sd-color-primary-dark-2);
+  border-color: var(--sd-color-primary-dark-2);
+}
+
+.sd-button--success {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-success);
+  border-color: var(--sd-color-success);
+}
+
+.sd-button--success:hover,
+.sd-button--success:focus {
+  opacity: 0.8;
+}
+
+.sd-button--warning {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-warning);
+  border-color: var(--sd-color-warning);
+}
+
+.sd-button--warning:hover,
+.sd-button--warning:focus {
+  opacity: 0.8;
+}
+
+.sd-button--danger {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-danger);
+  border-color: var(--sd-color-danger);
+}
+
+.sd-button--danger:hover,
+.sd-button--danger:focus {
+  opacity: 0.8;
+}
+
+.sd-button--info {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-info);
+  border-color: var(--sd-color-info);
+}
+
+.sd-button--info:hover,
+.sd-button--info:focus {
+  opacity: 0.8;
+}
+
+/* 朴素按钮 */
+.sd-button--plain {
+  background-color: transparent;
+}
+
+/* 默认类型的 plain 按钮保持原有样式 */
+.sd-button--plain:hover,
+.sd-button--plain:focus {
+  color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary-light-7);
+  background-color: var(--sd-color-primary-light-9);
+}
+
+.sd-button--primary.sd-button--plain {
+  color: var(--sd-color-primary) !important;
+  background-color: var(--sd-color-primary-light-9) !important;
+  border-color: var(--sd-color-primary-light-5) !important;
+}
+
+.sd-button--primary.sd-button--plain:hover,
+.sd-button--primary.sd-button--plain:focus {
+  background-color: var(--sd-color-primary) !important;
+  border-color: var(--sd-color-primary) !important;
+  color: var(--sd-color-white) !important;
+}
+
+.sd-button--success.sd-button--plain {
+  color: var(--sd-color-success) !important;
+  background-color: var(--sd-color-success-light-9) !important;
+  border-color: var(--sd-color-success-light-5) !important;
+}
+
+.sd-button--success.sd-button--plain:hover,
+.sd-button--success.sd-button--plain:focus {
+  background-color: var(--sd-color-success) !important;
+  border-color: var(--sd-color-success) !important;
+  color: var(--sd-color-white) !important;
+}
+
+.sd-button--warning.sd-button--plain {
+  color: var(--sd-color-warning) !important;
+  background-color: var(--sd-color-warning-light-9) !important;
+  border-color: var(--sd-color-warning-light-5) !important;
+}
+
+.sd-button--warning.sd-button--plain:hover,
+.sd-button--warning.sd-button--plain:focus {
+  background-color: var(--sd-color-warning) !important;
+  border-color: var(--sd-color-warning) !important;
+  color: var(--sd-color-white) !important;
+}
+
+.sd-button--danger.sd-button--plain {
+  color: var(--sd-color-danger) !important;
+  background-color: var(--sd-color-danger-light-9) !important;
+  border-color: var(--sd-color-danger-light-5) !important;
+}
+
+.sd-button--danger.sd-button--plain:hover,
+.sd-button--danger.sd-button--plain:focus {
+  background-color: var(--sd-color-danger) !important;
+  border-color: var(--sd-color-danger) !important;
+  color: var(--sd-color-white) !important;
+}
+
+.sd-button--info.sd-button--plain {
+  color: var(--sd-color-info) !important;
+  background-color: var(--sd-color-info-light-9) !important;
+  border-color: var(--sd-color-info-light-5) !important;
+}
+
+.sd-button--info.sd-button--plain:hover,
+.sd-button--info.sd-button--plain:focus {
+  background-color: var(--sd-color-info) !important;
+  border-color: var(--sd-color-info) !important;
+  color: var(--sd-color-white) !important;
+}
+
+/* 圆角按钮 */
+.sd-button--round {
+  border-radius: var(--sd-border-radius-round);
+  padding: 8px 15px;
+}
+
+/* 圆形按钮 */
+.sd-button--circle {
+  border-radius: var(--sd-border-radius-circle);
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+}
+
+/* 尺寸 */
+.sd-button--large {
+  height: var(--sd-component-size-large);
+  padding: 12px 19px;
+  font-size: var(--sd-font-size-base);
+}
+
+.sd-button--large.sd-button--circle {
+  width: 40px;
+  height: 40px;
+}
+
+.sd-button--small {
+  height: var(--sd-component-size-small);
+  padding: 5px 11px;
+  font-size: var(--sd-font-size-small);
+}
+
+.sd-button--small.sd-button--circle {
+  width: 24px;
+  height: 24px;
+}
+
+/* 禁用状态 */
+.sd-button.is-disabled,
+.sd-button.is-disabled:hover,
+.sd-button.is-disabled:focus {
+  color: var(--sd-disabled-text-color);
+  background-color: var(--sd-disabled-bg-color);
+  border-color: var(--sd-disabled-border-color);
+  cursor: not-allowed;
+}
+
+/* 加载状态 */
+.sd-button--loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.sd-button__loading-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sd-button__spinner {
+  width: 1em;
+  height: 1em;
+  animation: sd-button-spin 2s linear infinite;
+}
+
+@keyframes sd-button-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 图标 */
+.sd-button__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sd-button__text {
+  display: inline-block;
+}

package/packages/components/src/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button'
+export type { ButtonProps, ButtonType, ButtonSize, NativeType } from './Button'

package/packages/components/src/index.ts

@@ -0,0 +1,8 @@
+// 导入主题样式
+import '@seven-design-ui/theme/src/index.css'
+
+// 基础组件
+export * from './button'
+export * from './input'
+export * from './switch'
+export * from './pagination'