@a-type/ui 0.3.2 → 0.4.0

package/src/components/collapsible/Collapsible.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+export const CollapsibleRoot = CollapsiblePrimitive.Root;
+const CollapsibleContentBase = withClassName(
+	CollapsiblePrimitive.Content,
+	'overflow-hidden animate-forwards',
+	'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)',
+);
+// specifically removing className... it's causing problems?
+export const CollapsibleContent = forwardRef<
+	HTMLDivElement,
+	CollapsiblePrimitive.CollapsibleContentProps & {
+		horizontal?: boolean;
+		both?: boolean;
+	}
+>(function CollapsibleContent({ horizontal, both, ...props }, ref) {
+	return (
+		<CollapsibleContentBase
+			data-horizontal={horizontal}
+			data-both={both}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export const CollapsibleSimple = ({
+	horizontal,
+	both,
+	children,
+	...props
+}: CollapsiblePrimitive.CollapsibleProps & {
+	horizontal?: boolean;
+	both?: boolean;
+}) => (
+	<CollapsibleRoot {...props}>
+		<CollapsibleContent horizontal={horizontal} both={both}>
+			{children}
+		</CollapsibleContent>
+	</CollapsibleRoot>
+);

package/src/components/collapsible/index.ts

@@ -0,0 +1 @@
+export * from './Collapsible.js';

package/src/components/collapsible.ts

@@ -0,0 +1 @@
+export * from './collapsible/index.js';

package/src/components/colorPicker/ColorPicker.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../select/Select.js';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export type ThemeName = 'lemon' | 'tomato' | 'leek' | 'blueberry' | 'eggplant';
+
+export interface ColorPickerProps {
+  value: ThemeName | null;
+  onChange: (value: ThemeName) => void;
+}
+
+export function ColorPicker({ value, onChange }: ColorPickerProps) {
+  const resolvedValue = [
+    'lemon',
+    'tomato',
+    'leek',
+    'blueberry',
+    'eggplant',
+  ].includes(value || '')
+    ? (value as ThemeName)
+    : 'lemon';
+
+  return (
+    <Select value={resolvedValue} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className="z-[calc(var(--z-dialog)+1)]">
+        <SelectItem value="lemon">
+          <ColorSwatch value="lemon" />
+          <ItemLabel>Lemon</ItemLabel>
+        </SelectItem>
+        <SelectItem value="tomato">
+          <ColorSwatch value="tomato" />
+          <ItemLabel>Tomato</ItemLabel>
+        </SelectItem>
+        <SelectItem value="leek">
+          <ColorSwatch value="leek" />
+          <ItemLabel>Leek</ItemLabel>
+        </SelectItem>
+        <SelectItem value="blueberry">
+          <ColorSwatch value="blueberry" />
+          <ItemLabel>Blueberry</ItemLabel>
+        </SelectItem>
+        <SelectItem value="eggplant">
+          <ColorSwatch value="eggplant" />
+          <ItemLabel>Eggplant</ItemLabel>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+const ItemLabel = withClassName('span', 'display-none');
+
+export function ColorSwatch({
+  value,
+  children,
+}: {
+  value: ThemeName;
+  children?: ReactNode;
+}) {
+  return (
+    <div
+      className={classNames(
+        'bg-primary w-16px h-16px rounded-sm',
+        `theme-${value ?? 'lemon'}`,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/colorPicker/index.ts

@@ -0,0 +1 @@
+export * from './ColorPicker.js';

package/src/components/colorPicker.ts

@@ -0,0 +1 @@
+export * from './colorPicker/index.js';

package/src/components/contextMenu/contextMenu.tsx

@@ -0,0 +1,43 @@
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import classNames from 'classnames';
+
+export const ContextMenuRoot = ContextMenu.Root;
+
+export const ContextMenuContent = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<typeof ContextMenu.Content>
+>(function Content({ className, onClick, ...props }, ref) {
+	return (
+		<ContextMenu.Portal>
+			<ContextMenu.Content
+				className={classNames(
+					'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-2 shadow-md z-menu)',
+					'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
+					'layer-components:[&[data-state=open]]:animate-popover-in',
+					'layer-components:[&[data-state=closed]]:animate-popover-out',
+					'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto)',
+					'important:motion-reduce:animate-none',
+					className,
+				)}
+				onClick={(ev) => {
+					ev.stopPropagation();
+					onClick?.(ev);
+				}}
+				ref={ref}
+				{...props}
+			/>
+		</ContextMenu.Portal>
+	);
+});
+
+export const ContextMenuArrow = withClassName(ContextMenu.Arrow, 'fill-white');
+
+export const ContextMenuItem = withClassName(
+	ContextMenu.Item,
+	'flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer',
+	'hover:bg-gray2 [&[data-highlighted=true]]:bg-gray2 [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default)',
+);
+
+export const ContextMenuTrigger = withClassName(ContextMenu.Trigger, '');

package/src/components/contextMenu.ts

@@ -0,0 +1 @@
+export * from './contextMenu/contextMenu.js';

package/src/components/datePicker/DatePicker.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker, DateRangePicker } from './DatePicker.js';
+import { useState } from 'react';
+
+const meta = {
+	title: 'DatePicker',
+	component: DatePicker,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+	render() {
+		const [value, setValue] = useState<Date | null>(null);
+		return <DatePicker value={value} onChange={setValue} />;
+	},
+};
+
+export const Range: Story = {
+	render() {
+		const [value, setValue] = useState<{
+			start: Date | null;
+			end: Date | null;
+		}>({ start: null, end: null });
+		return <DateRangePicker value={value} onChange={setValue} />;
+	},
+};

package/src/components/datePicker/DatePicker.tsx

@@ -0,0 +1,258 @@
+import {
+	Calendar,
+	CalendarDay as BaseCalendarDay,
+	CalendarDays,
+} from 'calendar-blocks';
+import { Button } from '../button.js';
+import { Icon } from '../icon.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { useCallback, useState } from 'react';
+import { withClassName } from '../../hooks.js';
+import classNames from 'classnames';
+
+export interface DatePickerProps {
+	value: Date | null;
+	onChange: (date: Date | null) => void;
+	className?: string;
+}
+
+export function DatePicker({
+	value,
+	onChange,
+	className,
+	...rest
+}: DatePickerProps) {
+	const [{ month, year }, setDisplay] = useState(() => ({
+		month: new Date().getMonth(),
+		year: new Date().getFullYear(),
+	}));
+	const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
+		month: 'long',
+		year: 'numeric',
+	});
+
+	return (
+		<div
+			className={classNames(
+				'flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)]',
+				className,
+			)}
+			{...rest}
+		>
+			<MonthRow>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month - 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowLeftIcon />
+				</MonthButton>
+				<MonthLabel>{monthLabel}</MonthLabel>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month + 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowRightIcon />
+				</MonthButton>
+			</MonthRow>
+			<Calendar
+				displayMonth={month}
+				displayYear={year}
+				value={value}
+				onChange={onChange}
+				onDisplayChange={setDisplay}
+			>
+				<CalendarGrid>
+					<DayLabels />
+					<CalendarDays>
+						{(value) => <CalendarDay value={value} key={value.key} />}
+					</CalendarDays>
+				</CalendarGrid>
+			</Calendar>
+		</div>
+	);
+}
+
+export interface DateRangePickerProps {
+	value: { start: Date | null; end: Date | null };
+	onChange: (value: { start: Date | null; end: Date | null }) => void;
+	className?: string;
+}
+
+export function DateRangePicker({
+	value,
+	onChange,
+	className,
+}: DateRangePickerProps) {
+	const [{ month, year }, setDisplay] = useState(() => ({
+		month: new Date().getMonth(),
+		year: new Date().getFullYear(),
+	}));
+	const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
+		month: 'long',
+		year: 'numeric',
+	});
+	const nextMonth = new Date(year, month + 1);
+	const nextMonthLabel = nextMonth.toLocaleDateString('en-US', {
+		month: 'long',
+		year: 'numeric',
+	});
+	const onDisplayChange = useCallback(
+		({ month: newMonth, year: newYear }: { month: number; year: number }) => {
+			/**
+			 * Important UX consideration:
+			 *
+			 * since we are displaying 2 months at once, we don't
+			 * always want to change our view if the user's cursor
+			 * date moves from one month to another. Specifically,
+			 * if they move from the first visible month to the
+			 * second visible month, we don't need to change the view,
+			 * since they are still within the visible range.
+			 * So, we write logic to ignore that case!
+			 */
+			if (newMonth === month + 1 && newYear === year) {
+				return; // ignore movement from the first to the second frame
+			}
+
+			setDisplay({
+				month: newMonth,
+				year: newYear,
+			});
+		},
+		[month, year],
+	);
+
+	return (
+		<Calendar
+			displayMonth={month}
+			displayYear={year}
+			rangeValue={value}
+			onRangeChange={(range) => onChange(range)}
+			onDisplayChange={onDisplayChange}
+			className={classNames('flex justify-center', className)}
+		>
+			<RangeLayout>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					className="[grid-area:prevMonth]"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month - 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowLeftIcon />
+				</MonthButton>
+				<MonthLabel className="[grid-area:leftMonth]">{monthLabel}</MonthLabel>
+				<MonthLabel className="[grid-area:rightMonth]">
+					{nextMonthLabel}
+				</MonthLabel>
+				<MonthButton
+					size="icon"
+					color="ghost"
+					className="[grid-area:nextMonth]"
+					onClick={() =>
+						setDisplay((cur) => ({
+							month: cur.month + 1,
+							year: cur.year,
+						}))
+					}
+				>
+					<ArrowRightIcon />
+				</MonthButton>
+				<CalendarGrid className="[grid-area:leftGrid]">
+					<DayLabels />
+					<CalendarDays>
+						{(value) => <CalendarDay value={value} key={value.key} />}
+					</CalendarDays>
+				</CalendarGrid>
+				<CalendarGrid className="[grid-area:rightGrid]">
+					<DayLabels />
+					<CalendarDays monthOffset={1}>
+						{(value) => <CalendarDay value={value} key={value.key} />}
+					</CalendarDays>
+				</CalendarGrid>
+			</RangeLayout>
+		</Calendar>
+	);
+}
+
+const MonthRow = withClassName(
+	'div',
+	'flex flex-row justify-between items-center w-full',
+);
+
+const MonthLabel = withClassName(
+	'span',
+	'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis',
+	'self-center',
+);
+
+const MonthButton = withClassName(Button, 'self-center');
+
+const CalendarGrid = withClassName(
+	'div',
+	'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]',
+	'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2 bg-gray-1',
+);
+
+const CalendarDay = withClassName(
+	BaseCalendarDay,
+	'border border-solid border-transparent bg-white mr--1px mb--1px relative rounded',
+	'flex items-center justify-center transition-colors cursor-pointer',
+	'[&[data-highlighted]]:(z-1 outline-accent)',
+	'[&[data-selected]]:(bg-accent-light z-2)',
+	'[&[data-in-range]]:(bg-accent-wash rounded-none z-1)',
+	'[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)',
+	'[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)',
+	'disabled:(opacity-50 cursor-default)',
+	// today dot
+	'[&[data-today]]:before:(content-[""] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-full bg-primary)',
+	'[&[data-top-edge]]:(border-top-gray-2)',
+	'[&[data-bottom-edge]]:(border-bottom-gray-2)',
+	'[&[data-first-column]]:(border-left-gray-2)',
+	'[&[data-last-column]]:(border-right-gray-2)',
+	'[&[data-day-first]]:(border-left-gray-2 rounded-tl)',
+	'[&[data-day-last]]:(border-right-gray-2 rounded-br)',
+	'[&[data-first-column][data-bottom-edge]]:rounded-bl',
+	'[&[data-last-column][data-bottom-edge]]:rounded-br',
+	'[&[data-first-column][data-top-edge]]:rounded-tl',
+	'[&[data-last-column][data-top-edge]]:rounded-tr',
+	'[&[data-different-month]]:[visibility:hidden]',
+);
+
+const DayLabel = withClassName(
+	'div',
+	'flex items-center justify-center text-sm text-gray-6',
+);
+
+const DayLabels = () => (
+	<>
+		<DayLabel>S</DayLabel>
+		<DayLabel>M</DayLabel>
+		<DayLabel>T</DayLabel>
+		<DayLabel>W</DayLabel>
+		<DayLabel>T</DayLabel>
+		<DayLabel>F</DayLabel>
+		<DayLabel>S</DayLabel>
+	</>
+);
+
+const RangeLayout = withClassName(
+	'div',
+	'grid [grid-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"]',
+	'[grid-template-columns:auto_1fr_1fr_auto] [grid-template-rows:auto_1fr] gap-2',
+);

package/src/components/dialog/Dialog.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	Dialog,
+	DialogContent,
+	DialogTrigger,
+	DialogActions,
+	DialogClose,
+	DialogTitle,
+} from './Dialog.js';
+
+const meta = {
+	title: 'Dialog',
+	component: Dialog,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<DialogTrigger>Open</DialogTrigger>
+				<DialogContent>
+					<DialogTitle>Hello world</DialogTitle>
+					<DialogActions>
+						<DialogClose>Close</DialogClose>
+					</DialogActions>
+				</DialogContent>
+			</>
+		),
+	},
+};