@offlinemediainc/offline-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +152 -0
- package/dist/index.cjs +1901 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +355 -0
- package/dist/index.d.ts +355 -0
- package/dist/index.js +1761 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +313 -0
- package/package.json +99 -0
package/README.md
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
# @offlinemediainc/offline-ui
|
|
2
|
+
|
|
3
|
+
Offline Media design system components built with React, Radix UI, and Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @offlinemediainc/offline-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
### 1. Import the styles
|
|
14
|
+
|
|
15
|
+
Add the theme CSS to your app's entry point:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// app/layout.tsx or _app.tsx
|
|
19
|
+
import '@offlinemediainc/offline-ui/styles.css';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2. Configure Tailwind (if using Tailwind CSS v4)
|
|
23
|
+
|
|
24
|
+
Add the package to your CSS source scanning:
|
|
25
|
+
|
|
26
|
+
```css
|
|
27
|
+
@import "tailwindcss";
|
|
28
|
+
@source "../node_modules/@offlinemediainc/offline-ui/dist/**/*.js";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 3. Use components
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { Button, Card, Dialog, Badge } from '@offlinemediainc/offline-ui';
|
|
35
|
+
|
|
36
|
+
export function MyComponent() {
|
|
37
|
+
return (
|
|
38
|
+
<Card>
|
|
39
|
+
<Badge variant="success">Active</Badge>
|
|
40
|
+
<Button>Click me</Button>
|
|
41
|
+
</Card>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Components
|
|
47
|
+
|
|
48
|
+
### Core Components
|
|
49
|
+
- `Avatar`, `AvatarImage`, `AvatarFallback`
|
|
50
|
+
- `Badge` - with variants: default, secondary, destructive, success, warning, outline, link
|
|
51
|
+
- `Button` - with variants: default, destructive, outline, secondary, ghost, link
|
|
52
|
+
- `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`
|
|
53
|
+
- `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
|
|
54
|
+
- `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`
|
|
55
|
+
- `DropdownMenu` and sub-components
|
|
56
|
+
- `Input`
|
|
57
|
+
- `Item`, `ItemGroup`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`
|
|
58
|
+
- `Label`
|
|
59
|
+
- `Separator`
|
|
60
|
+
- `Sheet` and sub-components
|
|
61
|
+
- `Sidebar` and sub-components (SidebarProvider, SidebarMenu, SidebarMenuItem, etc.)
|
|
62
|
+
- `Skeleton`
|
|
63
|
+
- `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
|
|
64
|
+
- `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`
|
|
65
|
+
|
|
66
|
+
### Next.js Components
|
|
67
|
+
|
|
68
|
+
The following components require Next.js (uses `next/image`, `next/link`, `next/navigation`):
|
|
69
|
+
|
|
70
|
+
- `OfflineSidebar` - Full application sidebar layout with Offline branding
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import { OfflineSidebar } from '@offlinemediainc/offline-ui';
|
|
74
|
+
import { LayoutDashboard, Settings } from 'lucide-react';
|
|
75
|
+
|
|
76
|
+
export default function Layout({ children }) {
|
|
77
|
+
return (
|
|
78
|
+
<OfflineSidebar
|
|
79
|
+
workspace={{ name: "My App", subtitle: "Offline" }}
|
|
80
|
+
user={{ name: "John Doe", email: "john@example.com" }}
|
|
81
|
+
navGroups={[
|
|
82
|
+
{
|
|
83
|
+
label: "Main",
|
|
84
|
+
items: [
|
|
85
|
+
{ title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
|
|
86
|
+
{ title: "Settings", url: "/settings", icon: Settings },
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
]}
|
|
90
|
+
onLogout={() => signOut()}
|
|
91
|
+
>
|
|
92
|
+
{children}
|
|
93
|
+
</OfflineSidebar>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Utilities
|
|
99
|
+
|
|
100
|
+
- `cn()` - Class name utility (clsx + tailwind-merge)
|
|
101
|
+
- `useIsMobile()` - Hook for mobile breakpoint detection
|
|
102
|
+
|
|
103
|
+
## Storybook
|
|
104
|
+
|
|
105
|
+
View the component documentation: [Storybook](https://your-chromatic-url.chromatic.com)
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Development
|
|
110
|
+
|
|
111
|
+
### Quick Start
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
# Install dependencies
|
|
115
|
+
pnpm install
|
|
116
|
+
|
|
117
|
+
# Start Storybook
|
|
118
|
+
pnpm storybook
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Storybook will be available at http://localhost:6006
|
|
122
|
+
|
|
123
|
+
### Build the library
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
pnpm build:lib
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Project Structure
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
offline-style-guide/
|
|
133
|
+
├── src/ # Library source (published to npm)
|
|
134
|
+
│ ├── components/ # UI components
|
|
135
|
+
│ ├── hooks/ # React hooks
|
|
136
|
+
│ ├── lib/ # Utilities
|
|
137
|
+
│ └── styles/ # Theme CSS
|
|
138
|
+
├── components/ui/ # Original components + stories
|
|
139
|
+
├── stories/theme/ # Theme documentation stories
|
|
140
|
+
├── .storybook/ # Storybook configuration
|
|
141
|
+
├── dist/ # Built library output
|
|
142
|
+
└── app/ # Next.js demo app
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Tech Stack
|
|
146
|
+
|
|
147
|
+
- **Framework**: Next.js 16 + React 19
|
|
148
|
+
- **Styling**: Tailwind CSS v4 with CSS variables
|
|
149
|
+
- **Component Primitives**: Radix UI
|
|
150
|
+
- **Icons**: Lucide React
|
|
151
|
+
- **Documentation**: Storybook 10
|
|
152
|
+
- **Build**: tsup
|