datocms-react-ui 0.3.27 → 0.3.31

package/src/SidebarPanel/index.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames';
+import React, { ReactNode, useState } from 'react';
+import s from './styles.module.css.json';
+
+function ChevronDownIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      width="1em"
+      height="1em"
+    >
+      <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
+    </svg>
+  );
+}
+
+function ChevronUpIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      width="1em"
+      height="1em"
+    >
+      <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
+    </svg>
+  );
+}
+
+export type SidebarPanelProps = {
+  title?: ReactNode;
+  startOpen?: boolean;
+  children: ReactNode;
+  noPadding?: boolean;
+};
+
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex' }}>
+ *     <div
+ *       style={{
+ *         width: '300px',
+ *         borderRight: '1px solid var(--border-color)',
+ *       }}
+ *     >
+ *       <SidebarPanel title="Default">Content</SidebarPanel>
+ *       <SidebarPanel title="Start open" startOpen>
+ *         Content
+ *       </SidebarPanel>
+ *       <SidebarPanel title="Content with no padding" noPadding>
+ *         Content
+ *       </SidebarPanel>
+ *     </div>
+ *     <div
+ *       style={{
+ *         flex: '1',
+ *         display: 'flex',
+ *         justifyContent: 'center',
+ *         alignItems: 'center',
+ *         background: 'var(--light-bg-color)',
+ *       }}
+ *     >
+ *       Main content
+ *     </div>
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function SidebarPanel({
+  startOpen = false,
+  title,
+  children,
+  noPadding,
+}: SidebarPanelProps): JSX.Element {
+  const [open, setOpen] = useState(startOpen);
+
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <div className={s['SidebarPanel']}>
+      {title && (
+        <button
+          type="button"
+          className={s['SidebarPanel__header']}
+          onClick={handleToggle}
+        >
+          <div className={s['SidebarPanel__header__title']}>{title}</div>
+          <div className={s['SidebarPanel__header__chevron']}>
+            {open ? <ChevronDownIcon /> : <ChevronUpIcon />}
+          </div>
+        </button>
+      )}
+      {open && (
+        <div
+          className={classNames(s['SidebarPanel__content'], {
+            [s['SidebarPanel__content--no-padding']]: noPadding,
+          })}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/SidebarPanel/styles.module.css

@@ -0,0 +1,49 @@
+.SidebarPanel {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.SidebarPanel__header {
+  font-family: inherit;
+  cursor: pointer;
+  line-height: inherit;
+  background-color: white;
+  color: var(--base-body-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  font-size: inherit;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: var(--light-bg-color);
+  user-select: none;
+}
+
+.SidebarPanel__header:hover,
+.SidebarPanel__header:focus {
+  background-color: var(--lighter-bg-color);
+}
+
+.SidebarPanel__header__title {
+  flex: 1;
+  padding: 0 20px;
+  font-weight: 500;
+}
+
+.SidebarPanel__header__chevron {
+  padding: 13px 15px;
+  display: flex;
+  align-items: center;
+}
+
+.SidebarPanel__content {
+  padding: 20px;
+  background-color: white;
+}
+
+.SidebarPanel__content--no-padding {
+  padding: 0px;
+}

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

@@ -0,0 +1 @@
+{"SidebarPanel":"_SidebarPanel_4uwco_1","SidebarPanel__header":"_SidebarPanel__header_4uwco_5","SidebarPanel__header__title":"_SidebarPanel__header__title_4uwco_30","SidebarPanel__header__chevron":"_SidebarPanel__header__chevron_4uwco_36","SidebarPanel__content":"_SidebarPanel__content_4uwco_42","SidebarPanel__content--no-padding":"_SidebarPanel__content--no-padding_4uwco_47"}

package/src/Spinner/index.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './styles.module.css.json';
+
+type SpinnerProps = {
+  size?: number;
+  placement?: 'inline' | 'centered';
+  style?: React.CSSProperties;
+};
+
+/**
+ * @example Inline spinner
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   Foo bar <Spinner size={24} />
+ * </Canvas>;
+ * ```
+ *
+ * @example Centered spinner
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: '200px', position: 'relative' }}>
+ *     <Spinner size={48} placement="centered" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function Spinner({
+  size = 32,
+  placement = 'inline',
+  style: extraStyle = {},
+}: SpinnerProps): JSX.Element {
+  const bars: React.ReactNode[] = [];
+
+  for (let i = 0; i < 12; i += 1) {
+    const barStyle: React.CSSProperties = {};
+    barStyle.animationDelay = `${(i - 12) / 10}s`;
+    barStyle.transform = `rotate(${i * 30}deg) translate(146%)`;
+    bars.push(<div style={barStyle} className={s['Spinner__bar']} key={i} />);
+  }
+
+  const style: React.CSSProperties = {
+    width: size * 0.5,
+    height: size * 0.5,
+  };
+
+  if (placement === 'inline') {
+    style.marginLeft = size * 0.5;
+    style.transform = 'translateY(33%)';
+  }
+
+  return (
+    <div
+      className={classNames({
+        [s['Spinner--inline']]: placement === 'inline',
+        [s['Spinner--centered']]: placement === 'centered',
+      })}
+      style={{
+        ...extraStyle,
+        ...style,
+      }}
+    >
+      {bars}
+    </div>
+  );
+}

package/src/Spinner/styles.module.css

@@ -0,0 +1,31 @@
+.Spinner--inline {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.Spinner--centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.Spinner__bar {
+  animation: Spinner__spin 1.2s linear infinite;
+  background-color: var(--light-body-color);
+  position: absolute;
+  width: 40%;
+  height: 14%;
+  top: 0;
+  left: -20%;
+}
+
+@keyframes Spinner__spin {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.15;
+  }
+}

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

@@ -0,0 +1 @@
+{"Spinner--inline":"_Spinner--inline_oumod_1","Spinner--centered":"_Spinner--centered_oumod_7","Spinner__bar":"_Spinner__bar_oumod_13","Spinner__spin":"_Spinner__spin_oumod_1"}

package/src/SwitchField/index.tsx

@@ -0,0 +1,67 @@
+import React, { ReactNode } from 'react';
+import {
+  FieldError,
+  FieldHint,
+  FormLabel,
+  FormLabelProps,
+  SwitchInput,
+  SwitchInputProps,
+} from '..';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+
+type SwitchFieldProps = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: SwitchInputProps['value'];
+  onChange: SwitchInputProps['onChange'];
+  switchInputProps?: SwitchInputProps;
+};
+
+export function SwitchField({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  formLabelProps,
+  value,
+  onChange,
+  switchInputProps,
+}: SwitchFieldProps): JSX.Element {
+  return (
+    <>
+      <div className={s.switchField__flex}>
+        <div className={s.switchField__switchInput}>
+          <SwitchInput
+            {...switchInputProps}
+            name={name}
+            value={value}
+            onChange={onChange}
+          />
+        </div>
+        <FormLabel
+          {...formLabelProps}
+          htmlFor={id}
+          required={required}
+          className={cn(s.switchField__label, formLabelProps?.className)}
+          error={!!error}
+        >
+          {label}
+        </FormLabel>
+      </div>
+      {(hint || error) && (
+        <div className={s.switchField__below}>
+          {error && <FieldError>{error}</FieldError>}
+          {hint && <FieldHint>{hint}</FieldHint>}
+        </div>
+      )}
+    </>
+  );
+}

package/src/SwitchField/styles.module.css

@@ -0,0 +1,25 @@
+.switchField__flex {
+  display: flex;
+  align-items: center;
+}
+
+.switchField__switchInput {
+  width: 55px;
+}
+
+.switchField__label {
+  line-height: 1.1;
+  flex: 1;
+  line-height: 20px;
+  pointer-events: none;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  margin-bottom: 0;
+  color: var(--base-body-color);
+}
+
+.switchField__below {
+  margin-top: var(--spacing-s);
+  margin-left: 55px;
+}

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

@@ -0,0 +1 @@
+{"switchField__flex":"_switchField__flex_16z4j_1","switchField__switchInput":"_switchField__switchInput_16z4j_6","switchField__label":"_switchField__label_16z4j_10","switchField__below":"_switchField__below_16z4j_22"}

package/src/SwitchInput/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+
+export type SwitchInputChangeEventHandler = (
+  newValue: boolean,
+  event:
+    | React.MouseEvent<HTMLButtonElement>
+    | React.KeyboardEvent<HTMLButtonElement>,
+) => void;
+
+export interface SwitchInputProps
+  extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  name: string;
+  disabled?: boolean;
+  onChange?: SwitchInputChangeEventHandler;
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  value: boolean;
+}
+
+export function SwitchInput({
+  className,
+  value,
+  disabled,
+  onClick,
+  onChange,
+  onKeyDown,
+  ...restProps
+}: SwitchInputProps): JSX.Element {
+  function triggerChange(
+    newValue: boolean,
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) {
+    if (!disabled && onChange) {
+      onChange(newValue, event);
+    }
+  }
+
+  function onInternalKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {
+    if (e.key === 'ArrowLeft') {
+      triggerChange(false, e);
+    } else if (e.key === 'ArrowRight') {
+      triggerChange(true, e);
+    }
+    onKeyDown?.(e);
+  }
+
+  function onInternalClick(e: React.MouseEvent<HTMLButtonElement>) {
+    triggerChange(!value, e);
+    onClick?.(e);
+  }
+
+  const switchClassName = cn(s['switchInput'], className, {
+    [s['switchInput__checked']]: value,
+    [s['switchInput__disabled']]: disabled,
+  });
+
+  return (
+    <button
+      {...restProps}
+      type="button"
+      role="switch"
+      aria-checked={value}
+      disabled={disabled}
+      className={switchClassName}
+      onKeyDown={onInternalKeyDown}
+      onClick={onInternalClick}
+    >
+      <span className={s['switchInput__inner']} />
+    </button>
+  );
+}

package/src/SwitchInput/styles.module.css

@@ -0,0 +1,100 @@
+.switchInput__inner {
+  color: #fff;
+  font-size: 12px;
+  position: absolute;
+  left: 24px;
+}
+
+.switchInput {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 44px;
+  height: 22px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 20px 20px;
+  border: 1px solid #ccc;
+  background-color: #ccc;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+
+  &:after {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 2px;
+    top: 1px;
+    border-radius: 50% 50%;
+    background-color: #ffffff;
+    content: ' ';
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    transform: scale(1);
+    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+    animation-duration: 0.3s;
+    animation-name: switchInput__off;
+  }
+
+  &:hover,
+  &:focus:after {
+    transform: scale(1.1);
+    animation-name: switchInput__on;
+  }
+}
+
+.switchInput__checked {
+  border: 1px solid var(--accent-color);
+  background-color: var(--accent-color);
+
+  .switchInput__inner {
+    left: 6px;
+  }
+
+  &:after {
+    left: 22px;
+  }
+}
+
+.switchInput__disabled {
+  cursor: no-drop;
+  background: #ccc;
+  border-color: #ccc;
+
+  &:after {
+    background: #9e9e9e;
+    animation-name: none;
+    cursor: no-drop;
+  }
+
+  &:hover,
+  &:focus:after {
+    transform: scale(1);
+    animation-name: none;
+  }
+}
+
+@keyframes switchInput__on {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.25);
+  }
+
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes switchInput__off {
+  0% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1 @@
+{"switchInput__inner":"_switchInput__inner_1knbg_1","switchInput":"_switchInput_1knbg_1","switchInput__off":"_switchInput__off_1knbg_1","switchInput__on":"_switchInput__on_1knbg_1","switchInput__checked":"_switchInput__checked_1knbg_47","switchInput__disabled":"_switchInput__disabled_1knbg_60","none":"_none_1knbg_1"}

package/src/TextField/index.tsx

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+import { FieldWrapper, FormLabelProps, TextInput, TextInputProps } from '..';
+
+type TextFieldProps = {
+  id: string;
+  name: string;
+  label: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  error?: ReactNode;
+  required?: boolean;
+  formLabelProps?: FormLabelProps;
+  value: TextInputProps['value'];
+  onChange: TextInputProps['onChange'];
+  textInputProps?: TextInputProps;
+};
+
+export function TextField({
+  id,
+  name,
+  label,
+  hint,
+  error,
+  required,
+  placeholder,
+  formLabelProps,
+  value,
+  onChange,
+  textInputProps,
+}: TextFieldProps): JSX.Element {
+  return (
+    <FieldWrapper
+      formLabelProps={formLabelProps}
+      id={id}
+      required={required}
+      error={error}
+      hint={hint}
+      label={label}
+    >
+      <TextInput
+        {...textInputProps}
+        id={id}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        error={!!error}
+      />
+    </FieldWrapper>
+  );
+}

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

@@ -0,0 +1 @@
+{}

package/src/TextInput/index.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, RefObject, ChangeEvent } from 'react';
+import cn from 'classnames';
+import s from './styles.module.css.json';
+
+export type TextInputChangeEventHandler = (
+  newValue: string,
+  event: React.ChangeEvent<HTMLInputElement>,
+) => void;
+
+export type TextInputProps = {
+  type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url' | 'date' | 'time';
+  name?: string;
+  labelText?: string;
+  id?: string;
+  className?: string;
+  monospaced?: boolean;
+  onChange?: TextInputChangeEventHandler;
+  inputRef?: RefObject<HTMLInputElement>;
+  error?: boolean;
+} & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
+
+export const TextInput = ({
+  className,
+  disabled = false,
+  error,
+  id,
+  inputRef,
+  maxLength,
+  name,
+  labelText,
+  onBlur,
+  onChange,
+  placeholder,
+  required = false,
+  type,
+  value,
+  monospaced,
+  ...otherProps
+}: TextInputProps): JSX.Element => {
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(e.target.value, e);
+      }
+    },
+    [onChange],
+  );
+
+  const classNames = cn(s['TextInput'], className, {
+    [s['TextInput--disabled']]: disabled,
+    [s['TextInput--error']]: error,
+    [s['TextInput--monospaced']]: monospaced,
+  });
+
+  return (
+    <input
+      className={classNames}
+      aria-label={labelText}
+      id={id}
+      name={name}
+      required={required}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      disabled={disabled}
+      onBlur={onBlur}
+      onChange={handleChange}
+      value={value}
+      type={type}
+      ref={inputRef}
+      {...otherProps}
+    />
+  );
+};