@datalayer/primer-addons 0.2.1 → 0.2.3

package/README.md

@@ -15,13 +15,13 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 ## Current Addons
 
 - [ ] Backdrop
-- [ ] BrandHeader
-- [ ] BrandHeaderLines
-- [ ] BrandFooter
+- [ ] Brand Header
+- [ ] Brand Header Lines
+- [ ] Brand Footer
+- [x] Content Loader
 - [x] Card
-- [x] ClosableFlash
-- [ ] MasonryBox
-- [ ] Skeleton
+- [x] Closable Flash
+- [ ] Masonry Box
 - [x] Slider
 - [x] Toolbar
 

package/lib/components/card/Card.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { BoxProps } from "@primer/react";
-import { Icon } from "@primer/octicons-react";
 export type CardProps = Omit<BoxProps, 'border'> & {
     rounded?: 'small' | 'medium' | 'large' | 'full' | number;
     border?: boolean;
@@ -9,7 +8,7 @@ export type CardProps = Omit<BoxProps, 'border'> & {
 export type CardHeaderProps = {
     title?: string;
     description?: string;
-    leadingIcon?: Icon;
+    leadingIcon?: React.ElementType;
     action?: React.ReactNode;
 };
 export type CardImageProps = {

package/lib/components/card/Card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, StyledOcticon, Text } from "@primer/react";
+import { Box, Octicon, Text } from "@primer/react";
 const roundedVals = {
     small: "3px",
     medium: "6px",
@@ -35,7 +35,7 @@ export const Card = (props) => {
 };
 Card.Header = (props) => {
     const { title, description, leadingIcon, action } = props;
-    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingIcon && _jsx(Box, { sx: { mr: 3 }, children: _jsx(StyledOcticon, { size: "medium", icon: leadingIcon }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
+    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingIcon && _jsx(Box, { sx: { mr: 3 }, children: _jsx(Octicon, { size: "medium", icon: leadingIcon }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
 };
 Card.Image = ({ url, image, svg, height }) => {
     return (_jsxs(Box, { display: "block", width: "100%", height: `${height}px`, backgroundImage: `url(${url})`, sx: {

package/lib/components/closeable-flash/CloseableFlash.d.ts

@@ -1,8 +1,7 @@
 import { FC } from "react";
 import { FlashProps } from "@primer/react";
-import { Icon } from "@primer/octicons-react";
 export type CloseableFlashProps = FlashProps & {
-    leadingIcon?: Icon;
+    leadingIcon?: React.ElementType;
     onClose?: () => void;
 };
 export declare const CloseableFlash: FC<CloseableFlashProps>;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Box, Flash, StyledOcticon, Text } from "@primer/react";
+import { Box, Flash, Octicon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 export const CloseableFlash = (props) => {
     const { leadingIcon, variant, onClose, ...otherProps } = props;
@@ -14,5 +14,5 @@ export const CloseableFlash = (props) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx(Flash, { variant: variant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingIcon && _jsx(StyledOcticon, { icon: leadingIcon }), _jsx(Text, { color: `${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`, children: props.children })] }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
+    return (_jsx(Flash, { variant: variant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingIcon && _jsx(Octicon, { icon: leadingIcon }), _jsx(Text, { color: `${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`, children: props.children })] }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
 };

package/lib/components/content-loader/ContentLoader.d.ts

@@ -0,0 +1,6 @@
+import 'react-loading-skeleton/dist/skeleton.css';
+export interface ContentLoaderProps {
+    count?: number;
+}
+export declare const ContentLoader: (props: ContentLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ContentLoader;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@primer/react";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import 'react-loading-skeleton/dist/skeleton.css';
+export const ContentLoader = (props) => {
+    return (_jsx(Box, { children: _jsx(SkeletonTheme, { children: _jsx(Skeleton, { ...props }) }) }));
+};
+export default ContentLoader;

package/lib/components/content-loader/stories/ContentLoader.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { ContentLoaderProps } from '../../../index';
+declare const meta: {
+    title: string;
+    component: (props: ContentLoaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ContentLoaderDay: Story;
+export declare const ContentLoaderNight: Story;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider, BaseStyles, Box } from "@primer/react";
+import { ContentLoader } from '../../../index';
+const meta = {
+    title: 'Components/ContentLoader',
+    component: ContentLoader,
+    // 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 ThemedContentLoader = (props) => _jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(ContentLoader, { ...props }) }) }) });
+export const ContentLoaderDay = {
+    args: {
+        count: 3
+    },
+    render: (args) => _jsx(ThemedContentLoader, { ...args, colorMode: "day" })
+};
+export const ContentLoaderNight = {
+    args: {
+        count: 3
+    },
+    render: (args) => _jsx(ThemedContentLoader, { ...args, colorMode: "night" })
+};

package/lib/components/icons/CircleIcon.d.ts

@@ -0,0 +1,6 @@
+export type CircleIconProps = {
+    color?: string;
+    variant?: 'fg' | 'default' | 'muted' | 'onEmphasis' | 'subtle';
+};
+export declare const CircleIcon: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+export default CircleIcon;

package/lib/components/icons/CircleIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@primer/react';
+import { CircleCurrentColorIcon } from '@datalayer/icons-react';
+const COLORS = {
+    'danger': 'danger',
+};
+export const CircleIcon = ({ color = 'white', variant = 'fg', }) => {
+    const { theme } = useTheme();
+    return (_jsx(CircleCurrentColorIcon, { fill: theme?.colors[COLORS[color]][variant] ?? color ?? 'white' }));
+};
+export default CircleIcon;

package/lib/components/icons/stories/CircleIcon.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { CircleIconProps } from '../../../index';
+declare const meta: {
+    title: string;
+    component: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CircleIconDay: Story;
+export declare const CircleIconNight: Story;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider, BaseStyles, Box } from "@primer/react";
+import { CircleIcon } from '../../../index';
+const meta = {
+    title: 'Components/CircleIcon',
+    component: CircleIcon,
+    // 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 ThemedCircleIcon = (props) => _jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsx(CircleIcon, { ...props }) }) }) });
+export const CircleIconDay = {
+    args: {
+        color: 'danger',
+        variant: 'fg',
+    },
+    render: (args) => _jsx(ThemedCircleIcon, { ...args, colorMode: "day" })
+};
+export const CircleIconNight = {
+    args: {
+        color: 'danger',
+        variant: 'fg',
+    },
+    render: (args) => _jsx(ThemedCircleIcon, { ...args, colorMode: "night" })
+};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface OverlayProps {
+    direction: 'left' | 'right';
+    isOpen?: boolean;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    content: JSX.Element;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+    confirmButtonRef?: React.RefObject<HTMLButtonElement>;
+    headingRef?: React.RefObject<HTMLHeadingElement>;
+}
+export declare const Overlay: (props: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default Overlay;

package/lib/components/overlay/Overlay.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button, Overlay as PrimerOverlay, Box } from "@primer/react";
+const PrimerAddonOverlay = (props) => {
+    const { content, buttonRef, confirmButtonRef, headingRef, isOpen, setIsOpen } = props;
+    const [direction, _] = useState(props.direction);
+    const [top, setTop] = useState(0);
+    useEffect(() => {
+        setTop(headingRef?.current?.getBoundingClientRect().bottom ?? 0);
+    }, [headingRef]);
+    const closeOverlay = () => setIsOpen(false);
+    return (confirmButtonRef && buttonRef ?
+        _jsx(_Fragment, { children: isOpen ?
+                direction === 'left' ?
+                    _jsx(PrimerOverlay, { initialFocusRef: confirmButtonRef, returnFocusRef: buttonRef, ignoreClickRefs: [buttonRef], 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: '500px',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                padding: '4px'
+                            }, children: [_jsx(Box, { sx: {
+                                        display: 'flex',
+                                        justifyContent: 'right',
+                                        width: '100%'
+                                    }, children: _jsx(Button, { ref: confirmButtonRef, onClick: closeOverlay, children: "Close me" }) }), content] }) })
+                    :
+                        _jsx(PrimerOverlay, { initialFocusRef: confirmButtonRef, returnFocusRef: buttonRef, ignoreClickRefs: [buttonRef], 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: '500px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    padding: '4px'
+                                }, children: [_jsx(Box, { sx: {
+                                            display: 'flex',
+                                            justifyContent: 'right',
+                                            width: '100%'
+                                        }, children: _jsx(Button, { ref: confirmButtonRef, onClick: closeOverlay, children: "Close me" }) }), content] }) })
+                : _jsx(_Fragment, {}) })
+        :
+            _jsx(_Fragment, {}));
+};
+export const Overlay = (props) => {
+    return (_jsx(PrimerAddonOverlay, { ...props }));
+};
+export default Overlay;

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { OverlayProps } from './../Overlay';
+declare const meta: {
+    title: string;
+    component: (props: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const OverlayDayLeft: Story;
+export declare const OverlayDayRight: Story;
+export declare const OverlayNightLeft: Story;
+export declare const OverlayNightRight: Story;

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

@@ -0,0 +1,52 @@
+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 { Overlay } from './../Overlay';
+const meta = {
+    title: 'Components/Overlay',
+    component: Overlay,
+    // 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 ThemedOverlay = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const confirmButtonRef = 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: buttonRef, onClick: () => {
+                                        setIsOpen(!isOpen);
+                                    }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, buttonRef: buttonRef, confirmButtonRef: confirmButtonRef, headingRef: props.direction === 'left' ? headingRef : undefined })] })] }) }) }) }));
+};
+export const OverlayDayLeft = {
+    args: {
+        direction: "left",
+        content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
+    },
+    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
+};
+export const OverlayDayRight = {
+    args: {
+        direction: "right",
+        content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
+    },
+    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
+};
+export const OverlayNightLeft = {
+    args: {
+        direction: "left",
+        content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
+    },
+    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
+};
+export const OverlayNightRight = {
+    args: {
+        direction: "right",
+        content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" })
+    },
+    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
+};

package/lib/index.d.ts

@@ -1,4 +1,7 @@
 export * from "./components/card/Card";
+export * from "./components/content-loader/ContentLoader";
 export * from "./components/closeable-flash/CloseableFlash";
+export * from "./components/icons/CircleIcon";
+export * from "./components/overlay/Overlay";
 export * from "./components/slider/Slider";
 export * from "./components/toolbar/Toolbar";

package/lib/index.js

@@ -1,4 +1,7 @@
 export * from "./components/card/Card";
+export * from "./components/content-loader/ContentLoader";
 export * from "./components/closeable-flash/CloseableFlash";
+export * from "./components/icons/CircleIcon";
+export * from "./components/overlay/Overlay";
 export * from "./components/slider/Slider";
 export * from "./components/toolbar/Toolbar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
@@ -23,13 +23,12 @@
   },
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
-    "@datalayer/icons-react": "0.2.1",
-    "@primer/brand-primitives": "0.29.1",
+    "@datalayer/icons-react": "0.2.3",
     "@primer/octicons-react": "19.6.0",
-    "@primer/react": "0.0.0-20230912151940",
-    "@primer/react-brand": "0.29.1",
+    "@primer/react": "36.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-loading-skeleton": "3.3.1",
     "styled-components": "5.3.10"
   },
   "devDependencies": {
@@ -44,7 +43,7 @@
     "@types/react-dom": "18.2.5",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react": "4.2.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
@@ -53,5 +52,6 @@
     "storybook": "^7.0.9",
     "typescript": "^5.0.2",
     "vite": "^4.3.2"
-  }
+  },
+  "packageManager": "yarn@3.5.0"
 }