Skip to content

Fix/minor themes and component fixes #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nipsysdev merged 8 commits into from
Feb 24, 2026
Merged

Fix/minor themes and component fixes #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a04e67e
refactor(themes): extract themes to themes.css
nipsysdev Feb 24, 2026
1a7eaf1
feat(cosmos): use select component to select theme
nipsysdev Feb 24, 2026
1363a1e
feat(fixtures): implement overview fixture
nipsysdev Feb 24, 2026
6b03fa0
feat(button): add ghost and icon-xs
nipsysdev Feb 24, 2026
33fed68
fix(sidebar): remove trigger border, use proper button variant and size
nipsysdev Feb 24, 2026
6184de2
test(button): update unit tests
nipsysdev Feb 24, 2026
a64b7b9
test(sidebar): update outdated tests
nipsysdev Feb 24, 2026
f12fea5
fix(tabs): fix border color issue
nipsysdev Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/__cosmos__/fixtures/Button.fixture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@ export default function ButtonFixture() {
code={`<div className="lsd:flex lsd:gap-4">
<Button variant="filled">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>`}
>
<div className="lsd:flex lsd:gap-4">
<Button variant="filled">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>
</CodeExample>
Expand Down Expand Up @@ -127,21 +129,33 @@ export default function ButtonFixture() {
<CodeExample
title="Icon Button Variants"
code={`<div className="lsd:flex lsd:gap-4 lsd:items-center">
<Button variant="filled-icon" size="icon-xs" aria-label="Add">
<Plus size={12} />
</Button>
<Button variant="filled-icon" size="icon-md" aria-label="Add">
<Plus />
</Button>
<Button variant="outlined-icon" size="icon-md" aria-label="Add">
<Plus />
</Button>
<Button variant="ghost-icon" size="icon-md" aria-label="Add">
<Plus />
</Button>
</div>`}
>
<div className="lsd:flex lsd:gap-4 lsd:items-center">
<Button variant="filled-icon" size="icon-xs" aria-label="Add">
<Plus size={12} />
</Button>
<Button variant="filled-icon" size="icon-md" aria-label="Add">
<Plus />
</Button>
<Button variant="outlined-icon" size="icon-md" aria-label="Add">
<Plus />
</Button>
<Button variant="ghost-icon" size="icon-md" aria-label="Add">
<Plus />
</Button>
</div>
</CodeExample>
</div>
Expand All @@ -151,6 +165,9 @@ export default function ButtonFixture() {
<CodeExample
title="Icon Button Sizes"
code={`<div className="lsd:flex lsd:gap-4 lsd:items-center">
<Button variant="filled-icon" size="icon-xs" aria-label="Add">
<Plus size={12} />
</Button>
<Button variant="filled-icon" size="icon-sm" aria-label="Add">
<Plus size={14} />
</Button>
Expand All @@ -166,6 +183,9 @@ export default function ButtonFixture() {
</div>`}
>
<div className="lsd:flex lsd:gap-4 lsd:items-center">
<Button variant="filled-icon" size="icon-xs" aria-label="Add">
<Plus size={12} />
</Button>
<Button variant="filled-icon" size="icon-sm" aria-label="Add">
<Plus size={14} />
</Button>
Expand Down Expand Up @@ -223,6 +243,9 @@ export default function ButtonFixture() {
<Button variant="outlined" loading>
Loading...
</Button>
<Button variant="ghost" loading>
Loading...
</Button>
<Button variant="link" loading>
Loading...
</Button>
Expand All @@ -236,6 +259,9 @@ export default function ButtonFixture() {
<Button variant="outlined" loading>
Loading...
</Button>
<Button variant="ghost" loading>
Loading...
</Button>
<Button variant="link" loading>
Loading...
</Button>
Expand All @@ -255,13 +281,19 @@ export default function ButtonFixture() {
<Button variant="outlined" fullWidth>
Full Width Outlined
</Button>
<Button variant="ghost" fullWidth>
Full Width Ghost
</Button>
</div>`}
>
<div className="lsd:w-full lsd:space-y-2">
<Button fullWidth>Full Width Button</Button>
<Button variant="outlined" fullWidth>
Full Width Outlined
</Button>
<Button variant="ghost" fullWidth>
Full Width Ghost
</Button>
</div>
</CodeExample>
</div>
Expand Down
289 changes: 289 additions & 0 deletions src/__cosmos__/fixtures/Overview.fixture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,289 @@
import {
Calendar,
ChevronRight,
Home,
Inbox,
LayoutDashboard,
Palette,
Settings,
Sparkles,
Type,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Progress } from '@/components/ui/progress';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
} from '@/components/ui/sidebar';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Toggle } from '@/components/ui/toggle';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { Typography } from '@/components/ui/typography';
import { ThemeAccentToggle, ThemeToggle } from '../theme-toggle';

const menuItems = [
{ title: 'Dashboard', url: '#dashboard', icon: LayoutDashboard },
{ title: 'Components', url: '#components', icon: Sparkles },
{ title: 'Typography', url: '#typography', icon: Type },
{ title: 'Colors', url: '#colors', icon: Palette },
{ title: 'Calendar', url: '#calendar', icon: Calendar },
{ title: 'Inbox', url: '#inbox', icon: Inbox },
];

export default function OverviewFixture() {
return (
<div className="lsd:size-full lsd:overflow-hidden lsd:m-0!">
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<div className="lsd:flex lsd:aspect-square lsd:size-8 lsd:items-center lsd:justify-center lsd:rounded-lg lsd:bg-sidebar-primary lsd:text-sidebar-primary-foreground">
<Home className="lsd:size-4" />
</div>
<div className="lsd:flex lsd:flex-col lsd:gap-0.5 lsd:leading-none">
<span className="lsd:font-semibold">LSD React</span>
<span className="lsd:text-xs">Component Library</span>
</div>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{menuItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
<ChevronRight className="lsd:ml-auto lsd:size-4" />
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Settings</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<Settings />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="lsd:flex lsd:h-14 lsd:shrink-0 lsd:items-center lsd:gap-2 lsd:border-b lsd:p-4">
<SidebarTrigger />

<div className="lsd:flex lsd:justify-between lsd:flex-auto lsd:items-center">
<Typography variant="h1" className="lsd:text-lg">
Component Overview
</Typography>

<div className="lsd:flex lsd:gap-2 lsd:items-center">
<ThemeToggle />
<ThemeAccentToggle />
</div>
</div>
</header>

<div className="lsd:p-4">
<div className="lsd:grid lsd:grid-cols-2 lsd:lg:grid-cols-4 lsd:gap-4">
<div className="lsd:space-y-2">
<Label>Buttons</Label>
<div className="lsd:flex lsd:flex-col lsd:gap-2">
<Button variant="filled">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="success">Success</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>
</div>
</div>

<div className="lsd:space-y-2">
<Label>Badges</Label>
<div className="lsd:flex lsd:flex-wrap lsd:gap-2">
<Badge>Default</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="outlined">Outlined</Badge>
<Badge variant="dot">Dot</Badge>
</div>
</div>

<div className="lsd:space-y-2">
<Label>Typography Colors</Label>
<div className="lsd:space-y-1 lsd:flex lsd:flex-col">
<Typography variant="body1" color="primary">
Primary text
</Typography>
<Typography variant="body1" color="secondary">
Secondary text
</Typography>
<Typography variant="body1" color="destructive">
Destructive text
</Typography>
<Typography variant="body1" color="success">
Success text
</Typography>
<Typography variant="body1" color="warning">
Warning text
</Typography>
<Typography variant="body1" color="info">
Info text
</Typography>
</div>
</div>

<div className="lsd:space-y-2">
<Label>Form Elements</Label>
<div className="lsd:space-y-2">
<Input placeholder="Normal input" />
<Input disabled placeholder="Disabled input" />
<Select>
<SelectTrigger>
<SelectValue placeholder="Select..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Option 1</SelectItem>
<SelectItem value="2">Option 2</SelectItem>
</SelectContent>
</Select>
<div className="lsd:flex lsd:items-center lsd:space-x-2">
<Checkbox id="check" defaultChecked />
<Label htmlFor="check" className="lsd:cursor-pointer">
Checked
</Label>
</div>
<div className="lsd:flex lsd:items-center lsd:space-x-2">
<Checkbox id="check2" />
<Label htmlFor="check2" className="lsd:cursor-pointer">
Unchecked
</Label>
</div>
<div className="lsd:flex lsd:items-center lsd:justify-between">
<Label htmlFor="switch">Switch</Label>
<Switch id="switch" defaultChecked />
</div>
</div>
</div>

<div className="lsd:space-y-2">
<Label>Progress</Label>
<div className="lsd:space-y-2">
<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />
</div>
</div>

<div className="lsd:space-y-2">
<Label>Tabs</Label>
<Tabs defaultValue="tab1">
<TabsList>
<TabsTrigger value="tab1">Active</TabsTrigger>
<TabsTrigger value="tab2">Inactive</TabsTrigger>
<TabsTrigger value="tab3">Inactive</TabsTrigger>
</TabsList>
<TabsContent value="tab1" className="lsd:mt-2">
<Typography variant="body2">Active content</Typography>
</TabsContent>
<TabsContent value="tab2" className="lsd:mt-2">
<Typography variant="body2">Content 2</Typography>
</TabsContent>
<TabsContent value="tab3" className="lsd:mt-2">
<Typography variant="body2">Content 3</Typography>
</TabsContent>
</Tabs>
</div>

<div className="lsd:space-y-2">
<Label>Toggles</Label>
<div className="lsd:space-y-2">
<Toggle pressed>Pressed</Toggle>
<Toggle>Unpressed</Toggle>
<ToggleGroup type="single" defaultValue="a">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>
</div>
</div>

<div className="lsd:space-y-2">
<Label>Card</Label>
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Description text</CardDescription>
<CardAction>
<Button variant="outlined" size="sm">
Action
</Button>
</CardAction>
</CardHeader>
<CardContent>
<Typography variant="body2">Card content</Typography>
</CardContent>
<CardFooter>
<Button size="sm">Footer</Button>
</CardFooter>
</Card>
</div>
</div>
</div>
</SidebarInset>
</SidebarProvider>
</div>
);
}
Loading