@datalayer/core 0.0.1 → 0.0.3

package/lib/mocks/models/TeamMock.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { newUlid } from "../../utils";
+const newTeamMock = (name) => {
+    const team = {
+        id: newUlid(),
+        type: "team",
+        handle: name,
+        name: name,
+        description: name + " description.",
+        public: false,
+        members: [],
+        creationDate: new Date(),
+        organization: {
+            id: newUlid(),
+        },
+        setMembers: (members) => { },
+    };
+    return team;
+};
+export const TEAM_1_MOCK = newTeamMock("Team 1");
+export const TEAM_2_MOCK = newTeamMock("Team 2");
+export const TEAM_3_MOCK = newTeamMock("Team 3");
+export const TEAMS_MOCK = [TEAM_1_MOCK, TEAM_2_MOCK, TEAM_3_MOCK];

package/lib/mocks/models/UserMock.d.ts

@@ -0,0 +1,2 @@
+import { IUser } from "../../models/User";
+export declare const newUserMock: (firstName?: string, lastName?: string) => IUser;

package/lib/mocks/models/UserMock.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { uniqueNamesGenerator, animals, names } from "unique-names-generator";
+import { newUlid, asDisplayName, namesAsInitials } from "../../utils";
+export const newUserMock = (firstName, lastName) => {
+    const mockFistName = firstName ?? uniqueNamesGenerator({ dictionaries: [names] });
+    const mockLastName = lastName ?? uniqueNamesGenerator({ dictionaries: [names] });
+    const user = {
+        id: newUlid(),
+        handle: uniqueNamesGenerator({ dictionaries: [animals] }).toLowerCase(),
+        email: mockFistName + "@datalayer.test",
+        firstName: mockFistName,
+        lastName: mockLastName,
+        initials: namesAsInitials(mockFistName, mockLastName),
+        displayName: asDisplayName(mockFistName, mockLastName),
+        roles: [
+            'mock_role',
+        ],
+        iamProviders: [],
+        setRoles: (roles) => { },
+        unsubscribedFromOutbounds: false,
+        onboarding: {},
+        events: [],
+        settings: {},
+    };
+    return user;
+};

package/lib/mocks/models/index.d.ts

@@ -0,0 +1,9 @@
+export * from './CodeBlockMock';
+export * from './CodelineMock';
+export * from './InviteMock';
+export * from './JupyterLabUserMock';
+export * from './OrganisationMock';
+export * from './SchoolMock';
+export * from './SpaceMock';
+export * from './TeamMock';
+export * from './UserMock';

package/lib/mocks/models/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './CodeBlockMock';
+export * from './CodelineMock';
+export * from './InviteMock';
+export * from './JupyterLabUserMock';
+export * from './OrganisationMock';
+export * from './SchoolMock';
+export * from './SpaceMock';
+export * from './TeamMock';
+export * from './UserMock';

package/lib/mocks/views/ActionMenuMock.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    title: string;
+};
+export declare const ActionMenuMock: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ActionMenuMock;

package/lib/mocks/views/ActionMenuMock.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ActionMenu, ActionList } from '@primer/react';
+import { WorkflowIcon, ArchiveIcon, GearIcon, RocketIcon, CopyIcon, CommentIcon, BookIcon } from '@primer/octicons-react';
+export const ActionMenuMock = (props) => {
+    const { title } = props;
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { children: title }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Item, { onSelect: () => alert('Workflows clicked'), children: ["Workflows", _jsx(ActionList.LeadingVisual, { children: _jsx(WorkflowIcon, {}) })] }), _jsxs(ActionList.Item, { onSelect: () => alert('Archived items clicked'), children: ["Archived items", _jsx(ActionList.LeadingVisual, { children: _jsx(ArchiveIcon, {}) })] }), _jsxs(ActionList.LinkItem, { href: "/", children: ["Settings", _jsx(ActionList.LeadingVisual, { children: _jsx(GearIcon, {}) })] }), _jsxs(ActionList.Item, { onSelect: () => alert('Make a copy clicked'), children: ["Make a copy", _jsx(ActionList.LeadingVisual, { children: _jsx(CopyIcon, {}) })] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "GitHub projects" }), _jsxs(ActionList.LinkItem, { href: "/", children: ["What's new", _jsx(ActionList.LeadingVisual, { children: _jsx(RocketIcon, {}) })] }), _jsxs(ActionList.LinkItem, { href: "/", children: ["Give feedback", _jsx(ActionList.LeadingVisual, { children: _jsx(CommentIcon, {}) })] }), _jsxs(ActionList.LinkItem, { href: "/", children: ["GitHub Docs", _jsx(ActionList.LeadingVisual, { children: _jsx(BookIcon, {}) })] })] })] }) })] }));
+};
+export default ActionMenuMock;

package/lib/mocks/views/ChartMock.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    title: string;
+};
+export declare const ChartMock: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ChartMock;

package/lib/mocks/views/ChartMock.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Heading } from '@primer/react-brand';
+import { lazyWithPreload, WithSuspense } from "../../utils";
+import { HorizontalCenter } from '../../components/display';
+import { CHART_4 } from './ChartMockOptions';
+const ReactEcharts = WithSuspense(lazyWithPreload(() => import("echarts-for-react")), true);
+export const ChartMock = (props) => {
+    const { title } = props;
+    return (_jsxs(HorizontalCenter, { children: [_jsx(Heading, { size: "3", children: title }), _jsx(ReactEcharts, { option: CHART_4, style: { width: "600px", height: "300px" } })] }));
+};
+export default ChartMock;

package/lib/mocks/views/ChartMockOptions.d.ts

@@ -0,0 +1,92 @@
+export declare const ECHART_MOCK_1: {
+    grid: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    xAxis: {
+        type: string;
+        data: string[];
+    };
+    yAxis: {
+        type: string;
+    };
+    series: {
+        data: number[];
+        type: string;
+        smooth: boolean;
+    }[];
+    tooltip: {
+        trigger: string;
+    };
+};
+export declare const ECHART_MOCK_2: {
+    xAxis: {
+        type: string;
+        data: string[];
+    };
+    yAxis: {
+        type: string;
+    };
+    series: {
+        data: (number | {
+            value: number;
+            itemStyle: {
+                color: string;
+            };
+        })[];
+        type: string;
+    }[];
+};
+export declare const ECHART_MOCK_3: {
+    title: {
+        text: string;
+    }[];
+    polar: {
+        radius: (string | number)[];
+    };
+    radiusAxis: {
+        max: number;
+    };
+    angleAxis: {
+        type: string;
+        data: string[];
+        startAngle: number;
+    };
+    tooltip: {};
+    series: {
+        type: string;
+        data: number[];
+        coordinateSystem: string;
+        label: {
+            show: boolean;
+            position: string;
+            formatter: string;
+        };
+    };
+    animation: boolean;
+};
+export declare const CHART_4: {
+    grid: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    xAxis: {
+        type: string;
+        data: string[];
+    };
+    yAxis: {
+        type: string;
+    };
+    series: {
+        data: number[];
+        type: string;
+        smooth: boolean;
+    }[];
+    tooltip: {
+        trigger: string;
+    };
+};

package/lib/mocks/views/ChartMockOptions.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const ECHART_MOCK_1 = {
+    grid: { top: 8, right: 8, bottom: 24, left: 36 },
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+        type: 'value',
+    },
+    series: [
+        {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+        },
+    ],
+    tooltip: {
+        trigger: 'axis',
+    },
+};
+export const ECHART_MOCK_2 = {
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [
+        {
+            data: [
+                120,
+                {
+                    value: 200,
+                    itemStyle: {
+                        color: '#a90000'
+                    }
+                },
+                150,
+                80,
+                70,
+                110,
+                130
+            ],
+            type: 'bar'
+        }
+    ]
+};
+export const ECHART_MOCK_3 = {
+    title: [
+        {
+            text: 'Radial Polar Bar Label Position (middle)'
+        }
+    ],
+    polar: {
+        radius: [30, '80%']
+    },
+    radiusAxis: {
+        max: 4
+    },
+    angleAxis: {
+        type: 'category',
+        data: ['a', 'b', 'c', 'd'],
+        startAngle: 75
+    },
+    tooltip: {},
+    series: {
+        type: 'bar',
+        data: [2, 1.2, 2.4, 3.6],
+        coordinateSystem: 'polar',
+        label: {
+            show: true,
+            position: 'middle',
+            formatter: '{b}: {c}'
+        }
+    },
+    animation: true
+};
+export const CHART_4 = {
+    grid: { top: 20, right: 40, bottom: 20, left: 40 },
+    xAxis: {
+        type: "category",
+        data: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
+    },
+    yAxis: {
+        type: "value"
+    },
+    series: [
+        {
+            data: [400, 300, 350, 200, 280],
+            type: "bar",
+            smooth: true
+        }
+    ],
+    tooltip: {
+        trigger: "axis"
+    }
+};

package/lib/mocks/views/DashboardMock.d.ts

@@ -0,0 +1,2 @@
+export declare const DashboardMock: () => import("react/jsx-runtime").JSX.Element;
+export default DashboardMock;

package/lib/mocks/views/DashboardMock.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box, Link, Text, LabelGroup, Label, ActionMenu, ActionList } from "@primer/react";
+import { ArrowRightIcon, CloudIcon, StarIcon, DotFillIcon, RepoForkedIcon, LinkIcon } from "@primer/octicons-react";
+import { ReactJsIcon } from "@datalayer/icons-react";
+import { lazyWithPreload, WithSuspense } from "../../utils";
+import { ECHART_MOCK_1, ECHART_MOCK_2, ECHART_MOCK_3, FlashMock } from "../../mocks";
+const ReactECharts = WithSuspense(lazyWithPreload(() => import("echarts-for-react")), true);
+export const DashboardMock = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, children: _jsx(FlashMock, {}) }), _jsxs(Box, { sx: {
+                    display: "grid",
+                    gridTemplateColumns: "1fr 1fr 1fr",
+                    gap: 4,
+                }, children: [_jsxs(Box, { sx: {
+                            gridColumn: "1 / 3",
+                            minHeight: "200px",
+                        }, children: [_jsxs(Box, { sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    paddingRight: 4
+                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: "4px solid #28b899", paddingLeft: 2 }, children: "My latest work" }), _jsxs(Link, { children: ["View all work", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
+                                    display: "grid",
+                                    gridTemplateColumns: "1fr 1fr",
+                                    gap: 4,
+                                }, children: [_jsxs(Box, { sx: {
+                                            borderColor: "border.default",
+                                            borderStyle: "solid",
+                                            borderWidth: "1",
+                                            borderRadius: "2",
+                                            padding: 4,
+                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["clouder ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", sx: { color: "fg.subtle", fontWeight: "semibold" }, children: [_jsx(CloudIcon
+                                                    //                  sx={{ margin: "0 4px" }}
+                                                    , {}), "Create, manage and share Kubernetes clusters."] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "Kubernetes" }), _jsx(Label, { variant: "accent", children: "cloud" }), _jsx(Label, { variant: "accent", children: "kubernets-cluster" }), _jsx(Label, { variant: "accent", children: "datalayer" })] }), _jsxs(Text, { as: "p", sx: {
+                                                    color: "fg.subtle",
+                                                    "> *": { paddingLeft: 1, paddingRight: 1 },
+                                                }, children: [_jsxs(Text, { children: [_jsx(DotFillIcon
+                                                            //                    sx={{
+                                                            //                      fill: "#4f729d",
+                                                            //                      marginRight: 1,
+                                                            //                      marginBottom: "3px",
+                                                            //                    }}
+                                                            , {}), "Python"] }), _jsxs(Text, { children: [_jsx(RepoForkedIcon
+                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
+                                                            , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
+                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
+                                                            , {}), "11"] })] })] }), _jsxs(Box, { sx: {
+                                            borderColor: "border.default",
+                                            borderStyle: "solid",
+                                            borderWidth: "1",
+                                            borderRadius: "2",
+                                            padding: 4,
+                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["jupyter-ui ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", children: [_jsx(ReactJsIcon, { style: { margin: "0 4px" } }), "React.js components 100% compatible with Jupyter.", " ", _jsx(Link, { href: "https://jupyter-ui-storybook.datalayer.tech", children: "https://jupyter-ui-storybook.datalayer.tech" })] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "data-science" }), _jsx(Label, { variant: "accent", children: "data" }), _jsx(Label, { variant: "accent", children: "ui" }), _jsx(Label, { variant: "accent", children: "jupyter" }), _jsx(Label, { children: "+4" })] }), _jsxs(Text, { as: "p", sx: {
+                                                    color: "fg.subtle",
+                                                    "> *": { paddingLeft: 1, paddingRight: 1 },
+                                                }, children: [_jsxs(Text, { children: [_jsx(DotFillIcon
+                                                            /*
+                                                            sx={{
+                                                              fill: "#4f729d",
+                                                              marginRight: 1,
+                                                              marginBottom: "3px",
+                                                            }}
+                                                            */
+                                                            , {}), "Typescript"] }), _jsxs(Text, { children: [_jsx(RepoForkedIcon
+                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
+                                                            , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
+                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
+                                                            , {}), "11"] })] })] })] })] }), _jsxs(Box, { sx: {
+                            gridColumn: "3 / 4",
+                            gridRow: "1 / 3",
+                            minHeight: "200px",
+                        }, children: [_jsxs(Box, { sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    paddingRight: 4
+                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: "4px solid #28b899", paddingLeft: 2 }, children: "Usage" }), _jsxs(Link, { children: ["More Usage", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
+                                    borderColor: "border.default",
+                                    borderStyle: "solid",
+                                    borderWidth: "1",
+                                    borderRadius: "2",
+                                    padding: 4
+                                }, children: [_jsxs(Box, { sx: {
+                                            display: "inline-flex",
+                                            flexDirection: "row",
+                                            alignItems: "center",
+                                        }, children: [_jsx(Text, { as: "h3", sx: { marginRight: "20px" }, children: "Kernels Activity" }), _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { children: [_jsx(Box, { sx: { color: "fg.muted", display: "inline-block" }, children: "View:" }), " ", "All kernels"] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { selectionVariant: "single", children: _jsx(ActionList.Item, { selected: true, children: "All kernels" }) }) })] })] }), _jsx(Text, { as: "h3", children: "Credits usage" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Amount today" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Balance yesterday" }), _jsx(Text, { as: "h3", children: "Last invoice" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: '3', fontWeight: 'bold' }, children: "$216" })] })] }), _jsxs(Box, { sx: {
+                            gridColumn: "1 / 3",
+                            minHeight: "200px",
+                        }, children: [_jsxs(Box, { sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    paddingRight: 4
+                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: "4px solid #28b899", paddingLeft: 2 }, children: "Trending Notebooks" }), _jsxs(Link, { children: ["All Notebooks", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
+                                    borderColor: "border.default",
+                                    borderStyle: "solid",
+                                    borderWidth: "1",
+                                    borderRadius: "2",
+                                    display: "grid",
+                                    gridTemplateColumns: "1fr 1fr",
+                                    "> :not(:last-child)": {
+                                        borderRightColor: "border.default",
+                                        borderRightStyle: "solid",
+                                        borderRightWidth: "1",
+                                    },
+                                }, children: [_jsxs(Box, { sx: {
+                                            padding: 4,
+                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: "fg.subtle" }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: "300px", maxWidth: "380px" }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_1 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
+                                            padding: 4,
+                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: "fg.subtle" }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: "300px", maxWidth: "380px" }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_3 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
+                                            padding: 4,
+                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: "fg.subtle" }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: "300px", maxWidth: "380px" }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_2 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] })] })] })] })] }));
+};
+export default DashboardMock;

package/lib/mocks/views/FormMock.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    title: string;
+};
+export declare const FormMock: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default FormMock;

package/lib/mocks/views/FormMock.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { Box, FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading } from '@primer/react';
+export const FormMock = (props) => {
+    const { title } = props;
+    const [tokens, setTokens] = useState([
+        { text: 'zero', id: '0' },
+        { text: 'one', id: '1' },
+        { text: 'two', id: '2' },
+    ]);
+    const onTokenRemove = tokenId => {
+        setTokens(tokens.filter(token => token.id !== tokenId));
+    };
+    return (_jsxs(Box, { display: "grid", sx: { gap: 3 }, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
+                                        { text: 'css', id: '0' },
+                                        { text: 'css-in-js', id: '1' },
+                                        { text: 'styled-system', id: '2' },
+                                        { text: 'javascript', id: '3' },
+                                        { text: 'typescript', id: '4' },
+                                        { text: 'react', id: '5' },
+                                        { text: 'design-systems', id: '6' },
+                                    ], selectedItemIds: [], "aria-labelledby": "" }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select" }), _jsxs(Select, { children: [_jsx(Select.Option, { value: "figma", children: "Figma" }), _jsx(Select.Option, { value: "css", children: "Primer CSS" }), _jsx(Select.Option, { value: "prc", children: "Primer React components" }), _jsx(Select.Option, { value: "pvc", children: "Primer ViewComponents" })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Textarea" }), _jsx(Textarea, {})] })] }));
+};
+export default FormMock;

package/lib/mocks/views/TableMock.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    title: string;
+};
+export declare const TableMock: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default TableMock;

package/lib/mocks/views/TableMock.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box, LabelGroup, ActionMenu, ActionList, IconButton, Label, RelativeTime } from '@primer/react';
+import { Table, DataTable } from '@primer/react/experimental';
+import { KebabHorizontalIcon, DownloadIcon } from '@primer/octicons-react';
+import { VisuallyHidden } from './../../components/display';
+const now = Date.now();
+const Second = 1000;
+const Minute = 60 * Second;
+const Hour = 60 * Minute;
+const Day = 24 * Hour;
+const Week = 7 * Day;
+const Month = 4 * Week;
+const data = [
+    {
+        id: 1,
+        name: 'codeql-dca-worker',
+        type: 'internal',
+        updatedAt: now,
+        securityFeatures: {
+            dependabot: ['alerts', 'security updates'],
+            codeScanning: ['report secrets'],
+        },
+    },
+    {
+        id: 2,
+        name: 'aegir',
+        type: 'public',
+        updatedAt: now - 5 * Minute,
+        securityFeatures: {
+            dependabot: ['alerts'],
+            codeScanning: ['report secrets'],
+        },
+    },
+    {
+        id: 3,
+        name: 'strapi',
+        type: 'public',
+        updatedAt: now - 1 * Hour,
+        securityFeatures: {
+            dependabot: [],
+            codeScanning: [],
+        },
+    },
+    {
+        id: 4,
+        name: 'codeql-ci-nightlies',
+        type: 'public',
+        updatedAt: now - 6 * Hour,
+        securityFeatures: {
+            dependabot: ['alerts'],
+            codeScanning: [],
+        },
+    },
+    {
+        id: 5,
+        name: 'dependabot-updates',
+        type: 'public',
+        updatedAt: now - 1 * Day,
+        securityFeatures: {
+            dependabot: [],
+            codeScanning: [],
+        },
+    },
+    {
+        id: 6,
+        name: 'tsx-create-react-app',
+        type: 'public',
+        updatedAt: now - 1 * Week,
+        securityFeatures: {
+            dependabot: [],
+            codeScanning: [],
+        },
+    },
+    {
+        id: 7,
+        name: 'bootstrap',
+        type: 'public',
+        updatedAt: now - 1 * Month,
+        securityFeatures: {
+            dependabot: ['alerts'],
+            codeScanning: [],
+        },
+    },
+    {
+        id: 8,
+        name: 'docker-templates',
+        type: 'public',
+        updatedAt: now - 3 * Month,
+        securityFeatures: {
+            dependabot: ['alerts'],
+            codeScanning: [],
+        },
+    },
+];
+function uppercase(input) {
+    return input[0].toUpperCase() + input.slice(1);
+}
+export const TableMock = (props) => {
+    const { title } = props;
+    return (_jsx(Box, { display: "grid", sx: { gap: 3 }, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "repositories", children: title }), _jsx(Table.Subtitle, { as: "p", id: "repositories-subtitle", children: "A subtitle could appear here to give extra context to the data." }), _jsx(DataTable, { "aria-labelledby": "repositories", "aria-describedby": "repositories-subtitle", data: data, columns: [
+                        {
+                            header: 'Repository',
+                            field: 'name',
+                            rowHeader: true,
+                        },
+                        {
+                            header: 'Type',
+                            field: 'type',
+                            renderCell: row => {
+                                return _jsx(Label, { children: uppercase(row.type) });
+                            },
+                        },
+                        {
+                            header: 'Updated',
+                            field: 'updatedAt',
+                            renderCell: row => {
+                                return _jsx(RelativeTime, { date: new Date(row.updatedAt) });
+                            },
+                        },
+                        {
+                            header: 'Dependabot',
+                            field: 'securityFeatures.dependabot',
+                            renderCell: row => {
+                                return row.securityFeatures.dependabot.length > 0 ? (_jsx(LabelGroup, { children: row.securityFeatures.dependabot.map(feature => {
+                                        return _jsx(Label, { children: uppercase(feature) }, feature);
+                                    }) })) : null;
+                            },
+                        },
+                        {
+                            header: 'Code scanning',
+                            field: 'securityFeatures.codeScanning',
+                            renderCell: row => {
+                                return row.securityFeatures.codeScanning.length > 0 ? (_jsx(LabelGroup, { children: row.securityFeatures.codeScanning.map(feature => {
+                                        return _jsx(Label, { children: uppercase(feature) }, feature);
+                                    }) })) : null;
+                            },
+                        },
+                        {
+                            id: 'actions',
+                            header: () => _jsx(VisuallyHidden, { children: "Actions" }),
+                            renderCell: row => {
+                                return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": `Download: ${row.name}`, title: `Download: ${row.name}`, icon: DownloadIcon, variant: "invisible", onClick: () => {
+                                                alert(row);
+                                            } }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { "aria-label": `Actions: ${row.name}`, title: `Actions: ${row.name}`, icon: KebabHorizontalIcon, variant: "invisible" }) }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => {
+                                                                    alert(row);
+                                                                }, children: "Copy row" }), _jsx(ActionList.Item, { children: "Edit row" }), _jsx(ActionList.Item, { children: "Export row as CSV" }), _jsx(ActionList.Divider, {}), _jsx(ActionList.Item, { variant: "danger", children: "Delete row" })] }) })] })] }));
+                            },
+                        },
+                    ] })] }) }));
+};
+export default TableMock;

package/lib/mocks/views/WipMock.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    title: string;
+};
+export declare const WipMock: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default WipMock;