@dxos/react-ui 0.1.2 → 0.1.3

package/src/components/Input/Input.tsx

@@ -3,39 +3,15 @@
 //
 
 import cx from 'classnames';
-import React, { ChangeEvent, ComponentProps, ReactNode, useCallback, useState, useTransition } from 'react';
+import React, { ChangeEvent, useCallback, useState, useTransition } from 'react';
 
 import { useId } from '../../hooks';
-import { MessageValence } from '../../props';
-import {
-  defaultDescription,
-  defaultDisabled,
-  defaultFocus,
-  defaultHover,
-  defaultPlaceholder,
-  valenceColorText,
-  valenceInputBorder
-} from '../../styles';
+import { defaultDescription, valenceColorText } from '../../styles';
+import { BarePinInput } from './BarePinInput';
+import { BareTextInput } from './BareTextInput';
+import { InputProps as NaturalInputProps } from './InputProps';
 
-export type InputSize = 'md' | 'lg';
-
-export interface InputProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size'> {
-  label: ReactNode;
-  labelVisuallyHidden?: boolean;
-  description?: ReactNode;
-  descriptionVisuallyHidden?: boolean;
-  initialValue?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  size?: InputSize;
-  validationMessage?: ReactNode;
-  validationValence?: MessageValence;
-}
-
-const sizeMap = new Map<InputSize, string>([
-  ['md', ''],
-  ['lg', 'text-base']
-]);
+export type InputProps = NaturalInputProps;
 
 export const Input = ({
   label,
@@ -49,6 +25,7 @@ export const Input = ({
   disabled,
   className,
   size,
+  length = 6,
   validationMessage,
   validationValence,
   ...inputProps
@@ -57,6 +34,8 @@ export const Input = ({
   const descriptionId = useId('input-description');
   const validationId = useId('input-validation');
 
+  const isInvalid = !!validationMessage && validationValence === 'error';
+
   const [_isPending, startTransition] = useTransition();
 
   const [internalValue, setInternalValue] = useState<string>(initialValue?.toString() || '');
@@ -73,7 +52,29 @@ export const Input = ({
     [onChange]
   );
 
-  const isInvalid = !!validationMessage && validationValence === 'error';
+  const bareInputBaseProps = {
+    ...inputProps,
+    id: inputId,
+    ...(required && { required: true }),
+    ...(disabled && { disabled: true }),
+    ...(description && { 'aria-describedby': descriptionId }),
+    ...(isInvalid && {
+      'aria-invalid': 'true' as const,
+      'aria-errormessage': validationId
+    }),
+    ...(placeholder && { placeholder }),
+    value: internalValue,
+    onChange: onInternalChange,
+    validationMessage,
+    validationValence
+  };
+
+  const bareInput =
+    size === 'pin' ? (
+      <BarePinInput {...bareInputBaseProps} length={length} />
+    ) : (
+      <BareTextInput {...bareInputBaseProps} size={size} />
+    );
 
   return (
     <div className={cx('my-4', className)} role='none'>
@@ -86,29 +87,7 @@ export const Input = ({
       >
         {label}
       </label>
-      <input
-        id={inputId}
-        {...inputProps}
-        className={cx(
-          defaultFocus,
-          defaultPlaceholder,
-          defaultHover({ disabled }),
-          sizeMap.get(size ?? 'md'),
-          'bg-white/50 border text-neutral-900 text-sm rounded-lg block w-full px-2.5 py-2 dark:bg-neutral-700/50 dark:text-white',
-          valenceInputBorder(validationMessage ? validationValence : undefined),
-          disabled && defaultDisabled
-        )}
-        {...(required && { required: true })}
-        {...(disabled && { disabled: true })}
-        {...(placeholder && { placeholder })}
-        {...(description && { 'aria-describedby': descriptionId })}
-        {...(isInvalid && {
-          'aria-invalid': 'true',
-          'aria-errormessage': validationId
-        })}
-        value={internalValue}
-        onChange={onInternalChange}
-      />
+      {bareInput}
       {(description || validationMessage) && (
         <p
           {...(!isInvalid && { id: descriptionId })}

package/src/components/Input/InputProps.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { ComponentProps, ReactNode } from 'react';
+
+import { MessageValence } from '../../props';
+
+export type InputSize = 'md' | 'lg' | 'pin';
+
+export interface InputProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size' | 'ref'> {
+  label: ReactNode;
+  labelVisuallyHidden?: boolean;
+  description?: ReactNode;
+  descriptionVisuallyHidden?: boolean;
+  initialValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  size?: InputSize;
+  validationMessage?: ReactNode;
+  validationValence?: MessageValence;
+  length?: number;
+}

package/src/hooks/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './useId';
+export * from './useForwardedRef';
+export * from './useIsFocused';

package/src/hooks/useForwardedRef.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { useRef, useEffect } from 'react';
+
+export const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {
+  const innerRef = useRef<T>(null);
+
+  useEffect(() => {
+    if (!ref) {
+      return;
+    }
+    if (typeof ref === 'function') {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+
+  return innerRef;
+};

package/src/hooks/useIsFocused.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// Based upon the useIsFocused hook which is part of the `rci` project:
+/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused
+
+import { useEffect, useRef, useState, RefObject } from 'react';
+
+export const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {
+  const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);
+  const isFocusedRef = useRef<boolean | undefined>(isFocused);
+
+  isFocusedRef.current = isFocused;
+
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+
+    const onFocus = () => setIsFocused(true);
+    const onBlur = () => setIsFocused(false);
+    input.addEventListener('focus', onFocus);
+    input.addEventListener('blur', onBlur);
+
+    if (isFocusedRef.current === undefined) {
+      setIsFocused(document.activeElement === input);
+    }
+
+    return () => {
+      input.removeEventListener('focus', onFocus);
+      input.removeEventListener('blur', onBlur);
+    };
+  }, [inputRef, setIsFocused]);
+
+  return isFocused;
+};

package/src/plugin.ts

@@ -223,6 +223,12 @@ export const themePlugin = (options: VitePluginTailwindOptions) => {
                         '100%': {
                           transform: 'translateX(calc(100% + 1rem))'
                         }
+                      },
+                      // Shimmer
+                      'shimmer-loop': {
+                        '100%': {
+                          transform: 'translateX(100%)'
+                        }
                       }
                     },
                     animation: {
@@ -248,7 +254,9 @@ export const themePlugin = (options: VitePluginTailwindOptions) => {
                       'toast-hide': 'toast-hide 100ms ease-in forwards',
                       'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
                       'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-                      'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards'
+                      'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
+                      // Shimmer
+                      shimmer: 'shimmer-loop 2s infinite'
                     }
                   }
                 },

package/src/styles/focus.ts

@@ -4,3 +4,6 @@
 
 export const defaultFocus =
   'focus:outline-none focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black';
+
+export const staticFocus =
+  'ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black';

package/src/styles/index.ts

@@ -8,6 +8,7 @@ export * from './focus';
 export * from './group';
 export * from './hover';
 export * from './ornament';
+export * from './shimmer';
 export * from './size';
 export * from './text';
 export * from './valence';

package/src/styles/input.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+
+import { MessageValence } from '../props';
+import { defaultDisabled } from './disabled';
+import { defaultFocus, staticFocus } from './focus';
+import { defaultHover } from './hover';
+import { defaultPlaceholder } from './text';
+import { valenceInputBorder } from './valence';
+
+export const defaultInput = ({
+  disabled,
+  validationValence
+}: {
+  disabled?: boolean;
+  validationValence?: MessageValence;
+}) => {
+  return cx(
+    defaultFocus,
+    defaultPlaceholder,
+    defaultHover({ disabled }),
+    'bg-white/50 border text-neutral-900 text-sm rounded-lg dark:bg-neutral-700/50 dark:text-white',
+    valenceInputBorder(validationValence),
+    disabled && defaultDisabled
+  );
+};
+
+export const staticInput = ({
+  disabled,
+  focused,
+  validationValence
+}: {
+  disabled?: boolean;
+  focused?: boolean;
+  validationValence?: MessageValence;
+}) => {
+  return cx(
+    defaultPlaceholder,
+    'bg-white/50 border text-neutral-900 text-sm rounded-lg dark:bg-neutral-700/50 dark:text-white',
+    valenceInputBorder(validationValence),
+    disabled && defaultDisabled,
+    focused && staticFocus
+  );
+};

package/src/styles/shimmer.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const defaultShimmer =
+  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/20 before:to-transparent isolate overflow-hidden before:border-t before:border-neutral-100/20';