@noya-app/noya-designsystem 0.0.2

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@noya-app/noya-designsystem",
+  "version": "0.0.2",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
+    "dev": "npm run build -- --watch"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "3.1.1",
+    "@dnd-kit/modifiers": "3.0.0",
+    "@dnd-kit/sortable": "4.0.0",
+    "@noya-app/noya-colorpicker": "0.0.2",
+    "@radix-ui/primitive": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.0.1",
+    "@radix-ui/react-compose-refs": "^1.0.0",
+    "@radix-ui/react-context-menu": "^2.0.1",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.1",
+    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-progress": "^1.0.1",
+    "@radix-ui/react-radio-group": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.0.2",
+    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-toggle-group": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@radix-ui/react-utils": "^0.0.5",
+    "immer": "9.0.5",
+    "kiwi.js": "^1.1.3",
+    "react-use-gesture": "9.1.3",
+    "react-virtualized": "^9.22.3",
+    "react-window": "^1.8.8",
+    "styled-components": "5.3.0",
+    "vscode-fuzzy-scorer": "^0.0.4"
+  },
+  "devDependencies": {
+    "@types/react-virtualized": "^9.21.21",
+    "@types/react-window": "^1.8.5",
+    "@types/styled-components": "5.1.26"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

package/src/__tests__/__snapshots__/fuzzyScorer.test.ts.snap

@@ -0,0 +1,41 @@
+// Bun Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter single match 1`] = `
+[
+  {
+    "index": 0,
+    "labelMatch": [
+      {
+        "end": 9,
+        "start": 5,
+      },
+    ],
+    "score": 32768,
+  },
+]
+`;
+
+exports[`filter multiple matches 1`] = `
+[
+  {
+    "index": 1,
+    "labelMatch": [
+      {
+        "end": 1,
+        "start": 0,
+      },
+    ],
+    "score": 131072,
+  },
+  {
+    "index": 0,
+    "labelMatch": [
+      {
+        "end": 6,
+        "start": 5,
+      },
+    ],
+    "score": 32768,
+  },
+]
+`;

package/src/__tests__/fuzzyScorer.test.ts

@@ -0,0 +1,85 @@
+import { expect, test } from "bun:test";
+import { fuzzyFilter, fuzzyScore, fuzzyTokenize } from "../utils/fuzzyScorer";
+
+test("prefix match", () => {
+  const result = fuzzyScore({ item: "font-bold", query: "font" });
+
+  expect(result.labelMatch).toEqual([{ start: 0, end: 4 }]);
+});
+
+test("suffix match", () => {
+  const result = fuzzyScore({ item: "font-bold", query: "bold" });
+
+  expect(result.labelMatch).toEqual([{ start: 5, end: 9 }]);
+});
+
+test("non-contiguous match", () => {
+  const result = fuzzyScore({ item: "font-bold", query: "fb" });
+
+  expect(result.labelMatch).toEqual([
+    { start: 0, end: 1 },
+    { start: 5, end: 6 },
+  ]);
+});
+
+test("filter single match", () => {
+  const result = fuzzyFilter({
+    items: ["font-bold", "font-italic", "font-regular"],
+    query: "bold",
+  });
+
+  expect(result).toMatchSnapshot();
+});
+
+test("filter multiple matches", () => {
+  const result = fuzzyFilter({
+    items: ["font-bold", "border"],
+    query: "b",
+  });
+
+  expect(result).toMatchSnapshot();
+});
+
+test("tokenizes prefix match", () => {
+  const item = "font-bold";
+  const query = "font";
+  const result = fuzzyTokenize({
+    item,
+    itemScore: fuzzyScore({ item, query }),
+  });
+
+  expect(result).toEqual([
+    { type: "match", text: "font" },
+    { type: "text", text: "-bold" },
+  ]);
+});
+
+test("tokenizes suffix match", () => {
+  const item = "font-bold";
+  const query = "bold";
+  const result = fuzzyTokenize({
+    item,
+    itemScore: fuzzyScore({ item, query }),
+  });
+
+  expect(result).toEqual([
+    { type: "text", text: "font-" },
+    { type: "match", text: "bold" },
+  ]);
+});
+
+test("tokenizes non-contiguous match", () => {
+  const item = "font-bold";
+  const query = "fb";
+  const result = fuzzyTokenize({
+    item,
+    itemScore: fuzzyScore({ item, query }),
+  });
+
+  expect(result).toEqual([
+    { type: "match", text: "f" },
+    { type: "text", text: "ont-" },
+    { type: "match", text: "b" },
+    { type: "text", text: "old" },
+  ]);
+});

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+interface Props {
+  size?: number;
+  opacity?: number;
+  color?: string;
+  trackColor?: string;
+}
+
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const Spinner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: ${({ opacity }: Props) => opacity};
+`;
+
+// Use css syntax to support keyframes
+const SpinnerCircle = styled.div<Props>`
+  border: 2px solid ${({ trackColor }) => trackColor};
+  border-top: 2px solid ${({ color }) => color};
+  border-radius: 50%;
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  animation: ${spin} 1s linear infinite;
+`;
+
+export const ActivityIndicator = memo(function ActivityIndicator({
+  size = 16,
+  opacity = 1,
+  color = 'black',
+  trackColor = 'rgba(0, 0, 0, 0.1)',
+}: Props) {
+  return (
+    <Spinner opacity={opacity}>
+      <SpinnerCircle size={size} color={color} trackColor={trackColor} />
+    </Spinner>
+  );
+});

package/src/components/Avatar.tsx

@@ -0,0 +1,64 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React from 'react';
+import styled from 'styled-components';
+
+const AvatarRoot = styled(AvatarPrimitive.Root)<{
+  size: number;
+  overflow: number;
+}>(({ theme, size, overflow }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  userSelect: 'none',
+  width: size,
+  height: size,
+  borderRadius: '100%',
+  backgroundColor: theme.colors.secondaryLight,
+  ...(overflow && {
+    margin: `-${overflow}px`,
+  }),
+}));
+
+const AvatarImage = styled(AvatarPrimitive.Image)({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'inherit',
+});
+
+const AvatarFallback = styled(AvatarPrimitive.Fallback)<{
+  size: number;
+}>(({ theme, size }) => ({
+  fontSize: '0.8rem',
+  fontWeight: 500,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'white',
+  lineHeight: `${size}px`,
+}));
+
+export function Avatar({
+  image,
+  name,
+  fallback,
+  size = 19,
+  overflow = 0,
+}: {
+  image?: string;
+  name?: string;
+  fallback?: string;
+  size?: number;
+  overflow?: number;
+}) {
+  return (
+    <AvatarRoot size={size} overflow={overflow}>
+      <AvatarImage src={image} alt={name} />
+      <AvatarFallback size={size}>{fallback}</AvatarFallback>
+    </AvatarRoot>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,209 @@
+import React, {
+  CSSProperties,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useCallback,
+} from 'react';
+import styled from 'styled-components';
+import { Tooltip } from './Tooltip';
+
+type ButtonVariant =
+  | 'normal'
+  | 'primary'
+  | 'secondary'
+  | 'secondaryBright'
+  | 'white'
+  | 'thin'
+  | 'floating'
+  | 'none';
+
+type ButtonSize = 'normal' | 'large';
+
+/* ----------------------------------------------------------------------------
+ * Element
+ * ------------------------------------------------------------------------- */
+
+export const ButtonElement = styled.button<{
+  active: boolean;
+  variant: ButtonVariant;
+  size: ButtonSize;
+  flex?: CSSProperties['flex'];
+}>(({ theme, active, disabled, variant, size, flex }) => ({
+  ...(size === 'large' ? theme.textStyles.heading4 : theme.textStyles.small),
+  textDecoration: 'none',
+  lineHeight: '1',
+  flex: flex ?? '0 0 auto',
+  position: 'relative',
+  border: '0',
+  outline: 'none',
+  WebkitAppRegion: 'no-drag',
+  userSelect: 'none',
+  minWidth: variant === 'normal' ? '31px' : undefined,
+  textAlign: 'left',
+  borderRadius: '4px',
+  paddingTop: variant === 'none' ? '0px' : '4px',
+  paddingRight: variant === 'none' ? '0px' : variant === 'thin' ? '1px' : '6px',
+  paddingBottom: variant === 'none' ? '0px' : '4px',
+  paddingLeft: variant === 'none' ? '0px' : variant === 'thin' ? '1px' : '6px',
+  ...(size === 'large' && {
+    paddingTop: '12px',
+    paddingRight: '16px',
+    paddingBottom: '12px',
+    paddingLeft: '16px',
+  }),
+  background: active
+    ? theme.colors.primary
+    : variant === 'none' || variant === 'thin'
+    ? 'transparent'
+    : theme.colors.inputBackground,
+  color: active ? 'white' : theme.colors.text,
+  opacity: disabled ? 0.25 : 1,
+  '&:focus': {
+    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
+  },
+  '&:hover': {
+    background: theme.colors.inputBackgroundLight,
+  },
+  '&:active': {
+    background: theme.colors.activeBackground,
+  },
+  ...(variant === 'primary' && {
+    background: theme.colors.primary,
+    color: 'white',
+    '&:hover': {
+      background: theme.colors.primaryLight,
+    },
+    '&:active': {
+      background: theme.colors.primary,
+    },
+  }),
+  ...(variant === 'secondary' && {
+    background: theme.colors.secondary,
+    color: 'white',
+    '&:hover': {
+      background: theme.colors.secondaryLight,
+    },
+    '&:active': {
+      background: theme.colors.secondary,
+    },
+  }),
+  ...(variant === 'secondaryBright' && {
+    background: '#0ab557',
+    color: 'white',
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.9,
+    },
+  }),
+  ...(variant === 'white' && {
+    background: 'white',
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.9,
+    },
+  }),
+  ...(variant === 'floating' && {
+    background: 'white',
+    color: theme.colors.text,
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+    fontSize: '12px',
+    padding: '0px 4px',
+  }),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  '& *': {
+    pointerEvents: 'none',
+  },
+}));
+
+/* ----------------------------------------------------------------------------
+ * Content
+ * ------------------------------------------------------------------------- */
+
+const ButtonContent = styled.span(({ theme }) => ({
+  // Line height of small text - maybe figure out better way to ensure
+  // icons don't have a smaller height
+  minHeight: '19px',
+  display: 'flex',
+  alignItems: 'center',
+  flex: '1',
+  justifyContent: 'center',
+
+  // Helps with alignment with the default small text
+  lineHeight: '15px',
+}));
+
+/* ----------------------------------------------------------------------------
+ * Root
+ * ------------------------------------------------------------------------- */
+
+export interface ButtonRootProps {
+  id?: string;
+  flex?: CSSProperties['flex'];
+  tabIndex?: number;
+  children: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  tooltip?: ReactNode;
+  onClick?: (event: React.MouseEvent) => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+  contentStyle?: CSSProperties;
+  as?: React.ElementType;
+  href?: string;
+  target?: string;
+  rel?: string;
+}
+
+export const Button = forwardRef(function Button(
+  {
+    id,
+    flex,
+    tabIndex,
+    tooltip,
+    active = false,
+    disabled = false,
+    variant = 'normal',
+    size = 'normal',
+    contentStyle,
+    onClick,
+    children,
+    ...rest // Propagate any other props so this component works as a Slot
+  }: ButtonRootProps,
+  forwardedRef: ForwardedRef<HTMLButtonElement>,
+) {
+  const buttonElement = (
+    <ButtonElement
+      ref={forwardedRef}
+      id={id}
+      flex={flex}
+      tabIndex={tabIndex}
+      active={active}
+      disabled={disabled}
+      variant={variant}
+      size={size}
+      onClick={onClick}
+      // Prevent double clicking a button from triggering any callbacks in ancestors
+      onDoubleClick={useCallback((event: React.MouseEvent) => {
+        event.stopPropagation();
+      }, [])}
+      {...rest}
+    >
+      <ButtonContent style={contentStyle}>{children}</ButtonContent>
+    </ButtonElement>
+  );
+
+  return tooltip ? (
+    <Tooltip content={tooltip}>{buttonElement}</Tooltip>
+  ) : (
+    buttonElement
+  );
+});

package/src/components/Chip.tsx

@@ -0,0 +1,214 @@
+import { Cross1Icon, PlusIcon } from '@noya-app/noya-icons';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+import { useDesignSystemTheme } from '../contexts/DesignSystemConfiguration';
+import { useHover } from '../hooks/useHover';
+
+type ChipColorScheme = 'primary' | 'secondary' | 'error';
+type ChipSize = 'small' | 'medium';
+type ChipVariant = 'solid' | 'outlined' | 'ghost';
+
+const ChipElement = styled.span<{
+  colorScheme?: ChipColorScheme;
+  size: ChipSize;
+  monospace: boolean;
+  variant: ChipVariant;
+  isInteractive: boolean;
+}>(({ theme, colorScheme, size, variant, monospace, isInteractive }) => {
+  const color =
+    colorScheme === 'primary'
+      ? theme.colors.primary
+      : colorScheme === 'secondary'
+      ? theme.colors.secondary
+      : theme.colors.text;
+
+  const backgroundColor =
+    colorScheme === 'primary'
+      ? 'rgb(238, 229, 255)'
+      : colorScheme === 'secondary'
+      ? 'rgb(205, 238, 231)'
+      : colorScheme === 'error'
+      ? 'rgb(255, 219, 219)'
+      : theme.colors.inputBackground;
+
+  const subtleColor =
+    colorScheme === 'primary'
+      ? 'rgba(238, 229, 255, 0.2)'
+      : colorScheme === 'secondary'
+      ? 'rgba(205, 238, 231, 0.2)'
+      : colorScheme === 'error'
+      ? 'rgba(255, 219, 219, 0.2)'
+      : 'rgba(0, 0, 0, 0.1)';
+
+  return {
+    textTransform: 'initial',
+    borderRadius: 4,
+    userSelect: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    lineHeight: '1.4',
+    ...(size === 'medium'
+      ? {
+          fontSize: '11px',
+          padding: '4px 8px',
+        }
+      : {
+          fontSize: '9px',
+          padding: '0px 4px',
+        }),
+    ...(monospace && {
+      fontFamily: theme.fonts.monospace,
+    }),
+    ...(variant === 'solid'
+      ? {
+          color,
+          backgroundColor,
+        }
+      : variant === 'outlined'
+      ? {
+          color,
+          backgroundColor: 'transparent',
+          boxShadow: `0 0 0 1px ${subtleColor} inset`,
+        }
+      : {}),
+    '&:hover': {
+      ...(variant === 'outlined' && {
+        backgroundColor: subtleColor,
+        boxShadow: 'none',
+      }),
+    },
+    ...(isInteractive && {
+      cursor: 'pointer',
+    }),
+  };
+});
+
+const DeleteElement = styled(Cross1Icon)<{
+  size: ChipSize;
+}>(({ size }) => ({
+  position: 'relative',
+  marginRight: '-2px',
+  cursor: 'pointer',
+  opacity: 0.5,
+
+  ...(size === 'medium'
+    ? {
+        marginLeft: '2px',
+        // top: '-1px',
+        transform: 'scale(0.75)',
+      }
+    : {
+        transform: 'scale(0.6)',
+      }),
+
+  '&:hover': {
+    opacity: 0.85,
+  },
+}));
+
+const ignoredProps = new Set(['size', 'isOnlyChild']);
+
+const AddElement = styled(PlusIcon).withConfig({
+  shouldForwardProp: (prop) => !ignoredProps.has(prop),
+})<{
+  size: ChipSize;
+  isOnlyChild: boolean;
+}>(({ size, isOnlyChild }) => ({
+  position: 'relative',
+  marginRight: '-2px',
+  cursor: 'pointer',
+  opacity: 0.5,
+
+  ...(size === 'medium'
+    ? {
+        marginLeft: '2px',
+        top: '-1px',
+        transform: 'scale(0.75)',
+      }
+    : {
+        transform: 'scale(0.6)',
+        ...(isOnlyChild && { marginLeft: '-2px' }),
+      }),
+
+  '&:hover': {
+    opacity: 0.85,
+  },
+}));
+
+export interface ChipProps {
+  colorScheme?: ChipColorScheme;
+  variant?: ChipVariant;
+  size?: ChipSize;
+  children?: React.ReactNode;
+  deletable?: boolean;
+  addable?: boolean;
+  monospace?: boolean;
+  onDelete?: () => void;
+  onAdd?: () => void;
+  onClick?: () => void;
+  onHoverDeleteChange?: (hovering: boolean) => void;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+}
+
+export const Chip = memo(function Chip({
+  colorScheme,
+  children,
+  deletable,
+  addable,
+  style,
+  size = 'medium',
+  variant = 'solid',
+  monospace = false,
+  tabIndex,
+  onDelete,
+  onClick,
+  onAdd,
+  onHoverDeleteChange,
+}: ChipProps) {
+  const theme = useDesignSystemTheme();
+
+  const { hoverProps: hoverDeleteProps } = useHover({
+    onHoverChange: onHoverDeleteChange,
+  });
+
+  const handleClick = !children && !deletable && addable ? onAdd : onClick;
+
+  const color =
+    colorScheme === 'primary'
+      ? theme.colors.primary
+      : colorScheme === 'secondary'
+      ? theme.colors.secondary
+      : theme.colors.text;
+
+  return (
+    <ChipElement
+      variant={variant}
+      colorScheme={colorScheme}
+      style={style}
+      onClick={handleClick}
+      size={size}
+      monospace={monospace}
+      isInteractive={!!handleClick}
+      tabIndex={tabIndex}
+    >
+      {children}
+      {deletable && (
+        <DeleteElement
+          size={size}
+          {...(hoverDeleteProps as any)}
+          onClick={onDelete}
+          color={color}
+        />
+      )}
+      {addable && (
+        <AddElement
+          size={size}
+          isOnlyChild={!children && !deletable}
+          onClick={onAdd}
+          color={color}
+        />
+      )}
+    </ChipElement>
+  );
+});