@noya-app/noya-designsystem 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -36,7 +36,7 @@
     "@radix-ui/react-utils": "^0.0.5",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
-    "react-resizable-panels": "2.0.16",
+    "react-resizable-panels": "2.0.22",
     "react-virtualized": "^9.22.3",
     "react-window": "^1.8.8",
     "vscode-fuzzy-scorer": "^0.0.4"

package/src/components/Chip.tsx

@@ -46,7 +46,8 @@ const ChipElement = styled.span<{
     userSelect: "none",
     display: "inline-flex",
     alignItems: "center",
-    lineHeight: "1.4",
+    // lineHeight: "1.4",
+    lineHeight: "15px",
     whiteSpace: "pre",
     ...($size === "medium"
       ? {
@@ -56,7 +57,6 @@ const ChipElement = styled.span<{
       : {
           fontSize: "9px",
           padding: "0px 4px",
-          lineHeight: "15px",
         }),
     ...($monospace && {
       fontFamily: theme.fonts.monospace,

package/src/components/InputField.tsx

@@ -322,7 +322,11 @@ export const InputElement = styled(TextInput)<{
 
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
-  props: TextInputProps & {
+  {
+    textAlign,
+    variant,
+    ...rest
+  }: TextInputProps & {
     textAlign?: Property.TextAlign;
     variant?: "bare";
   },
@@ -357,8 +361,10 @@ const InputFieldInput = forwardRef(function InputFieldInput(
       $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
+      $variant={variant}
+      $textAlign={textAlign}
       onFocusChange={handleFocusChange}
-      {...props}
+      {...rest}
     />
   );
 });

package/src/components/WorkspaceLayout.tsx

@@ -1,4 +1,4 @@
-import { Stack, useDesignSystemTheme } from "@noya-app/noya-designsystem";
+import { useDesignSystemTheme } from "@noya-app/noya-designsystem";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import {
@@ -26,9 +26,24 @@ interface Props {
   hasRightSidebar?: boolean;
   hasLeftSidebar?: boolean;
   onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
-  leftSidebarInitialSize?: number;
-  rightSidebarInitialSize?: number;
   leftSidebarCanResize?: boolean;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+
+  /**
+   * Accepts a number (px) or % string (e.g. "50%").
+   * Use % to avoid flicker server-rendering.
+   */
+  leftSidebarInitialSize?: number | string;
+  leftSidebarMinSize?: number | string;
+
+  /**
+   * Accepts a number (px) or % string (e.g. "50%").
+   * Use % to avoid flicker server-rendering.
+   */
+  rightSidebarInitialSize?: number | string;
+  rightSidebarMinSize?: number | string;
 }
 
 export type IWorkspaceLayout = {
@@ -50,15 +65,32 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     onChangeLayoutState,
     leftSidebarInitialSize = 280,
     rightSidebarInitialSize = 400,
+    leftSidebarMinSize,
+    rightSidebarMinSize,
     leftSidebarCanResize = false,
+    id,
+    className,
+    style,
   }: Props,
   forwardedRef: React.ForwardedRef<IWorkspaceLayout>
 ) {
   const windowSize = useWindowSize();
-  const leftSidebarPercentage =
-    (leftSidebarInitialSize / windowSize.width) * 100;
-  const rightSidebarPercentage =
-    (rightSidebarInitialSize / windowSize.width) * 100;
+  function getPercentage(size: number | string) {
+    return typeof size === "string"
+      ? parseFloat(size)
+      : (size / windowSize.width) * 100;
+  }
+  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
+  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
+  const leftSidebarMinPercentage =
+    leftSidebarMinSize !== undefined
+      ? getPercentage(leftSidebarMinSize)
+      : undefined;
+  const rightSidebarMinPercentage =
+    rightSidebarMinSize !== undefined
+      ? getPercentage(rightSidebarMinSize)
+      : undefined;
+
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
   const rightSidebarRef = useRef<ImperativePanelHandle>(null);
@@ -129,8 +161,22 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     },
   });
 
+  const centerPanelPercentage =
+    100 -
+    (leftPanelContent ? leftSidebarPercentage : 0) -
+    (rightPanelContent ? rightSidebarPercentage : 0);
+
   return (
-    <Stack.H flex="1">
+    <div
+      id={id}
+      className={className}
+      style={{
+        backgroundColor: theme.colors.canvas.background,
+        display: "flex",
+        flexDirection: "row",
+        ...style,
+      }}
+    >
       <PanelGroup
         ref={panelGroupRef}
         id={EDITOR_PANEL_GROUP_ID}
@@ -149,7 +195,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
               order={1}
               ref={leftSidebarRef}
               defaultSize={leftSidebarPercentage}
-              minSize={leftSidebarPercentage}
+              minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
               {...(!leftSidebarCanResize && { maxSize: leftSidebarPercentage })}
               collapsible
               style={{
@@ -172,6 +218,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
         <Panel
           id={CONTENT_AREA_ID}
           order={2}
+          defaultSize={centerPanelPercentage}
           minSize={10}
           style={{
             display: "flex",
@@ -194,7 +241,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
               id={RIGHT_SIDEBAR_ID}
               order={3}
               ref={rightSidebarRef}
-              minSize={rightSidebarPercentage}
+              minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
               defaultSize={rightSidebarPercentage}
               collapsible
               style={{
@@ -207,6 +254,6 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
           </>
         )}
       </PanelGroup>
-    </Stack.H>
+    </div>
   );
 });

package/src/theme/light.ts

@@ -162,7 +162,8 @@ export const textStyles = {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 400,
-    lineHeight: "1.4",
+    lineHeight: "19px",
+    // lineHeight: "1.4",
   } as CSSObject,
   button: {
     fontFamily: fonts.normal,