feat: Add new components

.changeset/thin-cameras-compare.md

@@ -0,0 +1,5 @@
+---
+"@itsrakesh/ui": minor
+---
+
+Added new components: Calendar, Toggle

.github/workflows/deploy-storybook.yml

@@ -22,10 +22,10 @@ jobs:
  - name: Checkout
  uses: actions/checkout@v3
 
- - name: Setup pnpm 7
+ - name: Setup pnpm
  uses: pnpm/action-setup@v2
  with:
- version: 7
+ version: 8
 
  - name: Setup Node.js 18.x
  uses: actions/setup-node@v3

packages/ui/package.json

@@ -108,9 +108,12 @@
  "@radix-ui/react-switch": "^1.0.3",
  "@radix-ui/react-tabs": "^1.0.4",
  "@radix-ui/react-toast": "^1.1.4",
+ "@radix-ui/react-toggle": "^1.0.3",
  "@radix-ui/react-tooltip": "^1.0.7",
  "class-variance-authority": "^0.7.0",
  "cmdk": "^0.2.0",
+ "date-fns": "^2.30.0",
+ "react-day-picker": "^8.9.1",
  "react-hook-form": "^7.46.1",
  "tailwindcss-animate": "^1.0.7"
  },

packages/ui/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { cn } from "@itsrakesh/utils";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { buttonVariants } from "../";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+const IconLeft = () => <ChevronLeftIcon className="h-4 w-4" />;
+const IconRight = () => <ChevronRightIcon className="h-4 w-4" />;
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ ...props
+}: CalendarProps) {
+ return (
+ <DayPicker
+ showOutsideDays={showOutsideDays}
+ className={cn("p-3", className)}
+ classNames={{
+ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+ month: "space-y-4",
+ caption: "flex justify-center pt-1 relative items-center",
+ caption_label: "text-sm font-medium",
+ nav: "space-x-1 flex items-center",
+ nav_button: cn(
+ buttonVariants({ variant: "outline" }),
+ "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+ ),
+ nav_button_previous: "absolute left-1",
+ nav_button_next: "absolute right-1",
+ table: "w-full border-collapse space-y-1",
+ head_row: "flex",
+ head_cell:
+ "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+ row: "flex w-full mt-2",
+ cell: cn(
+ "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent",
+ props.mode === "range"
+ ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+ : "[&:has([aria-selected])]:rounded-md"
+ ),
+ day: cn(
+ buttonVariants({ variant: "ghost" }),
+ "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+ ),
+ day_range_start: "day-range-start",
+ day_range_end: "day-range-end",
+ day_selected:
+ "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+ day_today: "bg-accent text-accent-foreground",
+ day_outside: "text-muted-foreground opacity-50",
+ day_disabled: "text-muted-foreground opacity-50",
+ day_range_middle:
+ "aria-selected:bg-accent aria-selected:text-accent-foreground",
+ day_hidden: "invisible",
+ ...classNames,
+ }}
+ components={{
+ IconLeft,
+ IconRight,
+ }}
+ {...props}
+ />
+ );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

packages/ui/src/components/Calendar/index.ts

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar";

packages/ui/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { cn } from "@itsrakesh/utils";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-3",
+ sm: "h-8 px-2",
+ lg: "h-10 px-3",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+const Toggle = React.forwardRef<
+ React.ElementRef<typeof TogglePrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+ VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+ <TogglePrimitive.Root
+ ref={ref}
+ className={cn(toggleVariants({ variant, size, className }))}
+ {...props}
+ />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

packages/ui/src/components/Toggle/index.ts

@@ -0,0 +1 @@
+export { Toggle, toggleVariants } from "./Toggle";

packages/ui/src/components/index.ts

@@ -4,6 +4,7 @@ export * from "./AspectRatio";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./Button";
+export * from "./Calendar";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./Command";
@@ -26,4 +27,5 @@ export * from "./Table";
 export * from "./Tabs";
 export * from "./Textarea";
 export * from "./Toast";
+export * from "./Toggle";
 export * from "./Tooltip";

packages/ui/src/stories/Calendar.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Calendar } from "../";
+
+const meta: Meta<typeof Calendar> = {
+ component: Calendar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+ render: () => {
+ const [date, setDate] = React.useState<Date | undefined>(new Date());
+
+ return (
+ <Calendar
+ mode="single"
+ selected={date}
+ onSelect={setDate}
+ className="rounded-md border"
+ />
+ );
+ },
+};

packages/ui/src/stories/Toggle.stories.tsx

@@ -0,0 +1,45 @@
+import { FontBoldIcon } from "@radix-ui/react-icons";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Toggle } from "../";
+
+const meta: Meta<typeof Toggle> = {
+ component: Toggle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+ args: {
+ children: <FontBoldIcon className="h-4 w-4" />,
+ "aria-label": "Toggle bold",
+ },
+};
+
+export const Outline: Story = {
+ args: {
+ ...Default.args,
+ variant: "outline",
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ ...Default.args,
+ disabled: true,
+ },
+};
+
+export const WithText: Story = {
+ args: {
+ ...Default.args,
+ children: (
+ <>
+ <FontBoldIcon className="mr-2 h-4 w-4" />
+ Italic
+ </>
+ ),
+ },
+};