@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.5b114d4

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { DropdownMenu } from './DropdownMenu';
+import { Button } from '../Buttons';
+
+const StorybookDropdownMenu = () => {
+  return (
+    <DropdownMenu.Root defaultOpen>
+      <DropdownMenu.Trigger asChild>
+        <Button>Customise options</Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content sideOffset={4} collisionPadding={8}>
+        <DropdownMenu.Viewport>
+          <DropdownMenu.Item>
+            <span className='grow'>New Tab</span>
+            <span className='opacity-50'>⌘+T</span>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            <span className='grow'>New Window</span>
+            <span className='opacity-50'>⌘+N</span>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item disabled>
+            <span className='grow'>New Private Window</span>
+            <span className='opacity-50'>⇧+⌘+N</span>
+          </DropdownMenu.Item>
+          {/* <DropdownMenu.Sub> */}
+          {/*  <DropdownMenu.SubTrigger> */}
+          {/*    More Tools */}
+          {/*    <div> */}
+          {/*      <ChevronRightIcon /> */}
+          {/*    </div> */}
+          {/*  </DropdownMenu.SubTrigger> */}
+          {/*  <DropdownMenu.Portal> */}
+          {/*    <DropdownMenu.SubContent sideOffset={2} alignOffset={-5}> */}
+          {/*      <DropdownMenu.Item> */}
+          {/*        Save Page As… <div>⌘+S</div> */}
+          {/*      </DropdownMenu.Item> */}
+          {/*      <DropdownMenu.Item>Create Shortcut…</DropdownMenu.Item> */}
+          {/*      <DropdownMenu.Item>Name Window…</DropdownMenu.Item> */}
+          {/*      <DropdownMenu.Separator /> */}
+          {/*      <DropdownMenu.Item>Developer Tools</DropdownMenu.Item> */}
+          {/*    </DropdownMenu.SubContent> */}
+          {/*  </DropdownMenu.Portal> */}
+          {/* </DropdownMenu.Sub> */}
+
+          {/* <DropdownMenu.Separator /> */}
+
+          {/* <DropdownMenu.CheckboxItem checked={bookmarksChecked} onCheckedChange={setBookmarksChecked}> */}
+          {/*  <DropdownMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </DropdownMenu.ItemIndicator> */}
+          {/*  Show Bookmarks <div>⌘+B</div> */}
+          {/* </DropdownMenu.CheckboxItem> */}
+          {/* <DropdownMenu.CheckboxItem checked={urlsChecked} onCheckedChange={setUrlsChecked}> */}
+          {/*  <DropdownMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </DropdownMenu.ItemIndicator> */}
+          {/*  Show Full URLs */}
+          {/* </DropdownMenu.CheckboxItem> */}
+
+          <DropdownMenu.Separator />
+
+          <DropdownMenu.GroupLabel>People</DropdownMenu.GroupLabel>
+          {/* <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}> */}
+          {/*  <DropdownMenu.RadioItem value='pedro'> */}
+          {/*    <DropdownMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </DropdownMenu.ItemIndicator> */}
+          {/*    Pedro Duarte */}
+          {/*  </DropdownMenu.RadioItem> */}
+          {/*  <DropdownMenu.RadioItem value='colm'> */}
+          {/*    <DropdownMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </DropdownMenu.ItemIndicator> */}
+          {/*    Colm Tuite */}
+          {/*  </DropdownMenu.RadioItem> */}
+          {/* </DropdownMenu.RadioGroup> */}
+        </DropdownMenu.Viewport>
+
+        <DropdownMenu.Arrow />
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};
+
+export default {
+  component: StorybookDropdownMenu,
+};
+
+export const Default = {
+  args: {},
+  parameters: {
+    chromatic: { delay: 1600 },
+  },
+};

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,171 @@
+//
+// Copyright 2023 DXOS.org
+//
+import {
+  Root as DropdownMenuRootPrimitive,
+  type DropdownMenuProps as DropdownMenuRootPrimitiveProps,
+  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
+  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,
+  DropdownMenuPortal as DropdownMenuPortalPrimitive,
+  type DropdownMenuPortalProps as DropdownMenuPortalPrimitiveProps,
+  DropdownMenuContent as DropdownMenuContentPrimitive,
+  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,
+  DropdownMenuArrow as DropdownMenuArrowPrimitive,
+  type DropdownMenuArrowProps as DropdownMenuArrowPrimitiveProps,
+  DropdownMenuGroup as DropdownMenuGroupPrimitive,
+  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,
+  DropdownMenuItem as DropdownMenuItemPrimitive,
+  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,
+  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,
+  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,
+  DropdownMenuLabel as DropdownMenuLabelPrimitive,
+  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,
+} from '@radix-ui/react-dropdown-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type DropdownMenuRootProps = DropdownMenuRootPrimitiveProps;
+
+const DropdownMenuRoot = DropdownMenuRootPrimitive;
+
+type DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;
+
+const DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
+
+type DropdownMenuPortalProps = DropdownMenuPortalPrimitiveProps;
+
+const DropdownMenuPortal = DropdownMenuPortalPrimitive;
+
+type DropdownMenuContentProps = ThemedClassName<DropdownMenuContentPrimitiveProps> & { constrainBlockSize?: boolean };
+
+const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuContentPrimitive
+        sideOffset={4}
+        collisionPadding={8}
+        {...props}
+        className={tx('dropdownMenu.content', 'dropdown-menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </DropdownMenuContentPrimitive>
+    );
+  },
+);
+
+type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root
+        {...props}
+        className={tx('dropdownMenu.viewport', 'dropdown-menu__viewport', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+type DropdownMenuArrowProps = ThemedClassName<DropdownMenuArrowPrimitiveProps>;
+
+const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuArrowPrimitive
+        {...props}
+        className={tx('dropdownMenu.arrow', 'dropdown-menu__arrow', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;
+
+const DropdownMenuGroup = DropdownMenuGroupPrimitive;
+
+type DropdownMenuItemProps = ThemedClassName<DropdownMenuItemPrimitiveProps>;
+
+const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuItemPrimitive
+        {...props}
+        className={tx('dropdownMenu.item', 'dropdown-menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuSeparatorPrimitiveProps>;
+
+const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuSeparatorPrimitive
+        {...props}
+        className={tx('dropdownMenu.separator', 'dropdown-menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuLabelPrimitiveProps>;
+
+const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuLabelPrimitive
+        {...props}
+        className={tx('dropdownMenu.groupLabel', 'dropdown-menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel,
+};
+
+export type {
+  DropdownMenuRootProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuPortalProps,
+  DropdownMenuContentProps,
+  DropdownMenuViewportProps,
+  DropdownMenuArrowProps,
+  DropdownMenuGroupProps,
+  DropdownMenuItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuGroupLabelProps,
+};

package/src/{layouts/PanelPopover → components/DropdownMenu}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './PanelPopover';
+export * from './DropdownMenu';

package/src/components/ElevationProvider/ElevationProvider.tsx

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { createContext, type PropsWithChildren } from 'react';
+
+import { type Elevation } from '@dxos/react-ui-types';
+
+export interface ElevationContextValue {
+  elevation?: Elevation;
+}
+
+export type ElevationProviderProps = PropsWithChildren<{
+  elevation?: Elevation;
+}>;
+
+export const ElevationContext = createContext<ElevationContextValue>({ elevation: 'base' });
+
+export const ElevationProvider = ({ elevation, children }: ElevationProviderProps) => (
+  <ElevationContext.Provider value={{ elevation }}>{children}</ElevationContext.Provider>
+);

package/src/components/ElevationProvider/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './ElevationProvider';

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,199 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { type MessageValence } from '@dxos/react-ui-types';
+
+import { Input } from './Input';
+
+type StoryInputProps = Partial<{
+  label: string;
+  placeholder: string;
+  disabled: boolean;
+  description: string;
+  labelVisuallyHidden: boolean;
+  descriptionVisuallyHidden: boolean;
+  type: 'default' | 'pin' | 'textarea' | 'checkbox' | 'switch';
+  validationMessage: string;
+  validationValence: MessageValence;
+}>;
+
+const StoryInput = ({
+  type = 'default',
+  label,
+  description,
+  labelVisuallyHidden,
+  descriptionVisuallyHidden,
+  validationValence,
+  validationMessage,
+  ...props
+}: StoryInputProps) => {
+  // TODO(thure): Implement
+  return (
+    <Input.Root {...{ validationValence }}>
+      <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
+      {type === 'pin' && <Input.PinInput {...props} />}
+      {type === 'textarea' && <Input.TextArea {...props} />}
+      {type === 'checkbox' && <Input.Checkbox {...props} />}
+      {type === 'switch' && <Input.Switch {...props} />}
+      {type === 'default' && <Input.TextInput {...props} />}
+      <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
+        {validationMessage && (
+          <>
+            <Input.Validation>{validationMessage}</Input.Validation>{' '}
+          </>
+        )}
+        <Input.Description>{description}</Input.Description>
+      </Input.DescriptionAndValidation>
+    </Input.Root>
+  );
+};
+
+export default {
+  component: StoryInput,
+  // TODO(thure): Refactor
+  argTypes: {
+    label: { control: 'text' },
+    description: { control: 'text' },
+    validationMessage: { control: 'text' },
+    validationValence: {
+      control: 'select',
+      options: ['success', 'info', 'warning', 'error'],
+    },
+    type: {
+      control: 'select',
+      options: ['default', 'textarea', 'pin'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Hello',
+    placeholder: 'This is an input',
+    disabled: false,
+    description: undefined,
+    labelVisuallyHidden: false,
+    descriptionVisuallyHidden: false,
+    validationMessage: '',
+    validationValence: undefined,
+    length: 6,
+  },
+};
+
+export const DensityFine = {
+  args: {
+    label: 'This is an Input with a density value of ‘fine’',
+    placeholder: 'This is a density:fine input',
+    disabled: false,
+    description: undefined,
+    labelVisuallyHidden: false,
+    descriptionVisuallyHidden: false,
+    validationMessage: '',
+    validationValence: undefined,
+    length: 6,
+    density: 'fine',
+  },
+};
+
+export const Subdued = {
+  args: {
+    label: 'Hello',
+    placeholder: 'This is a subdued input',
+    disabled: false,
+    description: undefined,
+    labelVisuallyHidden: false,
+    descriptionVisuallyHidden: false,
+    validationMessage: '',
+    validationValence: undefined,
+    length: 6,
+    variant: 'subdued',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Disabled',
+    placeholder: 'This is a disabled input',
+    disabled: true,
+  },
+};
+
+export const LabelVisuallyHidden = {
+  args: {
+    label: 'The label is for screen readers',
+    labelVisuallyHidden: true,
+    placeholder: 'The label for this input exists but is only read by screen readers',
+  },
+};
+
+export const InputWithDescription = {
+  args: {
+    label: 'Described input',
+    placeholder: 'This input has an accessible description',
+    description: 'This helper text is accessibly associated with the input.',
+  },
+};
+
+export const InputWithErrorAndDescription = {
+  args: {
+    label: 'Described invalid input',
+    placeholder: 'This input has both an accessible description and a validation error',
+    description: 'This description is identified separately in the accessibility tree.',
+    validationValence: 'error',
+    validationMessage: 'The input has an error.',
+  },
+};
+
+export const InputWithValidationAndDescription = {
+  args: {
+    label: 'Described input with validation message',
+    placeholder: 'This input is styled to express a validation valence',
+    description: 'This description is extra.',
+    validationValence: 'success',
+    validationMessage: 'This validation message is really part of the description.',
+  },
+};
+
+export const TextArea = {
+  args: {
+    label: 'This input is a text area input',
+    type: 'textarea',
+    description: 'Type a long paragraph',
+    placeholder: 'Lorem ipsum dolor sit amet',
+  },
+};
+
+export const PinInput = {
+  args: {
+    label: 'This input is a PIN-style input',
+    type: 'pin',
+    length: 6,
+    description: 'Type in secret you received',
+    placeholder: '••••••',
+  },
+};
+
+export const Checkbox = {
+  args: {
+    label: 'This is a checkbox',
+    type: 'checkbox',
+    description: 'It’s checked, indeterminate, or unchecked',
+    size: 5,
+    weight: 'bold',
+  },
+};
+
+export const Switch = {
+  args: {
+    label: 'This is a switch',
+    type: 'switch',
+    description: 'It’s checked, indeterminate, or unchecked',
+    size: 5,
+    weight: 'bold',
+  },
+};