@marigold/components 0.0.1 → 0.2.0

package/src/Radio/Radio.tsx

@@ -1,42 +1,117 @@
 import React from 'react';
-import { Box, system } from '@marigold/system';
-import { CircleUnchecked, CircleChecked } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
+import { Exclamation } from '@marigold/icons';
 
-type RadioProps = {};
+import { Box } from '../Box';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
 
-export const Radio = system<RadioProps, 'input'>(
-  ({ variant = 'radio', ...props }) => {
+import { RadioChecked, RadioUnchecked } from './RadioIcons';
+
+// Radio Icon
+// ---------------
+type RadioIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
+
+const RadioIcon: React.FC<RadioIconProps> = ({
+  variant,
+  checked,
+  disabled,
+  error,
+}) => {
+  if (checked) {
     return (
-      <Box css={{ display: 'inline-block' }}>
-        <Box
-          as="input"
-          type="radio"
-          {...props}
-          css={{
-            position: 'absolute',
-            opacity: 0,
-            zIndex: -1,
-            width: 1,
-            height: 1,
-            overflow: 'hidden',
-          }}
-        />
-        <Box
-          as={props.checked ? CircleChecked : CircleUnchecked}
-          aria-hidden="true"
-          themeSection="form"
-          variant={variant}
-          css={{
-            mr: 2,
-            verticalAlign: 'middle',
-            ':hover': { cursor: 'pointer' },
-            'input:disabled ~ &': {
-              color: 'muted',
-              cursor: 'not-allowed',
-            },
-          }}
-        />
-      </Box>
+      <Box as={RadioChecked} variant={`radio.${variant}`} disabled={disabled} />
     );
   }
+  return (
+    <Box
+      as={RadioUnchecked}
+      variant={`radio.${variant}`}
+      disabled={disabled}
+      error={error}
+    />
+  );
+};
+
+// Radio Input
+// ---------------
+type RadioInputProps = {
+  variant?: string;
+  error?: boolean;
+} & ComponentProps<'input'>;
+
+const RadioInput: React.FC<RadioInputProps> = ({
+  className,
+  variant = 'default',
+  error,
+  ...props
+}) => (
+  <Box display="inline-block" className={className}>
+    <Box
+      as="input"
+      type="radio"
+      css={{
+        position: 'absolute',
+        opacity: 0,
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }}
+      {...props}
+    />
+    <RadioIcon
+      checked={props.checked}
+      variant={variant}
+      disabled={props.disabled}
+      error={error}
+    />
+  </Box>
 );
+
+// Radio
+// ---------------
+export type RadioProps = {
+  id: string;
+  label?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+} & RadioInputProps;
+
+export const Radio: React.FC<RadioProps> = ({
+  label,
+  required,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  if (label) {
+    return (
+      <>
+        <Label
+          htmlFor={props.id}
+          required={required}
+          variant={props.disabled ? 'disabled' : 'inline'}
+        >
+          <Box as={RadioInput} pr="8px" error={error} {...props} />
+          {label}
+        </Label>
+        {error && errorMessage && (
+          <ValidationMessage>
+            <Exclamation size={16} />
+            {errorMessage}
+          </ValidationMessage>
+        )}
+      </>
+    );
+  }
+
+  return <RadioInput {...props} />;
+};

package/src/Radio/RadioIcons.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SVG } from '@marigold/icons';
+
+import { Box } from '../Box';
+
+export const RadioChecked = ({ disabled = false, ...props }) => (
+  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
+    <Box
+      as="circle"
+      cx="8"
+      cy="16"
+      r="7.5"
+      variant={disabled ? 'radio.checked.disabled' : 'radio.checked'}
+    />
+    <Box as="circle" cx="8" cy="16" r="3" variant="radio.checked.circle" />
+  </SVG>
+);
+
+export const RadioUnchecked = ({
+  disabled = false,
+  error = false,
+  ...props
+}) => (
+  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
+    <Box
+      as="circle"
+      cx="8"
+      cy="16"
+      r="7.5"
+      variant={
+        disabled
+          ? 'radio.unchecked.disabled'
+          : error
+          ? 'radio.unchecked.error'
+          : 'radio.unchecked'
+      }
+    />
+  </SVG>
+);

package/src/Select/ListBox.tsx

@@ -0,0 +1,39 @@
+import React, { useRef } from 'react';
+import { useListBox } from '@react-aria/listbox';
+import type { AriaListBoxOptions } from '@react-aria/listbox';
+import type { ListState } from '@react-stately/list';
+
+import { Box } from '../Box';
+import { Option } from './Option';
+import { ListBoxSection } from './ListBoxSection';
+
+interface ListBoxProps extends AriaListBoxOptions<unknown> {
+  state: ListState<unknown>;
+  error?: boolean;
+}
+
+export const ListBox = (props: ListBoxProps) => {
+  const ref = useRef<HTMLUListElement>(null);
+  const { state, error } = props;
+  const { listBoxProps } = useListBox(props, state, ref);
+
+  return (
+    <Box
+      as="ul"
+      css={{
+        listStyle: 'none',
+      }}
+      {...listBoxProps}
+      variant={error ? 'select.listbox.error' : 'select.listbox'}
+      ref={ref}
+    >
+      {[...state.collection].map(item =>
+        item.type === 'section' ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        )
+      )}
+    </Box>
+  );
+};

package/src/Select/ListBoxSection.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useListBoxSection } from '@react-aria/listbox';
+import type { ListState } from '@react-stately/list';
+import type { Node } from '@react-types/shared';
+
+import { Box } from '../Box';
+import { Option } from './Option';
+
+interface SectionProps {
+  section: Node<unknown>;
+  state: ListState<unknown>;
+}
+
+export const ListBoxSection = ({ section, state }: SectionProps) => {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    'aria-label': section['aria-label'],
+  });
+
+  return (
+    <Box
+      as="li"
+      {...itemProps}
+      css={{
+        cursor: 'not-allowed',
+      }}
+    >
+      {section.rendered && (
+        <Box as="span" {...headingProps} variant={'select.section'}>
+          {section.rendered}
+        </Box>
+      )}
+      <Box as="ul" {...groupProps}>
+        {[...section.childNodes].map(node => (
+          <Option key={node.key} item={node} state={state} />
+        ))}
+      </Box>
+    </Box>
+  );
+};

package/src/Select/Option.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { ListState } from '@react-stately/list';
+import type { Node } from '@react-types/shared';
+import { useOption } from '@react-aria/listbox';
+
+import { Box } from '../Box';
+
+interface OptionProps {
+  item: Node<unknown>;
+  state: ListState<unknown>;
+}
+
+export const Option = ({ item, state }: OptionProps) => {
+  const ref = useRef<HTMLLIElement>(null);
+  const [disabled, setDisabled] = useState(false);
+  const { optionProps, isSelected } = useOption(
+    {
+      key: item.key,
+    },
+    state,
+    ref
+  );
+
+  useEffect(() => {
+    for (const key of state.disabledKeys.values()) {
+      if (key === item.key) {
+        setDisabled(true);
+      }
+    }
+  }, [state.disabledKeys, item.key]);
+
+  return (
+    <Box
+      as="li"
+      {...optionProps}
+      ref={ref}
+      variant={
+        isSelected
+          ? 'select.option.selected'
+          : disabled
+          ? 'select.option.disabled'
+          : 'select.option'
+      }
+    >
+      {item.rendered}
+    </Box>
+  );
+};

package/src/Select/Popover.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, RefObject } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import {
+  DismissButton,
+  OverlayContainer,
+  useModal,
+  useOverlay,
+} from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
+
+import { Box } from '../Box';
+
+interface PopoverProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  ref?: React.Ref<HTMLDivElement>;
+  className?: string;
+}
+
+export const Popover: React.FC<PopoverProps> = forwardRef(
+  ({ children, className, isOpen, onClose, ...otherProps }, ref) => {
+    // Handle events that should cause the popup to close,
+    const { overlayProps } = useOverlay(
+      {
+        isOpen,
+        onClose,
+        shouldCloseOnBlur: true,
+        isDismissable: true,
+      },
+      ref as RefObject<HTMLElement>
+    );
+    // Hide content outside the modal from screen readers.
+    const { modalProps } = useModal();
+
+    return (
+      <OverlayContainer>
+        <FocusScope restoreFocus>
+          <Box
+            {...mergeProps(overlayProps, otherProps, modalProps)}
+            className={className}
+            ref={ref}
+          >
+            {children}
+            <DismissButton onDismiss={onClose} />
+          </Box>
+        </FocusScope>
+      </OverlayContainer>
+    );
+  }
+);

package/src/Select/Select.stories.mdx

@@ -1,43 +1,78 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Label, Select } from '@marigold/components';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Select } from './Select';
+import { Item } from '@marigold/components';
 
-<Meta title="Components/Form/Select" />
+<Meta
+  title="Components/Select"
+  argTypes={{
+    placeholder: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Select an option',
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+    width: {
+      control: 'number',
+    },
+  }}
+/>
 
 # Select
 
-## Description
+export const Template = args => (
+  <Select label="Favorite Color" htmlFor="id" {...args}>
+    {/* Storybook crashes with imported <Item> component
+      <Item>Red</Item>
+      <Item>Orange</Item>
+      <Item>Yellow</Item> */}
+  </Select>
+);
 
-Dropdown for selecting a value among different options.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Import
-
-```tsx
-import { Select } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Select">
-    <Label htmlFor="select">
-      Dropdown
-      <Select id="select">
-        <option selected>Choose here</option>
-        <option>Hi</option>
-        <option>Hey</option>
-        <option>Blubb</option>
-      </Select>
-    </Label>
-  </Story>
-  <Story name="Select disabled">
-    <Label htmlFor="select2">
-      Dropdown disabled
-      <Select disabled>
-        <option selected>Can't choose here</option>
-        <option>Hi</option>
-        <option>Hey</option>
-        <option>Blubb</option>
-      </Select>
-    </Label>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />