Skip to content

Commit e7a3a00

Browse files
pasqualevitiellopasqualevitiello
authored
refactor: UI/UX general improvements (#617)
* feat: 1:1 font replacement * feat: add examples app * style: update font sizes and improve component styles for consistency * update font * style: restore default font weights * refactor: move local fonts to packages * feat: update font weights and refactor font imports in examples app * fix CommandDialog not closing on ESC * refactor: command component improvements * chore: remove console log from command demo * refactor: update Command and Menu components to use <kbd> for shortcuts and improve styling * style: fix formatting in globals.css by removing unnecessary whitespace * fix: refactor group and toggle-group to prevent flickering menu trigger at the end of a group * refactor: toggle group and group improvements * refactor: update toggle component styles for consistency and clarity * refactor: major styling improvements * fix: dialogs * refactor: prefer not-dark: * fix: scrollarea overscroll * refactor: integrate ScrollArea component throughout * style: various improvements * style: mc * style: update button sizes and improve mobile footer layout * style: adjust code component font size and refactor particle card container className * style: improve mobile footer * refactor: improve carious components * style: mc * chore: implement Cal.ai badge * feat: implement new event type dialog * refactor: clean up event types and improve page layout * feat: implement ai-mode in the cmdk component * chore: format * fix: remove outline from CommandDialogPopup * fix: update separator className to use bg-input instead of bg-border * fix: cubic issues * style: update font size in code components for consistency * style: improve shadows * fix: update badge and toggle components to use bg-background * chore: update color references * chore: fix registry * chore: sync package component + build registry * fix(accordion): issue 596 * fix: issue 609 * docs: updates * chore: improve sync script * feat: add AI-powered command particle * feat: improve switch and add menu checkbox switch variant * style: toggle improvements * fix: docs container * style: remove css vars from examples * chore: format * feat: add more example pages
1 parent d2e91c5 commit e7a3a00

File tree

229 files changed

+5568
-954
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

229 files changed

+5568
-954
lines changed

‎apps/examples/.gitignore‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts
42+
43+
# fumadocs
44+
.source

‎apps/examples/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun run dev
15+
```
16+
17+
Open [http://localhost:4002](http://localhost:4002) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

‎apps/examples/app/booking/canceled/page.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client";
2+
3+
import {
4+
Empty,
5+
EmptyDescription,
6+
EmptyHeader,
7+
EmptyMedia,
8+
EmptyTitle,
9+
} from "@coss/ui/components/empty";
10+
import { TooltipProvider } from "@coss/ui/components/tooltip";
11+
import { CalendarIcon } from "lucide-react";
12+
13+
import {
14+
AppHeader,
15+
AppHeaderContent,
16+
AppHeaderDescription,
17+
} from "@/components/app-header";
18+
19+
export default function Page() {
20+
return (
21+
<TooltipProvider delay={150} timeout={0}>
22+
<AppHeader>
23+
<AppHeaderContent title="Canceled Bookings">
24+
<AppHeaderDescription>
25+
View bookings that have been canceled.
26+
</AppHeaderDescription>
27+
</AppHeaderContent>
28+
</AppHeader>
29+
30+
<Empty className="rounded-xl border border-dashed md:py-24">
31+
<EmptyHeader>
32+
<EmptyMedia variant="icon">
33+
<CalendarIcon />
34+
</EmptyMedia>
35+
<EmptyTitle>No canceled bookings</EmptyTitle>
36+
<EmptyDescription>
37+
You have no canceled bookings found. Canceled bookings will appear
38+
here.
39+
</EmptyDescription>
40+
</EmptyHeader>
41+
</Empty>
42+
</TooltipProvider>
43+
);
44+
}

‎apps/examples/app/booking/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { redirect } from "next/navigation";
2+
3+
export default function Page() {
4+
redirect("/booking/upcoming");
5+
}

‎apps/examples/app/booking/recurring/page.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client";
2+
3+
import {
4+
Empty,
5+
EmptyDescription,
6+
EmptyHeader,
7+
EmptyMedia,
8+
EmptyTitle,
9+
} from "@coss/ui/components/empty";
10+
import { TooltipProvider } from "@coss/ui/components/tooltip";
11+
import { CalendarIcon } from "lucide-react";
12+
13+
import {
14+
AppHeader,
15+
AppHeaderContent,
16+
AppHeaderDescription,
17+
} from "@/components/app-header";
18+
19+
export default function Page() {
20+
return (
21+
<TooltipProvider delay={150} timeout={0}>
22+
<AppHeader>
23+
<AppHeaderContent title="Recurring Bookings">
24+
<AppHeaderDescription>
25+
View your recurring bookings and series.
26+
</AppHeaderDescription>
27+
</AppHeaderContent>
28+
</AppHeader>
29+
30+
<Empty className="rounded-xl border border-dashed md:py-24">
31+
<EmptyHeader>
32+
<EmptyMedia variant="icon">
33+
<CalendarIcon />
34+
</EmptyMedia>
35+
<EmptyTitle>No recurring bookings</EmptyTitle>
36+
<EmptyDescription>
37+
You have no recurring bookings found. Recurring booking series will
38+
appear here.
39+
</EmptyDescription>
40+
</EmptyHeader>
41+
</Empty>
42+
</TooltipProvider>
43+
);
44+
}

‎apps/examples/app/booking/unconfirmed/page.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client";
2+
3+
import {
4+
Empty,
5+
EmptyDescription,
6+
EmptyHeader,
7+
EmptyMedia,
8+
EmptyTitle,
9+
} from "@coss/ui/components/empty";
10+
import { TooltipProvider } from "@coss/ui/components/tooltip";
11+
import { CalendarIcon } from "lucide-react";
12+
13+
import {
14+
AppHeader,
15+
AppHeaderContent,
16+
AppHeaderDescription,
17+
} from "@/components/app-header";
18+
19+
export default function Page() {
20+
return (
21+
<TooltipProvider delay={150} timeout={0}>
22+
<AppHeader>
23+
<AppHeaderContent title="Unconfirmed Bookings">
24+
<AppHeaderDescription>
25+
View bookings that are awaiting confirmation.
26+
</AppHeaderDescription>
27+
</AppHeaderContent>
28+
</AppHeader>
29+
30+
<Empty className="rounded-xl border border-dashed md:py-24">
31+
<EmptyHeader>
32+
<EmptyMedia variant="icon">
33+
<CalendarIcon />
34+
</EmptyMedia>
35+
<EmptyTitle>No unconfirmed bookings</EmptyTitle>
36+
<EmptyDescription>
37+
You have no unconfirmed bookings found. Bookings awaiting your
38+
confirmation will appear here.
39+
</EmptyDescription>
40+
</EmptyHeader>
41+
</Empty>
42+
</TooltipProvider>
43+
);
44+
}

‎apps/examples/app/booking/upcoming/page.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client";
2+
3+
import {
4+
Empty,
5+
EmptyDescription,
6+
EmptyHeader,
7+
EmptyMedia,
8+
EmptyTitle,
9+
} from "@coss/ui/components/empty";
10+
import { TooltipProvider } from "@coss/ui/components/tooltip";
11+
import { CalendarIcon } from "lucide-react";
12+
13+
import {
14+
AppHeader,
15+
AppHeaderContent,
16+
AppHeaderDescription,
17+
} from "@/components/app-header";
18+
19+
export default function Page() {
20+
return (
21+
<TooltipProvider delay={150} timeout={0}>
22+
<AppHeader>
23+
<AppHeaderContent title="Upcoming Bookings">
24+
<AppHeaderDescription>
25+
View your upcoming booked events.
26+
</AppHeaderDescription>
27+
</AppHeaderContent>
28+
</AppHeader>
29+
30+
<Empty className="rounded-xl border border-dashed md:py-24">
31+
<EmptyHeader>
32+
<EmptyMedia variant="icon">
33+
<CalendarIcon />
34+
</EmptyMedia>
35+
<EmptyTitle>No upcoming bookings</EmptyTitle>
36+
<EmptyDescription>
37+
You have no upcoming bookings found. As soon as someone books a time
38+
with you, it will show up here.
39+
</EmptyDescription>
40+
</EmptyHeader>
41+
</Empty>
42+
</TooltipProvider>
43+
);
44+
}

‎apps/examples/app/event-types/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { EventTypes } from "@/components/event-types";
2+
3+
export default function Page() {
4+
return <EventTypes />;
5+
}

‎apps/examples/app/favicon.ico‎

5.97 KB
Binary file not shown.

‎apps/examples/app/globals.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import "@coss/ui/globals.css";
2+
3+
:root {
4+
--sidebar-foreground: color-mix(
5+
in srgb,
6+
var(--color-neutral-800) 80%,
7+
var(--sidebar)
8+
);
9+
}
10+
11+
.dark {
12+
--sidebar-foreground: color-mix(
13+
in srgb,
14+
var(--color-neutral-200) 80%,
15+
var(--sidebar)
16+
);
17+
}

0 commit comments

Comments
 (0)