datocms-react-ui 0.3.24 → 0.3.28

package/src/Section/index.tsx

@@ -0,0 +1,104 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+
+type SectionProps = {
+  title: ReactNode;
+  children?: ReactNode;
+  highlighted?: boolean;
+  collapsible?: { isOpen: boolean; onToggle: () => void };
+  headerClassName?: string;
+  titleClassName?: string;
+  headerStyle?: CSSProperties;
+  titleStyle?: CSSProperties;
+};
+
+/**
+ * @example Basic usage
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <Section title="Section title">
+ *     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ *     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ *     aliquip ex ea commodo consequat.
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Highlighted
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <Section title="Section title" highlighted>
+ *     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ *     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ *     aliquip ex ea commodo consequat.
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <StateManager initial={true}>
+ *     {(isOpen, setOpen) => (
+ *       <Section
+ *         title="Section title"
+ *         collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
+ *       >
+ *         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ *         enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ *         nisi ut aliquip ex ea commodo consequat.
+ *       </Section>
+ *     )}
+ *   </StateManager>
+ * </Canvas>;
+ * ```
+ */
+export function Section({
+  title,
+  children,
+  highlighted,
+  collapsible,
+  headerClassName,
+  titleClassName,
+  headerStyle,
+  titleStyle,
+}: SectionProps): JSX.Element {
+  return (
+    <div
+      className={cn(s['Section'], { [s['Section--highlighted']]: highlighted })}
+    >
+      <div
+        className={cn(s['Section__header'], headerClassName)}
+        style={headerStyle}
+      >
+        <div
+          className={cn(
+            s['Section__title'],
+
+            titleClassName,
+          )}
+          style={titleStyle}
+        >
+          {collapsible && (
+            <button
+              type="button"
+              className={cn(s['Section__arrow'], {
+                [s['Section__arrow--is-open']]: collapsible.isOpen,
+              })}
+              onClick={collapsible.onToggle}
+            />
+          )}
+          <div className={s['Section__title__content']}>{title}</div>
+        </div>
+      </div>
+      {(!collapsible || collapsible.isOpen) && children}
+    </div>
+  );
+}

package/src/Section/styles.module.css

@@ -0,0 +1,100 @@
+.Section {
+  position: relative;
+}
+
+.Section--highlighted:before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  right: -30px;
+  bottom: -20px;
+  left: -30px;
+  box-shadow: 0 0 0 4px var(--accent-color);
+  border-radius: 4px;
+  animation: pageContentSectionHighligh 4s 0.25s ease-in-out forwards;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.Section__header {
+  margin-left: var(--negative-spacing-l);
+  margin-right: var(--negative-spacing-l);
+  margin-bottom: var(--spacing-l);
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: var(--border-color);
+    z-index: 1;
+  }
+}
+
+.Section__title {
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-bold);
+  margin-left: var(--spacing-m);
+  margin-right: var(--spacing-l);
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-m);
+  background-color: white;
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+}
+
+.Section__title__content {
+}
+
+.Section__arrow {
+  all: initial;
+  width: 15px;
+  align-self: stretch;
+  cursor: pointer;
+  margin-right: 0.3em;
+
+  &:before {
+    content: '';
+    position: absolute;
+    height: 0;
+    width: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid var(--base-body-color);
+    left: 14px;
+    top: 50%;
+    margin-top: -6px;
+    transition: transform 0.2s ease-out;
+    transform-origin: 50% 50%;
+  }
+
+  &:hover:before {
+    opacity: 0.7;
+  }
+}
+
+.Section__arrow--is-open:before {
+  transform: rotate(90deg);
+}
+
+@keyframes pageContentSectionHighligh {
+  0% {
+    box-shadow: 0 0 0 4px var(--accent-color),
+      0 0 0 4px rgba(var(--accent-color-rgb-components), 0.7);
+  }
+  15% {
+    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 80px transparent;
+  }
+  75% {
+    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 80px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 4px transparent, 0 0 0 80px transparent;
+  }
+}

package/src/Section/styles.module.css.json

@@ -0,0 +1 @@
+{"Section":"_Section_zh95u_1","Section--highlighted":"_Section--highlighted_zh95u_5","pageContentSectionHighligh":"_pageContentSectionHighligh_zh95u_1","Section__header":"_Section__header_zh95u_19","Section__title":"_Section__title_zh95u_38","Section__title__content":"_Section__title__content_zh95u_52","Section__arrow":"_Section__arrow_zh95u_55","Section__arrow--is-open":"_Section__arrow--is-open_zh95u_82"}

package/src/SelectField/index.tsx

@@ -0,0 +1,244 @@
+import React, { ReactNode } from 'react';
+import {
+  AsyncCreatableSelectInput,
+  AsyncCreatableSelectInputProps,
+  AsyncSelectInput,
+  AsyncSelectInputProps,
+  CreatableSelectInput,
+  CreatableSelectInputProps,
+  FieldError,
+  FieldHint,
+  FormLabel,
+  FormLabelProps,
+  SelectInput,
+  SelectInputProps,
+} from '..';
+import { GroupBase } from 'react-select';
+
+type SelectFieldProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: SelectInputProps<Option, IsMulti, Group>['value'];
+  onChange: SelectInputProps<Option, IsMulti, Group>['onChange'];
+  selectInputProps?: SelectInputProps<Option, IsMulti, Group>;
+};
+
+export function SelectField<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  placeholder,
+  formLabelProps,
+  value,
+  onChange,
+  selectInputProps,
+}: SelectFieldProps<Option, IsMulti, Group>): JSX.Element {
+  return (
+    <>
+      <FormLabel {...formLabelProps} htmlFor={id} required={required} error={!!error}>
+        {label}
+      </FormLabel>
+
+      <SelectInput<Option, IsMulti, Group>
+        {...selectInputProps}
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        error={!!error}
+      />
+
+      {error && <FieldError>{error}</FieldError>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+    </>
+  );
+}
+
+type AsyncSelectFieldProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: AsyncSelectInputProps<Option, IsMulti, Group>['value'];
+  onChange: AsyncSelectInputProps<Option, IsMulti, Group>['onChange'];
+  selectInputProps?: AsyncSelectInputProps<Option, IsMulti, Group>;
+};
+
+export function AsyncSelectField<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  placeholder,
+  formLabelProps,
+  value,
+  onChange,
+  selectInputProps,
+}: AsyncSelectFieldProps<Option, IsMulti, Group>): JSX.Element {
+  return (
+    <>
+      <FormLabel {...formLabelProps} htmlFor={id} required={required} error={!!error}>
+        {label}
+      </FormLabel>
+
+      <AsyncSelectInput<Option, IsMulti, Group>
+        {...selectInputProps}
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        error={!!error}
+      />
+
+      {error && <FieldError>{error}</FieldError>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+    </>
+  );
+}
+
+type CreatableSelectFieldProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: CreatableSelectInputProps<Option, IsMulti, Group>['value'];
+  onChange: CreatableSelectInputProps<Option, IsMulti, Group>['onChange'];
+  selectInputProps?: CreatableSelectInputProps<Option, IsMulti, Group>;
+};
+
+export function CreatableSelectField<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  placeholder,
+  formLabelProps,
+  value,
+  onChange,
+  selectInputProps,
+}: CreatableSelectFieldProps<Option, IsMulti, Group>): JSX.Element {
+  return (
+    <>
+      <FormLabel {...formLabelProps} htmlFor={id} required={required} error={!!error}>
+        {label}
+      </FormLabel>
+
+      <CreatableSelectInput<Option, IsMulti, Group>
+        {...selectInputProps}
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        error={!!error}
+      />
+
+      {error && <FieldError>{error}</FieldError>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+    </>
+  );
+}
+
+type AsyncCreatableSelectFieldProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: AsyncCreatableSelectInputProps<Option, IsMulti, Group>['value'];
+  onChange: AsyncCreatableSelectInputProps<Option, IsMulti, Group>['onChange'];
+  selectInputProps?: AsyncCreatableSelectInputProps<Option, IsMulti, Group>;
+};
+
+export function AsyncCreatableSelectField<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  placeholder,
+  formLabelProps,
+  value,
+  onChange,
+  selectInputProps,
+}: AsyncCreatableSelectFieldProps<Option, IsMulti, Group>): JSX.Element {
+  return (
+    <>
+      <FormLabel {...formLabelProps} htmlFor={id} required={required} error={!!error}>
+        {label}
+      </FormLabel>
+
+      <AsyncCreatableSelectInput<Option, IsMulti, Group>
+        {...selectInputProps}
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        error={!!error}
+      />
+
+      {error && <FieldError>{error}</FieldError>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+    </>
+  );
+}

package/src/SelectInput/index.tsx

@@ -0,0 +1,233 @@
+import React, { useMemo } from 'react';
+import RawSelect, {
+  Props as RawSelectProps,
+  GroupBase,
+  StylesConfig,
+  ThemeConfig,
+} from 'react-select';
+import RawAsyncSelect, { AsyncProps } from 'react-select/async';
+import RawAsyncCreatableSelect, {
+  AsyncCreatableProps,
+} from 'react-select/async-creatable';
+import RawCreatableSelect, { CreatableProps } from 'react-select/creatable';
+
+const themeConfig: ThemeConfig = (existing) => ({
+  ...existing,
+  borderRadius: 0,
+  colors: {
+    ...existing.colors,
+    primary25: 'var(--semi-transparent-accent-color)',
+    // disabled
+    neutral10: 'var(--border-color)',
+    // normal
+    neutral20: 'var(--border-color)',
+    // focused
+    primary: 'var(--accent-color)',
+    // hover
+    neutral30: 'var(--darker-border-color)',
+  },
+});
+
+const useStyles = (isDisabled?: boolean, error?: boolean) => {
+  return useMemo<StylesConfig>(() => {
+    return {
+      placeholder: (provided) => ({
+        ...provided,
+        color: 'var(--placeholder-body-color)',
+      }),
+      container: (provided) => {
+        return {
+          ...provided,
+          fontSize: 'inherit',
+        };
+      },
+
+      control: (provided, { isFocused }) => {
+        let result = provided;
+
+        result = {
+          ...result,
+          minHeight: 40,
+        };
+
+        if (isFocused) {
+          return {
+            ...result,
+            borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
+            backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white',
+            boxShadow: `0 0 0 3px ${
+              error
+                ? 'rgba(var(--alert-color-rgb-components), 0.2)'
+                : 'var(--semi-transparent-accent-color)'
+            }`,
+            '&:hover': {
+              borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
+            },
+          };
+        }
+
+        return {
+          ...result,
+          borderColor: error ? 'var(--alert-color)' : 'var(--border-color)',
+          backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white',
+          '&:hover': {
+            borderColor: error
+              ? 'var(--alert-color)'
+              : 'var(--darker-border-color)',
+          },
+        };
+      },
+      multiValueRemove: (provided) => ({
+        ...provided,
+        cursor: 'pointer',
+      }),
+      menu: (provided) => {
+        return {
+          ...provided,
+          zIndex: 1000,
+          minWidth: 250,
+        };
+      },
+      input: (provided) => {
+        const result = {
+          ...provided,
+          boxShadow: 'none',
+          'input:focus': {
+            boxShadow: 'none',
+          },
+        };
+
+        return result;
+      },
+      multiValue: (provided) => {
+        return {
+          ...provided,
+          zIndex: 100,
+          backgroundColor: 'var(--light-color)',
+        };
+      },
+      multiValueLabel: (provided) => ({
+        ...provided,
+        fontSize: 'inherit',
+        padding: 3,
+      }),
+    };
+  }, [isDisabled, error]);
+};
+
+type ErrorProp = { error?: boolean };
+
+export type SelectInputProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = Omit<RawSelectProps<Option, IsMulti, Group>, 'theme' | 'styles'> &
+  ErrorProp;
+
+export function SelectInput<
+  Option = unknown,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  isDisabled,
+  error,
+  ...other
+}: SelectInputProps<Option, IsMulti, Group>): JSX.Element {
+  const styles = useStyles(isDisabled, error);
+
+  return (
+    <RawSelect<Option, IsMulti, Group>
+      {...other}
+      isDisabled={isDisabled}
+      theme={themeConfig}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      styles={styles as any}
+    />
+  );
+}
+
+export type AsyncSelectInputProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = Omit<AsyncProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
+
+export function AsyncSelectInput<
+  Option = unknown,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  isDisabled,
+  error,
+  ...other
+}: AsyncSelectInputProps<Option, IsMulti, Group>): JSX.Element {
+  const styles = useStyles(isDisabled, error);
+
+  return (
+    <RawAsyncSelect<Option, IsMulti, Group>
+      {...other}
+      isDisabled={isDisabled}
+      theme={themeConfig}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      styles={styles as any}
+    />
+  );
+}
+
+export type CreatableSelectInputProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = Omit<CreatableProps<Option, IsMulti, Group>, 'theme' | 'styles'> &
+  ErrorProp;
+
+export function CreatableSelectInput<
+  Option = unknown,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  isDisabled,
+  error,
+  ...other
+}: CreatableSelectInputProps<Option, IsMulti, Group>): JSX.Element {
+  const styles = useStyles(isDisabled, error);
+
+  return (
+    <RawCreatableSelect<Option, IsMulti, Group>
+      {...other}
+      isDisabled={isDisabled}
+      theme={themeConfig}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      styles={styles as any}
+    />
+  );
+}
+
+export type AsyncCreatableSelectInputProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+> = Omit<AsyncCreatableProps<Option, IsMulti, Group>, 'theme' | 'styles'> &
+  ErrorProp;
+
+export function AsyncCreatableSelectInput<
+  Option = unknown,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  isDisabled,
+  error,
+  ...other
+}: AsyncCreatableSelectInputProps<Option, IsMulti, Group>): JSX.Element {
+  const styles = useStyles(isDisabled, error);
+
+  return (
+    <RawAsyncCreatableSelect<Option, IsMulti, Group>
+      {...other}
+      isDisabled={isDisabled}
+      theme={themeConfig}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      styles={styles as any}
+    />
+  );
+}