@noya-app/noya-designsystem 0.0.2

package/src/theme/light.ts

@@ -0,0 +1,178 @@
+import { CSSObject } from 'styled-components';
+import { mediaQuery } from '../mediaQuery';
+
+export const colors = {
+  logo: {
+    fill: 'rgb(175,175,175)',
+    highlight: 'rgb(175,175,175)',
+  },
+  text: 'rgb(38, 48, 83)',
+  textMuted: 'rgb(85, 85, 85)',
+  textSubtle: 'rgb(121, 121, 121)',
+  textDisabled: 'rgb(160, 160, 160)',
+  dividerSubtle: 'rgba(0, 0, 0, 0.04)',
+  divider: 'rgba(0, 0, 0, 0.07)',
+  dividerStrong: 'rgba(0, 0, 0, 0.09)',
+  primary: 'rgb(132, 63, 255)',
+  primaryLight: 'rgb(147, 86, 255)',
+  secondary: 'rgb(0, 151, 117)',
+  secondaryLight: 'rgb(0, 160, 129)',
+  secondaryBright: '#0ab557',
+  warning: 'rgb(251, 211, 0)',
+  neutralBackground: 'rgb(222,223,232)',
+  inputBackground: 'rgb(240, 240, 242)',
+  inputBackgroundLight: 'rgb(243, 243, 245)',
+  codeBackground: 'rgb(250, 250, 250)',
+  selectedBackground: 'rgb(242, 245, 250)',
+  transparentChecker: 'rgba(255,255,255,0.8)',
+  activeBackground: 'rgba(0,0,0,0.1)',
+  scrollbar: 'rgba(199,199,199,0.8)',
+  placeholderDots: 'rgba(0,0,0,0.3)',
+  listView: {
+    raisedBackground: 'rgba(0,0,0,0.03)',
+    editingBackground: '#fff',
+  },
+  canvas: {
+    background: 'rgb(249,249,249)',
+    get selectionStroke() {
+      return colors.primary;
+    },
+    dragHandleStroke: 'rgba(180,180,180,0.5)',
+    measurement: 'rgb(207,92,42)',
+    sliceOutline: 'rgb(210,210,210)',
+    grid: 'rgba(0,0,0,0.05)',
+  },
+  sidebar: {
+    background: 'rgba(252,252,252,0.85)',
+  },
+  popover: {
+    background: 'rgb(252,252,252)',
+    divider: 'transparent',
+  },
+  slider: {
+    background: 'white',
+    border: '#BBB',
+  },
+  radioGroup: {
+    background: 'white',
+  },
+  icon: 'rgb(139, 139, 139)',
+  iconSelected: 'rgb(220, 220, 220)',
+  mask: 'rgb(12,193,67)',
+  imageOverlay:
+    'linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))',
+  get dragOutline() {
+    return colors.primary;
+  },
+  selection: 'rgb(179,215,254)',
+  thumbnailBackground: 'rgb(240, 240, 242)',
+};
+
+export const fonts = {
+  normal:
+    "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
+};
+
+// The last one, 0.85, I just eyeballed
+const typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
+
+export const textStyles = {
+  title: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[0]}rem`,
+    fontWeight: 'bold',
+    lineHeight: '1.4',
+    [mediaQuery.small]: {
+      fontSize: '36px',
+    },
+  } as CSSObject,
+  subtitle: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[3]}rem`,
+    fontWeight: 500,
+    lineHeight: '1.75',
+    [mediaQuery.small]: {
+      fontSize: '18px',
+    },
+  } as CSSObject,
+  heading1: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[2]}rem`,
+    fontWeight: 500,
+    lineHeight: '1.75',
+  } as CSSObject,
+  heading2: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[3]}rem`,
+    fontWeight: 500,
+    lineHeight: '1.75',
+  } as CSSObject,
+  heading3: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[4]}rem`,
+    fontWeight: 500,
+    lineHeight: '1.75',
+  } as CSSObject,
+  heading4: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[5]}rem`,
+    fontWeight: 500,
+    lineHeight: '1.75',
+  } as CSSObject,
+  heading5: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[6]}rem`,
+    fontWeight: 500,
+    lineHeight: '1.75',
+  } as CSSObject,
+  body: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[5]}rem`,
+    fontWeight: 400,
+    lineHeight: '1.75',
+  } as CSSObject,
+  small: {
+    fontFamily: fonts.normal,
+    fontSize: `${typeScale[6]}rem`,
+    fontWeight: 400,
+    lineHeight: '1.4',
+  } as CSSObject,
+  code: {
+    fontFamily: fonts.monospace,
+    fontSize: '90%',
+    lineHeight: '1.5',
+  } as CSSObject,
+  label: {
+    fontFamily: fonts.normal,
+    fontSize: '0.62rem',
+    fontWeight: 400,
+    lineHeight: '1.4',
+    textTransform: 'uppercase',
+    letterSpacing: '0.3px',
+  } as CSSObject,
+};
+
+export const sizes = {
+  sidebarWidth: 260,
+  toolbar: {
+    height: 46,
+    itemSeparator: 8,
+  },
+  inspector: {
+    horizontalSeparator: 8,
+    verticalSeparator: 10,
+  },
+  spacing: {
+    nano: 2,
+    micro: 4,
+    small: 8,
+    medium: 16,
+    large: 32,
+    xlarge: 64,
+    xxlarge: 128,
+  },
+  dialog: {
+    padding: 16,
+  },
+};

package/src/utils/breakpoints.ts

@@ -0,0 +1,45 @@
+import { CSSObject } from 'styled-components';
+
+type BreakpointKey = number | string;
+
+export type Breakpoint<T extends object> = [BreakpointKey, T];
+
+export type BreakpointCollection<T extends object> =
+  | Breakpoint<T>[]
+  | Record<BreakpointKey, T>;
+
+export type StyleMap = Record<string, CSSObject>;
+
+export function mergeBreakpoints(
+  breakpoints: BreakpointCollection<CSSObject>,
+): StyleMap;
+export function mergeBreakpoints<T extends object>(
+  breakpoints: BreakpointCollection<T>,
+  transform?: (value: T) => CSSObject,
+): StyleMap;
+export function mergeBreakpoints<T extends object>(
+  breakpoints: BreakpointCollection<T>,
+  transform?: (value: T) => CSSObject,
+): StyleMap {
+  const breakpointMap = Array.isArray(breakpoints)
+    ? breakpoints.reduce(
+        (result: Record<number, T>, item: any /* TODO Fix type */) => {
+          const [key, value] = item;
+          result[key] = result[key] ? { ...result[key], ...value } : value;
+          return result;
+        },
+        {},
+      )
+    : breakpoints;
+
+  const breakpointList = Object.entries(breakpointMap) as Breakpoint<T>[];
+
+  const transformedList = breakpointList
+    .sort((a, b) => Number(b[0]) - Number(a[0]))
+    .map(([width, value]: Breakpoint<T>) => [
+      `@media screen and (max-width: ${width}px)`,
+      transform?.(value) ?? value,
+    ]);
+
+  return Object.fromEntries(transformedList);
+}

package/src/utils/completions.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { IScoredItem } from './fuzzyScorer';
+
+export type CompletionItem = {
+  type?: undefined;
+  id: string;
+  name: string;
+  icon?: ReactNode;
+  alwaysInclude?: boolean;
+};
+
+export type CompletionSectionHeader = {
+  type: 'sectionHeader';
+  id: string;
+  name: string;
+  maxVisibleItems?: number;
+};
+
+export type CompletionListItem =
+  | (CompletionItem & IScoredItem)
+  | CompletionSectionHeader;

package/src/utils/createSectionedMenu.ts

@@ -0,0 +1,38 @@
+import {
+  MenuItem,
+  RegularMenuItem,
+  SEPARATOR_ITEM,
+} from '../components/internal/Menu';
+
+export type Optional<T> = T | false | null | undefined;
+
+function withSeparators<T>(elements: T[], separator: T) {
+  const result: T[] = [];
+
+  for (let i = 0; i < elements.length; i++) {
+    result.push(elements[i]);
+
+    if (i !== elements.length - 1) {
+      result.push(separator);
+    }
+  }
+
+  return result;
+}
+
+export type MenuConfig<T extends string> = Optional<
+  Optional<RegularMenuItem<T>>[]
+>[];
+
+export function createSectionedMenu<T extends string>(
+  ...sections: MenuConfig<T>
+): MenuItem<T>[] {
+  const nonEmptySections = sections
+    .flatMap((section) => (section ? [section] : []))
+    .map((section) => section.flatMap((item) => (item ? [item] : [])))
+    .filter((section) => section.length > 0);
+
+  return withSeparators<MenuItem<T>[]>(nonEmptySections, [
+    SEPARATOR_ITEM,
+  ]).flat();
+}

package/src/utils/fuzzyScorer.ts

@@ -0,0 +1,105 @@
+import { IItemScore, scoreFilePathFuzzy } from 'vscode-fuzzy-scorer';
+
+export function fuzzyScore({ item, query }: { item: string; query: string }) {
+  return scoreFilePathFuzzy({ path: item, query });
+}
+
+export type IScoredItem = IItemScore & {
+  index: number;
+};
+
+export function fuzzyFilter({
+  items,
+  query,
+  scoreThreshold = 0,
+}: {
+  items: string[];
+  query: string;
+  scoreThreshold?: number;
+}) {
+  const scoredItems = items.map(
+    (text, index): IScoredItem => ({
+      index,
+      ...fuzzyScore({ item: text, query }),
+    }),
+  );
+
+  if (!query) return scoredItems;
+
+  return scoredItems
+    .filter(({ score }) => score > scoreThreshold)
+    .sort((a, b) => b.score - a.score);
+}
+
+export type IToken =
+  | { type: 'text'; text: string }
+  | { type: 'match'; text: string };
+
+export type MatchRange = { start: number; end: number };
+
+export function fuzzyTokenize({
+  item,
+  itemScore,
+}: {
+  item: string;
+  itemScore: IItemScore;
+}): IToken[] {
+  const tokens: IToken[] = [];
+
+  let lastMatchIndex = 0;
+
+  const matches: MatchRange[] = mergeRanges([
+    ...(itemScore.labelMatch ?? []),
+    ...(itemScore.descriptionMatch ?? []),
+  ]);
+
+  for (const match of matches) {
+    if (match.start > lastMatchIndex) {
+      tokens.push({
+        type: 'text',
+        text: item.slice(lastMatchIndex, match.start),
+      });
+    }
+
+    tokens.push({
+      type: 'match',
+      text: item.slice(match.start, match.end),
+    });
+
+    lastMatchIndex = match.end;
+  }
+
+  if (lastMatchIndex < item.length) {
+    tokens.push({
+      type: 'text',
+      text: item.slice(lastMatchIndex),
+    });
+  }
+
+  return tokens;
+}
+
+function mergeRanges(ranges: MatchRange[]): MatchRange[] {
+  const merged: MatchRange[] = [];
+
+  const sorted = [...ranges].sort((a, b) => a.start - b.start);
+
+  let current: MatchRange | undefined;
+
+  for (const range of sorted) {
+    if (!current) {
+      current = range;
+    } else if (range.start <= current.end) {
+      current.end = Math.max(current.end, range.end);
+    } else {
+      merged.push(current);
+      current = range;
+    }
+  }
+
+  if (current) {
+    merged.push(current);
+  }
+
+  return merged;
+}

package/src/utils/getGradientBackground.tsx

@@ -0,0 +1,33 @@
+import { Sketch } from '@noya-app/noya-file-format';
+import { sketchColorToRgbaString } from './sketchColor';
+
+const getRGBAColor = (value: Sketch.GradientStop[], num: 100 | 360) =>
+  [...value]
+    .sort((a, b) => a.position - b.position)
+    .map(
+      (g) =>
+        `${sketchColorToRgbaString(g.color)} ${g.position * num}${
+          num === 100 ? '%' : 'deg'
+        }`,
+    )
+    .join(', \n');
+
+export function getGradientBackground(
+  value: Sketch.GradientStop[],
+  type: Sketch.GradientType,
+  direction?: number,
+) {
+  if (type === Sketch.GradientType.Angular) {
+    return `conic-gradient(${getRGBAColor(value, 360)})`;
+  }
+
+  const color = getRGBAColor(value, 100);
+  const position =
+    type === Sketch.GradientType.Radial
+      ? 'radial-gradient(circle'
+      : `linear-gradient(${
+          typeof direction !== undefined ? direction : 180
+        }deg`;
+
+  return `${position}, ${color})`;
+}

package/src/utils/handleNudge.ts

@@ -0,0 +1,30 @@
+// Given a KeyboardEvent, returns the nudge amount
+export default function handleNudge(e: {
+  key: string;
+  shiftKey: boolean;
+  altKey: boolean;
+}): number | undefined {
+  let handled = false;
+  let amount = 0;
+
+  switch (e.key) {
+    case 'ArrowUp':
+      amount = 1;
+      handled = true;
+      break;
+    case 'ArrowDown':
+      amount = -1;
+      handled = true;
+      break;
+  }
+
+  if (!handled) return;
+
+  if (e.shiftKey) {
+    amount *= 10;
+  } else if (e.altKey) {
+    amount *= 0.1;
+  }
+
+  return handled ? amount : undefined;
+}

package/src/utils/mouseEvent.ts

@@ -0,0 +1,7 @@
+export function isLeftButtonClicked(event: React.MouseEvent) {
+  return event.button === 0;
+}
+
+export function isRightButtonClicked(event: React.MouseEvent) {
+  return event.button === 2;
+}

package/src/utils/sketchColor.ts

@@ -0,0 +1,34 @@
+import {
+  hsvaToRgbaString,
+  RgbaColor,
+  rgbaToHex,
+  rgbaToHsva,
+} from '@noya-app/noya-colorpicker';
+import type { Sketch } from '@noya-app/noya-file-format';
+
+export function sketchColorToRgba(value: Sketch.Color): RgbaColor {
+  return {
+    r: Math.floor(value.red * 255),
+    g: Math.floor(value.green * 255),
+    b: Math.floor(value.blue * 255),
+    a: value.alpha,
+  };
+}
+
+export function sketchColorToRgbaString(value: Sketch.Color): string {
+  return hsvaToRgbaString(rgbaToHsva(sketchColorToRgba(value)));
+}
+
+export function rgbaToSketchColor(value: RgbaColor): Sketch.Color {
+  return {
+    _class: 'color',
+    alpha: value.a,
+    red: value.r / 255,
+    green: value.g / 255,
+    blue: value.b / 255,
+  };
+}
+
+export function sketchColorToHex(value: Sketch.Color): string {
+  return rgbaToHex(sketchColorToRgba(value)).toUpperCase();
+}

package/src/utils/sketchPattern.ts

@@ -0,0 +1,29 @@
+import { Sketch } from '@noya-app/noya-file-format';
+
+export const SUPPORTED_IMAGE_UPLOAD_TYPES = [
+  'image/png' as const,
+  'image/jpeg' as const,
+  'image/webp' as const,
+  'application/pdf' as const,
+  'image/svg+xml' as const,
+];
+
+export const SUPPORTED_CANVAS_UPLOAD_TYPES = [
+  ...SUPPORTED_IMAGE_UPLOAD_TYPES,
+  '' as const,
+];
+
+export type SupportedImageUploadType =
+  (typeof SUPPORTED_IMAGE_UPLOAD_TYPES)[number];
+
+export type SupportedCanvasUploadType =
+  (typeof SUPPORTED_CANVAS_UPLOAD_TYPES)[number];
+
+export type SketchPattern = {
+  // This _class doesn't exist in Sketch, but it's convenient in `switch`
+  // statements to be able to reference _class.
+  _class: 'pattern';
+  image?: Sketch.FileRef | Sketch.DataRef;
+  patternFillType: Sketch.PatternFillType;
+  patternTileScale: number;
+};

package/src/utils/withSeparatorElements.ts

@@ -0,0 +1,31 @@
+import { Children, cloneElement, isValidElement, ReactNode } from "react";
+
+function createKey(key: string | number) {
+  return `s-${key}`;
+}
+
+export default function withSeparatorElements(
+  elements: ReactNode,
+  separator: ReactNode | (() => ReactNode)
+) {
+  const childrenArray = Children.toArray(elements);
+
+  for (let i = childrenArray.length - 1; i > 0; i--) {
+    let sep =
+      typeof separator === "function"
+        ? separator()
+        : isValidElement(separator)
+          ? cloneElement(separator, { key: createKey(i) })
+          : separator;
+
+    if (isValidElement(sep) && sep.key == null) {
+      sep = cloneElement(sep, { key: createKey(i) });
+    }
+
+    if (!sep || typeof sep === "boolean") continue;
+
+    childrenArray.splice(i, 0, sep);
+  }
+
+  return childrenArray;
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@repo/typescript-config/library.json"
+}