@dxos/react-ui 0.1.20 → 0.1.21

package/src/hooks/useIsFocused.ts

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

@@ -1,44 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import autoprefixer from 'autoprefixer';
-import { resolve } from 'node:path';
-import tailwindcss from 'tailwindcss';
-import { Plugin } from 'vite';
-
-import { tailwindConfig } from './config';
-
-export interface VitePluginTailwindOptions {
-  jit?: boolean;
-  cssPath?: string;
-  virtualFileId?: string;
-  content: string[];
-}
-
-export const ThemePlugin = (options: Pick<VitePluginTailwindOptions, 'content'>) => {
-  const config: VitePluginTailwindOptions = {
-    jit: true,
-    cssPath: resolve(__dirname, './theme.css'),
-    virtualFileId: '@dxosTheme',
-    ...options
-  };
-
-  return {
-    name: 'vite-plugin-dxos-ui-theme',
-    config: ({ root }, env) => {
-      return {
-        css: {
-          postcss: {
-            plugins: [tailwindcss(tailwindConfig({ env: env.mode, root, content: options.content })), autoprefixer]
-          }
-        }
-      };
-    },
-    resolveId: (id) => {
-      if (id === config.virtualFileId) {
-        return config.cssPath;
-      }
-    }
-  } as Plugin;
-};

package/src/props/Elevation.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/src/props/MessageValence.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export type MessageValence = 'success' | 'info' | 'warning' | 'error' | 'neutral';

package/src/props/Size.ts

@@ -1,40 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export type Size =
-  | 0
-  | 'px'
-  | 0.5
-  | 1
-  | 1.5
-  | 2
-  | 2.5
-  | 3
-  | 3.5
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 14
-  | 16
-  | 20
-  | 24
-  | 28
-  | 32
-  | 36
-  | 40
-  | 44
-  | 48
-  | 52
-  | 56
-  | 60
-  | 64
-  | 72
-  | 80
-  | 96;

package/src/props/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './Elevation';
-export * from './MessageValence';
-export * from './Size';

package/src/styles/active.ts

@@ -1,11 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { mx } from '../util';
-
-export const defaultActive = mx(
-  'radix-state-open:outline-2 radix-state-open:outline-offset-1 radix-state-open:outline-primary-300 radix-state-open:outline-offset-transparent dark:radix-state-open:outline-primary-400 dark:radix-state-open:outline-offset-transparent',
-  'radix-state-on:outline-2 radix-state-on:outline-offset-1 radix-state-on:outline-primary-300 radix-state-on:outline-offset-transparent dark:radix-state-on:outline-primary-400 dark:radix-state-on:outline-offset-transparent',
-  'radix-state-instant-open:outline-2 radix-state-instant-open:outline-offset-1 radix-state-instant-open:outline-primary-300 radix-state-instant-open:outline-offset-transparent dark:radix-state-instant-open:outline-primary-400 dark:radix-state-instant-open:outline-offset-transparent'
-);

package/src/styles/disabled.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export const defaultDisabled = 'opacity-50 cursor-not-allowed shadow-none';

package/src/styles/focus.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export const defaultFocus =
-  'focus:outline-none focus-visible:z-[1] 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/group.ts

@@ -1,35 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { Elevation } from '../props';
-import { mx } from '../util';
-
-const elevationClassNameMap = new Map<number, string>([
-  [0, 'shadow-none'],
-  [1, 'shadow-sm'],
-  [2, 'shadow'],
-  [3, 'shadow-md'],
-  [4, 'shadow-lg'],
-  [5, 'shadow-xl'],
-  [6, 'shadow-2xl']
-]);
-
-export const defaultGroup = ({
-  elevation,
-  rounding,
-  spacing
-}: {
-  elevation: Elevation;
-  rounding?: string;
-  spacing?: string;
-}) => {
-  return mx(
-    rounding ?? 'rounded-lg',
-    spacing ?? 'p-4',
-    elevation === 0
-      ? 'bg-transparent border border-neutral-200 dark:border-neutral-700'
-      : 'bg-white dark:bg-neutral-800 elevated-buttons',
-    elevationClassNameMap.get(elevation)
-  );
-};

package/src/styles/hover.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export const defaultHover = ({ disabled }: { disabled?: boolean }) => {
-  return (
-    !disabled &&
-    'outline outline-3 outline-transparent hover:z-[1] hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400'
-  );
-};

package/src/styles/input.ts

@@ -1,46 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { MessageValence } from '../props';
-import { mx } from '../util';
-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 mx(
-    'text-base border rounded bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white',
-    defaultFocus,
-    defaultPlaceholder,
-    defaultHover({ disabled }),
-    valenceInputBorder(validationValence),
-    disabled && defaultDisabled
-  );
-};
-
-export const staticInput = ({
-  disabled,
-  focused,
-  validationValence
-}: {
-  disabled?: boolean;
-  focused?: boolean;
-  validationValence?: MessageValence;
-}) => {
-  return mx(
-    defaultPlaceholder,
-    'text-base border rounded bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white',
-    valenceInputBorder(validationValence),
-    disabled && defaultDisabled,
-    focused && staticFocus
-  );
-};

package/src/styles/ornament.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export const defaultInlineSeparator = 'border-is border-neutral-300 dark:border-neutral-700';
-export const defaultBlockSeparator = 'border-bs border-neutral-300 dark:border-neutral-700';

package/src/styles/shimmer.ts

@@ -1,9 +0,0 @@
-//
-// 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/10 before:to-transparent isolate overflow-hidden';
-
-export const strongShimmer =
-  'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden';

package/src/styles/size.ts

@@ -1,86 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { Size } from '../props';
-import { mx } from '../util';
-
-export const sizeWidthMap = new Map<Size, string>([
-  [0, 'w-0'],
-  ['px', 'w-px'],
-  [0.5, 'w-0.5'],
-  [1, 'w-1'],
-  [1.5, 'w-1.5'],
-  [2, 'w-2'],
-  [2.5, 'w-2.5'],
-  [3, 'w-3'],
-  [3.5, 'w-3.5'],
-  [4, 'w-4'],
-  [5, 'w-5'],
-  [6, 'w-6'],
-  [7, 'w-7'],
-  [8, 'w-8'],
-  [9, 'w-9'],
-  [10, 'w-10'],
-  [11, 'w-11'],
-  [12, 'w-12'],
-  [14, 'w-14'],
-  [16, 'w-16'],
-  [20, 'w-20'],
-  [24, 'w-24'],
-  [28, 'w-28'],
-  [32, 'w-32'],
-  [36, 'w-36'],
-  [40, 'w-40'],
-  [44, 'w-44'],
-  [48, 'w-48'],
-  [52, 'w-52'],
-  [56, 'w-56'],
-  [60, 'w-60'],
-  [64, 'w-64'],
-  [72, 'w-72'],
-  [80, 'w-80'],
-  [96, 'w-96']
-]);
-
-export const sizeHeightMap = new Map<Size, string>([
-  [0, 'h-0'],
-  ['px', 'h-px'],
-  [0.5, 'h-0.5'],
-  [1, 'h-1'],
-  [1.5, 'h-1.5'],
-  [2, 'h-2'],
-  [2.5, 'h-2.5'],
-  [3, 'h-3'],
-  [3.5, 'h-3.5'],
-  [4, 'h-4'],
-  [5, 'h-5'],
-  [6, 'h-6'],
-  [7, 'h-7'],
-  [8, 'h-8'],
-  [9, 'h-9'],
-  [10, 'h-10'],
-  [11, 'h-11'],
-  [12, 'h-12'],
-  [14, 'h-14'],
-  [16, 'h-16'],
-  [20, 'h-20'],
-  [24, 'h-24'],
-  [28, 'h-28'],
-  [32, 'h-32'],
-  [36, 'h-36'],
-  [40, 'h-40'],
-  [44, 'h-44'],
-  [48, 'h-48'],
-  [52, 'h-52'],
-  [56, 'h-56'],
-  [60, 'h-60'],
-  [64, 'h-64'],
-  [72, 'h-72'],
-  [80, 'h-80'],
-  [96, 'h-96']
-]);
-
-export const getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
-export const getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
-export const getSize = (size: Size) => mx(getSizeHeight(size), getSizeWidth(size));

package/src/styles/text.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export const defaultPlaceholder = 'placeholder-neutral-500 dark:placeholder-neutral-400';
-
-export const defaultDescription = 'text-xs font-normal text-neutral-650 dark:text-neutral-300';
-export const primaryDescription = 'text-xs font-normal text-white/90';
-
-export const defaultTooltip = 'text-xs font-normal text-neutral-900 dark:text-neutral-50';

package/src/styles/valence.ts

@@ -1,71 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { MessageValence } from '../props';
-
-export const successText = 'text-xs font-medium text-success-700 dark:text-success-300';
-export const infoText = 'text-xs font-medium text-info-700 dark:text-info-300';
-export const warningText = 'text-xs font-medium text-warning-700 dark:text-warning-300';
-export const errorText = 'text-xs font-medium text-error-700 dark:text-error-300';
-
-export const valenceColorText = (valence?: MessageValence) => {
-  switch (valence) {
-    case 'success':
-      return successText;
-    case 'info':
-      return infoText;
-    case 'warning':
-      return warningText;
-    case 'error':
-      return errorText;
-    default:
-      return undefined;
-  }
-};
-
-export const neutralInputBorder = 'border-neutral-500 dark:border-neutral-600';
-export const successInputBorder = 'border-success-500 dark:border-success-600';
-export const infoInputBorder = 'border-info-500 dark:border-info-600';
-export const warningInputBorder = 'border-warning-500 dark:border-warning-600';
-export const errorInputBorder = 'border-error-500 dark:border-error-600';
-
-export const valenceInputBorder = (valence?: MessageValence) => {
-  switch (valence) {
-    case 'success':
-      return successInputBorder;
-    case 'info':
-      return infoInputBorder;
-    case 'warning':
-      return warningInputBorder;
-    case 'error':
-      return errorInputBorder;
-    default:
-      return neutralInputBorder;
-  }
-};
-
-export const neutralAlertColors = 'border-neutral-500 dark:border-neutral-600';
-export const successAlertColors =
-  'border-success-500 dark:border-success-600 text-success-700 dark:text-success-100 bg-success-50 dark:bg-success-900';
-export const infoAlertColors =
-  'border-info-500 dark:border-info-600 text-info-700 dark:text-info-100 bg-info-50 dark:bg-info-900';
-export const warningAlertColors =
-  'border-warning-500 dark:border-warning-600 text-warning-700 dark:text-warning-100 bg-warning-50 dark:bg-warning-900';
-export const errorAlertColors =
-  'border-error-500 dark:border-error-600 text-error-700 dark:text-error-100 bg-error-50 dark:bg-error-900';
-
-export const valenceAlertColors = (valence?: MessageValence) => {
-  switch (valence) {
-    case 'success':
-      return successAlertColors;
-    case 'info':
-      return infoAlertColors;
-    case 'warning':
-      return warningAlertColors;
-    case 'error':
-      return errorAlertColors;
-    default:
-      return neutralAlertColors;
-  }
-};

package/src/testing/templateForComponent.tsx

@@ -1,16 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { ComponentStory, Story } from '@storybook/react';
-import React, { FC } from 'react';
-
-export const templateForComponent =
-  <P extends {}>(Component: FC<P>) =>
-  (props: P): Story<P> => {
-    const template: ComponentStory<typeof Component> = (args) => <Component {...args} />;
-
-    const story = template.bind({});
-    story.args = props;
-    return story;
-  };

package/src/theme.css

@@ -1,65 +0,0 @@
-@import '@fontsource/roboto-flex/variable-full.css';
-@import '@fontsource/fira-code/variable.css';
-@import '@fontsource/space-grotesk/variable-full.css';
-
-@tailwind base;
-@tailwind utilities;
-@tailwind components;
-
-@layer utilities {
-  /* Font weights */
-  .font-thin {
-    font-variation-settings: 'wght' 100;
-  }
-  .font-extralight {
-    font-variation-settings: 'wght' 200;
-  }
-  .font-light {
-    font-variation-settings: 'wght' 300;
-  }
-  .font-normal {
-    font-variation-settings: 'wght' 400;
-  }
-  .font-medium {
-    font-variation-settings: 'wght' 500;
-  }
-  .font-semibold {
-    font-variation-settings: 'wght' 600;
-  }
-  .font-bold {
-    font-variation-settings: 'wght' 700;
-  }
-  .font-extrabold {
-    font-variation-settings: 'wght' 800;
-  }
-  .font-black {
-    font-variation-settings: 'wght' 900;
-  }
-  /* Elevations */
-  .button-elevation {
-    box-shadow: var(--button-elevation)
-  }
-  .elevated-buttons {
-    --button-elevation: theme(boxShadow.sm);
-  }
-  .grouped-buttons {
-    --button-elevation: theme(boxShadow.none);
-  }
-}
-
-:root {
-  --surface-bg: theme(colors.neutral.50);
-  --surface-text: theme(colors.neutral.900);
-  --button-elevation: theme(boxShadow.md);
-}
-
-.dark {
-  --surface-bg: theme(colors.neutral.900);
-  --surface-text: theme(colors.neutral.50);
-  --button-elevation: theme(boxShadow.lg);
-}
-
-html {
-  background-color: var(--surface-bg);
-  color: var(--surface-text);
-}

package/src/typings.d.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-declare module 'tailwindcss/stubs/defaultConfig.stub.js';
-declare module 'tailwindcss-radix';
-declare module 'tailwindcss-logical';

package/src/util/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './mx';

package/src/util/mx.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { extendTailwindMerge, validators } from 'tailwind-merge';
-
-import { withLogical } from './withLogical';
-
-export const mx = extendTailwindMerge(
-  {
-    classGroups: {
-      fontFamily: ['font-body', 'font-display', 'font-mono'],
-      fontWeight: [
-        'font-thin',
-        'font-extralight',
-        'font-light',
-        'font-normal',
-        'font-medium',
-        'font-semibold',
-        'font-bold',
-        'font-extrabold',
-        'font-black',
-        validators.isArbitraryNumber
-      ]
-    }
-  },
-  withLogical
-);