@dxos/react-ui 0.1.0

package/src/plugin.ts

@@ -0,0 +1,270 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import tailwindcssForms from '@tailwindcss/forms';
+import autoprefixer from 'autoprefixer';
+import { resolve } from 'path';
+import tailwindcss from 'tailwindcss';
+import tailwindcssRadix from 'tailwindcss-radix';
+import tailwindColors from 'tailwindcss/colors';
+import defaultConfig from 'tailwindcss/stubs/defaultConfig.stub.js';
+import { Plugin } from 'vite';
+
+export interface VitePluginTailwindOptions {
+  jit?: boolean;
+  cssPath?: string;
+  virtualFileId?: string;
+  content: string[];
+}
+
+export const themePlugin = (options: VitePluginTailwindOptions) => {
+  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({
+                darkMode: 'class',
+                theme: {
+                  fontFamily: {
+                    body: ['Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
+                    display: ['Space GroteskVariable', 'Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
+                    mono: ['Fira CodeVariable', ...defaultConfig.theme.fontFamily.mono]
+                  },
+                  extend: {
+                    colors: {
+                      success: tailwindColors.emerald,
+                      warning: tailwindColors.amber,
+                      error: tailwindColors.red,
+                      info: tailwindColors.cyan,
+                      neutral: {
+                        // Key color #707076
+                        // Hue torsion 0.0º
+                        // C*CP black 0.80, C*CP white 0.88
+                        950: '#101012',
+                        900: '#1b1b1e',
+                        850: '#252529',
+                        800: '#303034',
+                        750: '#3b3b3f',
+                        700: '#46464b',
+                        650: '#525257',
+                        600: '#5e5e64',
+                        550: '#6a6a70',
+                        500: '#77767d',
+                        450: '#838389',
+                        400: '#909096',
+                        350: '#9d9da4',
+                        300: '#ababb1',
+                        250: '#b8b8be',
+                        200: '#c6c6cc',
+                        150: '#d4d4d9',
+                        100: '#e2e2e7',
+                        50: '#f1f1f4'
+                      },
+                      primary: {
+                        // Key color #00e0e0
+                        // Hue torsion -73.5º
+                        // C*CP black 1.0, C*CP white 1.0
+                        950: '#110c2a',
+                        900: '#101940',
+                        850: '#0b2453',
+                        800: '#003164',
+                        750: '#003e70',
+                        700: '#004b7c',
+                        650: '#005887',
+                        600: '#006693',
+                        550: '#00749e',
+                        500: '#0082a9',
+                        450: '#0091b3',
+                        400: '#00a0be',
+                        350: '#00afc7',
+                        300: '#00bed0',
+                        250: '#00ced8',
+                        200: '#00dedf',
+                        150: '#3cede4',
+                        100: '#69fae8',
+                        50: '#b9ffee'
+                      },
+                      transparent: 'transparent',
+                      current: 'currentColor',
+                      white: '#ffffff',
+                      black: '#000000'
+                    },
+                    fontSize: {
+                      // Base size 16px
+                      // Scale 1.125
+                      xs: ['0.79rem', { lineHeight: '1rem' }],
+                      sm: ['0.889rem', { lineHeight: '1.25rem' }],
+                      base: ['1rem', { lineHeight: '1.5rem' }],
+                      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+                      xl: ['1.266rem', { lineHeight: '1.75rem' }],
+                      '2xl': ['1.424rem', { lineHeight: '2rem' }],
+                      '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
+                      '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
+                      '5xl': ['2.027rem', { lineHeight: '1' }],
+                      '6xl': ['2.281rem', { lineHeight: '1' }],
+                      '7xl': ['2.566rem', { lineHeight: '1' }],
+                      '8xl': ['2.887rem', { lineHeight: '1' }],
+                      '9xl': ['3.247rem', { lineHeight: '1' }]
+                    },
+                    outlineWidth: {
+                      3: '3px'
+                    },
+                    boxShadow: {
+                      slider: '0 0 0 5px rgba(0, 0, 0, 0.3)'
+                    },
+                    keyframes: {
+                      // Dropdown menu
+                      'scale-in': {
+                        '0%': { opacity: '0', transform: 'scale(0)' },
+                        '100%': { opacity: '1', transform: 'scale(1)' }
+                      },
+                      'slide-down': {
+                        '0%': { opacity: '0', transform: 'translateY(-10px)' },
+                        '100%': { opacity: '1', transform: 'translateY(0)' }
+                      },
+                      'slide-up': {
+                        '0%': { opacity: '0', transform: 'translateY(10px)' },
+                        '100%': { opacity: '1', transform: 'translateY(0)' }
+                      },
+                      // Tooltip
+                      'slide-up-fade': {
+                        '0%': { opacity: '0', transform: 'translateY(2px)' },
+                        '100%': { opacity: '1', transform: 'translateY(0)' }
+                      },
+                      'slide-right-fade': {
+                        '0%': { opacity: '0', transform: 'translateX(-2px)' },
+                        '100%': { opacity: '1', transform: 'translateX(0)' }
+                      },
+                      'slide-down-fade': {
+                        '0%': { opacity: '0', transform: 'translateY(-2px)' },
+                        '100%': { opacity: '1', transform: 'translateY(0)' }
+                      },
+                      'slide-left-fade': {
+                        '0%': { opacity: '0', transform: 'translateX(2px)' },
+                        '100%': { opacity: '1', transform: 'translateX(0)' }
+                      },
+                      // Navigation menu
+                      'enter-from-right': {
+                        '0%': { transform: 'translateX(200px)', opacity: '0' },
+                        '100%': { transform: 'translateX(0)', opacity: '1' }
+                      },
+                      'enter-from-left': {
+                        '0%': { transform: 'translateX(-200px)', opacity: '0' },
+                        '100%': { transform: 'translateX(0)', opacity: '1' }
+                      },
+                      'exit-to-right': {
+                        '0%': { transform: 'translateX(0)', opacity: '1' },
+                        '100%': { transform: 'translateX(200px)', opacity: '0' }
+                      },
+                      'exit-to-left': {
+                        '0%': { transform: 'translateX(0)', opacity: '1' },
+                        '100%': {
+                          transform: 'translateX(-200px)',
+                          opacity: '0'
+                        }
+                      },
+                      'scale-in-content': {
+                        '0%': {
+                          transform: 'rotateX(-30deg) scale(0.9)',
+                          opacity: '0'
+                        },
+                        '100%': {
+                          transform: 'rotateX(0deg) scale(1)',
+                          opacity: '1'
+                        }
+                      },
+                      'scale-out-content': {
+                        '0%': {
+                          transform: 'rotateX(0deg) scale(1)',
+                          opacity: '1'
+                        },
+                        '100%': {
+                          transform: 'rotateX(-10deg) scale(0.95)',
+                          opacity: '0'
+                        }
+                      },
+                      'fade-in': {
+                        '0%': { opacity: '0' },
+                        '100%': { opacity: '1' }
+                      },
+                      'fade-out': {
+                        '0%': { opacity: '1' },
+                        '100%': { opacity: '0' }
+                      },
+                      // Toast
+                      'toast-hide': {
+                        '0%': { opacity: '1' },
+                        '100%': { opacity: '0' }
+                      },
+                      'toast-slide-in-right': {
+                        '0%': { transform: 'translateX(calc(100% + 1rem))' },
+                        '100%': { transform: 'translateX(0)' }
+                      },
+                      'toast-slide-in-bottom': {
+                        '0%': { transform: 'translateY(calc(100% + 1rem))' },
+                        '100%': { transform: 'translateY(0)' }
+                      },
+                      'toast-swipe-out': {
+                        '0%': {
+                          transform: 'translateX(var(--radix-toast-swipe-end-x))'
+                        },
+                        '100%': {
+                          transform: 'translateX(calc(100% + 1rem))'
+                        }
+                      }
+                    },
+                    animation: {
+                      // Dropdown menu
+                      'scale-in': 'scale-in 0.2s ease-in-out',
+                      'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
+                      'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
+                      // Tooltip
+                      'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+                      'slide-right-fade': 'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+                      'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+                      'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+                      // Navigation menu
+                      'enter-from-right': 'enter-from-right 0.25s ease',
+                      'enter-from-left': 'enter-from-left 0.25s ease',
+                      'exit-to-right': 'exit-to-right 0.25s ease',
+                      'exit-to-left': 'exit-to-left 0.25s ease',
+                      'scale-in-content': 'scale-in-content 0.2s ease',
+                      'scale-out-content': 'scale-out-content 0.2s ease',
+                      'fade-in': 'fade-in 0.2s ease',
+                      'fade-out': 'fade-out 0.2s ease',
+                      // Toast
+                      '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'
+                    }
+                  }
+                },
+                plugins: [tailwindcssForms, tailwindcssRadix()],
+                ...(env.mode === 'development' && { mode: 'jit' }),
+                content: [resolve(root || './', 'node_modules/@dxos/react-ui/dist/**/*.js'), ...config.content]
+              }),
+              autoprefixer
+            ]
+          }
+        }
+      };
+    },
+    resolveId: (id) => {
+      if (id === config.virtualFileId) {
+        return config.cssPath;
+      }
+    }
+  } as Plugin;
+};

package/src/props/MessageValence.ts

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

package/src/props/Size.ts

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

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

package/src/styles/active.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+
+export const defaultActive = cx(
+  '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

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

package/src/styles/focus.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+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';

package/src/styles/hover.ts

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

package/src/styles/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './active';
+export * from './disabled';
+export * from './focus';
+export * from './hover';
+export * from './size';
+export * from './text';
+export * from './valence';

package/src/styles/size.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+
+import { Size } from '../props/Size';
+
+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) => cx(getSizeHeight(size), getSizeWidth(size));

package/src/styles/text.ts

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

@@ -0,0 +1,71 @@
+//
+// 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/index.ts

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

package/src/testing/templateForComponent.tsx

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

@@ -0,0 +1,62 @@
+@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);
+  }
+}
+
+: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

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