@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/workspace/WorkspaceLayout.tsx

@@ -61,6 +61,8 @@ export type WorkspaceLayoutRef = {
 };
 
 export type SideOptions = {
+  // Whether to show the sidebar. Defaults to true.
+  visible?: boolean;
   style?: React.CSSProperties;
   className?: string;
   resizable?: boolean;
@@ -116,6 +118,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     sideTypeBreakpoint = 800,
     detectSize = "container",
     leftOptions: {
+      visible: leftVisible = true,
       minSize: leftMinSize = 200,
       maxSize: leftMaxSize = 500,
       initialSize: leftInitialSize = 280,
@@ -126,6 +129,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       showTabs: leftShowTabs = true,
     } = {},
     rightOptions: {
+      visible: rightVisible = true,
       minSize: rightMinSize = 200,
       maxSize: rightMaxSize = 500,
       initialSize: rightInitialSize = 280,
@@ -276,26 +280,28 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     (left ? leftSidebarPercentage : 0) -
     (right ? rightSidebarPercentage : 0);
 
-  const leftPanel = left ? (
-    <PanelInner
-      style={leftStyle}
-      className={cx("bg-sidebar-background flex-col", leftClassName)}
-    >
-      {leftTabValue ? renderPanelChildren(left, leftTabValue) : null}
-    </PanelInner>
-  ) : null;
-
-  const rightPanel = right ? (
-    <PanelInner
-      style={rightStyle}
-      className={cx("bg-sidebar-background flex-col", rightClassName)}
-    >
-      {rightTabValue ? renderPanelChildren(right, rightTabValue) : null}
-    </PanelInner>
-  ) : null;
+  const leftPanel =
+    left && leftVisible !== false ? (
+      <PanelInner
+        style={leftStyle}
+        className={cx("n-bg-sidebar-background n-flex-col", leftClassName)}
+      >
+        {leftTabValue ? renderPanelChildren(left, leftTabValue) : null}
+      </PanelInner>
+    ) : null;
+
+  const rightPanel =
+    right && rightVisible !== false ? (
+      <PanelInner
+        style={rightStyle}
+        className={cx("n-bg-sidebar-background n-flex-col", rightClassName)}
+      >
+        {rightTabValue ? renderPanelChildren(right, rightTabValue) : null}
+      </PanelInner>
+    ) : null;
 
   const centerPanel = (
-    <PanelInner className="bg-canvas-background">{children}</PanelInner>
+    <PanelInner className="n-bg-canvas-background">{children}</PanelInner>
   );
 
   const leftSidebarOptions: PercentageSidebarOptions = useMemo(
@@ -359,12 +365,12 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     <div
       ref={containerRef}
       id={id}
-      className={cx("flex flex-col bg-canvas-background relative", className)}
+      className={cx("n-flex n-flex-col n-bg-canvas-background n-relative", className)}
       style={style}
       data-theme={theme}
     >
       {toolbar}
-      <div className="flex flex-row flex-1 relative">
+      <div className="n-flex n-flex-row n-flex-1 n-relative">
         {readyToRender && (
           <LayoutComponent
             leftPanel={leftPanel}
@@ -399,7 +405,10 @@ const PanelInner = memo(function PanelInner({
   className?: string;
 }) {
   return (
-    <div style={style} className={cx("absolute inset-0 flex", className)}>
+    <div
+      style={style}
+      className={cx("n-absolute n-inset-0 n-min-w-0 n-flex", className)}
+    >
       {children}
     </div>
   );

package/src/contexts/DialogContext.tsx

@@ -28,12 +28,16 @@ function createDeferredPromise<T>() {
 
 type RenderableProps = { close: () => void };
 
+type ClosablePromise<T> = Promise<T> & {
+  close: () => void;
+};
+
 export type DialogContextValue = {
   openDialog(
     options: BaseDialogContents & {
       children: ReactNode | ((props: RenderableProps) => ReactNode);
     }
-  ): Promise<void>;
+  ): ClosablePromise<void>;
 
   openInputDialog(
     options:
@@ -141,7 +145,11 @@ export const DialogProvider = function DialogProvider({
       },
     });
 
-    return promise;
+    const closablePromise = Object.assign(promise, {
+      close: closeRef.current,
+    });
+
+    return closablePromise;
   }, []);
 
   const openConfirmation: DialogContextValue["openConfirmationDialog"] =
@@ -198,7 +206,11 @@ export const DialogProvider = function DialogProvider({
         },
       });
 
-      return promise;
+      const closablePromise = Object.assign(promise, {
+        close: closeRef.current,
+      });
+
+      return closablePromise;
     },
     []
   );
@@ -271,7 +283,7 @@ export const DialogProvider = function DialogProvider({
         )}
       >
         {contents?.type === "confirmation" ? (
-          <div className="flex flex-1 flex-row items-center">
+          <div className="n-flex n-flex-1 n-flex-row n-items-center">
             <Spacer.Horizontal />
             <Button
               onClick={() => {
@@ -316,7 +328,7 @@ export const DialogProvider = function DialogProvider({
               />
             </InputField.Root>
             <Spacer.Vertical size={20} />
-            <div className="flex flex-1 flex-row items-center">
+            <div className="n-flex n-flex-1 n-flex-row n-items-center">
               <Spacer.Horizontal />
               <Button onClick={close}>Cancel</Button>
               <Spacer.Horizontal size={16} />

package/src/hooks/useIndent.ts

@@ -2,13 +2,8 @@
 
 import React from "react";
 
-export const IndentContext = React.createContext<{
-  indentLevel: number;
-}>({
-  indentLevel: 0,
-});
+export const IndentContext = React.createContext<number>(0);
 
-export const useIndent = () => {
-  const { indentLevel } = React.useContext(IndentContext);
-  return indentLevel;
+export const useIndent = (): number => {
+  return React.useContext(IndentContext);
 };

package/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --n-primary-900: rgb(45, 25, 95); /* dark: --n-primary-pastel */
   --n-primary-800: rgb(64, 39, 140);
@@ -41,6 +45,7 @@
   --n-primary: var(--n-primary-600);
   --n-primary-light: var(--n-primary-400);
   --n-primary-pastel: var(--n-primary-100);
+  --n-primary-ring: color-mix(in srgb, var(--n-primary) 35%, transparent);
   --n-secondary: rgb(0, 151, 117);
   --n-secondary-light: rgb(0, 160, 129);
   --n-secondary-pastel: rgb(205, 238, 231);
@@ -86,6 +91,12 @@
   --n-active-background: var(--n-indigo-150);
   --n-thumbnail-background: #f0efff;
   --n-thumbnail-shadow: #d3ceed66;
+  --n-banner-info-background: var(--n-indigo-50);
+  --n-banner-info-border: var(--n-divider-strong);
+  --n-banner-info-text: #6579aa;
+  --n-banner-error-background: #ffe2e2;
+  --n-banner-error-border: var(--n-divider-strong);
+  --n-banner-error-text: #be1d1d;
   --n-inline-code-text: var(--n-primary-600);
   --n-inline-code-background: rgb(240, 242, 246);
   --n-text-link: var(--n-primary-600);
@@ -141,6 +152,14 @@
   --n-cm-error: #e45649;
   --n-cm-warning: #fb9d00;
   --n-cm-info: #3390ff;
+
+  .bg-sidebar-background {
+    --n-list-view-thumbnail-background: hsl(220 33% 97% / 1);
+  }
+
+  .bg-canvas-background {
+    --n-list-view-thumbnail-background: hsl(220 43% 95% / 1);
+  }
 }
 
 [data-theme="dark"] {
@@ -168,6 +187,7 @@
   --n-button-background-active-hover: var(--n-primary-600);
   --n-button-text: var(--n-text);
   --n-button-text-active: var(--n-primary-100);
+  --n-primary-ring: color-mix(in srgb, var(--n-primary) 45%, transparent);
   --n-secondary-bright: #36fe91;
   --n-code-background: rgb(20, 19, 23);
   --n-toolbar-drawer-background: color-mix(
@@ -224,14 +244,8 @@
   --n-cm-info: #3390ff;
 }
 
-.noya-styles {
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-
-  .markdown-editor-line-placeholder::after {
-    content: var(--n-markdown-editor-line-placeholder-content);
-    color: var(--n-text-disabled);
-    pointer-events: none;
-  }
+.markdown-editor-line-placeholder::after {
+  content: var(--n-markdown-editor-line-placeholder-content);
+  color: var(--n-text-disabled);
+  pointer-events: none;
 }

package/src/index.tsx

@@ -1,6 +1,7 @@
 // Components
 export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
+export * from "./components/ActivityLog";
 export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
@@ -27,10 +28,7 @@ export * from "./components/EditableText";
 export * from "./components/Fade";
 export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FileUploadIndicator";
-export * from "./components/FillInputField";
-export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
-export * from "./components/GradientPicker";
 export * from "./components/Grid";
 export * from "./components/GridView";
 export * from "./components/IconButton";
@@ -44,17 +42,24 @@ export type {
   SelectableMenuItem,
 } from "./components/internal/Menu";
 export * from "./components/internal/MenuViewport";
+export * from "./components/IVirtualizedList";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/LabeledField";
 export * from "./components/List";
+export * from "./components/ListMenu";
+export * from "./components/ListNavigator";
 export * from "./components/ListView";
 export * from "./components/MediaThumbnail";
 export * from "./components/Message";
+export * from "./components/Navigator";
 export * from "./components/NoyaLogo";
 export * from "./components/pipeline/PipelineResultLayout";
 export * from "./components/Popover";
 export * from "./components/Progress";
+export * from "./components/ResizableContainer";
+export * from "./components/RingProgress";
+export * from "./components/ScrollableSidebar";
 export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/Section";
@@ -67,6 +72,8 @@ export * from "./components/sorting/SharedDragProvider";
 export * from "./components/sorting/Sortable";
 export * from "./components/sorting/sorting";
 export * from "./components/Spacer";
+export * from "./components/StackNavigator";
+export * from "./components/Stepper";
 export * from "./components/Switch";
 export * from "./components/Tabs";
 export * from "./components/Text";
@@ -96,7 +103,6 @@ export * from "./theme";
 export * from "./utils/classNames";
 export * from "./utils/createSectionedMenu";
 export * from "./utils/formatByteSize";
-export * from "./utils/getGradientBackground";
 // Utils
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
@@ -104,7 +110,6 @@ export * from "./utils/editableBlockStyles";
 export * from "./utils/fuzzyScorer";
 export * from "./utils/moveTreeItem";
 export * from "./utils/selection";
-export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";
 

package/src/utils/classNames.ts

@@ -1,19 +1,42 @@
 import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
-type Category = "text" | "color" | "font" | "flex" | "position";
+type Category =
+  | "text"
+  | "color"
+  | "font"
+  | "flex"
+  | "position"
+  | "textAlign"
+  | "rounded";
 type Options = {
   categories?: Category[];
 };
 
+const TAILWIND_PREFIX = tailwindConfig.prefix ?? "";
+
+function withTailwindPrefix(className: string): string {
+  return `${TAILWIND_PREFIX}${className}`;
+}
+
+function createPrefixedClassSet(classNames: string[]): Set<string> {
+  if (!TAILWIND_PREFIX) {
+    return new Set(classNames);
+  }
+
+  const prefixedClassNames = classNames.map(withTailwindPrefix);
+
+  return new Set([...classNames, ...prefixedClassNames]);
+}
+
 const colorKeys = Object.keys(tailwindConfig.theme.extend.colors).map(
   (key) => `text-${key}`
 );
-const colorKeysSet = new Set(colorKeys);
+const colorKeysSet = createPrefixedClassSet(colorKeys);
 const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
   (key) => `text-${key}`
 );
-const textKeysSet = new Set(textKeys);
+const textKeysSet = createPrefixedClassSet(textKeys);
 const fontKeys = [
   "thin",
   "extralight",
@@ -25,20 +48,43 @@ const fontKeys = [
   "extra-bold",
   "black",
 ].map((key) => `font-${key}`);
-const fontKeysSet = new Set(fontKeys);
-const flexKeysSet = new Set([
+const fontKeysSet = createPrefixedClassSet(fontKeys);
+const flexKeysSet = createPrefixedClassSet([
   "flex-auto",
   "flex-none",
   "flex-[0_0_auto]",
   "flex-1",
 ]);
-const positionKeysSet = new Set(["absolute", "relative", "fixed", "sticky"]);
+const positionKeysSet = createPrefixedClassSet([
+  "absolute",
+  "relative",
+  "fixed",
+  "sticky",
+]);
+const roundedKeysSet = createPrefixedClassSet([
+  "rounded",
+  "rounded-sm",
+  "rounded-md",
+  "rounded-lg",
+  "rounded-xl",
+  "rounded-2xl",
+  "rounded-3xl",
+  "rounded-full",
+  "rounded-none",
+]);
+const textAlignKeysSet = createPrefixedClassSet([
+  "text-left",
+  "text-center",
+  "text-right",
+]);
 const keyMap: Record<Category, Set<string>> = {
   text: textKeysSet,
   flex: flexKeysSet,
   color: colorKeysSet,
   font: fontKeysSet,
   position: positionKeysSet,
+  textAlign: textAlignKeysSet,
+  rounded: roundedKeysSet,
 };
 
 export function cx(...args: ClassNameItem[]): string | undefined {

package/src/utils/editableBlockStyles.ts

@@ -4,7 +4,7 @@ export const editableBlockStyles = (
   viewType: "editable" | "readOnly" | "preview" = "editable"
 ) =>
   cx(
-    "relative outline-primary focus:outline focus:outline-1",
+    "n-relative n-outline-primary focus:n-outline focus:n-outline-1",
     viewType !== "preview" &&
-      "hover:outline-2 [&:not(:has([data-editor-selectable-block]:hover))]:hover:outline"
+      "hover:n-outline-2 [&:not(:has([data-editor-selectable-block]:hover))]:hover:n-outline"
   );

package/src/utils/formatByteSize.ts

@@ -1,6 +1,7 @@
 const byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
 export function formatByteSize(size: number) {
+  if (size === 0) return "0 B";
   const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
   const unit = byteSizeUnits[unitIndex];
   const value = size / Math.pow(1024, unitIndex);

package/src/utils/inputs.ts

@@ -2,20 +2,22 @@ import { cx } from "./classNames";
 
 export type InputSize = "small" | "medium" | "large";
 
-const insetEndBaseStyles = "absolute inset-y-0 flex items-center z-label";
+const insetEndBaseStyles =
+  "n-absolute n-inset-y-0 n-flex n-items-center n-z-label";
 
 export const getInsetEndStyles = (size: InputSize = "medium") => {
   return cx(
     insetEndBaseStyles,
     size === "large"
-      ? "right-2"
+      ? "n-right-2"
       : size === "medium"
-        ? "right-1.5"
+        ? "n-right-1.5"
         : size === "small"
-          ? "right-0.5"
+          ? "n-right-0.5"
           : "",
-    size === "small" ? "min-h-[19px]" : "min-h-input-height"
+    size === "small" ? "n-min-h-[19px]" : "n-min-h-input-height"
   );
 };
 
-export const startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";
+export const startBaseStyles =
+  "n-absolute n-left-1.5 n-inset-y-0 n-flex n-items-center";

package/src/utils/sketchColor.ts

@@ -1,34 +0,0 @@
-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/tailwind.config.ts

@@ -4,6 +4,7 @@ import type { Config } from "tailwindcss";
 
 const config = {
   ...noyaConfig,
+  prefix: "n-",
   plugins: [containerQueries],
 } satisfies Config;
 

package/src/components/FillInputField.tsx

@@ -1,37 +0,0 @@
-import { Sketch } from "@noya-app/noya-file-format";
-import React, { forwardRef, memo } from "react";
-import { cx } from "../utils/classNames";
-import { SketchPattern } from "../utils/sketchPattern";
-import { FillPreviewBackground } from "./FillPreviewBackground";
-
-const FillButton = forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->(({ className, ...props }, ref) => (
-  <button
-    ref={ref}
-    className={cx(
-      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--n-divider)_inset] bg-transparent relative focus:shadow-active-input `,
-      className
-    )}
-    {...props}
-  />
-));
-
-interface Props {
-  id?: string;
-  value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-}
-
-export const FillInputField = memo(
-  forwardRef<HTMLButtonElement, Props>(function FillInputField(
-    { id, value, ...rest },
-    ref
-  ) {
-    return (
-      <FillButton ref={ref} id={id} {...rest}>
-        <FillPreviewBackground value={value} />
-      </FillButton>
-    );
-  })
-);

package/src/components/FillPreviewBackground.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { Sketch } from "@noya-app/noya-file-format";
-// import { useSketchImage } from 'noya-renderer';
-import * as React from "react";
-import { useImageData } from "../contexts/ImageDataContext";
-import { useObjectURL } from "../hooks/useObjectURL";
-import { cssVars } from "../theme";
-import { getGradientBackground } from "../utils/getGradientBackground";
-import { sketchColorToRgbaString } from "../utils/sketchColor";
-import { SketchPattern } from "../utils/sketchPattern";
-
-const dotsHorizontalSvg = (fillColor: string) => `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${fillColor}'>
-    <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
-  </svg>
-`;
-
-const Background = React.memo(function Background({
-  background,
-}: {
-  background?: string;
-}) {
-  return (
-    <span
-      className={`${background ? `bg-[${background}]` : "bg-input-background"} absolute inset-0`}
-    />
-  );
-});
-
-function getPatternSizeAndPosition(
-  fillType: Sketch.PatternFillType,
-  tileScale: number
-) {
-  switch (fillType) {
-    case Sketch.PatternFillType.Fit:
-      return "center / contain";
-    case Sketch.PatternFillType.Tile:
-      return `top left / ${tileScale * 100}%`;
-    case Sketch.PatternFillType.Fill:
-      return "center / cover";
-    case Sketch.PatternFillType.Stretch:
-      return "center / 100% 100%";
-  }
-}
-
-export const PatternPreviewBackground = React.memo(
-  function PatternPreviewBackground({
-    fillType,
-    tileScale,
-    imageRef,
-  }: {
-    fillType: Sketch.PatternFillType;
-    tileScale: number;
-    imageRef: string;
-  }) {
-    const image = useImageData(imageRef);
-
-    const url = useObjectURL(image);
-
-    const size = getPatternSizeAndPosition(fillType, tileScale);
-
-    const background = React.useMemo(
-      () =>
-        [
-          size,
-          `url(${url})`,
-          fillType === Sketch.PatternFillType.Tile ? "repeat" : "no-repeat",
-        ].join(" "),
-      [fillType, size, url]
-    );
-
-    return <Background background={background} />;
-  }
-);
-
-const ColorPreviewBackground = React.memo(function ColorPreviewBackground({
-  color,
-}: {
-  color: Sketch.Color;
-}) {
-  const background = React.useMemo(
-    () => sketchColorToRgbaString(color),
-    [color]
-  );
-
-  return <Background background={background} />;
-});
-
-const GradientPreviewBackground = React.memo(
-  function GradientPreviewBackground({
-    gradient,
-  }: {
-    gradient: Sketch.Gradient;
-  }) {
-    const background = React.useMemo(
-      () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
-      [gradient.gradientType, gradient.stops]
-    );
-
-    return <Background background={background} />;
-  }
-);
-
-interface Props {
-  value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-}
-
-const background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
-  cssVars.colors.placeholderDots
-)}") no-repeat`;
-
-export const FillPreviewBackground = React.memo(function FillPreviewBackground({
-  value,
-}: Props) {
-  if (!value) return <Background background={background} />;
-
-  switch (value._class) {
-    case "color":
-      return <ColorPreviewBackground color={value} />;
-    case "gradient":
-      return <GradientPreviewBackground gradient={value} />;
-    case "pattern":
-      if (!value.image) return null;
-
-      return (
-        <PatternPreviewBackground
-          fillType={value.patternFillType}
-          tileScale={value.patternTileScale}
-          imageRef={value.image._ref}
-        />
-      );
-  }
-});