@marigold/components 0.3.0 → 0.4.0

package/src/Radio/Radio.test.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Radio } from './Radio';
-import { ThemeProvider } from '@marigold/system';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 2,
-  },
-  radio: {
-    __default: {
-      m: 'small',
-    },
-  },
-  label: {
-    above: {
-      fontSize: '8px',
-    },
-    inline: {
-      fontSize: '14px',
-    },
-  },
-};
-
-test('supports default labelVariant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Radio id="test" title="checkbox" label="label" />
-    </ThemeProvider>
-  );
-
-  const label = screen.getByText(/label/);
-  expect(label).toHaveStyle(`font-size: 14px`);
-});
-
-test('supports other labelVariant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Radio id="test" title="checkbox" label="label" labelVariant="above" />
-    </ThemeProvider>
-  );
-
-  const label = screen.getByText(/label/);
-  expect(label).toHaveStyle(`font-size: 8px`);
-});
-
-test('supports label prop', () => {
-  render(<Radio label="Test" id="test" title="radio" />);
-
-  const radioLabel = screen.getByText(/Test/);
-  expect(radioLabel).toBeDefined();
-});
-
-test('supports required prop and renders required icon', () => {
-  render(<Radio label="Test" id="test" required title="radio" />);
-
-  const label = screen.getByText(/Test/);
-  expect(label.nextSibling).toContainHTML('path d="M10.8');
-});
-
-test('supports default type', () => {
-  render(<Radio id="radio" title="radio" />);
-
-  const radio = screen.getByTitle(/radio/);
-  expect(radio.getAttribute('type')).toEqual('radio');
-});
-
-test('renders <input> element', () => {
-  render(<Radio id="radio" title="radio" />);
-
-  const radio = screen.getByTitle(/radio/);
-  expect(radio instanceof HTMLInputElement).toBeTruthy();
-});
-
-test('supports disabled prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" label="label" disabled />
-    </ThemeProvider>
-  );
-
-  const radio = screen.getByTitle(/radio/);
-  expect(radio).toHaveAttribute('disabled');
-});
-
-test('supports error and errorMessage prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" label="test" error errorMessage="error" />
-    </ThemeProvider>
-  );
-
-  const errorMessage = screen.getByText(/error/);
-  expect(errorMessage).toBeDefined();
-});
-
-test('supports checked radio', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" onChange={() => {}} checked />
-    </ThemeProvider>
-  );
-
-  const radio = screen.getByTitle(/radio/);
-  expect(radio).toBeDefined();
-});
-
-test('supports checked and disabled radio', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" onChange={() => {}} checked disabled />
-    </ThemeProvider>
-  );
-
-  const radio = screen.getByTitle(/radio/);
-  expect(radio).toBeDefined();
-  expect(radio).toHaveAttribute('disabled');
-});

package/src/Radio/Radio.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-import { Exclamation } from '@marigold/icons';
-
-import { Box } from '../Box';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
-
-import { RadioChecked, RadioUnchecked } from './RadioIcons';
-
-// Theme Extension
-// ---------------
-export interface RadioThemeExtension<Value> {
-  radio?: {
-    [key: string]: Value;
-  };
-}
-
-// 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 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 = '',
-  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;
-  labelVariant?: string;
-  error?: boolean;
-  errorMessage?: string;
-} & RadioInputProps;
-
-export const Radio: React.FC<RadioProps> = ({
-  label,
-  required,
-  labelVariant = 'inline',
-  error,
-  errorMessage,
-  ...props
-}) => {
-  if (label) {
-    return (
-      <>
-        <Label
-          htmlFor={props.id}
-          required={required}
-          variant={labelVariant}
-          color={props.disabled ? 'disabled' : 'text'}
-        >
-          <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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { SVG } from '@marigold/system';
-
-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/Radio/index.ts

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

package/src/Select/ListBox.tsx

@@ -1,40 +0,0 @@
-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"
-      p="none"
-      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

@@ -1,40 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Select } from './Select';
-import { Item } from '@marigold/components';
-
-export default {
-  title: 'Components/Select',
-  argTypes: {
-    label: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'Select label',
-        },
-      },
-      defaultValue: 'Favorite Color',
-    },
-    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',
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Select> = args => (
-  <Select {...args}>
-    <Item>Red</Item>
-    <Item>Orange</Item>
-    <Item>Yellow</Item>
-  </Select>
-);