@noya-app/noya-designsystem 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +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.8",
-    "@noya-app/noya-utils": "0.0.11",
-    "@noya-app/noya-geometry": "0.0.12",
-    "@noya-app/noya-icons": "0.0.5",
-    "@noya-app/noya-keymap": "0.0.7",
+    "@noya-app/noya-colorpicker": "0.0.9",
+    "@noya-app/noya-utils": "0.0.12",
+    "@noya-app/noya-geometry": "0.0.13",
+    "@noya-app/noya-icons": "0.0.6",
+    "@noya-app/noya-keymap": "0.0.8",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/Chip.tsx

@@ -1,12 +1,12 @@
-import { Cross1Icon, PlusIcon } from '@noya-app/noya-icons';
-import React, { memo } from 'react';
-import styled from 'styled-components';
-import { useDesignSystemTheme } from '../contexts/DesignSystemConfiguration';
-import { useHover } from '../hooks/useHover';
+import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
+import React, { memo } from "react";
+import styled from "styled-components";
+import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
+import { useHover } from "../hooks/useHover";
 
-type ChipColorScheme = 'primary' | 'secondary' | 'error';
-type ChipSize = 'small' | 'medium';
-type ChipVariant = 'solid' | 'outlined' | 'ghost';
+type ChipColorScheme = "primary" | "secondary" | "error";
+type ChipSize = "small" | "medium";
+type ChipVariant = "solid" | "outlined" | "ghost";
 
 const ChipElement = styled.span<{
   colorScheme?: ChipColorScheme;
@@ -16,69 +16,70 @@ const ChipElement = styled.span<{
   isInteractive: boolean;
 }>(({ theme, colorScheme, size, variant, monospace, isInteractive }) => {
   const color =
-    colorScheme === 'primary'
+    colorScheme === "primary"
       ? theme.colors.primary
-      : colorScheme === 'secondary'
-      ? theme.colors.secondary
-      : theme.colors.text;
+      : colorScheme === "secondary"
+        ? theme.colors.secondary
+        : theme.colors.text;
 
   const backgroundColor =
-    colorScheme === 'primary'
-      ? 'rgb(238, 229, 255)'
-      : colorScheme === 'secondary'
-      ? 'rgb(205, 238, 231)'
-      : colorScheme === 'error'
-      ? 'rgb(255, 219, 219)'
-      : theme.colors.inputBackground;
+    colorScheme === "primary"
+      ? "rgb(238, 229, 255)"
+      : colorScheme === "secondary"
+        ? "rgb(205, 238, 231)"
+        : colorScheme === "error"
+          ? "rgb(255, 219, 219)"
+          : theme.colors.inputBackground;
 
   const subtleColor =
-    colorScheme === 'primary'
-      ? 'rgba(238, 229, 255, 0.2)'
-      : colorScheme === 'secondary'
-      ? 'rgba(205, 238, 231, 0.2)'
-      : colorScheme === 'error'
-      ? 'rgba(255, 219, 219, 0.2)'
-      : 'rgba(0, 0, 0, 0.1)';
+    colorScheme === "primary"
+      ? "rgba(238, 229, 255, 0.2)"
+      : colorScheme === "secondary"
+        ? "rgba(205, 238, 231, 0.2)"
+        : colorScheme === "error"
+          ? "rgba(255, 219, 219, 0.2)"
+          : "rgba(0, 0, 0, 0.1)";
 
   return {
-    textTransform: 'initial',
+    textTransform: "initial",
     borderRadius: 4,
-    userSelect: 'none',
-    display: 'inline-flex',
-    alignItems: 'center',
-    lineHeight: '1.4',
-    ...(size === 'medium'
+    userSelect: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    lineHeight: "1.4",
+    whiteSpace: "pre",
+    ...(size === "medium"
       ? {
-          fontSize: '11px',
-          padding: '4px 8px',
+          fontSize: "11px",
+          padding: "4px 8px",
         }
       : {
-          fontSize: '9px',
-          padding: '0px 4px',
+          fontSize: "9px",
+          padding: "0px 4px",
         }),
     ...(monospace && {
       fontFamily: theme.fonts.monospace,
     }),
-    ...(variant === 'solid'
+    ...(variant === "solid"
       ? {
           color,
           backgroundColor,
         }
-      : variant === 'outlined'
-      ? {
-          color,
-          backgroundColor: 'transparent',
-          boxShadow: `0 0 0 1px ${subtleColor} inset`,
-        }
-      : {}),
-    '&:hover': {
-      ...(variant === 'outlined' && {
+      : variant === "outlined"
+        ? {
+            color,
+            backgroundColor: "transparent",
+            boxShadow: `0 0 0 1px ${subtleColor} inset`,
+          }
+        : {}),
+    "&:hover": {
+      ...(variant === "outlined" && {
         backgroundColor: subtleColor,
-        boxShadow: 'none',
+        boxShadow: "none",
       }),
     },
     ...(isInteractive && {
-      cursor: 'pointer',
+      cursor: "pointer",
     }),
   };
 });
@@ -86,27 +87,27 @@ const ChipElement = styled.span<{
 const DeleteElement = styled(Cross1Icon)<{
   size: ChipSize;
 }>(({ size }) => ({
-  position: 'relative',
-  marginRight: '-2px',
-  cursor: 'pointer',
+  position: "relative",
+  marginRight: "-2px",
+  cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === 'medium'
+  ...(size === "medium"
     ? {
-        marginLeft: '2px',
+        marginLeft: "2px",
         // top: '-1px',
-        transform: 'scale(0.75)',
+        transform: "scale(0.75)",
       }
     : {
-        transform: 'scale(0.6)',
+        transform: "scale(0.6)",
       }),
 
-  '&:hover': {
+  "&:hover": {
     opacity: 0.85,
   },
 }));
 
-const ignoredProps = new Set(['size', 'isOnlyChild']);
+const ignoredProps = new Set(["size", "isOnlyChild"]);
 
 const AddElement = styled(PlusIcon).withConfig({
   shouldForwardProp: (prop) => !ignoredProps.has(prop),
@@ -114,23 +115,23 @@ const AddElement = styled(PlusIcon).withConfig({
   size: ChipSize;
   isOnlyChild: boolean;
 }>(({ size, isOnlyChild }) => ({
-  position: 'relative',
-  marginRight: '-2px',
-  cursor: 'pointer',
+  position: "relative",
+  marginRight: "-2px",
+  cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === 'medium'
+  ...(size === "medium"
     ? {
-        marginLeft: '2px',
-        top: '-1px',
-        transform: 'scale(0.75)',
+        marginLeft: "2px",
+        top: "-1px",
+        transform: "scale(0.75)",
       }
     : {
-        transform: 'scale(0.6)',
-        ...(isOnlyChild && { marginLeft: '-2px' }),
+        transform: "scale(0.6)",
+        ...(isOnlyChild && { marginLeft: "-2px" }),
       }),
 
-  '&:hover': {
+  "&:hover": {
     opacity: 0.85,
   },
 }));
@@ -157,8 +158,8 @@ export const Chip = memo(function Chip({
   deletable,
   addable,
   style,
-  size = 'medium',
-  variant = 'solid',
+  size = "medium",
+  variant = "solid",
   monospace = false,
   tabIndex,
   onDelete,
@@ -175,11 +176,11 @@ export const Chip = memo(function Chip({
   const handleClick = !children && !deletable && addable ? onAdd : onClick;
 
   const color =
-    colorScheme === 'primary'
+    colorScheme === "primary"
       ? theme.colors.primary
-      : colorScheme === 'secondary'
-      ? theme.colors.secondary
-      : theme.colors.text;
+      : colorScheme === "secondary"
+        ? theme.colors.secondary
+        : theme.colors.text;
 
   return (
     <ChipElement

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, {
   ComponentProps,
   ForwardedRef,
@@ -6,35 +6,35 @@ import React, {
   ReactNode,
   useImperativeHandle,
   useRef,
-} from 'react';
-import styled from 'styled-components';
-import { IconButton } from './IconButton';
-import { Spacer } from './Spacer';
+} from "react";
+import styled from "styled-components";
+import { IconButton } from "./IconButton";
+import { Spacer } from "./Spacer";
 
 const StyledOverlay = styled(DialogPrimitive.Overlay)({
-  backgroundColor: 'rgba(0,0,0,0.5)',
-  position: 'fixed',
+  backgroundColor: "rgba(0,0,0,0.5)",
+  position: "fixed",
   inset: 0,
 });
 
 const StyledContent = styled(DialogPrimitive.Content)(({ theme }) => ({
   boxShadow:
-    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
-  position: 'fixed',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '90vw',
-  maxWidth: '450px',
-  maxHeight: '85vh',
+    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  maxWidth: "450px",
+  maxHeight: "85vh",
   padding: theme.sizes.dialog.padding,
   borderRadius: 2,
   ...theme.textStyles.small,
   backgroundColor: theme.colors.popover.background,
-  overflowY: 'auto',
+  overflowY: "auto",
   color: theme.colors.textMuted,
-  '&:focus': { outline: 'none' },
-  pointerEvents: 'all',
+  "&:focus": { outline: "none" },
+  pointerEvents: "all",
   zIndex: 1000,
 }));
 
@@ -51,13 +51,13 @@ const StyledDescription = styled(DialogPrimitive.Description)(({ theme }) => ({
 }));
 
 export const CloseButtonContainer = styled.div(({ theme }) => ({
-  position: 'absolute',
+  position: "absolute",
   top: theme.sizes.dialog.padding,
   right: theme.sizes.dialog.padding,
   zIndex: 1,
   backgroundColor: theme.colors.popover.background,
-  padding: '4px 6px',
-  borderRadius: '2px',
+  padding: "4px 6px",
+  borderRadius: "2px",
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`,
 }));
@@ -70,12 +70,12 @@ interface Props {
   title?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
-  style?: ComponentProps<typeof StyledContent>['style'];
-  open: ComponentProps<typeof DialogPrimitive.Root>['open'];
-  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>['onOpenChange'];
+  style?: ComponentProps<typeof StyledContent>["style"];
+  open: ComponentProps<typeof DialogPrimitive.Root>["open"];
+  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
   onOpenAutoFocus?: ComponentProps<
     typeof DialogPrimitive.Content
-  >['onOpenAutoFocus'];
+  >["onOpenAutoFocus"];
   closeOnInteractOutside?: boolean;
 }
 
@@ -90,7 +90,7 @@ export const Dialog = forwardRef(function Dialog(
     onOpenAutoFocus,
     closeOnInteractOutside = true,
   }: Props,
-  forwardedRef: ForwardedRef<IDialog>,
+  forwardedRef: ForwardedRef<IDialog>
 ) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -141,3 +141,28 @@ export const Dialog = forwardRef(function Dialog(
     </DialogPrimitive.Root>
   );
 });
+
+export const FullscreenDialog = forwardRef(function FullscreenDialog(
+  { style, ...rest }: Props,
+  forwardedRef: ForwardedRef<IDialog>
+) {
+  return (
+    <Dialog
+      ref={forwardedRef}
+      style={{
+        width: "100%",
+        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        top: "0",
+        left: "0",
+        transform: "none",
+        display: "flex",
+        flexDirection: "column",
+        padding: 0,
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});

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<