@noya-app/noya-designsystem 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/GridView.tsx

@@ -64,39 +64,39 @@ const sizes: Record<
 };
 
 const Grid = styled.div<{
-  size: GridViewSize;
-  padding: CSSProperties["padding"];
-}>(({ theme, size, padding }) => {
+  $size: GridViewSize;
+  $padding: CSSProperties["padding"];
+}>(({ theme, $size, $padding }) => {
   return {
     color: theme.colors.text,
     display: "grid",
-    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[size].itemWidth}px, 1fr))`,
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[$size].itemWidth}px, 1fr))`,
     // gridAutoRows: `${sizes[size].itemHeight}px`,
-    gap: `${sizes[size].gap}px`,
+    gap: `${sizes[$size].gap}px`,
     // gridTemplateColumns: `repeat(auto-fill, minmax(
     //   ${size === 'large' ? '280px' : size === 'small' ? '160px' : '116px'}
     // , 1fr))`,
     // gridAutoRows:
     //   size === 'large' ? '280px' : size === 'small' ? '170px' : '116px',
     // gap: size === 'large' || size === 'small' ? `20px` : `12px`,
-    padding,
+    padding: $padding,
   };
 });
 
-const Container = styled.div<{ scrollable: boolean }>(
-  ({ theme, scrollable }) => ({
-    flex: scrollable ? "1" : "0 0 auto",
+const Container = styled.div<{ $scrollable: boolean }>(
+  ({ theme, $scrollable }) => ({
+    flex: $scrollable ? "1" : "0 0 auto",
     display: "flex",
     flexDirection: "column",
   })
 );
 
 const ContentContainer = styled.div<{
-  selected?: boolean;
-  hovered?: boolean;
-  bordered: boolean;
-  disabled: boolean;
-}>(({ theme, selected, hovered, bordered, disabled }) => ({
+  $selected?: boolean;
+  $hovered?: boolean;
+  $bordered: boolean;
+  $disabled: boolean;
+}>(({ theme, $selected, $hovered, $bordered, $disabled }) => ({
   display: "flex",
   flex: "1",
   backgroundColor: theme.colors.sidebar.background,
@@ -104,18 +104,18 @@ const ContentContainer = styled.div<{
   justifyContent: "center",
   borderRadius: "2px",
   border: `1px solid ${
-    selected
+    $selected
       ? theme.colors.primary
       : // : hovered
         // ? `rgb(132, 63, 255, 0.5)`
-        bordered
+        $bordered
         ? theme.colors.divider
         : "transparent"
   }`,
   overflow: "hidden",
 
   cursor: "pointer",
-  ...(disabled
+  ...($disabled
     ? { opacity: 0.5 }
     : {
         "&:hover": { opacity: 0.85 },
@@ -134,8 +134,8 @@ const ItemContainer = styled.div(({ theme }) => ({
   },
 }));
 
-const ItemTitle = styled.span<{ showBackground: boolean }>(
-  ({ theme, showBackground }) => ({
+const ItemTitle = styled.span<{ $showBackground: boolean }>(
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     lineHeight: "1",
     color: theme.colors.text,
@@ -145,7 +145,7 @@ const ItemTitle = styled.span<{ showBackground: boolean }>(
     overflow: "hidden",
     textOverflow: "ellipsis",
 
-    ...(showBackground && {
+    ...($showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -155,8 +155,8 @@ const ItemTitle = styled.span<{ showBackground: boolean }>(
   })
 );
 
-const ItemDescription = styled.span<{ showBackground: boolean }>(
-  ({ theme, showBackground }) => ({
+const ItemDescription = styled.span<{ $showBackground: boolean }>(
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     fontSize: "0.7rem",
     lineHeight: "1",
@@ -166,7 +166,7 @@ const ItemDescription = styled.span<{ showBackground: boolean }>(
     overflow: "hidden",
     textOverflow: "ellipsis",
 
-    ...(showBackground && {
+    ...($showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -319,10 +319,10 @@ const GridViewItem = forwardRef(function GridViewItem<
       onKeyDown={handleKeyDown}
     >
       <ContentContainer
-        disabled={disabled}
-        bordered={bordered}
-        selected={selected}
-        hovered={!disabled && hovered}
+        $disabled={disabled}
+        $bordered={bordered}
+        $selected={selected}
+        $hovered={!disabled && hovered}
         onClick={handleClick}
         onDoubleClick={onDoubleClick}
         onContextMenu={onContextMenu}
@@ -333,17 +333,17 @@ const GridViewItem = forwardRef(function GridViewItem<
       {textPosition === "below" && (
         <>
           <Spacer.Vertical size={8} />
-          <ItemTitle showBackground={false}>{title || " "}</ItemTitle>
-          <ItemDescription showBackground={false}>
+          <ItemTitle $showBackground={false}>{title || " "}</ItemTitle>
+          <ItemDescription $showBackground={false}>
             {subtitle || " "}
           </ItemDescription>
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
         <TextOverlay>
-          {title && <ItemTitle showBackground>{title}</ItemTitle>}
+          {title && <ItemTitle $showBackground>{title}</ItemTitle>}
           {subtitle && (
-            <ItemDescription showBackground>{subtitle}</ItemDescription>
+            <ItemDescription $showBackground>{subtitle}</ItemDescription>
           )}
         </TextOverlay>
       )}
@@ -368,8 +368,10 @@ const GridViewItem = forwardRef(function GridViewItem<
       <Tooltip
         content={
           <Stack.V gap={2}>
-            <ItemTitle showBackground={false}>{title}</ItemTitle>
-            <ItemDescription showBackground={false}>{subtitle}</ItemDescription>
+            <ItemTitle $showBackground={false}>{title}</ItemTitle>
+            <ItemDescription $showBackground={false}>
+              {subtitle}
+            </ItemDescription>
           </Stack.V>
         }
       >
@@ -432,7 +434,7 @@ function GridViewRoot({
 
   return (
     <GridViewContext.Provider value={contextValue}>
-      <Container onClick={handleClick} scrollable={scrollable}>
+      <Container onClick={handleClick} $scrollable={scrollable}>
         {scrollable ? <ScrollArea>{children}</ScrollArea> : children}
       </Container>
     </GridViewContext.Provider>
@@ -449,7 +451,7 @@ function GridViewSection({
   const { size } = useContext(GridViewContext);
 
   return (
-    <Grid size={size} padding={padding}>
+    <Grid $size={size} $padding={padding}>
       {children}
     </Grid>
   );

package/src/components/InputField.tsx

@@ -35,6 +35,7 @@ type InputFieldContextValue = {
   labelSize: number;
   hasLabel: boolean;
   hasDropdown: boolean;
+  /** @default medium */
   size: InputFieldSize;
   isFocused: boolean;
   onFocusChange: (isFocused: boolean) => void;
@@ -543,9 +544,11 @@ interface InputFieldRootProps {
   flex?: string;
   children?: ReactNode;
   width?: number;
+  /** @default end */
   labelPosition?: LabelPosition;
   labelSize?: number;
   hasDropdown?: boolean;
+  /** @default medium */
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
   onFocusChange?: (isFocused: boolean) => void;

package/src/components/ListView.tsx

@@ -317,6 +317,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
   selected?: boolean;
+  /** @default 0 */
   depth?: number;
   disabled?: boolean;
   // draggable?: boolean;

package/src/components/RadioGroup.tsx

@@ -108,6 +108,7 @@ const ToggleGroupItem = forwardRef(function ToggleGroupItem(
 });
 
 type RadioGroupContextValue = {
+  /** @default primary */
   colorScheme?: RadioGroupColorScheme;
 };
 
@@ -119,6 +120,7 @@ interface Props {
   id?: string;
   value?: string;
   onValueChange?: (value: string) => void;
+  /** @default primary */
   colorScheme?: RadioGroupColorScheme;
   allowEmpty?: boolean;
   children: ReactNode;

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

@@ -1,4 +1,7 @@
-import { useDesignSystemTheme } from "@noya-app/noya-designsystem";
+import {
+  DesignSystemThemeProvider,
+  useDesignSystemTheme,
+} from "@noya-app/noya-designsystem";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import {
@@ -54,7 +57,7 @@ export type IWorkspaceLayout = {
   toggleRightSidebar: () => void;
 };
 
-export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
+const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
   {
     autoSavePrefix,
     leftSidebarContent: leftPanelContent,
@@ -260,3 +263,14 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     </div>
   );
 });
+
+export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
+  props: Props,
+  forwardedRef: React.ForwardedRef<IWorkspaceLayout>
+) {
+  return (
+    <DesignSystemThemeProvider>
+      <WorkspaceLayoutWithTheme {...props} ref={forwardedRef} />
+    </DesignSystemThemeProvider>
+  );
+});

package/src/index.tsx

@@ -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/src/components/ArrayController.tsx

@@ -1,168 +0,0 @@
-import { range } from "@noya-app/noya-utils";
-import React, { ReactNode, memo, useCallback, useMemo } from "react";
-import styled, { useTheme } from "styled-components";
-import withSeparatorElements from "../utils/withSeparatorElements";
-import { Button } from "./Button";
-import { IconButton } from "./IconButton";
-import * as InspectorPrimitives from "./InspectorPrimitives";
-import { ListView } from "./ListView";
-import { RelativeDropPosition, Sortable } from "./Sortable";
-import { Spacer } from "./Spacer";
-import { Stack } from "./Stack";
-
-const ElementRow = styled.div({
-  flex: "0 0 auto",
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-});
-
-const ItemContainer = styled.div({
-  position: "relative",
-});
-
-export interface ArrayControllerProps<Item> {
-  id: string;
-  items: Item[];
-  title: ReactNode;
-  sortable?: boolean;
-  reversed?: boolean;
-  expanded?: boolean;
-  getKey?: (item: Item) => string;
-  onMoveItem?: (sourceIndex: number, destinationIndex: number) => void;
-  onClickPlus?: () => void;
-  onClickTrash?: () => void;
-  onClickExpand?: () => void;
-  renderItem: (props: { item: Item; index: number }) => ReactNode;
-  renderExpandedContent?: () => ReactNode;
-  padding?: number;
-}
-
-export const ArrayController = memo(function ArrayController<Item>({
-  id,
-  items,
-  title,
-  sortable = false,
-  reversed = true,
-  expanded = false,
-  getKey,
-  onMoveItem,
-  onClickPlus,
-  onClickTrash,
-  onClickExpand,
-  renderItem,
-  renderExpandedContent,
-  padding = 10,
-}: ArrayControllerProps<Item>) {
-  const iconColor = useTheme().colors.icon;
-  const primaryLightColor = useTheme().colors.primaryLight;
-
-  const keys = useMemo(
-    () => items.map((item, index) => getKey?.(item) ?? index.toString()),
-    [getKey, items]
-  );
-
-  const indexes = reversed
-    ? range(0, items.length).reverse()
-    : range(0, items.length);
-
-  const handleMoveItem = useCallback(
-    (
-      sourceIndex: number,
-      destinationIndex: number,
-      position: RelativeDropPosition
-    ) => {
-      if (reversed) {
-        if (position === "above") {
-          position = "below";
-        } else if (position === "below") {
-          position = "above";
-        }
-      }
-
-      onMoveItem?.(
-        sourceIndex,
-        position === "below" ? destinationIndex + 1 : destinationIndex
-      );
-    },
-    [onMoveItem, reversed]
-  );
-
-  const renderRow = (index: number) => {
-    return (
-      <ElementRow key={keys[index]}>
-        {renderItem({ item: items[index], index: index })}
-      </ElementRow>
-    );
-  };
-
-  return (
-    <InspectorPrimitives.Section id={id} $padding={padding} $gap="2px">
-      <InspectorPrimitives.SectionHeader>
-        <Button variant="none" onClick={onClickPlus}>
-          <InspectorPrimitives.Title>{title}</InspectorPrimitives.Title>
-        </Button>
-        <Spacer.Horizontal />
-        {withSeparatorElements(
-          [
-            onClickTrash && (
-              <IconButton
-                id={`${id}-trash`}
-                iconName="TrashIcon"
-                color={iconColor}
-                onClick={onClickTrash}
-              />
-            ),
-            onClickExpand && (
-              <IconButton
-                id={`${id}-gear`}
-                iconName="GearIcon"
-                color={expanded ? primaryLightColor : iconColor}
-                onClick={onClickExpand}
-              />
-            ),
-            onClickPlus && (
-              <IconButton
-                id={`${id}-add`}
-                iconName="PlusIcon"
-                color={iconColor}
-                onClick={onClickPlus}
-              />
-            ),
-          ],
-          <Spacer.Horizontal size={8} />
-        )}
-      </InspectorPrimitives.SectionHeader>
-      <Stack.V gap="4px">
-        {sortable ? (
-          <Sortable.Root
-            keys={keys}
-            renderOverlay={renderRow}
-            onMoveItem={handleMoveItem}
-          >
-            {indexes.map((index) => (
-              <Sortable.Item<HTMLDivElement> id={keys[index]} key={keys[index]}>
-                {({ relativeDropPosition, ...sortableProps }) => (
-                  <ItemContainer {...sortableProps}>
-                    {renderRow(index)}
-                    {relativeDropPosition && (
-                      <ListView.DragIndicator
-                        $gap={0}
-                        $colorScheme="primary"
-                        $relativeDropPosition={relativeDropPosition}
-                        $offsetLeft={0}
-                      />
-                    )}
-                  </ItemContainer>
-                )}
-              </Sortable.Item>
-            ))}
-          </Sortable.Root>
-        ) : (
-          indexes.map(renderRow)
-        )}
-      </Stack.V>
-      {expanded && renderExpandedContent?.()}
-    </InspectorPrimitives.Section>
-  );
-});