@datalayer/primer-addons 0.0.13 → 0.0.14

package/README.md

@@ -14,6 +14,7 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 
 ## Current Addons
 
+- [ ] Backdrop
 - [x] Card
 - [x] ClosableFlash
 - [ ] MasonryBox
@@ -25,6 +26,26 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
   <img alt="Primer React Addons" src="https://datalayer-examples.s3.amazonaws.com/primer-addons-example.png" />
 </div>
 
+## Develop
+
+Install the dependencies.
+
+```bash
+yarn
+```
+
+Start the storybook.
+
+```bash
+yarn storybook
+```
+
+Start the playground.
+
+```bash
+yarn dev
+```
+
 ## About Primer Design
 
 - Design system https://primer.style

package/lib/App.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./App.css";
-declare const App: () => JSX.Element;
+declare const App: () => import("react/jsx-runtime").JSX.Element;
 export default App;

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

@@ -13,7 +13,9 @@ export type CardHeaderProps = {
     action?: React.ReactNode;
 };
 export type CardImageProps = {
-    image: string;
+    url?: string;
+    image?: string;
+    svg?: string;
     height: number;
 };
 export type CardContentProps = {

package/lib/components/card/Card.js

@@ -37,11 +37,16 @@ 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 })] });
 };
-Card.Image = ({ image, height }) => {
-    return _jsx(Box, { display: "block", width: "100%", height: `${height}px`, backgroundImage: `url(${image})`, sx: { backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center", objectFit: "cover" } });
+Card.Image = ({ url, image, svg, height }) => {
+    return (_jsxs(Box, { display: "block", width: "100%", height: `${height}px`, backgroundImage: `url(${url})`, sx: {
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            objectFit: "cover"
+        }, children: [image && _jsx("img", { src: image, style: { maxHeight: `${height}px` } }), svg && _jsx("img", { src: `data:image/svg+xml;utf8,${svg}`, style: { maxHeight: height } })] }));
 };
 Card.Content = ({ children }) => {
-    return _jsx(Box, { display: "block", sx: { p: 3 }, children: children });
+    return (_jsx(Box, { display: "block", sx: { p: 3 }, children: children }));
 };
 Card.Actions = ({ children }) => {
     return _jsx(Box, { display: "block", sx: { p: 3 }, children: children });

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { CardProps } from '../../../index';
+declare const meta: {
+    title: string;
+    component: import("react").FC<CardProps> & {
+        Header: import("react").FC<import("../Card").CardHeaderProps>;
+        Image: import("react").FC<import("../Card").CardImageProps>;
+        Content: import("react").FC<import("../Card").CardContentProps>;
+        Actions: import("react").FC<import("../Card").CardActionsProps>;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CardDay: Story;
+export declare const CardDaySvg: Story;
+export declare const CardNight: Story;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemeProvider, BaseStyles, Box, Button, IconButton, Text, ButtonGroup, } from "@primer/react";
+import { Card } from '../../../index';
+import { ProjectIcon, ThreeBarsIcon } from '@primer/octicons-react';
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+    // 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 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 }) }) }) }) }));
+};
+export const CardDay = {
+    args: {
+        rounded: "medium",
+        shadow: "medium",
+        border: true,
+        sx: { maxWidth: 360 }
+    },
+    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "day", children: [_jsx(Card.Header, { leadingIcon: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, url: "https://images.unsplash.com/photo-1623961990059-28356e226a77?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=douglas-lopez-4B0cLMtJxWw-unsplash.jpg&w=640" }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
+};
+const SVG = `
+<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" />
+  <rect x="120" width="100" height="100" rx="15" />
+</svg>
+`;
+export const CardDaySvg = {
+    args: {
+        rounded: "medium",
+        shadow: "medium",
+        border: true,
+        sx: { maxWidth: 360 }
+    },
+    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "day", children: [_jsx(Card.Header, { leadingIcon: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, svg: SVG }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
+};
+export const CardNight = {
+    args: {
+        rounded: "medium",
+        shadow: "medium",
+        border: true,
+        sx: { maxWidth: 360 }
+    },
+    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "night", children: [_jsx(Card.Header, { leadingIcon: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, url: "https://images.unsplash.com/photo-1623961990059-28356e226a77?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=douglas-lopez-4B0cLMtJxWw-unsplash.jpg&w=640" }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
+};

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

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

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

@@ -3,10 +3,12 @@ import { useState } from "react";
 import { Box, Flash, StyledOcticon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 export const CloseableFlash = (props) => {
-    const { leadingIcon, variant, ...otherProps } = props;
+    const { leadingIcon, variant, onClose, ...otherProps } = props;
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
-        props.onClose();
+        if (onClose) {
+            onClose();
+        }
         setIsVisible(false);
     };
     if (!isVisible) {

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { CloseableFlashProps } from '../../../index';
+declare const meta: {
+    title: string;
+    component: import("react").FC<CloseableFlashProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CloseableFlashDay: Story;
+export declare const CloseableFlashNight: Story;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider, BaseStyles, Box } from "@primer/react";
+import { CheckIcon } from "@primer/octicons-react";
+import { CloseableFlash } from '../../../index';
+const meta = {
+    title: 'Components/CloseableFlash',
+    component: CloseableFlash,
+    // 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 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 }) }) }) }) }));
+};
+export const CloseableFlashDay = {
+    args: {
+        variant: "success",
+        leadingIcon: CheckIcon,
+        onClose: () => window.alert("closed")
+    },
+    render: (args) => _jsx(ThemedCloseableFlash, { ...args, colorMode: "day", children: "Success Flash" })
+};
+export const CloseableFlashNight = {
+    args: {
+        variant: "success",
+        leadingIcon: CheckIcon,
+        onClose: () => window.alert("closed")
+    },
+    render: (args) => _jsx(ThemedCloseableFlash, { ...args, colorMode: "night", children: "Success Flash" })
+};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CommonProps {
     name?: string;
     id?: string;
@@ -20,5 +19,5 @@ type ConditionalProps = {
     step?: number;
 };
 export type SliderProps = CommonProps & ConditionalProps;
-export declare const Slider: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => JSX.Element;
+export declare const Slider: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

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

@@ -0,0 +1,14 @@
+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 SliderDay: Story;
+export declare const SliderNight: Story;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ThemeProvider, BaseStyles, 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 (_jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _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 SliderDay = {
+    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, colorMode: "day" })
+};
+export const SliderNight = {
+    args: {
+        name: "slider-night",
+        id: "slider-night",
+        min: 0,
+        max: 100,
+        step: 10,
+        value: 50,
+        onChange: (value) => {
+            console.log('Slider value changed:', value);
+        },
+    },
+    render: (args) => _jsx(ThemedSlider, { ...args, colorMode: "night" })
+};

package/lib/components/toolbar/Toolbar.d.ts

@@ -11,5 +11,5 @@ export interface ToolbarProps {
     border?: boolean;
     children: React.ReactNode | React.ReactNode[];
 }
-export declare const Toolbar: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: ToolbarProps) => JSX.Element;
+export declare const Toolbar: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export default Toolbar;

package/lib/components/toolbar/stories/Toolbar.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { ToolbarProps } from '../../../index';
+declare const meta: {
+    title: string;
+    component: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ToolbarDay: Story;
+export declare const ToolbarNight: Story;

package/lib/components/toolbar/stories/Toolbar.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemeProvider, BaseStyles, Box, Text, IconButton, } from "@primer/react";
+import { SearchIcon, ThreeBarsIcon, GearIcon } from "@primer/octicons-react";
+import { Toolbar } from '../../../index';
+const meta = {
+    title: 'Components/Toolbar',
+    component: Toolbar,
+    // 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 ThemedToolbar = (props) => _jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsxs(Toolbar, { ...props, heading: _jsxs(Box, { display: "flex", alignItems: "center", sx: { gap: "0.5rem" }, children: [_jsx(IconButton, { "aria-label": "Search", icon: ThreeBarsIcon, size: "small", variant: "invisible" }), _jsx(Text, { children: "Datalayer Toolbar" })] }), children: [_jsx(IconButton, { "aria-label": "Search", icon: SearchIcon, size: "small" }), _jsx(Text, { children: "Action1" }), _jsx(Text, { children: "Action2" }), _jsx(Text, { children: "Action3" }), _jsx(IconButton, { "aria-label": "Search", icon: GearIcon, size: "small", variant: "invisible" })] }) }) });
+export const ToolbarDay = {
+    args: {
+        align: "flex-end",
+        border: true,
+        gap: "1rem",
+        padding: "0 1rem",
+        children: [],
+    },
+    render: (args) => _jsx(ThemedToolbar, { ...args, colorMode: "day" })
+};
+export const ToolbarNight = {
+    args: {
+        align: "flex-end",
+        border: true,
+        gap: "1rem",
+        padding: "0 1rem",
+        children: [],
+    },
+    render: (args) => _jsx(ThemedToolbar, { ...args, colorMode: "night" })
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
     "start": "vite",
     "build": "tsc && vite build",
+    "watch": "tsc -w",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -16,12 +17,18 @@
     "lib",
     "style"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/datalayer/primer-addons.git"
+  },
+  "homepage": "https://primer-addons.datalayer.tech/",
   "dependencies": {
+    "@primer/brand-primitives": "0.20.0",
     "@primer/octicons-react": "18.2.0",
-    "@primer/react": "35.25.1",
+    "@primer/react": "36.0.0-rc.8ab77098",
+    "@primer/react-brand": "0.20.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sass": "^1.62.1",
     "styled-components": "5.3.10"
   },
   "devDependencies": {
@@ -32,8 +39,8 @@
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.12",
+    "@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",

package/lib/components/closeableflash/CloseableFlash.d.ts

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

package/lib/components/closeableflash/CloseableFlash.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Box, Flash, StyledOcticon, Text } from "@primer/react";
-import { XIcon } from "@primer/octicons-react";
-export const CloseableFlash = (props) => {
-    const { leadingIcon, variant, ...otherProps } = props;
-    const [isVisible, setIsVisible] = useState(true);
-    const handleClose = () => {
-        props.onClose();
-        setIsVisible(false);
-    };
-    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 }) })] }) }));
-};