engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.4k

fix(lint): configure Biome to properly ignore build directories

Browse source 
- Add root biome.json that extends packages/config/biome.json
- Add explicit ignore patterns for dist/, build/, .next/, .turbo/, etc.
- Make a11y lints warnings instead of errors (non-blocking)
- Remove invalid biome-ignore comment from Section.tsx
- Apply formatting to all source files (155 files checked, 129 fixed)

This fixes the CI format check that was failing with 2064+ errors
because Biome was checking generated files in dist/ and .turbo/.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-11-26 22:49:45 +10:00
parent 990ba6f050
commit e95bea6847
131 changed files with 8796 additions and 9392 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.changeset/config.json
View file

@ -7,11 +7,7 @@
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": [
"@tpmjs/config",
"@tpmjs/storybook",
"@tpmjs/web"
],
"ignore": ["@tpmjs/config", "@tpmjs/storybook", "@tpmjs/web"],
"privatePackages": {
"version": false,
"tag": false

310
.dependency-cruiser.js
View file

@ -1,159 +1,159 @@
/** @type {import('dependency-cruiser').IConfiguration} */
export default {
forbidden: [
{
name: "no-circular",
severity: "error",
comment:
"This dependency is part of a circular relationship. You might want to revise " +
"your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ",
from: {},
to: {
circular: true,
},
},
{
name: "no-orphans",
comment:
"This is an orphan module - it's likely not used (anymore?). Either use it or " +
"remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
"add an exception for it in your dependency-cruiser configuration. By default " +
"this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
"files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
severity: "warn",
from: {
orphan: true,
pathNot: [
"(^|/)\\.[^/]+\\.(js|cjs|mjs|ts|json)$", // dot files
"\\.d\\.ts$", // TypeScript declaration files
"(^|/)tsconfig\\.json$", // tsconfig
"(^|/)postcss\\.config\\.(js|cjs|mjs)$", // postcss config
"(^|/)(babel|webpack|tailwind)\\.config\\.(js|cjs|mjs|ts|json)$", // other configs
"/tokens\\.ts$", // token files
],
},
to: {},
},
{
name: "no-deprecated-core",
comment:
"A module depends on a node core module that has been deprecated. Find an alternative - these are " +
"bound to exist - node doesn't deprecate lightly.",
severity: "warn",
from: {},
to: {
dependencyTypes: ["core"],
path: [
"^(v8/tools/codemap)$",
"^(v8/tools/consarray)$",
"^(v8/tools/csvparser)$",
"^(v8/tools/logreader)$",
"^(v8/tools/profile_view)$",
"^(v8/tools/profile)$",
"^(v8/tools/SourceMap)$",
"^(v8/tools/splaytree)$",
"^(v8/tools/tickprocessor-driver)$",
"^(v8/tools/tickprocessor)$",
"^(node-inspect/lib/_inspect)$",
"^(node-inspect/lib/internal/inspect_client)$",
"^(node-inspect/lib/internal/inspect_repl)$",
"^(async_hooks)$",
"^(punycode)$",
"^(domain)$",
"^(constants)$",
"^(sys)$",
"^(_linklist)$",
"^(_stream_wrap)$",
],
},
},
{
name: "not-to-deprecated",
comment:
"This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later " +
"version of that module, or find an alternative. Deprecated modules are a security risk.",
severity: "warn",
from: {},
to: {
dependencyTypes: ["deprecated"],
},
},
{
name: "no-non-package-json",
severity: "error",
comment:
"This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
"That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
"available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
"in your package.json.",
from: {},
to: {
dependencyTypes: ["npm-no-pkg", "npm-unknown"],
},
},
{
name: "not-to-unresolvable",
comment:
"This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
"module: add it to your package.json. In all other cases you likely already know what to do.",
severity: "error",
from: {},
to: {
couldNotResolve: true,
},
},
{
name: "no-duplicate-dep-types",
comment:
"Likeley this module depends on an external ('npm') package that occurs more than once " +
"in your package.json i.e. both as a devDependencies and in dependencies. This will cause " +
"maintenance problems later on.",
severity: "warn",
from: {},
to: {
moreThanOneDependencyType: true,
// as it's pretty common to have a type import be a type only import
// _and_ (e.g.) a devDependency - don't consider type-only dependency
// types for this rule
dependencyTypesNot: ["type-only"],
},
},
forbidden: [
{
name: 'no-circular',
severity: 'error',
comment:
'This dependency is part of a circular relationship. You might want to revise ' +
'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
from: {},
to: {
circular: true,
},
},
{
name: 'no-orphans',
comment:
"This is an orphan module - it's likely not used (anymore?). Either use it or " +
"remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
'add an exception for it in your dependency-cruiser configuration. By default ' +
'this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration ' +
'files (.d.ts), tsconfig.json and some of the babel and webpack configs.',
severity: 'warn',
from: {
orphan: true,
pathNot: [
'(^|/)\\.[^/]+\\.(js|cjs|mjs|ts|json)$', // dot files
'\\.d\\.ts$', // TypeScript declaration files
'(^|/)tsconfig\\.json$', // tsconfig
'(^|/)postcss\\.config\\.(js|cjs|mjs)$', // postcss config
'(^|/)(babel|webpack|tailwind)\\.config\\.(js|cjs|mjs|ts|json)$', // other configs
'/tokens\\.ts$', // token files
],
},
to: {},
},
{
name: 'no-deprecated-core',
comment:
'A module depends on a node core module that has been deprecated. Find an alternative - these are ' +
"bound to exist - node doesn't deprecate lightly.",
severity: 'warn',
from: {},
to: {
dependencyTypes: ['core'],
path: [
'^(v8/tools/codemap)$',
'^(v8/tools/consarray)$',
'^(v8/tools/csvparser)$',
'^(v8/tools/logreader)$',
'^(v8/tools/profile_view)$',
'^(v8/tools/profile)$',
'^(v8/tools/SourceMap)$',
'^(v8/tools/splaytree)$',
'^(v8/tools/tickprocessor-driver)$',
'^(v8/tools/tickprocessor)$',
'^(node-inspect/lib/_inspect)$',
'^(node-inspect/lib/internal/inspect_client)$',
'^(node-inspect/lib/internal/inspect_repl)$',
'^(async_hooks)$',
'^(punycode)$',
'^(domain)$',
'^(constants)$',
'^(sys)$',
'^(_linklist)$',
'^(_stream_wrap)$',
],
},
},
{
name: 'not-to-deprecated',
comment:
'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' +
'version of that module, or find an alternative. Deprecated modules are a security risk.',
severity: 'warn',
from: {},
to: {
dependencyTypes: ['deprecated'],
},
},
{
name: 'no-non-package-json',
severity: 'error',
comment:
"This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
"That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
'available on live with an non-guaranteed version. Fix it by adding the package to the dependencies ' +
'in your package.json.',
from: {},
to: {
dependencyTypes: ['npm-no-pkg', 'npm-unknown'],
},
},
{
name: 'not-to-unresolvable',
comment:
"This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
'module: add it to your package.json. In all other cases you likely already know what to do.',
severity: 'error',
from: {},
to: {
couldNotResolve: true,
},
},
{
name: 'no-duplicate-dep-types',
comment:
"Likeley this module depends on an external ('npm') package that occurs more than once " +
'in your package.json i.e. both as a devDependencies and in dependencies. This will cause ' +
'maintenance problems later on.',
severity: 'warn',
from: {},
to: {
moreThanOneDependencyType: true,
// as it's pretty common to have a type import be a type only import
// _and_ (e.g.) a devDependency - don't consider type-only dependency
// types for this rule
dependencyTypesNot: ['type-only'],
},
},
/* Custom monorepo rules - keep it simple */
{
name: "no-package-to-app-imports",
comment: "Packages cannot import from apps - keeps packages reusable",
severity: "error",
from: {
path: "^packages/",
},
to: {
path: "^apps/",
},
},
],
options: {
doNotFollow: {
path: ["node_modules", "\\.next", "dist", "\\.turbo", "storybook-static"],
},
tsPreCompilationDeps: true,
tsConfig: {
fileName: "./tsconfig.json",
},
enhancedResolveOptions: {
exportsFields: ["exports"],
conditionNames: ["import", "require", "node", "default"],
},
reporterOptions: {
dot: {
collapsePattern: "node_modules/[^/]+",
},
archi: {
collapsePattern: "^(packages|apps)/[^/]+|node_modules/[^/]+",
},
text: {
highlightFocused: true,
},
},
},
/* Custom monorepo rules - keep it simple */
{
name: 'no-package-to-app-imports',
comment: 'Packages cannot import from apps - keeps packages reusable',
severity: 'error',
from: {
path: '^packages/',
},
to: {
path: '^apps/',
},
},
],
options: {
doNotFollow: {
path: ['node_modules', '\\.next', 'dist', '\\.turbo', 'storybook-static'],
},
tsPreCompilationDeps: true,
tsConfig: {
fileName: './tsconfig.json',
},
enhancedResolveOptions: {
exportsFields: ['exports'],
conditionNames: ['import', 'require', 'node', 'default'],
},
reporterOptions: {
dot: {
collapsePattern: 'node_modules/[^/]+',
},
archi: {
collapsePattern: '^(packages|apps)/[^/]+|node_modules/[^/]+',
},
text: {
highlightFocused: true,
},
},
},
};

4
apps/web/eslint.config.mjs
View file

@ -9,8 +9,8 @@ export default [
'*.config.js',
'*.config.ts',
'next-env.d.ts',
'eslint.config.mjs'
]
'eslint.config.mjs',
],
},
...reactConfig,
];

2
apps/web/next-env.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import './.next/types/routes.d.ts';
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

72
apps/web/package.json
View file

@ -1,38 +1,38 @@
{
"name": "@tpmjs/web",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"type-check": "tsc --noEmit",
"clean": "rm -rf .next .turbo"
},
"dependencies": {
"@tpmjs/env": "workspace:*",
"@tpmjs/types": "workspace:*",
"@tpmjs/ui": "workspace:*",
"@tpmjs/utils": "workspace:*",
"next": "^16.0.4",
"next-themes": "^0.4.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"zod": "^3.24.1"
},
"devDependencies": {
"@tpmjs/eslint-config": "workspace:*",
"@tpmjs/tailwind-config": "workspace:*",
"@tpmjs/tsconfig": "workspace:*",
"@types/node": "^22.10.2",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"autoprefixer": "^10.4.20",
"eslint": "^9.39.1",
"eslint-config-next": "^16.0.4",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.9.3"
}
"name": "@tpmjs/web",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"type-check": "tsc --noEmit",
"clean": "rm -rf .next .turbo"
},
"dependencies": {
"@tpmjs/env": "workspace:*",
"@tpmjs/types": "workspace:*",
"@tpmjs/ui": "workspace:*",
"@tpmjs/utils": "workspace:*",
"next": "^16.0.4",
"next-themes": "^0.4.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"zod": "^3.24.1"
},
"devDependencies": {
"@tpmjs/eslint-config": "workspace:*",
"@tpmjs/tailwind-config": "workspace:*",
"@tpmjs/tsconfig": "workspace:*",
"@types/node": "^22.10.2",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"autoprefixer": "^10.4.20",
"eslint": "^9.39.1",
"eslint-config-next": "^16.0.4",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.9.3"
}
}

144
apps/web/src/app/globals.css
View file

@ -6,31 +6,31 @@
/* Light mode (default) */
:root {
/* Backgrounds & Surfaces */
--background: 0 0% 100%; /* Pure white */
--surface: 210 20% 98%; /* Off-white */
--surface-elevated: 0 0% 100%; /* White (elevated) */
--surface-overlay: 0 0% 98%; /* Light gray */
--background: 0 0% 100%; /* Pure white */
--surface: 210 20% 98%; /* Off-white */
--surface-elevated: 0 0% 100%; /* White (elevated) */
--surface-overlay: 0 0% 98%; /* Light gray */
/* Foreground (Text) */
--foreground: 222 47% 11%; /* Almost black */
--foreground: 222 47% 11%; /* Almost black */
--foreground-secondary: 215 16% 47%; /* Medium gray */
--foreground-tertiary: 215 16% 65%; /* Light gray */
--foreground-muted: 215 16% 75%; /* Very light gray */
--foreground-tertiary: 215 16% 65%; /* Light gray */
--foreground-muted: 215 16% 75%; /* Very light gray */
/* Borders */
--border: 214 32% 91%; /* Light gray */
--border-strong: 214 32% 80%; /* Medium gray */
--border-subtle: 214 20% 95%; /* Very light gray */
--border: 214 32% 91%; /* Light gray */
--border-strong: 214 32% 80%; /* Medium gray */
--border-subtle: 214 20% 95%; /* Very light gray */
/* Interactive States */
--primary: 222 47% 11%; /* Dark for light mode */
--primary-foreground: 210 40% 98%; /* Light text */
--secondary: 210 40% 96%; /* Light secondary */
--primary: 222 47% 11%; /* Dark for light mode */
--primary-foreground: 210 40% 98%; /* Light text */
--secondary: 210 40% 96%; /* Light secondary */
--secondary-foreground: 222 47% 11%; /* Dark text */
--accent: 210 40% 96%; /* Accent bg */
--accent-foreground: 222 47% 11%; /* Accent text */
--muted: 210 40% 96%; /* Muted bg */
--muted-foreground: 215 16% 47%; /* Muted text */
--accent: 210 40% 96%; /* Accent bg */
--accent-foreground: 222 47% 11%; /* Accent text */
--muted: 210 40% 96%; /* Muted bg */
--muted-foreground: 215 16% 47%; /* Muted text */
/* Status Colors */
--success: 142 71% 45%;
@ -53,7 +53,7 @@
/* Grid/Blueprint Pattern */
--grid-color: 214 32% 95%;
--grid-size: 24px; /* Grid cell size */
--grid-size: 24px; /* Grid cell size */
/* Card */
--card: 0 0% 100%;
@ -67,15 +67,15 @@
--radius: var(--radius-md);
/* Spacing - Editorial scale for airy layouts */
--spacing-section: 6rem; /* 96px - Between major sections */
--spacing-component: 3rem; /* 48px - Between components */
--spacing-element: 1.5rem; /* 24px - Between related elements */
--spacing-tight: 0.75rem; /* 12px - Tight groupings */
--spacing-comfortable: 2rem; /* 32px - Comfortable breathing room */
--spacing-section: 6rem; /* 96px - Between major sections */
--spacing-component: 3rem; /* 48px - Between components */
--spacing-element: 1.5rem; /* 24px - Between related elements */
--spacing-tight: 0.75rem; /* 12px - Tight groupings */
--spacing-comfortable: 2rem; /* 32px - Comfortable breathing room */
/* Typography */
--font-sans: var(--font-sans), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: var(--font-mono), 'SF Mono', Consolas, monospace;
--font-mono: var(--font-mono), "SF Mono", Consolas, monospace;
/* Editorial Line Heights - Airy, readable */
--leading-tight: 1.25;
@ -83,7 +83,7 @@
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 1.75;
--leading-editorial: 1.8; /* Extra generous for body copy */
--leading-editorial: 1.8; /* Extra generous for body copy */
/* Letter Spacing - Technical precision */
--tracking-tighter: -0.05em;
@ -97,53 +97,53 @@
/* Dark mode (opt-in) - Vercel/Cursor/Perplexity aesthetic */
.dark {
/* Backgrounds & Surfaces */
--background: 210 10% 5%; /* #0d0d0f - Almost black */
--surface: 210 10% 8%; /* #14141a - Slightly lighter */
--surface-elevated: 210 10% 12%; /* #1c1c24 - Cards, modals */
--surface-overlay: 210 10% 16%; /* #25252f - Overlays, popovers */
--background: 210 10% 5%; /* #0d0d0f - Almost black */
--surface: 210 10% 8%; /* #14141a - Slightly lighter */
--surface-elevated: 210 10% 12%; /* #1c1c24 - Cards, modals */
--surface-overlay: 210 10% 16%; /* #25252f - Overlays, popovers */
/* Foreground (Text) */
--foreground: 210 10% 90%; /* #e3e3e8 - Primary text */
--foreground: 210 10% 90%; /* #e3e3e8 - Primary text */
--foreground-secondary: 210 8% 60%; /* #949499 - Secondary text */
--foreground-tertiary: 210 6% 40%; /* #64646a - Tertiary text */
--foreground-muted: 210 6% 30%; /* #4a4a50 - Muted text */
--foreground-tertiary: 210 6% 40%; /* #64646a - Tertiary text */
--foreground-muted: 210 6% 30%; /* #4a4a50 - Muted text */
/* Borders (1px, subtle) */
--border: 210 10% 20%; /* #30303a - Default border */
--border-strong: 210 12% 30%; /* #494954 - Emphasized border */
--border-subtle: 210 8% 15%; /* #22222c - Subtle border */
--border: 210 10% 20%; /* #30303a - Default border */
--border-strong: 210 12% 30%; /* #494954 - Emphasized border */
--border-subtle: 210 8% 15%; /* #22222c - Subtle border */
/* Interactive States */
--primary: 210 10% 98%; /* White-ish for dark mode */
--primary-foreground: 210 10% 5%; /* Dark text on light bg */
--secondary: 210 10% 15%; /* Dark secondary */
--primary: 210 10% 98%; /* White-ish for dark mode */
--primary-foreground: 210 10% 5%; /* Dark text on light bg */
--secondary: 210 10% 15%; /* Dark secondary */
--secondary-foreground: 210 10% 90%; /* Light text on dark bg */
--accent: 210 10% 18%; /* Accent background */
--accent-foreground: 210 10% 95%; /* Accent text */
--muted: 210 10% 12%; /* Muted background */
--muted-foreground: 210 8% 60%; /* Muted text */
--accent: 210 10% 18%; /* Accent background */
--accent-foreground: 210 10% 95%; /* Accent text */
--muted: 210 10% 12%; /* Muted background */
--muted-foreground: 210 8% 60%; /* Muted text */
/* Status Colors (desaturated for dark mode) */
--success: 142 71% 45%; /* #10b981 - Green */
--success-foreground: 142 76% 95%; /* Light green text */
--error: 0 72% 51%; /* #ef4444 - Red */
--error-foreground: 0 86% 97%; /* Light red text */
--warning: 38 92% 50%; /* #f59e0b - Amber */
--warning-foreground: 48 96% 89%; /* Light amber text */
--info: 217 91% 60%; /* #3b82f6 - Blue */
--info-foreground: 214 95% 93%; /* Light blue text */
--success: 142 71% 45%; /* #10b981 - Green */
--success-foreground: 142 76% 95%; /* Light green text */
--error: 0 72% 51%; /* #ef4444 - Red */
--error-foreground: 0 86% 97%; /* Light red text */
--warning: 38 92% 50%; /* #f59e0b - Amber */
--warning-foreground: 48 96% 89%; /* Light amber text */
--info: 217 91% 60%; /* #3b82f6 - Blue */
--info-foreground: 214 95% 93%; /* Light blue text */
/* Destructive (legacy support) */
--destructive: 0 72% 51%;
--destructive-foreground: 0 86% 97%;
/* Form Elements */
--input: 210 10% 20%; /* Input border */
--ring: 210 10% 90%; /* Focus ring */
--ring-offset: 210 10% 5%; /* Focus ring offset */
--input: 210 10% 20%; /* Input border */
--ring: 210 10% 90%; /* Focus ring */
--ring-offset: 210 10% 5%; /* Focus ring offset */
/* Grid/Blueprint Pattern */
--grid-color: 210 10% 15%; /* Grid line color */
--grid-color: 210 10% 15%; /* Grid line color */
/* Card */
--card: 210 10% 8%;
@ -158,39 +158,34 @@
body {
@apply bg-background text-foreground;
font-family: var(--font-sans);
font-feature-settings: 'rlig' 1, 'calt' 1;
font-feature-settings: "rlig" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Grid/Blueprint background patterns */
.grid-background {
background-image:
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
background-position: -1px -1px;
}
.dotted-grid-background {
background-image:
radial-gradient(circle, hsl(var(--grid-color)) 1px, transparent 1px);
background-image: radial-gradient(circle, hsl(var(--grid-color)) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
.blueprint-background {
background-color: hsl(var(--background));
background-image:
/* Major grid lines (4x size) */
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
/* Major grid lines (4x size) */
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
/* Minor grid lines (1x size) */
linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
background-size:
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
var(--grid-size) var(--grid-size),
background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
var(--grid-size) var(--grid-size);
}
@ -201,8 +196,13 @@
}
@keyframes grid-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.6; }
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 0.6;
}
}
}
@ -250,15 +250,11 @@
/* Shadow utilities - Blueprint aesthetic */
.shadow-blueprint {
box-shadow:
0 1px 2px 0 rgb(0 0 0 / 0.03),
0 0 0 1px rgb(0 0 0 / 0.02);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 0 0 1px rgb(0 0 0 / 0.02);
}
.shadow-blueprint-hover {
box-shadow:
0 2px 4px 0 rgb(0 0 0 / 0.05),
0 0 0 1px rgb(0 0 0 / 0.03);
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(0 0 0 / 0.03);
}
/* Transition presets */

68
apps/web/src/app/layout.tsx
View file

@ -1,48 +1,48 @@
import type { Metadata } from "next";
import { Space_Grotesk, Space_Mono } from "next/font/google";
import { ThemeProvider } from "../components/providers/ThemeProvider";
import "./globals.css";
import type { Metadata } from 'next';
import { Space_Grotesk, Space_Mono } from 'next/font/google';
import { ThemeProvider } from '../components/providers/ThemeProvider';
import './globals.css';
const spaceGrotesk = Space_Grotesk({
subsets: ["latin"],
variable: "--font-sans",
display: "swap",
subsets: ['latin'],
variable: '--font-sans',
display: 'swap',
});
const spaceMono = Space_Mono({
subsets: ["latin"],
weight: ["400", "700"],
variable: "--font-mono",
display: "swap",
subsets: ['latin'],
weight: ['400', '700'],
variable: '--font-mono',
display: 'swap',
});
export const metadata: Metadata = {
title: "TPMJS - Tool Package Manager for AI Agents",
description:
"The registry for AI tools. Discover, share, and integrate tools that give your agents superpowers.",
title: 'TPMJS - Tool Package Manager for AI Agents',
description:
'The registry for AI tools. Discover, share, and integrate tools that give your agents superpowers.',
};
export default function RootLayout({
children,
children,
}: {
children: React.ReactNode;
children: React.ReactNode;
}): React.ReactElement {
return (
<html
lang="en"
suppressHydrationWarning
className={`${spaceGrotesk.variable} ${spaceMono.variable}`}
>
<body className={spaceGrotesk.className}>
<ThemeProvider
attribute="class"
defaultTheme="light"
enableSystem={true}
disableTransitionOnChange={false}
>
{children}
</ThemeProvider>
</body>
</html>
);
return (
<html
lang="en"
suppressHydrationWarning
className={`${spaceGrotesk.variable} ${spaceMono.variable}`}
>
<body className={spaceGrotesk.className}>
<ThemeProvider
attribute="class"
defaultTheme="light"
enableSystem={true}
disableTransitionOnChange={false}
>
{children}
</ThemeProvider>
</body>
</html>
);
}

390
apps/web/src/app/page.tsx
View file

@ -1,230 +1,176 @@
import { Badge } from "@tpmjs/ui/Badge/Badge";
import { Button } from "@tpmjs/ui/Button/Button";
import { Card, CardContent } from "@tpmjs/ui/Card/Card";
import { Container } from "@tpmjs/ui/Container/Container";
import { Header } from "@tpmjs/ui/Header/Header";
import { Icon } from "@tpmjs/ui/Icon/Icon";
import { Input } from "@tpmjs/ui/Input/Input";
import Link from "next/link";
import { ThemeToggle } from "../components/ThemeToggle";
import { categories, featuredTools, statistics } from "../data/homePageData";
import { Badge } from '@tpmjs/ui/Badge/Badge';
import { Button } from '@tpmjs/ui/Button/Button';
import { Card, CardContent } from '@tpmjs/ui/Card/Card';
import { Container } from '@tpmjs/ui/Container/Container';
import { Header } from '@tpmjs/ui/Header/Header';
import { Icon } from '@tpmjs/ui/Icon/Icon';
import { Input } from '@tpmjs/ui/Input/Input';
import Link from 'next/link';
import { ThemeToggle } from '../components/ThemeToggle';
import { categories, featuredTools, statistics } from '../data/homePageData';
export default function HomePage(): React.ReactElement {
return (
<div className="min-h-screen flex flex-col">
{/* Header */}
<Header
title={
<Link href="/" className="text-foreground hover:text-foreground">
TPMJS
</Link>
}
size="md"
sticky={true}
actions={
<div className="flex items-center gap-4">
<Link href="/playground">
<Button
variant="ghost"
size="sm"
className="text-foreground hover:text-foreground"
>
Playground
</Button>
</Link>
<Button
variant="ghost"
size="sm"
className="text-foreground hover:text-foreground"
>
Pro
</Button>
<Button
variant="ghost"
size="sm"
className="text-foreground hover:text-foreground"
>
Teams
</Button>
<Button
variant="ghost"
size="sm"
className="text-foreground hover:text-foreground"
>
Pricing
</Button>
<Button
variant="ghost"
size="sm"
className="text-foreground hover:text-foreground"
>
Documentation
</Button>
<Button variant="secondary" size="sm">
Sign In
</Button>
<Button size="sm">Sign Up</Button>
<ThemeToggle />
</div>
}
/>
return (
<div className="min-h-screen flex flex-col">
{/* Header */}
<Header
title={
<Link href="/" className="text-foreground hover:text-foreground">
TPMJS
</Link>
}
size="md"
sticky={true}
actions={
<div className="flex items-center gap-4">
<Link href="/playground">
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Playground
</Button>
</Link>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Pro
</Button>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Teams
</Button>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Pricing
</Button>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Documentation
</Button>
<Button variant="secondary" size="sm">
Sign In
</Button>
<Button size="sm">Sign Up</Button>
<ThemeToggle />
</div>
}
/>
<main className="flex-1">
{/* Hero Section */}
<section className="relative py-24 overflow-hidden dotted-grid-background">
<div className="absolute inset-0 bg-background/95" />
<Container size="xl" padding="lg">
<div className="max-w-3xl mx-auto text-center space-y-8 relative z-10">
<h1 className="text-5xl md:text-6xl font-bold tracking-tight">
Tool Registry for AI Agents
</h1>
<p className="text-xl text-foreground-secondary">
Discover, share, and integrate tools that give your agents
superpowers. The registry for AI tools.
</p>
<div className="flex gap-3 items-center max-w-2xl mx-auto">
<Input
size="lg"
placeholder="Search tools..."
className="flex-1"
/>
<Button size="lg" className="px-8">
Search
</Button>
</div>
</div>
</Container>
</section>
<main className="flex-1">
{/* Hero Section */}
<section className="relative py-24 overflow-hidden dotted-grid-background">
<div className="absolute inset-0 bg-background/95" />
<Container size="xl" padding="lg">
<div className="max-w-3xl mx-auto text-center space-y-8 relative z-10">
<h1 className="text-5xl md:text-6xl font-bold tracking-tight">
Tool Registry for AI Agents
</h1>
<p className="text-xl text-foreground-secondary">
Discover, share, and integrate tools that give your agents superpowers. The registry
for AI tools.
</p>
<div className="flex gap-3 items-center max-w-2xl mx-auto">
<Input size="lg" placeholder="Search tools..." className="flex-1" />
<Button size="lg" className="px-8">
Search
</Button>
</div>
</div>
</Container>
</section>
{/* Featured Tools Section */}
<section className="py-16 bg-surface blueprint-background">
<Container size="xl" padding="lg">
<div className="flex items-center justify-between mb-8">
<h2 className="text-3xl font-semibold">Featured Tools</h2>
<Button variant="ghost">View all tools →</Button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{featuredTools.map((tool) => (
<Card
key={tool.id}
className="hover:shadow-lg transition-shadow"
>
<CardContent className="p-6 space-y-4">
<div className="flex items-start gap-4">
<Icon
icon={tool.icon}
size="lg"
className="text-primary"
/>
<div className="flex-1 space-y-2">
<h3 className="text-lg font-semibold">{tool.name}</h3>
<p className="text-sm text-foreground-secondary">
{tool.description}
</p>
<div className="flex items-center gap-2">
<Badge variant={tool.categoryVariant} size="sm">
{tool.category}
</Badge>
<span className="text-xs text-foreground-tertiary">
{tool.weeklyUsage}
</span>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</Container>
</section>
{/* Featured Tools Section */}
<section className="py-16 bg-surface blueprint-background">
<Container size="xl" padding="lg">
<div className="flex items-center justify-between mb-8">
<h2 className="text-3xl font-semibold">Featured Tools</h2>
<Button variant="ghost">View all tools →</Button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{featuredTools.map((tool) => (
<Card key={tool.id} className="hover:shadow-lg transition-shadow">
<CardContent className="p-6 space-y-4">
<div className="flex items-start gap-4">
<Icon icon={tool.icon} size="lg" className="text-primary" />
<div className="flex-1 space-y-2">
<h3 className="text-lg font-semibold">{tool.name}</h3>
<p className="text-sm text-foreground-secondary">{tool.description}</p>
<div className="flex items-center gap-2">
<Badge variant={tool.categoryVariant} size="sm">
{tool.category}
</Badge>
<span className="text-xs text-foreground-tertiary">
{tool.weeklyUsage}
</span>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</Container>
</section>
{/* Categories Section */}
<section className="py-16">
<Container size="xl" padding="lg">
<h2 className="text-3xl font-semibold mb-8">Browse by Category</h2>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{categories.map((category) => (
<Card
key={category.id}
className="hover:shadow-lg transition-shadow cursor-pointer"
>
<CardContent className={`p-6 ${category.colorClass}`}>
<div className="space-y-3">
<Icon icon={category.icon} size="lg" />
<h3 className="font-semibold">{category.name}</h3>
<p className="text-sm opacity-90">
{category.toolCount} tools
</p>
</div>
</CardContent>
</Card>
))}
</div>
</Container>
</section>
{/* Categories Section */}
<section className="py-16">
<Container size="xl" padding="lg">
<h2 className="text-3xl font-semibold mb-8">Browse by Category</h2>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{categories.map((category) => (
<Card
key={category.id}
className="hover:shadow-lg transition-shadow cursor-pointer"
>
<CardContent className={`p-6 ${category.colorClass}`}>
<div className="space-y-3">
<Icon icon={category.icon} size="lg" />
<h3 className="font-semibold">{category.name}</h3>
<p className="text-sm opacity-90">{category.toolCount} tools</p>
</div>
</CardContent>
</Card>
))}
</div>
</Container>
</section>
{/* Statistics Section */}
<section className="py-16 bg-surface grid-background">
<Container size="xl" padding="lg">
<h2 className="text-3xl font-semibold mb-8 text-center">
Platform Statistics
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{statistics.map((stat) => (
<Card key={stat.label}>
<CardContent className="p-6 text-center space-y-3">
<Icon
icon={stat.icon}
size="lg"
className="mx-auto text-primary"
/>
<div className="text-4xl font-bold">{stat.value}</div>
<div className="text-sm font-medium">{stat.label}</div>
{stat.subtext && (
<div className="text-xs text-foreground-tertiary">
{stat.subtext}
</div>
)}
</CardContent>
</Card>
))}
</div>
</Container>
</section>
</main>
{/* Statistics Section */}
<section className="py-16 bg-surface grid-background">
<Container size="xl" padding="lg">
<h2 className="text-3xl font-semibold mb-8 text-center">Platform Statistics</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{statistics.map((stat) => (
<Card key={stat.label}>
<CardContent className="p-6 text-center space-y-3">
<Icon icon={stat.icon} size="lg" className="mx-auto text-primary" />
<div className="text-4xl font-bold">{stat.value}</div>
<div className="text-sm font-medium">{stat.label}</div>
{stat.subtext && (
<div className="text-xs text-foreground-tertiary">{stat.subtext}</div>
)}
</CardContent>
</Card>
))}
</div>
</Container>
</section>
</main>
{/* Footer */}
<footer className="py-8 border-t border-border bg-surface">
<Container size="xl" padding="lg">
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-sm text-foreground-secondary">
© 2025 TPMJS. All rights reserved.
</p>
<div className="flex items-center gap-4 text-sm">
<button
type="button"
className="text-foreground-secondary hover:text-foreground"
>
Privacy
</button>
<span className="text-border">·</span>
<button
type="button"
className="text-foreground-secondary hover:text-foreground"
>
Terms
</button>
<span className="text-border">·</span>
<button
type="button"
className="text-foreground-secondary hover:text-foreground"
>
Contact
</button>
</div>
</div>
</Container>
</footer>
</div>
);
{/* Footer */}
<footer className="py-8 border-t border-border bg-surface">
<Container size="xl" padding="lg">
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-sm text-foreground-secondary">© 2025 TPMJS. All rights reserved.</p>
<div className="flex items-center gap-4 text-sm">
<button type="button" className="text-foreground-secondary hover:text-foreground">
Privacy
</button>
<span className="text-border">·</span>
<button type="button" className="text-foreground-secondary hover:text-foreground">
Terms
</button>
<span className="text-border">·</span>
<button type="button" className="text-foreground-secondary hover:text-foreground">
Contact
</button>
</div>
</div>
</Container>
</footer>
</div>
);
}

950
apps/web/src/app/playground/page.tsx
View file

@ -1,433 +1,383 @@
"use client";
'use client';
import { Badge } from "@tpmjs/ui/Badge/Badge";
import { Button } from "@tpmjs/ui/Button/Button";
import { Badge } from '@tpmjs/ui/Badge/Badge';
import { Button } from '@tpmjs/ui/Button/Button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@tpmjs/ui/Card/Card";
import { CodeBlock } from "@tpmjs/ui/CodeBlock/CodeBlock";
import { Container } from "@tpmjs/ui/Container/Container";
import { Header } from "@tpmjs/ui/Header/Header";
import { Icon } from "@tpmjs/ui/Icon/Icon";
import { Input } from "@tpmjs/ui/Input/Input";
import { Label } from "@tpmjs/ui/Label/Label";
import { ProgressBar } from "@tpmjs/ui/ProgressBar/ProgressBar";
import { Tabs } from "@tpmjs/ui/Tabs/Tabs";
import Link from "next/link";
import { useState } from "react";
import { ThemeToggle } from "../../components/ThemeToggle";
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@tpmjs/ui/Card/Card';
import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock';
import { Container } from '@tpmjs/ui/Container/Container';
import { Header } from '@tpmjs/ui/Header/Header';
import { Icon } from '@tpmjs/ui/Icon/Icon';
import { Input } from '@tpmjs/ui/Input/Input';
import { Label } from '@tpmjs/ui/Label/Label';
import { ProgressBar } from '@tpmjs/ui/ProgressBar/ProgressBar';
import { Tabs } from '@tpmjs/ui/Tabs/Tabs';
import Link from 'next/link';
import { useState } from 'react';
import { ThemeToggle } from '../../components/ThemeToggle';
export default function PlaygroundPage() {
const [activeTab, setActiveTab] = useState("all");
const [progress, setProgress] = useState(65);
const [activeTab, setActiveTab] = useState('all');
const [progress, setProgress] = useState(65);
return (
<div className="min-h-screen flex flex-col dotted-grid-background">
{/* Header */}
<Header
title={
<Link href="/" className="text-foreground hover:text-foreground">
TPMJS Playground
</Link>
}
size="md"
sticky={true}
actions={
<div className="flex items-center gap-4">
<Link href="/">
<Button
variant="ghost"
size="sm"
className="text-foreground hover:text-foreground"
>
Home
</Button>
</Link>
<ThemeToggle />
</div>
}
/>
return (
<div className="min-h-screen flex flex-col dotted-grid-background">
{/* Header */}
<Header
title={
<Link href="/" className="text-foreground hover:text-foreground">
TPMJS Playground
</Link>
}
size="md"
sticky={true}
actions={
<div className="flex items-center gap-4">
<Link href="/">
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Home
</Button>
</Link>
<ThemeToggle />
</div>
}
/>
<main className="flex-1 py-12 relative">
<div className="absolute inset-0 bg-background/95 -z-10" />
<Container size="xl" padding="lg">
<div className="space-y-16">
{/* Page Title */}
<div className="text-center space-y-4">
<h1 className="text-4xl font-bold">Component Playground</h1>
<p className="text-lg text-foreground-secondary">
Explore and test all TPMJS UI components in one place
</p>
</div>
<main className="flex-1 py-12 relative">
<div className="absolute inset-0 bg-background/95 -z-10" />
<Container size="xl" padding="lg">
<div className="space-y-16">
{/* Page Title */}
<div className="text-center space-y-4">
<h1 className="text-4xl font-bold">Component Playground</h1>
<p className="text-lg text-foreground-secondary">
Explore and test all TPMJS UI components in one place
</p>
</div>
{/* Buttons Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Buttons
</h2>
<div className="space-y-8">
{/* Button Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="flex flex-wrap gap-4">
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>
</div>
{/* Buttons Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Buttons</h2>
<div className="space-y-8">
{/* Button Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="flex flex-wrap gap-4">
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>
</div>
{/* Button Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="flex flex-wrap items-center gap-4">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>
</div>
{/* Button Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="flex flex-wrap items-center gap-4">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>
</div>
{/* Button States */}
<div className="space-y-4">
<h3 className="text-xl font-medium">States</h3>
<div className="flex flex-wrap gap-4">
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
</div>
</div>
</div>
</section>
{/* Button States */}
<div className="space-y-4">
<h3 className="text-xl font-medium">States</h3>
<div className="flex flex-wrap gap-4">
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
</div>
</div>
</div>
</section>
{/* Badges Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Badges
</h2>
<div className="space-y-8">
{/* Badge Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="flex flex-wrap gap-4">
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
</div>
</div>
{/* Badges Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Badges</h2>
<div className="space-y-8">
{/* Badge Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="flex flex-wrap gap-4">
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
</div>
</div>
{/* Badge Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="flex flex-wrap items-center gap-4">
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
</div>
</div>
</div>
</section>
{/* Badge Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="flex flex-wrap items-center gap-4">
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
</div>
</div>
</div>
</section>
{/* Icons Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Icons
</h2>
<div className="space-y-8">
{/* Icon Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="flex flex-wrap items-end gap-6">
<div className="flex flex-col items-center gap-2">
<Icon icon="check" size="sm" />
<span className="text-xs">Small</span>
</div>
<div className="flex flex-col items-center gap-2">
<Icon icon="check" size="md" />
<span className="text-xs">Medium</span>
</div>
<div className="flex flex-col items-center gap-2">
<Icon icon="check" size="lg" />
<span className="text-xs">Large</span>
</div>
</div>
</div>
{/* Icons Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Icons</h2>
<div className="space-y-8">
{/* Icon Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="flex flex-wrap items-end gap-6">
<div className="flex flex-col items-center gap-2">
<Icon icon="check" size="sm" />
<span className="text-xs">Small</span>
</div>
<div className="flex flex-col items-center gap-2">
<Icon icon="check" size="md" />
<span className="text-xs">Medium</span>
</div>
<div className="flex flex-col items-center gap-2">
<Icon icon="check" size="lg" />
<span className="text-xs">Large</span>
</div>
</div>
</div>
{/* Icon Gallery */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Available Icons</h3>
<div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6">
{(
[
"check",
"x",
"chevronDown",
"copy",
"externalLink",
"github",
"sun",
"moon",
] as const
).map((icon) => (
<div
key={icon}
className="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-surface transition-colors"
>
<Icon icon={icon} size="lg" />
<span className="text-xs text-center">{icon}</span>
</div>
))}
</div>
</div>
</div>
</section>
{/* Icon Gallery */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Available Icons</h3>
<div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6">
{(
[
'check',
'x',
'chevronDown',
'copy',
'externalLink',
'github',
'sun',
'moon',
] as const
).map((icon) => (
<div
key={icon}
className="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-surface transition-colors"
>
<Icon icon={icon} size="lg" />
<span className="text-xs text-center">{icon}</span>
</div>
))}
</div>
</div>
</div>
</section>
{/* Cards Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Cards
</h2>
<div className="space-y-8">
{/* Card Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card variant="default">
<CardHeader>
<CardTitle>Default Card</CardTitle>
<CardDescription>
This is the default card style
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">
Cards are flexible containers for content.
</p>
</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
{/* Cards Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Cards</h2>
<div className="space-y-8">
{/* Card Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card variant="default">
<CardHeader>
<CardTitle>Default Card</CardTitle>
<CardDescription>This is the default card style</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">Cards are flexible containers for content.</p>
</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
<Card variant="elevated">
<CardHeader>
<CardTitle>Elevated Card</CardTitle>
<CardDescription>
This card has a shadow elevation
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">
Perfect for highlighting important content.
</p>
</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
<Card variant="elevated">
<CardHeader>
<CardTitle>Elevated Card</CardTitle>
<CardDescription>This card has a shadow elevation</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">Perfect for highlighting important content.</p>
</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
<Card variant="outline">
<CardHeader>
<CardTitle>Outline Card</CardTitle>
<CardDescription>
This card has an outline border
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">
Great for subtle content separation.
</p>
</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
</div>
</div>
</div>
</section>
<Card variant="outline">
<CardHeader>
<CardTitle>Outline Card</CardTitle>
<CardDescription>This card has an outline border</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">Great for subtle content separation.</p>
</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
</div>
</div>
</div>
</section>
{/* Inputs Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Inputs
</h2>
<div className="space-y-8">
{/* Input Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="space-y-4 max-w-md">
<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />
<Input size="lg" placeholder="Large input" />
</div>
</div>
{/* Inputs Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Inputs</h2>
<div className="space-y-8">
{/* Input Sizes */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Sizes</h3>
<div className="space-y-4 max-w-md">
<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />
<Input size="lg" placeholder="Large input" />
</div>
</div>
{/* Input States */}
<div className="space-y-4">
<h3 className="text-xl font-medium">States</h3>
<div className="space-y-4 max-w-md">
<div className="space-y-2">
<Label>Default Input</Label>
<Input placeholder="Enter text..." />
</div>
<div className="space-y-2">
<Label>Error State</Label>
<Input state="error" placeholder="Error input" />
</div>
<div className="space-y-2">
<Label>Success State</Label>
<Input state="success" placeholder="Success input" />
</div>
<div className="space-y-2">
<Label>Disabled Input</Label>
<Input disabled placeholder="Disabled input" />
</div>
</div>
</div>
</div>
</section>
{/* Input States */}
<div className="space-y-4">
<h3 className="text-xl font-medium">States</h3>
<div className="space-y-4 max-w-md">
<div className="space-y-2">
<Label>Default Input</Label>
<Input placeholder="Enter text..." />
</div>
<div className="space-y-2">
<Label>Error State</Label>
<Input state="error" placeholder="Error input" />
</div>
<div className="space-y-2">
<Label>Success State</Label>
<Input state="success" placeholder="Success input" />
</div>
<div className="space-y-2">
<Label>Disabled Input</Label>
<Input disabled placeholder="Disabled input" />
</div>
</div>
</div>
</div>
</section>
{/* Progress Bars Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Progress Bars
</h2>
<div className="space-y-8">
{/* Progress Bar Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="space-y-6 max-w-xl">
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Primary</span>
<span>{progress}%</span>
</div>
<ProgressBar value={progress} variant="primary" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Success</span>
<span>100%</span>
</div>
<ProgressBar value={100} variant="success" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Warning</span>
<span>45%</span>
</div>
<ProgressBar value={45} variant="warning" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Danger</span>
<span>20%</span>
</div>
<ProgressBar value={20} variant="danger" />
</div>
</div>
</div>
{/* Progress Bars Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Progress Bars</h2>
<div className="space-y-8">
{/* Progress Bar Variants */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Variants</h3>
<div className="space-y-6 max-w-xl">
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Primary</span>
<span>{progress}%</span>
</div>
<ProgressBar value={progress} variant="primary" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Success</span>
<span>100%</span>
</div>
<ProgressBar value={100} variant="success" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Warning</span>
<span>45%</span>
</div>
<ProgressBar value={45} variant="warning" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Danger</span>
<span>20%</span>
</div>
<ProgressBar value={20} variant="danger" />
</div>
</div>
</div>
{/* Interactive Progress */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Interactive</h3>
<Card className="max-w-xl">
<CardContent className="p-6 space-y-4">
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">
Adjust Progress
</span>
<span className="text-sm text-foreground-secondary">
{progress}%
</span>
</div>
<ProgressBar value={progress} />
</div>
<div className="flex gap-2">
<Button
size="sm"
onClick={() =>
setProgress(Math.max(0, progress - 10))
}
>
-10%
</Button>
<Button
size="sm"
onClick={() =>
setProgress(Math.min(100, progress + 10))
}
>
+10%
</Button>
<Button
size="sm"
variant="outline"
onClick={() => setProgress(0)}
>
Reset
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Interactive Progress */}
<div className="space-y-4">
<h3 className="text-xl font-medium">Interactive</h3>
<Card className="max-w-xl">
<CardContent className="p-6 space-y-4">
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Adjust Progress</span>
<span className="text-sm text-foreground-secondary">{progress}%</span>
</div>
<ProgressBar value={progress} />
</div>
<div className="flex gap-2">
<Button size="sm" onClick={() => setProgress(Math.max(0, progress - 10))}>
-10%
</Button>
<Button size="sm" onClick={() => setProgress(Math.min(100, progress + 10))}>
+10%
</Button>
<Button size="sm" variant="outline" onClick={() => setProgress(0)}>
Reset
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Tabs Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Tabs
</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Interactive Tabs</h3>
<Card>
<CardContent className="p-6">
<Tabs
tabs={[
{ id: "all", label: "All Tools", count: 1234 },
{ id: "featured", label: "Featured", count: 42 },
{ id: "popular", label: "Popular", count: 156 },
{ id: "recent", label: "Recent" },
]}
activeTab={activeTab}
onTabChange={setActiveTab}
/>
<div className="mt-6 p-4 bg-surface rounded-lg">
<p className="text-sm text-foreground-secondary">
Active tab: <strong>{activeTab}</strong>
</p>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Tabs Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Tabs</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Interactive Tabs</h3>
<Card>
<CardContent className="p-6">
<Tabs
tabs={[
{ id: 'all', label: 'All Tools', count: 1234 },
{ id: 'featured', label: 'Featured', count: 42 },
{ id: 'popular', label: 'Popular', count: 156 },
{ id: 'recent', label: 'Recent' },
]}
activeTab={activeTab}
onTabChange={setActiveTab}
/>
<div className="mt-6 p-4 bg-surface rounded-lg">
<p className="text-sm text-foreground-secondary">
Active tab: <strong>{activeTab}</strong>
</p>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Code Block Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Code Block
</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Example Code</h3>
<CodeBlock
language="typescript"
code={`import { Button } from "@tpmjs/ui/Button/Button";
{/* Code Block Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Code Block</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Example Code</h3>
<CodeBlock
language="typescript"
code={`import { Button } from "@tpmjs/ui/Button/Button";
export default function Example() {
return (
@ -436,108 +386,100 @@ export default function Example() {
</Button>
);
}`}
/>
</div>
/>
</div>
<div className="space-y-4">
<h3 className="text-xl font-medium">JSON Example</h3>
<CodeBlock
language="json"
code={`{
<div className="space-y-4">
<h3 className="text-xl font-medium">JSON Example</h3>
<CodeBlock
language="json"
code={`{
"name": "@tpmjs/ui",
"version": "0.1.3",
"type": "module"
}`}
/>
</div>
</div>
</section>
/>
</div>
</div>
</section>
{/* Containers Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Containers
</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Container Sizes</h3>
<div className="space-y-6">
<Container size="sm" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;sm&quot;</code>
</CardContent>
</Card>
</Container>
<Container size="md" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;md&quot;</code>
</CardContent>
</Card>
</Container>
<Container size="lg" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;lg&quot;</code>
</CardContent>
</Card>
</Container>
<Container size="xl" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;xl&quot;</code>
</CardContent>
</Card>
</Container>
</div>
</div>
</div>
</section>
{/* Containers Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Containers</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Container Sizes</h3>
<div className="space-y-6">
<Container size="sm" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;sm&quot;</code>
</CardContent>
</Card>
</Container>
<Container size="md" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;md&quot;</code>
</CardContent>
</Card>
</Container>
<Container size="lg" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;lg&quot;</code>
</CardContent>
</Card>
</Container>
<Container size="xl" padding="md">
<Card>
<CardContent className="p-4 text-center">
<code className="text-sm">size=&quot;xl&quot;</code>
</CardContent>
</Card>
</Container>
</div>
</div>
</div>
</section>
{/* Labels Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">
Labels
</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Form Labels</h3>
<div className="space-y-4 max-w-md">
<div className="space-y-2">
<Label htmlFor="email">Email Address</Label>
<Input
id="email"
type="email"
placeholder="you@example.com"
/>
</div>
<div className="space-y-2">
<Label htmlFor="password" required>
Password
</Label>
<Input id="password" type="password" />
</div>
<div className="space-y-2">
<Label htmlFor="bio">Bio</Label>
<Input id="bio" placeholder="Tell us about yourself" />
</div>
</div>
</div>
</div>
</section>
</div>
</Container>
</main>
{/* Labels Section */}
<section className="space-y-6">
<h2 className="text-3xl font-semibold border-b border-border pb-2">Labels</h2>
<div className="space-y-8">
<div className="space-y-4">
<h3 className="text-xl font-medium">Form Labels</h3>
<div className="space-y-4 max-w-md">
<div className="space-y-2">
<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>
<div className="space-y-2">
<Label htmlFor="password" required>
Password
</Label>
<Input id="password" type="password" />
</div>
<div className="space-y-2">
<Label htmlFor="bio">Bio</Label>
<Input id="bio" placeholder="Tell us about yourself" />
</div>
</div>
</div>
</div>
</section>
</div>
</Container>
</main>
{/* Footer */}
<footer className="py-8 border-t border-border bg-surface mt-16">
<Container size="xl" padding="lg">
<p className="text-sm text-foreground-secondary text-center">
TPMJS Component Playground
</p>
</Container>
</footer>
</div>
);
{/* Footer */}
<footer className="py-8 border-t border-border bg-surface mt-16">
<Container size="xl" padding="lg">
<p className="text-sm text-foreground-secondary text-center">
TPMJS Component Playground
</p>
</Container>
</footer>
</div>
);
}

516
apps/web/src/app/tool/tool-search/page.tsx
View file

@ -1,24 +1,24 @@
"use client";
'use client';
import { Badge } from "@tpmjs/ui/Badge/Badge";
import { Button } from "@tpmjs/ui/Button/Button";
import { Badge } from '@tpmjs/ui/Badge/Badge';
import { Button } from '@tpmjs/ui/Button/Button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@tpmjs/ui/Card/Card";
import { CodeBlock } from "@tpmjs/ui/CodeBlock/CodeBlock";
import { Container } from "@tpmjs/ui/Container/Container";
import { Header } from "@tpmjs/ui/Header/Header";
import { Icon } from "@tpmjs/ui/Icon/Icon";
import { Input } from "@tpmjs/ui/Input/Input";
import { ProgressBar } from "@tpmjs/ui/ProgressBar/ProgressBar";
import { Tabs } from "@tpmjs/ui/Tabs/Tabs";
import { createElement, useState } from "react";
import { getFeaturedTools, mockTools } from "../../../data/toolData";
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@tpmjs/ui/Card/Card';
import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock';
import { Container } from '@tpmjs/ui/Container/Container';
import { Header } from '@tpmjs/ui/Header/Header';
import { Icon } from '@tpmjs/ui/Icon/Icon';
import { Input } from '@tpmjs/ui/Input/Input';
import { ProgressBar } from '@tpmjs/ui/ProgressBar/ProgressBar';
import { Tabs } from '@tpmjs/ui/Tabs/Tabs';
import { createElement, useState } from 'react';
import { getFeaturedTools, mockTools } from '../../../data/toolData';
/**
* Tool Registry Search Page
@ -27,278 +27,228 @@ import { getFeaturedTools, mockTools } from "../../../data/toolData";
* Built with .ts-only React using createElement.
*/
export default function ToolSearchPage(): React.ReactElement {
const [activeTab, setActiveTab] = useState("all");
const [searchQuery, setSearchQuery] = useState("");
const [activeTab, setActiveTab] = useState('all');
const [searchQuery, setSearchQuery] = useState('');
// Get tools based on active tab
const displayedTools =
activeTab === "featured" ? getFeaturedTools() : mockTools;
// Get tools based on active tab
const displayedTools = activeTab === 'featured' ? getFeaturedTools() : mockTools;
// Filter by search query
const filteredTools = searchQuery
? displayedTools.filter(
(tool) =>
tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
tool.description.toLowerCase().includes(searchQuery.toLowerCase()),
)
: displayedTools;
// Filter by search query
const filteredTools = searchQuery
? displayedTools.filter(
(tool) =>
tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
tool.description.toLowerCase().includes(searchQuery.toLowerCase())
)
: displayedTools;
return createElement("div", { className: "min-h-screen bg-background" }, [
// Header
createElement(Header, {
key: "header",
title: createElement("div", { className: "flex items-center gap-2" }, [
createElement(
"span",
{ key: "title", className: "text-2xl font-bold" },
"TPMJS",
),
createElement(
Badge,
{ key: "badge", variant: "outline", size: "sm" },
"Beta",
),
]),
actions: createElement("div", { className: "flex items-center gap-3" }, [
createElement(
Button,
{ key: "docs", variant: "ghost", size: "sm" },
"Docs",
),
createElement(
"a",
{
key: "github",
href: "https://github.com/tpmjs/tpmjs",
target: "_blank",
rel: "noopener noreferrer",
className: "text-foreground-secondary hover:text-foreground transition-colors",
},
createElement(Icon, { icon: "github", size: "md" }),
),
createElement(
Button,
{ key: "publish", variant: "default", size: "sm" },
"Publish Tool",
),
]),
sticky: true,
size: "md",
}),
return createElement('div', { className: 'min-h-screen bg-background' }, [
// Header
createElement(Header, {
key: 'header',
title: createElement('div', { className: 'flex items-center gap-2' }, [
createElement('span', { key: 'title', className: 'text-2xl font-bold' }, 'TPMJS'),
createElement(Badge, { key: 'badge', variant: 'outline', size: 'sm' }, 'Beta'),
]),
actions: createElement('div', { className: 'flex items-center gap-3' }, [
createElement(Button, { key: 'docs', variant: 'ghost', size: 'sm' }, 'Docs'),
createElement(
'a',
{
key: 'github',
href: 'https://github.com/tpmjs/tpmjs',
target: '_blank',
rel: 'noopener noreferrer',
className: 'text-foreground-secondary hover:text-foreground transition-colors',
},
createElement(Icon, { icon: 'github', size: 'md' })
),
createElement(Button, { key: 'publish', variant: 'default', size: 'sm' }, 'Publish Tool'),
]),
sticky: true,
size: 'md',
}),
// Main content
createElement(
Container,
{ key: "container", size: "xl", padding: "md", className: "py-8" },
[
// Page header
createElement(
"div",
{ key: "page-header", className: "space-y-4 mb-8" },
[
createElement(
"h1",
{ key: "title", className: "text-4xl font-bold text-foreground" },
"Tool Registry",
),
createElement(
"p",
{ key: "description", className: "text-lg text-foreground-secondary" },
"Discover, share, and integrate tools that give your AI agents superpowers.",
),
],
),
// Main content
createElement(Container, { key: 'container', size: 'xl', padding: 'md', className: 'py-8' }, [
// Page header
createElement('div', { key: 'page-header', className: 'space-y-4 mb-8' }, [
createElement(
'h1',
{ key: 'title', className: 'text-4xl font-bold text-foreground' },
'Tool Registry'
),
createElement(
'p',
{ key: 'description', className: 'text-lg text-foreground-secondary' },
'Discover, share, and integrate tools that give your AI agents superpowers.'
),
]),
// Search input
createElement(Input, {
key: "search",
placeholder: "Search tools...",
value: searchQuery,
onChange: (e) => setSearchQuery(e.target.value),
className: "mb-6",
}),
// Search input
createElement(Input, {
key: 'search',
placeholder: 'Search tools...',
value: searchQuery,
onChange: (e) => setSearchQuery(e.target.value),
className: 'mb-6',
}),
// Tabs
createElement(Tabs, {
key: "tabs",
tabs: [
{ id: "all", label: "All Tools", count: mockTools.length },
{
id: "featured",
label: "Featured",
count: getFeaturedTools().length,
},
],
activeTab,
onTabChange: setActiveTab,
size: "md",
className: "mb-8",
}),
// Tabs
createElement(Tabs, {
key: 'tabs',
tabs: [
{ id: 'all', label: 'All Tools', count: mockTools.length },
{
id: 'featured',
label: 'Featured',
count: getFeaturedTools().length,
},
],
activeTab,
onTabChange: setActiveTab,
size: 'md',
className: 'mb-8',
}),
// Tool grid
createElement(
"div",
{
key: "tools-grid",
className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
},
filteredTools.length > 0
? filteredTools.map((tool) =>
createElement(
Card,
{ key: tool.id, className: "flex flex-col" },
[
createElement(CardHeader, { key: "header" }, [
createElement(
"div",
{
key: "title-row",
className: "flex items-start justify-between gap-2",
},
[
createElement(CardTitle, { key: "title" }, tool.name),
createElement(
"a",
{
key: "link",
href: tool.repository,
target: "_blank",
rel: "noopener noreferrer",
className:
"text-foreground-secondary hover:text-foreground transition-colors",
},
createElement(Icon, {
icon: "externalLink",
size: "sm",
}),
),
],
),
createElement(
CardDescription,
{ key: "description" },
tool.description,
),
]),
createElement(
CardContent,
{ key: "content", className: "flex-1 space-y-4" },
[
// Category badge
createElement(
"div",
{
key: "category",
className: "flex items-center gap-2",
},
[
createElement(
Badge,
{
key: "badge",
variant: "secondary",
size: "sm",
},
tool.category,
),
createElement(
"span",
{
key: "version",
className: "text-xs text-foreground-tertiary",
},
`v${tool.version}`,
),
],
),
// Tool grid
createElement(
'div',
{
key: 'tools-grid',
className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6',
},
filteredTools.length > 0
? filteredTools.map((tool) =>
createElement(Card, { key: tool.id, className: 'flex flex-col' }, [
createElement(CardHeader, { key: 'header' }, [
createElement(
'div',
{
key: 'title-row',
className: 'flex items-start justify-between gap-2',
},
[
createElement(CardTitle, { key: 'title' }, tool.name),
createElement(
'a',
{
key: 'link',
href: tool.repository,
target: '_blank',
rel: 'noopener noreferrer',
className:
'text-foreground-secondary hover:text-foreground transition-colors',
},
createElement(Icon, {
icon: 'externalLink',
size: 'sm',
})
),
]
),
createElement(CardDescription, { key: 'description' }, tool.description),
]),
createElement(CardContent, { key: 'content', className: 'flex-1 space-y-4' }, [
// Category badge
createElement(
'div',
{
key: 'category',
className: 'flex items-center gap-2',
},
[
createElement(
Badge,
{
key: 'badge',
variant: 'secondary',
size: 'sm',
},
tool.category
),
createElement(
'span',
{
key: 'version',
className: 'text-xs text-foreground-tertiary',
},
`v${tool.version}`
),
]
),
// Tags
createElement(
"div",
{ key: "tags", className: "flex flex-wrap gap-2" },
tool.tags.map((tag) =>
createElement(
Badge,
{ key: tag, variant: "outline", size: "sm" },
tag,
),
),
),
// Tags
createElement(
'div',
{ key: 'tags', className: 'flex flex-wrap gap-2' },
tool.tags.map((tag) =>
createElement(Badge, { key: tag, variant: 'outline', size: 'sm' }, tag)
)
),
// Usage progress
createElement(
"div",
{ key: "usage", className: "space-y-2" },
[
createElement(
"div",
{
key: "label",
className:
"flex items-center justify-between text-sm",
},
[
createElement(
"span",
{ key: "text", className: "text-foreground-secondary" },
"Usage",
),
createElement(
"span",
{ key: "stars", className: "text-foreground-tertiary" },
`⭐ ${tool.stars.toLocaleString()}`,
),
],
),
createElement(ProgressBar, {
key: "progress",
value: tool.usage,
variant:
tool.usage >= 70
? "success"
: tool.usage >= 50
? "primary"
: "warning",
size: "sm",
showLabel: true,
}),
],
),
// Usage progress
createElement('div', { key: 'usage', className: 'space-y-2' }, [
createElement(
'div',
{
key: 'label',
className: 'flex items-center justify-between text-sm',
},
[
createElement(
'span',
{ key: 'text', className: 'text-foreground-secondary' },
'Usage'
),
createElement(
'span',
{ key: 'stars', className: 'text-foreground-tertiary' },
`⭐ ${tool.stars.toLocaleString()}`
),
]
),
createElement(ProgressBar, {
key: 'progress',
value: tool.usage,
variant:
tool.usage >= 70 ? 'success' : tool.usage >= 50 ? 'primary' : 'warning',
size: 'sm',
showLabel: true,
}),
]),
// Install command
createElement(CodeBlock, {
key: "install",
code: tool.installCommand,
language: "bash",
size: "sm",
showCopy: true,
}),
],
),
createElement(
CardFooter,
{ key: "footer" },
createElement(
Button,
{ variant: "outline", size: "sm", className: "w-full" },
"View Details",
),
),
],
),
)
: [
createElement(
"div",
{
key: "no-results",
className: "col-span-full text-center py-12 text-foreground-tertiary",
},
`No tools found matching "${searchQuery}"`,
),
],
),
],
),
]);
// Install command
createElement(CodeBlock, {
key: 'install',
code: tool.installCommand,
language: 'bash',
size: 'sm',
showCopy: true,
}),
]),
createElement(
CardFooter,
{ key: 'footer' },
createElement(
Button,
{ variant: 'outline', size: 'sm', className: 'w-full' },
'View Details'
)
),
])
)
: [
createElement(
'div',
{
key: 'no-results',
className: 'col-span-full text-center py-12 text-foreground-tertiary',
},
`No tools found matching "${searchQuery}"`
),
]
),
]),
]);
}

74
apps/web/src/components/ThemeToggle.tsx
View file

@ -1,45 +1,45 @@
"use client";
'use client';
import { Button } from "@tpmjs/ui/Button/Button";
import { Icon } from "@tpmjs/ui/Icon/Icon";
import { useTheme } from "next-themes";
import { createElement, useEffect, useState } from "react";
import { Button } from '@tpmjs/ui/Button/Button';
import { Icon } from '@tpmjs/ui/Icon/Icon';
import { useTheme } from 'next-themes';
import { createElement, useEffect, useState } from 'react';
export function ThemeToggle(): React.ReactElement {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// useEffect only runs on the client, so we can safely show the UI
useEffect(() => {
setMounted(true);
}, []);
// useEffect only runs on the client, so we can safely show the UI
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
// Return a placeholder with the same dimensions to avoid layout shift
return createElement(Button, {
variant: "ghost",
size: "sm",
className: "w-9 h-9 p-0",
"aria-label": "Toggle theme",
});
}
if (!mounted) {
// Return a placeholder with the same dimensions to avoid layout shift
return createElement(Button, {
variant: 'ghost',
size: 'sm',
className: 'w-9 h-9 p-0',
'aria-label': 'Toggle theme',
});
}
const isDark = theme === "dark";
const isDark = theme === 'dark';
return createElement(
Button,
{
variant: "ghost",
size: "sm",
className: "w-9 h-9 p-0",
onClick: () => setTheme(isDark ? "light" : "dark"),
"aria-label": `Switch to ${isDark ? "light" : "dark"} mode`,
title: `Switch to ${isDark ? "light" : "dark"} mode`,
},
createElement(Icon, {
icon: isDark ? "sun" : "moon",
size: "md",
className: "transition-transform duration-300",
}),
);
return createElement(
Button,
{
variant: 'ghost',
size: 'sm',
className: 'w-9 h-9 p-0',
onClick: () => setTheme(isDark ? 'light' : 'dark'),
'aria-label': `Switch to ${isDark ? 'light' : 'dark'} mode`,
title: `Switch to ${isDark ? 'light' : 'dark'} mode`,
},
createElement(Icon, {
icon: isDark ? 'sun' : 'moon',
size: 'md',
className: 'transition-transform duration-300',
})
);
}

13
apps/web/src/components/providers/ThemeProvider.tsx
View file

@ -1,11 +1,8 @@
"use client";
'use client';
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ComponentProps, createElement } from "react";
import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { type ComponentProps, createElement } from 'react';
export function ThemeProvider({
children,
...props
}: ComponentProps<typeof NextThemesProvider>) {
return createElement(NextThemesProvider, props, children);
export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {
return createElement(NextThemesProvider, props, children);
}

416
apps/web/src/data/homePageData.ts
View file

@ -1,230 +1,222 @@
import type { IconName } from "@tpmjs/ui/Icon/Icon";
import type { IconName } from '@tpmjs/ui/Icon/Icon';
export interface ToolCard {
id: string;
name: string;
icon: IconName;
description: string;
category: string;
categoryVariant:
| "default"
| "secondary"
| "outline"
| "success"
| "error"
| "warning"
| "info";
weeklyUsage: string;
href: string;
id: string;
name: string;
icon: IconName;
description: string;
category: string;
categoryVariant: 'default' | 'secondary' | 'outline' | 'success' | 'error' | 'warning' | 'info';
weeklyUsage: string;
href: string;
}
export interface Category {
id: string;
name: string;
icon: IconName;
colorClass: string;
toolCount: number;
href: string;
id: string;
name: string;
icon: IconName;
colorClass: string;
toolCount: number;
href: string;
}
export interface Statistic {
icon: IconName;
value: string;
label: string;
subtext?: string;
icon: IconName;
value: string;
label: string;
subtext?: string;
}
export const featuredTools: ToolCard[] = [
{
id: "tool-search",
name: "tool-search",
icon: "check",
description:
"Meta-tool that lets AI agents discover and load tools on-demand using semantic search.",
category: "Meta-Tools",
categoryVariant: "warning",
weeklyUsage: "847K/week",
href: "/tool/tool-search",
},
{
id: "web-scraper",
name: "web-scraper",
icon: "externalLink",
description:
"Extract structured data from any website with automatic schema detection and pagination support.",
category: "Web & APIs",
categoryVariant: "info",
weeklyUsage: "524K/week",
href: "/tool/web-scraper",
},
{
id: "github-manager",
name: "github-manager",
icon: "github",
description:
"Manage GitHub repositories, issues, pull requests, and workflows programmatically.",
category: "Code & Git",
categoryVariant: "default",
weeklyUsage: "392K/week",
href: "/tool/github-manager",
},
{
id: "sql-query",
name: "sql-query",
icon: "copy",
description:
"Execute SQL queries across PostgreSQL, MySQL, and SQLite databases with connection pooling.",
category: "Databases",
categoryVariant: "success",
weeklyUsage: "287K/week",
href: "/tool/sql-query",
},
{
id: "pdf-parser",
name: "pdf-parser",
icon: "copy",
description:
"Extract text, tables, and metadata from PDF documents with OCR support for scanned pages.",
category: "Documents",
categoryVariant: "outline",
weeklyUsage: "156K/week",
href: "/tool/pdf-parser",
},
{
id: "email-sender",
name: "email-sender",
icon: "check",
description:
"Send transactional emails with templates, attachments, and delivery tracking.",
category: "Email",
categoryVariant: "secondary",
weeklyUsage: "203K/week",
href: "/tool/email-sender",
},
{
id: 'tool-search',
name: 'tool-search',
icon: 'check',
description:
'Meta-tool that lets AI agents discover and load tools on-demand using semantic search.',
category: 'Meta-Tools',
categoryVariant: 'warning',
weeklyUsage: '847K/week',
href: '/tool/tool-search',
},
{
id: 'web-scraper',
name: 'web-scraper',
icon: 'externalLink',
description:
'Extract structured data from any website with automatic schema detection and pagination support.',
category: 'Web & APIs',
categoryVariant: 'info',
weeklyUsage: '524K/week',
href: '/tool/web-scraper',
},
{
id: 'github-manager',
name: 'github-manager',
icon: 'github',
description:
'Manage GitHub repositories, issues, pull requests, and workflows programmatically.',
category: 'Code & Git',
categoryVariant: 'default',
weeklyUsage: '392K/week',
href: '/tool/github-manager',
},
{
id: 'sql-query',
name: 'sql-query',
icon: 'copy',
description:
'Execute SQL queries across PostgreSQL, MySQL, and SQLite databases with connection pooling.',
category: 'Databases',
categoryVariant: 'success',
weeklyUsage: '287K/week',
href: '/tool/sql-query',
},
{
id: 'pdf-parser',
name: 'pdf-parser',
icon: 'copy',
description:
'Extract text, tables, and metadata from PDF documents with OCR support for scanned pages.',
category: 'Documents',
categoryVariant: 'outline',
weeklyUsage: '156K/week',
href: '/tool/pdf-parser',
},
{
id: 'email-sender',
name: 'email-sender',
icon: 'check',
description: 'Send transactional emails with templates, attachments, and delivery tracking.',
category: 'Email',
categoryVariant: 'secondary',
weeklyUsage: '203K/week',
href: '/tool/email-sender',
},
];
export const categories: Category[] = [
{
id: "web-apis",
name: "Web & APIs",
icon: "externalLink",
colorClass: "bg-blue-500 text-white",
toolCount: 423,
href: "/category/web-apis",
},
{
id: "databases",
name: "Databases",
icon: "copy",
colorClass: "bg-emerald-500 text-white",
toolCount: 198,
href: "/category/databases",
},
{
id: "documents",
name: "Documents",
icon: "copy",
colorClass: "bg-amber-500 text-white",
toolCount: 156,
href: "/category/documents",
},
{
id: "images",
name: "Images",
icon: "check",
colorClass: "bg-pink-500 text-white",
toolCount: 134,
href: "/category/images",
},
{
id: "email",
name: "Email",
icon: "check",
colorClass: "bg-indigo-500 text-white",
toolCount: 89,
href: "/category/email",
},
{
id: "calendar",
name: "Calendar",
icon: "check",
colorClass: "bg-orange-500 text-white",
toolCount: 67,
href: "/category/calendar",
},
{
id: "search",
name: "Search",
icon: "check",
colorClass: "bg-red-500 text-white",
toolCount: 112,
href: "/category/search",
},
{
id: "code-execution",
name: "Code Execution",
icon: "github",
colorClass: "bg-zinc-700 text-white",
toolCount: 245,
href: "/category/code-execution",
},
{
id: "communication",
name: "Communication",
icon: "check",
colorClass: "bg-cyan-500 text-white",
toolCount: 178,
href: "/category/communication",
},
{
id: "analytics",
name: "Analytics",
icon: "check",
colorClass: "bg-violet-500 text-white",
toolCount: 203,
href: "/category/analytics",
},
{
id: "security",
name: "Security",
icon: "check",
colorClass: "bg-slate-600 text-white",
toolCount: 91,
href: "/category/security",
},
{
id: "workflows",
name: "Workflows",
icon: "check",
colorClass: "bg-teal-500 text-white",
toolCount: 167,
href: "/category/workflows",
},
{
id: 'web-apis',
name: 'Web & APIs',
icon: 'externalLink',
colorClass: 'bg-blue-500 text-white',
toolCount: 423,
href: '/category/web-apis',
},
{
id: 'databases',
name: 'Databases',
icon: 'copy',
colorClass: 'bg-emerald-500 text-white',
toolCount: 198,
href: '/category/databases',
},
{
id: 'documents',
name: 'Documents',
icon: 'copy',
colorClass: 'bg-amber-500 text-white',
toolCount: 156,
href: '/category/documents',
},
{
id: 'images',
name: 'Images',
icon: 'check',
colorClass: 'bg-pink-500 text-white',
toolCount: 134,
href: '/category/images',
},
{
id: 'email',
name: 'Email',
icon: 'check',
colorClass: 'bg-indigo-500 text-white',
toolCount: 89,
href: '/category/email',
},
{
id: 'calendar',
name: 'Calendar',
icon: 'check',
colorClass: 'bg-orange-500 text-white',
toolCount: 67,
href: '/category/calendar',
},
{
id: 'search',
name: 'Search',
icon: 'check',
colorClass: 'bg-red-500 text-white',
toolCount: 112,
href: '/category/search',
},
{
id: 'code-execution',
name: 'Code Execution',
icon: 'github',
colorClass: 'bg-zinc-700 text-white',
toolCount: 245,
href: '/category/code-execution',
},
{
id: 'communication',
name: 'Communication',
icon: 'check',
colorClass: 'bg-cyan-500 text-white',
toolCount: 178,
href: '/category/communication',
},
{
id: 'analytics',
name: 'Analytics',
icon: 'check',
colorClass: 'bg-violet-500 text-white',
toolCount: 203,
href: '/category/analytics',
},
{
id: 'security',
name: 'Security',
icon: 'check',
colorClass: 'bg-slate-600 text-white',
toolCount: 91,
href: '/category/security',
},
{
id: 'workflows',
name: 'Workflows',
icon: 'check',
colorClass: 'bg-teal-500 text-white',
toolCount: 167,
href: '/category/workflows',
},
];
export const statistics: Statistic[] = [
{
icon: "copy",
value: "2,847",
label: "Published Tools",
subtext: "Across 24 categories",
},
{
icon: "github",
value: "48K+",
label: "Active Developers",
subtext: "Building with TPMJS",
},
{
icon: "check",
value: "12M+",
label: "Weekly Invocations",
subtext: "Across all tools",
},
{
icon: "chevronDown",
value: "47ms",
label: "Average Response",
subtext: "95th percentile latency",
},
{
icon: 'copy',
value: '2,847',
label: 'Published Tools',
subtext: 'Across 24 categories',
},
{
icon: 'github',
value: '48K+',
label: 'Active Developers',
subtext: 'Building with TPMJS',
},
{
icon: 'check',
value: '12M+',
label: 'Weekly Invocations',
subtext: 'Across all tools',
},
{
icon: 'chevronDown',
value: '47ms',
label: 'Average Response',
subtext: '95th percentile latency',
},
];

390
apps/web/src/data/toolData.ts
View file

@ -4,235 +4,223 @@
*/
export interface Tool {
id: string;
name: string;
description: string;
category: string;
installCommand: string;
usage: number; // 0-100 percentage
stars: number;
version: string;
tags: string[];
homepage?: string;
repository?: string;
id: string;
name: string;
description: string;
category: string;
installCommand: string;
usage: number; // 0-100 percentage
stars: number;
version: string;
tags: string[];
homepage?: string;
repository?: string;
}
export const toolCategories = [
"Web & APIs",
"Databases",
"Documents",
"Images",
"Email",
"Calendar",
"Search",
"Code Execution",
"Communication",
"Analytics",
"Security",
"Workflows",
'Web & APIs',
'Databases',
'Documents',
'Images',
'Email',
'Calendar',
'Search',
'Code Execution',
'Communication',
'Analytics',
'Security',
'Workflows',
] as const;
export const mockTools: Tool[] = [
{
id: "web-fetch",
name: "web-fetch",
description:
"Fetch and parse web content with automatic HTML-to-markdown conversion",
category: "Web & APIs",
installCommand: "npm install @tpmjs/web-fetch",
usage: 87,
stars: 12453,
version: "2.1.4",
tags: ["http", "scraping", "markdown"],
homepage: "https://tpmjs.com/tools/web-fetch",
repository: "https://github.com/tpmjs/web-fetch",
},
{
id: "database-query",
name: "database-query",
description:
"Execute SQL queries across multiple database engines with type-safe results",
category: "Databases",
installCommand: "npm install @tpmjs/database-query",
usage: 72,
stars: 8921,
version: "3.0.1",
tags: ["sql", "postgres", "mysql", "sqlite"],
homepage: "https://tpmjs.com/tools/database-query",
repository: "https://github.com/tpmjs/database-query",
},
{
id: "pdf-extract",
name: "pdf-extract",
description:
"Extract text, images, and metadata from PDF documents with OCR support",
category: "Documents",
installCommand: "npm install @tpmjs/pdf-extract",
usage: 65,
stars: 7832,
version: "1.9.2",
tags: ["pdf", "ocr", "document-processing"],
homepage: "https://tpmjs.com/tools/pdf-extract",
repository: "https://github.com/tpmjs/pdf-extract",
},
{
id: "image-transform",
name: "image-transform",
description:
"Resize, crop, and optimize images with automatic format conversion",
category: "Images",
installCommand: "npm install @tpmjs/image-transform",
usage: 58,
stars: 6745,
version: "2.4.0",
tags: ["images", "resize", "optimization"],
homepage: "https://tpmjs.com/tools/image-transform",
repository: "https://github.com/tpmjs/image-transform",
},
{
id: "email-send",
name: "email-send",
description:
"Send transactional emails with template support and delivery tracking",
category: "Email",
installCommand: "npm install @tpmjs/email-send",
usage: 51,
stars: 5623,
version: "1.7.3",
tags: ["email", "smtp", "templates"],
homepage: "https://tpmjs.com/tools/email-send",
repository: "https://github.com/tpmjs/email-send",
},
{
id: "calendar-sync",
name: "calendar-sync",
description:
"Sync events across Google Calendar, Outlook, and Apple Calendar",
category: "Calendar",
installCommand: "npm install @tpmjs/calendar-sync",
usage: 43,
stars: 4891,
version: "2.0.5",
tags: ["calendar", "events", "sync"],
homepage: "https://tpmjs.com/tools/calendar-sync",
repository: "https://github.com/tpmjs/calendar-sync",
},
{
id: "semantic-search",
name: "semantic-search",
description:
"Vector-based semantic search with support for embeddings and similarity",
category: "Search",
installCommand: "npm install @tpmjs/semantic-search",
usage: 79,
stars: 11234,
version: "3.2.1",
tags: ["search", "embeddings", "vector", "ai"],
homepage: "https://tpmjs.com/tools/semantic-search",
repository: "https://github.com/tpmjs/semantic-search",
},
{
id: "code-execute",
name: "code-execute",
description:
"Safely execute code in sandboxed environments with timeout controls",
category: "Code Execution",
installCommand: "npm install @tpmjs/code-execute",
usage: 68,
stars: 9567,
version: "1.5.8",
tags: ["sandbox", "execution", "security"],
homepage: "https://tpmjs.com/tools/code-execute",
repository: "https://github.com/tpmjs/code-execute",
},
{
id: "slack-notify",
name: "slack-notify",
description:
"Send rich notifications to Slack channels with interactive components",
category: "Communication",
installCommand: "npm install @tpmjs/slack-notify",
usage: 54,
stars: 6234,
version: "2.3.2",
tags: ["slack", "notifications", "webhooks"],
homepage: "https://tpmjs.com/tools/slack-notify",
repository: "https://github.com/tpmjs/slack-notify",
},
{
id: "analytics-track",
name: "analytics-track",
description:
"Track user events and metrics across multiple analytics platforms",
category: "Analytics",
installCommand: "npm install @tpmjs/analytics-track",
usage: 61,
stars: 7123,
version: "1.8.4",
tags: ["analytics", "tracking", "metrics"],
homepage: "https://tpmjs.com/tools/analytics-track",
repository: "https://github.com/tpmjs/analytics-track",
},
{
id: "secret-vault",
name: "secret-vault",
description:
"Securely store and retrieve secrets with encryption and access control",
category: "Security",
installCommand: "npm install @tpmjs/secret-vault",
usage: 76,
stars: 10432,
version: "2.6.0",
tags: ["security", "secrets", "encryption"],
homepage: "https://tpmjs.com/tools/secret-vault",
repository: "https://github.com/tpmjs/secret-vault",
},
{
id: "workflow-orchestrate",
name: "workflow-orchestrate",
description:
"Orchestrate complex workflows with conditional logic and error handling",
category: "Workflows",
installCommand: "npm install @tpmjs/workflow-orchestrate",
usage: 47,
stars: 5789,
version: "3.1.2",
tags: ["workflows", "orchestration", "automation"],
homepage: "https://tpmjs.com/tools/workflow-orchestrate",
repository: "https://github.com/tpmjs/workflow-orchestrate",
},
{
id: 'web-fetch',
name: 'web-fetch',
description: 'Fetch and parse web content with automatic HTML-to-markdown conversion',
category: 'Web & APIs',
installCommand: 'npm install @tpmjs/web-fetch',
usage: 87,
stars: 12453,
version: '2.1.4',
tags: ['http', 'scraping', 'markdown'],
homepage: 'https://tpmjs.com/tools/web-fetch',
repository: 'https://github.com/tpmjs/web-fetch',
},
{
id: 'database-query',
name: 'database-query',
description: 'Execute SQL queries across multiple database engines with type-safe results',
category: 'Databases',
installCommand: 'npm install @tpmjs/database-query',
usage: 72,
stars: 8921,
version: '3.0.1',
tags: ['sql', 'postgres', 'mysql', 'sqlite'],
homepage: 'https://tpmjs.com/tools/database-query',
repository: 'https://github.com/tpmjs/database-query',
},
{
id: 'pdf-extract',
name: 'pdf-extract',
description: 'Extract text, images, and metadata from PDF documents with OCR support',
category: 'Documents',
installCommand: 'npm install @tpmjs/pdf-extract',
usage: 65,
stars: 7832,
version: '1.9.2',
tags: ['pdf', 'ocr', 'document-processing'],
homepage: 'https://tpmjs.com/tools/pdf-extract',
repository: 'https://github.com/tpmjs/pdf-extract',
},
{
id: 'image-transform',
name: 'image-transform',
description: 'Resize, crop, and optimize images with automatic format conversion',
category: 'Images',
installCommand: 'npm install @tpmjs/image-transform',
usage: 58,
stars: 6745,
version: '2.4.0',
tags: ['images', 'resize', 'optimization'],
homepage: 'https://tpmjs.com/tools/image-transform',
repository: 'https://github.com/tpmjs/image-transform',
},
{
id: 'email-send',
name: 'email-send',
description: 'Send transactional emails with template support and delivery tracking',
category: 'Email',
installCommand: 'npm install @tpmjs/email-send',
usage: 51,
stars: 5623,
version: '1.7.3',
tags: ['email', 'smtp', 'templates'],
homepage: 'https://tpmjs.com/tools/email-send',
repository: 'https://github.com/tpmjs/email-send',
},
{
id: 'calendar-sync',
name: 'calendar-sync',
description: 'Sync events across Google Calendar, Outlook, and Apple Calendar',
category: 'Calendar',
installCommand: 'npm install @tpmjs/calendar-sync',
usage: 43,
stars: 4891,
version: '2.0.5',
tags: ['calendar', 'events', 'sync'],
homepage: 'https://tpmjs.com/tools/calendar-sync',
repository: 'https://github.com/tpmjs/calendar-sync',
},
{
id: 'semantic-search',
name: 'semantic-search',
description: 'Vector-based semantic search with support for embeddings and similarity',
category: 'Search',
installCommand: 'npm install @tpmjs/semantic-search',
usage: 79,
stars: 11234,
version: '3.2.1',
tags: ['search', 'embeddings', 'vector', 'ai'],
homepage: 'https://tpmjs.com/tools/semantic-search',
repository: 'https://github.com/tpmjs/semantic-search',
},
{
id: 'code-execute',
name: 'code-execute',
description: 'Safely execute code in sandboxed environments with timeout controls',
category: 'Code Execution',
installCommand: 'npm install @tpmjs/code-execute',
usage: 68,
stars: 9567,
version: '1.5.8',
tags: ['sandbox', 'execution', 'security'],
homepage: 'https://tpmjs.com/tools/code-execute',
repository: 'https://github.com/tpmjs/code-execute',
},
{
id: 'slack-notify',
name: 'slack-notify',
description: 'Send rich notifications to Slack channels with interactive components',
category: 'Communication',
installCommand: 'npm install @tpmjs/slack-notify',
usage: 54,
stars: 6234,
version: '2.3.2',
tags: ['slack', 'notifications', 'webhooks'],
homepage: 'https://tpmjs.com/tools/slack-notify',
repository: 'https://github.com/tpmjs/slack-notify',
},
{
id: 'analytics-track',
name: 'analytics-track',
description: 'Track user events and metrics across multiple analytics platforms',
category: 'Analytics',
installCommand: 'npm install @tpmjs/analytics-track',
usage: 61,
stars: 7123,
version: '1.8.4',
tags: ['analytics', 'tracking', 'metrics'],
homepage: 'https://tpmjs.com/tools/analytics-track',
repository: 'https://github.com/tpmjs/analytics-track',
},
{
id: 'secret-vault',
name: 'secret-vault',
description: 'Securely store and retrieve secrets with encryption and access control',
category: 'Security',
installCommand: 'npm install @tpmjs/secret-vault',
usage: 76,
stars: 10432,
version: '2.6.0',
tags: ['security', 'secrets', 'encryption'],
homepage: 'https://tpmjs.com/tools/secret-vault',
repository: 'https://github.com/tpmjs/secret-vault',
},
{
id: 'workflow-orchestrate',
name: 'workflow-orchestrate',
description: 'Orchestrate complex workflows with conditional logic and error handling',
category: 'Workflows',
installCommand: 'npm install @tpmjs/workflow-orchestrate',
usage: 47,
stars: 5789,
version: '3.1.2',
tags: ['workflows', 'orchestration', 'automation'],
homepage: 'https://tpmjs.com/tools/workflow-orchestrate',
repository: 'https://github.com/tpmjs/workflow-orchestrate',
},
];
/**
* Get tools by category
*/
export function getToolsByCategory(category: string): Tool[] {
return mockTools.filter((tool) => tool.category === category);
return mockTools.filter((tool) => tool.category === category);
}
/**
* Get featured tools (top 6 by usage)
*/
export function getFeaturedTools(): Tool[] {
return [...mockTools].sort((a, b) => b.usage - a.usage).slice(0, 6);
return [...mockTools].sort((a, b) => b.usage - a.usage).slice(0, 6);
}
/**
* Get tool by ID
*/
export function getToolById(id: string): Tool | undefined {
return mockTools.find((tool) => tool.id === id);
return mockTools.find((tool) => tool.id === id);
}
/**
* Search tools by name or description
*/
export function searchTools(query: string): Tool[] {
const lowerQuery = query.toLowerCase();
return mockTools.filter(
(tool) =>
tool.name.toLowerCase().includes(lowerQuery) ||
tool.description.toLowerCase().includes(lowerQuery) ||
tool.tags.some((tag) => tag.toLowerCase().includes(lowerQuery)),
);
const lowerQuery = query.toLowerCase();
return mockTools.filter(
(tool) =>
tool.name.toLowerCase().includes(lowerQuery) ||
tool.description.toLowerCase().includes(lowerQuery) ||
tool.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))
);
}

2
apps/web/tailwind.config.ts
View file

@ -1,5 +1,5 @@
import type { Config } from 'tailwindcss';
import baseConfig from '@tpmjs/tailwind-config/base';
import type { Config } from 'tailwindcss';
export default {
...baseConfig,

7
apps/web/tsconfig.json
View file

@ -6,11 +6,6 @@
"@/*": ["./src/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

4
biome.json Normal file
View file

@ -0,0 +1,4 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"extends": ["./packages/config/biome.json"]
}

110
knip.json
View file

@ -1,57 +1,57 @@
{
"$schema": "https://unpkg.com/knip@5/schema.json",
"workspaces": {
".": {
"entry": ["turbo.json"],
"project": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
"ignore": [
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
"**/dist/**",
"**/.next/**",
"**/node_modules/**",
"**/.turbo/**",
"**/storybook-static/**"
]
},
"apps/*": {
"entry": [
"app/**/*.ts",
"app/**/*.tsx",
"pages/**/*.ts",
"pages/**/*.tsx",
"src/**/*.ts",
"src/**/*.tsx"
],
"project": ["**/*.ts", "**/*.tsx"]
},
"packages/*": {
"entry": ["src/**/*.ts", "src/**/*.tsx", "index.ts", "index.tsx"],
"project": ["**/*.ts", "**/*.tsx"]
}
},
"ignore": [
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
"**/vitest.config.ts",
"**/tsup.config.ts",
"**/tailwind.config.ts",
"reset.d.ts"
],
"ignoreDependencies": [
"@changesets/cli",
"lefthook",
"turbo",
"typescript",
"@biomejs/biome",
"@total-typescript/ts-reset",
"type-coverage",
"knip",
"dependency-cruiser"
],
"ignoreExportsUsedInFile": true
"$schema": "https://unpkg.com/knip@5/schema.json",
"workspaces": {
".": {
"entry": ["turbo.json"],
"project": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
"ignore": [
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
"**/dist/**",
"**/.next/**",
"**/node_modules/**",
"**/.turbo/**",
"**/storybook-static/**"
]
},
"apps/*": {
"entry": [
"app/**/*.ts",
"app/**/*.tsx",
"pages/**/*.ts",
"pages/**/*.tsx",
"src/**/*.ts",
"src/**/*.tsx"
],
"project": ["**/*.ts", "**/*.tsx"]
},
"packages/*": {
"entry": ["src/**/*.ts", "src/**/*.tsx", "index.ts", "index.tsx"],
"project": ["**/*.ts", "**/*.tsx"]
}
},
"ignore": [
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
"**/vitest.config.ts",
"**/tsup.config.ts",
"**/tailwind.config.ts",
"reset.d.ts"
],
"ignoreDependencies": [
"@changesets/cli",
"lefthook",
"turbo",
"typescript",
"@biomejs/biome",
"@total-typescript/ts-reset",
"type-coverage",
"knip",
"dependency-cruiser"
],
"ignoreExportsUsedInFile": true
}

78
package.json
View file

@ -1,41 +1,41 @@
{
"name": "@tpmjs/monorepo",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": ">=22",
"pnpm": ">=8"
},
"packageManager": "pnpm@10.14.0",
"scripts": {
"dev": "turbo dev",
"build": "turbo build",
"test": "turbo test",
"test:ui": "turbo test:ui",
"lint": "turbo lint",
"format": "biome format --write .",
"format:check": "biome check .",
"type-check": "turbo type-check",
"type-coverage": "type-coverage --at-least 95",
"find-deadcode": "knip",
"check-architecture": "depcruise --validate --config .dependency-cruiser.js apps packages",
"clean": "turbo clean && rm -rf node_modules .turbo",
"changeset": "changeset",
"changeset:version": "changeset version && pnpm install --no-frozen-lockfile",
"changeset:publish": "pnpm build && changeset publish",
"prepare": "lefthook install"
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",
"@changesets/cli": "^2.27.10",
"@total-typescript/ts-reset": "^0.6.1",
"@types/node": "^22.10.2",
"dependency-cruiser": "^17.3.1",
"knip": "^5.70.2",
"lefthook": "^1.10.1",
"turbo": "^2.6.1",
"type-coverage": "^2.29.7",
"typescript": "^5.9.3"
}
"name": "@tpmjs/monorepo",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": ">=22",
"pnpm": ">=8"
},
"packageManager": "pnpm@10.14.0",
"scripts": {
"dev": "turbo dev",
"build": "turbo build",
"test": "turbo test",
"test:ui": "turbo test:ui",
"lint": "turbo lint",
"format": "biome format --write .",
"format:check": "biome check .",
"type-check": "turbo type-check",
"type-coverage": "type-coverage --at-least 95",
"find-deadcode": "knip",
"check-architecture": "depcruise --validate --config .dependency-cruiser.js apps packages",
"clean": "turbo clean && rm -rf node_modules .turbo",
"changeset": "changeset",
"changeset:version": "changeset version && pnpm install --no-frozen-lockfile",
"changeset:publish": "pnpm build && changeset publish",
"prepare": "lefthook install"
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",
"@changesets/cli": "^2.27.10",
"@total-typescript/ts-reset": "^0.6.1",
"@types/node": "^22.10.2",
"dependency-cruiser": "^17.3.1",
"knip": "^5.70.2",
"lefthook": "^1.10.1",
"turbo": "^2.6.1",
"type-coverage": "^2.29.7",
"typescript": "^5.9.3"
}
}

17
packages/config/biome.json
View file

@ -5,6 +5,19 @@
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignore": [
"**/node_modules/**",
"**/dist/**",
"**/build/**",
"**/.next/**",
"**/out/**",
"**/coverage/**",
"**/.turbo/**",
"**/storybook-static/**",
"**/*.tsbuildinfo"
]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
@ -25,6 +38,10 @@
},
"suspicious": {
"noExplicitAny": "warn"
},
"a11y": {
"noSvgWithoutTitle": "warn",
"useSemanticElements": "warn"
}
}
},

79
packages/config/eslint/base.js
View file

@ -1,44 +1,37 @@
import js from "@eslint/js";
import importPlugin from "eslint-plugin-import";
import tseslint from "typescript-eslint";
import js from '@eslint/js';
import importPlugin from 'eslint-plugin-import';
import tseslint from 'typescript-eslint';
export default tseslint.config(
js.configs.recommended,
...tseslint.configs.recommended,
{
plugins: {
import: importPlugin,
},
rules: {
// Module boundaries
"import/no-internal-modules": [
"error",
{
allow: [
"@tpmjs/ui/*/[!index]*",
"@tpmjs/utils/*",
"@tpmjs/types/*",
"@tpmjs/eslint-config/*",
"next/**",
"./.next/*",
],
},
],
"import/no-restricted-paths": [
"error",
{
zones: [
{ target: "./packages", from: "./apps" },
{ target: "./packages/ui", from: "./packages/utils" },
],
},
],
"import/no-anonymous-default-export": "error",
"@typescript-eslint/no-unused-vars": [
"error",
{ argsIgnorePattern: "^_" },
],
"@typescript-eslint/no-explicit-any": "warn",
},
},
);
export default tseslint.config(js.configs.recommended, ...tseslint.configs.recommended, {
plugins: {
import: importPlugin,
},
rules: {
// Module boundaries
'import/no-internal-modules': [
'error',
{
allow: [
'@tpmjs/ui/*/[!index]*',
'@tpmjs/utils/*',
'@tpmjs/types/*',
'@tpmjs/eslint-config/*',
'next/**',
'./.next/*',
],
},
],
'import/no-restricted-paths': [
'error',
{
zones: [
{ target: './packages', from: './apps' },
{ target: './packages/ui', from: './packages/utils' },
],
},
],
'import/no-anonymous-default-export': 'error',
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
'@typescript-eslint/no-explicit-any': 'warn',
},
});

30
packages/config/eslint/package.json
View file

@ -1,17 +1,17 @@
{
"name": "@tpmjs/eslint-config",
"version": "0.0.0",
"private": true,
"type": "module",
"main": "./base.js",
"files": ["base.js", "react.js"],
"dependencies": {
"@eslint/js": "^9.18.0",
"eslint": "^9.18.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.3",
"eslint-plugin-react-hooks": "^5.1.0",
"typescript-eslint": "^8.19.1"
}
"name": "@tpmjs/eslint-config",
"version": "0.0.0",
"private": true,
"type": "module",
"main": "./base.js",
"files": ["base.js", "react.js"],
"dependencies": {
"@eslint/js": "^9.18.0",
"eslint": "^9.18.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.3",
"eslint-plugin-react-hooks": "^5.1.0",
"typescript-eslint": "^8.19.1"
}
}

50
packages/config/eslint/react.js vendored
View file

@ -1,28 +1,28 @@
import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
import reactPlugin from "eslint-plugin-react";
import hooksPlugin from "eslint-plugin-react-hooks";
import baseConfig from "./base.js";
import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
import reactPlugin from 'eslint-plugin-react';
import hooksPlugin from 'eslint-plugin-react-hooks';
import baseConfig from './base.js';
export default [
...baseConfig,
{
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: {
react: reactPlugin,
"react-hooks": hooksPlugin,
"jsx-a11y": jsxA11yPlugin,
},
rules: {
...reactPlugin.configs.recommended.rules,
...hooksPlugin.configs.recommended.rules,
...jsxA11yPlugin.configs.recommended.rules,
"react/react-in-jsx-scope": "off", // Not needed in Next.js/React 17+
"react/prop-types": "off", // Using TypeScript
},
settings: {
react: {
version: "detect",
},
},
},
...baseConfig,
{
files: ['**/*.{js,jsx,ts,tsx}'],
plugins: {
react: reactPlugin,
'react-hooks': hooksPlugin,
'jsx-a11y': jsxA11yPlugin,
},
rules: {
...reactPlugin.configs.recommended.rules,
...hooksPlugin.configs.recommended.rules,
...jsxA11yPlugin.configs.recommended.rules,
'react/react-in-jsx-scope': 'off', // Not needed in Next.js/React 17+
'react/prop-types': 'off', // Using TypeScript
},
settings: {
react: {
version: 'detect',
},
},
},
];

7
packages/config/package.json
View file

@ -2,10 +2,5 @@
"name": "@tpmjs/config",
"version": "0.0.0",
"private": true,
"files": [
"biome.json",
"eslint",
"tailwind",
"tsconfig"
]
"files": ["biome.json", "eslint", "tailwind", "tsconfig"]
}

337
packages/config/tailwind/base.ts
View file

@ -1,185 +1,184 @@
import type { Config } from "tailwindcss";
import type { Config } from 'tailwindcss';
export default {
content: [],
safelist: [
// Custom border utilities
"border-dotted-1",
"border-dotted-2",
"border-dashed-1",
"border-t-dotted",
"border-b-dotted",
"border-l-dotted",
"border-r-dotted",
// Custom shadow utilities
"shadow-blueprint",
"shadow-blueprint-hover",
// Grid backgrounds
"dotted-grid-background",
"blueprint-background",
"grid-background",
],
theme: {
extend: {
colors: {
// Backgrounds & Surfaces
background: "hsl(var(--background))",
surface: "hsl(var(--surface))",
"surface-elevated": "hsl(var(--surface-elevated))",
"surface-overlay": "hsl(var(--surface-overlay))",
content: [],
safelist: [
// Custom border utilities
'border-dotted-1',
'border-dotted-2',
'border-dashed-1',
'border-t-dotted',
'border-b-dotted',
'border-l-dotted',
'border-r-dotted',
// Custom shadow utilities
'shadow-blueprint',
'shadow-blueprint-hover',
// Grid backgrounds
'dotted-grid-background',
'blueprint-background',
'grid-background',
],
theme: {
extend: {
colors: {
// Backgrounds & Surfaces
background: 'hsl(var(--background))',
surface: 'hsl(var(--surface))',
'surface-elevated': 'hsl(var(--surface-elevated))',
'surface-overlay': 'hsl(var(--surface-overlay))',
// Foreground (Text)
foreground: {
DEFAULT: "hsl(var(--foreground))",
secondary: "hsl(var(--foreground-secondary))",
tertiary: "hsl(var(--foreground-tertiary))",
muted: "hsl(var(--foreground-muted))",
},
// Foreground (Text)
foreground: {
DEFAULT: 'hsl(var(--foreground))',
secondary: 'hsl(var(--foreground-secondary))',
tertiary: 'hsl(var(--foreground-tertiary))',
muted: 'hsl(var(--foreground-muted))',
},
// Borders
border: {
DEFAULT: "hsl(var(--border))",
strong: "hsl(var(--border-strong))",
subtle: "hsl(var(--border-subtle))",
},
// Borders
border: {
DEFAULT: 'hsl(var(--border))',
strong: 'hsl(var(--border-strong))',
subtle: 'hsl(var(--border-subtle))',
},
// Interactive States
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
// Interactive States
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
// Status Colors
success: {
DEFAULT: "hsl(var(--success))",
foreground: "hsl(var(--success-foreground))",
},
error: {
DEFAULT: "hsl(var(--error))",
foreground: "hsl(var(--error-foreground))",
},
warning: {
DEFAULT: "hsl(var(--warning))",
foreground: "hsl(var(--warning-foreground))",
},
info: {
DEFAULT: "hsl(var(--info))",
foreground: "hsl(var(--info-foreground))",
},
// Status Colors
success: {
DEFAULT: 'hsl(var(--success))',
foreground: 'hsl(var(--success-foreground))',
},
error: {
DEFAULT: 'hsl(var(--error))',
foreground: 'hsl(var(--error-foreground))',
},
warning: {
DEFAULT: 'hsl(var(--warning))',
foreground: 'hsl(var(--warning-foreground))',
},
info: {
DEFAULT: 'hsl(var(--info))',
foreground: 'hsl(var(--info-foreground))',
},
// Destructive (legacy support)
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
// Destructive (legacy support)
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
// Form Elements
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
// Form Elements
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
// Card
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
// Card
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
// Grid/Blueprint
grid: "hsl(var(--grid-color))",
},
// Grid/Blueprint
grid: 'hsl(var(--grid-color))',
},
borderRadius: {
sm: "var(--radius-sm)",
md: "var(--radius-md)",
lg: "var(--radius-lg)",
xl: "var(--radius-xl)",
},
borderRadius: {
sm: 'var(--radius-sm)',
md: 'var(--radius-md)',
lg: 'var(--radius-lg)',
xl: 'var(--radius-xl)',
},
fontFamily: {
sans: "var(--font-sans)",
mono: "var(--font-mono)",
},
fontFamily: {
sans: 'var(--font-sans)',
mono: 'var(--font-mono)',
},
lineHeight: {
tight: 'var(--leading-tight)',
snug: 'var(--leading-snug)',
normal: 'var(--leading-normal)',
relaxed: 'var(--leading-relaxed)',
loose: 'var(--leading-loose)',
editorial: 'var(--leading-editorial)',
},
lineHeight: {
tight: "var(--leading-tight)",
snug: "var(--leading-snug)",
normal: "var(--leading-normal)",
relaxed: "var(--leading-relaxed)",
loose: "var(--leading-loose)",
editorial: "var(--leading-editorial)",
},
letterSpacing: {
tighter: 'var(--tracking-tighter)',
tight: 'var(--tracking-tight)',
normal: 'var(--tracking-normal)',
wide: 'var(--tracking-wide)',
wider: 'var(--tracking-wider)',
widest: 'var(--tracking-widest)',
},
keyframes: {
'slide-up': {
from: { transform: 'translateY(10px)', opacity: '0' },
to: { transform: 'translateY(0)', opacity: '1' },
},
'slide-down': {
from: { transform: 'translateY(-10px)', opacity: '0' },
to: { transform: 'translateY(0)', opacity: '1' },
},
'slide-left': {
from: { transform: 'translateX(10px)', opacity: '0' },
to: { transform: 'translateX(0)', opacity: '1' },
},
'slide-right': {
from: { transform: 'translateX(-10px)', opacity: '0' },
to: { transform: 'translateX(0)', opacity: '1' },
},
'scale-in': {
from: { transform: 'scale(0.95)', opacity: '0' },
to: { transform: 'scale(1)', opacity: '1' },
},
'scale-out': {
from: { transform: 'scale(1)', opacity: '1' },
to: { transform: 'scale(0.95)', opacity: '0' },
},
shimmer: {
'0%': { backgroundPosition: '-1000px 0' },
'100%': { backgroundPosition: '1000px 0' },
},
pulse: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.5' },
},
'grid-pulse': {
'0%, 100%': { opacity: '0.4' },
'50%': { opacity: '0.6' },
},
},
letterSpacing: {
tighter: "var(--tracking-tighter)",
tight: "var(--tracking-tight)",
normal: "var(--tracking-normal)",
wide: "var(--tracking-wide)",
wider: "var(--tracking-wider)",
widest: "var(--tracking-widest)",
},
keyframes: {
"slide-up": {
from: { transform: "translateY(10px)", opacity: "0" },
to: { transform: "translateY(0)", opacity: "1" },
},
"slide-down": {
from: { transform: "translateY(-10px)", opacity: "0" },
to: { transform: "translateY(0)", opacity: "1" },
},
"slide-left": {
from: { transform: "translateX(10px)", opacity: "0" },
to: { transform: "translateX(0)", opacity: "1" },
},
"slide-right": {
from: { transform: "translateX(-10px)", opacity: "0" },
to: { transform: "translateX(0)", opacity: "1" },
},
"scale-in": {
from: { transform: "scale(0.95)", opacity: "0" },
to: { transform: "scale(1)", opacity: "1" },
},
"scale-out": {
from: { transform: "scale(1)", opacity: "1" },
to: { transform: "scale(0.95)", opacity: "0" },
},
shimmer: {
"0%": { backgroundPosition: "-1000px 0" },
"100%": { backgroundPosition: "1000px 0" },
},
pulse: {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0.5" },
},
"grid-pulse": {
"0%, 100%": { opacity: "0.4" },
"50%": { opacity: "0.6" },
},
},
animation: {
"slide-up": "slide-up 300ms cubic-bezier(0.4, 0, 0.2, 1)",
"slide-down": "slide-down 300ms cubic-bezier(0.4, 0, 0.2, 1)",
"slide-left": "slide-left 300ms cubic-bezier(0.4, 0, 0.2, 1)",
"slide-right": "slide-right 300ms cubic-bezier(0.4, 0, 0.2, 1)",
"scale-in": "scale-in 200ms cubic-bezier(0.4, 0, 0.2, 1)",
"scale-out": "scale-out 200ms cubic-bezier(0.4, 0, 0.2, 1)",
shimmer: "shimmer 2s infinite linear",
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"grid-pulse": "grid-pulse 8s ease-in-out infinite",
},
},
},
plugins: [],
animation: {
'slide-up': 'slide-up 300ms cubic-bezier(0.4, 0, 0.2, 1)',
'slide-down': 'slide-down 300ms cubic-bezier(0.4, 0, 0.2, 1)',
'slide-left': 'slide-left 300ms cubic-bezier(0.4, 0, 0.2, 1)',
'slide-right': 'slide-right 300ms cubic-bezier(0.4, 0, 0.2, 1)',
'scale-in': 'scale-in 200ms cubic-bezier(0.4, 0, 0.2, 1)',
'scale-out': 'scale-out 200ms cubic-bezier(0.4, 0, 0.2, 1)',
shimmer: 'shimmer 2s infinite linear',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'grid-pulse': 'grid-pulse 8s ease-in-out infinite',
},
},
},
plugins: [],
} satisfies Config;

4
packages/config/tailwind/package.json
View file

@ -3,9 +3,7 @@
"version": "0.0.0",
"private": true,
"main": "./base.ts",
"files": [
"base.ts"
],
"files": ["base.ts"],
"dependencies": {
"tailwindcss": "^3.4.17"
},

6
packages/config/tsconfig/base.json
View file

@ -20,9 +20,5 @@
"target": "ES2022",
"verbatimModuleSyntax": true
},
"exclude": [
"node_modules",
"dist",
".turbo"
]
"exclude": ["node_modules", "dist", ".turbo"]
}

11
packages/config/tsconfig/nextjs.json
View file

@ -12,13 +12,6 @@
],
"target": "ES2022"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

6
packages/config/tsconfig/package.json
View file

@ -2,9 +2,5 @@
"name": "@tpmjs/tsconfig",
"version": "0.0.0",
"private": true,
"files": [
"base.json",
"nextjs.json",
"react-library.json"
]
"files": ["base.json", "nextjs.json", "react-library.json"]
}

4
packages/env/package.json vendored
View file

@ -8,9 +8,7 @@
"default": "./dist/index.js"
}
},
"files": [
"dist"
],
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch",

4
packages/mocks/package.json
View file

@ -13,9 +13,7 @@
"default": "./dist/handlers.js"
}
},
"files": [
"dist"
],
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch",

28
packages/storybook/.storybook/main.ts
View file

@ -1,19 +1,19 @@
import type { StorybookConfig } from "@storybook/react-vite";
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ["../stories/**/*.stories.@(ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
stories: ['../stories/**/*.stories.@(ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
};
export default config;

20
packages/storybook/.storybook/preview.ts
View file

@ -1,15 +1,15 @@
import type { Preview } from "@storybook/react";
import "../styles/globals.css";
import type { Preview } from '@storybook/react';
import '../styles/globals.css';
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;

62
packages/storybook/package.json
View file

@ -1,33 +1,33 @@
{
"name": "@tpmjs/storybook",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "storybook dev -p 6006",
"build": "storybook build",
"clean": "rm -rf storybook-static .turbo"
},
"dependencies": {
"@tpmjs/ui": "workspace:*",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@storybook/addon-essentials": "^8.5.0",
"@storybook/addon-interactions": "^8.5.0",
"@storybook/addon-links": "^8.5.0",
"@storybook/blocks": "^8.5.0",
"@storybook/react": "^8.5.0",
"@storybook/react-vite": "^8.5.0",
"@storybook/test": "^8.5.0",
"@tpmjs/tailwind-config": "workspace:*",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.1",
"storybook": "^8.5.0",
"tailwindcss": "^3.4.17",
"vite": "^6.0.7"
}
"name": "@tpmjs/storybook",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "storybook dev -p 6006",
"build": "storybook build",
"clean": "rm -rf storybook-static .turbo"
},
"dependencies": {
"@tpmjs/ui": "workspace:*",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@storybook/addon-essentials": "^8.5.0",
"@storybook/addon-interactions": "^8.5.0",
"@storybook/addon-links": "^8.5.0",
"@storybook/blocks": "^8.5.0",
"@storybook/react": "^8.5.0",
"@storybook/react-vite": "^8.5.0",
"@storybook/test": "^8.5.0",
"@tpmjs/tailwind-config": "workspace:*",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.1",
"storybook": "^8.5.0",
"tailwindcss": "^3.4.17",
"vite": "^6.0.7"
}
}

71
packages/storybook/stories/Badge.stories.ts
View file

@ -1,54 +1,53 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Badge } from "@tpmjs/ui/Badge/Badge";
import { createElement } from "react";
import type { Meta, StoryObj } from '@storybook/react';
import { Badge } from '@tpmjs/ui/Badge/Badge';
import { createElement } from 'react';
const meta = {
title: "Components/Badge",
component: Badge,
tags: ["autodocs"],
parameters: {
layout: "centered",
},
title: 'Components/Badge',
component: Badge,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Badge>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => createElement(Badge, {}, "Default"),
render: () => createElement(Badge, {}, 'Default'),
};
export const AllVariants: Story = {
render: () =>
createElement(
"div",
{
className: "flex flex-wrap items-center gap-3",
},
createElement(Badge, { variant: "default" }, "Default"),
createElement(Badge, { variant: "secondary" }, "Secondary"),
createElement(Badge, { variant: "outline" }, "Outline"),
createElement(Badge, { variant: "success" }, "Success"),
createElement(Badge, { variant: "error" }, "Error"),
createElement(Badge, { variant: "warning" }, "Warning"),
createElement(Badge, { variant: "info" }, "Info"),
),
render: () =>
createElement(
'div',
{
className: 'flex flex-wrap items-center gap-3',
},
createElement(Badge, { variant: 'default' }, 'Default'),
createElement(Badge, { variant: 'secondary' }, 'Secondary'),
createElement(Badge, { variant: 'outline' }, 'Outline'),
createElement(Badge, { variant: 'success' }, 'Success'),
createElement(Badge, { variant: 'error' }, 'Error'),
createElement(Badge, { variant: 'warning' }, 'Warning'),
createElement(Badge, { variant: 'info' }, 'Info')
),
};
export const AllSizes: Story = {
render: () =>
createElement(
"div",
{
className: "flex items-center gap-3",
},
createElement(Badge, { size: "sm" }, "Small"),
createElement(Badge, { size: "md" }, "Medium"),
createElement(Badge, { size: "lg" }, "Large"),
),
render: () =>
createElement(
'div',
{
className: 'flex items-center gap-3',
},
createElement(Badge, { size: 'sm' }, 'Small'),
createElement(Badge, { size: 'md' }, 'Medium'),
createElement(Badge, { size: 'lg' }, 'Large')
),
};
export const WithLongText: Story = {
render: () =>
createElement(Badge, {}, "This is a very long badge with lots of text"),
render: () => createElement(Badge, {}, 'This is a very long badge with lots of text'),
};

78
packages/storybook/stories/Button.stories.ts
View file

@ -1,69 +1,69 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "@tpmjs/ui/Button/Button";
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@tpmjs/ui/Button/Button';
const meta = {
title: "Components/Button",
component: Button,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
title: 'Components/Button',
component: Button,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: "Button",
},
args: {
children: 'Button',
},
};
export const Destructive: Story = {
args: {
variant: "destructive",
children: "Delete",
},
args: {
variant: 'destructive',
children: 'Delete',
},
};
export const Outline: Story = {
args: {
variant: "outline",
children: "Outline",
},
args: {
variant: 'outline',
children: 'Outline',
},
};
export const Secondary: Story = {
args: {
variant: "secondary",
children: "Secondary",
},
args: {
variant: 'secondary',
children: 'Secondary',
},
};
export const Ghost: Story = {
args: {
variant: "ghost",
children: "Ghost",
},
args: {
variant: 'ghost',
children: 'Ghost',
},
};
export const Link: Story = {
args: {
variant: "link",
children: "Link",
},
args: {
variant: 'link',
children: 'Link',
},
};
export const Large: Story = {
args: {
size: "lg",
children: "Large Button",
},
args: {
size: 'lg',
children: 'Large Button',
},
};
export const Small: Story = {
args: {
size: "sm",
children: "Small Button",
},
args: {
size: 'sm',
children: 'Small Button',
},
};

54
packages/storybook/stories/Card.stories.ts
View file

@ -1,39 +1,39 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Card, CardContent, CardHeader, CardTitle } from "@tpmjs/ui/Card/Card";
import { createElement } from "react";
import type { Meta, StoryObj } from '@storybook/react';
import { Card, CardContent, CardHeader, CardTitle } from '@tpmjs/ui/Card/Card';
import { createElement } from 'react';
const meta = {
title: "Components/Card",
component: Card,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
title: 'Components/Card',
component: Card,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Card>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () =>
createElement(
Card,
{ className: "w-[350px]" },
createElement(CardHeader, {}, createElement(CardTitle, {}, "Card Title")),
createElement(CardContent, {}, "This is the card content."),
),
render: () =>
createElement(
Card,
{ className: 'w-[350px]' },
createElement(CardHeader, {}, createElement(CardTitle, {}, 'Card Title')),
createElement(CardContent, {}, 'This is the card content.')
),
};
export const WithLongContent: Story = {
render: () =>
createElement(
Card,
{ className: "w-[400px]" },
createElement(CardHeader, {}, createElement(CardTitle, {}, "TPMJS")),
createElement(
CardContent,
{},
"Tool Package Manager for AI Agents. The registry for AI tools. Discover, share, and integrate tools that give your agents superpowers.",
),
),
render: () =>
createElement(
Card,
{ className: 'w-[400px]' },
createElement(CardHeader, {}, createElement(CardTitle, {}, 'TPMJS')),
createElement(
CardContent,
{},
'Tool Package Manager for AI Agents. The registry for AI tools. Discover, share, and integrate tools that give your agents superpowers.'
)
),
};

74
packages/storybook/stories/CodeBlock.stories.ts
View file

@ -1,38 +1,38 @@
import type { Meta, StoryObj } from "@storybook/react";
import { CodeBlock } from "@tpmjs/ui/CodeBlock/CodeBlock";
import { createElement } from "react";
import type { Meta, StoryObj } from '@storybook/react';
import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock';
import { createElement } from 'react';
const meta = {
title: "Components/CodeBlock",
component: CodeBlock,
tags: ["autodocs"],
parameters: {
layout: "centered",
},
title: 'Components/CodeBlock',
component: CodeBlock,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof CodeBlock>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () =>
createElement(CodeBlock, {
code: `console.log('Hello, World!');`,
}),
render: () =>
createElement(CodeBlock, {
code: `console.log('Hello, World!');`,
}),
};
export const BashCommand: Story = {
render: () =>
createElement(CodeBlock, {
code: "npm install @tpmjs/ui",
language: "bash",
}),
render: () =>
createElement(CodeBlock, {
code: 'npm install @tpmjs/ui',
language: 'bash',
}),
};
export const TypeScriptCode: Story = {
render: () =>
createElement(CodeBlock, {
code: `import { Button } from '@tpmjs/ui/Button/Button';
render: () =>
createElement(CodeBlock, {
code: `import { Button } from '@tpmjs/ui/Button/Button';
import { createElement } from 'react';
export function MyComponent() {
@ -41,29 +41,29 @@ export function MyComponent() {
onClick: () => console.log('clicked'),
}, 'Click me');
}`,
language: "typescript",
}),
language: 'typescript',
}),
};
export const JSONData: Story = {
render: () =>
createElement(CodeBlock, {
code: `{
render: () =>
createElement(CodeBlock, {
code: `{
"name": "@tpmjs/ui",
"version": "0.0.1",
"description": "UI components for TPMJS"
}`,
language: "json",
}),
language: 'json',
}),
};
export const LongCode: Story = {
render: () =>
createElement(
"div",
{ className: "w-96" },
createElement(CodeBlock, {
code: `export const buttonVariants = createVariants({
render: () =>
createElement(
'div',
{ className: 'w-96' },
createElement(CodeBlock, {
code: `export const buttonVariants = createVariants({
base: 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
variants: {
variant: {
@ -73,7 +73,7 @@ export const LongCode: Story = {
},
},
});`,
language: "typescript",
}),
),
language: 'typescript',
})
),
};

85
packages/storybook/stories/Icon.stories.tsx
View file

@ -1,62 +1,53 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Icon } from "@tpmjs/ui/Icon/Icon";
import type { Meta, StoryObj } from '@storybook/react';
import { Icon } from '@tpmjs/ui/Icon/Icon';
const meta = {
title: "Components/Icon",
component: Icon,
tags: ["autodocs"],
parameters: {
layout: "centered",
},
title: 'Components/Icon',
component: Icon,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Icon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const AllIcons: Story = {
render: () => (
<div className="grid grid-cols-4 gap-8 p-8">
{(
[
"copy",
"externalLink",
"github",
"check",
"x",
"chevronDown",
"sun",
"moon",
] as const
).map((iconName) => (
<div key={iconName} className="flex flex-col items-center gap-2">
<Icon icon={iconName} size="lg" />
<span className="text-sm text-foreground-secondary">{iconName}</span>
</div>
))}
</div>
),
render: () => (
<div className="grid grid-cols-4 gap-8 p-8">
{(
['copy', 'externalLink', 'github', 'check', 'x', 'chevronDown', 'sun', 'moon'] as const
).map((iconName) => (
<div key={iconName} className="flex flex-col items-center gap-2">
<Icon icon={iconName} size="lg" />
<span className="text-sm text-foreground-secondary">{iconName}</span>
</div>
))}
</div>
),
};
export const AllSizes: Story = {
render: () => (
<div className="flex items-center gap-6">
{(["sm", "md", "lg"] as const).map((size) => (
<div key={size} className="flex flex-col items-center gap-2">
<Icon icon="github" size={size} />
<span className="text-sm text-foreground-secondary">{size}</span>
</div>
))}
</div>
),
render: () => (
<div className="flex items-center gap-6">
{(['sm', 'md', 'lg'] as const).map((size) => (
<div key={size} className="flex flex-col items-center gap-2">
<Icon icon="github" size={size} />
<span className="text-sm text-foreground-secondary">{size}</span>
</div>
))}
</div>
),
};
export const WithColors: Story = {
render: () => (
<div className="flex items-center gap-6">
<Icon icon="check" size="lg" className="text-success" />
<Icon icon="x" size="lg" className="text-error" />
<Icon icon="github" size="lg" className="text-info" />
<Icon icon="sun" size="lg" className="text-warning" />
</div>
),
render: () => (
<div className="flex items-center gap-6">
<Icon icon="check" size="lg" className="text-success" />
<Icon icon="x" size="lg" className="text-error" />
<Icon icon="github" size="lg" className="text-info" />
<Icon icon="sun" size="lg" className="text-warning" />
</div>
),
};

146
packages/storybook/stories/Input.stories.ts
View file

@ -1,94 +1,94 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Input } from "@tpmjs/ui/Input/Input";
import { Label } from "@tpmjs/ui/Label/Label";
import { createElement } from "react";
import type { Meta, StoryObj } from '@storybook/react';
import { Input } from '@tpmjs/ui/Input/Input';
import { Label } from '@tpmjs/ui/Label/Label';
import { createElement } from 'react';
const meta = {
title: "Components/Input",
component: Input,
tags: ["autodocs"],
parameters: {
layout: "centered",
},
title: 'Components/Input',
component: Input,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Input>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => createElement(Input, { placeholder: "Enter text..." }),
render: () => createElement(Input, { placeholder: 'Enter text...' }),
};
export const WithLabel: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-2 w-80" },
createElement(Label, { htmlFor: "email" }, "Email address"),
createElement(Input, {
id: "email",
type: "email",
placeholder: "name@example.com",
}),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-2 w-80' },
createElement(Label, { htmlFor: 'email' }, 'Email address'),
createElement(Input, {
id: 'email',
type: 'email',
placeholder: 'name@example.com',
})
),
};
export const AllStates: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-4 w-80" },
createElement(
"div",
{ className: "flex flex-col gap-2" },
createElement(Label, {}, "Normal"),
createElement(Input, { placeholder: "Normal state" }),
),
createElement(
"div",
{ className: "flex flex-col gap-2" },
createElement(Label, {}, "Success"),
createElement(Input, {
placeholder: "Success state",
state: "success",
}),
),
createElement(
"div",
{ className: "flex flex-col gap-2" },
createElement(Label, {}, "Error"),
createElement(Input, { placeholder: "Error state", state: "error" }),
),
createElement(
"div",
{ className: "flex flex-col gap-2" },
createElement(Label, {}, "Disabled"),
createElement(Input, { placeholder: "Disabled state", disabled: true }),
),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-4 w-80' },
createElement(
'div',
{ className: 'flex flex-col gap-2' },
createElement(Label, {}, 'Normal'),
createElement(Input, { placeholder: 'Normal state' })
),
createElement(
'div',
{ className: 'flex flex-col gap-2' },
createElement(Label, {}, 'Success'),
createElement(Input, {
placeholder: 'Success state',
state: 'success',
})
),
createElement(
'div',
{ className: 'flex flex-col gap-2' },
createElement(Label, {}, 'Error'),
createElement(Input, { placeholder: 'Error state', state: 'error' })
),
createElement(
'div',
{ className: 'flex flex-col gap-2' },
createElement(Label, {}, 'Disabled'),
createElement(Input, { placeholder: 'Disabled state', disabled: true })
)
),
};
export const AllSizes: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-4 w-80" },
createElement(Input, { size: "sm", placeholder: "Small size" }),
createElement(Input, { size: "md", placeholder: "Medium size" }),
createElement(Input, { size: "lg", placeholder: "Large size" }),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-4 w-80' },
createElement(Input, { size: 'sm', placeholder: 'Small size' }),
createElement(Input, { size: 'md', placeholder: 'Medium size' }),
createElement(Input, { size: 'lg', placeholder: 'Large size' })
),
};
export const PasswordInput: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-2 w-80" },
createElement(Label, { htmlFor: "password" }, "Password"),
createElement(Input, {
id: "password",
type: "password",
placeholder: "Enter password",
}),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-2 w-80' },
createElement(Label, { htmlFor: 'password' }, 'Password'),
createElement(Input, {
id: 'password',
type: 'password',
placeholder: 'Enter password',
})
),
};

96
packages/storybook/stories/ProgressBar.stories.ts
View file

@ -1,74 +1,70 @@
import type { Meta, StoryObj } from "@storybook/react";
import { ProgressBar } from "@tpmjs/ui/ProgressBar/ProgressBar";
import { createElement } from "react";
import type { Meta, StoryObj } from '@storybook/react';
import { ProgressBar } from '@tpmjs/ui/ProgressBar/ProgressBar';
import { createElement } from 'react';
const meta = {
title: "Components/ProgressBar",
component: ProgressBar,
tags: ["autodocs"],
parameters: {
layout: "centered",
},
title: 'Components/ProgressBar',
component: ProgressBar,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof ProgressBar>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () =>
createElement(
"div",
{ className: "w-80" },
createElement(ProgressBar, { value: 50 }),
),
render: () =>
createElement('div', { className: 'w-80' }, createElement(ProgressBar, { value: 50 })),
};
export const AllVariants: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-4 w-80" },
createElement(ProgressBar, { variant: "primary", value: 75 }),
createElement(ProgressBar, { variant: "success", value: 85 }),
createElement(ProgressBar, { variant: "warning", value: 60 }),
createElement(ProgressBar, { variant: "danger", value: 30 }),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-4 w-80' },
createElement(ProgressBar, { variant: 'primary', value: 75 }),
createElement(ProgressBar, { variant: 'success', value: 85 }),
createElement(ProgressBar, { variant: 'warning', value: 60 }),
createElement(ProgressBar, { variant: 'danger', value: 30 })
),
};
export const AllSizes: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-4 w-80" },
createElement(ProgressBar, { size: "sm", value: 65 }),
createElement(ProgressBar, { size: "md", value: 65 }),
createElement(ProgressBar, { size: "lg", value: 65 }),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-4 w-80' },
createElement(ProgressBar, { size: 'sm', value: 65 }),
createElement(ProgressBar, { size: 'md', value: 65 }),
createElement(ProgressBar, { size: 'lg', value: 65 })
),
};
export const WithLabel: Story = {
render: () =>
createElement(
"div",
{ className: "w-80" },
createElement(ProgressBar, { value: 75, showLabel: true }),
),
render: () =>
createElement(
'div',
{ className: 'w-80' },
createElement(ProgressBar, { value: 75, showLabel: true })
),
};
export const ZeroPercent: Story = {
render: () =>
createElement(
"div",
{ className: "w-80" },
createElement(ProgressBar, { value: 0, showLabel: true }),
),
render: () =>
createElement(
'div',
{ className: 'w-80' },
createElement(ProgressBar, { value: 0, showLabel: true })
),
};
export const HundredPercent: Story = {
render: () =>
createElement(
"div",
{ className: "w-80" },
createElement(ProgressBar, { value: 100, showLabel: true }),
),
render: () =>
createElement(
'div',
{ className: 'w-80' },
createElement(ProgressBar, { value: 100, showLabel: true })
),
};

138
packages/storybook/stories/Tabs.stories.ts
View file

@ -1,90 +1,90 @@
import type { Meta, StoryObj } from "@storybook/react";
import { type Tab, Tabs } from "@tpmjs/ui/Tabs/Tabs";
import { createElement } from "react";
import type { Meta, StoryObj } from '@storybook/react';
import { type Tab, Tabs } from '@tpmjs/ui/Tabs/Tabs';
import { createElement } from 'react';
const meta = {
title: "Components/Tabs",
component: Tabs,
tags: ["autodocs"],
parameters: {
layout: "centered",
},
title: 'Components/Tabs',
component: Tabs,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Tabs>;
export default meta;
type Story = StoryObj<typeof meta>;
const mockTabs: Tab[] = [
{ id: "overview", label: "Overview" },
{ id: "usage", label: "Usage" },
{ id: "api", label: "API" },
{ id: 'overview', label: 'Overview' },
{ id: 'usage', label: 'Usage' },
{ id: 'api', label: 'API' },
];
export const Default: Story = {
render: () =>
createElement(Tabs, {
tabs: mockTabs,
activeTab: "overview",
onTabChange: (id: string) => console.log("Tab changed:", id),
}),
render: () =>
createElement(Tabs, {
tabs: mockTabs,
activeTab: 'overview',
onTabChange: (id: string) => console.log('Tab changed:', id),
}),
};
export const AllSizes: Story = {
render: () =>
createElement(
"div",
{ className: "flex flex-col gap-8 w-full" },
createElement(Tabs, {
tabs: mockTabs,
activeTab: "overview",
size: "sm",
onTabChange: () => {},
}),
createElement(Tabs, {
tabs: mockTabs,
activeTab: "overview",
size: "md",
onTabChange: () => {},
}),
createElement(Tabs, {
tabs: mockTabs,
activeTab: "overview",
size: "lg",
onTabChange: () => {},
}),
),
render: () =>
createElement(
'div',
{ className: 'flex flex-col gap-8 w-full' },
createElement(Tabs, {
tabs: mockTabs,
activeTab: 'overview',
size: 'sm',
onTabChange: () => {},
}),
createElement(Tabs, {
tabs: mockTabs,
activeTab: 'overview',
size: 'md',
onTabChange: () => {},
}),
createElement(Tabs, {
tabs: mockTabs,
activeTab: 'overview',
size: 'lg',
onTabChange: () => {},
})
),
};
export const WithCounts: Story = {
render: () =>
createElement(Tabs, {
tabs: [
{ id: "all", label: "All Tools", count: 1234 },
{ id: "featured", label: "Featured", count: 42 },
{ id: "recent", label: "Recent", count: 18 },
],
activeTab: "all",
onTabChange: () => {},
}),
render: () =>
createElement(Tabs, {
tabs: [
{ id: 'all', label: 'All Tools', count: 1234 },
{ id: 'featured', label: 'Featured', count: 42 },
{ id: 'recent', label: 'Recent', count: 18 },
],
activeTab: 'all',
onTabChange: () => {},
}),
};
export const ManyTabs: Story = {
render: () =>
createElement(
"div",
{ className: "w-96" },
createElement(Tabs, {
tabs: [
{ id: "tab1", label: "Overview" },
{ id: "tab2", label: "Documentation" },
{ id: "tab3", label: "Examples" },
{ id: "tab4", label: "API Reference" },
{ id: "tab5", label: "Configuration" },
{ id: "tab6", label: "Changelog" },
{ id: "tab7", label: "Contributing" },
],
activeTab: "tab1",
onTabChange: () => {},
}),
),
render: () =>
createElement(
'div',
{ className: 'w-96' },
createElement(Tabs, {
tabs: [
{ id: 'tab1', label: 'Overview' },
{ id: 'tab2', label: 'Documentation' },
{ id: 'tab3', label: 'Examples' },
{ id: 'tab4', label: 'API Reference' },
{ id: 'tab5', label: 'Configuration' },
{ id: 'tab6', label: 'Changelog' },
{ id: 'tab7', label: 'Contributing' },
],
activeTab: 'tab1',
onTabChange: () => {},
})
),
};

126
packages/storybook/styles/globals.css
View file

@ -6,31 +6,31 @@
/* Light mode (default) */
:root {
/* Backgrounds & Surfaces */
--background: 0 0% 100%; /* Pure white */
--surface: 210 20% 98%; /* Off-white */
--surface-elevated: 0 0% 100%; /* White (elevated) */
--surface-overlay: 0 0% 98%; /* Light gray */
--background: 0 0% 100%; /* Pure white */
--surface: 210 20% 98%; /* Off-white */
--surface-elevated: 0 0% 100%; /* White (elevated) */
--surface-overlay: 0 0% 98%; /* Light gray */
/* Foreground (Text) */
--foreground: 222 47% 11%; /* Almost black */
--foreground: 222 47% 11%; /* Almost black */
--foreground-secondary: 215 16% 47%; /* Medium gray */
--foreground-tertiary: 215 16% 65%; /* Light gray */
--foreground-muted: 215 16% 75%; /* Very light gray */
--foreground-tertiary: 215 16% 65%; /* Light gray */
--foreground-muted: 215 16% 75%; /* Very light gray */
/* Borders */
--border: 214 32% 91%; /* Light gray */
--border-strong: 214 32% 80%; /* Medium gray */
--border-subtle: 214 20% 95%; /* Very light gray */
--border: 214 32% 91%; /* Light gray */
--border-strong: 214 32% 80%; /* Medium gray */
--border-subtle: 214 20% 95%; /* Very light gray */
/* Interactive States */
--primary: 222 47% 11%; /* Dark for light mode */
--primary-foreground: 210 40% 98%; /* Light text */
--secondary: 210 40% 96%; /* Light secondary */
--primary: 222 47% 11%; /* Dark for light mode */
--primary-foreground: 210 40% 98%; /* Light text */
--secondary: 210 40% 96%; /* Light secondary */
--secondary-foreground: 222 47% 11%; /* Dark text */
--accent: 210 40% 96%; /* Accent bg */
--accent-foreground: 222 47% 11%; /* Accent text */
--muted: 210 40% 96%; /* Muted bg */
--muted-foreground: 215 16% 47%; /* Muted text */
--accent: 210 40% 96%; /* Accent bg */
--accent-foreground: 222 47% 11%; /* Accent text */
--muted: 210 40% 96%; /* Muted bg */
--muted-foreground: 215 16% 47%; /* Muted text */
/* Status Colors */
--success: 142 71% 45%;
@ -53,7 +53,7 @@
/* Grid/Blueprint Pattern */
--grid-color: 214 32% 95%;
--grid-size: 24px; /* Grid cell size */
--grid-size: 24px; /* Grid cell size */
/* Card */
--card: 0 0% 100%;
@ -67,60 +67,60 @@
--radius: var(--radius-md);
/* Typography */
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'Geist Mono', 'SF Mono', Consolas, monospace;
--font-sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "Geist Mono", "SF Mono", Consolas, monospace;
}
/* Dark mode (opt-in) - Vercel/Cursor/Perplexity aesthetic */
.dark {
/* Backgrounds & Surfaces */
--background: 210 10% 5%; /* #0d0d0f - Almost black */
--surface: 210 10% 8%; /* #14141a - Slightly lighter */
--surface-elevated: 210 10% 12%; /* #1c1c24 - Cards, modals */
--surface-overlay: 210 10% 16%; /* #25252f - Overlays, popovers */
--background: 210 10% 5%; /* #0d0d0f - Almost black */
--surface: 210 10% 8%; /* #14141a - Slightly lighter */
--surface-elevated: 210 10% 12%; /* #1c1c24 - Cards, modals */
--surface-overlay: 210 10% 16%; /* #25252f - Overlays, popovers */
/* Foreground (Text) */
--foreground: 210 10% 90%; /* #e3e3e8 - Primary text */
--foreground: 210 10% 90%; /* #e3e3e8 - Primary text */
--foreground-secondary: 210 8% 60%; /* #949499 - Secondary text */
--foreground-tertiary: 210 6% 40%; /* #64646a - Tertiary text */
--foreground-muted: 210 6% 30%; /* #4a4a50 - Muted text */
--foreground-tertiary: 210 6% 40%; /* #64646a - Tertiary text */
--foreground-muted: 210 6% 30%; /* #4a4a50 - Muted text */
/* Borders (1px, subtle) */
--border: 210 10% 20%; /* #30303a - Default border */
--border-strong: 210 12% 30%; /* #494954 - Emphasized border */
--border-subtle: 210 8% 15%; /* #22222c - Subtle border */
--border: 210 10% 20%; /* #30303a - Default border */
--border-strong: 210 12% 30%; /* #494954 - Emphasized border */
--border-subtle: 210 8% 15%; /* #22222c - Subtle border */
/* Interactive States */
--primary: 210 10% 98%; /* White-ish for dark mode */
--primary-foreground: 210 10% 5%; /* Dark text on light bg */
--secondary: 210 10% 15%; /* Dark secondary */
--primary: 210 10% 98%; /* White-ish for dark mode */
--primary-foreground: 210 10% 5%; /* Dark text on light bg */
--secondary: 210 10% 15%; /* Dark secondary */
--secondary-foreground: 210 10% 90%; /* Light text on dark bg */
--accent: 210 10% 18%; /* Accent background */
--accent-foreground: 210 10% 95%; /* Accent text */
--muted: 210 10% 12%; /* Muted background */
--muted-foreground: 210 8% 60%; /* Muted text */
--accent: 210 10% 18%; /* Accent background */
--accent-foreground: 210 10% 95%; /* Accent text */
--muted: 210 10% 12%; /* Muted background */
--muted-foreground: 210 8% 60%; /* Muted text */
/* Status Colors (desaturated for dark mode) */
--success: 142 71% 45%; /* #10b981 - Green */
--success-foreground: 142 76% 95%; /* Light green text */
--error: 0 72% 51%; /* #ef4444 - Red */
--error-foreground: 0 86% 97%; /* Light red text */
--warning: 38 92% 50%; /* #f59e0b - Amber */
--warning-foreground: 48 96% 89%; /* Light amber text */
--info: 217 91% 60%; /* #3b82f6 - Blue */
--info-foreground: 214 95% 93%; /* Light blue text */
--success: 142 71% 45%; /* #10b981 - Green */
--success-foreground: 142 76% 95%; /* Light green text */
--error: 0 72% 51%; /* #ef4444 - Red */
--error-foreground: 0 86% 97%; /* Light red text */
--warning: 38 92% 50%; /* #f59e0b - Amber */
--warning-foreground: 48 96% 89%; /* Light amber text */
--info: 217 91% 60%; /* #3b82f6 - Blue */
--info-foreground: 214 95% 93%; /* Light blue text */
/* Destructive (legacy support) */
--destructive: 0 72% 51%;
--destructive-foreground: 0 86% 97%;
/* Form Elements */
--input: 210 10% 20%; /* Input border */
--ring: 210 10% 90%; /* Focus ring */
--ring-offset: 210 10% 5%; /* Focus ring offset */
--input: 210 10% 20%; /* Input border */
--ring: 210 10% 90%; /* Focus ring */
--ring-offset: 210 10% 5%; /* Focus ring offset */
/* Grid/Blueprint Pattern */
--grid-color: 210 10% 15%; /* Grid line color */
--grid-color: 210 10% 15%; /* Grid line color */
/* Card */
--card: 210 10% 8%;
@ -135,39 +135,34 @@
body {
@apply bg-background text-foreground;
font-family: var(--font-sans);
font-feature-settings: 'rlig' 1, 'calt' 1;
font-feature-settings: "rlig" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Grid/Blueprint background patterns */
.grid-background {
background-image:
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
background-position: -1px -1px;
}
.dotted-grid-background {
background-image:
radial-gradient(circle, hsl(var(--grid-color)) 1px, transparent 1px);
background-image: radial-gradient(circle, hsl(var(--grid-color)) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
.blueprint-background {
background-color: hsl(var(--background));
background-image:
/* Major grid lines (4x size) */
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
/* Major grid lines (4x size) */
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
/* Minor grid lines (1x size) */
linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
background-size:
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
var(--grid-size) var(--grid-size),
background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
var(--grid-size) var(--grid-size);
}
@ -178,8 +173,13 @@
}
@keyframes grid-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.6; }
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 0.6;
}
}
}

8
packages/storybook/tailwind.config.ts
View file

@ -1,7 +1,7 @@
import baseConfig from "@tpmjs/tailwind-config/base";
import type { Config } from "tailwindcss";
import baseConfig from '@tpmjs/tailwind-config/base';
import type { Config } from 'tailwindcss';
export default {
...baseConfig,
content: ["./stories/**/*.{ts,tsx}", "../ui/src/**/*.{ts,tsx}"],
...baseConfig,
content: ['./stories/**/*.{ts,tsx}', '../ui/src/**/*.{ts,tsx}'],
} satisfies Config;

4
packages/storybook/tsconfig.json
View file

@ -1,4 +1,4 @@
{
"extends": "@tpmjs/tsconfig/react-library.json",
"include": [".storybook", "stories"]
"extends": "@tpmjs/tsconfig/react-library.json",
"include": [".storybook", "stories"]
}

4
packages/test/package.json
View file

@ -5,9 +5,7 @@
"exports": {
"./vitest": "./vitest.config.ts"
},
"files": [
"vitest.config.ts"
],
"files": ["vitest.config.ts"],
"dependencies": {
"vitest": "^2.1.8"
}

4
packages/types/package.json
View file

@ -12,9 +12,7 @@
"default": "./dist/registry.js"
}
},
"files": [
"dist"
],
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch",

56
packages/ui/eslint.config.mjs
View file

@ -1,31 +1,31 @@
import reactConfig from "@tpmjs/eslint-config/react.js";
import reactConfig from '@tpmjs/eslint-config/react.js';
export default [
{
ignores: ["dist/**", "node_modules/**", "eslint.config.mjs"],
},
...reactConfig,
{
rules: {
"import/no-internal-modules": [
"error",
{
allow: [
"@tpmjs/ui/*/[!index]*",
"@tpmjs/utils/*",
"@tpmjs/types/*",
"@tpmjs/eslint-config/*",
"@testing-library/**",
"react/*",
],
},
],
},
},
{
files: ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
rules: {
"jsx-a11y/no-autofocus": "off",
},
},
{
ignores: ['dist/**', 'node_modules/**', 'eslint.config.mjs'],
},
...reactConfig,
{
rules: {
'import/no-internal-modules': [
'error',
{
allow: [
'@tpmjs/ui/*/[!index]*',
'@tpmjs/utils/*',
'@tpmjs/types/*',
'@tpmjs/eslint-config/*',
'@testing-library/**',
'react/*',
],
},
],
},
},
{
files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
rules: {
'jsx-a11y/no-autofocus': 'off',
},
},
];

188
packages/ui/package.json
View file

@ -1,96 +1,96 @@
{
"name": "@tpmjs/ui",
"version": "0.1.3",
"type": "module",
"exports": {
"./Button/Button": {
"types": "./dist/Button/Button.d.ts",
"default": "./dist/Button/Button.js"
},
"./Card/Card": {
"types": "./dist/Card/Card.d.ts",
"default": "./dist/Card/Card.js"
},
"./Input/Input": {
"types": "./dist/Input/Input.d.ts",
"default": "./dist/Input/Input.js"
},
"./Label/Label": {
"types": "./dist/Label/Label.d.ts",
"default": "./dist/Label/Label.js"
},
"./Badge/Badge": {
"types": "./dist/Badge/Badge.d.ts",
"default": "./dist/Badge/Badge.js"
},
"./Container/Container": {
"types": "./dist/Container/Container.d.ts",
"default": "./dist/Container/Container.js"
},
"./Icon/Icon": {
"types": "./dist/Icon/Icon.d.ts",
"default": "./dist/Icon/Icon.js"
},
"./ProgressBar/ProgressBar": {
"types": "./dist/ProgressBar/ProgressBar.d.ts",
"default": "./dist/ProgressBar/ProgressBar.js"
},
"./CodeBlock/CodeBlock": {
"types": "./dist/CodeBlock/CodeBlock.d.ts",
"default": "./dist/CodeBlock/CodeBlock.js"
},
"./Tabs/Tabs": {
"types": "./dist/Tabs/Tabs.d.ts",
"default": "./dist/Tabs/Tabs.js"
},
"./Header/Header": {
"types": "./dist/Header/Header.d.ts",
"default": "./dist/Header/Header.js"
},
"./Section/Section": {
"types": "./dist/Section/Section.d.ts",
"default": "./dist/Section/Section.js"
},
"./GridContainer/GridContainer": {
"types": "./dist/GridContainer/GridContainer.d.ts",
"default": "./dist/GridContainer/GridContainer.js"
}
},
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch",
"test": "vitest run",
"test:ui": "vitest --ui",
"type-check": "tsc --noEmit",
"lint": "eslint .",
"clean": "rm -rf dist .turbo"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"dependencies": {
"@tpmjs/utils": "workspace:*"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0",
"@tpmjs/eslint-config": "workspace:*",
"@tpmjs/test": "workspace:*",
"@tpmjs/tsconfig": "workspace:*",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"eslint": "^9.39.1",
"glob": "^13.0.0",
"happy-dom": "^15.11.7",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tsup": "^8.3.5",
"typescript": "^5.9.3",
"vitest": "^2.1.8"
},
"publishConfig": {
"access": "public"
}
"name": "@tpmjs/ui",
"version": "0.1.3",
"type": "module",
"exports": {
"./Button/Button": {
"types": "./dist/Button/Button.d.ts",
"default": "./dist/Button/Button.js"
},
"./Card/Card": {
"types": "./dist/Card/Card.d.ts",
"default": "./dist/Card/Card.js"
},
"./Input/Input": {
"types": "./dist/Input/Input.d.ts",
"default": "./dist/Input/Input.js"
},
"./Label/Label": {
"types": "./dist/Label/Label.d.ts",
"default": "./dist/Label/Label.js"
},
"./Badge/Badge": {
"types": "./dist/Badge/Badge.d.ts",
"default": "./dist/Badge/Badge.js"
},
"./Container/Container": {
"types": "./dist/Container/Container.d.ts",
"default": "./dist/Container/Container.js"
},
"./Icon/Icon": {
"types": "./dist/Icon/Icon.d.ts",
"default": "./dist/Icon/Icon.js"
},
"./ProgressBar/ProgressBar": {
"types": "./dist/ProgressBar/ProgressBar.d.ts",
"default": "./dist/ProgressBar/ProgressBar.js"
},
"./CodeBlock/CodeBlock": {
"types": "./dist/CodeBlock/CodeBlock.d.ts",
"default": "./dist/CodeBlock/CodeBlock.js"
},
"./Tabs/Tabs": {
"types": "./dist/Tabs/Tabs.d.ts",
"default": "./dist/Tabs/Tabs.js"
},
"./Header/Header": {
"types": "./dist/Header/Header.d.ts",
"default": "./dist/Header/Header.js"
},
"./Section/Section": {
"types": "./dist/Section/Section.d.ts",
"default": "./dist/Section/Section.js"
},
"./GridContainer/GridContainer": {
"types": "./dist/GridContainer/GridContainer.d.ts",
"default": "./dist/GridContainer/GridContainer.js"
}
},
"files": ["dist"],
"scripts": {
"build": "tsup",
"dev": "tsup --watch",
"test": "vitest run",
"test:ui": "vitest --ui",
"type-check": "tsc --noEmit",
"lint": "eslint .",
"clean": "rm -rf dist .turbo"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"dependencies": {
"@tpmjs/utils": "workspace:*"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0",
"@tpmjs/eslint-config": "workspace:*",
"@tpmjs/test": "workspace:*",
"@tpmjs/tsconfig": "workspace:*",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"eslint": "^9.39.1",
"glob": "^13.0.0",
"happy-dom": "^15.11.7",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tsup": "^8.3.5",
"typescript": "^5.9.3",
"vitest": "^2.1.8"
},
"publishConfig": {
"access": "public"
}
}

716
packages/ui/src/Badge/Badge.test.tsx
View file

@ -1,400 +1,386 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Badge } from "./Badge";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Badge } from './Badge';
describe("Badge", () => {
describe("Rendering", () => {
it("renders a badge element", () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId("badge");
expect(badge).toBeInTheDocument();
expect(badge.tagName).toBe("DIV");
});
describe('Badge', () => {
describe('Rendering', () => {
it('renders a badge element', () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId('badge');
expect(badge).toBeInTheDocument();
expect(badge.tagName).toBe('DIV');
});
it("renders children text", () => {
render(<Badge>Active</Badge>);
expect(screen.getByText("Active")).toBeInTheDocument();
});
});
it('renders children text', () => {
render(<Badge>Active</Badge>);
expect(screen.getByText('Active')).toBeInTheDocument();
});
});
describe("Variants", () => {
it("applies default variant classes", () => {
render(
<Badge variant="default" data-testid="badge">
Default
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-primary");
expect(badge.className).toContain("text-primary-foreground");
expect(badge.className).toContain("border-primary");
});
describe('Variants', () => {
it('applies default variant classes', () => {
render(
<Badge variant="default" data-testid="badge">
Default
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-primary');
expect(badge.className).toContain('text-primary-foreground');
expect(badge.className).toContain('border-primary');
});
it("applies secondary variant classes", () => {
render(
<Badge variant="secondary" data-testid="badge">
Secondary
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-secondary");
expect(badge.className).toContain("text-secondary-foreground");
});
it('applies secondary variant classes', () => {
render(
<Badge variant="secondary" data-testid="badge">
Secondary
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-secondary');
expect(badge.className).toContain('text-secondary-foreground');
});
it("applies outline variant classes", () => {
render(
<Badge variant="outline" data-testid="badge">
Outline
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-transparent");
expect(badge.className).toContain("text-foreground");
expect(badge.className).toContain("border-border");
});
it('applies outline variant classes', () => {
render(
<Badge variant="outline" data-testid="badge">
Outline
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-transparent');
expect(badge.className).toContain('text-foreground');
expect(badge.className).toContain('border-border');
});
it("applies success variant classes", () => {
render(
<Badge variant="success" data-testid="badge">
Success
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-success");
expect(badge.className).toContain("text-success-foreground");
});
it('applies success variant classes', () => {
render(
<Badge variant="success" data-testid="badge">
Success
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-success');
expect(badge.className).toContain('text-success-foreground');
});
it("applies error variant classes", () => {
render(
<Badge variant="error" data-testid="badge">
Error
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-error");
expect(badge.className).toContain("text-error-foreground");
});
it('applies error variant classes', () => {
render(
<Badge variant="error" data-testid="badge">
Error
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-error');
expect(badge.className).toContain('text-error-foreground');
});
it("applies warning variant classes", () => {
render(
<Badge variant="warning" data-testid="badge">
Warning
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-warning");
expect(badge.className).toContain("text-warning-foreground");
});
it('applies warning variant classes', () => {
render(
<Badge variant="warning" data-testid="badge">
Warning
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-warning');
expect(badge.className).toContain('text-warning-foreground');
});
it("applies info variant classes", () => {
render(
<Badge variant="info" data-testid="badge">
Info
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-info");
expect(badge.className).toContain("text-info-foreground");
});
});
it('applies info variant classes', () => {
render(
<Badge variant="info" data-testid="badge">
Info
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-info');
expect(badge.className).toContain('text-info-foreground');
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(
<Badge size="sm" data-testid="badge">
Small
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("px-2");
expect(badge.className).toContain("py-0.5");
expect(badge.className).toContain("text-xs");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(
<Badge size="sm" data-testid="badge">
Small
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('px-2');
expect(badge.className).toContain('py-0.5');
expect(badge.className).toContain('text-xs');
});
it("applies medium size classes (default)", () => {
render(
<Badge size="md" data-testid="badge">
Medium
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("px-2.5");
expect(badge.className).toContain("py-1");
expect(badge.className).toContain("text-sm");
});
it('applies medium size classes (default)', () => {
render(
<Badge size="md" data-testid="badge">
Medium
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('px-2.5');
expect(badge.className).toContain('py-1');
expect(badge.className).toContain('text-sm');
});
it("applies large size classes", () => {
render(
<Badge size="lg" data-testid="badge">
Large
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("px-3");
expect(badge.className).toContain("py-1.5");
expect(badge.className).toContain("text-base");
});
it('applies large size classes', () => {
render(
<Badge size="lg" data-testid="badge">
Large
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('px-3');
expect(badge.className).toContain('py-1.5');
expect(badge.className).toContain('text-base');
});
it("uses medium size by default", () => {
render(<Badge data-testid="badge">Default</Badge>);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("text-sm");
});
});
it('uses medium size by default', () => {
render(<Badge data-testid="badge">Default</Badge>);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('text-sm');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<Badge id="badge-id" data-testid="badge">
Badge
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("id", "badge-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<Badge id="badge-id" data-testid="badge">
Badge
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('id', 'badge-id');
});
it("passes through title attribute", () => {
render(
<Badge title="Badge tooltip" data-testid="badge">
Badge
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("title", "Badge tooltip");
});
it('passes through title attribute', () => {
render(
<Badge title="Badge tooltip" data-testid="badge">
Badge
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('title', 'Badge tooltip');
});
it("passes through onClick handler", () => {
let clicked = false;
render(
<Badge
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Clickable
</Badge>,
);
const badge = screen.getByTestId("badge");
badge.click();
expect(clicked).toBe(true);
});
it('passes through onClick handler', () => {
let clicked = false;
render(
<Badge
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Clickable
</Badge>
);
const badge = screen.getByTestId('badge');
badge.click();
expect(clicked).toBe(true);
});
it("passes through role attribute", () => {
render(
<Badge role="status" data-testid="badge">
Status
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("role", "status");
});
});
it('passes through role attribute', () => {
render(
<Badge role="status" data-testid="badge">
Status
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('role', 'status');
});
});
describe("ARIA Attributes", () => {
it("passes through aria-label", () => {
render(
<Badge aria-label="Status badge" data-testid="badge">
Active
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-label", "Status badge");
});
describe('ARIA Attributes', () => {
it('passes through aria-label', () => {
render(
<Badge aria-label="Status badge" data-testid="badge">
Active
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-label', 'Status badge');
});
it("passes through aria-describedby", () => {
render(
<Badge aria-describedby="description-id" data-testid="badge">
Badge
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-describedby", "description-id");
});
it('passes through aria-describedby', () => {
render(
<Badge aria-describedby="description-id" data-testid="badge">
Badge
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-describedby', 'description-id');
});
it("passes through aria-live for dynamic status", () => {
render(
<Badge aria-live="polite" data-testid="badge">
Updating
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-live", "polite");
});
});
it('passes through aria-live for dynamic status', () => {
render(
<Badge aria-live="polite" data-testid="badge">
Updating
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-live', 'polite');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Badge className="custom-badge" data-testid="badge">
Custom
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("custom-badge");
expect(badge.className).toContain("rounded-full");
expect(badge.className).toContain("bg-primary");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Badge className="custom-badge" data-testid="badge">
Custom
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('custom-badge');
expect(badge.className).toContain('rounded-full');
expect(badge.className).toContain('bg-primary');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to badge element", () => {
let ref: HTMLDivElement | null = null;
render(
<Badge
ref={(el) => {
ref = el;
}}
>
Badge
</Badge>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe("DIV");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to badge element', () => {
let ref: HTMLDivElement | null = null;
render(
<Badge
ref={(el) => {
ref = el;
}}
>
Badge
</Badge>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe('DIV');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("inline-flex");
expect(badge.className).toContain("items-center");
expect(badge.className).toContain("font-semibold");
expect(badge.className).toContain("whitespace-nowrap");
expect(badge.className).toContain("rounded-full");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('inline-flex');
expect(badge.className).toContain('items-center');
expect(badge.className).toContain('font-semibold');
expect(badge.className).toContain('whitespace-nowrap');
expect(badge.className).toContain('rounded-full');
});
it("includes transition classes", () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("transition-base");
});
});
it('includes transition classes', () => {
render(<Badge data-testid="badge">Badge</Badge>);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('transition-base');
});
});
describe("Compound Scenarios", () => {
it("works correctly with success variant and small size", () => {
render(
<Badge variant="success" size="sm" data-testid="badge">
Success
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-success");
expect(badge.className).toContain("text-xs");
});
describe('Compound Scenarios', () => {
it('works correctly with success variant and small size', () => {
render(
<Badge variant="success" size="sm" data-testid="badge">
Success
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-success');
expect(badge.className).toContain('text-xs');
});
it("works correctly with error variant and large size", () => {
render(
<Badge variant="error" size="lg" data-testid="badge">
Error
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-error");
expect(badge.className).toContain("text-base");
});
it('works correctly with error variant and large size', () => {
render(
<Badge variant="error" size="lg" data-testid="badge">
Error
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-error');
expect(badge.className).toContain('text-base');
});
it("works correctly with outline variant and custom className", () => {
render(
<Badge
variant="outline"
className="hover:bg-accent"
data-testid="badge"
>
Outlined
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-transparent");
expect(badge.className).toContain("hover:bg-accent");
});
it('works correctly with outline variant and custom className', () => {
render(
<Badge variant="outline" className="hover:bg-accent" data-testid="badge">
Outlined
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-transparent');
expect(badge.className).toContain('hover:bg-accent');
});
it("works correctly with warning variant and onClick", () => {
let clicked = false;
render(
<Badge
variant="warning"
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Warning
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-warning");
badge.click();
expect(clicked).toBe(true);
});
});
it('works correctly with warning variant and onClick', () => {
let clicked = false;
render(
<Badge
variant="warning"
onClick={() => {
clicked = true;
}}
data-testid="badge"
>
Warning
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-warning');
badge.click();
expect(clicked).toBe(true);
});
});
describe("Content Types", () => {
it("renders with text content", () => {
render(<Badge>Text</Badge>);
expect(screen.getByText("Text")).toBeInTheDocument();
});
describe('Content Types', () => {
it('renders with text content', () => {
render(<Badge>Text</Badge>);
expect(screen.getByText('Text')).toBeInTheDocument();
});
it("renders with numeric content", () => {
render(<Badge>42</Badge>);
expect(screen.getByText("42")).toBeInTheDocument();
});
it('renders with numeric content', () => {
render(<Badge>42</Badge>);
expect(screen.getByText('42')).toBeInTheDocument();
});
it("renders with multiple children", () => {
render(
<Badge>
Count: <strong>5</strong>
</Badge>,
);
expect(screen.getByText("Count:")).toBeInTheDocument();
expect(screen.getByText("5")).toBeInTheDocument();
});
});
it('renders with multiple children', () => {
render(
<Badge>
Count: <strong>5</strong>
</Badge>
);
expect(screen.getByText('Count:')).toBeInTheDocument();
expect(screen.getByText('5')).toBeInTheDocument();
});
});
describe("Semantic Usage", () => {
it("can be used as status indicator with role", () => {
render(
<Badge
variant="success"
role="status"
aria-label="Online status"
data-testid="badge"
>
Online
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("role", "status");
expect(badge).toHaveAttribute("aria-label", "Online status");
expect(badge.className).toContain("bg-success");
});
describe('Semantic Usage', () => {
it('can be used as status indicator with role', () => {
render(
<Badge variant="success" role="status" aria-label="Online status" data-testid="badge">
Online
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('role', 'status');
expect(badge).toHaveAttribute('aria-label', 'Online status');
expect(badge.className).toContain('bg-success');
});
it("can be used as notification count", () => {
render(
<Badge
variant="error"
size="sm"
aria-label="3 unread messages"
data-testid="badge"
>
3
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge).toHaveAttribute("aria-label", "3 unread messages");
expect(screen.getByText("3")).toBeInTheDocument();
});
it('can be used as notification count', () => {
render(
<Badge variant="error" size="sm" aria-label="3 unread messages" data-testid="badge">
3
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge).toHaveAttribute('aria-label', '3 unread messages');
expect(screen.getByText('3')).toBeInTheDocument();
});
it("can be used as tag/label", () => {
render(
<Badge variant="outline" data-testid="badge">
TypeScript
</Badge>,
);
const badge = screen.getByTestId("badge");
expect(badge.className).toContain("bg-transparent");
expect(screen.getByText("TypeScript")).toBeInTheDocument();
});
});
it('can be used as tag/label', () => {
render(
<Badge variant="outline" data-testid="badge">
TypeScript
</Badge>
);
const badge = screen.getByTestId('badge');
expect(badge.className).toContain('bg-transparent');
expect(screen.getByText('TypeScript')).toBeInTheDocument();
});
});
});

40
packages/ui/src/Badge/Badge.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { BadgeProps } from "./types";
import { badgeVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { BadgeProps } from './types';
import { badgeVariants } from './variants';
/**
* Badge component
@ -18,21 +18,21 @@ import { badgeVariants } from "./variants";
* ```
*/
export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
({ className, variant = "default", size = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
badgeVariants({
variant,
size,
}),
className,
)}
{...props}
/>
);
},
({ className, variant = 'default', size = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
badgeVariants({
variant,
size,
}),
className
)}
{...props}
/>
);
}
);
Badge.displayName = "Badge";
Badge.displayName = 'Badge';

60
packages/ui/src/Badge/tokens.ts
View file

@ -1,41 +1,41 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Badge component design tokens
* Maps global tokens to badge-specific semantics
*/
export const badgeTokens = {
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
y: {
sm: spacing[0.5], // 0.125rem (2px)
md: spacing[1], // 0.25rem (4px)
lg: spacing[1.5], // 0.375rem (6px)
},
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
y: {
sm: spacing[0.5], // 0.125rem (2px)
md: spacing[1], // 0.25rem (4px)
lg: spacing[1.5], // 0.375rem (6px)
},
},
/** Font sizes for each size */
fontSize: {
sm: "0.75rem", // 12px
md: "0.875rem", // 14px
lg: "1rem", // 16px
},
/** Font sizes for each size */
fontSize: {
sm: '0.75rem', // 12px
md: '0.875rem', // 14px
lg: '1rem', // 16px
},
/** Line heights for each size */
lineHeight: {
sm: "1rem", // 16px
md: "1.25rem", // 20px
lg: "1.5rem", // 24px
},
/** Line heights for each size */
lineHeight: {
sm: '1rem', // 16px
md: '1.25rem', // 20px
lg: '1.5rem', // 24px
},
/** Border radius */
borderRadius: borderRadius.full,
/** Border radius */
borderRadius: borderRadius.full,
/** Border width */
borderWidth: "1px",
/** Border width */
borderWidth: '1px',
} as const;

29
packages/ui/src/Badge/types.ts
View file

@ -1,27 +1,20 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Badge component props
*/
export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
/**
* Visual variant of the badge
* @default 'default'
*/
variant?:
| "default"
| "secondary"
| "outline"
| "success"
| "error"
| "warning"
| "info";
/**
* Visual variant of the badge
* @default 'default'
*/
variant?: 'default' | 'secondary' | 'outline' | 'success' | 'error' | 'warning' | 'info';
/**
* Size of the badge
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the badge
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
}
/**

82
packages/ui/src/Badge/variants.ts
View file

@ -1,66 +1,50 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Badge variant definitions
* Uses custom variant system for type-safe class composition
*/
export const badgeVariants = createVariants({
base: [
// Layout
"inline-flex items-center",
// Typography
"font-semibold",
"whitespace-nowrap",
// Borders & Radius
"rounded-full",
// Transitions
"transition-base",
].join(" "),
base: [
// Layout
'inline-flex items-center',
// Typography
'font-semibold',
'whitespace-nowrap',
// Borders & Radius
'rounded-full',
// Transitions
'transition-base',
].join(' '),
variants: {
variant: {
default: [
"bg-primary text-primary-foreground",
"border border-primary",
].join(" "),
variants: {
variant: {
default: ['bg-primary text-primary-foreground', 'border border-primary'].join(' '),
secondary: [
"bg-secondary text-secondary-foreground",
"border border-secondary",
].join(" "),
secondary: ['bg-secondary text-secondary-foreground', 'border border-secondary'].join(' '),
outline: ["bg-transparent text-foreground", "border border-border"].join(
" ",
),
outline: ['bg-transparent text-foreground', 'border border-border'].join(' '),
success: [
"bg-success text-success-foreground",
"border border-success",
].join(" "),
success: ['bg-success text-success-foreground', 'border border-success'].join(' '),
error: ["bg-error text-error-foreground", "border border-error"].join(
" ",
),
error: ['bg-error text-error-foreground', 'border border-error'].join(' '),
warning: [
"bg-warning text-warning-foreground",
"border border-warning",
].join(" "),
warning: ['bg-warning text-warning-foreground', 'border border-warning'].join(' '),
info: ["bg-info text-info-foreground", "border border-info"].join(" "),
},
info: ['bg-info text-info-foreground', 'border border-info'].join(' '),
},
size: {
sm: "px-2 py-0.5 text-xs",
md: "px-2.5 py-1 text-sm",
lg: "px-3 py-1.5 text-base",
},
},
size: {
sm: 'px-2 py-0.5 text-xs',
md: 'px-2.5 py-1 text-sm',
lg: 'px-3 py-1.5 text-base',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
variant: "default",
size: "md",
},
defaultVariants: {
variant: 'default',
size: 'md',
},
});

601
packages/ui/src/Button/Button.test.tsx
View file

@ -1,338 +1,331 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Button } from "./Button";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Button } from './Button';
describe("Button", () => {
describe("Rendering", () => {
it("renders with default variant and size", () => {
render(<Button>Click me</Button>);
const button = screen.getByRole("button");
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent("Click me");
});
describe('Button', () => {
describe('Rendering', () => {
it('renders with default variant and size', () => {
render(<Button>Click me</Button>);
const button = screen.getByRole('button');
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent('Click me');
});
it("renders as a button element", () => {
render(<Button>Test</Button>);
expect(screen.getByRole("button").tagName).toBe("BUTTON");
});
});
it('renders as a button element', () => {
render(<Button>Test</Button>);
expect(screen.getByRole('button').tagName).toBe('BUTTON');
});
});
describe("Variants", () => {
it("applies default variant classes", () => {
render(
<Button variant="default" data-testid="button">
Default
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("bg-primary");
expect(button.className).toContain("text-primary-foreground");
});
describe('Variants', () => {
it('applies default variant classes', () => {
render(
<Button variant="default" data-testid="button">
Default
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('bg-primary');
expect(button.className).toContain('text-primary-foreground');
});
it("applies destructive variant classes", () => {
render(
<Button variant="destructive" data-testid="button">
Delete
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("bg-error");
expect(button.className).toContain("text-error-foreground");
});
it('applies destructive variant classes', () => {
render(
<Button variant="destructive" data-testid="button">
Delete
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('bg-error');
expect(button.className).toContain('text-error-foreground');
});
it("applies outline variant classes", () => {
render(
<Button variant="outline" data-testid="button">
Outline
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("border");
expect(button.className).toContain("bg-transparent");
});
it('applies outline variant classes', () => {
render(
<Button variant="outline" data-testid="button">
Outline
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('border');
expect(button.className).toContain('bg-transparent');
});
it("applies secondary variant classes", () => {
render(
<Button variant="secondary" data-testid="button">
Secondary
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("bg-secondary");
expect(button.className).toContain("text-secondary-foreground");
});
it('applies secondary variant classes', () => {
render(
<Button variant="secondary" data-testid="button">
Secondary
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('bg-secondary');
expect(button.className).toContain('text-secondary-foreground');
});
it("applies ghost variant classes", () => {
render(
<Button variant="ghost" data-testid="button">
Ghost
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("hover:bg-accent");
});
it('applies ghost variant classes', () => {
render(
<Button variant="ghost" data-testid="button">
Ghost
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('hover:bg-accent');
});
it("applies link variant classes", () => {
render(
<Button variant="link" data-testid="button">
Link
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("text-primary");
expect(button.className).toContain("underline-offset-4");
});
});
it('applies link variant classes', () => {
render(
<Button variant="link" data-testid="button">
Link
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('text-primary');
expect(button.className).toContain('underline-offset-4');
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(
<Button size="sm" data-testid="button">
Small
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-9");
expect(button.className).toContain("px-3");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(
<Button size="sm" data-testid="button">
Small
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-9');
expect(button.className).toContain('px-3');
});
it("applies medium size classes (default)", () => {
render(
<Button size="md" data-testid="button">
Medium
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-10");
expect(button.className).toContain("px-4");
});
it('applies medium size classes (default)', () => {
render(
<Button size="md" data-testid="button">
Medium
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-10');
expect(button.className).toContain('px-4');
});
it("applies large size classes", () => {
render(
<Button size="lg" data-testid="button">
Large
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-11");
expect(button.className).toContain("px-8");
});
it('applies large size classes', () => {
render(
<Button size="lg" data-testid="button">
Large
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-11');
expect(button.className).toContain('px-8');
});
it("applies icon size classes", () => {
render(
<Button size="icon" data-testid="button" aria-label="Icon button" />,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("h-10");
expect(button.className).toContain("w-10");
});
});
it('applies icon size classes', () => {
render(<Button size="icon" data-testid="button" aria-label="Icon button" />);
const button = screen.getByTestId('button');
expect(button.className).toContain('h-10');
expect(button.className).toContain('w-10');
});
});
describe("Compound Variants", () => {
it("applies compound variant for outline + small", () => {
render(
<Button variant="outline" size="sm" data-testid="button">
Small Outline
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("border");
expect(button.className).toContain("h-9");
});
describe('Compound Variants', () => {
it('applies compound variant for outline + small', () => {
render(
<Button variant="outline" size="sm" data-testid="button">
Small Outline
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('border');
expect(button.className).toContain('h-9');
});
it("applies compound variant for link variants (removes padding)", () => {
render(
<Button variant="link" size="md" data-testid="button">
Link
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("px-0");
});
});
it('applies compound variant for link variants (removes padding)', () => {
render(
<Button variant="link" size="md" data-testid="button">
Link
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('px-0');
});
});
describe("Loading State", () => {
it("shows loading spinner when loading is true", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
describe('Loading State', () => {
it('shows loading spinner when loading is true', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
// Should have loading indicator
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toBeInTheDocument();
expect(spinner?.className).toContain("animate-spin");
});
// Should have loading indicator
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toBeInTheDocument();
expect(spinner?.className).toContain('animate-spin');
});
it("disables button when loading", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
expect(button).toHaveAttribute("aria-busy", "true");
});
it('disables button when loading', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-busy', 'true');
});
it("applies cursor-wait class when loading", () => {
render(
<Button loading data-testid="button">
Loading
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("cursor-wait");
});
it('applies cursor-wait class when loading', () => {
render(
<Button loading data-testid="button">
Loading
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('cursor-wait');
});
it("still shows children text when loading", () => {
render(<Button loading>Processing</Button>);
expect(screen.getByText("Processing")).toBeInTheDocument();
});
});
it('still shows children text when loading', () => {
render(<Button loading>Processing</Button>);
expect(screen.getByText('Processing')).toBeInTheDocument();
});
});
describe("Disabled State", () => {
it("disables button when disabled prop is true", () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
expect(button).toHaveAttribute("aria-disabled", "true");
});
describe('Disabled State', () => {
it('disables button when disabled prop is true', () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
});
it("applies disabled opacity class", () => {
render(
<Button disabled data-testid="button">
Disabled
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("disabled:opacity-50");
expect(button.className).toContain("disabled:pointer-events-none");
});
it('applies disabled opacity class', () => {
render(
<Button disabled data-testid="button">
Disabled
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('disabled:opacity-50');
expect(button.className).toContain('disabled:pointer-events-none');
});
it("is disabled when both disabled and loading are true", () => {
render(
<Button disabled loading>
Both
</Button>,
);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
});
});
it('is disabled when both disabled and loading are true', () => {
render(
<Button disabled loading>
Both
</Button>
);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Button className="custom-class" data-testid="button">
Custom
</Button>,
);
const button = screen.getByTestId("button");
expect(button.className).toContain("custom-class");
expect(button.className).toContain("bg-primary");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Button className="custom-class" data-testid="button">
Custom
</Button>
);
const button = screen.getByTestId('button');
expect(button.className).toContain('custom-class');
expect(button.className).toContain('bg-primary');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to button element", () => {
let ref: HTMLButtonElement | null = null;
render(
<Button
ref={(el) => {
ref = el;
}}
>
Ref Test
</Button>,
);
expect(ref).toBeInstanceOf(HTMLButtonElement);
expect(ref!.tagName).toBe("BUTTON");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to button element', () => {
let ref: HTMLButtonElement | null = null;
render(
<Button
ref={(el) => {
ref = el;
}}
>
Ref Test
</Button>
);
expect(ref).toBeInstanceOf(HTMLButtonElement);
expect(ref!.tagName).toBe('BUTTON');
});
});
describe("HTML Attributes", () => {
it("passes through HTML button attributes", () => {
render(
<Button
type="submit"
name="test-button"
value="test-value"
data-testid="button"
>
Submit
</Button>,
);
const button = screen.getByTestId("button");
expect(button).toHaveAttribute("type", "submit");
expect(button).toHaveAttribute("name", "test-button");
expect(button).toHaveAttribute("value", "test-value");
});
describe('HTML Attributes', () => {
it('passes through HTML button attributes', () => {
render(
<Button type="submit" name="test-button" value="test-value" data-testid="button">
Submit
</Button>
);
const button = screen.getByTestId('button');
expect(button).toHaveAttribute('type', 'submit');
expect(button).toHaveAttribute('name', 'test-button');
expect(button).toHaveAttribute('value', 'test-value');
});
it("supports onClick handler", () => {
let clicked = false;
render(
<Button
onClick={() => {
clicked = true;
}}
>
Click
</Button>,
);
const button = screen.getByRole("button");
button.click();
expect(clicked).toBe(true);
});
});
it('supports onClick handler', () => {
let clicked = false;
render(
<Button
onClick={() => {
clicked = true;
}}
>
Click
</Button>
);
const button = screen.getByRole('button');
button.click();
expect(clicked).toBe(true);
});
});
describe("Accessibility", () => {
it("has proper ARIA attributes for loading state", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
expect(button).toHaveAttribute("aria-busy", "true");
expect(button).toHaveAttribute("aria-disabled", "true");
});
describe('Accessibility', () => {
it('has proper ARIA attributes for loading state', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
expect(button).toHaveAttribute('aria-busy', 'true');
expect(button).toHaveAttribute('aria-disabled', 'true');
});
it("has proper ARIA attributes for disabled state", () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole("button");
expect(button).toHaveAttribute("aria-disabled", "true");
});
it('has proper ARIA attributes for disabled state', () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole('button');
expect(button).toHaveAttribute('aria-disabled', 'true');
});
it("hides loading spinner from screen readers", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toHaveAttribute("aria-hidden", "true");
});
it('hides loading spinner from screen readers', () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole('button');
const spinner = button.querySelector('[aria-hidden="true"]');
expect(spinner).toHaveAttribute('aria-hidden', 'true');
});
it("supports aria-label for icon buttons", () => {
render(
<Button size="icon" aria-label="Close dialog">
X
</Button>,
);
const button = screen.getByRole("button");
expect(button).toHaveAccessibleName("Close dialog");
});
});
it('supports aria-label for icon buttons', () => {
render(
<Button size="icon" aria-label="Close dialog">
X
</Button>
);
const button = screen.getByRole('button');
expect(button).toHaveAccessibleName('Close dialog');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Button data-testid="button">Base</Button>);
const button = screen.getByTestId("button");
expect(button.className).toContain("inline-flex");
expect(button.className).toContain("items-center");
expect(button.className).toContain("justify-center");
expect(button.className).toContain("font-medium");
expect(button.className).toContain("rounded-md");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Button data-testid="button">Base</Button>);
const button = screen.getByTestId('button');
expect(button.className).toContain('inline-flex');
expect(button.className).toContain('items-center');
expect(button.className).toContain('justify-center');
expect(button.className).toContain('font-medium');
expect(button.className).toContain('rounded-md');
});
it("includes focus ring classes", () => {
render(<Button data-testid="button">Focus</Button>);
const button = screen.getByTestId("button");
expect(button.className).toContain("focus-ring");
});
it('includes focus ring classes', () => {
render(<Button data-testid="button">Focus</Button>);
const button = screen.getByTestId('button');
expect(button.className).toContain('focus-ring');
});
it("includes transition classes", () => {
render(<Button data-testid="button">Transition</Button>);
const button = screen.getByTestId("button");
expect(button.className).toContain("transition-base");
});
});
it('includes transition classes', () => {
render(<Button data-testid="button">Transition</Button>);
const button = screen.getByTestId('button');
expect(button.className).toContain('transition-base');
});
});
});

96
packages/ui/src/Button/Button.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { ButtonProps } from "./types";
import { buttonVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { ButtonProps } from './types';
import { buttonVariants } from './variants';
/**
* Button component
@ -26,49 +26,49 @@ import { buttonVariants } from "./variants";
* ```
*/
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
className,
variant = "default",
size = "md",
loading = false,
disabled = false,
children,
...props
},
ref,
) => {
return (
<button
ref={ref}
type="button"
className={cn(
buttonVariants({
variant,
size,
loading: loading ? "true" : "false",
}),
className,
)}
disabled={disabled || loading}
aria-disabled={disabled || loading ? "true" : undefined}
aria-busy={loading ? "true" : undefined}
{...props}
>
{loading ? (
<span className="flex items-center gap-2">
<span
className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
aria-hidden="true"
/>
<span>{children}</span>
</span>
) : (
children
)}
</button>
);
},
(
{
className,
variant = 'default',
size = 'md',
loading = false,
disabled = false,
children,
...props
},
ref
) => {
return (
<button
ref={ref}
type="button"
className={cn(
buttonVariants({
variant,
size,
loading: loading ? 'true' : 'false',
}),
className
)}
disabled={disabled || loading}
aria-disabled={disabled || loading ? 'true' : undefined}
aria-busy={loading ? 'true' : undefined}
{...props}
>
{loading ? (
<span className="flex items-center gap-2">
<span
className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
aria-hidden="true"
/>
<span>{children}</span>
</span>
) : (
children
)}
</button>
);
}
);
Button.displayName = "Button";
Button.displayName = 'Button';

44
packages/ui/src/Button/tokens.ts
View file

@ -1,33 +1,33 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Button component design tokens
* Maps global tokens to button-specific semantics
*/
export const buttonTokens = {
/** Button heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
icon: spacing[10], // 2.5rem (40px) - square
},
/** Button heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
icon: spacing[10], // 2.5rem (40px) - square
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[8], // 2rem (32px)
},
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[8], // 2rem (32px)
},
},
/** Gap between icon and text */
gap: spacing[2], // 0.5rem (8px)
/** Gap between icon and text */
gap: spacing[2], // 0.5rem (8px)
/** Border radius */
borderRadius: borderRadius.md,
/** Border radius */
borderRadius: borderRadius.md,
/** Transition duration */
transitionDuration: "200ms",
/** Transition duration */
transitionDuration: '200ms',
} as const;

48
packages/ui/src/Button/types.ts
View file

@ -1,34 +1,34 @@
import type { ButtonHTMLAttributes } from "react";
import type { ButtonHTMLAttributes } from 'react';
/**
* Button component props
*/
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
/**
* Visual variant of the button
* @default 'default'
*/
variant?:
| "default"
| "destructive"
| "outline"
| "outline-dotted"
| "secondary"
| "ghost"
| "link"
| "blueprint";
/**
* Visual variant of the button
* @default 'default'
*/
variant?:
| 'default'
| 'destructive'
| 'outline'
| 'outline-dotted'
| 'secondary'
| 'ghost'
| 'link'
| 'blueprint';
/**
* Size of the button
* @default 'md'
*/
size?: "sm" | "md" | "lg" | "icon";
/**
* Size of the button
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg' | 'icon';
/**
* Loading state - disables button and shows loading indicator
* @default false
*/
loading?: boolean;
/**
* Loading state - disables button and shows loading indicator
* @default false
*/
loading?: boolean;
}
/**

184
packages/ui/src/Button/variants.ts
View file

@ -1,112 +1,110 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Button variant definitions
* Uses custom variant system for type-safe class composition
*/
export const buttonVariants = createVariants({
base: [
// Layout
"inline-flex items-center justify-center gap-2",
// Typography
"font-medium text-sm",
"whitespace-nowrap",
// Borders & Radius
"rounded-md",
// Transitions
"transition-base",
// Focus
"focus-ring",
// Disabled state
"disabled:pointer-events-none disabled:opacity-50",
].join(" "),
base: [
// Layout
'inline-flex items-center justify-center gap-2',
// Typography
'font-medium text-sm',
'whitespace-nowrap',
// Borders & Radius
'rounded-md',
// Transitions
'transition-base',
// Focus
'focus-ring',
// Disabled state
'disabled:pointer-events-none disabled:opacity-50',
].join(' '),
variants: {
variant: {
default: [
"bg-primary text-primary-foreground",
"hover:bg-primary/90",
"active:bg-primary/80",
].join(" "),
variants: {
variant: {
default: [
'bg-primary text-primary-foreground',
'hover:bg-primary/90',
'active:bg-primary/80',
].join(' '),
destructive: [
"bg-error text-error-foreground",
"hover:bg-error/90",
"active:bg-error/80",
].join(" "),
destructive: [
'bg-error text-error-foreground',
'hover:bg-error/90',
'active:bg-error/80',
].join(' '),
outline: [
"border border-border bg-transparent",
"hover:bg-accent hover:text-accent-foreground hover:border-border-strong",
"active:bg-accent/80",
].join(" "),
outline: [
'border border-border bg-transparent',
'hover:bg-accent hover:text-accent-foreground hover:border-border-strong',
'active:bg-accent/80',
].join(' '),
"outline-dotted": [
"border border-dotted border-border bg-transparent",
"hover:bg-accent hover:text-accent-foreground hover:border-border-strong",
"active:bg-accent/80",
].join(" "),
'outline-dotted': [
'border border-dotted border-border bg-transparent',
'hover:bg-accent hover:text-accent-foreground hover:border-border-strong',
'active:bg-accent/80',
].join(' '),
blueprint: [
"border border-dotted border-border bg-card",
"hover:shadow-blueprint-hover",
"active:bg-card/90",
].join(" "),
blueprint: [
'border border-dotted border-border bg-card',
'hover:shadow-blueprint-hover',
'active:bg-card/90',
].join(' '),
secondary: [
"bg-secondary text-secondary-foreground",
"hover:bg-secondary/80",
"active:bg-secondary/70",
].join(" "),
secondary: [
'bg-secondary text-secondary-foreground',
'hover:bg-secondary/80',
'active:bg-secondary/70',
].join(' '),
ghost: [
"text-foreground",
"hover:bg-accent hover:text-accent-foreground",
"active:bg-accent/80",
].join(" "),
ghost: [
'text-foreground',
'hover:bg-accent hover:text-accent-foreground',
'active:bg-accent/80',
].join(' '),
link: [
"text-primary underline-offset-4",
"hover:underline",
"active:text-primary/80",
].join(" "),
},
link: ['text-primary underline-offset-4', 'hover:underline', 'active:text-primary/80'].join(
' '
),
},
size: {
sm: "h-9 px-3 text-sm",
md: "h-10 px-4 text-base",
lg: "h-11 px-8 text-lg",
icon: "h-10 w-10 p-0",
},
size: {
sm: 'h-9 px-3 text-sm',
md: 'h-10 px-4 text-base',
lg: 'h-11 px-8 text-lg',
icon: 'h-10 w-10 p-0',
},
loading: {
true: "cursor-wait",
false: "",
},
},
loading: {
true: 'cursor-wait',
false: '',
},
},
compoundVariants: [
{
conditions: { variant: "outline", size: "sm" },
className: "border-1",
},
{
conditions: { variant: "link", size: "sm" },
className: "px-0",
},
{
conditions: { variant: "link", size: "md" },
className: "px-0",
},
{
conditions: { variant: "link", size: "lg" },
className: "px-0",
},
],
compoundVariants: [
{
conditions: { variant: 'outline', size: 'sm' },
className: 'border-1',
},
{
conditions: { variant: 'link', size: 'sm' },
className: 'px-0',
},
{
conditions: { variant: 'link', size: 'md' },
className: 'px-0',
},
{
conditions: { variant: 'link', size: 'lg' },
className: 'px-0',
},
],
defaultVariants: {
variant: "default",
size: "md",
loading: "false",
},
defaultVariants: {
variant: 'default',
size: 'md',
loading: 'false',
},
});

1167
packages/ui/src/Card/Card.test.tsx
View file

File diff suppressed because it is too large Load diff

189
packages/ui/src/Card/Card.tsx
View file

@ -1,21 +1,21 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type {
CardContentProps,
CardDescriptionProps,
CardFooterProps,
CardHeaderProps,
CardProps,
CardTitleProps,
} from "./types";
CardContentProps,
CardDescriptionProps,
CardFooterProps,
CardHeaderProps,
CardProps,
CardTitleProps,
} from './types';
import {
cardContentVariants,
cardDescriptionVariants,
cardFooterVariants,
cardHeaderVariants,
cardTitleVariants,
cardVariants,
} from "./variants";
cardContentVariants,
cardDescriptionVariants,
cardFooterVariants,
cardHeaderVariants,
cardTitleVariants,
cardVariants,
} from './variants';
/**
* Card component
@ -42,24 +42,24 @@ import {
* ```
*/
export const Card = forwardRef<HTMLDivElement, CardProps>(
({ className, variant = "default", padding = "none", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardVariants({
variant,
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, variant = 'default', padding = 'none', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardVariants({
variant,
padding,
}),
className
)}
{...props}
/>
);
}
);
Card.displayName = "Card";
Card.displayName = 'Card';
/**
* CardHeader component
@ -67,23 +67,23 @@ Card.displayName = "Card";
* Header section of a card, typically contains title and description.
*/
export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
({ className, padding = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardHeaderVariants({
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, padding = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardHeaderVariants({
padding,
}),
className
)}
{...props}
/>
);
}
);
CardHeader.displayName = "CardHeader";
CardHeader.displayName = 'CardHeader';
/**
* CardTitle component
@ -91,39 +91,26 @@ CardHeader.displayName = "CardHeader";
* Title heading for a card.
*/
export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
({ className, as = "h3", ...props }, ref) => {
const Component = as;
return (
<Component
ref={ref}
className={cn(cardTitleVariants(), className)}
{...props}
/>
);
},
({ className, as = 'h3', ...props }, ref) => {
const Component = as;
return <Component ref={ref} className={cn(cardTitleVariants(), className)} {...props} />;
}
);
CardTitle.displayName = "CardTitle";
CardTitle.displayName = 'CardTitle';
/**
* CardDescription component
*
* Description text for a card, typically placed below the title.
*/
export const CardDescription = forwardRef<
HTMLParagraphElement,
CardDescriptionProps
>(({ className, ...props }, ref) => {
return (
<p
ref={ref}
className={cn(cardDescriptionVariants(), className)}
{...props}
/>
);
});
export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
({ className, ...props }, ref) => {
return <p ref={ref} className={cn(cardDescriptionVariants(), className)} {...props} />;
}
);
CardDescription.displayName = "CardDescription";
CardDescription.displayName = 'CardDescription';
/**
* CardContent component
@ -131,23 +118,23 @@ CardDescription.displayName = "CardDescription";
* Main content area of a card.
*/
export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
({ className, padding = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardContentVariants({
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, padding = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardContentVariants({
padding,
}),
className
)}
{...props}
/>
);
}
);
CardContent.displayName = "CardContent";
CardContent.displayName = 'CardContent';
/**
* CardFooter component
@ -155,20 +142,20 @@ CardContent.displayName = "CardContent";
* Footer section of a card, typically contains actions.
*/
export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
({ className, padding = "md", ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardFooterVariants({
padding,
}),
className,
)}
{...props}
/>
);
},
({ className, padding = 'md', ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
cardFooterVariants({
padding,
}),
className
)}
{...props}
/>
);
}
);
CardFooter.displayName = "CardFooter";
CardFooter.displayName = 'CardFooter';

66
packages/ui/src/Card/tokens.ts
View file

@ -1,45 +1,45 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Card component design tokens
* Maps global tokens to card-specific semantics
*/
export const cardTokens = {
/** Card padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Card padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Header/Content/Footer padding */
section: {
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
gap: spacing[6], // 1.5rem (24px) - space between sections
},
/** Header/Content/Footer padding */
section: {
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
gap: spacing[6], // 1.5rem (24px) - space between sections
},
/** Title spacing */
title: {
marginBottom: spacing[1.5], // 0.375rem (6px)
},
/** Title spacing */
title: {
marginBottom: spacing[1.5], // 0.375rem (6px)
},
/** Description spacing */
description: {
marginTop: spacing[2], // 0.5rem (8px)
},
/** Description spacing */
description: {
marginTop: spacing[2], // 0.5rem (8px)
},
/** Border radius */
borderRadius: borderRadius.lg,
/** Border radius */
borderRadius: borderRadius.lg,
/** Elevation shadows */
elevation: {
default: "shadow-sm",
elevated: "shadow-md",
},
/** Elevation shadows */
elevation: {
default: 'shadow-sm',
elevated: 'shadow-md',
},
} as const;

62
packages/ui/src/Card/types.ts
View file

@ -1,42 +1,42 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Card component props
*/
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
/**
* Visual variant of the card
* @default 'default'
*/
variant?: "default" | "elevated" | "outline" | "blueprint" | "ghost";
/**
* Visual variant of the card
* @default 'default'
*/
variant?: 'default' | 'elevated' | 'outline' | 'blueprint' | 'ghost';
/**
* Padding size for the card
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the card
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**
* CardHeader component props
*/
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
/**
* Padding size for the header
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the header
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**
* CardTitle component props
*/
export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
/**
* Heading level
* @default 'h3'
*/
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
/**
* Heading level
* @default 'h3'
*/
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}
/**
@ -48,22 +48,22 @@ export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
* CardContent component props
*/
export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
/**
* Padding size for the content
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the content
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**
* CardFooter component props
*/
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
/**
* Padding size for the footer
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Padding size for the footer
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**

188
packages/ui/src/Card/variants.ts
View file

@ -1,157 +1,151 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Card variant definitions
* Uses custom variant system for type-safe class composition
*/
export const cardVariants = createVariants({
base: [
// Layout
"relative",
// Borders & Radius
"rounded-lg",
// Transitions
"transition-base",
].join(" "),
base: [
// Layout
'relative',
// Borders & Radius
'rounded-lg',
// Transitions
'transition-base',
].join(' '),
variants: {
variant: {
default: [
"border border-dotted border-border",
"bg-card text-card-foreground",
"shadow-sm",
].join(" "),
variants: {
variant: {
default: [
'border border-dotted border-border',
'bg-card text-card-foreground',
'shadow-sm',
].join(' '),
elevated: [
"border border-dotted border-border",
"bg-surface-elevated text-card-foreground",
"shadow-md",
].join(" "),
elevated: [
'border border-dotted border-border',
'bg-surface-elevated text-card-foreground',
'shadow-md',
].join(' '),
outline: [
"border-2 border-dotted border-border",
"bg-transparent text-foreground",
].join(" "),
outline: ['border-2 border-dotted border-border', 'bg-transparent text-foreground'].join(' '),
blueprint: [
"border border-dotted border-border",
"bg-card text-card-foreground",
"shadow-blueprint",
"hover:shadow-blueprint-hover",
].join(" "),
blueprint: [
'border border-dotted border-border',
'bg-card text-card-foreground',
'shadow-blueprint',
'hover:shadow-blueprint-hover',
].join(' '),
ghost: ["bg-transparent text-foreground"].join(" "),
},
ghost: ['bg-transparent text-foreground'].join(' '),
},
padding: {
none: "p-0",
sm: "p-4",
md: "p-6",
lg: "p-8",
},
},
padding: {
none: 'p-0',
sm: 'p-4',
md: 'p-6',
lg: 'p-8',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
variant: "default",
padding: "none", // Card itself has no padding, sections do
},
defaultVariants: {
variant: 'default',
padding: 'none', // Card itself has no padding, sections do
},
});
/**
* CardHeader variant definitions
*/
export const cardHeaderVariants = createVariants({
base: ["flex flex-col"].join(" "),
base: ['flex flex-col'].join(' '),
variants: {
padding: {
none: "p-0",
sm: "p-4",
md: "p-6",
lg: "p-8",
},
},
variants: {
padding: {
none: 'p-0',
sm: 'p-4',
md: 'p-6',
lg: 'p-8',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
padding: "md",
},
defaultVariants: {
padding: 'md',
},
});
/**
* CardTitle variant definitions
*/
export const cardTitleVariants = createVariants({
base: [
"text-2xl font-semibold leading-none tracking-tight",
"text-foreground",
].join(" "),
base: ['text-2xl font-semibold leading-none tracking-tight', 'text-foreground'].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});
/**
* CardDescription variant definitions
*/
export const cardDescriptionVariants = createVariants({
base: ["text-sm text-foreground-secondary", "mt-1.5"].join(" "),
base: ['text-sm text-foreground-secondary', 'mt-1.5'].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});
/**
* CardContent variant definitions
*/
export const cardContentVariants = createVariants({
base: [
// Base content styles
].join(" "),
base: [
// Base content styles
].join(' '),
variants: {
padding: {
none: "p-0",
sm: "p-4 pt-0",
md: "p-6 pt-0",
lg: "p-8 pt-0",
},
},
variants: {
padding: {
none: 'p-0',
sm: 'p-4 pt-0',
md: 'p-6 pt-0',
lg: 'p-8 pt-0',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
padding: "md",
},
defaultVariants: {
padding: 'md',
},
});
/**
* CardFooter variant definitions
*/
export const cardFooterVariants = createVariants({
base: ["flex items-center"].join(" "),
base: ['flex items-center'].join(' '),
variants: {
padding: {
none: "p-0",
sm: "p-4 pt-0",
md: "p-6 pt-0",
lg: "p-8 pt-0",
},
},
variants: {
padding: {
none: 'p-0',
sm: 'p-4 pt-0',
md: 'p-6 pt-0',
lg: 'p-8 pt-0',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
padding: "md",
},
defaultVariants: {
padding: 'md',
},
});

590
packages/ui/src/CodeBlock/CodeBlock.test.tsx
View file

@ -1,353 +1,331 @@
import { render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { CodeBlock } from "./CodeBlock";
import { render, screen, waitFor } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { CodeBlock } from './CodeBlock';
// Mock clipboard API
const mockClipboard = {
writeText: vi.fn(),
writeText: vi.fn(),
};
Object.defineProperty(navigator, "clipboard", {
value: mockClipboard,
writable: true,
configurable: true,
Object.defineProperty(navigator, 'clipboard', {
value: mockClipboard,
writable: true,
configurable: true,
});
describe("CodeBlock", () => {
beforeEach(() => {
mockClipboard.writeText.mockClear();
});
describe('CodeBlock', () => {
beforeEach(() => {
mockClipboard.writeText.mockClear();
});
describe("Rendering", () => {
it("renders a code block element", () => {
render(<CodeBlock code='console.log("hello")' data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock).toBeInTheDocument();
expect(codeblock.tagName).toBe("DIV");
});
describe('Rendering', () => {
it('renders a code block element', () => {
render(<CodeBlock code='console.log("hello")' data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock).toBeInTheDocument();
expect(codeblock.tagName).toBe('DIV');
});
it("renders code content", () => {
render(<CodeBlock code="npm install package" />);
expect(screen.getByText("npm install package")).toBeInTheDocument();
});
it('renders code content', () => {
render(<CodeBlock code="npm install package" />);
expect(screen.getByText('npm install package')).toBeInTheDocument();
});
it("renders code in a code element", () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code).toBeInTheDocument();
expect(code?.textContent).toBe("test code");
});
it('renders code in a code element', () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code).toBeInTheDocument();
expect(code?.textContent).toBe('test code');
});
it("preserves whitespace in code", () => {
const multilineCode = "line 1\n line 2\n line 3";
render(<CodeBlock code={multilineCode} data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.textContent).toBe(multilineCode);
});
});
it('preserves whitespace in code', () => {
const multilineCode = 'line 1\n line 2\n line 3';
render(<CodeBlock code={multilineCode} data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.textContent).toBe(multilineCode);
});
});
describe("Language", () => {
it("sets data-language attribute", () => {
render(
<CodeBlock
code="const x = 5"
language="javascript"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "javascript");
});
describe('Language', () => {
it('sets data-language attribute', () => {
render(<CodeBlock code="const x = 5" language="javascript" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'javascript');
});
it("defaults to text language", () => {
render(<CodeBlock code="plain text" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "text");
});
it('defaults to text language', () => {
render(<CodeBlock code="plain text" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'text');
});
it("supports different languages", () => {
const { rerender } = render(
<CodeBlock code="code" language="python" data-testid="codeblock" />,
);
let codeblock = screen.getByTestId("codeblock");
let code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "python");
it('supports different languages', () => {
const { rerender } = render(
<CodeBlock code="code" language="python" data-testid="codeblock" />
);
let codeblock = screen.getByTestId('codeblock');
let code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'python');
rerender(
<CodeBlock code="code" language="bash" data-testid="codeblock" />,
);
codeblock = screen.getByTestId("codeblock");
code = codeblock.querySelector("code");
expect(code).toHaveAttribute("data-language", "bash");
});
});
rerender(<CodeBlock code="code" language="bash" data-testid="codeblock" />);
codeblock = screen.getByTestId('codeblock');
code = codeblock.querySelector('code');
expect(code).toHaveAttribute('data-language', 'bash');
});
});
describe("Size Variants", () => {
it("applies small size", () => {
render(<CodeBlock code="code" size="sm" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-xs");
expect(code?.className).toContain("p-3");
});
describe('Size Variants', () => {
it('applies small size', () => {
render(<CodeBlock code="code" size="sm" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-xs');
expect(code?.className).toContain('p-3');
});
it("applies medium size", () => {
render(<CodeBlock code="code" size="md" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-sm");
expect(code?.className).toContain("p-4");
});
it('applies medium size', () => {
render(<CodeBlock code="code" size="md" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-sm');
expect(code?.className).toContain('p-4');
});
it("applies large size", () => {
render(<CodeBlock code="code" size="lg" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-base");
expect(code?.className).toContain("p-6");
});
it('applies large size', () => {
render(<CodeBlock code="code" size="lg" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-base');
expect(code?.className).toContain('p-6');
});
it("uses md size by default", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-sm");
expect(code?.className).toContain("p-4");
});
});
it('uses md size by default', () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-sm');
expect(code?.className).toContain('p-4');
});
});
describe("Copy Button", () => {
it("shows copy button by default", () => {
render(<CodeBlock code="code" />);
expect(screen.getByTestId("copy-button")).toBeInTheDocument();
});
describe('Copy Button', () => {
it('shows copy button by default', () => {
render(<CodeBlock code="code" />);
expect(screen.getByTestId('copy-button')).toBeInTheDocument();
});
it("hides copy button when showCopy is false", () => {
render(<CodeBlock code="code" showCopy={false} />);
expect(screen.queryByTestId("copy-button")).not.toBeInTheDocument();
});
it('hides copy button when showCopy is false', () => {
render(<CodeBlock code="code" showCopy={false} />);
expect(screen.queryByTestId('copy-button')).not.toBeInTheDocument();
});
it("copy button has correct aria-label", () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId("copy-button");
expect(button).toHaveAttribute("aria-label", "Copy code");
});
it('copy button has correct aria-label', () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId('copy-button');
expect(button).toHaveAttribute('aria-label', 'Copy code');
});
it("copy button is a button element", () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId("copy-button");
expect(button.tagName).toBe("BUTTON");
expect(button).toHaveAttribute("type", "button");
});
});
it('copy button is a button element', () => {
render(<CodeBlock code="code" />);
const button = screen.getByTestId('copy-button');
expect(button.tagName).toBe('BUTTON');
expect(button).toHaveAttribute('type', 'button');
});
});
describe("Copy Functionality", () => {
it("copies code to clipboard when button clicked", async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId("copy-button");
button.click();
describe('Copy Functionality', () => {
it('copies code to clipboard when button clicked', async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalledWith("test code");
});
});
await waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalledWith('test code');
});
});
it("shows check icon after successful copy", async () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId("copy-button");
button.click();
it('shows check icon after successful copy', async () => {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(() => {
const icon = button.querySelector("svg");
// Check icon has a different path than copy icon
const path = icon?.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
);
});
});
await waitFor(() => {
const icon = button.querySelector('svg');
// Check icon has a different path than copy icon
const path = icon?.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'
);
});
});
it('changes aria-label to "Copied!" after copy', async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId("copy-button");
button.click();
it('changes aria-label to "Copied!" after copy', async () => {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(() => {
expect(button).toHaveAttribute("aria-label", "Copied!");
});
});
await waitFor(() => {
expect(button).toHaveAttribute('aria-label', 'Copied!');
});
});
it("reverts to copy icon after 2 seconds", async () => {
vi.useFakeTimers();
it('reverts to copy icon after 2 seconds', async () => {
vi.useFakeTimers();
try {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId("copy-button");
button.click();
try {
render(<CodeBlock code="test code" data-testid="codeblock" />);
const button = screen.getByTestId('copy-button');
button.click();
// Wait for copy to complete
await vi.waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalled();
});
// Wait for copy to complete
await vi.waitFor(() => {
expect(mockClipboard.writeText).toHaveBeenCalled();
});
// Verify check icon appears
await vi.waitFor(() => {
const icon = button.querySelector("svg");
const path = icon?.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
);
});
// Verify check icon appears
await vi.waitFor(() => {
const icon = button.querySelector('svg');
const path = icon?.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'
);
});
// Fast forward 2 seconds
vi.advanceTimersByTime(2000);
// Fast forward 2 seconds
vi.advanceTimersByTime(2000);
// Verify copy icon is back
await vi.waitFor(() => {
const icon = button.querySelector("svg");
const path = icon?.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
);
});
} finally {
vi.useRealTimers();
}
});
// Verify copy icon is back
await vi.waitFor(() => {
const icon = button.querySelector('svg');
const path = icon?.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'
);
});
} finally {
vi.useRealTimers();
}
});
it("handles clipboard API errors gracefully", async () => {
const consoleErrorSpy = vi
.spyOn(console, "error")
.mockImplementation(() => {});
mockClipboard.writeText.mockRejectedValueOnce(
new Error("Clipboard not available"),
);
it('handles clipboard API errors gracefully', async () => {
const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
mockClipboard.writeText.mockRejectedValueOnce(new Error('Clipboard not available'));
try {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId("copy-button");
button.click();
try {
render(<CodeBlock code="test code" />);
const button = screen.getByTestId('copy-button');
button.click();
await waitFor(
() => {
expect(consoleErrorSpy).toHaveBeenCalled();
},
{ timeout: 1000 },
);
} finally {
consoleErrorSpy.mockRestore();
}
});
});
await waitFor(
() => {
expect(consoleErrorSpy).toHaveBeenCalled();
},
{ timeout: 1000 }
);
} finally {
consoleErrorSpy.mockRestore();
}
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<CodeBlock code="code" id="codeblock-id" data-testid="codeblock" />,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock).toHaveAttribute("id", "codeblock-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<CodeBlock code="code" id="codeblock-id" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock).toHaveAttribute('id', 'codeblock-id');
});
it("passes through data attributes", () => {
render(
<CodeBlock code="code" data-custom="test" data-testid="codeblock" />,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
render(<CodeBlock code="code" data-custom="test" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<CodeBlock
code="code"
className="custom-class"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("custom-class");
expect(codeblock.className).toContain("bg-background");
expect(codeblock.className).toContain("border");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<CodeBlock code="code" className="custom-class" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock.className).toContain('custom-class');
expect(codeblock.className).toContain('bg-background');
expect(codeblock.className).toContain('border');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to container element", () => {
let ref: HTMLDivElement | null = null;
render(
<CodeBlock
code="code"
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.querySelector("code")).toBeInTheDocument();
});
});
describe('Ref Forwarding', () => {
it('forwards ref to container element', () => {
let ref: HTMLDivElement | null = null;
render(
<CodeBlock
code="code"
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.querySelector('code')).toBeInTheDocument();
});
});
describe("Base Classes", () => {
it("container includes base classes", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("relative");
expect(codeblock.className).toContain("bg-background");
expect(codeblock.className).toContain("border");
expect(codeblock.className).toContain("overflow-hidden");
});
describe('Base Classes', () => {
it('container includes base classes', () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock.className).toContain('relative');
expect(codeblock.className).toContain('bg-background');
expect(codeblock.className).toContain('border');
expect(codeblock.className).toContain('overflow-hidden');
});
it("code element includes base classes", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("block");
expect(code?.className).toContain("font-mono");
expect(code?.className).toContain("text-foreground-secondary");
expect(code?.className).toContain("overflow-x-auto");
expect(code?.className).toContain("whitespace-pre");
});
});
it('code element includes base classes', () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('block');
expect(code?.className).toContain('font-mono');
expect(code?.className).toContain('text-foreground-secondary');
expect(code?.className).toContain('overflow-x-auto');
expect(code?.className).toContain('whitespace-pre');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and custom language", () => {
render(
<CodeBlock
code='def hello():\n print("world")'
language="python"
size="lg"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
const code = codeblock.querySelector("code");
expect(code?.className).toContain("text-base");
expect(code?.className).toContain("p-6");
expect(code).toHaveAttribute("data-language", "python");
});
describe('Compound Scenarios', () => {
it('works correctly with large size and custom language', () => {
render(
<CodeBlock
code='def hello():\n print("world")'
language="python"
size="lg"
data-testid="codeblock"
/>
);
const codeblock = screen.getByTestId('codeblock');
const code = codeblock.querySelector('code');
expect(code?.className).toContain('text-base');
expect(code?.className).toContain('p-6');
expect(code).toHaveAttribute('data-language', 'python');
});
it("works correctly with no copy button and custom className", () => {
render(
<CodeBlock
code="test"
showCopy={false}
className="my-custom-class"
data-testid="codeblock"
/>,
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("my-custom-class");
expect(screen.queryByTestId("copy-button")).not.toBeInTheDocument();
});
});
it('works correctly with no copy button and custom className', () => {
render(
<CodeBlock
code="test"
showCopy={false}
className="my-custom-class"
data-testid="codeblock"
/>
);
const codeblock = screen.getByTestId('codeblock');
expect(codeblock.className).toContain('my-custom-class');
expect(screen.queryByTestId('copy-button')).not.toBeInTheDocument();
});
});
});

104
packages/ui/src/CodeBlock/CodeBlock.tsx
View file

@ -1,12 +1,12 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef, useState } from "react";
import { Icon } from "../Icon/Icon";
import type { CodeBlockProps } from "./types";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef, useState } from 'react';
import { Icon } from '../Icon/Icon';
import type { CodeBlockProps } from './types';
import {
codeBlockCodeVariants,
codeBlockContainerVariants,
codeBlockCopyButtonVariants,
} from "./variants";
codeBlockCodeVariants,
codeBlockContainerVariants,
codeBlockCopyButtonVariants,
} from './variants';
/**
* CodeBlock component
@ -32,58 +32,44 @@ import {
* ```
*/
export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
(
{
className,
code,
language = "text",
size = "md",
showCopy = true,
...props
},
ref,
) => {
const [copied, setCopied] = useState(false);
({ className, code, language = 'text', size = 'md', showCopy = true, ...props }, ref) => {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
// Silently fail if clipboard API is not available
console.error("Failed to copy code:", err);
}
};
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
// Silently fail if clipboard API is not available
console.error('Failed to copy code:', err);
}
};
return (
<div
ref={ref}
className={cn(codeBlockContainerVariants(), className)}
{...props}
>
<code
className={codeBlockCodeVariants({
size,
})}
data-language={language}
>
{code}
</code>
{showCopy && (
<button
type="button"
className={codeBlockCopyButtonVariants()}
onClick={handleCopy}
aria-label={copied ? "Copied!" : "Copy code"}
data-testid="copy-button"
>
<Icon icon={copied ? "check" : "copy"} size="sm" />
</button>
)}
</div>
);
},
return (
<div ref={ref} className={cn(codeBlockContainerVariants(), className)} {...props}>
<code
className={codeBlockCodeVariants({
size,
})}
data-language={language}
>
{code}
</code>
{showCopy && (
<button
type="button"
className={codeBlockCopyButtonVariants()}
onClick={handleCopy}
aria-label={copied ? 'Copied!' : 'Copy code'}
data-testid="copy-button"
>
<Icon icon={copied ? 'check' : 'copy'} size="sm" />
</button>
)}
</div>
);
}
);
CodeBlock.displayName = "CodeBlock";
CodeBlock.displayName = 'CodeBlock';

30
packages/ui/src/CodeBlock/tokens.ts
View file

@ -1,24 +1,24 @@
import { fontSize, spacing } from "../tokens";
import { fontSize, spacing } from '../tokens';
/**
* CodeBlock component design tokens
* Maps global tokens to code block-specific semantics
*/
export const codeBlockTokens = {
/** Padding for each size */
padding: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[6], // 1.5rem (24px)
},
/** Padding for each size */
padding: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[4], // 1rem (16px)
lg: spacing[6], // 1.5rem (24px)
},
/** Font size for each size */
fontSize: {
sm: fontSize.xs, // 0.75rem (12px)
md: fontSize.sm, // 0.875rem (14px)
lg: fontSize.base, // 1rem (16px)
},
/** Font size for each size */
fontSize: {
sm: fontSize.xs, // 0.75rem (12px)
md: fontSize.sm, // 0.875rem (14px)
lg: fontSize.base, // 1rem (16px)
},
/** Border radius */
radius: spacing[2], // 0.5rem (8px)
/** Border radius */
radius: spacing[2], // 0.5rem (8px)
} as const;

43
packages/ui/src/CodeBlock/types.ts
View file

@ -1,32 +1,31 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* CodeBlock component props
*/
export interface CodeBlockProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
/**
* Code content to display
*/
code: string;
export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
/**
* Code content to display
*/
code: string;
/**
* Programming language (for display/metadata only)
* @default 'text'
*/
language?: string;
/**
* Programming language (for display/metadata only)
* @default 'text'
*/
language?: string;
/**
* Size variant
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size variant
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether to show copy button
* @default true
*/
showCopy?: boolean;
/**
* Whether to show copy button
* @default true
*/
showCopy?: boolean;
}
/**

116
packages/ui/src/CodeBlock/variants.ts
View file

@ -1,85 +1,85 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* CodeBlock container variant definitions
*/
export const codeBlockContainerVariants = createVariants({
base: [
// Layout
"relative",
// Background
"bg-background",
// Border
"border border-border rounded-lg",
// Overflow
"overflow-hidden",
].join(" "),
base: [
// Layout
'relative',
// Background
'bg-background',
// Border
'border border-border rounded-lg',
// Overflow
'overflow-hidden',
].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});
/**
* CodeBlock code element variant definitions
*/
export const codeBlockCodeVariants = createVariants({
base: [
// Display
"block",
// Font
"font-mono",
// Color
"text-foreground-secondary",
// Overflow
"overflow-x-auto",
// Whitespace
"whitespace-pre",
].join(" "),
base: [
// Display
'block',
// Font
'font-mono',
// Color
'text-foreground-secondary',
// Overflow
'overflow-x-auto',
// Whitespace
'whitespace-pre',
].join(' '),
variants: {
size: {
sm: "text-xs p-3", // 12px font, 12px padding
md: "text-sm p-4", // 14px font, 16px padding
lg: "text-base p-6", // 16px font, 24px padding
},
},
variants: {
size: {
sm: 'text-xs p-3', // 12px font, 12px padding
md: 'text-sm p-4', // 14px font, 16px padding
lg: 'text-base p-6', // 16px font, 24px padding
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});
/**
* CodeBlock copy button variant definitions
*/
export const codeBlockCopyButtonVariants = createVariants({
base: [
// Position
"absolute top-2 right-2",
// Display
"flex items-center justify-center",
// Size
"w-8 h-8",
// Background
"bg-surface-elevated hover:bg-accent",
// Border
"border border-border rounded",
// Color
"text-foreground-secondary hover:text-foreground",
// Cursor
"cursor-pointer",
// Transition
"transition-colors duration-200",
].join(" "),
base: [
// Position
'absolute top-2 right-2',
// Display
'flex items-center justify-center',
// Size
'w-8 h-8',
// Background
'bg-surface-elevated hover:bg-accent',
// Border
'border border-border rounded',
// Color
'text-foreground-secondary hover:text-foreground',
// Cursor
'cursor-pointer',
// Transition
'transition-colors duration-200',
].join(' '),
variants: {},
variants: {},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {},
defaultVariants: {},
});

430
packages/ui/src/Container/Container.test.tsx
View file

@ -1,238 +1,238 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Container } from "./Container";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Container } from './Container';
describe("Container", () => {
describe("Rendering", () => {
it("renders a container element", () => {
render(<Container data-testid="container">Content</Container>);
const container = screen.getByTestId("container");
expect(container).toBeInTheDocument();
expect(container.tagName).toBe("DIV");
});
describe('Container', () => {
describe('Rendering', () => {
it('renders a container element', () => {
render(<Container data-testid="container">Content</Container>);
const container = screen.getByTestId('container');
expect(container).toBeInTheDocument();
expect(container.tagName).toBe('DIV');
});
it("renders children content", () => {
render(<Container>Container content</Container>);
expect(screen.getByText("Container content")).toBeInTheDocument();
});
});
it('renders children content', () => {
render(<Container>Container content</Container>);
expect(screen.getByText('Container content')).toBeInTheDocument();
});
});
describe("Size Variants", () => {
it("applies small size max-width", () => {
render(
<Container size="sm" data-testid="container">
Small
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-sm");
});
describe('Size Variants', () => {
it('applies small size max-width', () => {
render(
<Container size="sm" data-testid="container">
Small
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-sm');
});
it("applies medium size max-width", () => {
render(
<Container size="md" data-testid="container">
Medium
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-md");
});
it('applies medium size max-width', () => {
render(
<Container size="md" data-testid="container">
Medium
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-md');
});
it("applies large size max-width", () => {
render(
<Container size="lg" data-testid="container">
Large
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-lg");
});
it('applies large size max-width', () => {
render(
<Container size="lg" data-testid="container">
Large
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-lg');
});
it("applies extra-large size max-width (default)", () => {
render(
<Container size="xl" data-testid="container">
XLarge
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-xl");
});
it('applies extra-large size max-width (default)', () => {
render(
<Container size="xl" data-testid="container">
XLarge
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-xl');
});
it("applies 2xl size max-width", () => {
render(
<Container size="2xl" data-testid="container">
2XLarge
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-2xl");
});
it('applies 2xl size max-width', () => {
render(
<Container size="2xl" data-testid="container">
2XLarge
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-2xl');
});
it("applies full width", () => {
render(
<Container size="full" data-testid="container">
Full
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-full");
});
it('applies full width', () => {
render(
<Container size="full" data-testid="container">
Full
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-full');
});
it("uses xl size by default", () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-xl");
});
});
it('uses xl size by default', () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-xl');
});
});
describe("Padding Variants", () => {
it("applies no padding", () => {
render(
<Container padding="none" data-testid="container">
None
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-0");
});
describe('Padding Variants', () => {
it('applies no padding', () => {
render(
<Container padding="none" data-testid="container">
None
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-0');
});
it("applies small padding", () => {
render(
<Container padding="sm" data-testid="container">
Small
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-4");
});
it('applies small padding', () => {
render(
<Container padding="sm" data-testid="container">
Small
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-4');
});
it("applies medium padding (default)", () => {
render(
<Container padding="md" data-testid="container">
Medium
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-6");
});
it('applies medium padding (default)', () => {
render(
<Container padding="md" data-testid="container">
Medium
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-6');
});
it("applies large padding", () => {
render(
<Container padding="lg" data-testid="container">
Large
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-8");
});
it('applies large padding', () => {
render(
<Container padding="lg" data-testid="container">
Large
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-8');
});
it("uses md padding by default", () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId("container");
expect(container.className).toContain("px-6");
});
});
it('uses md padding by default', () => {
render(<Container data-testid="container">Default</Container>);
const container = screen.getByTestId('container');
expect(container.className).toContain('px-6');
});
});
describe("Compound Scenarios", () => {
it("works correctly with small size and no padding", () => {
render(
<Container size="sm" padding="none" data-testid="container">
Small no padding
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-screen-sm");
expect(container.className).toContain("px-0");
});
describe('Compound Scenarios', () => {
it('works correctly with small size and no padding', () => {
render(
<Container size="sm" padding="none" data-testid="container">
Small no padding
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-screen-sm');
expect(container.className).toContain('px-0');
});
it("works correctly with full width and large padding", () => {
render(
<Container size="full" padding="lg" data-testid="container">
Full large padding
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("max-w-full");
expect(container.className).toContain("px-8");
});
});
it('works correctly with full width and large padding', () => {
render(
<Container size="full" padding="lg" data-testid="container">
Full large padding
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('max-w-full');
expect(container.className).toContain('px-8');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<Container id="container-id" data-testid="container">
Container
</Container>,
);
const container = screen.getByTestId("container");
expect(container).toHaveAttribute("id", "container-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<Container id="container-id" data-testid="container">
Container
</Container>
);
const container = screen.getByTestId('container');
expect(container).toHaveAttribute('id', 'container-id');
});
it("passes through onClick handler", () => {
let clicked = false;
render(
<Container
onClick={() => {
clicked = true;
}}
data-testid="container"
>
Clickable
</Container>,
);
const container = screen.getByTestId("container");
container.click();
expect(clicked).toBe(true);
});
it('passes through onClick handler', () => {
let clicked = false;
render(
<Container
onClick={() => {
clicked = true;
}}
data-testid="container"
>
Clickable
</Container>
);
const container = screen.getByTestId('container');
container.click();
expect(clicked).toBe(true);
});
it("passes through aria attributes", () => {
render(
<Container aria-label="Main container" data-testid="container">
Container
</Container>,
);
const container = screen.getByTestId("container");
expect(container).toHaveAttribute("aria-label", "Main container");
});
});
it('passes through aria attributes', () => {
render(
<Container aria-label="Main container" data-testid="container">
Container
</Container>
);
const container = screen.getByTestId('container');
expect(container).toHaveAttribute('aria-label', 'Main container');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<Container className="custom-class" data-testid="container">
Custom
</Container>,
);
const container = screen.getByTestId("container");
expect(container.className).toContain("custom-class");
expect(container.className).toContain("mx-auto");
expect(container.className).toContain("w-full");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<Container className="custom-class" data-testid="container">
Custom
</Container>
);
const container = screen.getByTestId('container');
expect(container.className).toContain('custom-class');
expect(container.className).toContain('mx-auto');
expect(container.className).toContain('w-full');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to container element", () => {
let ref: HTMLDivElement | null = null;
render(
<Container
ref={(el) => {
ref = el;
}}
>
Container
</Container>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe("DIV");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to container element', () => {
let ref: HTMLDivElement | null = null;
render(
<Container
ref={(el) => {
ref = el;
}}
>
Container
</Container>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref!.tagName).toBe('DIV');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Container data-testid="container">Container</Container>);
const container = screen.getByTestId("container");
expect(container.className).toContain("mx-auto");
expect(container.className).toContain("w-full");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Container data-testid="container">Container</Container>);
const container = screen.getByTestId('container');
expect(container.className).toContain('mx-auto');
expect(container.className).toContain('w-full');
});
});
});

44
packages/ui/src/Container/Container.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { ContainerProps } from "./types";
import { containerVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { ContainerProps } from './types';
import { containerVariants } from './variants';
/**
* Container component
@ -23,23 +23,23 @@ import { containerVariants } from "./variants";
* ```
*/
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
({ className, size = "xl", padding = "md", children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
containerVariants({
size,
padding,
}),
className,
)}
{...props}
>
{children}
</div>
);
},
({ className, size = 'xl', padding = 'md', children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
containerVariants({
size,
padding,
}),
className
)}
{...props}
>
{children}
</div>
);
}
);
Container.displayName = "Container";
Container.displayName = 'Container';

34
packages/ui/src/Container/tokens.ts
View file

@ -1,25 +1,25 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* Container component design tokens
* Maps global tokens to container-specific semantics
*/
export const containerTokens = {
/** Maximum widths for each size */
maxWidth: {
sm: "640px", // max-w-screen-sm
md: "768px", // max-w-screen-md
lg: "1024px", // max-w-screen-lg
xl: "1280px", // max-w-screen-xl
"2xl": "1536px", // max-w-screen-2xl
full: "100%", // max-w-full
},
/** Maximum widths for each size */
maxWidth: {
sm: '640px', // max-w-screen-sm
md: '768px', // max-w-screen-md
lg: '1024px', // max-w-screen-lg
xl: '1280px', // max-w-screen-xl
'2xl': '1536px', // max-w-screen-2xl
full: '100%', // max-w-full
},
/** Horizontal padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Horizontal padding for each size */
padding: {
none: spacing[0], // 0
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
} as const;

22
packages/ui/src/Container/types.ts
View file

@ -1,20 +1,20 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* Container component props
*/
export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
/**
* Maximum width of the container
* @default 'xl'
*/
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
/**
* Maximum width of the container
* @default 'xl'
*/
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
/**
* Horizontal padding
* @default 'md'
*/
padding?: "none" | "sm" | "md" | "lg";
/**
* Horizontal padding
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
}
/**

52
packages/ui/src/Container/variants.ts
View file

@ -1,37 +1,37 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Container variant definitions
* Uses custom variant system for type-safe class composition
*/
export const containerVariants = createVariants({
base: [
// Layout
"mx-auto w-full",
].join(" "),
base: [
// Layout
'mx-auto w-full',
].join(' '),
variants: {
size: {
sm: "max-w-screen-sm",
md: "max-w-screen-md",
lg: "max-w-screen-lg",
xl: "max-w-screen-xl",
"2xl": "max-w-screen-2xl",
full: "max-w-full",
},
variants: {
size: {
sm: 'max-w-screen-sm',
md: 'max-w-screen-md',
lg: 'max-w-screen-lg',
xl: 'max-w-screen-xl',
'2xl': 'max-w-screen-2xl',
full: 'max-w-full',
},
padding: {
none: "px-0",
sm: "px-4",
md: "px-6",
lg: "px-8",
},
},
padding: {
none: 'px-0',
sm: 'px-4',
md: 'px-6',
lg: 'px-8',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "xl",
padding: "md",
},
defaultVariants: {
size: 'xl',
padding: 'md',
},
});

563
packages/ui/src/GridContainer/GridContainer.test.tsx
View file

@ -1,317 +1,306 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { GridContainer } from "./GridContainer";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { GridContainer } from './GridContainer';
describe("GridContainer", () => {
describe("Rendering", () => {
it("renders a div element", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid).toBeInTheDocument();
expect(grid.tagName).toBe("DIV");
});
describe('GridContainer', () => {
describe('Rendering', () => {
it('renders a div element', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid).toBeInTheDocument();
expect(grid.tagName).toBe('DIV');
});
it("renders content", () => {
render(<GridContainer>Test content</GridContainer>);
expect(screen.getByText("Test content")).toBeInTheDocument();
});
it('renders content', () => {
render(<GridContainer>Test content</GridContainer>);
expect(screen.getByText('Test content')).toBeInTheDocument();
});
it("renders multiple children", () => {
render(
<GridContainer>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</GridContainer>,
);
expect(screen.getByText("Child 1")).toBeInTheDocument();
expect(screen.getByText("Child 2")).toBeInTheDocument();
expect(screen.getByText("Child 3")).toBeInTheDocument();
});
});
it('renders multiple children', () => {
render(
<GridContainer>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</GridContainer>
);
expect(screen.getByText('Child 1')).toBeInTheDocument();
expect(screen.getByText('Child 2')).toBeInTheDocument();
expect(screen.getByText('Child 3')).toBeInTheDocument();
});
});
describe("Column Variants", () => {
it("applies auto columns by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-[repeat(auto-fit");
});
describe('Column Variants', () => {
it('applies auto columns by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-[repeat(auto-fit');
});
it("applies single column", () => {
render(
<GridContainer columns={1} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-1");
});
it('applies single column', () => {
render(
<GridContainer columns={1} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-1');
});
it("applies responsive 2 columns", () => {
render(
<GridContainer columns={2} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-1");
expect(grid.className).toContain("md:grid-cols-2");
});
it('applies responsive 2 columns', () => {
render(
<GridContainer columns={2} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-1');
expect(grid.className).toContain('md:grid-cols-2');
});
it("applies responsive 3 columns", () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("lg:grid-cols-3");
});
it('applies responsive 3 columns', () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('lg:grid-cols-3');
});
it("applies responsive 4 columns", () => {
render(
<GridContainer columns={4} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("lg:grid-cols-4");
});
});
it('applies responsive 4 columns', () => {
render(
<GridContainer columns={4} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('lg:grid-cols-4');
});
});
describe("Gap Variants", () => {
it("applies no gap", () => {
render(
<GridContainer gap="none" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-0");
});
describe('Gap Variants', () => {
it('applies no gap', () => {
render(
<GridContainer gap="none" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-0');
});
it("applies small gap", () => {
render(
<GridContainer gap="sm" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-4");
});
it('applies small gap', () => {
render(
<GridContainer gap="sm" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-4');
});
it("applies medium gap by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-6");
});
it('applies medium gap by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-6');
});
it("applies large gap", () => {
render(
<GridContainer gap="lg" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-8");
});
it('applies large gap', () => {
render(
<GridContainer gap="lg" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-8');
});
it("applies extra large gap", () => {
render(
<GridContainer gap="xl" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("gap-12");
});
});
it('applies extra large gap', () => {
render(
<GridContainer gap="xl" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('gap-12');
});
});
describe("Responsive Behavior", () => {
it("uses responsive by default", () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("md:grid-cols");
});
describe('Responsive Behavior', () => {
it('uses responsive by default', () => {
render(
<GridContainer columns={3} data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('md:grid-cols');
});
it("applies fixed columns when responsive is false", () => {
render(
<GridContainer columns={3} responsive="fixed" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
// When responsive="fixed", compound variant adds grid-cols-3
// Base variant still adds responsive classes, but compound variant takes precedence
expect(grid.className).toContain("grid-cols-3");
});
});
it('applies fixed columns when responsive is false', () => {
render(
<GridContainer columns={3} responsive="fixed" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
// When responsive="fixed", compound variant adds grid-cols-3
// Base variant still adds responsive classes, but compound variant takes precedence
expect(grid.className).toContain('grid-cols-3');
});
});
describe("Alignment", () => {
it("applies start alignment", () => {
render(
<GridContainer align="start" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-start");
});
describe('Alignment', () => {
it('applies start alignment', () => {
render(
<GridContainer align="start" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-start');
});
it("applies center alignment", () => {
render(
<GridContainer align="center" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-center");
});
it('applies center alignment', () => {
render(
<GridContainer align="center" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-center');
});
it("applies end alignment", () => {
render(
<GridContainer align="end" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-end");
});
it('applies end alignment', () => {
render(
<GridContainer align="end" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-end');
});
it("applies stretch alignment by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("items-stretch");
});
});
it('applies stretch alignment by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('items-stretch');
});
});
describe("Justification", () => {
it("applies start justify by default", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("justify-items-start");
});
describe('Justification', () => {
it('applies start justify by default', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('justify-items-start');
});
it("applies center justify", () => {
render(
<GridContainer justify="center" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("justify-items-center");
});
it('applies center justify', () => {
render(
<GridContainer justify="center" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('justify-items-center');
});
it("applies end justify", () => {
render(
<GridContainer justify="end" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("justify-items-end");
});
});
it('applies end justify', () => {
render(
<GridContainer justify="end" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('justify-items-end');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<GridContainer id="grid-id" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid).toHaveAttribute("id", "grid-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(
<GridContainer id="grid-id" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid).toHaveAttribute('id', 'grid-id');
});
it("passes through data attributes", () => {
render(
<GridContainer data-custom="test" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
render(
<GridContainer data-custom="test" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<GridContainer className="custom-class" data-testid="grid">
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("custom-class");
expect(grid.className).toContain("grid");
expect(grid.className).toContain("w-full");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(
<GridContainer className="custom-class" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('custom-class');
expect(grid.className).toContain('grid');
expect(grid.className).toContain('w-full');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to div element", () => {
let ref: HTMLDivElement | null = null;
render(
<GridContainer
ref={(el) => {
ref = el;
}}
>
Content
</GridContainer>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
});
});
describe('Ref Forwarding', () => {
it('forwards ref to div element', () => {
let ref: HTMLDivElement | null = null;
render(
<GridContainer
ref={(el) => {
ref = el;
}}
>
Content
</GridContainer>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid");
expect(grid.className).toContain("w-full");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<GridContainer data-testid="grid">Content</GridContainer>);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid');
expect(grid.className).toContain('w-full');
});
});
describe("Compound Scenarios", () => {
it("works with multiple variants combined", () => {
render(
<GridContainer
columns={4}
gap="lg"
align="center"
justify="center"
data-testid="grid"
>
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("lg:grid-cols-4");
expect(grid.className).toContain("gap-8");
expect(grid.className).toContain("items-center");
expect(grid.className).toContain("justify-items-center");
});
describe('Compound Scenarios', () => {
it('works with multiple variants combined', () => {
render(
<GridContainer columns={4} gap="lg" align="center" justify="center" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('lg:grid-cols-4');
expect(grid.className).toContain('gap-8');
expect(grid.className).toContain('items-center');
expect(grid.className).toContain('justify-items-center');
});
it("works with fixed columns and custom className", () => {
render(
<GridContainer
columns={3}
responsive="fixed"
className="my-custom-grid"
data-testid="grid"
>
Content
</GridContainer>,
);
const grid = screen.getByTestId("grid");
expect(grid.className).toContain("grid-cols-3");
expect(grid.className).toContain("my-custom-grid");
});
});
it('works with fixed columns and custom className', () => {
render(
<GridContainer columns={3} responsive="fixed" className="my-custom-grid" data-testid="grid">
Content
</GridContainer>
);
const grid = screen.getByTestId('grid');
expect(grid.className).toContain('grid-cols-3');
expect(grid.className).toContain('my-custom-grid');
});
});
});

74
packages/ui/src/GridContainer/GridContainer.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { GridContainerProps } from "./types";
import { gridContainerVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { GridContainerProps } from './types';
import { gridContainerVariants } from './variants';
/**
* GridContainer component
@ -25,38 +25,38 @@ import { gridContainerVariants } from "./variants";
* ```
*/
export const GridContainer = forwardRef<HTMLDivElement, GridContainerProps>(
(
{
className,
columns = "auto",
gap = "md",
responsive = "responsive",
align = "stretch",
justify = "start",
children,
...props
},
ref,
) => {
return (
<div
ref={ref}
className={cn(
gridContainerVariants({
columns,
gap,
responsive,
align,
justify,
}),
className,
)}
{...props}
>
{children}
</div>
);
},
(
{
className,
columns = 'auto',
gap = 'md',
responsive = 'responsive',
align = 'stretch',
justify = 'start',
children,
...props
},
ref
) => {
return (
<div
ref={ref}
className={cn(
gridContainerVariants({
columns,
gap,
responsive,
align,
justify,
}),
className
)}
{...props}
>
{children}
</div>
);
}
);
GridContainer.displayName = "GridContainer";
GridContainer.displayName = 'GridContainer';

52
packages/ui/src/GridContainer/types.ts
View file

@ -1,38 +1,38 @@
import type { HTMLAttributes } from "react";
import type { HTMLAttributes } from 'react';
/**
* GridContainer component props
*/
export interface GridContainerProps extends HTMLAttributes<HTMLDivElement> {
/**
* Number of columns in the grid
* @default 'auto'
*/
columns?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 12;
/**
* Number of columns in the grid
* @default 'auto'
*/
columns?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 12;
/**
* Gap between grid items
* @default 'md'
*/
gap?: "none" | "sm" | "md" | "lg" | "xl";
/**
* Gap between grid items
* @default 'md'
*/
gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
/**
* Responsive breakpoint behavior
* @default 'responsive'
*/
responsive?: "responsive" | "fixed";
/**
* Responsive breakpoint behavior
* @default 'responsive'
*/
responsive?: 'responsive' | 'fixed';
/**
* Align items vertically
* @default 'stretch'
*/
align?: "start" | "center" | "end" | "stretch";
/**
* Align items vertically
* @default 'stretch'
*/
align?: 'start' | 'center' | 'end' | 'stretch';
/**
* Justify items horizontally
* @default 'start'
*/
justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
/**
* Justify items horizontally
* @default 'start'
*/
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
}
/**

210
packages/ui/src/GridContainer/variants.ts
View file

@ -1,118 +1,118 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* GridContainer variant definitions
*/
export const gridContainerVariants = createVariants({
base: ["grid w-full"].join(" "),
base: ['grid w-full'].join(' '),
variants: {
columns: {
auto: "",
1: "grid-cols-1",
2: "grid-cols-1 md:grid-cols-2",
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
12: "grid-cols-4 md:grid-cols-6 lg:grid-cols-12",
},
variants: {
columns: {
auto: '',
1: 'grid-cols-1',
2: 'grid-cols-1 md:grid-cols-2',
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
12: 'grid-cols-4 md:grid-cols-6 lg:grid-cols-12',
},
gap: {
none: "gap-0",
sm: "gap-4",
md: "gap-6",
lg: "gap-8",
xl: "gap-12",
},
gap: {
none: 'gap-0',
sm: 'gap-4',
md: 'gap-6',
lg: 'gap-8',
xl: 'gap-12',
},
responsive: {
responsive: "",
fixed: "",
},
responsive: {
responsive: '',
fixed: '',
},
align: {
start: "items-start",
center: "items-center",
end: "items-end",
stretch: "items-stretch",
},
align: {
start: 'items-start',
center: 'items-center',
end: 'items-end',
stretch: 'items-stretch',
},
justify: {
start: "justify-items-start",
center: "justify-items-center",
end: "justify-items-end",
between: "justify-items-between",
around: "justify-items-around",
evenly: "justify-items-evenly",
},
},
justify: {
start: 'justify-items-start',
center: 'justify-items-center',
end: 'justify-items-end',
between: 'justify-items-between',
around: 'justify-items-around',
evenly: 'justify-items-evenly',
},
},
compoundVariants: [
{
conditions: {
columns: "auto",
responsive: "responsive",
},
className: "grid-cols-[repeat(auto-fit,minmax(250px,1fr))]",
},
{
conditions: {
columns: "auto",
responsive: "fixed",
},
className: "grid-cols-[repeat(auto-fill,minmax(250px,1fr))]",
},
// Fixed columns don't use responsive breakpoints
{
conditions: {
columns: 2,
responsive: "fixed",
},
className: "grid-cols-2",
},
{
conditions: {
columns: 3,
responsive: "fixed",
},
className: "grid-cols-3",
},
{
conditions: {
columns: 4,
responsive: "fixed",
},
className: "grid-cols-4",
},
{
conditions: {
columns: 5,
responsive: "fixed",
},
className: "grid-cols-5",
},
{
conditions: {
columns: 6,
responsive: "fixed",
},
className: "grid-cols-6",
},
{
conditions: {
columns: 12,
responsive: "fixed",
},
className: "grid-cols-12",
},
],
compoundVariants: [
{
conditions: {
columns: 'auto',
responsive: 'responsive',
},
className: 'grid-cols-[repeat(auto-fit,minmax(250px,1fr))]',
},
{
conditions: {
columns: 'auto',
responsive: 'fixed',
},
className: 'grid-cols-[repeat(auto-fill,minmax(250px,1fr))]',
},
// Fixed columns don't use responsive breakpoints
{
conditions: {
columns: 2,
responsive: 'fixed',
},
className: 'grid-cols-2',
},
{
conditions: {
columns: 3,
responsive: 'fixed',
},
className: 'grid-cols-3',
},
{
conditions: {
columns: 4,
responsive: 'fixed',
},
className: 'grid-cols-4',
},
{
conditions: {
columns: 5,
responsive: 'fixed',
},
className: 'grid-cols-5',
},
{
conditions: {
columns: 6,
responsive: 'fixed',
},
className: 'grid-cols-6',
},
{
conditions: {
columns: 12,
responsive: 'fixed',
},
className: 'grid-cols-12',
},
],
defaultVariants: {
columns: "auto",
gap: "md",
responsive: "responsive",
align: "stretch",
justify: "start",
},
defaultVariants: {
columns: 'auto',
gap: 'md',
responsive: 'responsive',
align: 'stretch',
justify: 'start',
},
});

590
packages/ui/src/Header/Header.test.tsx
View file

@ -1,337 +1,325 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Header } from "./Header";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Header } from './Header';
describe("Header", () => {
describe("Rendering", () => {
it("renders a header element", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toBeInTheDocument();
expect(header.tagName).toBe("HEADER");
});
describe('Header', () => {
describe('Rendering', () => {
it('renders a header element', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toBeInTheDocument();
expect(header.tagName).toBe('HEADER');
});
it("renders without title or actions", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toBeInTheDocument();
expect(screen.queryByTestId("header-title")).not.toBeInTheDocument();
expect(screen.queryByTestId("header-actions")).not.toBeInTheDocument();
});
});
it('renders without title or actions', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toBeInTheDocument();
expect(screen.queryByTestId('header-title')).not.toBeInTheDocument();
expect(screen.queryByTestId('header-actions')).not.toBeInTheDocument();
});
});
describe("Title", () => {
it("renders title when provided", () => {
render(<Header title="TPMJS Registry" />);
expect(screen.getByText("TPMJS Registry")).toBeInTheDocument();
});
describe('Title', () => {
it('renders title when provided', () => {
render(<Header title="TPMJS Registry" />);
expect(screen.getByText('TPMJS Registry')).toBeInTheDocument();
});
it("renders title in title container", () => {
render(<Header title="My App" data-testid="header" />);
const titleContainer = screen.getByTestId("header-title");
expect(titleContainer).toBeInTheDocument();
expect(titleContainer.textContent).toBe("My App");
});
it('renders title in title container', () => {
render(<Header title="My App" data-testid="header" />);
const titleContainer = screen.getByTestId('header-title');
expect(titleContainer).toBeInTheDocument();
expect(titleContainer.textContent).toBe('My App');
});
it("title container has correct base classes", () => {
render(<Header title="App" />);
const titleContainer = screen.getByTestId("header-title");
expect(titleContainer.className).toContain("flex");
expect(titleContainer.className).toContain("items-center");
expect(titleContainer.className).toContain("font-semibold");
expect(titleContainer.className).toContain("text-foreground");
});
it('title container has correct base classes', () => {
render(<Header title="App" />);
const titleContainer = screen.getByTestId('header-title');
expect(titleContainer.className).toContain('flex');
expect(titleContainer.className).toContain('items-center');
expect(titleContainer.className).toContain('font-semibold');
expect(titleContainer.className).toContain('text-foreground');
});
it("renders ReactNode as title", () => {
render(<Header title={<div data-testid="custom-title">Custom</div>} />);
expect(screen.getByTestId("custom-title")).toBeInTheDocument();
});
});
it('renders ReactNode as title', () => {
render(<Header title={<div data-testid="custom-title">Custom</div>} />);
expect(screen.getByTestId('custom-title')).toBeInTheDocument();
});
});
describe("Actions", () => {
it("renders actions when provided", () => {
render(
<Header
actions={
<button type="button" data-testid="action-btn">
Sign In
</button>
}
/>,
);
expect(screen.getByTestId("action-btn")).toBeInTheDocument();
});
describe('Actions', () => {
it('renders actions when provided', () => {
render(
<Header
actions={
<button type="button" data-testid="action-btn">
Sign In
</button>
}
/>
);
expect(screen.getByTestId('action-btn')).toBeInTheDocument();
});
it("renders actions in actions container", () => {
render(<Header actions="Actions content" data-testid="header" />);
const actionsContainer = screen.getByTestId("header-actions");
expect(actionsContainer).toBeInTheDocument();
expect(actionsContainer.textContent).toBe("Actions content");
});
it('renders actions in actions container', () => {
render(<Header actions="Actions content" data-testid="header" />);
const actionsContainer = screen.getByTestId('header-actions');
expect(actionsContainer).toBeInTheDocument();
expect(actionsContainer.textContent).toBe('Actions content');
});
it("actions container has correct base classes", () => {
render(<Header actions="Actions" />);
const actionsContainer = screen.getByTestId("header-actions");
expect(actionsContainer.className).toContain("flex");
expect(actionsContainer.className).toContain("items-center");
});
it('actions container has correct base classes', () => {
render(<Header actions="Actions" />);
const actionsContainer = screen.getByTestId('header-actions');
expect(actionsContainer.className).toContain('flex');
expect(actionsContainer.className).toContain('items-center');
});
it("renders ReactNode as actions", () => {
render(
<Header
actions={<div data-testid="custom-actions">Custom Actions</div>}
/>,
);
expect(screen.getByTestId("custom-actions")).toBeInTheDocument();
});
});
it('renders ReactNode as actions', () => {
render(<Header actions={<div data-testid="custom-actions">Custom Actions</div>} />);
expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
});
});
describe("Children", () => {
it("renders children when provided", () => {
render(<Header>Header content</Header>);
expect(screen.getByText("Header content")).toBeInTheDocument();
});
describe('Children', () => {
it('renders children when provided', () => {
render(<Header>Header content</Header>);
expect(screen.getByText('Header content')).toBeInTheDocument();
});
it("renders children in children container", () => {
render(<Header data-testid="header">Center content</Header>);
const childrenContainer = screen.getByTestId("header-children");
expect(childrenContainer).toBeInTheDocument();
expect(childrenContainer.textContent).toBe("Center content");
});
it('renders children in children container', () => {
render(<Header data-testid="header">Center content</Header>);
const childrenContainer = screen.getByTestId('header-children');
expect(childrenContainer).toBeInTheDocument();
expect(childrenContainer.textContent).toBe('Center content');
});
it("children container has centering classes", () => {
render(<Header>Content</Header>);
const childrenContainer = screen.getByTestId("header-children");
expect(childrenContainer.className).toContain("flex-1");
expect(childrenContainer.className).toContain("flex");
expect(childrenContainer.className).toContain("items-center");
expect(childrenContainer.className).toContain("justify-center");
});
it('children container has centering classes', () => {
render(<Header>Content</Header>);
const childrenContainer = screen.getByTestId('header-children');
expect(childrenContainer.className).toContain('flex-1');
expect(childrenContainer.className).toContain('flex');
expect(childrenContainer.className).toContain('items-center');
expect(childrenContainer.className).toContain('justify-center');
});
it("renders ReactNode as children", () => {
render(
<Header>
<nav data-testid="custom-nav">Navigation</nav>
</Header>,
);
expect(screen.getByTestId("custom-nav")).toBeInTheDocument();
});
});
it('renders ReactNode as children', () => {
render(
<Header>
<nav data-testid="custom-nav">Navigation</nav>
</Header>
);
expect(screen.getByTestId('custom-nav')).toBeInTheDocument();
});
});
describe("Combined Content", () => {
it("renders title and actions together", () => {
render(<Header title="Title" actions="Actions" />);
expect(screen.getByText("Title")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
describe('Combined Content', () => {
it('renders title and actions together', () => {
render(<Header title="Title" actions="Actions" />);
expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
});
it("renders title, children, and actions together", () => {
render(
<Header title="Title" actions="Actions">
Center
</Header>,
);
expect(screen.getByText("Title")).toBeInTheDocument();
expect(screen.getByText("Center")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
it('renders title, children, and actions together', () => {
render(
<Header title="Title" actions="Actions">
Center
</Header>
);
expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByText('Center')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
});
it("maintains correct layout with all content", () => {
render(
<Header title="Left" actions="Right" data-testid="header">
Center
</Header>,
);
const header = screen.getByTestId("header");
expect(header.className).toContain("justify-between");
});
});
it('maintains correct layout with all content', () => {
render(
<Header title="Left" actions="Right" data-testid="header">
Center
</Header>
);
const header = screen.getByTestId('header');
expect(header.className).toContain('justify-between');
});
});
describe("Size Variants", () => {
it("applies small size to header", () => {
render(<Header size="sm" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-12");
expect(header.className).toContain("px-4");
});
describe('Size Variants', () => {
it('applies small size to header', () => {
render(<Header size="sm" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-12');
expect(header.className).toContain('px-4');
});
it("applies medium size to header", () => {
render(<Header size="md" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-16");
expect(header.className).toContain("px-6");
});
it('applies medium size to header', () => {
render(<Header size="md" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-16');
expect(header.className).toContain('px-6');
});
it("applies large size to header", () => {
render(<Header size="lg" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-20");
expect(header.className).toContain("px-8");
});
it('applies large size to header', () => {
render(<Header size="lg" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-20');
expect(header.className).toContain('px-8');
});
it("uses md size by default", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-16");
expect(header.className).toContain("px-6");
});
it('uses md size by default', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-16');
expect(header.className).toContain('px-6');
});
it("applies size to title", () => {
render(<Header title="Title" size="lg" />);
const titleContainer = screen.getByTestId("header-title");
expect(titleContainer.className).toContain("text-xl");
expect(titleContainer.className).toContain("gap-4");
});
it('applies size to title', () => {
render(<Header title="Title" size="lg" />);
const titleContainer = screen.getByTestId('header-title');
expect(titleContainer.className).toContain('text-xl');
expect(titleContainer.className).toContain('gap-4');
});
it("applies size to actions", () => {
render(<Header actions="Actions" size="sm" />);
const actionsContainer = screen.getByTestId("header-actions");
expect(actionsContainer.className).toContain("gap-2");
});
});
it('applies size to actions', () => {
render(<Header actions="Actions" size="sm" />);
const actionsContainer = screen.getByTestId('header-actions');
expect(actionsContainer.className).toContain('gap-2');
});
});
describe("Sticky Positioning", () => {
it("applies sticky classes when sticky is true", () => {
render(<Header sticky={true} data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("sticky");
expect(header.className).toContain("top-0");
expect(header.className).toContain("z-50");
});
describe('Sticky Positioning', () => {
it('applies sticky classes when sticky is true', () => {
render(<Header sticky={true} data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('sticky');
expect(header.className).toContain('top-0');
expect(header.className).toContain('z-50');
});
it("does not apply sticky classes when sticky is false", () => {
render(<Header sticky={false} data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).not.toContain("sticky");
expect(header.className).not.toContain("top-0");
expect(header.className).not.toContain("z-50");
});
it('does not apply sticky classes when sticky is false', () => {
render(<Header sticky={false} data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).not.toContain('sticky');
expect(header.className).not.toContain('top-0');
expect(header.className).not.toContain('z-50');
});
it("is not sticky by default", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).not.toContain("sticky");
});
});
it('is not sticky by default', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).not.toContain('sticky');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(<Header id="header-id" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toHaveAttribute("id", "header-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<Header id="header-id" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toHaveAttribute('id', 'header-id');
});
it("passes through data attributes", () => {
render(<Header data-custom="test" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toHaveAttribute("data-custom", "test");
});
it('passes through data attributes', () => {
render(<Header data-custom="test" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toHaveAttribute('data-custom', 'test');
});
it("passes through aria attributes", () => {
render(<Header aria-label="Main header" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header).toHaveAttribute("aria-label", "Main header");
});
});
it('passes through aria attributes', () => {
render(<Header aria-label="Main header" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header).toHaveAttribute('aria-label', 'Main header');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(<Header className="custom-class" data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("custom-class");
expect(header.className).toContain("flex");
expect(header.className).toContain("bg-surface");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<Header className="custom-class" data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('custom-class');
expect(header.className).toContain('flex');
expect(header.className).toContain('bg-surface');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to header element", () => {
let ref: HTMLElement | null = null;
render(
<Header
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLElement);
expect(ref!.tagName).toBe("HEADER");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to header element', () => {
let ref: HTMLElement | null = null;
render(
<Header
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLElement);
expect(ref!.tagName).toBe('HEADER');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId("header");
expect(header.className).toContain("flex");
expect(header.className).toContain("items-center");
expect(header.className).toContain("justify-between");
expect(header.className).toContain("w-full");
expect(header.className).toContain("bg-surface");
expect(header.className).toContain("border-b");
expect(header.className).toContain("border-border");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Header data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('flex');
expect(header.className).toContain('items-center');
expect(header.className).toContain('justify-between');
expect(header.className).toContain('w-full');
expect(header.className).toContain('bg-surface');
expect(header.className).toContain('border-b');
expect(header.className).toContain('border-border');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and sticky", () => {
render(
<Header
title="App"
actions="Sign In"
size="lg"
sticky={true}
data-testid="header"
/>,
);
const header = screen.getByTestId("header");
expect(header.className).toContain("h-20");
expect(header.className).toContain("px-8");
expect(header.className).toContain("sticky");
expect(header.className).toContain("top-0");
expect(header.className).toContain("z-50");
});
describe('Compound Scenarios', () => {
it('works correctly with large size and sticky', () => {
render(<Header title="App" actions="Sign In" size="lg" sticky={true} data-testid="header" />);
const header = screen.getByTestId('header');
expect(header.className).toContain('h-20');
expect(header.className).toContain('px-8');
expect(header.className).toContain('sticky');
expect(header.className).toContain('top-0');
expect(header.className).toContain('z-50');
});
it("works correctly with all content and custom className", () => {
render(
<Header
title="Title"
actions="Actions"
className="my-header"
size="sm"
data-testid="header"
>
Center
</Header>,
);
const header = screen.getByTestId("header");
expect(header.className).toContain("my-header");
expect(header.className).toContain("h-12");
expect(screen.getByText("Title")).toBeInTheDocument();
expect(screen.getByText("Center")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
it('works correctly with all content and custom className', () => {
render(
<Header
title="Title"
actions="Actions"
className="my-header"
size="sm"
data-testid="header"
>
Center
</Header>
);
const header = screen.getByTestId('header');
expect(header.className).toContain('my-header');
expect(header.className).toContain('h-12');
expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByText('Center')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
});
it("works with complex ReactNode content", () => {
render(
<Header
title={
<div className="logo">
<img src="logo.png" alt="Logo" />
<span>TPMJS</span>
</div>
}
actions={
<div className="nav">
<button type="button">Docs</button>
<button type="button">GitHub</button>
</div>
}
/>,
);
expect(screen.getByText("TPMJS")).toBeInTheDocument();
expect(screen.getByText("Docs")).toBeInTheDocument();
expect(screen.getByText("GitHub")).toBeInTheDocument();
});
});
it('works with complex ReactNode content', () => {
render(
<Header
title={
<div className="logo">
<img src="logo.png" alt="Logo" />
<span>TPMJS</span>
</div>
}
actions={
<div className="nav">
<button type="button">Docs</button>
<button type="button">GitHub</button>
</div>
}
/>
);
expect(screen.getByText('TPMJS')).toBeInTheDocument();
expect(screen.getByText('Docs')).toBeInTheDocument();
expect(screen.getByText('GitHub')).toBeInTheDocument();
});
});
});

110
packages/ui/src/Header/Header.tsx
View file

@ -1,11 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { HeaderProps } from "./types";
import {
headerActionsVariants,
headerTitleVariants,
headerVariants,
} from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { HeaderProps } from './types';
import { headerActionsVariants, headerTitleVariants, headerVariants } from './variants';
/**
* Header component
@ -31,61 +27,47 @@ import {
* ```
*/
export const Header = forwardRef<HTMLElement, HeaderProps>(
(
{
className,
title,
actions,
size = "md",
sticky = false,
children,
...props
},
ref,
) => {
return (
<header
className={cn(
headerVariants({
size,
sticky: sticky ? "true" : "false",
}),
className,
)}
ref={ref}
{...props}
>
{title && (
<div
className={headerTitleVariants({
size,
})}
data-testid="header-title"
>
{title}
</div>
)}
{children && (
<div
className="flex-1 flex items-center justify-center"
data-testid="header-children"
>
{children}
</div>
)}
{actions && (
<div
className={headerActionsVariants({
size,
})}
data-testid="header-actions"
>
{actions}
</div>
)}
</header>
);
},
({ className, title, actions, size = 'md', sticky = false, children, ...props }, ref) => {
return (
<header
className={cn(
headerVariants({
size,
sticky: sticky ? 'true' : 'false',
}),
className
)}
ref={ref}
{...props}
>
{title && (
<div
className={headerTitleVariants({
size,
})}
data-testid="header-title"
>
{title}
</div>
)}
{children && (
<div className="flex-1 flex items-center justify-center" data-testid="header-children">
{children}
</div>
)}
{actions && (
<div
className={headerActionsVariants({
size,
})}
data-testid="header-actions"
>
{actions}
</div>
)}
</header>
);
}
);
Header.displayName = "Header";
Header.displayName = 'Header';

26
packages/ui/src/Header/tokens.ts
View file

@ -1,21 +1,21 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* Header component design tokens
* Maps global tokens to header-specific semantics
*/
export const headerTokens = {
/** Height for each size */
height: {
sm: "3rem", // 48px
md: "4rem", // 64px
lg: "5rem", // 80px
},
/** Height for each size */
height: {
sm: '3rem', // 48px
md: '4rem', // 64px
lg: '5rem', // 80px
},
/** Horizontal padding for each size */
padding: {
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
/** Horizontal padding for each size */
padding: {
sm: spacing[4], // 1rem (16px)
md: spacing[6], // 1.5rem (24px)
lg: spacing[8], // 2rem (32px)
},
} as const;

41
packages/ui/src/Header/types.ts
View file

@ -1,31 +1,30 @@
import type { HTMLAttributes, ReactNode } from "react";
import type { HTMLAttributes, ReactNode } from 'react';
/**
* Header component props
*/
export interface HeaderProps
extends Omit<HTMLAttributes<HTMLElement>, "title"> {
/**
* Title/logo content for the left side
*/
title?: ReactNode;
export interface HeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
/**
* Title/logo content for the left side
*/
title?: ReactNode;
/**
* Actions/navigation for the right side
*/
actions?: ReactNode;
/**
* Actions/navigation for the right side
*/
actions?: ReactNode;
/**
* Size variant
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size variant
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether header is sticky
* @default false
*/
sticky?: boolean;
/**
* Whether header is sticky
* @default false
*/
sticky?: boolean;
}
/**

122
packages/ui/src/Header/variants.ts
View file

@ -1,88 +1,88 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Header variant definitions
*/
export const headerVariants = createVariants({
base: [
// Display
"flex items-center justify-between",
// Width
"w-full",
// Background
"bg-surface",
// Border
"border-b border-border",
].join(" "),
base: [
// Display
'flex items-center justify-between',
// Width
'w-full',
// Background
'bg-surface',
// Border
'border-b border-border',
].join(' '),
variants: {
size: {
sm: "h-12 px-4", // 48px height, 16px padding
md: "h-16 px-6", // 64px height, 24px padding
lg: "h-20 px-8", // 80px height, 32px padding
},
sticky: {
true: "sticky top-0 z-50",
false: "",
},
},
variants: {
size: {
sm: 'h-12 px-4', // 48px height, 16px padding
md: 'h-16 px-6', // 64px height, 24px padding
lg: 'h-20 px-8', // 80px height, 32px padding
},
sticky: {
true: 'sticky top-0 z-50',
false: '',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
sticky: "false",
},
defaultVariants: {
size: 'md',
sticky: 'false',
},
});
/**
* Header title variant definitions
*/
export const headerTitleVariants = createVariants({
base: [
// Display
"flex items-center",
// Font
"font-semibold",
// Color
"text-foreground",
].join(" "),
base: [
// Display
'flex items-center',
// Font
'font-semibold',
// Color
'text-foreground',
].join(' '),
variants: {
size: {
sm: "text-base gap-2", // 16px
md: "text-lg gap-3", // 18px
lg: "text-xl gap-4", // 20px
},
},
variants: {
size: {
sm: 'text-base gap-2', // 16px
md: 'text-lg gap-3', // 18px
lg: 'text-xl gap-4', // 20px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});
/**
* Header actions variant definitions
*/
export const headerActionsVariants = createVariants({
base: [
// Display
"flex items-center",
].join(" "),
base: [
// Display
'flex items-center',
].join(' '),
variants: {
size: {
sm: "gap-2", // 8px
md: "gap-3", // 12px
lg: "gap-4", // 16px
},
},
variants: {
size: {
sm: 'gap-2', // 8px
md: 'gap-3', // 12px
lg: 'gap-4', // 16px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});

398
packages/ui/src/Icon/Icon.test.tsx
View file

@ -1,229 +1,219 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Icon } from "./Icon";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Icon } from './Icon';
describe("Icon", () => {
describe("Rendering", () => {
it("renders an SVG element", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toBeInTheDocument();
expect(icon.tagName).toBe("svg");
});
describe('Icon', () => {
describe('Rendering', () => {
it('renders an SVG element', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toBeInTheDocument();
expect(icon.tagName).toBe('svg');
});
it("renders with correct viewBox", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("viewBox", "0 0 24 24");
});
it('renders with correct viewBox', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('viewBox', '0 0 24 24');
});
it("renders with currentColor fill", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("fill", "currentColor");
});
it('renders with currentColor fill', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('fill', 'currentColor');
});
it("includes path element", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toBeInTheDocument();
});
it('includes path element', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toBeInTheDocument();
});
it("is aria-hidden by default", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("aria-hidden", "true");
});
});
it('is aria-hidden by default', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('aria-hidden', 'true');
});
});
describe("Size Variants", () => {
it("applies small size", () => {
render(<Icon icon="check" size="sm" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-4");
expect(icon.className).toContain("h-4");
});
describe('Size Variants', () => {
it('applies small size', () => {
render(<Icon icon="check" size="sm" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-4');
expect(icon.className).toContain('h-4');
});
it("applies medium size", () => {
render(<Icon icon="check" size="md" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-5");
expect(icon.className).toContain("h-5");
});
it('applies medium size', () => {
render(<Icon icon="check" size="md" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-5');
expect(icon.className).toContain('h-5');
});
it("applies large size", () => {
render(<Icon icon="check" size="lg" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-6");
expect(icon.className).toContain("h-6");
});
it('applies large size', () => {
render(<Icon icon="check" size="lg" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-6');
expect(icon.className).toContain('h-6');
});
it("uses md size by default", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-5");
expect(icon.className).toContain("h-5");
});
});
it('uses md size by default', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-5');
expect(icon.className).toContain('h-5');
});
});
describe("Icon Variants", () => {
it("renders copy icon", () => {
render(<Icon icon="copy" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
);
});
describe('Icon Variants', () => {
it('renders copy icon', () => {
render(<Icon icon="copy" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'
);
});
it("renders externalLink icon", () => {
render(<Icon icon="externalLink" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",
);
});
it('renders externalLink icon', () => {
render(<Icon icon="externalLink" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'
);
});
it("renders github icon", () => {
render(<Icon icon="github" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path?.getAttribute("d")).toContain("M12 2C6.477 2 2 6.477 2 12");
});
it('renders github icon', () => {
render(<Icon icon="github" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path?.getAttribute('d')).toContain('M12 2C6.477 2 2 6.477 2 12');
});
it("renders check icon", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
);
});
it('renders check icon', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'
);
});
it("renders x icon", () => {
render(<Icon icon="x" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
);
});
it('renders x icon', () => {
render(<Icon icon="x" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute(
'd',
'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'
);
});
it("renders chevronDown icon", () => {
render(<Icon icon="chevronDown" data-testid="icon" />);
const icon = screen.getByTestId("icon");
const path = icon.querySelector("path");
expect(path).toHaveAttribute(
"d",
"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",
);
});
});
it('renders chevronDown icon', () => {
render(<Icon icon="chevronDown" data-testid="icon" />);
const icon = screen.getByTestId('icon');
const path = icon.querySelector('path');
expect(path).toHaveAttribute('d', 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z');
});
});
describe("SVG Attributes", () => {
it("passes through className", () => {
render(<Icon icon="check" className="custom-class" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("custom-class");
});
describe('SVG Attributes', () => {
it('passes through className', () => {
render(<Icon icon="check" className="custom-class" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('custom-class');
});
it("merges custom className with variant classes", () => {
render(<Icon icon="check" className="text-red-500" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("text-red-500");
expect(icon.className).toContain("inline-block");
expect(icon.className).toContain("fill-current");
});
it('merges custom className with variant classes', () => {
render(<Icon icon="check" className="text-red-500" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('text-red-500');
expect(icon.className).toContain('inline-block');
expect(icon.className).toContain('fill-current');
});
it("allows custom aria-hidden", () => {
render(<Icon icon="check" aria-hidden={false} data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("aria-hidden", "false");
});
it('allows custom aria-hidden', () => {
render(<Icon icon="check" aria-hidden={false} data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('aria-hidden', 'false');
});
it("passes through aria-label", () => {
render(
<Icon
icon="check"
aria-label="Success"
aria-hidden={false}
data-testid="icon"
/>,
);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("aria-label", "Success");
});
it('passes through aria-label', () => {
render(<Icon icon="check" aria-label="Success" aria-hidden={false} data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('aria-label', 'Success');
});
it("passes through id attribute", () => {
render(<Icon icon="check" id="icon-id" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon).toHaveAttribute("id", "icon-id");
});
});
it('passes through id attribute', () => {
render(<Icon icon="check" id="icon-id" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon).toHaveAttribute('id', 'icon-id');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to SVG element", () => {
let ref: SVGSVGElement | null = null;
render(
<Icon
icon="check"
ref={(el: SVGSVGElement | null) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(SVGSVGElement);
expect(ref!.tagName).toBe("svg");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to SVG element', () => {
let ref: SVGSVGElement | null = null;
render(
<Icon
icon="check"
ref={(el: SVGSVGElement | null) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(SVGSVGElement);
expect(ref!.tagName).toBe('svg');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("inline-block");
expect(icon.className).toContain("fill-current");
});
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Icon icon="check" data-testid="icon" />);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('inline-block');
expect(icon.className).toContain('fill-current');
});
});
describe("Compound Scenarios", () => {
it("works correctly with custom size and className", () => {
render(
<Icon
icon="github"
size="lg"
className="text-zinc-400 hover:text-zinc-100"
data-testid="icon"
/>,
);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-6");
expect(icon.className).toContain("h-6");
expect(icon.className).toContain("text-zinc-400");
expect(icon.className).toContain("hover:text-zinc-100");
});
describe('Compound Scenarios', () => {
it('works correctly with custom size and className', () => {
render(
<Icon
icon="github"
size="lg"
className="text-zinc-400 hover:text-zinc-100"
data-testid="icon"
/>
);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-6');
expect(icon.className).toContain('h-6');
expect(icon.className).toContain('text-zinc-400');
expect(icon.className).toContain('hover:text-zinc-100');
});
it("works correctly with aria attributes and custom size", () => {
render(
<Icon
icon="externalLink"
size="sm"
aria-label="Opens in new tab"
aria-hidden={false}
data-testid="icon"
/>,
);
const icon = screen.getByTestId("icon");
expect(icon.className).toContain("w-4");
expect(icon.className).toContain("h-4");
expect(icon).toHaveAttribute("aria-label", "Opens in new tab");
expect(icon).toHaveAttribute("aria-hidden", "false");
});
});
it('works correctly with aria attributes and custom size', () => {
render(
<Icon
icon="externalLink"
size="sm"
aria-label="Opens in new tab"
aria-hidden={false}
data-testid="icon"
/>
);
const icon = screen.getByTestId('icon');
expect(icon.className).toContain('w-4');
expect(icon.className).toContain('h-4');
expect(icon).toHaveAttribute('aria-label', 'Opens in new tab');
expect(icon).toHaveAttribute('aria-hidden', 'false');
});
});
});

52
packages/ui/src/Icon/Icon.tsx
View file

@ -1,8 +1,8 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import { type IconName, icons } from "./icons";
import type { IconProps } from "./types";
import { iconVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import { type IconName, icons } from './icons';
import type { IconProps } from './types';
import { iconVariants } from './variants';
export type { IconName };
@ -22,27 +22,27 @@ export type { IconName };
* ```
*/
export const Icon = forwardRef<SVGSVGElement, IconProps>(
({ className, icon, size = "md", ...props }, ref) => {
const iconData = icons[icon];
({ className, icon, size = 'md', ...props }, ref) => {
const iconData = icons[icon];
return (
<svg
ref={ref}
className={cn(
iconVariants({
size,
}),
className,
)}
viewBox={iconData.viewBox}
fill="currentColor"
aria-hidden={props["aria-hidden"] ?? true}
{...props}
>
<path d={iconData.path} />
</svg>
);
},
return (
<svg
ref={ref}
className={cn(
iconVariants({
size,
}),
className
)}
viewBox={iconData.viewBox}
fill="currentColor"
aria-hidden={props['aria-hidden'] ?? true}
{...props}
>
<path d={iconData.path} />
</svg>
);
}
);
Icon.displayName = "Icon";
Icon.displayName = 'Icon';

64
packages/ui/src/Icon/icons.ts
View file

@ -4,38 +4,38 @@
*/
export const icons = {
copy: {
viewBox: "0 0 24 24",
path: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
},
externalLink: {
viewBox: "0 0 24 24",
path: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",
},
github: {
viewBox: "0 0 24 24",
path: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z",
},
check: {
viewBox: "0 0 24 24",
path: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
},
x: {
viewBox: "0 0 24 24",
path: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
},
chevronDown: {
viewBox: "0 0 24 24",
path: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",
},
sun: {
viewBox: "0 0 24 24",
path: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z",
},
moon: {
viewBox: "0 0 24 24",
path: "M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z",
},
copy: {
viewBox: '0 0 24 24',
path: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',
},
externalLink: {
viewBox: '0 0 24 24',
path: 'M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z',
},
github: {
viewBox: '0 0 24 24',
path: 'M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z',
},
check: {
viewBox: '0 0 24 24',
path: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z',
},
x: {
viewBox: '0 0 24 24',
path: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z',
},
chevronDown: {
viewBox: '0 0 24 24',
path: 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z',
},
sun: {
viewBox: '0 0 24 24',
path: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z',
},
moon: {
viewBox: '0 0 24 24',
path: 'M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z',
},
} as const;
export type IconName = keyof typeof icons;

12
packages/ui/src/Icon/tokens.ts
View file

@ -3,10 +3,10 @@
* Maps size variants to pixel dimensions
*/
export const iconTokens = {
/** Icon sizes in pixels */
size: {
sm: "16px", // 1rem
md: "20px", // 1.25rem
lg: "24px", // 1.5rem
},
/** Icon sizes in pixels */
size: {
sm: '16px', // 1rem
md: '20px', // 1.25rem
lg: '24px', // 1.5rem
},
} as const;

25
packages/ui/src/Icon/types.ts
View file

@ -1,21 +1,20 @@
import type { SVGAttributes } from "react";
import type { IconName } from "./icons";
import type { SVGAttributes } from 'react';
import type { IconName } from './icons';
/**
* Icon component props
*/
export interface IconProps
extends Omit<SVGAttributes<SVGSVGElement>, "children"> {
/**
* Icon to display
*/
icon: IconName;
export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
/**
* Icon to display
*/
icon: IconName;
/**
* Size of the icon
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the icon
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
}
/**

36
packages/ui/src/Icon/variants.ts
View file

@ -1,28 +1,28 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Icon variant definitions
* Uses custom variant system for type-safe class composition
*/
export const iconVariants = createVariants({
base: [
// Display
"inline-block",
// Fill
"fill-current",
].join(" "),
base: [
// Display
'inline-block',
// Fill
'fill-current',
].join(' '),
variants: {
size: {
sm: "w-4 h-4", // 16px
md: "w-5 h-5", // 20px
lg: "w-6 h-6", // 24px
},
},
variants: {
size: {
sm: 'w-4 h-4', // 16px
md: 'w-5 h-5', // 20px
lg: 'w-6 h-6', // 24px
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
},
defaultVariants: {
size: 'md',
},
});

714
packages/ui/src/Input/Input.test.tsx
View file

@ -1,414 +1,412 @@
import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { Input } from "./Input";
import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { Input } from './Input';
describe("Input", () => {
describe("Rendering", () => {
it("renders an input element", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toBeInTheDocument();
expect(input.tagName).toBe("INPUT");
});
describe('Input', () => {
describe('Rendering', () => {
it('renders an input element', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toBeInTheDocument();
expect(input.tagName).toBe('INPUT');
});
it('renders with default type="text"', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "text");
});
});
it('renders with default type="text"', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'text');
});
});
describe("States", () => {
it("applies default state classes", () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-border");
expect(input.className).toContain("text-foreground");
});
describe('States', () => {
it('applies default state classes', () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-border');
expect(input.className).toContain('text-foreground');
});
it("applies error state classes", () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-error");
});
it('applies error state classes', () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-error');
});
it("applies success state classes", () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-success");
});
it('applies success state classes', () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-success');
});
it("sets aria-invalid on error state", () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-invalid", "true");
});
it('sets aria-invalid on error state', () => {
render(<Input state="error" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-invalid', 'true');
});
it("does not set aria-invalid on default state", () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).not.toHaveAttribute("aria-invalid");
});
it('does not set aria-invalid on default state', () => {
render(<Input state="default" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).not.toHaveAttribute('aria-invalid');
});
it("does not set aria-invalid on success state", () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).not.toHaveAttribute("aria-invalid");
});
});
it('does not set aria-invalid on success state', () => {
render(<Input state="success" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).not.toHaveAttribute('aria-invalid');
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(<Input size="sm" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("h-9");
expect(input.className).toContain("px-3");
expect(input.className).toContain("text-sm");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(<Input size="sm" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('h-9');
expect(input.className).toContain('px-3');
expect(input.className).toContain('text-sm');
});
it("applies medium size classes (default)", () => {
render(<Input size="md" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("h-10");
expect(input.className).toContain("px-3");
expect(input.className).toContain("text-base");
});
it('applies medium size classes (default)', () => {
render(<Input size="md" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('h-10');
expect(input.className).toContain('px-3');
expect(input.className).toContain('text-base');
});
it("applies large size classes", () => {
render(<Input size="lg" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("h-11");
expect(input.className).toContain("px-4");
expect(input.className).toContain("text-lg");
});
});
it('applies large size classes', () => {
render(<Input size="lg" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('h-11');
expect(input.className).toContain('px-4');
expect(input.className).toContain('text-lg');
});
});
describe("Full Width", () => {
it("is full width by default", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("w-full");
});
describe('Full Width', () => {
it('is full width by default', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('w-full');
});
it("applies full width when explicitly true", () => {
render(<Input fullWidth data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("w-full");
});
it('applies full width when explicitly true', () => {
render(<Input fullWidth data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('w-full');
});
it("does not apply full width when false", () => {
render(<Input fullWidth={false} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("w-auto");
});
});
it('does not apply full width when false', () => {
render(<Input fullWidth={false} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('w-auto');
});
});
describe("Input Types", () => {
it('renders with type="email"', () => {
render(<Input type="email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "email");
});
describe('Input Types', () => {
it('renders with type="email"', () => {
render(<Input type="email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'email');
});
it('renders with type="password"', () => {
render(<Input type="password" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "password");
});
it('renders with type="password"', () => {
render(<Input type="password" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'password');
});
it('renders with type="number"', () => {
render(<Input type="number" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "number");
});
it('renders with type="number"', () => {
render(<Input type="number" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'number');
});
it('renders with type="tel"', () => {
render(<Input type="tel" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "tel");
});
it('renders with type="tel"', () => {
render(<Input type="tel" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'tel');
});
it('renders with type="url"', () => {
render(<Input type="url" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "url");
});
it('renders with type="url"', () => {
render(<Input type="url" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'url');
});
it('renders with type="search"', () => {
render(<Input type="search" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "search");
});
it('renders with type="search"', () => {
render(<Input type="search" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'search');
});
it('renders with type="date"', () => {
render(<Input type="date" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "date");
});
it('renders with type="date"', () => {
render(<Input type="date" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'date');
});
it('renders with type="time"', () => {
render(<Input type="time" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "time");
});
it('renders with type="time"', () => {
render(<Input type="time" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'time');
});
it('renders with type="file"', () => {
render(<Input type="file" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("type", "file");
});
});
it('renders with type="file"', () => {
render(<Input type="file" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('type', 'file');
});
});
describe("Disabled State", () => {
it("is not disabled by default", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).not.toBeDisabled();
});
describe('Disabled State', () => {
it('is not disabled by default', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).not.toBeDisabled();
});
it("disables input when disabled prop is true", () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toBeDisabled();
});
it('disables input when disabled prop is true', () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toBeDisabled();
});
it("applies disabled opacity class", () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("disabled:opacity-50");
expect(input.className).toContain("disabled:cursor-not-allowed");
});
});
it('applies disabled opacity class', () => {
render(<Input disabled data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('disabled:opacity-50');
expect(input.className).toContain('disabled:cursor-not-allowed');
});
});
describe("Placeholder", () => {
it("renders with placeholder text", () => {
render(<Input placeholder="Enter your email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("placeholder", "Enter your email");
});
describe('Placeholder', () => {
it('renders with placeholder text', () => {
render(<Input placeholder="Enter your email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('placeholder', 'Enter your email');
});
it("applies placeholder styling classes", () => {
render(<Input placeholder="Placeholder text" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("placeholder:text-foreground-tertiary");
});
});
it('applies placeholder styling classes', () => {
render(<Input placeholder="Placeholder text" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('placeholder:text-foreground-tertiary');
});
});
describe("Value and onChange", () => {
it("renders with initial value", () => {
render(
<Input value="test value" onChange={() => {}} data-testid="input" />,
);
const input = screen.getByTestId("input") as HTMLInputElement;
expect(input.value).toBe("test value");
});
describe('Value and onChange', () => {
it('renders with initial value', () => {
render(<Input value="test value" onChange={() => {}} data-testid="input" />);
const input = screen.getByTestId('input') as HTMLInputElement;
expect(input.value).toBe('test value');
});
it("calls onChange when input value changes", () => {
const handleChange = vi.fn();
render(<Input onChange={handleChange} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.change(input, { target: { value: "new value" } });
expect(handleChange).toHaveBeenCalledTimes(1);
});
it('calls onChange when input value changes', () => {
const handleChange = vi.fn();
render(<Input onChange={handleChange} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.change(input, { target: { value: 'new value' } });
expect(handleChange).toHaveBeenCalledTimes(1);
});
it("updates value correctly when typing", () => {
render(<Input defaultValue="" data-testid="input" />);
const input = screen.getByTestId("input") as HTMLInputElement;
fireEvent.change(input, { target: { value: "typed text" } });
expect(input.value).toBe("typed text");
});
});
it('updates value correctly when typing', () => {
render(<Input defaultValue="" data-testid="input" />);
const input = screen.getByTestId('input') as HTMLInputElement;
fireEvent.change(input, { target: { value: 'typed text' } });
expect(input.value).toBe('typed text');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(<Input id="test-input" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("id", "test-input");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<Input id="test-input" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('id', 'test-input');
});
it("passes through name attribute", () => {
render(<Input name="email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("name", "email");
});
it('passes through name attribute', () => {
render(<Input name="email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('name', 'email');
});
it("passes through required attribute", () => {
render(<Input required data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("required");
});
it('passes through required attribute', () => {
render(<Input required data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('required');
});
it("passes through maxLength attribute", () => {
render(<Input maxLength={100} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("maxLength", "100");
});
it('passes through maxLength attribute', () => {
render(<Input maxLength={100} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('maxLength', '100');
});
it("passes through pattern attribute", () => {
render(<Input pattern="[0-9]*" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("pattern", "[0-9]*");
});
it('passes through pattern attribute', () => {
render(<Input pattern="[0-9]*" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('pattern', '[0-9]*');
});
it("passes through min and max for number input", () => {
render(<Input type="number" min={0} max={100} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("min", "0");
expect(input).toHaveAttribute("max", "100");
});
it('passes through min and max for number input', () => {
render(<Input type="number" min={0} max={100} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('min', '0');
expect(input).toHaveAttribute('max', '100');
});
it("passes through step for number input", () => {
render(<Input type="number" step={0.01} data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("step", "0.01");
});
it('passes through step for number input', () => {
render(<Input type="number" step={0.01} data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('step', '0.01');
});
it("passes through autoComplete attribute", () => {
render(<Input autoComplete="email" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("autoComplete", "email");
});
it('passes through autoComplete attribute', () => {
render(<Input autoComplete="email" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('autoComplete', 'email');
});
it("passes through autoFocus attribute", () => {
render(<Input autoFocus data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveFocus();
});
});
it('passes through autoFocus attribute', () => {
render(<Input autoFocus data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveFocus();
});
});
describe("ARIA Attributes", () => {
it("passes through aria-label", () => {
render(<Input aria-label="Email address" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-label", "Email address");
});
describe('ARIA Attributes', () => {
it('passes through aria-label', () => {
render(<Input aria-label="Email address" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-label', 'Email address');
});
it("passes through aria-describedby", () => {
render(<Input aria-describedby="helper-text" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-describedby", "helper-text");
});
it('passes through aria-describedby', () => {
render(<Input aria-describedby="helper-text" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-describedby', 'helper-text');
});
it("passes through aria-labelledby", () => {
render(<Input aria-labelledby="label-id" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toHaveAttribute("aria-labelledby", "label-id");
});
});
it('passes through aria-labelledby', () => {
render(<Input aria-labelledby="label-id" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toHaveAttribute('aria-labelledby', 'label-id');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(<Input className="custom-input" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("custom-input");
expect(input.className).toContain("rounded-md");
expect(input.className).toContain("border");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<Input className="custom-input" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('custom-input');
expect(input.className).toContain('rounded-md');
expect(input.className).toContain('border');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to input element", () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLInputElement);
expect(ref!.tagName).toBe("INPUT");
});
describe('Ref Forwarding', () => {
it('forwards ref to input element', () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLInputElement);
expect(ref!.tagName).toBe('INPUT');
});
it("can focus input through ref", () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
data-testid="input"
/>,
);
ref!.focus();
expect(screen.getByTestId("input")).toHaveFocus();
});
});
it('can focus input through ref', () => {
let ref: HTMLInputElement | null = null;
render(
<Input
ref={(el) => {
ref = el;
}}
data-testid="input"
/>
);
ref!.focus();
expect(screen.getByTestId('input')).toHaveFocus();
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("flex");
expect(input.className).toContain("w-full");
expect(input.className).toContain("font-sans");
expect(input.className).toContain("rounded-md");
expect(input.className).toContain("border");
expect(input.className).toContain("bg-background");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('flex');
expect(input.className).toContain('w-full');
expect(input.className).toContain('font-sans');
expect(input.className).toContain('rounded-md');
expect(input.className).toContain('border');
expect(input.className).toContain('bg-background');
});
it("includes transition classes", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("transition-base");
});
it('includes transition classes', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('transition-base');
});
it("includes focus ring classes", () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("focus-ring");
});
});
it('includes focus ring classes', () => {
render(<Input data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('focus-ring');
});
});
describe("Event Handlers", () => {
it("calls onFocus when input is focused", () => {
const handleFocus = vi.fn();
render(<Input onFocus={handleFocus} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.focus(input);
expect(handleFocus).toHaveBeenCalledTimes(1);
});
describe('Event Handlers', () => {
it('calls onFocus when input is focused', () => {
const handleFocus = vi.fn();
render(<Input onFocus={handleFocus} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.focus(input);
expect(handleFocus).toHaveBeenCalledTimes(1);
});
it("calls onBlur when input loses focus", () => {
const handleBlur = vi.fn();
render(<Input onBlur={handleBlur} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.focus(input);
fireEvent.blur(input);
expect(handleBlur).toHaveBeenCalledTimes(1);
});
it('calls onBlur when input loses focus', () => {
const handleBlur = vi.fn();
render(<Input onBlur={handleBlur} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.focus(input);
fireEvent.blur(input);
expect(handleBlur).toHaveBeenCalledTimes(1);
});
it("calls onKeyDown when key is pressed", () => {
const handleKeyDown = vi.fn();
render(<Input onKeyDown={handleKeyDown} data-testid="input" />);
const input = screen.getByTestId("input");
fireEvent.keyDown(input, { key: "Enter" });
expect(handleKeyDown).toHaveBeenCalledTimes(1);
});
});
it('calls onKeyDown when key is pressed', () => {
const handleKeyDown = vi.fn();
render(<Input onKeyDown={handleKeyDown} data-testid="input" />);
const input = screen.getByTestId('input');
fireEvent.keyDown(input, { key: 'Enter' });
expect(handleKeyDown).toHaveBeenCalledTimes(1);
});
});
describe("Compound Scenarios", () => {
it("works correctly with error state and small size", () => {
render(<Input state="error" size="sm" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-error");
expect(input.className).toContain("h-9");
expect(input).toHaveAttribute("aria-invalid", "true");
});
describe('Compound Scenarios', () => {
it('works correctly with error state and small size', () => {
render(<Input state="error" size="sm" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-error');
expect(input.className).toContain('h-9');
expect(input).toHaveAttribute('aria-invalid', 'true');
});
it("works correctly with success state and large size", () => {
render(<Input state="success" size="lg" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input.className).toContain("border-success");
expect(input.className).toContain("h-11");
});
it('works correctly with success state and large size', () => {
render(<Input state="success" size="lg" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input.className).toContain('border-success');
expect(input.className).toContain('h-11');
});
it("works correctly with disabled state and error state", () => {
render(<Input disabled state="error" data-testid="input" />);
const input = screen.getByTestId("input");
expect(input).toBeDisabled();
expect(input.className).toContain("border-error");
expect(input).toHaveAttribute("aria-invalid", "true");
});
});
it('works correctly with disabled state and error state', () => {
render(<Input disabled state="error" data-testid="input" />);
const input = screen.getByTestId('input');
expect(input).toBeDisabled();
expect(input.className).toContain('border-error');
expect(input).toHaveAttribute('aria-invalid', 'true');
});
});
});

70
packages/ui/src/Input/Input.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { InputProps } from "./types";
import { inputVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { InputProps } from './types';
import { inputVariants } from './variants';
/**
* Input component
@ -25,36 +25,36 @@ import { inputVariants } from "./variants";
* ```
*/
export const Input = forwardRef<HTMLInputElement, InputProps>(
(
{
className,
type = "text",
state = "default",
size = "md",
fullWidth = true,
disabled = false,
...props
},
ref,
) => {
return (
<input
ref={ref}
type={type}
className={cn(
inputVariants({
state,
size,
fullWidth: fullWidth ? "true" : "false",
}),
className,
)}
disabled={disabled}
aria-invalid={state === "error" ? "true" : undefined}
{...props}
/>
);
},
(
{
className,
type = 'text',
state = 'default',
size = 'md',
fullWidth = true,
disabled = false,
...props
},
ref
) => {
return (
<input
ref={ref}
type={type}
className={cn(
inputVariants({
state,
size,
fullWidth: fullWidth ? 'true' : 'false',
}),
className
)}
disabled={disabled}
aria-invalid={state === 'error' ? 'true' : undefined}
{...props}
/>
);
}
);
Input.displayName = "Input";
Input.displayName = 'Input';

64
packages/ui/src/Input/tokens.ts
View file

@ -1,44 +1,44 @@
import { borderRadius, spacing } from "../tokens";
import { borderRadius, spacing } from '../tokens';
/**
* Input component design tokens
* Maps global tokens to input-specific semantics
*/
export const inputTokens = {
/** Input heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
},
/** Input heights for each size */
height: {
sm: spacing[9], // 2.25rem (36px)
md: spacing[10], // 2.5rem (40px)
lg: spacing[11], // 2.75rem (44px)
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[3], // 0.75rem (12px)
lg: spacing[4], // 1rem (16px)
},
y: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
},
/** Horizontal padding for each size */
padding: {
x: {
sm: spacing[3], // 0.75rem (12px)
md: spacing[3], // 0.75rem (12px)
lg: spacing[4], // 1rem (16px)
},
y: {
sm: spacing[2], // 0.5rem (8px)
md: spacing[2.5], // 0.625rem (10px)
lg: spacing[3], // 0.75rem (12px)
},
},
/** Font sizes for each size */
fontSize: {
sm: "0.875rem", // 14px
md: "1rem", // 16px
lg: "1.125rem", // 18px
},
/** Font sizes for each size */
fontSize: {
sm: '0.875rem', // 14px
md: '1rem', // 16px
lg: '1.125rem', // 18px
},
/** Border radius */
borderRadius: borderRadius.md,
/** Border radius */
borderRadius: borderRadius.md,
/** Border width */
borderWidth: "1px",
/** Border width */
borderWidth: '1px',
/** Transition duration */
transitionDuration: "200ms",
/** Transition duration */
transitionDuration: '200ms',
} as const;

35
packages/ui/src/Input/types.ts
View file

@ -1,27 +1,26 @@
import type { InputHTMLAttributes } from "react";
import type { InputHTMLAttributes } from 'react';
/**
* Input component props
*/
export interface InputProps
extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
/**
* Visual state of the input
* @default 'default'
*/
state?: "default" | "error" | "success";
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
/**
* Visual state of the input
* @default 'default'
*/
state?: 'default' | 'error' | 'success';
/**
* Size of the input
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the input
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Full width input
* @default false
*/
fullWidth?: boolean;
/**
* Full width input
* @default false
*/
fullWidth?: boolean;
}
/**

114
packages/ui/src/Input/variants.ts
View file

@ -1,71 +1,71 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Input variant definitions
* Uses custom variant system for type-safe class composition
*/
export const inputVariants = createVariants({
base: [
// Layout
"flex w-full",
// Typography
"font-sans",
// Borders & Radius
"rounded-md border",
// Background
"bg-background",
// Transitions
"transition-base",
// Focus
"focus-ring",
// Placeholder
"placeholder:text-foreground-tertiary",
// File input
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
// Disabled state
"disabled:cursor-not-allowed disabled:opacity-50",
].join(" "),
base: [
// Layout
'flex w-full',
// Typography
'font-sans',
// Borders & Radius
'rounded-md border',
// Background
'bg-background',
// Transitions
'transition-base',
// Focus
'focus-ring',
// Placeholder
'placeholder:text-foreground-tertiary',
// File input
'file:border-0 file:bg-transparent file:text-sm file:font-medium',
// Disabled state
'disabled:cursor-not-allowed disabled:opacity-50',
].join(' '),
variants: {
state: {
default: [
"border-border text-foreground",
"hover:border-border-strong",
"focus:border-primary",
].join(" "),
variants: {
state: {
default: [
'border-border text-foreground',
'hover:border-border-strong',
'focus:border-primary',
].join(' '),
error: [
"border-error text-foreground",
"hover:border-error",
"focus:border-error",
"focus:ring-error/20",
].join(" "),
error: [
'border-error text-foreground',
'hover:border-error',
'focus:border-error',
'focus:ring-error/20',
].join(' '),
success: [
"border-success text-foreground",
"hover:border-success",
"focus:border-success",
"focus:ring-success/20",
].join(" "),
},
success: [
'border-success text-foreground',
'hover:border-success',
'focus:border-success',
'focus:ring-success/20',
].join(' '),
},
size: {
sm: "h-9 px-3 py-2 text-sm",
md: "h-10 px-3 py-2.5 text-base",
lg: "h-11 px-4 py-3 text-lg",
},
size: {
sm: 'h-9 px-3 py-2 text-sm',
md: 'h-10 px-3 py-2.5 text-base',
lg: 'h-11 px-4 py-3 text-lg',
},
fullWidth: {
true: "w-full",
false: "w-auto",
},
},
fullWidth: {
true: 'w-full',
false: 'w-auto',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
state: "default",
size: "md",
fullWidth: "true",
},
defaultVariants: {
state: 'default',
size: 'md',
fullWidth: 'true',
},
});

564
packages/ui/src/Label/Label.test.tsx
View file

@ -1,317 +1,317 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Label } from "./Label";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Label } from './Label';
describe("Label", () => {
describe("Rendering", () => {
it("renders a label element", () => {
render(<Label data-testid="label">Label text</Label>);
const label = screen.getByTestId("label");
expect(label).toBeInTheDocument();
expect(label.tagName).toBe("LABEL");
});
describe('Label', () => {
describe('Rendering', () => {
it('renders a label element', () => {
render(<Label data-testid="label">Label text</Label>);
const label = screen.getByTestId('label');
expect(label).toBeInTheDocument();
expect(label.tagName).toBe('LABEL');
});
it("renders children text", () => {
render(<Label>Email Address</Label>);
expect(screen.getByText("Email Address")).toBeInTheDocument();
});
});
it('renders children text', () => {
render(<Label>Email Address</Label>);
expect(screen.getByText('Email Address')).toBeInTheDocument();
});
});
describe("Sizes", () => {
it("applies small size classes", () => {
render(
<Label size="sm" data-testid="label">
Small label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-sm");
});
describe('Sizes', () => {
it('applies small size classes', () => {
render(
<Label size="sm" data-testid="label">
Small label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-sm');
});
it("applies medium size classes (default)", () => {
render(
<Label size="md" data-testid="label">
Medium label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-base");
});
it('applies medium size classes (default)', () => {
render(
<Label size="md" data-testid="label">
Medium label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-base');
});
it("applies large size classes", () => {
render(
<Label size="lg" data-testid="label">
Large label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-lg");
});
it('applies large size classes', () => {
render(
<Label size="lg" data-testid="label">
Large label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-lg');
});
it("uses medium size by default", () => {
render(<Label data-testid="label">Default label</Label>);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-base");
});
});
it('uses medium size by default', () => {
render(<Label data-testid="label">Default label</Label>);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-base');
});
});
describe("Required Indicator", () => {
it("does not show required indicator by default", () => {
render(<Label>Label</Label>);
expect(screen.queryByText("*")).not.toBeInTheDocument();
});
describe('Required Indicator', () => {
it('does not show required indicator by default', () => {
render(<Label>Label</Label>);
expect(screen.queryByText('*')).not.toBeInTheDocument();
});
it("shows required indicator when required is true", () => {
render(<Label required>Required field</Label>);
expect(screen.getByText("*")).toBeInTheDocument();
});
it('shows required indicator when required is true', () => {
render(<Label required>Required field</Label>);
expect(screen.getByText('*')).toBeInTheDocument();
});
it("hides required indicator from screen readers", () => {
render(
<Label required data-testid="label">
Required field
</Label>,
);
const asterisk = screen.getByText("*");
expect(asterisk).toHaveAttribute("aria-hidden", "true");
});
it('hides required indicator from screen readers', () => {
render(
<Label required data-testid="label">
Required field
</Label>
);
const asterisk = screen.getByText('*');
expect(asterisk).toHaveAttribute('aria-hidden', 'true');
});
it("applies error color to required indicator", () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText("*");
expect(asterisk.className).toContain("text-error");
});
it('applies error color to required indicator', () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText('*');
expect(asterisk.className).toContain('text-error');
});
it("applies proper spacing to required indicator", () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText("*");
expect(asterisk.className).toContain("ml-1");
});
});
it('applies proper spacing to required indicator', () => {
render(<Label required>Required field</Label>);
const asterisk = screen.getByText('*');
expect(asterisk.className).toContain('ml-1');
});
});
describe("Disabled State", () => {
it("is not disabled by default", () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId("label");
// Should not have the direct opacity-50 class (peer-disabled:opacity-50 is okay)
expect(label.className).toContain("peer-disabled:opacity-50");
expect(label.className.split(" ")).not.toContain("opacity-50");
});
describe('Disabled State', () => {
it('is not disabled by default', () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId('label');
// Should not have the direct opacity-50 class (peer-disabled:opacity-50 is okay)
expect(label.className).toContain('peer-disabled:opacity-50');
expect(label.className.split(' ')).not.toContain('opacity-50');
});
it("applies disabled classes when disabled is true", () => {
render(
<Label disabled data-testid="label">
Disabled label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("opacity-50");
expect(label.className).toContain("cursor-not-allowed");
});
});
it('applies disabled classes when disabled is true', () => {
render(
<Label disabled data-testid="label">
Disabled label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('opacity-50');
expect(label.className).toContain('cursor-not-allowed');
});
});
describe("HTML Attributes", () => {
it("associates with input using htmlFor", () => {
render(
<Label htmlFor="email-input" data-testid="label">
Email
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("for", "email-input");
});
describe('HTML Attributes', () => {
it('associates with input using htmlFor', () => {
render(
<Label htmlFor="email-input" data-testid="label">
Email
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('for', 'email-input');
});
it("passes through id attribute", () => {
render(
<Label id="label-id" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("id", "label-id");
});
it('passes through id attribute', () => {
render(
<Label id="label-id" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('id', 'label-id');
});
it("passes through className", () => {
render(
<Label className="custom-label" data-testid="label">
Custom
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("custom-label");
});
it('passes through className', () => {
render(
<Label className="custom-label" data-testid="label">
Custom
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('custom-label');
});
it("passes through onClick handler", () => {
let clicked = false;
render(
<Label
onClick={() => {
clicked = true;
}}
data-testid="label"
>
Clickable
</Label>,
);
const label = screen.getByTestId("label");
label.click();
expect(clicked).toBe(true);
});
});
it('passes through onClick handler', () => {
let clicked = false;
render(
<Label
onClick={() => {
clicked = true;
}}
data-testid="label"
>
Clickable
</Label>
);
const label = screen.getByTestId('label');
label.click();
expect(clicked).toBe(true);
});
});
describe("ARIA Attributes", () => {
it("passes through aria-label", () => {
render(
<Label aria-label="Field label" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("aria-label", "Field label");
});
describe('ARIA Attributes', () => {
it('passes through aria-label', () => {
render(
<Label aria-label="Field label" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('aria-label', 'Field label');
});
it("passes through aria-describedby", () => {
render(
<Label aria-describedby="description-id" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("aria-describedby", "description-id");
});
});
it('passes through aria-describedby', () => {
render(
<Label aria-describedby="description-id" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('aria-describedby', 'description-id');
});
});
describe("Custom className", () => {
it("merges custom className with base classes", () => {
render(
<Label className="custom-class" data-testid="label">
Label
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("custom-class");
expect(label.className).toContain("font-medium");
expect(label.className).toContain("text-foreground");
});
});
describe('Custom className', () => {
it('merges custom className with base classes', () => {
render(
<Label className="custom-class" data-testid="label">
Label
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('custom-class');
expect(label.className).toContain('font-medium');
expect(label.className).toContain('text-foreground');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to label element", () => {
let ref: HTMLLabelElement | null = null;
render(
<Label
ref={(el) => {
ref = el;
}}
>
Label
</Label>,
);
expect(ref).toBeInstanceOf(HTMLLabelElement);
expect(ref!.tagName).toBe("LABEL");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to label element', () => {
let ref: HTMLLabelElement | null = null;
render(
<Label
ref={(el) => {
ref = el;
}}
>
Label
</Label>
);
expect(ref).toBeInstanceOf(HTMLLabelElement);
expect(ref!.tagName).toBe('LABEL');
});
});
describe("Base Classes", () => {
it("always includes base classes", () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId("label");
expect(label.className).toContain("font-medium");
expect(label.className).toContain("text-foreground");
expect(label.className).toContain("cursor-pointer");
});
describe('Base Classes', () => {
it('always includes base classes', () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId('label');
expect(label.className).toContain('font-medium');
expect(label.className).toContain('text-foreground');
expect(label.className).toContain('cursor-pointer');
});
it("includes peer-disabled classes", () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId("label");
expect(label.className).toContain("peer-disabled:cursor-not-allowed");
expect(label.className).toContain("peer-disabled:opacity-50");
});
});
it('includes peer-disabled classes', () => {
render(<Label data-testid="label">Label</Label>);
const label = screen.getByTestId('label');
expect(label.className).toContain('peer-disabled:cursor-not-allowed');
expect(label.className).toContain('peer-disabled:opacity-50');
});
});
describe("Compound Scenarios", () => {
it("works correctly with required and small size", () => {
render(
<Label required size="sm" data-testid="label">
Small required
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-sm");
expect(screen.getByText("*")).toBeInTheDocument();
});
describe('Compound Scenarios', () => {
it('works correctly with required and small size', () => {
render(
<Label required size="sm" data-testid="label">
Small required
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-sm');
expect(screen.getByText('*')).toBeInTheDocument();
});
it("works correctly with disabled and required", () => {
render(
<Label disabled required data-testid="label">
Disabled required
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("opacity-50");
expect(label.className).toContain("cursor-not-allowed");
expect(screen.getByText("*")).toBeInTheDocument();
});
it('works correctly with disabled and required', () => {
render(
<Label disabled required data-testid="label">
Disabled required
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('opacity-50');
expect(label.className).toContain('cursor-not-allowed');
expect(screen.getByText('*')).toBeInTheDocument();
});
it("works correctly with htmlFor and required", () => {
render(
<Label htmlFor="field-id" required data-testid="label">
Field label
</Label>,
);
const label = screen.getByTestId("label");
expect(label).toHaveAttribute("for", "field-id");
expect(screen.getByText("*")).toBeInTheDocument();
});
it('works correctly with htmlFor and required', () => {
render(
<Label htmlFor="field-id" required data-testid="label">
Field label
</Label>
);
const label = screen.getByTestId('label');
expect(label).toHaveAttribute('for', 'field-id');
expect(screen.getByText('*')).toBeInTheDocument();
});
it("works correctly with large size and custom className", () => {
render(
<Label size="lg" className="font-bold" data-testid="label">
Large bold
</Label>,
);
const label = screen.getByTestId("label");
expect(label.className).toContain("text-lg");
expect(label.className).toContain("font-bold");
});
});
it('works correctly with large size and custom className', () => {
render(
<Label size="lg" className="font-bold" data-testid="label">
Large bold
</Label>
);
const label = screen.getByTestId('label');
expect(label.className).toContain('text-lg');
expect(label.className).toContain('font-bold');
});
});
describe("Integration with Form Controls", () => {
it("associates correctly with input element", () => {
const { container } = render(
<div>
<Label htmlFor="test-input">Test Label</Label>
<input id="test-input" type="text" />
</div>,
);
describe('Integration with Form Controls', () => {
it('associates correctly with input element', () => {
const { container } = render(
<div>
<Label htmlFor="test-input">Test Label</Label>
<input id="test-input" type="text" />
</div>
);
const label = container.querySelector("label");
const input = container.querySelector("input");
const label = container.querySelector('label');
const input = container.querySelector('input');
expect(label).toHaveAttribute("for", "test-input");
expect(input).toHaveAttribute("id", "test-input");
});
expect(label).toHaveAttribute('for', 'test-input');
expect(input).toHaveAttribute('id', 'test-input');
});
it("clicking label focuses associated input", () => {
render(
<div>
<Label htmlFor="focus-input" data-testid="label">
Click me
</Label>
<input id="focus-input" type="text" data-testid="input" />
</div>,
);
it('clicking label focuses associated input', () => {
render(
<div>
<Label htmlFor="focus-input" data-testid="label">
Click me
</Label>
<input id="focus-input" type="text" data-testid="input" />
</div>
);
const label = screen.getByTestId("label");
const input = screen.getByTestId("input") as HTMLInputElement;
const label = screen.getByTestId('label');
const input = screen.getByTestId('input') as HTMLInputElement;
// Verify the association exists
expect(label).toHaveAttribute("for", "focus-input");
expect(input).toHaveAttribute("id", "focus-input");
// Verify the association exists
expect(label).toHaveAttribute('for', 'focus-input');
expect(input).toHaveAttribute('id', 'focus-input');
// Focus the input directly to verify it can receive focus
input.focus();
expect(input).toHaveFocus();
});
});
// Focus the input directly to verify it can receive focus
input.focus();
expect(input).toHaveFocus();
});
});
});

66
packages/ui/src/Label/Label.tsx
View file

@ -1,7 +1,7 @@
import { cn } from "@tpmjs/utils/cn";
import { forwardRef } from "react";
import type { LabelProps } from "./types";
import { labelVariants } from "./variants";
import { cn } from '@tpmjs/utils/cn';
import { forwardRef } from 'react';
import type { LabelProps } from './types';
import { labelVariants } from './variants';
/**
* Label component
@ -18,39 +18,29 @@ import { labelVariants } from "./variants";
* ```
*/
export const Label = forwardRef<HTMLLabelElement, LabelProps>(
(
{
className,
size = "md",
required = false,
disabled = false,
children,
...props
},
ref,
) => {
return (
// biome-ignore lint/a11y/noLabelWithoutControl: This is a generic label component that can be used with htmlFor or wrap inputs
<label
ref={ref}
className={cn(
labelVariants({
size,
disabled: disabled ? "true" : "false",
}),
className,
)}
{...props}
>
{children}
{required && (
<span className="ml-1 text-error" aria-hidden="true">
*
</span>
)}
</label>
);
},
({ className, size = 'md', required = false, disabled = false, children, ...props }, ref) => {
return (
// biome-ignore lint/a11y/noLabelWithoutControl: This is a generic label component that can be used with htmlFor or wrap inputs
<label
ref={ref}
className={cn(
labelVariants({
size,
disabled: disabled ? 'true' : 'false',
}),
className
)}
{...props}
>
{children}
{required && (
<span className="ml-1 text-error" aria-hidden="true">
*
</span>
)}
</label>
);
}
);
Label.displayName = "Label";
Label.displayName = 'Label';

34
packages/ui/src/Label/tokens.ts
View file

@ -1,27 +1,27 @@
import { spacing } from "../tokens";
import { spacing } from '../tokens';
/**
* Label component design tokens
* Maps global tokens to label-specific semantics
*/
export const labelTokens = {
/** Font sizes for each size */
fontSize: {
sm: "0.875rem", // 14px
md: "1rem", // 16px
lg: "1.125rem", // 18px
},
/** Font sizes for each size */
fontSize: {
sm: '0.875rem', // 14px
md: '1rem', // 16px
lg: '1.125rem', // 18px
},
/** Line heights for each size */
lineHeight: {
sm: "1.25rem", // 20px
md: "1.5rem", // 24px
lg: "1.75rem", // 28px
},
/** Line heights for each size */
lineHeight: {
sm: '1.25rem', // 20px
md: '1.5rem', // 24px
lg: '1.75rem', // 28px
},
/** Margin bottom (spacing from label to input) */
marginBottom: spacing[2], // 0.5rem (8px)
/** Margin bottom (spacing from label to input) */
marginBottom: spacing[2], // 0.5rem (8px)
/** Required indicator spacing */
requiredSpacing: spacing[1], // 0.25rem (4px)
/** Required indicator spacing */
requiredSpacing: spacing[1], // 0.25rem (4px)
} as const;

32
packages/ui/src/Label/types.ts
View file

@ -1,26 +1,26 @@
import type { LabelHTMLAttributes } from "react";
import type { LabelHTMLAttributes } from 'react';
/**
* Label component props
*/
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
/**
* Size of the label
* @default 'md'
*/
size?: "sm" | "md" | "lg";
/**
* Size of the label
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether the associated field is required
* @default false
*/
required?: boolean;
/**
* Whether the associated field is required
* @default false
*/
required?: boolean;
/**
* Whether the label should be visually disabled
* @default false
*/
disabled?: boolean;
/**
* Whether the label should be visually disabled
* @default false
*/
disabled?: boolean;
}
/**

52
packages/ui/src/Label/variants.ts
View file

@ -1,37 +1,37 @@
import { createVariants } from "../system/variants";
import { createVariants } from '../system/variants';
/**
* Label variant definitions
* Uses custom variant system for type-safe class composition
*/
export const labelVariants = createVariants({
base: [
// Typography
"font-medium text-foreground",
"leading-none",
// Cursor
"cursor-pointer",
// Peer styling support
"peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
].join(" "),
base: [
// Typography
'font-medium text-foreground',
'leading-none',
// Cursor
'cursor-pointer',
// Peer styling support
'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
].join(' '),
variants: {
size: {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
},
variants: {
size: {
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
},
disabled: {
true: "cursor-not-allowed opacity-50",
false: "",
},
},
disabled: {
true: 'cursor-not-allowed opacity-50',
false: '',
},
},
compoundVariants: [],
compoundVariants: [],
defaultVariants: {
size: "md",
disabled: "false",
},
defaultVariants: {
size: 'md',
disabled: 'false',
},
});

489
packages/ui/src/ProgressBar/ProgressBar.test.tsx
View file

@ -1,290 +1,265 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { ProgressBar } from "./ProgressBar";
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { ProgressBar } from './ProgressBar';
describe("ProgressBar", () => {
describe("Rendering", () => {
it("renders a progress bar element", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toBeInTheDocument();
expect(progress.tagName).toBe("DIV");
});
describe('ProgressBar', () => {
describe('Rendering', () => {
it('renders a progress bar element', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toBeInTheDocument();
expect(progress.tagName).toBe('DIV');
});
it("has progressbar role", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("role", "progressbar");
});
it('has progressbar role', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('role', 'progressbar');
});
it("sets correct aria attributes", () => {
render(<ProgressBar value={75} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "75");
expect(progress).toHaveAttribute("aria-valuemin", "0");
expect(progress).toHaveAttribute("aria-valuemax", "100");
});
it('sets correct aria attributes', () => {
render(<ProgressBar value={75} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '75');
expect(progress).toHaveAttribute('aria-valuemin', '0');
expect(progress).toHaveAttribute('aria-valuemax', '100');
});
it("renders fill element with correct width", () => {
render(<ProgressBar value={60} data-testid="progress" />);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "60%" });
});
});
it('renders fill element with correct width', () => {
render(<ProgressBar value={60} data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '60%' });
});
});
describe("Value Handling", () => {
it("clamps value above 100 to 100", () => {
render(<ProgressBar value={150} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "100");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "100%" });
});
describe('Value Handling', () => {
it('clamps value above 100 to 100', () => {
render(<ProgressBar value={150} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '100');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '100%' });
});
it("clamps value below 0 to 0", () => {
render(<ProgressBar value={-10} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "0");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "0%" });
});
it('clamps value below 0 to 0', () => {
render(<ProgressBar value={-10} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '0');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '0%' });
});
it("handles 0 value", () => {
render(<ProgressBar value={0} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "0");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "0%" });
});
it('handles 0 value', () => {
render(<ProgressBar value={0} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '0');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '0%' });
});
it("handles 100 value", () => {
render(<ProgressBar value={100} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "100");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "100%" });
});
it('handles 100 value', () => {
render(<ProgressBar value={100} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '100');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '100%' });
});
it("handles decimal values", () => {
render(<ProgressBar value={33.7} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("aria-valuenow", "33.7");
const fill = progress.querySelector("div");
expect(fill).toHaveStyle({ width: "33.7%" });
});
});
it('handles decimal values', () => {
render(<ProgressBar value={33.7} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('aria-valuenow', '33.7');
const fill = progress.querySelector('div');
expect(fill).toHaveStyle({ width: '33.7%' });
});
});
describe("Size Variants", () => {
it("applies small size", () => {
render(<ProgressBar value={50} size="sm" data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-1");
});
describe('Size Variants', () => {
it('applies small size', () => {
render(<ProgressBar value={50} size="sm" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-1');
});
it("applies medium size", () => {
render(<ProgressBar value={50} size="md" data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-2");
});
it('applies medium size', () => {
render(<ProgressBar value={50} size="md" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-2');
});
it("applies large size", () => {
render(<ProgressBar value={50} size="lg" data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-3");
});
it('applies large size', () => {
render(<ProgressBar value={50} size="lg" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-3');
});
it("uses md size by default", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-2");
});
});
it('uses md size by default', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-2');
});
});
describe("Color Variants", () => {
it("applies primary variant", () => {
render(
<ProgressBar value={50} variant="primary" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-primary");
});
describe('Color Variants', () => {
it('applies primary variant', () => {
render(<ProgressBar value={50} variant="primary" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-primary');
});
it("applies success variant", () => {
render(
<ProgressBar value={50} variant="success" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-success");
});
it('applies success variant', () => {
render(<ProgressBar value={50} variant="success" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-success');
});
it("applies warning variant", () => {
render(
<ProgressBar value={50} variant="warning" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-warning");
});
it('applies warning variant', () => {
render(<ProgressBar value={50} variant="warning" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-warning');
});
it("applies danger variant", () => {
render(
<ProgressBar value={50} variant="danger" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-error");
});
it('applies danger variant', () => {
render(<ProgressBar value={50} variant="danger" data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-error');
});
it("uses primary variant by default", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-primary");
});
});
it('uses primary variant by default', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-primary');
});
});
describe("Label Display", () => {
it("does not show label by default", () => {
const { container } = render(<ProgressBar value={50} />);
expect(container.textContent).toBe("");
});
describe('Label Display', () => {
it('does not show label by default', () => {
const { container } = render(<ProgressBar value={50} />);
expect(container.textContent).toBe('');
});
it("shows label when showLabel is true", () => {
render(<ProgressBar value={50} showLabel />);
expect(screen.getByText("50%")).toBeInTheDocument();
});
it('shows label when showLabel is true', () => {
render(<ProgressBar value={50} showLabel />);
expect(screen.getByText('50%')).toBeInTheDocument();
});
it("rounds label to nearest integer", () => {
render(<ProgressBar value={33.7} showLabel />);
expect(screen.getByText("34%")).toBeInTheDocument();
});
it('rounds label to nearest integer', () => {
render(<ProgressBar value={33.7} showLabel />);
expect(screen.getByText('34%')).toBeInTheDocument();
});
it("shows 0% label for 0 value", () => {
render(<ProgressBar value={0} showLabel />);
expect(screen.getByText("0%")).toBeInTheDocument();
});
it('shows 0% label for 0 value', () => {
render(<ProgressBar value={0} showLabel />);
expect(screen.getByText('0%')).toBeInTheDocument();
});
it("shows 100% label for 100 value", () => {
render(<ProgressBar value={100} showLabel />);
expect(screen.getByText("100%")).toBeInTheDocument();
});
it('shows 100% label for 100 value', () => {
render(<ProgressBar value={100} showLabel />);
expect(screen.getByText('100%')).toBeInTheDocument();
});
it("label has correct styling classes", () => {
render(<ProgressBar value={50} showLabel />);
const label = screen.getByText("50%");
expect(label.className).toContain("text-sm");
expect(label.className).toContain("text-foreground-secondary");
expect(label.className).toContain("tabular-nums");
});
});
it('label has correct styling classes', () => {
render(<ProgressBar value={50} showLabel />);
const label = screen.getByText('50%');
expect(label.className).toContain('text-sm');
expect(label.className).toContain('text-foreground-secondary');
expect(label.className).toContain('tabular-nums');
});
});
describe("HTML Attributes", () => {
it("passes through id attribute", () => {
render(
<ProgressBar value={50} id="progress-id" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("id", "progress-id");
});
describe('HTML Attributes', () => {
it('passes through id attribute', () => {
render(<ProgressBar value={50} id="progress-id" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('id', 'progress-id');
});
it("passes through data attributes", () => {
render(
<ProgressBar value={50} data-custom="test" data-testid="progress" />,
);
const progress = screen.getByTestId("progress");
expect(progress).toHaveAttribute("data-custom", "test");
});
});
it('passes through data attributes', () => {
render(<ProgressBar value={50} data-custom="test" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress).toHaveAttribute('data-custom', 'test');
});
});
describe("Custom className", () => {
it("merges custom className with variant classes", () => {
render(
<ProgressBar
value={50}
className="custom-class"
data-testid="progress"
/>,
);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("custom-class");
expect(progress.className).toContain("bg-surface");
expect(progress.className).toContain("rounded");
});
});
describe('Custom className', () => {
it('merges custom className with variant classes', () => {
render(<ProgressBar value={50} className="custom-class" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('custom-class');
expect(progress.className).toContain('bg-surface');
expect(progress.className).toContain('rounded');
});
});
describe("Ref Forwarding", () => {
it("forwards ref to progress bar element", () => {
let ref: HTMLDivElement | null = null;
render(
<ProgressBar
value={50}
ref={(el) => {
ref = el;
}}
/>,
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref).toHaveAttribute("role", "progressbar");
});
});
describe('Ref Forwarding', () => {
it('forwards ref to progress bar element', () => {
let ref: HTMLDivElement | null = null;
render(
<ProgressBar
value={50}
ref={(el) => {
ref = el;
}}
/>
);
expect(ref).toBeInstanceOf(HTMLDivElement);
expect(ref).toHaveAttribute('role', 'progressbar');
});
});
describe("Base Classes", () => {
it("always includes track base classes", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("relative");
expect(progress.className).toContain("overflow-hidden");
expect(progress.className).toContain("bg-surface");
expect(progress.className).toContain("rounded");
});
describe('Base Classes', () => {
it('always includes track base classes', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('relative');
expect(progress.className).toContain('overflow-hidden');
expect(progress.className).toContain('bg-surface');
expect(progress.className).toContain('rounded');
});
it("fill includes base classes", () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId("progress");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("h-full");
expect(fill?.className).toContain("transition-all");
expect(fill?.className).toContain("rounded");
});
});
it('fill includes base classes', () => {
render(<ProgressBar value={50} data-testid="progress" />);
const progress = screen.getByTestId('progress');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('h-full');
expect(fill?.className).toContain('transition-all');
expect(fill?.className).toContain('rounded');
});
});
describe("Compound Scenarios", () => {
it("works correctly with large size and success variant", () => {
render(
<ProgressBar
value={80}
size="lg"
variant="success"
data-testid="progress"
/>,
);
const progress = screen.getByTestId("progress");
expect(progress.className).toContain("h-3");
const fill = progress.querySelector("div");
expect(fill?.className).toContain("bg-success");
expect(fill).toHaveStyle({ width: "80%" });
});
describe('Compound Scenarios', () => {
it('works correctly with large size and success variant', () => {
render(<ProgressBar value={80} size="lg" variant="success" data-testid="progress" />);
const progress = screen.getByTestId('progress');
expect(progress.className).toContain('h-3');
const fill = progress.querySelector('div');
expect(fill?.className).toContain('bg-success');
expect(fill).toHaveStyle({ width: '80%' });
});
it("works correctly with label, custom className, and warning variant", () => {
render(
<ProgressBar
value={45}
variant="warning"
showLabel
className="my-custom-class"
data-testid="progress"
/>,
);
const wrapper = screen.getByTestId("progress");
// Custom className is applied to the track, which is the first child
const track = wrapper.querySelector('[role="progressbar"]');
expect(track?.className).toContain("my-custom-class");
const fill = track?.querySelector("div");
expect(fill?.className).toContain("bg-warning");
expect(screen.getByText("45%")).toBeInTheDocument();
});
});
it('works correctly with label, custom className, and warning variant', () => {
render(
<ProgressBar
value={45}
variant="warning"
showLabel
className="my-custom-class"
data-testid="progress"
/>
);
const wrapper = screen.getByTestId('progress');
// Custom className is applied to the track, which is the first child
const track = wrapper.querySelector('[role="progressbar"]');
expect(track?.className).toContain('my-custom-class');
const fill = track?.querySelector('div');
expect(fill?.className).toContain('bg-warning');
expect(screen.getByText('45%')).toBeInTheDocument();
});
});
});

Some files were not shown because too many files have changed in this diff Show more