@noya-app/noya-designsystem 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.13",
+  "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.7",
-    "@noya-app/noya-utils": "0.0.10",
-    "@noya-app/noya-geometry": "0.0.11",
-    "@noya-app/noya-icons": "0.0.4",
-    "@noya-app/noya-keymap": "0.0.6",
+    "@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/Button.tsx

@@ -4,21 +4,21 @@ import React, {
   forwardRef,
   ReactNode,
   useCallback,
-} from 'react';
-import styled from 'styled-components';
-import { Tooltip } from './Tooltip';
+} from "react";
+import styled from "styled-components";
+import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
-  | 'normal'
-  | 'primary'
-  | 'secondary'
-  | 'secondaryBright'
-  | 'white'
-  | 'thin'
-  | 'floating'
-  | 'none';
+  | "normal"
+  | "primary"
+  | "secondary"
+  | "secondaryBright"
+  | "white"
+  | "thin"
+  | "floating"
+  | "none";
 
-type ButtonSize = 'normal' | 'large';
+type ButtonSize = "normal" | "large";
 
 /* ----------------------------------------------------------------------------
  * Element
@@ -28,98 +28,98 @@ export const ButtonElement = styled.button<{
   active: boolean;
   variant: ButtonVariant;
   size: ButtonSize;
-  flex?: CSSProperties['flex'];
+  flex?: CSSProperties["flex"];
 }>(({ theme, active, disabled, variant, size, flex }) => ({
-  ...(size === 'large' ? theme.textStyles.heading4 : theme.textStyles.small),
-  textDecoration: 'none',
-  lineHeight: '1',
-  flex: flex ?? '0 0 auto',
-  position: 'relative',
-  border: '0',
-  outline: 'none',
-  WebkitAppRegion: 'no-drag',
-  userSelect: 'none',
-  minWidth: variant === 'normal' ? '31px' : undefined,
-  textAlign: 'left',
-  borderRadius: '4px',
-  paddingTop: variant === 'none' ? '0px' : '4px',
-  paddingRight: variant === 'none' ? '0px' : variant === 'thin' ? '1px' : '6px',
-  paddingBottom: variant === 'none' ? '0px' : '4px',
-  paddingLeft: variant === 'none' ? '0px' : variant === 'thin' ? '1px' : '6px',
-  ...(size === 'large' && {
-    paddingTop: '12px',
-    paddingRight: '16px',
-    paddingBottom: '12px',
-    paddingLeft: '16px',
+  ...(size === "large" ? theme.textStyles.heading4 : theme.textStyles.small),
+  textDecoration: "none",
+  lineHeight: "1",
+  flex: flex ?? "0 0 auto",
+  position: "relative",
+  border: "0",
+  outline: "none",
+  WebkitAppRegion: "no-drag",
+  userSelect: "none",
+  minWidth: variant === "normal" ? "31px" : undefined,
+  textAlign: "left",
+  borderRadius: "4px",
+  paddingTop: variant === "none" ? "0px" : "4px",
+  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+  paddingBottom: variant === "none" ? "0px" : "4px",
+  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+  ...(size === "large" && {
+    paddingTop: "12px",
+    paddingRight: "16px",
+    paddingBottom: "12px",
+    paddingLeft: "16px",
   }),
   background: active
     ? theme.colors.primary
-    : variant === 'none' || variant === 'thin'
-    ? 'transparent'
-    : theme.colors.inputBackground,
-  color: active ? 'white' : theme.colors.text,
+    : variant === "none" || variant === "thin"
+      ? "transparent"
+      : theme.colors.inputBackground,
+  color: active ? "white" : theme.colors.text,
   opacity: disabled ? 0.25 : 1,
-  '&:focus': {
+  "&:focus": {
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
   },
-  '&:hover': {
+  "&:hover": {
     background: theme.colors.inputBackgroundLight,
   },
-  '&:active': {
+  "&:active": {
     background: theme.colors.activeBackground,
   },
-  ...(variant === 'primary' && {
+  ...(variant === "primary" && {
     background: theme.colors.primary,
-    color: 'white',
-    '&:hover': {
+    color: "white",
+    "&:hover": {
       background: theme.colors.primaryLight,
     },
-    '&:active': {
+    "&:active": {
       background: theme.colors.primary,
     },
   }),
-  ...(variant === 'secondary' && {
+  ...(variant === "secondary" && {
     background: theme.colors.secondary,
-    color: 'white',
-    '&:hover': {
+    color: "white",
+    "&:hover": {
       background: theme.colors.secondaryLight,
     },
-    '&:active': {
+    "&:active": {
       background: theme.colors.secondary,
     },
   }),
-  ...(variant === 'secondaryBright' && {
-    background: '#0ab557',
-    color: 'white',
-    '&:hover': {
+  ...(variant === "secondaryBright" && {
+    background: "#0ab557",
+    color: "white",
+    "&:hover": {
       opacity: 0.8,
     },
-    '&:active': {
+    "&:active": {
       opacity: 0.9,
     },
   }),
-  ...(variant === 'white' && {
-    background: 'white',
-    '&:hover': {
+  ...(variant === "white" && {
+    background: "white",
+    "&:hover": {
       opacity: 0.8,
     },
-    '&:active': {
+    "&:active": {
       opacity: 0.9,
     },
   }),
-  ...(variant === 'floating' && {
-    background: 'white',
+  ...(variant === "floating" && {
+    background: "white",
     color: theme.colors.text,
-    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
-    fontSize: '12px',
-    padding: '0px 4px',
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+    fontSize: "12px",
+    padding: "0px 4px",
   }),
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 
-  '& *': {
-    pointerEvents: 'none',
+  "& *": {
+    pointerEvents: "none",
   },
 }));
 
@@ -130,14 +130,14 @@ export const ButtonElement = styled.button<{
 const ButtonContent = styled.span(({ theme }) => ({
   // Line height of small text - maybe figure out better way to ensure
   // icons don't have a smaller height
-  minHeight: '19px',
-  display: 'flex',
-  alignItems: 'center',
-  flex: '1',
-  justifyContent: 'center',
+  minHeight: "19px",
+  display: "flex",
+  alignItems: "center",
+  flex: "1",
+  justifyContent: "center",
 
   // Helps with alignment with the default small text
-  lineHeight: '15px',
+  lineHeight: "15px",
 }));
 
 /* ----------------------------------------------------------------------------
@@ -146,7 +146,9 @@ const ButtonContent = styled.span(({ theme }) => ({
 
 export interface ButtonRootProps {
   id?: string;
-  flex?: CSSProperties['flex'];
+  className?: string;
+  style?: CSSProperties;
+  flex?: CSSProperties["flex"];
   tabIndex?: number;
   children: ReactNode;
   active?: boolean;
@@ -166,24 +168,28 @@ export interface ButtonRootProps {
 export const Button = forwardRef(function Button(
   {
     id,
+    className,
+    style,
     flex,
     tabIndex,
     tooltip,
     active = false,
     disabled = false,
-    variant = 'normal',
-    size = 'normal',
+    variant = "normal",
+    size = "normal",
     contentStyle,
     onClick,
     children,
     ...rest // Propagate any other props so this component works as a Slot
   }: ButtonRootProps,
-  forwardedRef: ForwardedRef<HTMLButtonElement>,
+  forwardedRef: ForwardedRef<HTMLButtonElement>
 ) {
   const buttonElement = (
     <ButtonElement
       ref={forwardedRef}
       id={id}
+      className={className}
+      style={style}
       flex={flex}
       tabIndex={tabIndex}
       active={active}

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