@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/src/components/Text.tsx

@@ -1,9 +1,9 @@
 import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
-import styled, { CSSProperties } from "styled-components";
-import { Theme, ThemeColorName } from "../theme";
-import { BreakpointCollection, mergeBreakpoints } from "../utils/breakpoints";
+import { camelCaseToKebabCase, ThemeColor } from "../utils/tailwind";
 
-const elements: Record<keyof Theme["textStyles"], keyof ReactHTML> = {
+type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
+
+const elements: Record<Variant, keyof ReactHTML> = {
   title: "h1",
   subtitle: "h1",
   heading1: "h1",
@@ -18,47 +18,28 @@ const elements: Record<keyof Theme["textStyles"], keyof ReactHTML> = {
   label: "span",
 };
 
-type StyleProps = {
-  flex?: CSSProperties["flex"];
-  padding?: CSSProperties["padding"];
-  background?: CSSProperties["background"];
-  borderRadius?: CSSProperties["borderRadius"];
-  textAlign?: CSSProperties["textAlign"];
-  fontWeight?: CSSProperties["fontWeight"];
-  fontStyle?: CSSProperties["fontStyle"];
-  fontSize?: CSSProperties["fontSize"];
-  lineHeight?: CSSProperties["lineHeight"];
-  fontFamily?: CSSProperties["fontFamily"];
-  wordBreak?: CSSProperties["wordBreak"];
-  whiteSpace?: CSSProperties["whiteSpace"];
-  height?: CSSProperties["height"];
-  width?: CSSProperties["width"];
-  minWidth?: CSSProperties["minWidth"];
-  maxWidth?: CSSProperties["maxWidth"];
-  opacity?: CSSProperties["opacity"];
-  position?: CSSProperties["position"];
-  overflow?: CSSProperties["overflow"];
-  textOverflow?: CSSProperties["textOverflow"];
-  textDecoration?: CSSProperties["textDecoration"];
-  display?: CSSProperties["display"];
-  top?: CSSProperties["top"];
-  right?: CSSProperties["right"];
-  bottom?: CSSProperties["bottom"];
-  left?: CSSProperties["left"];
-  userSelect?: CSSProperties["userSelect"];
-  cursor?: CSSProperties["cursor"];
-};
-
-export type TextBreakpointList = BreakpointCollection<StyleProps>;
-
-interface Props extends StyleProps {
+export const textStyles: Record<Variant, string> = {
+  title: "font-sans text-title font-bold sm:text-[36px]",
+  subtitle: "font-sans text-subtitle font-medium sm:text-[18px]",
+  heading1: "font-sans text-heading1 font-semibold",
+  heading2: "font-sans text-heading2 font-medium",
+  heading3: "font-sans text-heading3 font-normal",
+  heading4: "font-sans text-heading4 font-medium",
+  heading5: "font-sans text-heading5 font-medium",
+  body: "font-sans text-base font-normal",
+  small: "font-sans text-heading5 font-normal",
+  button: "font-sans text-button font-medium",
+  code: "font-mono text-code",
+  label: "font-sans text-label font-normal uppercase",
+} as const;
+
+export type  TextProps = {
   as?: keyof ReactHTML;
   href?: string;
   className?: string;
   style?: React.CSSProperties;
-  variant: keyof Theme["textStyles"];
-  breakpoints?: BreakpointCollection<StyleProps> | null | false;
-  color?: ThemeColorName;
+  variant: Variant;
+  color?: ThemeColor;
   children: ReactNode;
   onClick?: () => void;
   onDoubleClick?: () => void;
@@ -66,58 +47,42 @@ interface Props extends StyleProps {
   tabIndex?: number;
 }
 
-const StyledElement = styled.span<{
-  $variant: keyof Theme["textStyles"];
-  $styleProps: StyleProps;
-  $color: ThemeColorName;
-  $breakpoints: BreakpointCollection<StyleProps> | null | false;
-}>(({ theme, $variant, $styleProps, $breakpoints, $color }) => ({
-  ...(theme.textStyles as any)[$variant],
-  color: $color ? theme.colors[$color] : undefined,
-  ...$styleProps,
-  ...mergeBreakpoints($breakpoints || []),
-}));
-
 export const Text = forwardRef(function Text(
   {
     as,
     variant,
-    breakpoints,
     children,
     className,
-    color,
+    color = "text",
     href,
     tabIndex,
     onClick,
     onKeyDown,
     style,
     ...rest
-  }: Props,
+  }: TextProps,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
-  const element = as ?? elements[variant] ?? "span";
+  const Component = as ?? elements[variant] ?? "span";
 
   return (
-    <StyledElement
+    <Component
+      // @ts-expect-error expected to be many semantic html elements
       ref={forwardedRef}
-      as={element}
-      className={className}
+      className={`${textStyles[variant]} text-${camelCaseToKebabCase(String(color)) ?? "text"} ${className ?? ""}`}
       style={style}
       tabIndex={tabIndex}
-      $variant={variant}
-      $breakpoints={breakpoints}
-      $styleProps={rest}
-      $color={color}
       onClick={onClick}
       onKeyDown={onKeyDown}
       {...((href && { href }) as any)}
+      {...rest}
     >
       {children}
-    </StyledElement>
+    </Component>
   );
 });
 
-type PresetProps = Omit<Props, "variant">;
+type PresetProps = Omit<TextProps, "variant">;
 
 export const Heading1 = forwardRef(
   (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (

package/src/components/TextArea.tsx

@@ -1,30 +1,5 @@
 import { assignRef } from "@noya-app/react-utils";
 import React, { forwardRef, memo, useCallback, useEffect, useRef } from "react";
-import styled from "styled-components";
-
-const TextAreaElement = styled.textarea(({ theme }) => ({
-  ...theme.textStyles.small,
-  color: theme.colors.text,
-  background: theme.colors.inputBackground,
-  width: "0px",
-  flex: "1 1 auto",
-  padding: "4px 6px",
-  border: "none",
-  outline: "none",
-  height: 100,
-  borderRadius: "4px",
-  "&::placeholder": {
-    color: theme.colors.textDisabled,
-  },
-  "&:focus": {
-    boxShadow: `0 0 0 2px ${theme.colors.primary}`,
-  },
-  // readonly
-  "&:read-only": {
-    color: theme.colors.textDisabled,
-  },
-  resize: "none",
-}));
 
 export const useAutoResize = (value: string) => {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -44,14 +19,12 @@ export const AutoResizingTextArea = memo(
     {
       value,
       onChangeText,
+      className,
       ...rest
-    }: Omit<
-      React.ComponentProps<typeof TextAreaElement>,
-      "onChange" | "value"
-    > & {
+    }: {
       onChangeText: (value: string) => void;
       value?: string;
-    },
+    } & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
   ) {
     const ref = useAutoResize(value || rest.placeholder || "");
@@ -71,7 +44,8 @@ export const AutoResizingTextArea = memo(
     );
 
     return (
-      <TextAreaElement
+      <textarea
+        className={`font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary focus:z-10 read-only:text-text-disabled ${className ?? ""}`}
         ref={handleRef}
         {...rest}
         onChange={handleChange}

package/src/components/Toast.tsx

@@ -1,56 +1,7 @@
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import React, { ReactNode } from 'react';
-import styled from 'styled-components';
 import { IconButton } from './IconButton';
-
-const ToastViewport = styled(ToastPrimitive.Viewport)({
-  position: 'fixed',
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  padding: 20,
-  gap: 10,
-  minWidth: 200,
-  maxWidth: '100vw',
-  margin: 0,
-  listStyle: 'none',
-  zIndex: 2147483647,
-  outline: 'none',
-});
-
-const ToastRoot = styled(ToastPrimitive.Root)(({ theme }) => ({
-  borderRadius: 4,
-  fontSize: 14,
-  backgroundColor: theme.colors.popover.background,
-  boxShadow: '0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)',
-  color: theme.colors.textMuted,
-
-  padding: '8px 10px',
-  display: 'grid',
-  gridTemplateAreas: '"title action" "description action"',
-  gridTemplateColumns: 'auto max-content',
-  columnGap: 10,
-  alignItems: 'center',
-}));
-
-const ToastTitle = styled(ToastPrimitive.Title)(({ theme }) => ({
-  gridArea: 'title',
-  marginBottom: 5,
-  ...theme.textStyles.label,
-  fontWeight: 'bold',
-  color: theme.colors.text,
-}));
-
-const ToastDescription = styled(ToastPrimitive.Description)(({ theme }) => ({
-  gridArea: 'description',
-  ...theme.textStyles.small,
-  color: theme.colors.textMuted,
-}));
-
-const ToastAction = styled(ToastPrimitive.Action)({
-  gridArea: 'action',
-});
+import { textStyles } from './Text';
 
 export const Toast = ({
   title,
@@ -63,24 +14,31 @@ export const Toast = ({
   children?: React.ReactNode;
 }) => {
   return (
-    <ToastRoot {...props}>
-      {title && <ToastTitle>{title}</ToastTitle>}
-      <ToastDescription>{content}</ToastDescription>
+    <ToastPrimitive.Root
+      className="px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] text-text-muted"
+      {...props}
+    >
+      {title && (
+        <ToastPrimitive.Title className={`mb-[5px] ${textStyles.label} font-bold text-text`}>
+          {title}
+        </ToastPrimitive.Title>
+      )}
+      <ToastPrimitive.Description className={`${textStyles.small} text-text-muted`}>{content}</ToastPrimitive.Description>
       {children && (
-        <ToastAction asChild altText="">
+        <ToastPrimitive.Action asChild altText="">
           {children}
-        </ToastAction>
+        </ToastPrimitive.Action>
       )}
       <ToastPrimitive.Close aria-label="Close" asChild>
         <IconButton iconName="Cross1Icon" />
       </ToastPrimitive.Close>
-    </ToastRoot>
+    </ToastPrimitive.Root>
   );
 };
 
 export const ToastProvider = ({ children }: { children: React.ReactNode }) => (
   <ToastPrimitive.Provider>
     {children}
-    <ToastViewport />
+    <ToastPrimitive.Viewport className="fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
   </ToastPrimitive.Provider>
 );

package/src/components/Tooltip.tsx

@@ -1,21 +1,11 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import React, { memo, ReactNode } from 'react';
-import styled from 'styled-components';
+import { textStyles } from './Text';
 
 // const Arrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
 //   fill: theme.colors.popover.background,
 // }));
 
-const Content = styled(TooltipPrimitive.Content)(({ theme }) => ({
-  ...theme.textStyles.small,
-  color: theme.colors.text,
-  borderRadius: 3,
-  padding: `${theme.sizes.spacing.small}px ${theme.sizes.spacing.medium}px`,
-  backgroundColor: theme.colors.popover.background,
-  boxShadow: '0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)',
-  border: `1px solid ${theme.colors.dividerStrong}`,
-}));
-
 interface Props {
   children: ReactNode;
   content: ReactNode;
@@ -27,15 +17,16 @@ export const Tooltip = memo(function Tooltip({ children, content }: Props) {
       <TooltipPrimitive.Root>
         <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
-          <Content
+          <TooltipPrimitive.Content
             side="bottom"
             align="center"
             sideOffset={2}
             collisionPadding={8}
+            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_var(--shadow-color)_0_0_12px_var(--shadow-color)] border border-solid border-divider-strong`}
           >
             {content}
             {/* <Arrow /> */}
-          </Content>
+          </TooltipPrimitive.Content>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>

package/src/components/WorkspaceLayout.tsx

@@ -1,9 +1,11 @@
-import {
-  DesignSystemThemeProvider,
-  useDesignSystemTheme,
-} from "@noya-app/noya-designsystem";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -98,9 +100,17 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
   const rightSidebarRef = useRef<ImperativePanelHandle>(null);
 
-  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const [internalLayoutState, setInternalLayoutState] =
+    useState<PanelLayoutState | null>(null);
+  const handleChangeLayoutState = useCallback(
+    (state: PanelLayoutState) => {
+      setInternalLayoutState(state);
+      onChangeLayoutState?.(state);
+    },
+    [onChangeLayoutState]
+  );
 
-  const theme = useDesignSystemTheme();
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
 
   useImperativeHandle(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded: boolean) => {
@@ -174,7 +184,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
       id={id}
       className={className}
       style={{
-        backgroundColor: theme.colors.canvas.background,
+        backgroundColor: "var(--canvas-background)",
         display: "flex",
         flexDirection: "row",
         ...style,
@@ -207,14 +217,16 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 position: "relative",
               }}
             >
-              {leftPanelContent}
+              {internalLayoutState?.leftSidebarCollapsed
+                ? null
+                : leftPanelContent}
             </Panel>
             <PanelResizeHandle
               style={{
                 cursor: "col-resize",
                 width: "1px",
                 height: "100%",
-                backgroundColor: theme.colors.divider,
+                backgroundColor: "var(--divider)",
               }}
             />
           </>
@@ -239,7 +251,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 cursor: "col-resize",
                 width: "1px",
                 height: "100%",
-                backgroundColor: theme.colors.divider,
+                backgroundColor: "var(--divider)",
               }}
             />
             <Panel
@@ -255,7 +267,9 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 position: "relative",
               }}
             >
-              {rightPanelContent}
+              {internalLayoutState?.rightSidebarCollapsed
+                ? null
+                : rightPanelContent}
             </Panel>
           </>
         )}
@@ -268,9 +282,5 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
   props: Props,
   forwardedRef: React.ForwardedRef<IWorkspaceLayout>
 ) {
-  return (
-    <DesignSystemThemeProvider>
-      <WorkspaceLayoutWithTheme {...props} ref={forwardedRef} />
-    </DesignSystemThemeProvider>
-  );
+  return <WorkspaceLayoutWithTheme {...props} ref={forwardedRef} />;
 });

package/src/components/internal/Menu.tsx

@@ -1,10 +1,10 @@
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
 import React, { memo, ReactNode } from "react";
-import styled, { CSSObject } from "styled-components";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
-import { Theme } from "../../theme";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
+import { cn } from "../../utils/tailwind";
+import { textStyles } from "../Text";
 
 export const SEPARATOR_ITEM = "separator";
 
@@ -77,76 +77,39 @@ export type MenuItem<T extends string> =
 export type ExtractMenuItemType<T> =
   T extends RegularMenuItem<infer U> ? U : never;
 
-export const CHECKBOX_WIDTH = 15;
-export const CHECKBOX_RIGHT_INSET = 3;
+export const CHECKBOX_WIDTH = 16;
+export const CHECKBOX_RIGHT_INSET = 8;
 
 export const styles = {
-  separatorStyle: ({ theme }: { theme: Theme }): CSSObject => ({
-    height: "1px",
-    backgroundColor: theme.colors.divider,
-    margin: "4px -4px",
-  }),
-
-  itemStyle: ({
-    theme,
-    disabled,
-  }: {
-    theme: Theme;
-    disabled?: boolean;
-  }): CSSObject => ({
-    ...theme.textStyles.button,
-    flex: "0 0 auto",
-    userSelect: "none",
-    cursor: "pointer",
-    borderRadius: "3px",
-    padding: "6px 8px",
-    ...(disabled && {
-      color: theme.colors.textDisabled,
-    }),
-    "&:focus": {
-      outline: "none",
-      color: "white",
-      backgroundColor: theme.colors.primary,
-
-      "& kbd": {
-        color: "white",
-      },
-    },
-    "&:active": {
-      background: theme.colors.primaryLight,
-    },
-    display: "flex",
-    alignItems: "center",
-  }),
-
-  itemIndicatorStyle: {
-    display: "flex",
-    alignItems: "center",
-    left: `-${CHECKBOX_WIDTH / 2}px`,
-    position: "relative",
-    marginRight: `-${CHECKBOX_RIGHT_INSET}px`,
-  } as CSSObject,
-
-  contentStyle: ({
-    theme,
-    scrollable,
-  }: {
-    theme: Theme;
-    scrollable?: boolean;
-  }): CSSObject => ({
-    borderRadius: 4,
-    backgroundColor: theme.colors.popover.background,
-    color: theme.colors.text,
-    boxShadow: "0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)",
-    padding: "4px",
-    border: `1px solid ${theme.colors.popover.divider}`,
-    zIndex: 1000,
-    ...(scrollable && {
-      height: "100%",
-      maxHeight: "calc(100vh - 80px)",
-      overflow: "hidden auto",
-    }),
-  }),
+  separatorStyle: "h-px bg-divider mx-[-4px] my-1",
+
+  itemStyle: ({ disabled }: { disabled?: boolean }) => `
+    flex-none select-none cursor-pointer rounded
+    p-[6px_8px]
+    flex items-center
+    font-sans text-button font-medium 
+    ${disabled ? "text-text-disabled" : ""}
+    focus:outline-none focus:text-white focus:bg-primary
+    focus:kbd:text-white
+    active:bg-primary-light
+  `,
+
+  itemIndicatorStyle: `
+    flex items-center
+    relative
+    -left-2.5
+    -mr-2
+  `,
+
+  contentStyle: `
+    rounded
+    bg-popover-background
+    text-text
+    shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)]
+    p-1
+    border border-popover-divider
+    z-50
+  `,
 };
 
 function getKeyboardShortcuts<T extends string>(
@@ -172,18 +135,9 @@ export function getKeyboardShortcutsForMenuItems<T extends string>(
   );
 }
 
-const ShortcutElement = styled.kbd<{
-  $fixedWidth?: boolean;
-}>(
-  ({ theme, $fixedWidth }): CSSObject => ({
-    ...theme.textStyles.small,
-    color: theme.colors.textDisabled,
-    ...($fixedWidth && {
-      width: "0.9rem",
-      textAlign: "center",
-    }),
-  })
-);
+const ShortcutElement = ({children, fixedWidth}: {children?: React.ReactNode; fixedWidth?: boolean}) => (
+  <kbd className={cn(textStyles.small, "text-text-disabled", fixedWidth && "w-[0.9rem] text-center")}>{children}</kbd>
+)
 
 export const KeyboardShortcut = memo(function KeyboardShortcut({
   shortcut,
@@ -197,7 +151,7 @@ export const KeyboardShortcut = memo(function KeyboardShortcut({
   const keyElements = keys.map((key) => (
     <ShortcutElement
       key={key}
-      $fixedWidth={platform === "mac" && key.length === 1}
+      fixedWidth={platform === "mac" && key.length === 1}
     >
       {key}
     </ShortcutElement>

package/src/contexts/DesignSystemConfiguration.tsx

@@ -8,41 +8,10 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { ThemeProvider, useTheme } from "styled-components";
 import { ToastProvider } from "../components/Toast";
-import { Theme } from "../theme";
-import * as darkTheme from "../theme/dark";
-import * as lightTheme from "../theme/light";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
 
-export const DesignSystemThemeProvider = memo(
-  function DesignSystemThemeProvider({
-    children,
-    theme,
-  }: {
-    children: ReactNode;
-    theme?: Theme;
-  }) {
-    let parentTheme: Theme | undefined;
-
-    try {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      parentTheme = useTheme();
-    } catch (e) {
-      // console.error(e);
-    }
-
-    if (theme) {
-      return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-    } else if (parentTheme) {
-      return children;
-    } else {
-      return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
-    }
-  }
-);
-
 export type DesignSystemConfigurationContextValue = {
   platform: PlatformName;
 };
@@ -55,11 +24,9 @@ const DesignSystemConfigurationContext =
 export const DesignSystemConfigurationProvider = memo(
   function DesignSystemConfigurationProvider({
     children,
-    theme,
     platform,
   }: {
     children: ReactNode;
-    theme?: Theme | "light" | "dark";
     platform?: PlatformName;
   }) {
     const [internalPlatform, setInternalPlatform] = useState<PlatformName>(
@@ -79,22 +46,13 @@ export const DesignSystemConfigurationProvider = memo(
       [platform, internalPlatform]
     );
 
-    const resolvedTheme =
-      theme === "light"
-        ? lightTheme
-        : theme === "dark"
-          ? darkTheme
-          : theme ?? lightTheme;
-
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-        <ThemeProvider theme={resolvedTheme}>
           <DialogProvider>
             <ToastProvider>
               <FloatingWindowProvider>{children}</FloatingWindowProvider>
             </ToastProvider>
           </DialogProvider>
-        </ThemeProvider>
       </DesignSystemConfigurationContext.Provider>
     );
   }
@@ -102,8 +60,4 @@ export const DesignSystemConfigurationProvider = memo(
 
 export function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue {
   return useContext(DesignSystemConfigurationContext);
-}
-
-export function useDesignSystemTheme() {
-  return useTheme();
-}
+}