@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/src/components/NoyaLogo.tsx

@@ -0,0 +1,41 @@
+import { cssVars } from "@noya-app/noya-designsystem";
+import React, { forwardRef } from "react";
+
+export const Logo = forwardRef(function Logo(
+  props: React.ComponentProps<"svg">,
+  ref: React.Ref<SVGSVGElement>
+) {
+  const fill = props.fill || cssVars.colors.logoFill;
+
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 24 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className="w-6 aspect-[24/26]"
+    >
+      <path
+        d="M6.5 3H2V12H5V6H6.5C7.32843 6 8 6.67157 8 7.5V12H11V7.5C11 5.01472 8.98528 3 6.5 3Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5 12C19.9853 12 22 9.98528 22 7.5C22 5.01472 19.9853 3 17.5 3C15.0147 3 13 5.01472 13 7.5C13 9.98528 15.0147 12 17.5 12ZM17.5 9C18.3284 9 19 8.32843 19 7.5C19 6.67157 18.3284 6 17.5 6C16.6716 6 16 6.67157 16 7.5C16 8.32843 16.6716 9 17.5 9Z"
+        fill={fill}
+      />
+      <path
+        d="M5 14H2V18.5C2 20.9853 4.01472 23 6.5 23H8V26H11V17H8V20H6.5C5.67157 20 5 19.3284 5 18.5V14Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5 23C15.0147 23 13 20.9853 13 18.5C13 16.0147 15.0147 14 17.5 14C19.9853 14 22 16.0147 22 18.5V23H17.5ZM17.5 20C18.3284 20 19 19.3284 19 18.5C19 17.6716 18.3284 17 17.5 17C16.6716 17 16 17.6716 16 18.5C16 19.3284 16.6716 20 17.5 20Z"
+        fill={fill}
+      />
+    </svg>
+  );
+});

package/src/components/Popover.tsx

@@ -32,6 +32,12 @@ interface Props
   className?: string;
 }
 
+export const popoverStyle = {
+  base: "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
+  large: "w-[680px]",
+  normal: "w-[240px]",
+};
+
 export function Popover({
   children,
   trigger,
@@ -56,12 +62,9 @@ export function Popover({
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           className={cx(
-            "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
-            variant === "large"
-              ? "w-[680px]"
-              : variant === "normal"
-                ? "w-[240px]"
-                : "",
+            popoverStyle.base,
+            variant === "large" && popoverStyle.large,
+            variant === "normal" && popoverStyle.normal,
             className
           )}
           side={side}

package/src/components/Section.tsx

@@ -0,0 +1,172 @@
+import {
+  Button,
+  IconButton,
+  IndentContext,
+  INPUT_HEIGHT,
+  InspectorPrimitives,
+  Spacer,
+  textStyles,
+} from "@noya-app/noya-designsystem";
+import { clientStorage, usePersistentStateString } from "@noya-app/react-utils";
+import React, { CSSProperties, memo, useMemo } from "react";
+
+type TitleIconOptions = {
+  inlineBlockWrapper?: boolean;
+};
+
+export type SectionProps = {
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  onClickTitle?: () => void;
+  titleTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  right?: React.ReactNode;
+  hideRightWhenCollapsed?: boolean;
+  extraPadding?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  titleIcon?: React.ReactNode;
+  titleIconOptions?: TitleIconOptions;
+};
+
+const titleIconStyle: CSSProperties = {
+  marginRight: "8px",
+  alignSelf: "flex-start",
+  position: "relative",
+  top: "2px",
+};
+
+const titleIconWrapperStyle: CSSProperties = {
+  display: "inline-block",
+};
+
+const SectionInternal = ({
+  children,
+  title,
+  onClickTitle,
+  titleTextStyle = "heading4",
+  right,
+  extraPadding,
+  className,
+  style: styleProp,
+  titleIcon,
+  titleIconOptions = {
+    inlineBlockWrapper: true,
+  },
+}: SectionProps) => {
+  const style: CSSProperties = useMemo(
+    () => ({
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      paddingTop:
+        titleTextStyle === "heading3"
+          ? "12px"
+          : title && extraPadding
+            ? "24px"
+            : "12px",
+      paddingBottom:
+        titleTextStyle === "heading3"
+          ? "12px"
+          : title && extraPadding
+            ? "12px"
+            : "12px",
+      ...styleProp,
+    }),
+    [titleTextStyle, title, extraPadding, styleProp]
+  );
+
+  const hasChildren = React.Children.toArray(children).some((child) => !!child);
+
+  const headerStyle: CSSProperties = useMemo(
+    () => ({
+      marginBottom: hasChildren ? "4px" : undefined,
+      minHeight: INPUT_HEIGHT,
+    }),
+    [hasChildren]
+  );
+
+  return (
+    <div style={style} className={className}>
+      {(title || titleIcon || right) && (
+        <InspectorPrimitives.SectionHeader style={headerStyle}>
+          {titleIcon && (
+            <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
+              {titleIconOptions.inlineBlockWrapper ? (
+                <div style={titleIconWrapperStyle}>{titleIcon}</div>
+              ) : (
+                titleIcon
+              )}
+            </div>
+          )}
+          {title && (
+            <>
+              {onClickTitle ? (
+                <Button variant="none" onClick={onClickTitle}>
+                  <InspectorPrimitives.Title $textStyle={titleTextStyle}>
+                    {title}
+                  </InspectorPrimitives.Title>
+                </Button>
+              ) : (
+                <InspectorPrimitives.Title $textStyle={titleTextStyle}>
+                  {title}
+                </InspectorPrimitives.Title>
+              )}
+            </>
+          )}
+          <Spacer.Horizontal />
+          {right}
+        </InspectorPrimitives.SectionHeader>
+      )}
+      <IndentContext.Provider value={{ indentLevel: 1 }}>
+        {children}
+      </IndentContext.Provider>
+    </div>
+  );
+};
+
+type ExpandableSectionProps = {
+  storageKey: string;
+  initialVisibility?: "show" | "hide";
+};
+
+const ExpandableSection = ({
+  storageKey,
+  initialVisibility = "show",
+  ...props
+}: SectionProps & ExpandableSectionProps) => {
+  const [visibility, setVisibility] = usePersistentStateString<"show" | "hide">(
+    clientStorage,
+    storageKey,
+    initialVisibility
+  );
+  const expanded = visibility === "show";
+
+  return (
+    <SectionInternal
+      {...props}
+      right={!props.hideRightWhenCollapsed || expanded ? props.right : null}
+      title={
+        <div className="flex gap-1 items-center">
+          {props.title}
+          <IconButton
+            iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
+            onClick={() => setVisibility(expanded ? "hide" : "show")}
+          />
+        </div>
+      }
+    >
+      {expanded && props.children}
+    </SectionInternal>
+  );
+};
+
+export const Section = memo(function InspectorSection({
+  storageKey,
+  ...props
+}: SectionProps & Partial<ExpandableSectionProps>) {
+  return storageKey ? (
+    <ExpandableSection {...props} storageKey={storageKey} />
+  ) : (
+    <SectionInternal {...props} />
+  );
+});

package/src/components/SegmentedControl.tsx

@@ -141,7 +141,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `flex items-stretch flex-auto appearance-none relative outline-none min-h-[27px] rounded bg-input-background py-[2px] px-[2px]`,
+          `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
           className
         )}
         style={style}

package/src/components/SelectMenu.tsx

@@ -15,6 +15,7 @@ import React, {
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
+import { getInsetEndStyles } from "../utils/inputs";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import {
@@ -24,7 +25,7 @@ import {
   styles,
 } from "./internal/Menu";
 import { MenuComponents, MenuViewport } from "./internal/MenuViewport";
-import { InsetLabel } from "./Label";
+import { Label } from "./Label";
 
 type Props<T extends string> = {
   id?: string;
@@ -57,6 +58,8 @@ const scrollButtonStyles = `
   hover:text-text
 `;
 
+const insetEndStyles = getInsetEndStyles();
+
 interface SelectMenuTriggerProps {
   id?: string;
   style?: React.CSSProperties;
@@ -101,9 +104,11 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
       >
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
         {label && labelPosition === "inset" && (
-          <InsetLabel className="pr-4" htmlFor={id}>
-            {label}
-          </InsetLabel>
+          <div className={insetEndStyles}>
+            <Label className="pr-4 text-text-disabled" htmlFor={id}>
+              {label}
+            </Label>
+          </div>
         )}
         <span className="flex-1 flex">
           <Select.Value placeholder={placeholder} />

package/src/components/Slider.tsx

@@ -2,7 +2,8 @@ import * as RadixSlider from "@radix-ui/react-slider";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { InsetLabel } from "./Label";
+import { getInsetEndStyles } from "../utils/inputs";
+import { Label } from "./Label";
 
 type ColorScheme = "primary" | "secondary";
 
@@ -28,6 +29,8 @@ const thumbStyle = {
   width: THUMB_WIDTH,
 };
 
+const insetEndStyles = getInsetEndStyles();
+
 export const Slider = memo(function Slider({
   style,
   className,
@@ -95,7 +98,7 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden flex-grow max-h-[27px]",
+        "flex relative items-center select-none touch-none h-input-height rounded overflow-hidden flex-grow max-h-input-height",
         className
       )}
       style={style}
@@ -105,7 +108,11 @@ export const Slider = memo(function Slider({
     >
       <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && labelPosition === "inset" && (
-          <InsetLabel htmlFor={id}>{label}</InsetLabel>
+          <div className={insetEndStyles}>
+            <Label htmlFor={id} className="text-text-disabled">
+              {label}
+            </Label>
+          </div>
         )}
         <div
           style={trackFillStyle}
@@ -117,14 +124,16 @@ export const Slider = memo(function Slider({
         />
       </RadixSlider.Track>
       {label && labelPosition === "inset" && colorScheme !== undefined && (
-        <InsetLabel className="text-white overflow-hidden" style={labelStyle}>
-          {label}
-        </InsetLabel>
+        <div className={insetEndStyles}>
+          <Label className="text-white overflow-hidden" style={labelStyle}>
+            {label}
+          </Label>
+        </div>
       )}
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
-          "block h-[27px] rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
+          "block h-input-height rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"