@dxos/react-ui 0.1.2 → 0.1.4

package/dist/src/styles/input.js

@@ -0,0 +1,24 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.staticInput = exports.defaultInput = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const disabled_1 = require("./disabled");
+const focus_1 = require("./focus");
+const hover_1 = require("./hover");
+const text_1 = require("./text");
+const valence_1 = require("./valence");
+const defaultInput = ({ disabled, validationValence }) => {
+    return (0, classnames_1.default)(focus_1.defaultFocus, text_1.defaultPlaceholder, (0, hover_1.defaultHover)({ disabled }), 'bg-white/50 border text-neutral-900 text-sm rounded-lg dark:bg-neutral-700/50 dark:text-white', (0, valence_1.valenceInputBorder)(validationValence), disabled && disabled_1.defaultDisabled);
+};
+exports.defaultInput = defaultInput;
+const staticInput = ({ disabled, focused, validationValence }) => {
+    return (0, classnames_1.default)(text_1.defaultPlaceholder, 'bg-white/50 border text-neutral-900 text-sm rounded-lg dark:bg-neutral-700/50 dark:text-white', (0, valence_1.valenceInputBorder)(validationValence), disabled && disabled_1.defaultDisabled, focused && focus_1.staticFocus);
+};
+exports.staticInput = staticInput;
+//# sourceMappingURL=input.js.map

package/dist/src/styles/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/styles/input.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,4DAA4B;AAG5B,yCAA6C;AAC7C,mCAAoD;AACpD,mCAAuC;AACvC,iCAA4C;AAC5C,uCAA+C;AAExC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,iBAAiB,EAIlB,EAAE,EAAE;IACH,OAAO,IAAA,oBAAE,EACP,oBAAY,EACZ,yBAAkB,EAClB,IAAA,oBAAY,EAAC,EAAE,QAAQ,EAAE,CAAC,EAC1B,+FAA+F,EAC/F,IAAA,4BAAkB,EAAC,iBAAiB,CAAC,EACrC,QAAQ,IAAI,0BAAe,CAC5B,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,YAAY,gBAevB;AAEK,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,iBAAiB,EAKlB,EAAE,EAAE;IACH,OAAO,IAAA,oBAAE,EACP,yBAAkB,EAClB,+FAA+F,EAC/F,IAAA,4BAAkB,EAAC,iBAAiB,CAAC,EACrC,QAAQ,IAAI,0BAAe,EAC3B,OAAO,IAAI,mBAAW,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,WAAW,eAgBtB"}

package/dist/src/styles/shimmer.d.ts

@@ -0,0 +1,2 @@
+export declare 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";
+//# sourceMappingURL=shimmer.d.ts.map

package/dist/src/styles/shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,iQACqO,CAAC"}

package/dist/src/styles/shimmer.js

@@ -0,0 +1,8 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultShimmer = void 0;
+exports.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';
+//# sourceMappingURL=shimmer.js.map

package/dist/src/styles/shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.js","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,cAAc,GACzB,8PAA8P,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Vite plugin which configures a low-level design system for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,12 +31,13 @@
     "jdenticon": "^3.2.0",
     "postcss": "^8.4.17",
     "qrcode.react": "^3.1.0",
+    "rci": "^0.0.3",
     "tailwindcss": "^3.1.8",
     "tailwindcss-logical": "^3.0.0",
     "tailwindcss-radix": "^2.6.0"
   },
   "devDependencies": {
-    "@dxos/vite-plugin": "0.1.2",
+    "@dxos/vite-plugin": "0.1.4",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",

package/src/components/AlertDialog/AlertDialog.tsx

@@ -90,7 +90,7 @@ export const AlertDialog = ({
             {title}
           </AlertDialogPrimitive.Title>
           {description && (
-            <AlertDialogPrimitive.Description className={cx('mt-2', defaultDescription)}>
+            <AlertDialogPrimitive.Description className={cx('my-2', defaultDescription)}>
               {description}
             </AlertDialogPrimitive.Description>
           )}

package/src/components/Input/BarePinInput.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import { CodeInput, getSegmentCssWidth } from 'rci';
+import React, { forwardRef, useCallback, ComponentProps } from 'react';
+
+import { useForwardedRef, useIsFocused } from '../../hooks';
+import { staticInput } from '../../styles/input';
+import { InputProps } from './InputProps';
+
+const bareInputStyleProps = {
+  padding: '8px',
+  spacing: '8px',
+  fontFamily: ''
+};
+
+export type BarePinInputProps = Omit<InputProps, 'ref' | 'label' | 'onChange'> &
+  Pick<ComponentProps<typeof CodeInput>, 'onChange' | 'value' | 'length'>;
+
+// TODO(thure): supplying a `value` prop to CodeInput does not yield correct controlled input interactivity; this may be an issue with RCI (filed as https://github.com/leonardodino/rci/issues/25).
+export const BarePinInput = forwardRef<HTMLInputElement, BarePinInputProps>(
+  ({ initialValue, size, validationMessage, validationValence, value, ...inputProps }, ref) => {
+    const width = getSegmentCssWidth('13px');
+    const inputRef = useForwardedRef(ref);
+    const inputFocused = useIsFocused(inputRef);
+
+    const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(
+      ({ state, index }) => (
+        <div
+          key={index}
+          className={staticInput({
+            focused: inputFocused && !!state,
+            disabled: inputProps.disabled,
+            ...(validationMessage && { validationValence })
+          })}
+          data-state={state}
+          style={{ width, height: '100%' }}
+        />
+      ),
+      [inputFocused, validationValence, validationMessage, inputProps.disabled]
+    );
+
+    return (
+      <CodeInput
+        {...{
+          spellCheck: false,
+          ...inputProps,
+          ...bareInputStyleProps,
+          inputRef,
+          className: cx(
+            'font-mono selection:bg-transparent',
+            inputProps.disabled && 'cursor-not-allowed',
+            inputProps.className
+          ),
+          renderSegment
+        }}
+      />
+    );
+  }
+);

package/src/components/Input/BareTextInput.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ComponentProps } from 'react';
+
+import { defaultInput } from '../../styles/input';
+import { InputProps, InputSize } from './InputProps';
+
+const sizeMap: Record<InputSize, string> = {
+  md: 'text-sm',
+  lg: 'text-base',
+  pin: ''
+};
+
+export type BareTextInputProps = Omit<InputProps, 'label' | 'initialValue' | 'onChange'> &
+  Pick<ComponentProps<'input'>, 'onChange'>;
+
+export const BareTextInput = ({ validationValence, validationMessage, size, ...inputProps }: BareTextInputProps) => {
+  return (
+    <input
+      {...inputProps}
+      className={cx(
+        defaultInput({ disabled: inputProps.disabled, ...(validationMessage && { validationValence }) }),
+        'block w-full px-2.5 py-2',
+        sizeMap[size ?? 'md']
+      )}
+    />
+  );
+};

package/src/components/Input/Input.stories.tsx

@@ -16,6 +16,10 @@ export default {
     validationValence: {
       control: 'select',
       options: ['success', 'info', 'warning', 'error']
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg', 'pin']
     }
   }
 };
@@ -33,7 +37,8 @@ Default.args = {
   labelVisuallyHidden: false,
   descriptionVisuallyHidden: false,
   validationMessage: '',
-  validationValence: undefined
+  validationValence: undefined,
+  length: 6
 };
 
 export const Disabled = () => (
@@ -89,3 +94,15 @@ export const InputWithValidationAndDescription = () => (
     }}
   />
 );
+
+export const PinInput = () => (
+  <Template
+    {...{
+      label: 'This input is a PIN-style input',
+      size: 'pin',
+      length: 6,
+      description: 'Type in secret you received',
+      placeholder: '••••••'
+    }}
+  />
+);

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';