@noya-app/noya-designsystem 0.1.29 → 0.1.31

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>
-  );
-});

package/src/components/Select.tsx

@@ -1,183 +0,0 @@
-import { memoize } from "@noya-app/noya-utils";
-import React, {
-  createContext,
-  CSSProperties,
-  memo,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import styled from "styled-components";
-
-type SelectContextValue = {
-  addListener: (value: string, listener: () => void) => void;
-  removeListener: (value: string) => void;
-};
-
-const SelectContext = createContext<SelectContextValue | undefined>(undefined);
-
-interface SelectOptionProps<T extends string> {
-  value: T;
-  title?: string;
-  onSelect?: () => void;
-}
-
-export const SelectOption = memo(function SelectOption<T extends string>({
-  value,
-  title,
-  onSelect,
-}: SelectOptionProps<T>) {
-  const { addListener, removeListener } = useContext(SelectContext)!;
-
-  useEffect(() => {
-    if (!onSelect) return;
-
-    addListener(value, onSelect);
-
-    return () => removeListener(value);
-  }, [addListener, onSelect, removeListener, value]);
-
-  return <option value={value}>{title ?? value}</option>;
-});
-
-const createChevronSVGString = memoize((color: string) =>
-  `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
-    <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
-  </svg>
-`.replace(/\n/g, "")
-);
-
-const SelectContainer = styled.div<{ $flex: CSSProperties["flex"] }>(
-  ({ $flex }) => ({
-    flex: $flex ?? "1 1 0px",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-  })
-);
-
-const SelectElement = styled.select<{ $flex: CSSProperties["flex"] }>(
-  ({ theme, $flex }) => ({
-    appearance: "none",
-    ...theme.textStyles.small,
-    color: theme.colors.text,
-    lineHeight: "19px",
-    width: "0px", // Reset intrinsic width
-    flex: $flex ?? "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    textAlign: "left",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: "4px",
-    paddingBottom: "4px",
-    paddingLeft: "6px",
-    paddingRight: "23px",
-    background: [
-      `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
-        theme.colors.icon
-      )}") no-repeat`,
-      theme.colors.inputBackground,
-    ].join(","),
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
-    },
-  })
-);
-
-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",
-}));
-
-type ChildrenProps<T> =
-  | {
-      children: ReactNode;
-    }
-  | {
-      options: readonly T[];
-      getTitle?: (option: T, index: number) => string;
-      onChange: (value: T) => void;
-    };
-
-type Props<T extends string> = ChildrenProps<T> & {
-  id: string;
-  flex?: CSSProperties["flex"];
-  value: T;
-  label?: ReactNode;
-};
-
-export const Select = memo(function Select<T extends string>({
-  id,
-  flex,
-  value,
-  label,
-  ...rest
-}: Props<T>) {
-  const options = "options" in rest ? rest.options : undefined;
-  const getTitle = "options" in rest ? rest.getTitle : undefined;
-  const onChange = "options" in rest ? rest.onChange : undefined;
-  const children = "options" in rest ? undefined : rest.children;
-
-  const optionElements = useMemo(
-    () =>
-      options
-        ? options.map((option, index) => (
-            <SelectOption
-              key={option}
-              value={option}
-              title={getTitle?.(option, index)}
-              onSelect={() => onChange?.(option)}
-            />
-          ))
-        : children,
-    [children, getTitle, onChange, options]
-  );
-
-  const listeners = useRef<Map<string, () => void>>(new Map());
-
-  const contextValue: SelectContextValue = useMemo(
-    () => ({
-      addListener: (value, listener) => listeners.current.set(value, listener),
-      removeListener: (value) => listeners.current.delete(value),
-    }),
-    []
-  );
-
-  return (
-    <SelectContext.Provider value={contextValue}>
-      <SelectContainer $flex={flex}>
-        <SelectElement
-          id={id}
-          $flex={flex}
-          value={value}
-          onChange={useCallback(
-            (event: React.ChangeEvent<HTMLSelectElement>) =>
-              listeners.current.get(event.target.value)?.(),
-            [listeners]
-          )}
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          {optionElements}
-        </SelectElement>
-      </SelectContainer>
-      {label && <SelectLabel htmlFor={id}>{label}</SelectLabel>}
-    </SelectContext.Provider>
-  );
-});