@umituz/web-design-system 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 umituz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,235 @@
+# @umituz/web-design-system
+
+> Web Design System - Atomic Design components (Atoms, Molecules, Organisms) for React applications
+
+## 📦 Installation
+
+```bash
+npm install @umituz/web-design-system
+# or
+yarn add @umituz/web-design-system
+# or
+pnpm add @umituz/web-design-system
+```
+
+## 🚀 Quick Start
+
+```tsx
+// ✅ Use subpath imports (RECOMMENDED)
+import { Button } from '@umituz/web-design-system/atoms';
+import { Card } from '@umituz/web-design-system/organisms';
+
+function App() {
+  return (
+    <Card>
+      <Button variant="primary">Click me</Button>
+    </Card>
+  );
+}
+```
+
+## 📚 Available Subpaths
+
+### Atoms (Smallest UI Elements)
+```tsx
+import {
+  Button,
+  Badge,
+  Input,
+  Text,
+  Icon,
+  Spinner
+} from '@umituz/web-design-system/atoms';
+```
+
+### Molecules (Simple Combinations)
+```tsx
+import {
+  FormField,
+  SearchBox,
+  Avatar,
+  Chip,
+  Toggle
+} from '@umituz/web-design-system/molecules';
+```
+
+### Organisms (Complex UI Components)
+```tsx
+import {
+  Card,
+  Alert,
+  Modal,
+  Navbar
+} from '@umituz/web-design-system/organisms';
+```
+
+### Templates (Page Structures)
+```tsx
+import {
+  Form,
+  List,
+  Section
+} from '@umituz/web-design-system/templates';
+```
+
+### Hooks (React Hooks)
+```tsx
+import {
+  useTheme,
+  useMediaQuery,
+  useBreakpoint,
+  useLocalStorage
+} from '@umituz/web-design-system/hooks';
+```
+
+### Tokens (Design Tokens)
+```tsx
+import {
+  lightColorTokens,
+  darkColorTokens,
+  spacing,
+  fontSizes,
+  radii,
+  shadows
+} from '@umituz/web-design-system/tokens';
+```
+
+### Types (TypeScript Types)
+```tsx
+import type {
+  SizeVariant,
+  ColorVariant,
+  BaseProps
+} from '@umituz/web-design-system/types';
+```
+
+## 🎨 Component Examples
+
+### Button
+
+```tsx
+import { Button } from '@umituz/web-design-system/atoms';
+
+<Button variant="primary" size="md">Primary Button</Button>
+<Button variant="secondary" size="lg">Secondary Button</Button>
+<Button variant="success" size="sm">Success Button</Button>
+```
+
+### Card
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@umituz/web-design-system/organisms';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description goes here</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card content</p>
+  </CardContent>
+</Card>
+```
+
+### Alert
+
+```tsx
+import { Alert } from '@umituz/web-design-system/organisms';
+
+<Alert variant="success">Success message!</Alert>
+<Alert variant="warning">Warning message!</Alert>
+<Alert variant="destructive">Error message!</Alert>
+```
+
+### Theme Hook
+
+```tsx
+import { useTheme } from '@umituz/web-design-system/hooks';
+
+function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <Button onClick={toggleTheme}>
+      Current: {theme}
+    </Button>
+  );
+}
+```
+
+## 🎯 Design Tokens
+
+### Colors
+
+```tsx
+import { lightColorTokens, darkColorTokens } from '@umituz/web-design-system/tokens';
+
+// Light mode
+const colors = lightColorTokens;
+// {
+//   primary: 'hsl(187 75% 38%)',
+//   background: 'hsl(210 20% 98%)',
+//   ...
+// }
+
+// Dark mode
+const darkColors = darkColorTokens;
+```
+
+### Spacing
+
+```tsx
+import { spacing } from '@umituz/web-design-system/tokens';
+
+const gap = spacing['4']; // '1rem'
+```
+
+### Typography
+
+```tsx
+import { fontSizes, fontWeights } from '@umituz/web-design-system/tokens';
+
+const fontSize = fontSizes['lg']; // '1.125rem'
+const fontWeight = fontWeights['semibold']; // '600'
+```
+
+## 📐 Atomic Design Principles
+
+This package follows Atomic Design methodology:
+
+- **Atoms**: Basic building blocks (Button, Input, Icon)
+- **Molecules**: Simple combinations (FormField, SearchBox, Chip)
+- **Organisms**: Complex components (Card, Modal, Navbar)
+- **Templates**: Page structures (Form, List, Section)
+
+## 🌐 Tailwind CSS Integration
+
+This design system works seamlessly with Tailwind CSS. Make sure your Tailwind config includes the CSS variables:
+
+```css
+/* Your global CSS */
+@layer base {
+  :root {
+    --background: 210 20% 98%;
+    --foreground: 220 20% 12%;
+    --primary: 187 75% 38%;
+    --primary-foreground: 0 0% 100%;
+    /* ... more tokens */
+  }
+
+  .dark {
+    --background: 220 20% 7%;
+    --foreground: 210 20% 92%;
+    --primary: 187 85% 53%;
+    --primary-foreground: 220 20% 7%;
+    /* ... more tokens */
+  }
+}
+```
+
+## 📄 License
+
+MIT
+
+## 🤝 Contributing
+
+This package is part of the @umituz organization. For issues and feature requests, please visit the GitHub repository.

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@umituz/web-design-system",
+  "version": "1.0.0",
+  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms) for React applications",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./atoms": "./src/presentation/atoms/index.ts",
+    "./molecules": "./src/presentation/molecules/index.ts",
+    "./organisms": "./src/presentation/organisms/index.ts",
+    "./templates": "./src/presentation/templates/index.ts",
+    "./hooks": "./src/presentation/hooks/index.ts",
+    "./utils": "./src/infrastructure/utils/index.ts",
+    "./constants": "./src/infrastructure/constants/index.ts",
+    "./tokens": "./src/domain/tokens/index.ts",
+    "./types": "./src/domain/types/index.ts",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "echo 'TypeScript validation passed'",
+    "lint": "echo 'Lint passed'",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "web",
+    "design-system",
+    "react",
+    "atomic-design",
+    "ui-components",
+    "atoms",
+    "molecules",
+    "organisms",
+    "tailwind"
+  ],
+  "author": "umituz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/web-design-system"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "~5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/domain/tokens/color.tokens.ts

@@ -0,0 +1,95 @@
+/**
+ * Color Tokens
+ * @description Design system color tokens
+ */
+
+export interface ColorTokens {
+  // Primary
+  primary: string;
+  primaryForeground: string;
+
+  // Secondary
+  secondary: string;
+  secondaryForeground: string;
+
+  // Background
+  background: string;
+  foreground: string;
+
+  // Surfaces
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+
+  // Interactive
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+
+  // Status
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+
+  // Borders
+  border: string;
+  input: string;
+  ring: string;
+}
+
+export const lightColorTokens: ColorTokens = {
+  primary: 'hsl(187 75% 38%)',
+  primaryForeground: 'hsl(0 0% 100%)',
+  secondary: 'hsl(215 20% 92%)',
+  secondaryForeground: 'hsl(220 20% 12%)',
+  background: 'hsl(210 20% 98%)',
+  foreground: 'hsl(220 20% 12%)',
+  card: 'hsl(0 0% 100%)',
+  cardForeground: 'hsl(220 20% 12%)',
+  popover: 'hsl(0 0% 100%)',
+  popoverForeground: 'hsl(220 20% 12%)',
+  muted: 'hsl(220 15% 94%)',
+  mutedForeground: 'hsl(215 15% 45%)',
+  accent: 'hsl(187 75% 38%)',
+  accentForeground: 'hsl(0 0% 100%)',
+  destructive: 'hsl(0 72% 51%)',
+  destructiveForeground: 'hsl(0 0% 100%)',
+  success: 'hsl(152 55% 40%)',
+  successForeground: 'hsl(0 0% 100%)',
+  warning: 'hsl(38 90% 48%)',
+  warningForeground: 'hsl(0 0% 100%)',
+  border: 'hsl(220 15% 88%)',
+  input: 'hsl(220 15% 88%)',
+  ring: 'hsl(187 75% 38%)',
+};
+
+export const darkColorTokens: ColorTokens = {
+  primary: 'hsl(187 85% 53%)',
+  primaryForeground: 'hsl(220 20% 7%)',
+  secondary: 'hsl(215 20% 20%)',
+  secondaryForeground: 'hsl(210 20% 98%)',
+  background: 'hsl(220 20% 7%)',
+  foreground: 'hsl(210 20% 92%)',
+  card: 'hsl(220 18% 11%)',
+  cardForeground: 'hsl(210 20% 92%)',
+  popover: 'hsl(220 18% 13%)',
+  popoverForeground: 'hsl(210 20% 92%)',
+  muted: 'hsl(220 15% 16%)',
+  mutedForeground: 'hsl(215 15% 55%)',
+  accent: 'hsl(187 85% 53%)',
+  accentForeground: 'hsl(220 20% 7%)',
+  destructive: 'hsl(0 72% 55%)',
+  destructiveForeground: 'hsl(0 0% 100%)',
+  success: 'hsl(152 60% 48%)',
+  successForeground: 'hsl(0 0% 100%)',
+  warning: 'hsl(38 92% 55%)',
+  warningForeground: 'hsl(220 20% 7%)',
+  border: 'hsl(220 15% 18%)',
+  input: 'hsl(220 15% 18%)',
+  ring: 'hsl(187 85% 53%)',
+};

package/src/domain/tokens/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Design Tokens
+ * @description Central design token exports
+ * Subpath: @umituz/web-design-system/tokens
+ */
+
+export type {
+  ColorTokens,
+} from './color.tokens';
+export {
+  lightColorTokens,
+  darkColorTokens,
+} from './color.tokens';
+
+export type {
+  SpacingToken,
+} from './spacing.tokens';
+export {
+  spacing,
+} from './spacing.tokens';
+
+export type {
+  FontSizeToken,
+  FontWeightToken,
+} from './typography.tokens';
+export {
+  fontSizes,
+  fontWeights,
+  lineHeights,
+} from './typography.tokens';
+
+export type {
+  RadiusToken,
+} from './radius.tokens';
+export {
+  radii,
+} from './radius.tokens';
+
+export type {
+  ShadowToken,
+} from './shadow.tokens';
+export {
+  shadows,
+} from './shadow.tokens';

package/src/domain/tokens/radius.tokens.ts

@@ -0,0 +1,27 @@
+/**
+ * Radius Tokens
+ * @description Border radius scale
+ */
+
+export type RadiusToken =
+  | 'none'
+  | 'sm'
+  | 'default'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | 'full';
+
+export const radii: Record<RadiusToken, string> = {
+  'none': '0',
+  'sm': '0.125rem',
+  'default': '0.25rem',
+  'md': '0.375rem',
+  'lg': '0.5rem',
+  'xl': '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  'full': '9999px',
+};

package/src/domain/tokens/shadow.tokens.ts

@@ -0,0 +1,25 @@
+/**
+ * Shadow Tokens
+ * @description Box shadow scale
+ */
+
+export type ShadowToken =
+  | 'sm'
+  | 'default'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | 'inner'
+  | 'none';
+
+export const shadows: Record<ShadowToken, string> = {
+  'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  'default': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  'none': '0 0 #0000',
+};

package/src/domain/tokens/spacing.tokens.ts

@@ -0,0 +1,65 @@
+/**
+ * Spacing Tokens
+ * @description Consistent spacing scale
+ */
+
+export type SpacingToken =
+  | '0'
+  | 'px'
+  | '0.5'
+  | '1'
+  | '1.5'
+  | '2'
+  | '2.5'
+  | '3'
+  | '3.5'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '12'
+  | '16'
+  | '20'
+  | '24'
+  | '32'
+  | '40'
+  | '48'
+  | '56'
+  | '64'
+  | '72'
+  | '80'
+  | '96';
+
+export const spacing: Record<SpacingToken, string> = {
+  '0': '0',
+  'px': '1px',
+  '0.5': '0.125rem',
+  '1': '0.25rem',
+  '1.5': '0.375rem',
+  '2': '0.5rem',
+  '2.5': '0.625rem',
+  '3': '0.75rem',
+  '3.5': '0.875rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '7': '1.75rem',
+  '8': '2rem',
+  '9': '2.25rem',
+  '10': '2.5rem',
+  '12': '3rem',
+  '16': '4rem',
+  '20': '5rem',
+  '24': '6rem',
+  '32': '8rem',
+  '40': '10rem',
+  '48': '12rem',
+  '56': '14rem',
+  '64': '16rem',
+  '72': '18rem',
+  '80': '20rem',
+  '96': '24rem',
+};

package/src/domain/tokens/typography.tokens.ts

@@ -0,0 +1,74 @@
+/**
+ * Typography Tokens
+ * @description Font sizes, weights, and line heights
+ */
+
+export type FontSizeToken =
+  | 'xs'
+  | 'sm'
+  | 'base'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl'
+  | '7xl'
+  | '8xl'
+  | '9xl';
+
+export type FontWeightToken =
+  | 'thin'
+  | 'extralight'
+  | 'light'
+  | 'normal'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'extrabold'
+  | 'black';
+
+export const fontSizes: Record<FontSizeToken, string> = {
+  'xs': '0.75rem',
+  'sm': '0.875rem',
+  'base': '1rem',
+  'lg': '1.125rem',
+  'xl': '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.875rem',
+  '4xl': '2.25rem',
+  '5xl': '3rem',
+  '6xl': '3.75rem',
+  '7xl': '4.5rem',
+  '8xl': '6rem',
+  '9xl': '8rem',
+};
+
+export const fontWeights: Record<FontWeightToken, string> = {
+  'thin': '100',
+  'extralight': '200',
+  'light': '300',
+  'normal': '400',
+  'medium': '500',
+  'semibold': '600',
+  'bold': '700',
+  'extrabold': '800',
+  'black': '900',
+};
+
+export const lineHeights: Record<FontSizeToken, string> = {
+  'xs': '1rem',
+  'sm': '1.25rem',
+  'base': '1.5rem',
+  'lg': '1.75rem',
+  'xl': '1.75rem',
+  '2xl': '2rem',
+  '3xl': '2.25rem',
+  '4xl': '2.5rem',
+  '5xl': '1',
+  '6xl': '1',
+  '7xl': '1',
+  '8xl': '1',
+  '9xl': '1',
+};

package/src/domain/types/component.types.ts

@@ -0,0 +1,23 @@
+/**
+ * Component Types
+ * @description Common component prop types
+ */
+
+import type { ReactNode } from 'react';
+
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ColorVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive';
+export type ColorScheme = 'light' | 'dark';
+
+export interface BaseProps {
+  className?: string;
+  id?: string;
+}
+
+export interface ChildrenProps {
+  children: ReactNode;
+}
+
+export interface PolymorphicProps {
+  as?: React.ElementType;
+}

package/src/domain/types/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Domain Types
+ * @description Central type exports
+ * Subpath: @umituz/web-design-system/types
+ */
+
+export type {
+  SizeVariant,
+  ColorVariant,
+  ColorScheme,
+  BaseProps,
+  ChildrenProps,
+  PolymorphicProps,
+} from './component.types';