@noya-app/noya-designsystem 0.1.47 → 0.1.48

package/src/contexts/DialogContext.tsx

@@ -24,31 +24,26 @@ function createDeferredPromise<T>() {
   return { promise, resolve, reject };
 }
 
+type RenderableProps = { close: () => void };
+
 export type DialogContextValue = {
-  openDialog(options: {
-    title: string;
-    description?: ReactNode;
-    children: ReactNode;
-  }): Promise<void>;
+  openDialog(
+    options: BaseDialogContents & {
+      children: ReactNode | ((props: RenderableProps) => ReactNode);
+    }
+  ): Promise<void>;
 
   openInputDialog(
     options:
       | string
-      | {
-          title: string;
-          description?: ReactNode;
+      | (BaseDialogContents & {
           placeholder?: string;
           initialValue?: string;
-        }
+        })
   ): Promise<string | undefined>;
 
   openConfirmationDialog(
-    options:
-      | string
-      | {
-          title: string;
-          description?: ReactNode;
-        }
+    options: string | BaseDialogContents
   ): Promise<boolean>;
 
   containsElement(element: HTMLElement): boolean;
@@ -56,26 +51,27 @@ export type DialogContextValue = {
 
 const DialogContext = createContext<DialogContextValue | undefined>(undefined);
 
-type InputDialogContents = {
-  type: "input";
+type BaseDialogContents = {
+  style?: React.CSSProperties;
+  className?: string;
   title: string;
   description?: ReactNode;
+};
+
+type InputDialogContents = BaseDialogContents & {
+  type: "input";
   placeholder?: string;
   inputValue: string;
   resolve: (value: string | undefined) => void;
 };
 
-type ConfirmationDialogContents = {
+type ConfirmationDialogContents = BaseDialogContents & {
   type: "confirmation";
-  title: string;
-  description?: ReactNode;
   resolve: (value: boolean) => void;
 };
 
-type CustomDialogContents = {
+type CustomDialogContents = BaseDialogContents & {
   type: "custom";
-  title: string;
-  description?: ReactNode;
   children: ReactNode;
   resolve: () => void;
 };
@@ -95,16 +91,20 @@ export const DialogProvider = function DialogProvider({
   const isOpen = !!contents;
 
   const close = useCallback(() => {
-    if (!contents) return;
-
-    if (contents.type === "input") {
-      contents.resolve(undefined);
-    } else {
-      contents.resolve(false);
+    if (contents) {
+      if (contents.type === "input") {
+        contents.resolve(undefined);
+      } else {
+        contents.resolve(false);
+      }
     }
+
     setContents(undefined);
   }, [contents]);
 
+  const closeRef = useRef(close);
+  closeRef.current = close;
+
   const submit = useCallback(() => {
     if (!contents || contents.type !== "input") return;
 
@@ -115,7 +115,7 @@ export const DialogProvider = function DialogProvider({
   const open: DialogContextValue["openInputDialog"] = useCallback((options) => {
     const { promise, resolve } = createDeferredPromise<string | undefined>();
 
-    const { title, description, initialValue, placeholder } =
+    const { title, description, initialValue, placeholder, style, className } =
       typeof options === "string" ? { title: options } : options;
 
     setContents({
@@ -124,6 +124,8 @@ export const DialogProvider = function DialogProvider({
       description,
       inputValue: initialValue ?? "",
       placeholder,
+      style,
+      className,
       resolve: (value: string | undefined) => {
         resolve(value);
         setContents(undefined);
@@ -137,13 +139,15 @@ export const DialogProvider = function DialogProvider({
     useCallback((options) => {
       const { promise, resolve } = createDeferredPromise<boolean>();
 
-      const { title, description } =
+      const { title, description, style, className } =
         typeof options === "string" ? { title: options } : options;
 
       setContents({
         type: "confirmation",
         title,
         description,
+        style,
+        className,
         resolve: (value: boolean) => {
           resolve(value);
           setContents(undefined);
@@ -157,11 +161,20 @@ export const DialogProvider = function DialogProvider({
     (options) => {
       const { promise, resolve } = createDeferredPromise<void>();
 
+      const { title, description, style, className } = options;
+
+      const children =
+        typeof options.children === "function"
+          ? options.children({ close: closeRef.current })
+          : options.children;
+
       setContents({
         type: "custom",
-        title: options.title,
-        description: options.description,
-        children: options.children,
+        title,
+        description,
+        style,
+        className,
+        children,
         resolve: () => {
           resolve();
           setContents(undefined);
@@ -214,6 +227,8 @@ export const DialogProvider = function DialogProvider({
         title={contents?.title}
         description={contents?.description}
         open={isOpen}
+        style={contents?.style}
+        className={contents?.className}
         onOpenChange={useCallback(
           (isOpen: boolean) => {
             if (!isOpen) {

package/src/hooks/usePreservePanelSize.tsx

@@ -1,5 +1,6 @@
 import React, { useLayoutEffect, useRef } from "react";
 import { ImperativePanelGroupHandle } from "react-resizable-panels";
+import { PanelLayoutState } from "../components/workspace/types";
 import { useWindowSize } from "./useWindowSize";
 
 export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -7,11 +8,6 @@ export const LEFT_SIDEBAR_ID = "editor-left-sidebar";
 export const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 export const CONTENT_AREA_ID = "editor-content-area";
 
-export type PanelLayoutState = {
-  leftSidebarCollapsed: boolean;
-  rightSidebarCollapsed: boolean;
-};
-
 export function usePreservePanelSize(
   panelGroupRef: React.RefObject<ImperativePanelGroupHandle | null>,
   setPanelLayoutState?: (state: PanelLayoutState) => void

package/src/index.css

@@ -58,6 +58,7 @@
   --inspector-h-separator: 8px;
   --inspector-v-separator: 10px;
   --dialog-padding: 16px;
+  --input-height: 27px;
   --icon: rgb(129, 131, 165);
   --icon-selected: rgb(220, 220, 220);
   --warning: rgb(251, 211, 0);

package/src/index.tsx

@@ -14,6 +14,7 @@ export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
+export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
@@ -39,6 +40,7 @@ export * from "./components/LabeledElementView";
 export * from "./components/LabeledField";
 export * from "./components/List";
 export * from "./components/ListView";
+export * from "./components/MediaThumbnail";
 export * from "./components/Message";
 export * from "./components/Popover";
 export * from "./components/Progress";
@@ -57,7 +59,8 @@ export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/TreeView";
 export * from "./components/UserPointer";
-export * from "./components/WorkspaceLayout";
+export * from "./components/workspace/types";
+export * from "./components/workspace/WorkspaceLayout";
 // Contexts
 export * from "./contexts/DesignSystemConfiguration";
 export * from "./contexts/DialogContext";

package/tailwind.config.ts

@@ -189,6 +189,7 @@ const config = {
         "inspector-h-separator": "var(--inspector-h-separator)",
         "inspector-v-separator": "var(--inspector-v-separator)",
         "dialog-padding": "var(--dialog-padding)",
+        "input-height": "var(--input-height)",
       },
       keyframes: {
         spin: {