@datalayer/primer-addons 0.3.2 → 1.0.0

package/README.md

@@ -40,13 +40,13 @@ yarn
 Start the storybook.
 
 ```bash
-yarn storybook
+npm storybook
 ```
 
 Start the playground.
 
 ```bash
-yarn dev
+npm dev
 ```
 
 ## About Primer Design

package/lib/App.d.ts

@@ -1,3 +1,12 @@
+import "@primer/primitives/dist/css/base/typography/typography.css";
+import "@primer/primitives/dist/css/functional/themes/light.css";
+import "@primer/primitives/dist/css/functional/size/border.css";
+import "@primer/primitives/dist/css/functional/size/breakpoints.css";
+import "@primer/primitives/dist/css/functional/size/size-coarse.css";
+import "@primer/primitives/dist/css/functional/size/size-fine.css";
+import "@primer/primitives/dist/css/functional/size/size.css";
+import "@primer/primitives/dist/css/functional/size/viewport.css";
+import "@primer/primitives/dist/css/functional/typography/typography.css";
 import "./App.css";
 declare const App: () => import("react/jsx-runtime").JSX.Element;
 export default App;

package/lib/App.js

@@ -1,8 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BaseStyles, Box, Text, NavList, ThemeProvider } from "@primer/react";
-import { Slider } from ".";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { BaseStyles, Box, Text, NavList, Heading, ThemeProvider, Button, theme, ActionMenu, IconButton, ActionList } from "@primer/react";
+import { KebabHorizontalIcon } from "@primer/octicons-react";
+import { DatalayerIcon, LogOutIcon, SettingsIcon } from "@datalayer/icons-react";
+import { Slider, Overlay } from ".";
+import "@primer/primitives/dist/css/base/typography/typography.css";
+import "@primer/primitives/dist/css/functional/themes/light.css";
+import "@primer/primitives/dist/css/functional/size/border.css";
+import "@primer/primitives/dist/css/functional/size/breakpoints.css";
+import "@primer/primitives/dist/css/functional/size/size-coarse.css";
+import "@primer/primitives/dist/css/functional/size/size-fine.css";
+import "@primer/primitives/dist/css/functional/size/size.css";
+import "@primer/primitives/dist/css/functional/size/viewport.css";
+import "@primer/primitives/dist/css/functional/typography/typography.css";
 import "./App.css";
 const App = () => {
-    return (_jsx(ThemeProvider, { colorMode: "night", children: _jsx(BaseStyles, { children: _jsxs(Box, { bg: "canvas.default", sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { children: [_jsx(NavList.Item, { href: "/", "aria-current": "page", children: "Home" }), _jsx(NavList.Item, { href: "/about", children: "About" }), _jsx(NavList.Item, { href: "/contact", children: "Contact" })] }) }), _jsxs(Box, { p: 3, sx: { flexGrow: 1 }, children: [_jsx(Box, { children: _jsx(Text, { children: "Primer React" }) }), _jsx(Box, { children: _jsx(Text, { children: "Addons" }) }), _jsx(Box, { children: _jsx(Slider, { id: "slider", name: "slider", min: 1, max: 10, onChange: () => { } }) })] })] }) }) }));
+    const [isOpen, setIsOpen] = useState(false);
+    const openButtonRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const headingRef = useRef(null);
+    return (_jsx(ThemeProvider, { colorMode: "day", theme: theme, children: _jsxs(BaseStyles, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: KebabHorizontalIcon, variant: "invisible", "aria-label": "jupyter-runtimes-more" }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "More\u2026" }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SettingsIcon, {}) }), "Settings", _jsx(ActionList.Description, { variant: "block", children: "Configure your personal settings." })] }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(DatalayerIcon, {}) }), "About", _jsx(ActionList.Description, { variant: "block", children: "About Runtimes." })] })] }), _jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { variant: "danger", onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(LogOutIcon, {}) }), "Logout"] })] })] }) })] }), _jsxs(Box, { bg: "canvas.default", sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { children: [_jsx(NavList.Item, { href: "/", "aria-current": "page", children: "Home" }), _jsx(NavList.Item, { href: "/about", children: "About" }), _jsx(NavList.Item, { href: "/contact", children: "Contact" })] }) }), _jsxs(Box, { p: 3, sx: { flexGrow: 1 }, children: [_jsx(Box, { children: _jsx(Text, { children: "Primer React Addons" }) }), _jsx(Box, { children: _jsx(Slider, { id: "slider", name: "slider", min: 1, max: 10, onChange: () => { } }) }), _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, { isOpen: isOpen, content: _jsxs(Text, { children: ["Look, I am an ", _jsx(Button, { children: "Overlay \uD83D\uDC49" })] }), setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef, headingRef: headingRef })] })] }) })] })] })] }) }));
 };
 export default App;

package/lib/components/card/Card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Octicon, Text } from "@primer/react";
+import { Box, IconButton, Text } from "@primer/react";
 const roundedVals = {
     small: "3px",
     medium: "6px",
@@ -35,7 +35,7 @@ export const Card = (props) => {
 };
 Card.Header = (props) => {
     const { title, description, leadingVisual, action } = props;
-    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingVisual && _jsx(Box, { sx: { mr: 3 }, children: _jsx(Octicon, { size: "medium", icon: leadingVisual }) }), _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: [leadingVisual && _jsx(Box, { sx: { mr: 3 }, children: _jsx(IconButton, { size: "medium", icon: leadingVisual, "aria-label": "" }) }), _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/card/{stories/Card.stories.d.ts → Card.stories.d.ts}

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-import { CardProps } from '../../../index';
+import { CardProps } from '../..';
 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>;
+        Header: React.FC<import("./Card").CardHeaderProps>;
+        Image: React.FC<import("./Card").CardImageProps>;
+        Content: React.FC<import("./Card").CardContentProps>;
+        Actions: React.FC<import("./Card").CardActionsProps>;
     };
     tags: string[];
     parameters: {

package/lib/components/card/{stories/Card.stories.js → Card.stories.js}

@@ -1,7 +1,7 @@
 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 { ThemeProvider, BaseStyles, Box, Button, IconButton, Text, ButtonGroup } from "@primer/react";
 import { ProjectIcon, ThreeBarsIcon } from '@primer/octicons-react';
+import { Card } from '../..';
 const meta = {
     title: 'Components/Card',
     component: Card,

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

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { FlashProps } from "@primer/react";
 export type CloseableFlashProps = FlashProps & {
-    leadingVisual?: React.ElementType;
+    leadingVisual?: React.ComponentType;
     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, Octicon, Text } from "@primer/react";
+import { Box, Flash, CircleOcticon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 export const CloseableFlash = (props) => {
     const { leadingVisual, 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: [leadingVisual && _jsx(Octicon, { icon: leadingVisual }), _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: [leadingVisual && _jsx(CircleOcticon, { icon: leadingVisual }), _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/closeable-flash/{stories/CloseableFlash.stories.d.ts → CloseableFlash.stories.d.ts}

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-import { CloseableFlashProps } from '../../../index';
+import { CloseableFlashProps } from '../..';
 declare const meta: {
     title: string;
     component: import("react").FC<CloseableFlashProps>;

package/lib/components/closeable-flash/{stories/CloseableFlash.stories.js → CloseableFlash.stories.js}

@@ -1,7 +1,7 @@
 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';
+import { CloseableFlash } from '../..';
 const meta = {
     title: 'Components/CloseableFlash',
     component: CloseableFlash,

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

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import { ContentLoaderProps } from '../../../index';
+import { ContentLoaderProps } from '../..';
 declare const meta: {
     title: string;
     component: (props: ContentLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/content-loader/{stories/ContentLoader.stories.js → ContentLoader.stories.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider, BaseStyles, Box } from "@primer/react";
-import { ContentLoader } from '../../../index';
+import { ContentLoader } from '../..';
 const meta = {
     title: 'Components/ContentLoader',
     component: ContentLoader,

package/lib/components/icons/{stories/CircleIcon.stories.d.ts → CircleIcon.stories.d.ts}

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import { CircleIconProps } from '../../../index';
+import { CircleIconProps } from '../..';
 declare const meta: {
     title: string;
     component: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/icons/{stories/CircleIcon.stories.js → CircleIcon.stories.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider, BaseStyles, Box } from "@primer/react";
-import { CircleIcon } from '../../../index';
+import { CircleIcon } from '../..';
 const meta = {
     title: 'Components/CircleIcon',
     component: CircleIcon,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface OverlayProps {
     closeButtonRef?: React.RefObject<HTMLButtonElement>;
     content: JSX.Element;

package/lib/components/overlay/Overlay.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { Box, IconButton, Overlay as PrimerOverlay } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 const PrimerAddonOverlay = (props) => {
-    const { closeButtonRef, content, headingRef, isOpen, openButtonRef, setIsOpen, width, } = props;
-    const [direction, _] = useState(props.direction);
+    const { closeButtonRef, content, direction: propsDirection, headingRef, isOpen, openButtonRef, setIsOpen, width, } = props;
+    const [direction, _] = useState(propsDirection);
     const [top, setTop] = useState(0);
     useEffect(() => {
         setTop(headingRef?.current?.getBoundingClientRect().bottom ?? 0);

package/lib/components/overlay/{stories/Overlay.stories.d.ts → Overlay.stories.d.ts}

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import { OverlayProps } from './../Overlay';
+import { OverlayProps } from '../..';
 declare const meta: {
     title: string;
     component: {

package/lib/components/overlay/{stories/Overlay.stories.js → Overlay.stories.js}

@@ -1,7 +1,7 @@
 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';
+import { Heading, Text, ThemeProvider, BaseStyles, Box, Button } from "@primer/react";
+import { Overlay } from '../..';
 const meta = {
     title: 'Components/Overlay',
     component: Overlay,
@@ -18,9 +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(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 })] })] }) }) }) }));
 };
 export const OverlayDayLeft = {
     args: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.3.2",
+  "version": "1.0.0",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
@@ -23,12 +23,13 @@
   },
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
-    "@datalayer/icons-react": "^0.3.2",
-    "@primer/octicons-react": "^19.6.0",
-    "@primer/react": "^36.27.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-loading-skeleton": "^3.3.1",
+    "@datalayer/icons-react": "^1.0.0",
+    "@primer/octicons-react": "^19.15.1",
+    "@primer/react": "^37.19.0",
+    "@primer/primitives": "^10.5.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-loading-skeleton": "^3.5.0",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
@@ -39,18 +40,19 @@
     "@storybook/react": "^8.0.10",
     "@storybook/react-vite": "^8.0.10",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@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.2.1",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.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",
     "prop-types": "^15.8.1",
     "storybook": "^8.0.10",
-    "typescript": "^5.0.2",
-    "vite": "^5.2.7"
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6"
   }
 }