@b3-crow/ui-kit 0.0.37 → 0.0.39

package/package.json

@@ -1,21 +1,29 @@
 {
   "name": "@b3-crow/ui-kit",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "CROW-B3 UI Kit",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./code-block": {
+      "types": "./dist/components/display/CodeBlock.d.ts",
+      "default": "./dist/components/display/CodeBlock.js"
+    },
     "./styles.css": {
       "style": "./dist/styles.css",
       "default": "./dist/styles.css"
     }
   },
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc && bun run build:css",
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css --minify",
@@ -24,7 +32,9 @@
     "lint:fix": "eslint src/ --fix",
     "format": "bunx prettier src/ --write",
     "prepare": "husky install",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -40,21 +50,35 @@
     "@antfu/eslint-config": "^6.2.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint-react/eslint-plugin": "^2.4.0",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
     "@tailwindcss/cli": "4.1.18",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^22.10.5",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.182.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "autoprefixer": "^10.4.22",
     "commitlint": "^20.1.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.2.10",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.6",
+    "playwright": "^1.58.2",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
+    "react-icons": "^5.5.0",
+    "shiki": "^3.21.0",
+    "storybook": "^10.2.10",
     "tailwindcss": "^4.1.17",
-    "typescript": "^5.9.3"
+    "three": "^0.182.0",
+    "three-globe": "^2.45.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -66,20 +90,31 @@
     ]
   },
   "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "next": "^15.0.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "next": "^15.0.0",
+    "shiki": "^3.21.0",
+    "three": "^0.182.0",
+    "three-globe": "^2.45.0"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "three-globe": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cobe": "^0.6.5",
     "framer-motion": "^12.23.26",
     "lenis": "^1.2.1",
     "lucide-react": "^0.542.0",
-    "react-icons": "^5.5.0",
-    "shiki": "^3.21.0",
     "tailwind-merge": "^3.4.0"
   }
 }

package/.prettierignore

@@ -1,28 +0,0 @@
-# Dependencies
-node_modules/
-
-# Build outputs
-.next/
-out/
-dist/
-build/
-
-# Environment files
-.env*
-
-# Logs
-*.log
-
-# Package manager files
-package-lock.json
-yarn.lock
-bun.lock
-
-# IDE files
-.vscode/
-.idea/
-
-# OS files
-.DS_Store
-Thumbs.db
-

package/.templatesyncignore

@@ -1,2 +0,0 @@
-README.md
-tsconfig.json

package/.whitesource

@@ -1,14 +0,0 @@
-{
-  "scanSettings": {
-    "baseBranches": []
-  },
-  "checkRunSettings": {
-    "vulnerableCheckRunConclusionLevel": "failure",
-    "displayMode": "diff",
-    "useMendCheckNames": true
-  },
-  "issueSettings": {
-    "minSeverityLevel": "LOW",
-    "issueType": "DEPENDENCY"
-  }
-}

package/docs/components.md

@@ -1,265 +0,0 @@
-# Component Reference
-
-## Hero Components
-
-### AnimatedBackground
-
-Animated gradient background with blurred circles.
-
-**Props:**
-
-- None
-
-**Requirements:**
-
-- Parent container must have `position: relative`
-- Parent should have defined height (e.g., `minHeight: '100vh'`)
-
-**Usage:**
-
-```tsx
-<section style={{ position: 'relative', minHeight: '100vh' }}>
-  <AnimatedBackground />
-</section>
-```
-
----
-
-### HeroText
-
-Large gradient text with fade-in animation.
-
-**Props:**
-
-- `text` (required): The text to display
-- `gradient` (optional): Custom gradient CSS
-
-**Usage:**
-
-```tsx
-<HeroText text="Your Brand" />
-```
-
----
-
-### Logo
-
-Animated logo component with breathing effect.
-
-**Props:**
-
-- `src` (required): Logo image source
-- `alt` (required): Alt text for accessibility
-
-**Usage:**
-
-```tsx
-<Logo src="/your-logo.png" alt="Your Logo" />
-```
-
----
-
-### TypewriterText
-
-Typewriter effect text with blinking cursor.
-
-**Props:**
-
-- `text` (required): The text to animate
-
-**Usage:**
-
-```tsx
-<TypewriterText text="COMING SOON" />
-```
-
----
-
-### Subtitle
-
-Subtitle text with fade-in animation.
-
-**Props:**
-
-- `children` (required): JSX content for the subtitle
-
-**Usage:**
-
-```tsx
-<Subtitle>
-  Your subtitle text here
-  <br />
-  Can be multi-line with custom formatting
-</Subtitle>
-```
-
----
-
-## UI Components
-
-### Button
-
-Customizable button with arrow icon.
-
-**Props:**
-
-- `variant`: `"outline"` | `"solid"` (default: `"outline"`)
-- `href`: Optional link URL
-- `onClick`: Optional click handler
-- `showArrow`: Show/hide arrow icon (default: `true`)
-- `children`: Button content
-
-**Usage:**
-
-```tsx
-<Button variant="outline">Try Now</Button>
-<Button variant="solid" href="/docs">Get Started</Button>
-```
-
----
-
-### Card
-
-Flexible card component for features and documentation.
-
-**Props:**
-
-- `title` (required): Card title
-- `description` (required): Card description
-- `icon`: Optional icon component
-- `button`: Optional button component
-- `layout`: `"feature"` | `"documentation"` (default: `"feature"`)
-- `contentAlign`: `"left"` | `"center"` (default: `"left"`)
-- `index`: Animation delay index
-
-**Usage:**
-
-```tsx
-<Card
-  title="Feature Title"
-  description="Feature description"
-  icon={<YourIcon />}
-  layout="feature"
-  button={<Button>Learn More</Button>}
-/>
-```
-
----
-
-### Globe
-
-Interactive 3D globe with custom data points powered by the `cobe` library.
-
-**Props:**
-
-- `size`: Globe diameter in pixels (default: `500`)
-- `points`: Array of custom data points with label, icon, and position
-
-**Usage:**
-
-```tsx
-<Globe size={600} />
-
-<Globe
-  size={500}
-  points={[
-    {
-      label: 'Data Source',
-      icon: <BsGlobe2 />,
-      position: { x: 50, y: 30 }
-    }
-  ]}
-/>
-```
-
----
-
-### GradientBackground
-
-Radial gradient background effect.
-
-**Props:**
-
-- `position`: `"top"` | `"bottom"` (default: `"top"`)
-- `colors`: Custom color object with `start`, `middle1`, `middle2`, `middle3`
-- `blur`: Blur amount (default: `"150px"`)
-- `height`: Height of gradient (default: `"100vh"`)
-
-**Usage:**
-
-```tsx
-<GradientBackground position="top" />
-
-<GradientBackground
-  position="bottom"
-  height="50vh"
-  colors={{
-    start: 'rgba(100, 50, 150, 0.9)',
-    middle1: 'rgba(80, 40, 120, 0.7)',
-    middle2: 'rgba(60, 30, 100, 0.6)',
-    middle3: 'rgba(40, 20, 80, 0.4)',
-  }}
-/>
-```
-
----
-
-### SectionLabel
-
-Animated section label with bracket styling.
-
-**Props:**
-
-- `label` (required): Label text
-- `className`: Additional CSS classes
-- `animate`: Enable/disable animation (default: `true`)
-
-**Usage:**
-
-```tsx
-<SectionLabel label="FEATURES" className="mb-16" />
-<SectionLabel label="ABOUT" animate={false} />
-```
-
----
-
-### InputField
-
-Customizable input field with optional submit button.
-
-**Props:**
-
-- `placeholder`: Input placeholder text
-- `value`: Controlled input value
-- `onChange`: Value change handler
-- `onSubmit`: Submit handler
-- `variant`: `"transparent"` | `"filled"` (default: `"transparent"`)
-- `size`: `"sm"` | `"md"` | `"lg"` (default: `"md"`)
-- `showButton`: Show/hide submit button (default: `true`)
-- `buttonPosition`: `"left"` | `"right"` (default: `"right"`)
-
-**Usage:**
-
-```tsx
-<InputField
-  placeholder="Ask CROW Anything..."
-  onSubmit={(value) => console.log('Submitted:', value)}
-/>
-
-<InputField
-  value={inputValue}
-  onChange={(value) => setInputValue(value)}
-  size="lg"
-  variant="filled"
-/>
-```
-
----
-
-## TypeScript
-
-All components are fully typed with exported TypeScript interfaces. Import types as needed:
-
-```tsx
-import type { ButtonProps, CardProps, GlobeProps } from '@b3-crow/ui-kit';
-```

package/docs/development.md

@@ -1,291 +0,0 @@
-# Development Guide
-
-## Getting Started
-
-### Prerequisites
-
-- [Bun](https://bun.sh) v1.3.3 or higher
-- Node.js v18 or higher (for compatibility)
-- Git
-
-### Installation
-
-Clone the repository and install dependencies:
-
-```bash
-git clone https://github.com/CROW-B3/ui-kit.git
-cd ui-kit
-bun install
-```
-
-## Project Structure
-
-```
-ui-kit/
-├── src/
-│   ├── components/          # All UI components
-│   ├── lib/                 # Utility functions
-│   ├── index.ts             # Main exports
-│   └── styles.css           # Global styles
-├── dist/                    # Compiled output
-├── docs/                    # Documentation
-├── package.json
-├── tsconfig.json
-└── README.md
-```
-
-## Development Workflow
-
-### Building
-
-Build the library for production:
-
-```bash
-bun run build
-```
-
-Watch mode for development:
-
-```bash
-bun run build:watch
-```
-
-### Linting
-
-Run ESLint to check for code issues:
-
-```bash
-bun run lint
-```
-
-Auto-fix linting issues:
-
-```bash
-bun run lint:fix
-```
-
-### Formatting
-
-Format code with Prettier:
-
-```bash
-bun run format
-```
-
-### Pre-commit Hooks
-
-The project uses Husky for Git hooks:
-
-- **Pre-commit**: Runs lint-staged to lint and format changed files
-- **Commit-msg**: Validates commit messages using conventional commits
-
-Hooks are automatically installed after running `bun install`.
-
-## Code Standards
-
-### TypeScript
-
-- All components must be fully typed
-- Export component prop types
-- Use strict TypeScript configuration
-- No `any` types unless absolutely necessary
-
-### Styling
-
-- Use Tailwind CSS utility classes
-- Follow dark theme design system
-- Use consistent spacing and sizing
-- Prefer composition over configuration
-
-### Component Structure
-
-```tsx
-import type { ComponentProps } from 'react';
-
-export interface YourComponentProps {
-  // Props interface
-  required: string;
-  optional?: number;
-}
-
-export function YourComponent({ required, optional }: YourComponentProps) {
-  // Component implementation
-  return <div>{required}</div>;
-}
-```
-
-### Commit Messages
-
-Follow [Conventional Commits](https://www.conventionalcommits.org/):
-
-```
-feat: add new component
-fix: resolve animation bug
-docs: update README
-chore: bump dependencies
-```
-
-Types:
-
-- `feat`: New feature
-- `fix`: Bug fix
-- `docs`: Documentation changes
-- `style`: Code style changes (formatting)
-- `refactor`: Code refactoring
-- `test`: Adding/updating tests
-- `chore`: Maintenance tasks
-
-## Testing
-
-### Manual Testing
-
-Link the package locally in a test project:
-
-```json
-{
-  "dependencies": {
-    "@b3-crow/ui-kit": "file:../ui-kit"
-  }
-}
-```
-
-For Next.js projects, add to `next.config.ts`:
-
-```ts
-const nextConfig = {
-  transpilePackages: ['@b3-crow/ui-kit'],
-};
-```
-
-### Visual Testing
-
-Test components in different scenarios:
-
-- Dark backgrounds
-- Light backgrounds
-- Different viewport sizes
-- Animation triggers
-- Scroll behavior
-
-## Publishing
-
-### Version Bump
-
-Update version in `package.json`:
-
-```json
-{
-  "version": "0.0.25"
-}
-```
-
-### Build and Publish
-
-```bash
-# Build the library
-bun run build
-
-# Publish to npm
-npm publish
-```
-
-### Automated Publishing
-
-The project uses GitHub Actions for automated publishing:
-
-- Pushes to `main` trigger automatic version bumps
-- Releases are created automatically
-- Package is published to npm registry
-
-## Contributing
-
-### Pull Request Process
-
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feat/my-feature`
-3. Make your changes
-4. Commit using conventional commits
-5. Push to your fork
-6. Open a pull request
-
-### Code Review
-
-- All PRs require review before merging
-- Ensure CI passes (linting, building)
-- Update documentation if needed
-- Add examples for new components
-
-## File Checklist
-
-When adding a new component:
-
-- [ ] Create component in `src/components/`
-- [ ] Export from `src/index.ts`
-- [ ] Add TypeScript types
-- [ ] Document in `docs/components.md`
-- [ ] Add examples in `docs/examples.md`
-- [ ] Test locally with a consumer project
-- [ ] Update version in `package.json`
-
-## Troubleshooting
-
-### Build Errors
-
-**TypeScript errors:**
-
-```bash
-# Check TypeScript configuration
-cat tsconfig.json
-
-# Clean and rebuild
-rm -rf dist
-bun run build
-```
-
-**Missing dependencies:**
-
-```bash
-# Clean install
-rm -rf node_modules bun.lock
-bun install
-```
-
-### Import Errors
-
-**Cannot resolve module:**
-
-- Ensure component is exported in `src/index.ts`
-- Check `package.json` exports field
-- Verify build output in `dist/`
-
-**Type errors in consumer:**
-
-- Ensure `.d.ts` files are generated
-- Check `types` field in `package.json`
-- Rebuild the library
-
-### Next.js Integration
-
-**Module not found:**
-
-- Add package to `transpilePackages` in `next.config.ts`
-- Clear Next.js cache: `rm -rf .next`
-- Reinstall dependencies
-
-**Tailwind classes not working:**
-
-- Ensure consumer project has Tailwind configured
-- Check PostCSS configuration
-- Verify Tailwind v4 is installed
-
-## Resources
-
-- [Bun Documentation](https://bun.sh/docs)
-- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
-- [Tailwind CSS v4](https://tailwindcss.com/docs)
-- [Framer Motion](https://www.framer.com/motion/)
-- [Conventional Commits](https://www.conventionalcommits.org/)
-
-## License
-
-MIT License - see [LICENSE](../LICENSE) file for details.