@sentio/ui-core 0.1.0

package/README.md

@@ -0,0 +1,166 @@
+# @sentio/ui-core
+
+A basic UI component library with zero Web3 dependencies.
+
+## Features
+
+- 🎨 Full Tailwind CSS theme system
+- 🧩 Core UI components (Button, Dialog, Tooltip, Loading, etc.)
+- 📦 No Web3 dependency
+- 🎯 Lightweight
+
+## Installation
+
+```bash
+pnpm add @sentio/ui-core
+```
+
+## Usage
+
+```tsx
+import { Button, BaseDialog, BarLoading, CopyButton } from '@sentio/ui-core'
+import '@sentio/ui-core/dist/style.css'
+
+function App() {
+  return (
+    <>
+      <Button>Click me</Button>
+      <BarLoading />
+      <CopyButton text="Copy this" />
+    </>
+  )
+}
+```
+
+## Included components
+
+### Common Components
+- `BarLoading` - Bar loading indicator
+- `SpinLoading` - Spinner loading indicator
+- `CopyButton`, `CopyIcon`, `CopySuccessIcon` - Copy button with icons
+- `Button` - Button component with variants
+- `BaseDialog` - Dialog component
+- `PopoverTooltip` - Tooltip component
+- `DisclosurePanel` - Collapsible disclosure panel
+- `Collapse` - Collapse/expand animation wrapper
+- `Input` - Text input component
+- `RadioSelect` - Radio button group
+- `Switch` - Toggle switch component
+- `Select` - Dropdown select component
+- `Empty` - Empty state component
+- `StatusBadge` - Badge component with status colors
+- `HeaderToolsToggleButton`, `HeaderToolsContent` - Header tools dropdown
+
+### Table Components
+- `ResizeTable` - Resizable table component
+- `MoveLeftIcon`, `MoveRightIcon`, `RenameIcon`, `DeleteIcon` - Table action icons
+
+### Menu Components
+- `PopupMenuButton` - Popup menu trigger button
+- `MenuItem` - Menu item component
+- `SubMenuButton` - Submenu button component
+- `MenuContext` - Menu context provider
+- `COLOR_MAP` - Color mapping for menu items
+
+### Tree Components
+- `FlatTree` - Flat tree component
+- `ROOT_KEY`, `SUFFIX_NODE_KEY` - Tree node key constants
+- `PlusSquareO`, `MinusSquareO`, `CloseSquareO`, `EyeO` - Tree icons
+
+### Text Components
+- `LinkifyText` - Text component that converts URLs to clickable links
+
+### Utilities / Hooks
+- `useMobile()` - Detect mobile device
+- `useBoolean()` - Boolean state hook
+- `classNames()` - Conditional class name utility
+- `getNumberWithDecimal()` - Number formatting utilities
+- Extension context utilities
+- `NavSizeContext` - Navigation size context
+
+## Theming
+
+Components are themed using CSS variables. You can customize the theme by overriding these variables:
+
+```css
+:root {
+  --primary-600: 7, 86, 213;
+  --gray-600: 75, 85, 99;
+  /* ... */
+}
+```
+
+## Development
+
+### Component Development with Ladle
+
+This package uses [Ladle](https://ladle.dev/) for component development and testing. Ladle provides a fast, lightweight alternative to Storybook for developing React components in isolation.
+
+#### Prerequisites
+
+Make sure you have dependencies installed:
+
+```bash
+pnpm install
+```
+
+#### Starting the Development Server
+
+To start the Ladle development server:
+
+```bash
+pnpm ladle serve
+```
+
+This will:
+- Start a local development server (typically at `http://localhost:61000`)
+- Watch for changes in your component stories
+- Provide hot module replacement for fast development
+- Display all your component stories in an interactive UI
+
+#### Writing Stories
+
+Stories are located alongside components with the `.stories.tsx` extension. For example:
+
+```tsx
+// src/common/Button.stories.tsx
+import type { Story } from '@ladle/react'
+import { Button } from './Button'
+
+export const Default: Story = () => <Button>Click me</Button>
+
+export const Primary: Story = () => <Button variant="primary">Primary</Button>
+
+export const Disabled: Story = () => <Button disabled>Disabled</Button>
+```
+
+#### Available Story Examples
+
+Check out existing stories in the `src/` directory:
+- `src/common/NewButton.stories.tsx` - Button component examples
+- `src/common/dialog/BaseDialog.stories.tsx` - Dialog examples
+- `src/common/table/ResizeTable.stories.tsx` - Table examples
+- `src/common/tree/FlatTree.stories.tsx` - Tree component examples
+- And many more...
+
+#### Building for Production
+
+To build the package:
+
+```bash
+pnpm build
+```
+
+This will:
+1. Build CSS with Tailwind (`pnpm build:css`)
+2. Build JavaScript/TypeScript with tsup (`pnpm build:js`)
+
+#### Watch Mode for Development
+
+If you're developing this package alongside another package:
+
+```bash
+pnpm dev
+```
+
+This runs both CSS and JS builds in watch mode concurrently.