diff --git a/.gitignore b/.gitignore index a547bf3..bfddbdf 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,7 @@ dist-ssr *.njsproj *.sln *.sw? + +*storybook.log +storybook-static +.storybook-cache diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..a8db726 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,17 @@ +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + "stories": [ + "../src/**/*.mdx", + "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)" + ], + "addons": [ + "@storybook/addon-docs", + "@storybook/addon-onboarding" + ], + "framework": { + "name": "@storybook/react-vite", + "options": {} + } +}; +export default config; \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 0000000..8fc6250 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,36 @@ +import type { Preview } from '@storybook/react-vite'; +import '../src/index.css'; // Import component library styles + +const preview: Preview = { + parameters: { + // AcadXP Theme + backgrounds: { + default: 'acadxp-dark', + values: [ + { + name: 'acadxp-dark', + value: 'linear-gradient(135deg, #1e1b4b 0%, #1e3a5f 50%, #0f172a 100%)', + }, + { + name: 'dark', + value: '#1e1b4b', + }, + { + name: 'light', + value: '#ffffff', + }, + ], + }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + docs: { + toc: true, + }, + }, +}; + +export default preview; \ No newline at end of file diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 0000000..4dd4f1e --- /dev/null +++ b/.vercelignore @@ -0,0 +1,6 @@ +node_modules +dist +.storybook-cache +*.log +.env +.DS_Store diff --git a/README.md b/README.md index 73bf599..c498dca 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,29 @@ -# 🎮 xpui +
+ xpui Logo > The Playful React UI Library with pixel-art aesthetics -[![npm version](https://img.shields.io/npm/v/xpui.svg)](https://www.npmjs.com/package/@acadxp/xpui) +[![npm version](https://img.shields.io/npm/v/@acadxp/xpui.svg)](https://www.npmjs.com/package/@acadxp/xpui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/) +[![Tailwind CSS](https://img.shields.io/badge/Tailwind-Ready-38bdf8.svg)](https://tailwindcss.com/) + +[Documentation](https://github.com/acadxp/xpui) • [NPM Package](https://www.npmjs.com/package/@acadxp/xpui) • [Report Bug](https://github.com/acadxp/xpui/issues) + +
+ +--- + +## 🌟 Why xpui? + +**xpui** is a React UI library designed for developers who want to add a unique, game-inspired aesthetic to their applications. Perfect for: + +- 🎮 **Gaming platforms** and educational apps +- 🎯 **AcadXP ecosystem** projects +- 🎨 **Creative projects** that need a distinct retro look +- 🚀 **Modern apps** with a nostalgic twist + +Built with modern web technologies and best practices, xpui combines the charm of pixel-art design with the power of React, TypeScript, and Tailwind CSS. ## ✨ Features @@ -17,11 +37,11 @@ ## 📦 Installation ```bash -npm install xpui +npm install @acadxp/xpui # or -pnpm add xpui +pnpm add @acadxp/xpui # or -yarn add xpui +yarn add @acadxp/xpui ``` ### Peer Dependencies @@ -35,13 +55,13 @@ npm install react react-dom tailwindcss @tailwindcss/vite ### 1. Import styles in your app ```tsx -import "xpui/styles"; +import "@acadxp/xpui/styles"; ``` ### 2. Use components ```tsx -import { Button } from "xpui"; +import { Button } from "@acadxp/xpui"; function App() { return ( @@ -59,7 +79,7 @@ function App() { A pixel-art styled button component with multiple variants and sizes. ```tsx -import { Button } from 'xpui'; +import { Button } from "@acadxp/xpui"; // Variants @@ -104,7 +124,7 @@ import { Button } from 'xpui'; Merge and conditionally apply CSS classes. ```tsx -import { cn } from "xpui"; +import { cn } from "@acadxp/xpui"; + + + + + + ), +}; + +// All Sizes Showcase +export const AllSizes: Story = { + render: () => ( +
+ + + +
+ ), +}; + +// Gaming UI Examples +export const GamingUIExamples: Story = { + render: () => ( +
+ + + + + +
+ ), +}; diff --git a/tsconfig.app.json b/tsconfig.app.json index 2d8e38f..ad89696 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -38,6 +38,7 @@ "**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", - "**/*.test.tsx" + "**/*.test.tsx", + "**/*.mdx" ] } diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..43d8768 --- /dev/null +++ b/vercel.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://openapi.vercel.sh/vercel.json", + "buildCommand": "pnpm build-storybook", + "outputDirectory": "storybook-static", + "installCommand": "pnpm install", + "framework": null, + "rewrites": [ + { + "source": "/(.*)", + "destination": "/index.html" + } + ] +}