@minutemailer/kit 0.2.0 → 1.0.1

package/stories/Sidebar.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, useSidebar, } from '@/components/ui/sidebar';
+import { BadgeCheck, Bell, ChartPie, ChevronsUpDown, Command, Contact, CreditCard, House, LogOut, SidebarIcon, Sparkles, } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+const meta = {
+    title: 'WIP/Sidebar',
+    component: Sidebar,
+};
+export default meta;
+const data = {
+    user: {
+        name: 'Oskar Glauser',
+        email: 'oskar@minutemailer.com',
+        avatar: 'https://www.gravatar.com/avatar/5e05baf3b97434b88ab1a4f5f00bf241?s=300&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FOskar%2BGlauser%2F300%2Fe3504e%2Ffff',
+    },
+    projects: [
+        {
+            name: 'Dashboard',
+            url: '#',
+            icon: House,
+        },
+        {
+            name: 'Contacts',
+            url: '#',
+            icon: Contact,
+        },
+        {
+            name: 'Results',
+            url: '#',
+            icon: ChartPie,
+        },
+    ],
+};
+function NavMain({ items, }) {
+    return (_jsx(SidebarGroup, { className: "group-data-[collapsible=icon]:sm", children: _jsx(SidebarMenu, { children: items.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, children: _jsxs("a", { href: item.url, children: [_jsx(item.icon, {}), _jsx("span", { children: item.name })] }) }) }, item.name))) }) }));
+}
+function NavUser({ user, }) {
+    const { isMobile } = useSidebar();
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user.avatar, alt: user.name }), _jsx(AvatarFallback, { className: "rounded-lg", children: "CN" })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-medium", children: user.name }), _jsx("span", { className: "truncate text-xs", children: user.email })] }), _jsx(ChevronsUpDown, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", side: isMobile ? 'bottom' : 'right', align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user.avatar, alt: user.name }), _jsx(AvatarFallback, { className: "rounded-lg", children: "CN" })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-medium", children: user.name }), _jsx("span", { className: "truncate text-xs", children: user.email })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuItem, { children: [_jsx(Sparkles, {}), "Upgrade to Pro"] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuItem, { children: [_jsx(BadgeCheck, {}), "Account"] }), _jsxs(DropdownMenuItem, { children: [_jsx(CreditCard, {}), "Billing"] }), _jsxs(DropdownMenuItem, { children: [_jsx(Bell, {}), "Notifications"] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(LogOut, {}), "Log out"] })] })] }) }) }));
+}
+function AppSidebar({ ...props }) {
+    return (_jsxs(Sidebar, { collapsible: "icon", className: "top-(--header-height) h-[calc(100svh-var(--header-height))]!", ...props, children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { size: "lg", asChild: true, children: _jsxs("a", { href: "#", children: [_jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: _jsx(Command, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-medium", children: "Minutemailer" }), _jsx("span", { className: "truncate text-xs", children: "Enterprise" })] })] }) }) }) }) }), _jsx(SidebarContent, { children: _jsx(NavMain, { items: data.projects }) }), _jsx(SidebarFooter, { children: _jsx(NavUser, { user: data.user }) })] }));
+}
+function SiteHeader() {
+    const { toggleSidebar } = useSidebar();
+    return (_jsx("header", { className: "bg-card sticky top-0 z-50 flex w-full items-center border-b", children: _jsxs("div", { className: "flex h-(--header-height) w-full items-center gap-2 px-4", children: [_jsx(Button, { className: "h-8 w-8", variant: "ghost", size: "icon", onClick: toggleSidebar, children: _jsx(SidebarIcon, {}) }), _jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" })] }) }));
+}
+export const Default = {
+    render: (args) => (_jsx("div", { className: "fixed inset-0", children: _jsx("div", { className: "[--header-height:calc(--spacing(14))]", children: _jsxs(SidebarProvider, { className: "flex flex-col", children: [_jsx(SiteHeader, {}), _jsxs("div", { className: "flex flex-1", children: [_jsx(AppSidebar, {}), _jsx(SidebarInset, { children: _jsx("div", { className: "p-8 flex flex-1 flex-col gap-4", children: _jsxs("div", { className: "bg-white flex flex-1 flex-col gap-4 p-4", children: [_jsxs("div", { className: "grid auto-rows-min gap-4 md:grid-cols-3", children: [_jsx("div", { className: "bg-muted/50 aspect-video rounded-xl" }), _jsx("div", { className: "bg-muted/50 aspect-video rounded-xl" }), _jsx("div", { className: "bg-muted/50 aspect-video rounded-xl" })] }), _jsx("div", { className: "bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" })] }) }) })] })] }) }) })),
+};

package/stories/Skeleton.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Skeleton } from '@/components/ui/skeleton';
+declare const meta: {
+    title: string;
+    component: typeof Skeleton;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/stories/Skeleton.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@/components/ui/skeleton';
+const meta = {
+    title: 'WIP/Skeleton',
+    component: Skeleton,
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs("div", { className: "flex items-center space-x-4", children: [_jsx(Skeleton, { className: "h-12 w-12 rounded-full" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-[250px]" }), _jsx(Skeleton, { className: "h-4 w-[200px]" })] })] })),
+};

package/stories/Sonner.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ ...props }: import("sonner").ToasterProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;

package/stories/Sonner.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toaster } from '@/components/ui/sonner';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+const meta = {
+    title: 'WIP/Toast',
+    component: Toaster,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+function Demo() {
+    return (_jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Button, { variant: "outline", onClick: () => toast('This is a toast'), children: "Show toast" }), _jsx(Button, { variant: "outline", onClick: () => toast.success('Everything went well!'), children: "Success" }), _jsx(Button, { variant: "outline", onClick: () => toast.error('Something went wrong'), children: "Error" }), _jsx(Button, { variant: "outline", onClick: () => toast.promise(new Promise((res) => setTimeout(res, 1500)), {
+                        loading: 'Saving…',
+                        success: 'Saved!',
+                        error: 'Could not save',
+                    }), children: "Promise" })] }) }));
+}
+export const Playground = {
+    render: () => _jsx(Demo, {}),
+};

package/stories/Todo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createStore, useSelector } from "@/store";
-import { useState } from "react";
+import { createStore, useSelector } from '@/store';
+import { useState } from 'react';
 const initialState = {
     todos: [],
     completed: 0,
@@ -34,11 +34,14 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const store = createStore('todos', initialState, reducer, () => true, () => {
-}, 'todos');
+const store = createStore('todos', initialState, reducer, () => true, () => { }, 'todos');
 function Todos() {
     const todos = useSelector(store, (state) => state.todos);
-    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: todos.map((todo) => (_jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' }, children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("button", { type: "button", role: "checkbox", "aria-checked": todo.completed, "data-state": todo.completed ? 'checked' : 'unchecked', value: "on", className: "peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-foreground", id: "remember", tabIndex: 3, onClick: () => store.dispatch({
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: todos.map((todo) => (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '1rem',
+            }, children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("button", { type: "button", role: "checkbox", "aria-checked": todo.completed, "data-state": todo.completed ? 'checked' : 'unchecked', value: "on", className: "peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-foreground", id: "remember", tabIndex: 3, onClick: () => store.dispatch({
                             type: !todo.completed
                                 ? 'COMPLETE_TODO'
                                 : 'UNCOMPLETE_TODO',
@@ -49,13 +52,14 @@ function Todos() {
                             pointerEvents: 'none',
                             opacity: 0,
                             margin: 0,
-                            width: '20px', height: '20px'
+                            width: '20px',
+                            height: '20px',
                         } }), _jsx("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", htmlFor: "remember", children: todo.text })] }) }, todo.id))) }));
 }
 function Status() {
     const total = useSelector(store, (state) => state.total);
     const completed = useSelector(store, (state) => state.completed);
-    return _jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: `${completed} / ${total} todos completed` });
+    return (_jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: `${completed} / ${total} todos completed` }));
 }
 function Form() {
     const [value, setValue] = useState('');

package/stories/Tooltip.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Tooltip } from '@/components/ui/tooltip';
+declare const meta: {
+    title: string;
+    component: typeof Tooltip;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/stories/Tooltip.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+const meta = {
+    title: 'WIP/Tooltip',
+    component: Tooltip,
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Tooltip, { ...args, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Hover" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Add to library" }) })] })),
+};

package/stories/TrafficLights.js

@@ -7,18 +7,18 @@ const SimpleTrafficLight = () => {
     const transitions = {
         RED: { on: { NEXT: 'GREEN' } },
         GREEN: { on: { NEXT: 'YELLOW' } },
-        YELLOW: { on: { NEXT: 'RED' } }
+        YELLOW: { on: { NEXT: 'RED' } },
     };
     const actions = {
         NEXT: (context) => ({
-            count: context.count + 1
-        })
+            count: context.count + 1,
+        }),
     };
     // Create the machine with minimal context
     const [machine] = useState(() => createMachine(transitions, actions, { count: 0 }, 'RED'));
     // Get current state and count from the machine
     const currentState = machine.useCurrentState();
-    const count = machine.useCurrentContext(ctx => ctx.count);
+    const count = machine.useCurrentContext((ctx) => ctx.count);
     // Auto-transition every 1.5 seconds
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -30,7 +30,7 @@ const SimpleTrafficLight = () => {
     const colors = {
         RED: 'bg-rose-500',
         YELLOW: 'bg-amber-400',
-        GREEN: 'bg-emerald-500'
+        GREEN: 'bg-emerald-500',
     };
     return (_jsxs("div", { className: "flex flex-col items-start p-4", children: [_jsx("div", { className: "bg-gray-800 p-3 rounded-lg mb-4 flex flex-col items-start gap-2", children: Object.entries(colors).map(([state, color]) => (_jsx("div", { className: `w-16 h-16 m-2 rounded-full ${currentState === state ? color : 'bg-gray-300'}` }, state))) }), _jsxs("div", { children: [_jsxs("p", { children: ["Current: ", _jsx("strong", { children: currentState })] }), _jsxs("p", { children: ["Cycles: ", count] }), _jsx("button", { onClick: () => machine.action('NEXT'), className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded", children: "Next State" })] })] }));
 };

package/utils/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/utils/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}