@datalayer/primer-addons 1.0.4 → 1.0.5

package/lib/_utils/story-helpers.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ArgTypes } from '@storybook/react';
+import { Icon } from '@primer/octicons-react';
+type StoryContext = Record<string, unknown> & {
+    globals: {
+        colorScheme: string;
+    };
+    parameters: Record<string, unknown>;
+};
+export declare const colormodeFromScheme: (colorScheme: string) => "dark" | "light";
+export declare const withThemeProvider: (Story: React.FC<React.PropsWithChildren<StoryContext>>, context: StoryContext) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const toolbarTypes: {
+    colorScheme: {
+        name: string;
+        description: string;
+        defaultValue: string;
+        toolbar: {
+            icon: string;
+            items: string[];
+            title: string;
+        };
+    };
+};
+export declare const inputWrapperArgTypes: ArgTypes;
+export declare const getTextInputArgTypes: (category?: string) => Record<string, unknown>;
+export declare const OcticonArgType: (iconList: Icon[]) => {
+    options: string[];
+    control: string;
+    mapping: Record<string, Icon>;
+};
+export {};

package/lib/_utils/story-helpers.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGlobalStyle } from 'styled-components';
+import { ThemeProvider, themeGet, BaseStyles, theme } from '@primer/react';
+// set global theme styles for each story
+const GlobalStyle = createGlobalStyle `
+  body,
+  .docs-story {
+    background-color: ${themeGet('colors.canvas.default')};
+    color: ${themeGet('colors.fg.default')};
+  }
+`;
+export const colormodeFromScheme = (colorScheme) => {
+    return colorScheme.startsWith('light') ? 'light' : 'dark';
+};
+export const withThemeProvider = (Story, context) => {
+    // used for testing ThemeProvider.stories.tsx
+    if (context.parameters.disableThemeDecorator)
+        return Story(context);
+    const { colorScheme } = context.globals;
+    return (_jsxs(ThemeProvider, { theme: theme, colorMode: colormodeFromScheme(colorScheme), dayScheme: colorScheme, nightScheme: colorScheme, children: [colorScheme.startsWith('light') ? (_jsx(GlobalStyle, { "$lightTheme": true })) : (_jsx(GlobalStyle, {})), _jsx(BaseStyles, { children: _jsx("div", { id: "html-addon-root", children: Story(context) }) })] }));
+};
+export const toolbarTypes = {
+    colorScheme: {
+        name: 'Color Scheme',
+        description: 'Switch color scheme',
+        defaultValue: 'light',
+        toolbar: {
+            icon: 'photo',
+            items: [...Object.keys(theme.colorSchemes)],
+            title: 'Color Scheme',
+        },
+    },
+};
+export const inputWrapperArgTypes = {
+    block: {
+        defaultValue: false,
+        control: 'boolean',
+    },
+    contrast: {
+        defaultValue: false,
+        control: 'boolean',
+    },
+    disabled: {
+        defaultValue: false,
+        control: 'boolean',
+    },
+    placeholder: {
+        defaultValue: '',
+        control: 'text',
+    },
+    size: {
+        name: 'size (input)', // TODO: remove '(input)'
+        defaultValue: 'medium',
+        options: ['small', 'medium', 'large'],
+        control: 'radio',
+    },
+    validationStatus: {
+        defaultValue: undefined,
+        options: ['error', 'success', undefined],
+        control: 'radio',
+    },
+};
+const textInputArgTypesUnsorted = {
+    ...inputWrapperArgTypes,
+    loading: {
+        defaultValue: false,
+        control: 'boolean',
+    },
+    loaderPosition: {
+        defaultValue: 'auto',
+        options: ['auto', 'leading', 'trailing'],
+        control: 'radio',
+    },
+    monospace: {
+        defaultValue: false,
+        control: 'boolean',
+    },
+};
+// Alphabetize and optionally categorize the props
+export const getTextInputArgTypes = (category) => Object.keys(textInputArgTypesUnsorted)
+    .sort()
+    .reduce((obj, key) => {
+    obj[key] = category
+        ? {
+            // have to do weird type casting so we can spread the object
+            ...textInputArgTypesUnsorted[key],
+            table: {
+                category,
+            },
+        }
+        : textInputArgTypesUnsorted[key];
+    return obj;
+}, {});
+// Use this function for icon options in the controls. Desired icons are passed in as an array of Octicons
+export const OcticonArgType = (iconList) => {
+    const icons = iconList.reduce((obj, icon) => {
+        obj[icon.displayName || 'Icon'] = icon;
+        return obj;
+    }, {});
+    return {
+        options: Object.keys(icons),
+        control: 'select',
+        mapping: icons,
+    };
+};

package/lib/components/card/Card.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ThemeProvider, BaseStyles, Box, Button, IconButton, Text, ButtonGroup } from "@primer/react";
+import { Box, Button, IconButton, Text, ButtonGroup } from "@primer/react";
 import { ProjectIcon, ThreeBarsIcon } from '@primer/octicons-react';
 import { Card } from '../..';
 const meta = {
@@ -14,7 +14,7 @@ const meta = {
 };
 export default meta;
 const ThemedCard = (props) => {
-    return (_jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(Box, { children: _jsx(Card, { ...props }) }) }) }) }));
+    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(Box, { children: _jsx(Card, { ...props }) }) }));
 };
 export const CardDay = {
     args: {

package/lib/components/closeable-flash/CloseableFlash.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider, BaseStyles, Box } from "@primer/react";
+import { Box } from "@primer/react";
 import { CheckIcon } from "@primer/octicons-react";
 import { CloseableFlash } from '../..';
 const meta = {
@@ -14,7 +14,7 @@ const meta = {
 };
 export default meta;
 const ThemedCloseableFlash = (props) => {
-    return (_jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(Box, { children: _jsx(CloseableFlash, { ...props }) }) }) }) }));
+    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(Box, { children: _jsx(CloseableFlash, { ...props }) }) }));
 };
 export const CloseableFlashDay = {
     args: {

package/lib/components/content-loader/ContentLoader.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider, BaseStyles, Box } from "@primer/react";
+import { Box } from "@primer/react";
 import { ContentLoader } from '../..';
 const meta = {
     title: 'Components/ContentLoader',
@@ -12,7 +12,7 @@ const meta = {
     },
 };
 export default meta;
-const ThemedContentLoader = (props) => _jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(ContentLoader, { ...props }) }) }) });
+const ThemedContentLoader = (props) => _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(ContentLoader, { ...props }) });
 export const ContentLoaderDay = {
     args: {
         count: 3

package/lib/components/icons/CircleIcon.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider, BaseStyles, Box } from "@primer/react";
+import { Box } from "@primer/react";
 import { CircleIcon } from '../..';
 const meta = {
     title: 'Components/CircleIcon',
@@ -12,7 +12,7 @@ const meta = {
     },
 };
 export default meta;
-const ThemedCircleIcon = (props) => _jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(CircleIcon, { ...props }) }) }) });
+const ThemedCircleIcon = (props) => _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(CircleIcon, { ...props }) });
 export const CircleIconDay = {
     args: {
         color: 'danger',

package/lib/components/overlay/Overlay.d.ts

@@ -1,15 +1,13 @@
 export interface OverlayProps {
     closeButtonRef?: React.RefObject<HTMLButtonElement>;
     content: JSX.Element;
-    direction: 'left' | 'right';
+    direction?: 'left' | 'right';
     headingRef?: React.RefObject<HTMLHeadingElement>;
     isOpen?: boolean;
     openButtonRef?: React.RefObject<HTMLButtonElement>;
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-    width: number | string;
+    width?: number | string;
+    zIndex?: number;
 }
-export declare const Overlay: {
-    (props: OverlayProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: Partial<OverlayProps>;
-};
+export declare const Overlay: ({ width, direction, zIndex, ...rest }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
 export default Overlay;

package/lib/components/overlay/Overlay.js

@@ -1,53 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Box, IconButton, Overlay as PrimerOverlay } from "@primer/react";
+import { IconButton, Overlay as PrimerOverlay, BaseStyles, ThemeProvider, useTheme } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
+import { Box } from '../box/Box';
 const PrimerAddonOverlay = (props) => {
-    const { closeButtonRef, content, direction: propsDirection, headingRef, isOpen, openButtonRef, setIsOpen, width, } = props;
+    const { closeButtonRef, content, direction: propsDirection, headingRef, isOpen, openButtonRef, setIsOpen, width, zIndex, } = props;
+    const { theme, colorMode } = useTheme();
     const [direction, _] = useState(propsDirection);
     const [top, setTop] = useState(0);
     useEffect(() => {
         setTop(headingRef?.current?.getBoundingClientRect().bottom ?? 0);
     }, [headingRef]);
     const closeOverlay = () => setIsOpen(false);
+    const overlayContent = (_jsx(ThemeProvider, { theme: theme, colorMode: colorMode, children: _jsx(BaseStyles, { children: _jsxs(Box, { sx: {
+                    /* We need to remove the padding */
+                    height: `calc(100vh - ${top}px - 8px)`,
+                    width,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    padding: '4px'
+                }, children: [_jsx(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'right',
+                            width: '100%'
+                        }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) }) }));
     return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?
-                    _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: "inside-right", top: top, children: _jsxs(Box, { sx: {
-                                /* We need to remove the padding */
-                                height: `calc(100vh - ${top}px - 8px)`,
-                                width,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                padding: '4px'
-                            }, children: [_jsx(Box, { sx: {
-                                        display: 'flex',
-                                        justifyContent: 'right',
-                                        width: '100%'
-                                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) })
+                    _jsx(Box, { sx: { zIndex }, children: _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: "inside-right", left: 0, position: "fixed", top: top, children: overlayContent }) })
                     :
-                        _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: 'inside-left', right: 0, position: "fixed", top: top, children: _jsxs(Box, { sx: {
-                                    /* We need to remove the padding */
-                                    height: `calc(100vh - ${top}px - 8px)`,
-                                    width,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                    padding: '4px'
-                                }, children: [_jsx(Box, { sx: {
-                                            display: 'flex',
-                                            justifyContent: 'right',
-                                            width: '100%'
-                                        }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) })
+                        _jsx(Box, { sx: { zIndex }, children: _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: 'inside-left', right: 0, position: "fixed", top: top, children: overlayContent }) })
                 : _jsx(_Fragment, {}) })
         :
             _jsx(_Fragment, {}));
 };
-export const Overlay = (props) => {
-    return (_jsx(PrimerAddonOverlay, { ...props }));
-};
-Overlay.defaultProps = {
-    width: '500px',
+export const Overlay = ({ width = '500px', direction = 'left', zIndex = 100, ...rest }) => {
+    return (_jsx(PrimerAddonOverlay, { width: width, direction: direction, zIndex: zIndex, ...rest }));
 };
 export default Overlay;

package/lib/components/overlay/Overlay.stories.d.ts

@@ -2,10 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { OverlayProps } from '../..';
 declare const meta: {
     title: string;
-    component: {
-        (props: OverlayProps): import("react/jsx-runtime").JSX.Element;
-        defaultProps: Partial<OverlayProps>;
-    };
+    component: ({ width, direction, zIndex, ...rest }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/overlay/Overlay.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { Heading, Text, ThemeProvider, BaseStyles, Box, Button } from "@primer/react";
+import { Heading, Text, Box, Button } from "@primer/react";
 import { Overlay } from '../..';
 const meta = {
     title: 'Components/Overlay',
@@ -18,7 +18,7 @@ const ThemedOverlay = (props) => {
     const openButtonRef = useRef(null);
     const closeButtonRef = useRef(null);
     const headingRef = useRef(null);
-    return (_jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef, headingRef: props.direction === 'left' ? headingRef : undefined })] })] }) }) }) }));
+    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef })] })] }) }));
 };
 export const OverlayDayLeft = {
     args: {

package/lib/components/slider/Slider.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { SliderProps } from '../../index';
+declare const meta: {
+    title: string;
+    component: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SliderStory: Story;

package/lib/components/slider/Slider.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, CounterLabel } from "@primer/react";
+import { Slider } from '../../index';
+const meta = {
+    title: 'Components/Slider',
+    component: Slider,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const ThemedSlider = (props) => {
+    const [value, setValue] = useState(50);
+    return (_jsxs(Box, { p: 3, bg: "canvas.default", children: [_jsx(Box, { children: _jsx(Slider, { ...props, value: value, onChange: setValue }) }), _jsx(Box, { children: _jsx(CounterLabel, { sx: { ml: 2 }, children: value }) })] }));
+};
+export const SliderStory = {
+    args: {
+        name: "slider-day",
+        id: "slider-day",
+        min: 0,
+        max: 100,
+        step: 10,
+        value: 50,
+        onChange: (value) => {
+            console.log('Slider value changed:', value);
+        },
+    },
+    render: (args) => _jsx(ThemedSlider, { ...args })
+};

package/lib/utils/Portals.js

@@ -5,6 +5,15 @@
 import { registerPortalRoot } from '@primer/react';
 import '@primer/react-brand/lib/css/main.css';
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+/**
+ * Resolve 'auto' colormode to the actual OS preference.
+ */
+const resolveColormode = (colormode) => {
+    if (colormode === 'auto') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return colormode;
+};
 /**
  * Ensure we define a root for Primer portal root.
  *
@@ -12,9 +21,10 @@ const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
  *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
  */
 export const setupPrimerPortals = (colormode = 'light') => {
+    const resolved = resolveColormode(colormode);
     const body = document.body;
     body.dataset['portalRoot'] = 'true';
-    body.dataset['colorMode'] = colormode;
+    body.dataset['colorMode'] = resolved;
     body.dataset['lightTheme'] = 'light';
     body.dataset['darkTheme'] = 'dark';
     body.id = PRIMER_PORTAL_ROOT_ID;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
@@ -33,23 +33,27 @@
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^9.0.15",
     "@storybook/addon-essentials": "9.0.0-alpha.12",
-    "@storybook/addon-interactions": "9.0.0-alpha.10",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
     "@storybook/addon-links": "^9.0.15",
-    "@storybook/blocks": "9.0.0-alpha.17",
+    "@storybook/blocks": "^9.0.0-alpha.17",
     "@storybook/react": "^9.0.15",
     "@storybook/react-vite": "^9.0.15",
     "@storybook/testing-library": "^0.2.2",
+    "@types/prettier": "^3.0.0",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
     "@vitejs/plugin-react": "^4.5.2",
+    "crypto-browserify": "^3.12.0",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
+    "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "storybook": "^9.0.15",
     "typescript": "^5.8.3",