@rayvelez/findash-ui 1.0.0

package/README.md

@@ -0,0 +1,286 @@
+# @findash/ui
+
+A modern financial dashboard design system built with React and Tailwind CSS. Features a vibrant green and purple color palette with dark mode support, liquid glass effects, and beautifully crafted dashboard components.
+
+## Installation
+
+```bash
+npm install @findash/ui
+# or
+yarn add @findash/ui
+# or
+pnpm add @findash/ui
+```
+
+## Setup
+
+### 1. Import the CSS
+
+Add the theme CSS to your application's entry point:
+
+```tsx
+// In your main.tsx or App.tsx
+import "@findash/ui/styles";
+```
+
+### 2. Configure Tailwind
+
+Add the preset to your `tailwind.config.ts`:
+
+```ts
+import type { Config } from "tailwindcss";
+import findashPreset from "@findash/ui/tailwind.preset";
+
+export default {
+  presets: [findashPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@findash/ui/dist/**/*.{js,mjs}",
+  ],
+  // ... rest of your config
+} satisfies Config;
+```
+
+### 3. Add Google Fonts (Required)
+
+Add to your `index.html`:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round|Material+Icons+Outlined"
+  rel="stylesheet"
+/>
+```
+
+## Usage
+
+### Complete Dashboard Template
+
+```tsx
+import {
+  DashboardTemplate,
+  type DashboardData,
+} from "@findash/ui";
+
+const dashboardData: DashboardData = {
+  user: {
+    name: "Alex Morgan",
+    role: "Premium User",
+    avatarUrl: "https://example.com/avatar.jpg",
+  },
+  balance: {
+    currentBalance: 15368,
+    percentageChange: 14,
+    averageScore: 18324,
+  },
+  investmentGrowth: {
+    percentage: 8.2,
+    monthlyAverage: 12450,
+    totalValue: 24890,
+  },
+  btcPrice: {
+    price: 21105,
+    changePercentage: 28.21,
+  },
+  marketCap: {
+    value: "1,3trln$",
+  },
+  salesStatistics: {
+    visitors: 2025,
+    updatedDaysAgo: 1,
+  },
+  portfolio: [
+    { asset: "Bitcoin", symbol: "BTC", percentage: 45, color: "bg-primary" },
+    { asset: "Ethereum", symbol: "ETH", percentage: 30, color: "bg-secondary" },
+    { asset: "Solana", symbol: "SOL", percentage: 15, color: "bg-foreground" },
+    { asset: "Others", symbol: "---", percentage: 10, color: "bg-muted" },
+  ],
+  watchlist: [
+    { name: "Cardano", symbol: "ADA", price: "0.58", change: "+5.2%", positive: true },
+    { name: "Polkadot", symbol: "DOT", price: "7.23", change: "-2.1%", positive: false },
+  ],
+  forecasts: [
+    { year: "2023", description: "Explosive growth of DeFi", completed: false },
+    { year: "2024", description: "Mainstream adoption of CBDCs", completed: false },
+  ],
+  transactions: {
+    summary: "12,53 ETH/1 BTC",
+  },
+};
+
+function App() {
+  return (
+    <DashboardTemplate
+      data={dashboardData}
+      onThemeToggle={() => console.log("Toggle theme")}
+      onNavItemClick={(item) => console.log("Clicked:", item)}
+      onActionClick={(action) => console.log("Action:", action)}
+    />
+  );
+}
+```
+
+### Individual Components
+
+```tsx
+import {
+  SalesStatisticsCard,
+  CurrentBalanceCard,
+  BtcPriceCard,
+  PortfolioAllocationCard,
+  WatchlistCard,
+  FloatingNavBar,
+  Sidebar,
+  MobileNav,
+} from "@findash/ui";
+
+// Sales Statistics Card
+<SalesStatisticsCard
+  visitors={2025}
+  updatedDaysAgo={1}
+  onPeriodChange={(period) => console.log(period)}
+/>
+
+// Current Balance Card
+<CurrentBalanceCard
+  balance={15368}
+  percentageChange={14}
+  averageScore={18324}
+  onPrevious={() => {}}
+  onNext={() => {}}
+/>
+
+// BTC Price Card
+<BtcPriceCard
+  price={21105}
+  changePercentage={28.21}
+/>
+
+// Portfolio Allocation Card
+<PortfolioAllocationCard
+  allocations={[
+    { asset: "Bitcoin", symbol: "BTC", percentage: 45, color: "bg-primary" },
+    { asset: "Ethereum", symbol: "ETH", percentage: 30, color: "bg-secondary" },
+  ]}
+  onOptionsClick={() => {}}
+/>
+
+// Watchlist Card
+<WatchlistCard
+  items={[
+    { name: "Cardano", symbol: "ADA", price: "0.58", change: "+5.2%", positive: true },
+  ]}
+  onViewAll={() => {}}
+/>
+
+// Floating Nav Bar
+<FloatingNavBar
+  actions={[
+    { icon: "add_circle", label: "Buy" },
+    { icon: "remove_circle", label: "Sell" },
+  ]}
+  onActionClick={(action) => console.log(action)}
+/>
+
+// Sidebar (Desktop)
+<Sidebar
+  navItems={[
+    { icon: "dashboard", label: "Dashboard", active: true },
+    { icon: "analytics", label: "Analytics", active: false },
+  ]}
+  user={{ name: "Alex", role: "Premium", avatarUrl: "..." }}
+  onToggleTheme={() => {}}
+  isCollapsed={false}
+  onToggleCollapse={() => {}}
+/>
+
+// Mobile Nav
+<MobileNav
+  navItems={[...]}
+  user={{ name: "Alex", role: "Premium", avatarUrl: "..." }}
+  onToggleTheme={() => {}}
+/>
+```
+
+## Components Reference
+
+### Dashboard Cards
+
+| Component | Description | Props |
+|-----------|-------------|-------|
+| `SalesStatisticsCard` | Displays visitor stats with decorative bar chart | `visitors`, `updatedDaysAgo`, `onPeriodChange` |
+| `CurrentBalanceCard` | Shows balance with gauge visualization | `balance`, `percentageChange`, `averageScore` |
+| `InvestmentGrowthCard` | Investment metrics with gauge | `percentage`, `monthlyAverage`, `totalValue` |
+| `BtcPriceCard` | Bitcoin price display with progress bar | `price`, `changePercentage` |
+| `MarketCapCard` | Market cap with line chart | `value` |
+| `MarketForecastCard` | Timeline of market predictions | `forecasts` |
+| `PortfolioAllocationCard` | Portfolio breakdown with progress bar | `allocations` |
+| `WatchlistCard` | Cryptocurrency watchlist | `items`, `onViewAll` |
+| `RecentTransactionsCard` | Transaction summary | `summary`, `users` |
+| `QuickActionsCard` | Quick action buttons | `actions`, `scheduledTransfer` |
+
+### Navigation
+
+| Component | Description | Props |
+|-----------|-------------|-------|
+| `Sidebar` | Desktop sidebar navigation | `navItems`, `user`, `isCollapsed`, `onToggleTheme`, `onToggleCollapse` |
+| `MobileNav` | Mobile/tablet top navigation with slide-out menu | `navItems`, `user`, `onToggleTheme` |
+| `FloatingNavBar` | Floating action bar with liquid glass effect | `actions`, `onActionClick` |
+
+### Template
+
+| Component | Description | Props |
+|-----------|-------------|-------|
+| `DashboardTemplate` | Complete dashboard layout | `data`, `isLoading`, `onThemeToggle`, `onNavItemClick`, `onActionClick` |
+
+## Theme Customization
+
+The design system uses CSS custom properties. Override them in your CSS:
+
+```css
+:root {
+  /* Primary - Vibrant Green */
+  --primary: 120 100% 81%;
+  --primary-foreground: 220 13% 13%;
+
+  /* Secondary - Light Purple */
+  --secondary: 243 100% 85%;
+  --secondary-foreground: 220 13% 13%;
+
+  /* ... see theme.css for all variables */
+}
+```
+
+## Dark Mode
+
+Toggle dark mode by adding the `dark` class to your root element:
+
+```tsx
+document.documentElement.classList.toggle("dark");
+```
+
+## TypeScript Support
+
+All components are fully typed. Import types as needed:
+
+```tsx
+import type {
+  DashboardData,
+  NavItem,
+  WatchlistItem,
+  PortfolioAllocation,
+  ForecastItem,
+  ActionItem,
+  UserInfo,
+} from "@findash/ui";
+```
+
+## License
+
+MIT