@gsk_poc/untitled-ui-base 0.1.1

package/components/application/date-picker/date-picker.demo.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { endOfMonth, endOfWeek, getLocalTimeZone, startOfMonth, startOfWeek, today } from "@internationalized/date";
+import type { DateValue } from "react-aria-components";
+import { DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, useLocale } from "react-aria-components";
+import { Button } from "@/components/base/buttons/button";
+import { Calendar } from "./calendar";
+import { DateInput } from "./date-input";
+import { DatePicker } from "./date-picker";
+import { DateRangePicker } from "./date-range-picker";
+import { RangeCalendar } from "./range-calendar";
+import { RangePresetButton } from "./range-preset";
+
+const now = today(getLocalTimeZone());
+
+export const CalendarDemo = () => <Calendar aria-label="Calendar" />;
+
+export const CalendarCardDemo = () => (
+    <AriaDatePicker aria-label="Calendar card" defaultValue={now}>
+        <AriaDialog className="rounded-2xl bg-primary shadow-xl ring ring-secondary_alt">
+            <div className="flex px-6 py-5">
+                <Calendar />
+            </div>
+            <div className="grid grid-cols-2 gap-3 border-t border-secondary p-4">
+                <Button size="md" color="secondary">
+                    Cancel
+                </Button>
+                <Button size="md" color="primary">
+                    Apply
+                </Button>
+            </div>
+        </AriaDialog>
+    </AriaDatePicker>
+);
+
+export const DatePickerDemo = () => <DatePicker aria-label="Date picker" defaultValue={now} />;
+
+export const DatePickerControlledDemo = () => {
+    const [value, setValue] = useState<DateValue | null>(now);
+
+    return <DatePicker aria-label="Date picker" value={value} onChange={setValue} />;
+};
+
+export const RangeCalendarDemo = () => <RangeCalendar aria-label="Range calendar" />;
+
+export const RangeCalendarCardDemo = () => {
+    const { locale } = useLocale();
+    const [focusedValue, setFocusedValue] = useState<DateValue | null>(null);
+    const [value, setValue] = useState<{ start: DateValue; end: DateValue } | null>({
+        start: now.subtract({ days: 7 }),
+        end: now,
+    });
+
+    const presets = useMemo(
+        () => ({
+            today: { label: "Today", value: { start: now, end: now } },
+            yesterday: { label: "Yesterday", value: { start: now.subtract({ days: 1 }), end: now.subtract({ days: 1 }) } },
+            thisWeek: { label: "This week", value: { start: startOfWeek(now, locale), end: endOfWeek(now, locale) } },
+            lastWeek: {
+                label: "Last week",
+                value: {
+                    start: startOfWeek(now, locale).subtract({ weeks: 1 }),
+                    end: endOfWeek(now, locale).subtract({ weeks: 1 }),
+                },
+            },
+            thisMonth: { label: "This month", value: { start: startOfMonth(now), end: endOfMonth(now) } },
+            lastMonth: {
+                label: "Last month",
+                value: {
+                    start: startOfMonth(now).subtract({ months: 1 }),
+                    end: endOfMonth(now).subtract({ months: 1 }),
+                },
+            },
+            thisYear: { label: "This year", value: { start: startOfMonth(now.set({ month: 1 })), end: endOfMonth(now.set({ month: 12 })) } },
+            lastYear: {
+                label: "Last year",
+                value: {
+                    start: startOfMonth(now.set({ month: 1 }).subtract({ years: 1 })),
+                    end: endOfMonth(now.set({ month: 12 }).subtract({ years: 1 })),
+                },
+            },
+            allTime: {
+                label: "All time",
+                value: {
+                    start: now.set({ year: 2000, month: 1, day: 1 }),
+                    end: now,
+                },
+            },
+        }),
+        [locale],
+    );
+
+    return (
+        <AriaDateRangePicker aria-label="Range calendar" value={value} onChange={setValue}>
+            <AriaDialog className="flex rounded-2xl bg-primary shadow-xl ring ring-secondary_alt focus:outline-hidden">
+                <div className="hidden w-38 flex-col gap-0.5 border-r border-solid border-secondary p-3 lg:flex">
+                    {Object.values(presets).map((preset) => (
+                        <RangePresetButton
+                            key={preset.label}
+                            value={preset.value}
+                            onClick={() => {
+                                setFocusedValue(preset.value.start);
+                                setValue(preset.value);
+                            }}
+                        >
+                            {preset.label}
+                        </RangePresetButton>
+                    ))}
+                </div>
+                <div className="flex flex-col">
+                    <RangeCalendar
+                        focusedValue={focusedValue}
+                        onFocusChange={setFocusedValue}
+                        presets={{
+                            lastWeek: presets.lastWeek,
+                            lastMonth: presets.lastMonth,
+                            lastYear: presets.lastYear,
+                        }}
+                    />
+                    <div className="flex justify-between gap-3 border-t border-secondary p-4">
+                        <div className="hidden items-center gap-3 md:flex">
+                            <DateInput slot="start" className="w-36" />
+                            <div className="text-md text-quaternary">–</div>
+                            <DateInput slot="end" className="w-36" />
+                        </div>
+                        <div className="grid w-full grid-cols-2 gap-3 md:flex md:w-auto">
+                            <Button size="md" color="secondary">
+                                Cancel
+                            </Button>
+                            <Button size="md" color="primary">
+                                Apply
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </AriaDialog>
+        </AriaDateRangePicker>
+    );
+};
+
+export const DateRangePickerDemo = () => {
+    return (
+        <DateRangePicker
+            aria-label="Date range picker"
+            defaultValue={{
+                start: now.subtract({ days: 7 }),
+                end: now,
+            }}
+        />
+    );
+};
+
+export const DateRangePickerControlledDemo = () => {
+    const [value, setValue] = useState<{ start: DateValue; end: DateValue } | null>({
+        start: now.subtract({ days: 7 }),
+        end: now,
+    });
+
+    return <DateRangePicker aria-label="Date range picker" shouldCloseOnSelect={false} value={value} onChange={setValue} />;
+};
+
+export const DarkModeDemo = () => {
+    const [value, setValue] = useState<DateValue | null>(now);
+    const [focusedValue, setFocusedValue] = useState<DateValue | null>(now);
+
+    return (
+        <div className="relative h-180 w-full max-w-180 [--clip-boundary:50%]">
+            <div
+                style={{
+                    clipPath: "polygon(0 0, var(--clip-boundary) 0, var(--clip-boundary) 100%, 0 100%)",
+                    transitionTimingFunction: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+                }}
+                className="peer/light absolute inset-0 flex items-center justify-center overflow-hidden rounded-2xl bg-tertiary outline-1 -outline-offset-1 outline-secondary_alt transition-all duration-200 peer-hover/dark:[--clip-boundary:10%] hover:z-10 hover:[--clip-boundary:90%]"
+            >
+                <AriaDatePicker aria-label="Calendar card" value={value} onChange={setValue}>
+                    <AriaDialog className="rounded-2xl bg-primary shadow-xl ring ring-secondary_alt">
+                        <div className="flex px-6 py-5">
+                            <Calendar focusedValue={focusedValue} onFocusChange={setFocusedValue} />
+                        </div>
+                        <div className="grid grid-cols-2 gap-3 border-t border-secondary p-4">
+                            <Button size="md" color="secondary">
+                                Cancel
+                            </Button>
+                            <Button size="md" color="primary">
+                                Apply
+                            </Button>
+                        </div>
+                    </AriaDialog>
+                </AriaDatePicker>
+            </div>
+            <div
+                style={{
+                    clipPath: "polygon(var(--clip-boundary) 0, 100% 0, 100% 100%, var(--clip-boundary) 100%)",
+                    transitionTimingFunction: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+                }}
+                className="peer/dark dark-mode absolute inset-0 flex items-center justify-center overflow-hidden rounded-2xl bg-tertiary outline-1 -outline-offset-1 outline-secondary_alt transition-all duration-200 peer-hover/light:[--clip-boundary:90%] hover:z-10 hover:[--clip-boundary:10%]"
+            >
+                <AriaDatePicker aria-label="Calendar card" value={value} onChange={setValue}>
+                    <AriaDialog className="rounded-2xl bg-primary shadow-xl ring ring-secondary_alt">
+                        <div className="flex px-6 py-5">
+                            <Calendar focusedValue={focusedValue} onFocusChange={setFocusedValue} />
+                        </div>
+                        <div className="grid grid-cols-2 gap-3 border-t border-secondary p-4">
+                            <Button size="md" color="secondary">
+                                Cancel
+                            </Button>
+                            <Button size="md" color="primary">
+                                Apply
+                            </Button>
+                        </div>
+                    </AriaDialog>
+                </AriaDatePicker>
+            </div>
+        </div>
+    );
+};

package/components/application/date-picker/date-picker.story.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import type { FC } from "react";
+import * as Demos from "./date-picker.demo";
+
+export default {
+    title: "Application/Date pickers",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-start justify-center bg-tertiary p-8">
+                <div className="flex w-75 justify-end">
+                    <Story />
+                </div>
+            </div>
+        ),
+    ],
+};
+
+export const CalendarDemo = () => <Demos.CalendarDemo />;
+CalendarDemo.storyName = "Calendar";
+
+export const CalendarCardDemo = () => <Demos.CalendarCardDemo />;
+CalendarCardDemo.storyName = "Calendar card";
+
+export const DatePickerDemo = () => <Demos.DatePickerDemo />;
+DatePickerDemo.storyName = "Date picker";
+
+export const DatePickerControlledDemo = () => <Demos.DatePickerControlledDemo />;
+DatePickerControlledDemo.storyName = "Date picker controlled";
+
+export const RangeCalendarDemo = () => <Demos.RangeCalendarDemo />;
+RangeCalendarDemo.storyName = "Range calendar";
+
+export const RangeCalendarCardDemo = () => <Demos.RangeCalendarCardDemo />;
+RangeCalendarCardDemo.storyName = "Range calendar card";
+
+export const DateRangePickerDemo = () => <Demos.DateRangePickerDemo />;
+DateRangePickerDemo.storyName = "Date range picker";
+
+export const DateRangePickerControlledDemo = () => <Demos.DateRangePickerControlledDemo />;
+DateRangePickerControlledDemo.storyName = "Date range picker controlled";
+
+export const DarkModeDemo = () => <Demos.DarkModeDemo />;
+DarkModeDemo.storyName = "Dark mode demo";

package/components/application/file-upload/file-upload.demo.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState } from "react";
+import { FileUpload, getReadableFileSize } from "@/components/application/file-upload/file-upload-base";
+
+const uploadFile = (file: File, onProgress: (progress: number) => void) => {
+    // Add your upload logic here...
+
+    // This is dummy upload logic
+    let progress = 0;
+    const interval = setInterval(() => {
+        onProgress(++progress);
+        if (progress === 100) {
+            clearInterval(interval);
+        }
+    }, 100);
+};
+
+type UploadedFile = { id: string; name: string; size: number; progress: number; type?: string; failed?: boolean };
+
+export const ImagesOnlyDemo = () => {
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+
+    const handleDropFiles = (files: FileList) => {
+        const newFiles = Array.from(files);
+        const newFilesWithIds = newFiles.map((file) => ({
+            id: Math.random().toString(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            fileObject: file,
+        }));
+
+        setUploadedFiles([...newFilesWithIds.map(({ fileObject: _, ...file }) => file), ...uploadedFiles]);
+
+        newFilesWithIds.forEach(({ id, fileObject }) => {
+            uploadFile(fileObject, (progress) => {
+                setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress } : uploadedFile)));
+            });
+        });
+    };
+
+    const handleDropUnacceptedFiles = (files: FileList) => {
+        console.log("Unaccepted files", files);
+    };
+
+    const handleDeleteFile = (id: string) => {
+        setUploadedFiles((prev) => prev.filter((file) => file.id !== id));
+    };
+
+    const handleRetryFile = (id: string) => {
+        const file = uploadedFiles.find((file) => file.id === id);
+        if (!file) return;
+
+        uploadFile(new File([], file.name, { type: file.type }), (progress) => {
+            setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress, failed: false } : uploadedFile)));
+        });
+    };
+
+    return (
+        <FileUpload.Root>
+            <FileUpload.DropZone
+                accept="image/*"
+                hint="Please upload PNG or JPEG images only."
+                onDropFiles={handleDropFiles}
+                onDropUnacceptedFiles={handleDropUnacceptedFiles}
+            />
+
+            <FileUpload.List>
+                {uploadedFiles.map((file) => (
+                    <FileUpload.ListItemProgressBar
+                        key={file.id}
+                        {...file}
+                        size={file.size}
+                        onDelete={() => handleDeleteFile(file.id)}
+                        onRetry={() => handleRetryFile(file.id)}
+                    />
+                ))}
+            </FileUpload.List>
+        </FileUpload.Root>
+    );
+};
+
+export const MaxSizeLimitDemo = () => {
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+
+    const handleDropFiles = (files: FileList) => {
+        const newFiles = Array.from(files);
+        const newFilesWithIds = newFiles.map((file) => ({
+            id: Math.random().toString(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            fileObject: file,
+        }));
+
+        setUploadedFiles([...newFilesWithIds.map(({ fileObject: _, ...file }) => file), ...uploadedFiles]);
+
+        newFilesWithIds.forEach(({ id, fileObject }) => {
+            uploadFile(fileObject, (progress) => {
+                setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress } : uploadedFile)));
+            });
+        });
+    };
+
+    const handleMaxSizeExceed = (files: FileList) => {
+        console.log("Max size exceeded", files);
+    };
+
+    const handleDeleteFile = (id: string) => {
+        setUploadedFiles((prev) => prev.filter((file) => file.id !== id));
+    };
+
+    const handleRetryFile = (id: string) => {
+        const file = uploadedFiles.find((file) => file.id === id);
+        if (!file) return;
+
+        uploadFile(new File([], file.name, { type: file.type }), (progress) => {
+            setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress, failed: false } : uploadedFile)));
+        });
+    };
+
+    const MAX_SIZE = 1024 * 1024 * 1;
+
+    return (
+        <FileUpload.Root>
+            <FileUpload.DropZone
+                maxSize={MAX_SIZE}
+                hint={`Upload files to add to this project (max. ${getReadableFileSize(MAX_SIZE)}).`}
+                onDropFiles={handleDropFiles}
+                onSizeLimitExceed={handleMaxSizeExceed}
+            />
+
+            <FileUpload.List>
+                {uploadedFiles.map((file) => (
+                    <FileUpload.ListItemProgressBar
+                        key={file.id}
+                        {...file}
+                        size={file.size}
+                        onDelete={() => handleDeleteFile(file.id)}
+                        onRetry={() => handleRetryFile(file.id)}
+                    />
+                ))}
+            </FileUpload.List>
+        </FileUpload.Root>
+    );
+};
+
+export const DisabledDemo = () => {
+    return (
+        <FileUpload.Root>
+            <FileUpload.DropZone isDisabled />
+        </FileUpload.Root>
+    );
+};
+
+const placeholderFiles = [
+    {
+        id: "file-01",
+        name: "Example dashboard screenshot.jpg",
+        type: "jpg",
+        size: 720 * 1024,
+        progress: 50,
+    },
+    {
+        id: "file-02",
+        name: "Tech design requirements_2.pdf",
+        type: "pdf",
+        size: 720 * 1024,
+        progress: 100,
+    },
+    {
+        id: "file-03",
+        name: "Tech design requirements.pdf",
+        type: "pdf",
+        failed: true,
+        size: 1024 * 1024 * 1,
+        progress: 0,
+    },
+];
+
+export const FileUploadProgressBar = (props: { isDisabled?: boolean }) => {
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>(placeholderFiles);
+
+    const handleDropFiles = (files: FileList) => {
+        const newFiles = Array.from(files);
+        const newFilesWithIds = newFiles.map((file) => ({
+            id: Math.random().toString(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            fileObject: file,
+        }));
+
+        setUploadedFiles([...newFilesWithIds.map(({ fileObject: _, ...file }) => file), ...uploadedFiles]);
+
+        newFilesWithIds.forEach(({ id, fileObject }) => {
+            uploadFile(fileObject, (progress) => {
+                setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress } : uploadedFile)));
+            });
+        });
+    };
+
+    const handleDeleteFile = (id: string) => {
+        setUploadedFiles((prev) => prev.filter((file) => file.id !== id));
+    };
+
+    const handleRetryFile = (id: string) => {
+        const file = uploadedFiles.find((file) => file.id === id);
+        if (!file) return;
+
+        uploadFile(new File([], file.name, { type: file.type }), (progress) => {
+            setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress, failed: false } : uploadedFile)));
+        });
+    };
+
+    return (
+        <FileUpload.Root>
+            <FileUpload.DropZone isDisabled={props.isDisabled} onDropFiles={handleDropFiles} />
+
+            <FileUpload.List>
+                {uploadedFiles.map((file) => (
+                    <FileUpload.ListItemProgressBar
+                        key={file.id}
+                        {...file}
+                        size={file.size}
+                        onDelete={() => handleDeleteFile(file.id)}
+                        onRetry={() => handleRetryFile(file.id)}
+                    />
+                ))}
+            </FileUpload.List>
+        </FileUpload.Root>
+    );
+};
+
+export const FileUploadProgressFill = (props: { isDisabled?: boolean }) => {
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>(placeholderFiles);
+
+    const handleDropFiles = (files: FileList) => {
+        const newFiles = Array.from(files);
+        const newFilesWithIds = newFiles.map((file) => ({
+            id: Math.random().toString(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            fileObject: file,
+        }));
+
+        setUploadedFiles([...newFilesWithIds.map(({ fileObject: _, ...file }) => file), ...uploadedFiles]);
+
+        newFilesWithIds.forEach(({ id, fileObject }) => {
+            uploadFile(fileObject, (progress) => {
+                setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress } : uploadedFile)));
+            });
+        });
+    };
+
+    const handleDeleteFile = (id: string) => {
+        setUploadedFiles((prev) => prev.filter((file) => file.id !== id));
+    };
+
+    const handleRetryFile = (id: string) => {
+        const file = uploadedFiles.find((file) => file.id === id);
+        if (!file) return;
+
+        uploadFile(new File([], file.name, { type: file.type }), (progress) => {
+            setUploadedFiles((prev) => prev.map((uploadedFile) => (uploadedFile.id === id ? { ...uploadedFile, progress, failed: false } : uploadedFile)));
+        });
+    };
+
+    return (
+        <FileUpload.Root>
+            <FileUpload.DropZone isDisabled={props.isDisabled} onDropFiles={handleDropFiles} />
+
+            <FileUpload.List>
+                {uploadedFiles.map((file) => (
+                    <FileUpload.ListItemProgressFill
+                        key={file.id}
+                        {...file}
+                        size={file.size}
+                        onDelete={() => handleDeleteFile(file.id)}
+                        onRetry={() => handleRetryFile(file.id)}
+                    />
+                ))}
+            </FileUpload.List>
+        </FileUpload.Root>
+    );
+};

package/components/application/file-upload/file-upload.story.tsx

@@ -0,0 +1,70 @@
+import type { FC } from "react";
+import { Draggable } from "./draggable";
+import * as FileUploads from "./file-upload.demo";
+
+export default {
+    title: "Application/File upload",
+    decorators: [
+        (Story: FC) => (
+            <div data-drag-constraint className="flex min-h-screen w-full flex-col items-center gap-12 bg-primary p-8">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const FileUploadProgressBar = () => (
+    <>
+        <div className="mb-12 flex">
+            <Draggable name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
+            <Draggable name="Side project.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
+            <Draggable name="Invoice #876.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
+        </div>
+        <div className="flex w-full max-w-xl flex-col gap-12">
+            <FileUploads.FileUploadProgressBar />
+        </div>
+    </>
+);
+FileUploadProgressBar.storyName = "File upload progress bar";
+
+export const FileUploadProgressBarDisabled = () => (
+    <>
+        <div className="mb-12 flex">
+            <Draggable name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
+            <Draggable name="Side project.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
+            <Draggable name="Invoice #876.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
+        </div>
+        <div className="flex w-full max-w-xl flex-col gap-12">
+            <FileUploads.FileUploadProgressBar isDisabled />
+        </div>
+    </>
+);
+FileUploadProgressBarDisabled.storyName = "File upload progress bar disabled";
+
+export const FileUploadProgressFill = () => (
+    <>
+        <div className="mb-12 flex">
+            <Draggable name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
+            <Draggable name="Side project.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
+            <Draggable name="Invoice #876.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
+        </div>
+        <div className="flex w-full max-w-xl flex-col gap-12">
+            <FileUploads.FileUploadProgressFill />
+        </div>
+    </>
+);
+FileUploadProgressFill.storyName = "File upload progress fill";
+
+export const FileUploadProgressFillDisabled = () => (
+    <>
+        <div className="mb-12 flex">
+            <Draggable name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
+            <Draggable name="Side project.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
+            <Draggable name="Invoice #876.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
+        </div>
+        <div className="flex w-full max-w-xl flex-col gap-12">
+            <FileUploads.FileUploadProgressFill isDisabled />
+        </div>
+    </>
+);
+FileUploadProgressFillDisabled.storyName = "File upload progress fill disabled";