@noya-app/noya-designsystem 0.1.46 → 0.1.48

package/src/contexts/DialogContext.tsx

@@ -24,25 +24,26 @@ function createDeferredPromise<T>() {
   return { promise, resolve, reject };
 }
 
+type RenderableProps = { close: () => void };
+
 export type DialogContextValue = {
+  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;
@@ -50,23 +51,35 @@ 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 DialogContents = InputDialogContents | ConfirmationDialogContents;
+type CustomDialogContents = BaseDialogContents & {
+  type: "custom";
+  children: ReactNode;
+  resolve: () => void;
+};
+
+type DialogContents =
+  | InputDialogContents
+  | ConfirmationDialogContents
+  | CustomDialogContents;
 
 export const DialogProvider = function DialogProvider({
   children,
@@ -78,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;
 
@@ -98,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({
@@ -107,6 +124,8 @@ export const DialogProvider = function DialogProvider({
       description,
       inputValue: initialValue ?? "",
       placeholder,
+      style,
+      className,
       resolve: (value: string | undefined) => {
         resolve(value);
         setContents(undefined);
@@ -120,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);
@@ -136,6 +157,35 @@ export const DialogProvider = function DialogProvider({
       return promise;
     }, []);
 
+  const openCustomDialog: DialogContextValue["openDialog"] = useCallback(
+    (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,
+        description,
+        style,
+        className,
+        children,
+        resolve: () => {
+          resolve();
+          setContents(undefined);
+        },
+      });
+
+      return promise;
+    },
+    []
+  );
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key !== "Enter") return;
@@ -162,11 +212,12 @@ export const DialogProvider = function DialogProvider({
       <DialogContext.Provider
         value={useMemo(
           () => ({
+            openDialog: openCustomDialog,
             openInputDialog: open,
             openConfirmationDialog: openConfirmation,
             containsElement,
           }),
-          [containsElement, open, openConfirmation]
+          [containsElement, open, openConfirmation, openCustomDialog]
         )}
       >
         {children}
@@ -176,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) {
@@ -221,12 +274,16 @@ export const DialogProvider = function DialogProvider({
               OK
             </Button>
           </div>
+        ) : contents?.type === "custom" ? (
+          <>{contents.children}</>
         ) : (
           <>
             <InputField.Root>
               <InputField.Input
                 ref={inputRef}
-                placeholder={contents?.placeholder}
+                placeholder={
+                  contents?.type === "input" ? contents.placeholder : undefined
+                }
                 value={contents?.type === "input" ? contents.inputValue : ""}
                 onChange={(value: string) => {
                   setContents((contents) =>
@@ -262,7 +319,7 @@ export const DialogProvider = function DialogProvider({
   );
 };
 
-function useDialog(): DialogContextValue {
+export function useDialogContext(): DialogContextValue {
   const value = useContext(DialogContext);
 
   if (!value) {
@@ -273,13 +330,17 @@ function useDialog(): DialogContextValue {
 }
 
 export function useOpenInputDialog() {
-  return useDialog().openInputDialog;
+  return useDialogContext().openInputDialog;
 }
 
 export function useDialogContainsElement() {
-  return useDialog().containsElement;
+  return useDialogContext().containsElement;
 }
 
 export function useOpenConfirmationDialog() {
-  return useDialog().openConfirmationDialog;
+  return useDialogContext().openConfirmationDialog;
+}
+
+export function useOpenDialog() {
+  return useDialogContext().openDialog;
 }

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);
@@ -104,7 +105,8 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
-  --slider-thumb-background: rgb(248, 248, 250);
+  --slider-thumb-background: var(--input-background-light);
+  --slider-border: var(--divider);
   --mask: rgb(102, 187, 106);
   --transparent-checker: rgba(255, 255, 255, 0.3);
   --scrollbar: rgba(199, 199, 199, 0.2);

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: {