@noya-app/noya-designsystem 0.1.29 → 0.1.31

package/src/components/SelectMenu.tsx

@@ -1,11 +1,13 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React, { CSSProperties, memo } from "react";
+import { type SelectProps } from "@radix-ui/react-select";
+import React, { CSSProperties, memo, useMemo } from "react";
 import { styled } from "styled-components";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
+import { Stack } from "./Stack";
 
 type Props<T extends string> = {
   id?: string;
@@ -17,7 +19,8 @@ type Props<T extends string> = {
   placeholder?: string;
   disabled?: boolean;
   readOnly?: boolean;
-};
+  label?: React.ReactNode;
+} & Pick<SelectProps, "open">;
 
 const readOnlyStyle: CSSProperties = {
   justifyContent: "flex-start",
@@ -28,6 +31,25 @@ const flexStyle: CSSProperties = {
   flex: 1,
 };
 
+const textStyle: CSSProperties = {
+  fontSize: "0.85rem",
+};
+
+const SelectLabel = styled.label(({ theme }) => ({
+  ...theme.textStyles.label,
+  color: theme.colors.textDisabled,
+  lineHeight: "19px",
+  position: "absolute",
+  inset: "0",
+  fontWeight: "bold",
+  fontSize: "60%",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "end",
+  paddingRight: "24px",
+}));
+
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   id,
   style,
@@ -38,6 +60,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   placeholder,
   disabled,
   readOnly,
+  label,
+  open,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -45,11 +69,11 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   );
   const icon = selectedItem?.icon;
 
-  if (readOnly) {
-    return (
+  const readOnlyButton = useMemo(
+    () => (
       <Button
         id={id}
-        style={style}
+        style={{ ...style, ...flexStyle }}
         contentStyle={readOnlyStyle}
         className={className}
         disabled={disabled}
@@ -60,15 +84,23 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
             <Spacer.Horizontal inline size={6} />
           </>
         )}
-        <span style={flexStyle}>{selectedItem?.title ?? value}</span>
+        <span style={{ ...flexStyle, ...textStyle }}>
+          {selectedItem?.title ?? value}
+        </span>
       </Button>
-    );
-  }
+    ),
+    [icon, id, style, className, disabled, value, selectedItem]
+  );
 
-  return (
-    <Select.Root value={value} onValueChange={onSelect}>
+  const trigger = useMemo(
+    () => (
       <Select.SelectTrigger asChild>
-        <Button id={id} style={style} className={className} disabled={disabled}>
+        <Button
+          id={id}
+          style={{ ...textStyle, ...style, ...flexStyle }}
+          className={className}
+          disabled={disabled}
+        >
           {icon && (
             <>
               {renderIcon(icon)}
@@ -82,6 +114,31 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>
+    ),
+    [icon, id, style, className, disabled, placeholder]
+  );
+
+  if (readOnly) {
+    return label ? (
+      <Stack.V position="relative">
+        {readOnlyButton}
+        <SelectLabel htmlFor={id}>{label}</SelectLabel>
+      </Stack.V>
+    ) : (
+      readOnlyButton
+    );
+  }
+
+  return (
+    <Select.Root value={value} onValueChange={onSelect} open={open}>
+      {label ? (
+        <Stack.V position="relative" style={flexStyle}>
+          {trigger}
+          <SelectLabel htmlFor={id}>{label}</SelectLabel>
+        </Stack.V>
+      ) : (
+        trigger
+      )}
       <Select.Portal>
         <SelectContent>
           <SelectViewport>
@@ -126,7 +183,7 @@ const SelectItem = React.forwardRef(
             <Spacer.Horizontal size={8} />
           </>
         )}
-        <Select.ItemText>{children}</Select.ItemText>
+        <Select.ItemText style={textStyle}>{children}</Select.ItemText>
       </StyledItem>
     );
   }

package/src/components/Stack.tsx

@@ -12,7 +12,7 @@ import { BreakpointCollection, mergeBreakpoints } from "../utils/breakpoints";
 import withSeparatorElements from "../utils/withSeparatorElements";
 
 interface StyleProps {
-  display?: "flex" | "inline-flex" | "none" | "block";
+  display?: CSSProperties["display"];
   visibility?: CSSProperties["visibility"];
   position?: CSSProperties["position"];
   zIndex?: CSSProperties["zIndex"];
@@ -78,6 +78,7 @@ interface Props extends StyleProps {
   breakpoints?: StackBreakpointList | null | false;
   href?: string; // Shouldn't be here, ideally
   tabIndex?: number;
+  style?: StyleProps;
 }
 
 const Element = styled.div<{
@@ -98,6 +99,10 @@ const StackBase = forwardRef(function StackBase(
     breakpoints,
     tabIndex,
     href,
+    paddingHorizontal,
+    paddingVertical,
+    padding,
+    style,
     ...rest
   }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
@@ -110,7 +115,11 @@ const StackBase = forwardRef(function StackBase(
     display: "flex",
     position: "relative",
     alignItems: "stretch",
+    padding:
+      padding ||
+      `${paddingVertical ?? 0} ${paddingHorizontal ?? 0} ${paddingVertical ?? 0} ${paddingHorizontal ?? 0}`,
     ...rest,
+    ...style,
   };
 
   return (

package/src/components/Switch.tsx

@@ -44,6 +44,7 @@ const SwitchThumb = styled(SwitchPrimitive.Thumb)({
 interface Props {
   value: boolean;
   onChange: (value: boolean) => void;
+  /** @default normal */
   colorScheme?: SwitchColorScheme;
   disabled?: boolean;
 }

package/src/components/WorkspaceLayout.tsx

@@ -3,7 +3,13 @@ import {
   useDesignSystemTheme,
 } from "@noya-app/noya-designsystem";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, { forwardRef, memo, useImperativeHandle, useRef } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -98,7 +104,17 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
   const rightSidebarRef = useRef<ImperativePanelHandle>(null);
 
-  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const [internalLayoutState, setInternalLayoutState] =
+    useState<PanelLayoutState | null>(null);
+  const handleChangeLayoutState = useCallback(
+    (state: PanelLayoutState) => {
+      setInternalLayoutState(state);
+      onChangeLayoutState?.(state);
+    },
+    [onChangeLayoutState]
+  );
+
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
 
   const theme = useDesignSystemTheme();
 
@@ -207,7 +223,9 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 position: "relative",
               }}
             >
-              {leftPanelContent}
+              {internalLayoutState?.leftSidebarCollapsed
+                ? null
+                : leftPanelContent}
             </Panel>
             <PanelResizeHandle
               style={{
@@ -255,7 +273,9 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 position: "relative",
               }}
             >
-              {rightPanelContent}
+              {internalLayoutState?.rightSidebarCollapsed
+                ? null
+                : rightPanelContent}
             </Panel>
           </>
         )}
@@ -264,10 +284,13 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
   );
 });
 
-export const WorkspaceLayout = memo(function WorkspaceLayout(props: Props) {
+export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
+  props: Props,
+  forwardedRef: React.ForwardedRef<IWorkspaceLayout>
+) {
   return (
     <DesignSystemThemeProvider>
-      <WorkspaceLayoutWithTheme {...props} />
+      <WorkspaceLayoutWithTheme {...props} ref={forwardedRef} />
     </DesignSystemThemeProvider>
   );
 });

package/src/index.tsx

@@ -41,7 +41,6 @@ export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/RadioGroup";
 export * from "./components/ScrollArea";
-export * from "./components/Select";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
 export * from "./components/Sortable";
@@ -76,6 +75,7 @@ export * as darkTheme from "./theme/dark";
 export * as lightTheme from "./theme/light";
 export * from "./utils/createSectionedMenu";
 export * from "./utils/getGradientBackground";
+export * from "./hooks/usePreservePanelSize";
 // Utils
 export * from "./utils/completions";
 export * from "./utils/fuzzyScorer";
@@ -84,6 +84,5 @@ export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";
 
 // Avoid dependency cycles
-export * from "./components/ArrayController";
 export * from "./components/DimensionInput";
 export * as InspectorPrimitives from "./components/InspectorPrimitives";

package/tailwind.config.ts

@@ -0,0 +1,283 @@
+import { Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  // if you add the dark className anywhere in the DOM tree all descendants will use dark style variables
+  darkMode: "class",
+  theme: {
+    extend: {
+      // colors should alway have a flat structure with the exception of dark/DEFAULT variables
+      // keys should always be kebab-case, since that's the tailwind convention
+      colors: {
+        "logo-fill": {
+          DEFAULT: "rgb(150, 152, 172)",
+          dark: "rgb(248, 248, 250)",
+        },
+        "logo-highlight": {
+          DEFAULT: "rgb(150, 152, 172)",
+          dark: "rgb(248, 248, 250)",
+        },
+        background: "rgb(255, 255, 255)",
+        text: {
+          DEFAULT: "rgb(38, 48, 83)",
+          dark: "rgb(248, 248, 250)",
+        },
+        "text-muted": {
+          DEFAULT: "rgb(107, 113, 136)",
+          dark: "rgb(180, 179, 182)",
+        },
+        "text-subtle": {
+          DEFAULT: "rgb(117, 121, 129)",
+          dark: "rgb(180, 179, 182)",
+        },
+        "text-disabled": {
+          DEFAULT: "rgb(150, 152, 172)",
+          dark: "rgb(100, 99, 102)",
+        },
+        "text-decorative": {
+          light: "rgb(168, 185, 212)",
+        },
+        "divider-subtle": {
+          DEFAULT: "rgba(30, 50, 100, 0.04)",
+          dark: "rgba(255, 255, 255, 0.04)",
+        },
+        divider: {
+          DEFAULT: "rgba(30, 50, 100, 0.07)",
+          dark: "rgba(255, 255, 255, 0.08)",
+        },
+        "divider-strong": {
+          DEFAULT: "rgba(30, 50, 100, 0.09)",
+          dark: "rgba(0, 0, 0, 1)",
+        },
+        primary: {
+          DEFAULT: "rgb(103, 70, 255)",
+          dark: "rgb(119, 66, 255)",
+        },
+        "primary-light": {
+          DEFAULT: "rgb(147, 86, 255)",
+          dark: "rgb(134, 86, 255)",
+        },
+        "primary-pastel": "rgba(234, 230, 255)",
+        secondary: "rgb(0, 151, 117)",
+        "secondary-light": "rgb(0, 160, 129)",
+        "secondary-pastel": "rgb(205, 238, 231)",
+        "secondary-bright": {
+          DEFAULT: "#0ab557",
+          dark: "#36fe91",
+        },
+        "input-background": {
+          DEFAULT: "rgb(240, 242, 246)",
+          dark: "rgba(181, 178, 255, 0.08)",
+        },
+        "input-background-light": {
+          DEFAULT: "rgb(243, 245, 249)",
+          dark: "rgba(181, 178, 255, 0.10)",
+        },
+        "code-background": {
+          DEFAULT: "rgb(250, 250, 250)",
+          dark: "rgb(20, 19, 23)",
+        },
+        "code-background-decorative-dark": "#435080",
+        "selected-background": "rgb(242, 245, 250)",
+        "breadcrumb-text": {
+          DEFAULT: "rgb(107, 113, 136)",
+          dark: "rgb(180, 179, 182)",
+        },
+        "breadcrumb-text-hover": "rgb(117, 121, 129)",
+        "breadcrumb-icon": "rgb(129, 131, 165)",
+        "canvas-background": {
+          DEFAULT: "rgb(249, 249, 249)",
+          dark: "rgb(20, 19, 23)",
+        },
+        "canvas-grid": {
+          DEFAULT: "rgba(0, 0, 0, 0.05)",
+          dark: "rgba(0, 0, 0, 0.1)",
+        },
+        "sidebar-background": {
+          DEFAULT: "rgb(255, 255, 255)",
+          dark: "rgb(34, 33, 39)",
+        },
+        "sidebar-background-transparent": {
+          DEFAULT: "rgba(255, 255, 255, 0.85)",
+          dark: "rgba(34, 33, 39, 0.95)",
+        },
+        "popover-background": {
+          DEFAULT: "rgb(252, 252, 252)",
+          dark: "rgb(34, 33, 39)",
+        },
+        "popover-divider": {
+          DEFAULT: "transparent",
+          dark: "rgba(255, 255, 255, 0.08)",
+        },
+        "listview-raised-background": {
+          DEFAULT: "rgba(0, 0, 0, 0.03)",
+          dark: "rgba(181, 178, 255, 0.1)",
+        },
+        "listview-editing-background": {
+          DEFAULT: "#fff",
+          dark: "#000",
+        },
+        "slider-background": {
+          DEFAULT: "white",
+          dark: "#BBB",
+        },
+        "slider-border": "#BBB",
+        "radio-group-background": {
+          DEFAULT: "white",
+          dark: "rgba(181, 178, 255, 0.08)",
+        },
+        mask: {
+          DEFAULT: "rgb(12, 193, 67)",
+          dark: "rgb(102, 187, 106)",
+        },
+        "transparent-checker": {
+          DEFAULT: "rgba(255, 255, 255, 0.8)",
+          dark: "rgba(255, 255, 255, 0.3)",
+        },
+        scrollbar: {
+          DEFAULT: "rgba(199, 199, 199, 0.8)",
+          dark: "rgba(199, 199, 199, 0.2)",
+        },
+        "placeholder-dots": {
+          DEFAULT: "rgba(0, 0, 0, 0.3)",
+          dark: "rgba(255, 255, 255, 0.3)",
+        },
+        "drag-outline": {
+          DEFAULT: "rgb(103, 70, 255)",
+          dark: "white",
+        },
+        "active-background": {
+          DEFAULT: "rgba(0, 0, 0, 0.1)",
+          dark: "rgba(181, 178, 255, 0.08)",
+        },
+        "thumbnail-background": {
+          DEFAULT: "#f0efff",
+          dark: "#1f1d33",
+        },
+        "thumbnail-shadow": {
+          DEFAULT: "#D3CEED66",
+          dark: "#1f1d3366",
+        },
+        "inline-code-text": "rgb(103, 70, 255)",
+        "inline-code-background": "rgb(240, 242, 246)",
+        "text-link": "rgb(103, 70, 255)",
+        "text-link-focused": "rgb(147, 86, 255)",
+      },
+      fontFamily: {
+        sans: [
+          "__Inter_6b0edc",
+          "__Inter_Fallback_6b0edc",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Helvetica Neue",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif",
+        ],
+        mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"],
+      },
+      // Type scale
+      // The last one, 0.85, I just eyeballed
+      // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
+      fontSize: {
+        title: [
+          "3.052rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.05em",
+          },
+        ],
+        subtitle: [
+          "1.563rem",
+          {
+            lineHeight: "1.75",
+            letterSpacing: "-0.05em",
+          },
+        ],
+        heading1: [
+          "1.953rem",
+          {
+            lineHeight: "1.6",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading2: [
+          "1.563rem",
+          {
+            lineHeight: "1.5",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading3: [
+          "1.25rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading4: [
+          "1rem",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        heading5: [
+          "0.85rem",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        body: [
+          "1",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        small: [
+          "1",
+          {
+            lineHeight: "19px",
+          },
+        ],
+        code: [
+          "90%",
+          {
+            lineHeight: "1.5",
+          },
+        ],
+        button: [
+          "0.8rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.2px",
+          },
+        ],
+        label: [
+          "0.62rem",
+          {
+            lineHeight: "19px",
+            letterSpacing: "-0.3px",
+          },
+        ],
+      },
+      spacing: {
+        nano: "2px",
+        micro: "4px",
+        small: "8px",
+        medium: "16px",
+        large: "32px",
+        xlarge: "64px",
+        xxlarge: "128px",
+        "inset-top": "46px",
+        "sidebar-width": "260px",
+        "toolbar-height": "8px",
+        "toolbar-separator": "8px",
+        "inspector-h-separator": "8px",
+        "inspector-v-separator": "10px",
+        "dialog-padding": "16px",
+      },
+    },
+  },
+} as Config;

package/tailwind.d.ts

@@ -0,0 +1,11 @@
+// Get the config from your actual config file
+import tailwindConfig from "./tailwind.config";
+
+type ExtractThemeTypes<T> = T extends { theme: { extend: infer E } }
+  ? E
+  : never;
+
+declare module "tailwindcss/types/generated/default-theme" {
+  export interface DefaultTheme
+    extends ExtractThemeTypes<typeof tailwindConfig> {}
+}

package/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@repo/typescript-config/library.json"
+  "extends": "@repo/typescript-config/library.json",
+  "compilerOptions": {
+    "types": ["tailwindcss/types"],
+  },
 }