@noya-app/noya-designsystem 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,9 +12,11 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.0.3",
+    "@noya-app/noya-colorpicker": "0.0.4",
     "@noya-app/noya-utils": "0.0.7",
     "@noya-app/noya-geometry": "0.0.7",
+    "@noya-app/noya-icons": "0.0.1",
+    "@noya-app/noya-keymap": "0.0.3",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/ArrayController.tsx

@@ -0,0 +1,168 @@
+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>
+  );
+});

package/src/components/InspectorPrimitives.tsx

@@ -0,0 +1,139 @@
+import React, { CSSProperties, memo, ReactNode } from "react";
+import styled, { useTheme } from "styled-components";
+import { Spacer } from "./Spacer";
+
+export const Section = styled.div<{
+  padding?: CSSProperties["padding"];
+  gap?: CSSProperties["gap"];
+}>(({ theme, padding = "10px", gap }) => ({
+  flex: "0 0 auto",
+  display: "flex",
+  flexDirection: "column",
+  padding,
+  gap,
+}));
+
+export const SectionHeader = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+}));
+
+export const Title = styled.div<{
+  textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}>(({ theme, textStyle }) => ({
+  display: "flex",
+  flexDirection: "row",
+  userSelect: "none",
+  ...(textStyle
+    ? {
+        ...theme.textStyles[textStyle],
+        color: theme.colors.text,
+      }
+    : {
+        ...theme.textStyles.label,
+        color: theme.colors.textSubtle,
+        fontWeight: "bold",
+      }),
+}));
+
+export const Row = styled.div<{ gap?: CSSProperties["gap"] }>(
+  ({ theme, gap }) => ({
+    flex: "1",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap,
+  })
+);
+
+export const Column = styled.div(({ theme }) => ({
+  flex: "1",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+}));
+
+export const Checkbox = styled.input(({ theme }) => ({
+  margin: 0,
+}));
+
+export const Text = styled.span(({ theme }) => ({
+  ...theme.textStyles.small,
+}));
+
+export const VerticalSeparator = () => (
+  <Spacer.Vertical size={useTheme().sizes.inspector.verticalSeparator} />
+);
+
+export const HorizontalSeparator = () => (
+  <Spacer.Horizontal size={useTheme().sizes.inspector.horizontalSeparator} />
+);
+
+const SliderRowLabel = styled.span(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.textMuted,
+  marginBottom: "-6px",
+}));
+
+export const RowLabel = styled.span<{
+  textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}>(({ theme, textStyle }) => ({
+  // marginBottom: '6px',
+  display: "flex",
+  ...(textStyle
+    ? {
+        ...theme.textStyles[textStyle],
+      }
+    : {
+        ...theme.textStyles.label,
+        color: theme.colors.textSubtle,
+        fontWeight: "bold",
+      }),
+  lineHeight: "19px", // Button height
+}));
+
+export const LabeledRow = memo(function LabeledRow({
+  id,
+  children,
+  label,
+  labelTextStyle,
+  gap,
+  right,
+}: {
+  id?: string;
+  children: ReactNode;
+  label: string;
+  labelTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  gap?: CSSProperties["gap"];
+  right?: ReactNode;
+}) {
+  return (
+    <Row id={id}>
+      <Column>
+        <RowLabel textStyle={labelTextStyle}>
+          {label}
+          {right && <Spacer.Horizontal />}
+          {right}
+        </RowLabel>
+        <Row gap={gap}>{children}</Row>
+      </Column>
+    </Row>
+  );
+});
+
+export const LabeledSliderRow = memo(function LabeledRow({
+  children,
+  label,
+}: {
+  children: ReactNode;
+  label: string;
+}) {
+  return (
+    <Row>
+      <Column>
+        <SliderRowLabel>{label}</SliderRowLabel>
+        <Row>{children}</Row>
+      </Column>
+    </Row>
+  );
+});

package/src/hooks/__tests__/mergeEventHandlers.test.ts

@@ -1,9 +1,10 @@
-import { ReactEventHandlers } from 'react-use-gesture/dist/types';
-import { mergeEventHandlers } from '../..';
+import { expect, test } from "bun:test";
+import { ReactEventHandlers } from "react-use-gesture/dist/types";
+import { mergeEventHandlers } from "../..";
 
 const event = { defaultPrevented: false };
 
-test('merges handlers', () => {
+test("merges handlers", () => {
   const out: [number, any][] = [];
 
   const a: ReactEventHandlers = { onClick: (e) => out.push([1, e]) };
@@ -15,8 +16,8 @@ test('merges handlers', () => {
 
   result.onClick?.(event as any);
 
-  expect(Object.keys(result)).toEqual(['onClick']);
-  expect(typeof result.onClick).toEqual('function');
+  expect(Object.keys(result)).toEqual(["onClick"]);
+  expect(typeof result.onClick).toEqual("function");
   expect(out).toEqual([
     [1, event],
     [2, event],
@@ -26,7 +27,7 @@ test('merges handlers', () => {
 
 const noop = () => {};
 
-test('merges multiple handlers', () => {
+test("merges multiple handlers", () => {
   const a: ReactEventHandlers = {
     onMouseDown: noop,
     onMouseMove: noop,
@@ -40,8 +41,8 @@ test('merges multiple handlers', () => {
   const result = mergeEventHandlers(a, b);
 
   expect(Object.keys(result)).toEqual([
-    'onMouseDown',
-    'onMouseMove',
-    'onMouseUp',
+    "onMouseDown",
+    "onMouseMove",
+    "onMouseUp",
   ]);
 });

package/src/index.tsx

@@ -76,3 +76,7 @@ export * from "./utils/fuzzyScorer";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";
+
+// Avoid dependency cycles
+export * as InspectorPrimitives from "./components/InspectorPrimitives";
+export * from "./components/ArrayController";