paris 0.3.0 → 0.4.1

package/src/stories/dialog/Dialog.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import type {
+    ComponentPropsWithoutRef, FC, MouseEventHandler, PropsWithChildren, ReactNode,
+} from 'react';
+import { Dialog as HDialog, Transition } from '@headlessui/react';
+import { Fragment, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import styles from './Dialog.module.scss';
+import { Text } from '../text';
+import { Button } from '../button';
+import { pvar } from '../theme';
+import { TextWhenString } from '../utility/TextWhenString';
+import { VisuallyHidden } from '../utility/VisuallyHidden';
+import { RemoveFromDOM } from '../utility/RemoveFromDOM';
+import { Close, Icon } from '../icon';
+
+export type DialogProps = {
+    /**
+     * The dialog's open state.
+     */
+    isOpen?: boolean;
+    /**
+     * A callback that will be called when the user closes the dialog by clicking the close button or the backdrop overlay.
+     * @param value {boolean} - The new open state of the dialog.
+     */
+    onClose?: (value: boolean) => void | Promise<void>;
+    /**
+     * The title of the dialog. Required for accessibility, but can be hidden with the `hideTitle` prop.
+     *
+     * If a string is passed, it will be wrapped in a {@link Text} component with `headingXSmall` styling.
+     */
+    title: ReactNode;
+    /**
+     * Whether the title should be hidden. If `true`, the title will be visually hidden but still accessible to screen readers.
+     *
+     * If you're hiding the title to add a custom header, you can also hide the close button and render your own by using the `hideCloseButton` prop.
+     *
+     * @default false
+     */
+    hideTitle?: boolean;
+    /**
+     * Whether the close button should be hidden. This will entirely remove the close button from the DOM, so you should provide your own way to close the dialog.
+     *
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * The width of the dialog.
+     *
+     * @default 'default'
+     */
+    width?: 'compact' | 'default' | 'large' | 'full';
+    /**
+     * The height of the dialog.
+     *
+     * @default 'content'
+     */
+    height?: 'content' | 'full';
+    /**
+     * Whether the dialog can be moved with mouse dragging.
+     *
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * The dialog's appearance styling. `simple` is a simple white dialog with a border. `glass` is a glassmorphic dialog with a blurred background.
+     *
+     * @default 'simple'
+     */
+    appearance?: 'simple' | 'glass';
+    /**
+     * Optional overrides for props of each dialog component.
+     *
+     * Valid keys are: `root`, `overlayContainer`, `overlay`, `panelContainer`, `panel`, `panelHeader`, `panelTitle`, `panelCloseButton`.
+     */
+    overrides?: {
+        /** The root element containing all elements */
+        root?: ComponentPropsWithoutRef<'div'>,
+        /** The container for the backdrop overlay */
+        overlayContainer?: ComponentPropsWithoutRef<'div'>,
+        /** The backdrop overlay */
+        overlay?: ComponentPropsWithoutRef<'div'>,
+        /** The container for the dialog panel */
+        panelContainer?: ComponentPropsWithoutRef<'div'>,
+        /** The dialog panel */
+        panel?: ComponentPropsWithoutRef<'div'>,
+        /** The header of the dialog panel, which contains the title and close button */
+        panelHeader?: ComponentPropsWithoutRef<'div'>,
+        /** The title within the dialog panel */
+        panelTitle?: ComponentPropsWithoutRef<'h1'>,
+        /** The close button within the dialog panel */
+        panelCloseButton?: ComponentPropsWithoutRef<'button'>,
+    }
+};
+
+/**
+* Dialogs are modal components that appear on top of the main content and require user interaction to dismiss.
+*
+* They render to a Portal, so they can be used anywhere in the DOM.
+*
+* <hr />
+*
+* To use this component, import it as follows:
+*
+* ```js
+* import { Dialog } from 'paris/dialog';
+* ```
+* @constructor
+*/
+export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
+    isOpen = false,
+    onClose = () => {},
+    title,
+    hideTitle = false,
+    hideCloseButton = false,
+    overrides = {},
+    width = 'default',
+    height = 'content',
+    draggable = false,
+    appearance = 'simple',
+    children,
+}) => {
+    const [dragging, setDragging] = useState(false);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+
+    const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
+        if (draggable) {
+            setDragging(true);
+            setStartPosition({ x: e.clientX, y: e.clientY });
+        }
+    };
+
+    const handleMouseUp = () => {
+        if (draggable) {
+            setDragging(false);
+        }
+    };
+
+    const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
+        if (dragging && draggable) {
+            setPosition({
+                top: position.top + (e.clientY - startPosition.y),
+                left: position.left + (e.clientX - startPosition.x),
+            });
+            setStartPosition({ x: e.clientX, y: e.clientY });
+        }
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            setDragging(false);
+            setPosition({ top: 0, left: 0 });
+            setStartPosition({ x: 0, y: 0 });
+        }
+    }, [isOpen]);
+
+    return (
+        <Transition
+            appear
+            show={isOpen}
+            as={Fragment}
+        >
+            <HDialog
+                as="div"
+                onClose={onClose}
+                {...overrides.root}
+                className={clsx(
+                    styles.root,
+                    overrides.root?.className,
+                )}
+            >
+                <HDialog.Overlay
+                    {...overrides.overlayContainer}
+                    className={clsx(
+                        styles.overlayContainer,
+                        overrides.overlayContainer?.className,
+                    )}
+                >
+                    <Transition.Child
+                        as={Fragment}
+                        enter={styles.enter}
+                        enterFrom={styles.enterFrom}
+                        enterTo={styles.enterTo}
+                        leave={styles.leave}
+                        leaveFrom={styles.leaveFrom}
+                        leaveTo={styles.leaveTo}
+                    >
+                        <div
+                            {...overrides.overlay}
+                            className={clsx(
+                                styles.overlay,
+                                overrides.overlay?.className,
+                            )}
+                        />
+                    </Transition.Child>
+                </HDialog.Overlay>
+
+                <div
+                    {...overrides.panelContainer}
+                    className={clsx(
+                        styles.panelContainer,
+                        overrides.panelContainer?.className,
+                    )}
+                >
+                    <Transition.Child
+                        as={Fragment}
+                        enter={styles.enter}
+                        enterFrom={styles.enterFrom}
+                        enterTo={styles.enterTo}
+                        leave={styles.leave}
+                        leaveFrom={styles.leaveFrom}
+                        leaveTo={styles.leaveTo}
+                    >
+                        <HDialog.Panel
+                            {...overrides.panel}
+                            className={clsx(
+                                styles.panel,
+                                styles[appearance],
+                                styles[`w-${width}`],
+                                styles[`h-${height}`],
+                                overrides.panel?.className,
+                            )}
+                            style={{ top: `${position.top}px`, left: `${position.left}px` }}
+                            onMouseDown={handleMouseDown}
+                            onMouseUp={handleMouseUp}
+                            onMouseMove={handleMouseMove}
+                        >
+                            <div
+                                {...overrides.panelHeader}
+                                className={clsx(
+                                    styles.header,
+                                    overrides.panelHeader?.className,
+                                )}
+                            >
+                                <VisuallyHidden when={hideTitle}>
+                                    <HDialog.Title
+                                        {...overrides.panelTitle}
+                                        as="h1"
+                                        className={clsx(
+                                            styles.title,
+                                            overrides.panelTitle?.className,
+                                        )}
+                                    >
+                                        <TextWhenString
+                                            kind="headingXSmall"
+                                        >
+                                            {title}
+                                        </TextWhenString>
+                                    </HDialog.Title>
+                                </VisuallyHidden>
+                                <RemoveFromDOM when={hideCloseButton}>
+                                    <Button
+                                        kind="tertiary"
+                                        shape="circle"
+                                        onClick={() => onClose(false)}
+                                        startEnhancer={(
+                                            <Icon size={20} icon={Close} />
+                                        )}
+                                        {...overrides.panelCloseButton}
+                                        data-title-hidden={hideTitle}
+                                        className={clsx(
+                                            styles.closeButton,
+                                            overrides.panelCloseButton?.className,
+                                        )}
+                                    >
+                                        Close dialog
+                                    </Button>
+                                </RemoveFromDOM>
+                            </div>
+                            {children}
+                        </HDialog.Panel>
+                    </Transition.Child>
+                </div>
+            </HDialog>
+        </Transition>
+    );
+};

package/src/stories/dialog/index.ts

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

package/src/stories/drawer/Drawer.module.scss

@@ -0,0 +1,284 @@
+$translateInX: 30%;
+$translateInY: 100%;
+$translateOutX: 20%;
+$translateOutY: 60%;
+
+$panelMinMargin: 16px;
+$defaultSize: 360px;
+
+$panelPaddingX: 20px;
+$panelPaddingY: 24px;
+
+$duration: var(--pte-animations-duration-relaxed);
+$paginationDuration: var(--pte-animations-duration-normal);
+$panelAnimationDelay: var(--pte-animations-duration-fast);
+//$panelAnimationDelay: var(--pte-animations-duration-rapid);
+//$duration: var(--pte-animations-duration-normal);
+
+.root {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    z-index: 10;
+    user-select: var(--pte-utils-defaultUserSelect);
+}
+
+.overlay {
+    position: absolute;
+    inset: 0;
+    background-color: var(--pte-colors-backgroundOverlayDark);
+    will-change: backdrop-filter, opacity;
+    backdrop-filter: blur(0);
+}
+
+.overlayContainer {
+    .enterFrom {
+        backdrop-filter: blur(0);
+    }
+    .enterTo {
+        backdrop-filter: blur(2px);
+    }
+    .leave {
+        transition-delay: $panelAnimationDelay;
+    }
+    .leaveFrom {
+        backdrop-filter: blur(2px);
+    }
+    .leaveTo {
+        backdrop-filter: blur(0);
+    }
+}
+
+.panelContainer {
+    position: fixed;
+
+    justify-self: flex-end;
+
+    z-index: 10;
+
+    .enter {
+        transition: $duration var(--pte-animations-timing-easeOut);
+        transition-delay: $panelAnimationDelay;
+        //transition-delay: 50ms;
+    }
+
+    .leave {
+        transition: $duration var(--pte-animations-timing-easeIn);
+    }
+
+    &.from-right {
+        right: 0;
+        padding-left: $panelMinMargin;
+
+        .enterFrom {
+            transform: translateX($translateInX);
+        }
+
+        .enterTo, .leaveFrom {
+            transform: translateX(0);
+        }
+
+        .leaveTo {
+            transform: translateX($translateOutX);
+        }
+    }
+
+    &.from-left {
+        left: 0;
+        padding-right: $panelMinMargin;
+
+        .enterFrom {
+            transform: translateX(-$translateInX);
+        }
+
+        .enterTo, .leaveFrom {
+            transform: translateX(0);
+        }
+
+        .leaveTo {
+            transform: translateX(-$translateOutX);
+
+        }
+    }
+
+
+    &.from-left, &.from-right {
+        height: 100vh;
+        top: 0;
+        bottom: 0;
+
+        &.size-default {
+            width: min(100vw, $defaultSize);
+        }
+
+        &.size-content {
+            width: auto;
+        }
+
+        &.size-full {
+            width: 100vw;
+        }
+    }
+
+    &.from-top {
+        top: 0;
+        padding-bottom: $panelMinMargin;
+
+        .enterFrom {
+            transform: translateY(-$translateInY);
+        }
+
+        .enterTo, .leaveFrom {
+            transform: translateY(0);
+        }
+
+        .leaveTo {
+            transform: translateY(-$translateOutY);
+        }
+    }
+
+    &.from-bottom {
+        bottom: 0;
+        padding: $panelMinMargin 0 0;
+
+        .enterFrom {
+            transform: translateY($translateInY);
+        }
+
+        .enterTo, .leaveFrom {
+            transform: translateY(0);
+        }
+
+        .leaveTo {
+            transform: translateY($translateOutY);
+        }
+    }
+
+    &.from-top, &.from-bottom {
+        width: 100vw;
+        left: 0;
+        right: 0;
+
+        &.size-default {
+            height: min(100vh, $defaultSize);
+        }
+
+        &.size-content {
+            height: auto;
+        }
+
+        &.size-full {
+            height: 100vh;
+        }
+    }
+}
+
+.panel {
+    position: relative;
+    height: 100%;
+    padding: $panelPaddingY $panelPaddingX;
+    background-color: var(--pte-colors-backgroundPrimary);
+    overflow: auto;
+    border: 1px solid transparent;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: $panelPaddingY;
+
+    &.enterFrom {
+        box-shadow: none;
+    }
+
+    &.enterTo, &.leaveFrom {
+        &.from-right {
+            border-left-color: var(--pte-borders-dropdown-color);
+            box-shadow: var(--pte-lighting-shallowLeft);
+        }
+
+        &.from-left {
+            border-right-color: var(--pte-borders-dropdown-color);
+            box-shadow: var(--pte-lighting-shallowRight);
+        }
+
+        &.from-top {
+            border-bottom-color: var(--pte-borders-dropdown-color);
+            box-shadow: var(--pte-lighting-shallowBottom);
+        }
+
+        &.from-bottom {
+            border-top-color: var(--pte-borders-dropdown-color);
+            box-shadow: var(--pte-lighting-shallowTop);
+        }
+    }
+
+    &.leaveTo {
+        box-shadow: none;
+    }
+}
+
+.closeButton {
+    position: absolute;
+    right: $panelPaddingX;
+    top: $panelPaddingY - 5px;
+}
+
+.paginationNav {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    font-size: 16px;
+
+    .closeButton {
+        position: relative;
+        right: 0;
+        top: 0;
+    }
+
+    .navButton {
+        padding: 2px;
+    }
+}
+
+.paginationButtons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+
+.enter {
+    transition: $duration var(--pte-animations-timing-easeOut);
+}
+
+.enterFrom, .enterFromOpacity {
+    opacity: 0;
+}
+
+.enterTo, .enterToOpacity {
+    opacity: 1;
+}
+
+.leave {
+    transition: $duration var(--pte-animations-timing-easeIn);
+}
+
+.leaveFrom, .leaveFromOpacity {
+    opacity: 1;
+}
+
+.leaveTo, .leaveToOpacity {
+    opacity: 0;
+}
+
+.paginationEnter {
+    transition: $paginationDuration var(--pte-animations-timing-easeInQuad);
+}
+
+.paginationLeave {
+    transition: $paginationDuration var(--pte-animations-timing-easeOutQuad);
+}

package/src/stories/drawer/Drawer.stories.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { memo, useState } from 'react';
+import { Drawer } from './Drawer';
+import { Button } from '../button';
+import { usePagination } from '../pagination';
+
+const meta: Meta<typeof Drawer> = {
+    title: 'Surfaces/Drawer',
+    component: Drawer,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+    args: {
+        title: 'Transaction details',
+        children: 'This was a transaction for $22.89 at Il Tramezzino in Beverly Hills, CA.',
+    },
+    render: (args) => {
+        const [isOpen, setIsOpen] = useState(false);
+        return (
+            <>
+                <Button
+                    onClick={() => setIsOpen(true)}
+                >
+                    View details
+                </Button>
+                <Drawer
+                    {...args}
+                    isOpen={isOpen}
+                    onClose={setIsOpen}
+                >
+                    {args.children}
+                </Drawer>
+            </>
+        );
+    },
+};
+
+export const Paginated: Story = {
+    args: {
+        title: 'Creation process',
+        children: [],
+    },
+    render: (args) => {
+        const [isOpen, setIsOpen] = useState(false);
+        const pages = ['step1', 'step2', 'step3'] as const;
+        const pagination = usePagination<typeof pages>('step1');
+
+        return (
+            <>
+                <Button
+                    onClick={() => setIsOpen(true)}
+                >
+                    Start process
+                </Button>
+                <Drawer
+                    {...args}
+                    isOpen={isOpen}
+                    onClose={setIsOpen}
+                    pagination={pagination}
+                >
+                    <div key="step1" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                        Step 1: Enter your name
+                        <Button
+                            onClick={() => pagination.open('step2')}
+                        >
+                            Go to step 2
+                        </Button>
+                        <Button
+                            onClick={() => pagination.open('step3')}
+                        >
+                            Go to step 3
+                        </Button>
+                    </div>
+                    <div key="step2" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                        Step 2: Enter your address
+                        <Button
+                            onClick={() => pagination.open('step3')}
+                        >
+                            Go to step 3
+                        </Button>
+                    </div>
+                    <div key="step3" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                        Step 3: Enter your credit card information
+                    </div>
+                </Drawer>
+            </>
+        );
+    },
+};