@noya-app/noya-designsystem 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/InputField.tsx

@@ -62,6 +62,8 @@ const LabelContainer = styled.label<{
   labelPosition: LabelPosition;
   hasDropdown: boolean;
 }>(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
+  ...theme.textStyles.label,
+  fontWeight: "bold",
   color: theme.colors.textDisabled,
   position: "absolute",
   top: 0,
@@ -71,8 +73,6 @@ const LabelContainer = styled.label<{
   display: "flex",
   alignItems: "center",
   pointerEvents,
-  fontWeight: "bold",
-  fontSize: "60%",
   userSelect: "none",
   ...(labelPosition === "start"
     ? { justifyContent: "flex-start", paddingLeft: "6px" }

package/src/components/Popover.tsx

@@ -1,9 +1,9 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import React, { ComponentProps } from 'react';
-import styled from 'styled-components';
-import { IconButton } from './IconButton';
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import React, { ComponentProps } from "react";
+import styled from "styled-components";
+import { IconButton } from "./IconButton";
 
-type PopoverVariant = 'normal' | 'large';
+type PopoverVariant = "normal" | "large";
 
 const ContentElement = styled(PopoverPrimitive.Content)<{
   variant?: PopoverVariant;
@@ -11,12 +11,12 @@ const ContentElement = styled(PopoverPrimitive.Content)<{
   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)',
-  maxHeight: '600px',
-  overflowY: 'auto',
+  boxShadow: "0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)",
+  maxHeight: "600px",
+  overflowY: "auto",
   color: theme.colors.textMuted,
-  ...(variant === 'large' && { width: '680px' }),
-  ...(variant === 'normal' && { width: '240px' }),
+  ...(variant === "large" && { width: "680px" }),
+  ...(variant === "normal" && { width: "240px" }),
   zIndex: 1000,
 }));
 
@@ -25,28 +25,28 @@ const ArrowElement = styled(PopoverPrimitive.Arrow)(({ theme }) => ({
 }));
 
 const PopoverClose = styled(PopoverPrimitive.Close)(({ theme }) => ({
-  all: 'unset',
-  fontFamily: 'inherit',
-  borderRadius: '100%',
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
   height: 25,
   width: 25,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  position: 'absolute',
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "absolute",
   top: 5,
   right: 5,
 }));
 
 interface Props
   extends Pick<
-    ComponentProps<typeof PopoverPrimitive['Content']>,
-    | 'onOpenAutoFocus'
-    | 'onCloseAutoFocus'
-    | 'onPointerDownOutside'
-    | 'onInteractOutside'
-    | 'onFocusOutside'
-    | 'side'
+    ComponentProps<(typeof PopoverPrimitive)["Content"]>,
+    | "onOpenAutoFocus"
+    | "onCloseAutoFocus"
+    | "onPointerDownOutside"
+    | "onInteractOutside"
+    | "onFocusOutside"
+    | "side"
   > {
   children: React.ReactNode;
   trigger: React.ReactNode;
@@ -91,6 +91,7 @@ export function Popover({
           onFocusOutside={onFocusOutside}
           onPointerDownOutside={onPointerDownOutside}
           collisionPadding={8}
+          arrowPadding={2}
           // Don't propagate pointer down events to the canvas
           onPointerDown={(event) => {
             event.stopPropagation();

package/src/components/Select.tsx

@@ -51,6 +51,15 @@ const createChevronSVGString = memoize(
 `
 );
 
+const SelectContainer = styled.div<{ flex: CSSProperties["flex"] }>(
+  ({ flex }) => ({
+    flex: flex ?? "1 1 0px",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative",
+  })
+);
+
 const SelectElement = styled.select<{ flex: CSSProperties["flex"] }>(
   ({ theme, flex }) => ({
     appearance: "none",
@@ -82,6 +91,21 @@ const SelectElement = styled.select<{ flex: CSSProperties["flex"] }>(
   })
 );
 
+const SelectLabel = styled.label(({ theme }) => ({
+  ...theme.textStyles.label,
+  color: theme.colors.textDisabled,
+  lineHeight: "19px",
+  position: "absolute",
+  inset: "0",
+  fontWeight: "bold",
+  fontSize: "60%",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "end",
+  paddingRight: "24px",
+}));
+
 type ChildrenProps<T> =
   | {
       children: ReactNode;
@@ -96,12 +120,14 @@ type Props<T extends string> = ChildrenProps<T> & {
   id: string;
   flex?: CSSProperties["flex"];
   value: T;
+  label?: string;
 };
 
 export const Select = memo(function Select<T extends string>({
   id,
   flex,
   value,
+  label,
   ...rest
 }: Props<T>) {
   const options = "options" in rest ? rest.options : undefined;
@@ -136,19 +162,22 @@ export const Select = memo(function Select<T extends string>({
 
   return (
     <SelectContext.Provider value={contextValue}>
-      <SelectElement
-        id={id}
-        flex={flex}
-        value={value}
-        onChange={useCallback(
-          (event: React.ChangeEvent<HTMLSelectElement>) =>
-            listeners.current.get(event.target.value)?.(),
-          [listeners]
-        )}
-        onPointerDown={(event) => event.stopPropagation()}
-      >
-        {optionElements}
-      </SelectElement>
+      <SelectContainer flex={flex}>
+        <SelectElement
+          id={id}
+          flex={flex}
+          value={value}
+          onChange={useCallback(
+            (event: React.ChangeEvent<HTMLSelectElement>) =>
+              listeners.current.get(event.target.value)?.(),
+            [listeners]
+          )}
+          onPointerDown={(event) => event.stopPropagation()}
+        >
+          {optionElements}
+        </SelectElement>
+      </SelectContainer>
+      {label && <SelectLabel htmlFor={id}>{label}</SelectLabel>}
     </SelectContext.Provider>
   );
 });

package/src/components/Sortable.tsx

@@ -22,6 +22,7 @@ import React, {
   Ref,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -262,6 +263,12 @@ function SortableRoot({
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
 
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <SortableItemContext.Provider
       value={useMemo(
@@ -285,7 +292,8 @@ function SortableRoot({
         <SortableContext items={keys} strategy={verticalListSortingStrategy}>
           {children}
         </SortableContext>
-        {renderOverlay &&
+        {mounted &&
+          renderOverlay &&
           createPortal(
             <DragOverlay dropAnimation={null}>
               {activeIndex !== undefined &&

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,35 +1,75 @@
-import { PlatformName } from "@noya-app/noya-keymap";
+import { getCurrentPlatform, PlatformName } from "@noya-app/noya-keymap";
 import React, {
   createContext,
   memo,
   ReactNode,
   useContext,
+  useEffect,
   useMemo,
+  useState,
 } from "react";
 import { ThemeProvider, useTheme } from "styled-components";
 import { ToastProvider } from "../components/Toast";
 import { Theme } from "../theme";
+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;
+  }) {
+    const parentTheme = useTheme();
+
+    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;
 };
 
-const DesignSystemConfigurationContext = createContext<
-  DesignSystemConfigurationContextValue | undefined
->(undefined);
+const DesignSystemConfigurationContext =
+  createContext<DesignSystemConfigurationContextValue>({
+    platform: "key",
+  });
 
 export const DesignSystemConfigurationProvider = memo(
   function DesignSystemConfigurationProvider({
     children,
-    theme,
+    theme = lightTheme,
     platform,
   }: {
     children: ReactNode;
-    theme: Theme;
-  } & DesignSystemConfigurationContextValue) {
-    const contextValue = useMemo(() => ({ platform }), [platform]);
+    theme?: Theme;
+    platform?: PlatformName;
+  }) {
+    const [internalPlatform, setInternalPlatform] = useState<PlatformName>(
+      platform ?? "key"
+    );
+
+    useEffect(() => {
+      if (platform !== undefined) return;
+
+      if (typeof navigator !== "undefined") {
+        setInternalPlatform(getCurrentPlatform(navigator));
+      }
+    }, [platform]);
+
+    const contextValue = useMemo(
+      () => ({ platform: platform ?? internalPlatform }),
+      [platform, internalPlatform]
+    );
 
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
@@ -46,13 +86,7 @@ export const DesignSystemConfigurationProvider = memo(
 );
 
 export function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue {
-  const value = useContext(DesignSystemConfigurationContext);
-
-  if (!value) {
-    throw new Error("Missing DesignSystemConfigurationProvider");
-  }
-
-  return value;
+  return useContext(DesignSystemConfigurationContext);
 }
 
 export function useDesignSystemTheme() {

package/src/theme/light.ts

@@ -181,7 +181,7 @@ export const textStyles = {
     fontWeight: 400,
     lineHeight: "1.4",
     textTransform: "uppercase",
-    letterSpacing: "0.3px",
+    letterSpacing: "-0.3px",
   } as CSSObject,
 };