@noya-app/noya-designsystem 0.0.14 → 0.0.16

package/src/components/Stack.tsx

@@ -6,63 +6,64 @@ import React, {
   memo,
   ReactHTML,
   ReactNode,
-} from 'react';
-import styled from 'styled-components';
-import { BreakpointCollection, mergeBreakpoints } from '../utils/breakpoints';
-import withSeparatorElements from '../utils/withSeparatorElements';
+} from "react";
+import styled from "styled-components";
+import { BreakpointCollection, mergeBreakpoints } from "../utils/breakpoints";
+import withSeparatorElements from "../utils/withSeparatorElements";
 
 interface StyleProps {
-  display?: 'flex' | 'inline-flex' | 'none' | 'block';
-  visibility?: CSSProperties['visibility'];
-  position?: CSSProperties['position'];
-  zIndex?: CSSProperties['zIndex'];
-  gap?: CSSProperties['gap'];
-  inset?: CSSProperties['inset'];
-  top?: CSSProperties['top'];
-  right?: CSSProperties['right'];
-  bottom?: CSSProperties['bottom'];
-  left?: CSSProperties['left'];
-  flexDirection?: CSSProperties['flexDirection'];
-  justifyContent?: CSSProperties['justifyContent'];
-  alignItems?: CSSProperties['alignItems'];
-  alignSelf?: CSSProperties['alignSelf'];
-  flex?: CSSProperties['flex'];
-  flexWrap?: CSSProperties['flexWrap'];
-  height?: CSSProperties['height'];
-  minHeight?: CSSProperties['minHeight'];
-  maxHeight?: CSSProperties['maxHeight'];
-  width?: CSSProperties['width'];
-  minWidth?: CSSProperties['minWidth'];
-  maxWidth?: CSSProperties['maxWidth'];
-  aspectRatio?: CSSProperties['aspectRatio'];
-  padding?: CSSProperties['padding'];
+  display?: "flex" | "inline-flex" | "none" | "block";
+  visibility?: CSSProperties["visibility"];
+  position?: CSSProperties["position"];
+  zIndex?: CSSProperties["zIndex"];
+  gap?: CSSProperties["gap"];
+  inset?: CSSProperties["inset"];
+  top?: CSSProperties["top"];
+  right?: CSSProperties["right"];
+  bottom?: CSSProperties["bottom"];
+  left?: CSSProperties["left"];
+  flexDirection?: CSSProperties["flexDirection"];
+  justifyContent?: CSSProperties["justifyContent"];
+  alignItems?: CSSProperties["alignItems"];
+  alignSelf?: CSSProperties["alignSelf"];
+  flex?: CSSProperties["flex"];
+  flexWrap?: CSSProperties["flexWrap"];
+  height?: CSSProperties["height"];
+  minHeight?: CSSProperties["minHeight"];
+  maxHeight?: CSSProperties["maxHeight"];
+  width?: CSSProperties["width"];
+  minWidth?: CSSProperties["minWidth"];
+  maxWidth?: CSSProperties["maxWidth"];
+  aspectRatio?: CSSProperties["aspectRatio"];
+  padding?: CSSProperties["padding"];
   paddingVertical?: string | number;
   paddingHorizontal?: string | number;
-  margin?: CSSProperties['margin'];
-  background?: CSSProperties['background'];
-  backgroundSize?: CSSProperties['backgroundSize'];
-  backgroundPosition?: CSSProperties['backgroundPosition'];
-  borderRadius?: CSSProperties['borderRadius'];
-  overflowX?: CSSProperties['overflowX'];
-  overflowY?: CSSProperties['overflowY'];
-  overflow?: CSSProperties['overflow'];
-  textOverflow?: CSSProperties['textOverflow'];
-  boxShadow?: CSSProperties['boxShadow'];
-  outline?: CSSProperties['outline'];
-  border?: CSSProperties['border'];
-  borderTop?: CSSProperties['borderTop'];
-  borderRight?: CSSProperties['borderRight'];
-  borderBottom?: CSSProperties['borderBottom'];
-  borderLeft?: CSSProperties['borderLeft'];
-  cursor?: CSSProperties['cursor'];
-  userSelect?: CSSProperties['userSelect'];
-  transition?: CSSProperties['transition'];
-  opacity?: CSSProperties['opacity'];
-  filter?: CSSProperties['filter'];
-  color?: CSSProperties['color'];
-  order?: CSSProperties['order'];
-  pointerEvents?: CSSProperties['pointerEvents'];
-  lineHeight?: CSSProperties['lineHeight'];
+  margin?: CSSProperties["margin"];
+  background?: CSSProperties["background"];
+  backgroundSize?: CSSProperties["backgroundSize"];
+  backgroundPosition?: CSSProperties["backgroundPosition"];
+  borderRadius?: CSSProperties["borderRadius"];
+  overflowX?: CSSProperties["overflowX"];
+  overflowY?: CSSProperties["overflowY"];
+  overflow?: CSSProperties["overflow"];
+  textOverflow?: CSSProperties["textOverflow"];
+  boxShadow?: CSSProperties["boxShadow"];
+  outline?: CSSProperties["outline"];
+  border?: CSSProperties["border"];
+  borderTop?: CSSProperties["borderTop"];
+  borderRight?: CSSProperties["borderRight"];
+  borderBottom?: CSSProperties["borderBottom"];
+  borderLeft?: CSSProperties["borderLeft"];
+  cursor?: CSSProperties["cursor"];
+  userSelect?: CSSProperties["userSelect"];
+  transition?: CSSProperties["transition"];
+  opacity?: CSSProperties["opacity"];
+  filter?: CSSProperties["filter"];
+  color?: CSSProperties["color"];
+  order?: CSSProperties["order"];
+  pointerEvents?: CSSProperties["pointerEvents"];
+  lineHeight?: CSSProperties["lineHeight"];
+  isolation?: CSSProperties["isolation"];
 }
 
 export type StackBreakpointList = BreakpointCollection<StyleProps>;
@@ -88,16 +89,16 @@ const Element = styled.div<{
 
 const StackBase = forwardRef(function StackBase(
   { id, as, children, separator, breakpoints, tabIndex, href, ...rest }: Props,
-  forwardedRef: ForwardedRef<HTMLElement>,
+  forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const elements = separator
     ? withSeparatorElements(Children.toArray(children), separator)
     : children;
 
   const styleProps: StyleProps = {
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'stretch',
+    display: "flex",
+    position: "relative",
+    alignItems: "stretch",
     ...rest,
   };
 
@@ -116,24 +117,24 @@ const StackBase = forwardRef(function StackBase(
   );
 });
 
-type StackProps = Omit<Props, 'flexDirection'>;
+type StackProps = Omit<Props, "flexDirection">;
 
 const VerticalStack = memo(
   forwardRef(function VStack(
     props: StackProps,
-    forwardedRef: ForwardedRef<HTMLElement>,
+    forwardedRef: ForwardedRef<HTMLElement>
   ) {
     return <StackBase {...props} flexDirection="column" ref={forwardedRef} />;
-  }),
+  })
 );
 
 const HorizontalStack = memo(
   forwardRef(function HStack(
     props: StackProps,
-    forwardedRef: ForwardedRef<HTMLElement>,
+    forwardedRef: ForwardedRef<HTMLElement>
   ) {
     return <StackBase {...props} flexDirection="row" ref={forwardedRef} />;
-  }),
+  })
 );
 
 export const Stack = {

package/src/components/Switch.tsx

@@ -1,20 +1,20 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import React from 'react';
-import styled from 'styled-components';
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import React from "react";
+import styled from "styled-components";
 
-type SwitchVariant = 'normal' | 'primary' | 'secondary';
+type SwitchColorScheme = "normal" | "primary" | "secondary";
 
 const SwitchRoot = styled(SwitchPrimitive.Root)<{
-  variant: SwitchVariant;
-}>(({ theme, variant }) => ({
-  all: 'unset',
+  colorScheme: SwitchColorScheme;
+}>(({ theme, colorScheme: variant }) => ({
+  all: "unset",
   width: 32,
   height: 19,
   backgroundColor: theme.colors.activeBackground,
-  borderRadius: '9999px',
-  position: 'relative',
-  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-  cursor: 'pointer',
+  borderRadius: "9999px",
+  position: "relative",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  cursor: "pointer",
   // '&:focus': {
   //   boxShadow: `0 0 0 1px ${
   //     variant === 'secondary' ? theme.colors.secondary : theme.colors.primary
@@ -22,40 +22,40 @@ const SwitchRoot = styled(SwitchPrimitive.Root)<{
   // },
   '&[data-state="checked"]': {
     backgroundColor:
-      variant === 'primary'
+      variant === "primary"
         ? theme.colors.primary
-        : variant === 'secondary'
-        ? theme.colors.secondary
-        : undefined,
+        : variant === "secondary"
+          ? theme.colors.secondary
+          : undefined,
   },
 }));
 
 const SwitchThumb = styled(SwitchPrimitive.Thumb)({
-  display: 'block',
+  display: "block",
   width: 15,
   height: 15,
-  backgroundColor: 'white',
-  borderRadius: '9999px',
-  transition: 'transform 100ms',
-  transform: 'translateX(2px)',
-  willChange: 'transform',
-  '&[data-state="checked"]': { transform: 'translateX(15px)' },
+  backgroundColor: "white",
+  borderRadius: "9999px",
+  transition: "transform 100ms",
+  transform: "translateX(2px)",
+  willChange: "transform",
+  '&[data-state="checked"]': { transform: "translateX(15px)" },
 });
 
 interface Props {
   value: boolean;
   onChange: (value: boolean) => void;
-  variant?: SwitchVariant;
+  colorScheme?: SwitchColorScheme;
 }
 
 export const Switch = function Switch({
   value,
   onChange,
-  variant = 'normal',
+  colorScheme = "normal",
 }: Props) {
   return (
     <SwitchRoot
-      variant={variant}
+      colorScheme={colorScheme}
       checked={value}
       onCheckedChange={(newValue) => {
         onChange(newValue);

package/src/components/Text.tsx

@@ -32,6 +32,8 @@ type StyleProps = {
   whiteSpace?: CSSProperties["whiteSpace"];
   height?: CSSProperties["height"];
   width?: CSSProperties["width"];
+  minWidth?: CSSProperties["minWidth"];
+  maxWidth?: CSSProperties["maxWidth"];
   opacity?: CSSProperties["opacity"];
   position?: CSSProperties["position"];
   overflow?: CSSProperties["overflow"];
@@ -57,6 +59,7 @@ interface Props extends StyleProps {
   color?: ThemeColorName;
   children: ReactNode;
   onClick?: () => void;
+  onDoubleClick?: () => void;
 }
 
 const StyledElement = styled.span<

package/src/contexts/DialogContext.tsx

@@ -138,6 +138,9 @@ export const DialogProvider = function DialogProvider({
           event.preventDefault();
 
           inputRef.current?.focus();
+
+          // Select the entire input value
+          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
         }, [])}
       >
         <InputField.Root>

package/src/index.tsx

@@ -21,6 +21,7 @@ export * from "./components/Chip";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
+export * from "./components/DraggableMenuButton";
 export * from "./components/DropdownMenu";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
@@ -78,6 +79,6 @@ export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";
 
 // Avoid dependency cycles
-export * as InspectorPrimitives from "./components/InspectorPrimitives";
 export * from "./components/ArrayController";
-export * from "./components/DimensionInput";
+export * from "./components/DimensionInput";
+export * as InspectorPrimitives from "./components/InspectorPrimitives";

package/src/theme/light.ts

@@ -71,7 +71,7 @@ export const colors = {
     return colors.primary;
   },
   selection: "rgb(179,215,254)",
-  thumbnailBackground: "#E1DAFF",
+  thumbnailBackground: "#f0efff",
   thumbnailShadow: "#D3CEED66",
 };
 

package/src/utils/getGradientBackground.tsx

@@ -1,5 +1,5 @@
-import { Sketch } from '@noya-app/noya-file-format';
-import { sketchColorToRgbaString } from './sketchColor';
+import { Sketch } from "@noya-app/noya-file-format";
+import { sketchColorToRgbaString } from "./sketchColor";
 
 const getRGBAColor = (value: Sketch.GradientStop[], num: 100 | 360) =>
   [...value]
@@ -7,15 +7,15 @@ const getRGBAColor = (value: Sketch.GradientStop[], num: 100 | 360) =>
     .map(
       (g) =>
         `${sketchColorToRgbaString(g.color)} ${g.position * num}${
-          num === 100 ? '%' : 'deg'
-        }`,
+          num === 100 ? "%" : "deg"
+        }`
     )
-    .join(', \n');
+    .join(", \n");
 
 export function getGradientBackground(
   value: Sketch.GradientStop[],
   type: Sketch.GradientType,
-  direction?: number,
+  direction?: number
 ) {
   if (type === Sketch.GradientType.Angular) {
     return `conic-gradient(${getRGBAColor(value, 360)})`;
@@ -24,10 +24,8 @@ export function getGradientBackground(
   const color = getRGBAColor(value, 100);
   const position =
     type === Sketch.GradientType.Radial
-      ? 'radial-gradient(circle'
-      : `linear-gradient(${
-          typeof direction !== undefined ? direction : 180
-        }deg`;
+      ? "radial-gradient(circle"
+      : `linear-gradient(${direction !== undefined ? direction : 180}deg`;
 
   return `${position}, ${color})`;
 }