@datalayer/core 0.0.1 → 0.0.3

package/lib/utils/WithSuspense.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Suspense } from "react";
+import { SkeletonBox } from "@primer/react/experimental";
+const Loading = (props) => {
+    const { skeleton } = props;
+    return (skeleton ?
+        _jsx(_Fragment, { children: _jsx(SkeletonBox, { height: "100px" }) })
+        :
+            _jsx(_Fragment, {}));
+};
+export const WithSuspense = (Component, preload = true, skeleton = false) => (props) => {
+    if (preload) {
+        Component.preload();
+    }
+    return (_jsx(Suspense, { fallback: _jsx(Loading, { skeleton: skeleton }), children: _jsx(Component, { ...props }) }));
+};
+export default WithSuspense;

package/lib/utils/index.d.ts

@@ -0,0 +1,26 @@
+export * from './Array';
+export * from './Avatar';
+export * from './Browser';
+export * from './Cookie';
+export * from './Cells';
+export * from './Date';
+export * from './Download';
+export * from './DownloadFile';
+export * from './Env';
+export * from './File';
+export * from './Format';
+export * from './Ids';
+export * from './Jupyter';
+export * from './Lazy';
+export * from './Msc';
+export * from './Name';
+export * from './Notebook';
+export * from './Number';
+export * from './Plots';
+export * from './Random';
+export * from './Sleep';
+export * from './Snapshot';
+export * from './String';
+export * from './Uri';
+export * from './Validator';
+export * from './WithSuspense';

package/lib/utils/index.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './Array';
+export * from './Avatar';
+export * from './Browser';
+export * from './Cookie';
+export * from './Cells';
+export * from './Date';
+export * from './Download';
+export * from './DownloadFile';
+export * from './Env';
+export * from './File';
+export * from './Format';
+export * from './Ids';
+export * from './Jupyter';
+export * from './Lazy';
+export * from './Msc';
+export * from './Name';
+export * from './Notebook';
+export * from './Number';
+export * from './Plots';
+export * from './Random';
+// export * from './Screenshot'; Do not export html2canvas for now.
+export * from './Sleep';
+export * from './Snapshot';
+export * from './String';
+export * from './Uri';
+export * from './Validator';
+export * from './WithSuspense';

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@datalayer/core",
-  "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "author": {
     "name": "Datalayer",
@@ -24,6 +23,10 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datalayer/core.git"
+  },
   "homepage": "https://github.com/datalayer/core",
   "bugs": {
     "url": "https://github.com/datalayer/core/issues"
@@ -38,46 +41,112 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "gulp resources-to-lib && tsc -b && vite build",
+    "build:lib": "gulp resources-to-lib && tsc -b",
     "lint": "eslint .",
     "preview": "vite preview",
     "start": "vite",
     "clean": "rimraf lib tsconfig.tsbuildinfo",
+    "test": "vitest run --project=unit",
+    "test:watch": "vitest --project=unit",
+    "test:ui": "vitest --ui --project=unit",
+    "test:coverage": "vitest run --coverage --project=unit",
+    "test:storybook": "vitest run --project=storybook",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "typedoc": "typedoc --options typedoc.json --out docs/docs/typescript_api"
+    "typedoc": "typedoc --options typedoc.json --out docs/docs/typescript_api",
+    "watch:lib": "run-p 'watch:lib:*'",
+    "watch:lib:res": "gulp resources-to-lib-watch",
+    "watch:lib:src": "tsc -b -w"
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "@datalayer/icons-react": "^1.0.6",
+    "@datalayer/jupyter-react": "^1.0.5",
+    "@datalayer/primer-addons": "^1.0.3",
+    "@datalayer/primer-rjsf": "^1.0.1",
+    "@jupyterlab/coreutils": "^6.0.0",
+    "@jupyterlab/services": "^7.0.0",
+    "@jupyterlite/javascript-kernel-extension": "^0.3.0",
+    "@primer/brand-primitives": "^0.51.0",
+    "@primer/css": "^21.5.1",
+    "@primer/octicons-react": "^19.15.1",
+    "@primer/primitives": "^10.5.0",
+    "@primer/react": "^37.19.0",
+    "@primer/react-brand": "^0.51.0",
+    "@stripe/react-stripe-js": "^2.7.1",
+    "axios": "^1.7.7",
+    "boring-avatars": "^2.0.1",
+    "buffer": "^6.0.3",
+    "date-fns": "^2.29.3",
+    "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.2",
+    "fuse.js": "^7.0.0",
+    "html2canvas": "^1.4.1",
+    "jwt-decode": "^2.2.0",
+    "localforage": "^1.10.0",
+    "marked": "^4.0.10",
+    "mock-socket": "^9.3.1",
+    "react": "18.3.1",
+    "react-confetti": "^6.4.0",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.22.3",
+    "tus-js-client": "^4.2.3",
+    "ulid": "^2.3.0",
+    "unique-names-generator": "^4.7.1",
+    "usehooks-ts": "^2.9.1",
+    "validator": "^13.7.0",
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^4.1.0",
     "@eslint/js": "^9.29.0",
-    "@storybook/addon-a11y": "^9.0.15",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/builder-vite": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
+    "@storybook/addon-a11y": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-onboarding": "^9.1.1",
+    "@storybook/addon-vitest": "^9.1.1",
+    "@storybook/builder-vite": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
     "@types/node": "^20.11.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.6",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
+    "crypto-browserify": "^3.12.1",
     "eslint": "^9.29.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.0.15",
+    "eslint-plugin-storybook": "^9.1.1",
     "globals": "^16.2.0",
+    "gulp": "^4.0.2",
+    "gulp-append-prepend": "^1.0.8",
+    "gulp-filter": "^6.0.0",
+    "gulp-watch": "^5.0.1",
+    "jsdom": "^26.0.0",
+    "npm-run-all": "^4.1.5",
     "playwright": "^1.53.2",
     "rimraf": "^6.0.1",
-    "storybook": "^9.0.15",
+    "storybook": "^9.1.1",
     "typedoc-plugin-markdown": "^4.0.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.1",
     "vite": "^7.0.0",
+    "vite-plugin-treat-umd-as-commonjs": "^0.1.4",
     "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "@microsoft/fast-colors": "5.3.1",
+    "@microsoft/fast-components": "2.30.6",
+    "@microsoft/fast-element": "1.13.0",
+    "@microsoft/fast-foundation": "2.49.6",
+    "@microsoft/fast-react-wrapper": "0.3.24",
+    "@microsoft/fast-web-utilities": "5.4.1",
+    "@microsoft/load-themed-styles": "1.10.295",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.6",
+    "pyodide": "0.28.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "^5.8.3"
   }
 }

package/style/animation/Animation.module.css

@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * Hero example
+ */
+.DiscussionsExampleHero {
+  --discussions-example-hero-shadow: 0 0 0 1px rgba(53, 72, 91, 0.14), 0 2.75px 2.21px rgba(0, 0, 0, 0.07),
+    0 6.65px 5.32px rgba(0, 0, 0, 0.043), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03),
+    0 42px 33.4px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.017);
+  max-width: 1024px;
+  margin: var(--base-size-128) auto;
+  position: relative;
+}
+
+.DiscussionsExampleHero::before {
+  content: '';
+  position: absolute;
+  inset: var(--base-size-16);
+  filter: blur(var(--base-size-48));
+  transform: translateZ(0);
+  background: linear-gradient(
+    to right,
+    hsl(var(--base-color-scale-blue-2-hsl)),
+    hsl(var(--base-color-scale-purple-2-hsl))
+  );
+}
+
+.DiscussionsExampleHero__image {
+  box-shadow: var(--discussions-example-hero-shadow);
+  width: 100%;
+  height: auto;
+  position: relative;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.DiscussionsExampleHero__label {
+  box-shadow: var(--discussions-example-hero-shadow);
+
+  padding-left: var(--base-size-24);
+  padding-right: var(--base-size-24);
+  height: var(--base-size-48);
+  background-color: var(--brand-color-canvas-default);
+}
+
+.DiscussionsExampleHero__label svg {
+  height: var(--base-size-24);
+  width: var(--base-size-24);
+}
+
+.DiscussionsExampleHero__label--one {
+  position: absolute;
+  top: -32px;
+  left: 20%;
+}
+
+.DiscussionsExampleHero__labelContainer--two {
+  position: absolute;
+  top: 20%;
+  right: -5%;
+}
+
+.DiscussionsExampleHero__label--two {
+  transform: scale(1.2);
+}
+
+.DiscussionsExampleHero__label--three {
+  position: absolute;
+  bottom: -3%;
+  left: -2%;
+  transform: scale(1.5);
+}
+
+.DiscussionsExampleHero__video {
+  position: absolute;
+  top: 30%;
+  left: 60%;
+}
+
+/**
+ * Progress bar example
+ */
+.ProgressBarExamples {
+  max-width: 1024px;
+  margin: var(--base-size-128) auto;
+}
+
+.ProgressBarExample {
+  position: relative;
+}
+
+.ProgressBarExample__bar {
+  background-color: var(--brand-color-neutral-subtle);
+  border-radius: var(--brand-borderRadius-medium);
+  display: flex;
+  height: var(--base-size-8);
+  overflow: hidden;
+}
+
+.ProgressBarExample__barInner {
+  background-color: var(--base-color-scale-blue-4);
+  height: 100%;
+}
+
+/**
+ * Playground example
+ */
+.Playground {
+  background-color: var(--brand-color-neutral-subtle);
+  max-width: 200px;
+  min-height: 200px;
+}
+
+.PlaygroundText {
+  pointer-events: none;
+}
+
+/*
+* TimelineBar example
+*/
+.TimelineBarExample {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--brand-color-canvas-default);
+  padding: var(--base-size-48) var(--base-size-48) var(--base-size-96);
+  justify-content: center;
+}
+
+.TimelineBarExample__start {
+  position: relative;
+}
+
+.TimelineBarExample__line {
+  background: linear-gradient(#56d364, #2ea043, var(--brand-color-canvas-default));
+  width: var(--base-size-4);
+  height: 200px;
+  border-radius: var(--brand-borderRadius-medium);
+  display: block;
+  position: absolute;
+  left: calc(50% - var(--base-size-4));
+  top: 60px;
+}
+
+.TimelineBarExample__icon {
+  padding: var(--base-size-8);
+  border-radius: 50%;
+  background-color: hsl(var(--base-color-scale-green-7-hsl) / 1);
+  display: flex;
+  height: var(--base-size-48);
+  width: var(--base-size-48);
+  align-items: center;
+  justify-content: center;
+}
+
+.TimelineBarExample__text {
+  max-width: 650px;
+}
+
+.TimelineBarExample__highlightedText {
+  color: var(--base-color-scale-green-0) !important;
+}
+
+.TimelineBarExample__start {
+  display: flex;
+  order: 1;
+}
+
+.TimelineBarExample__end {
+  order: 2;
+}

package/style/base.css

@@ -1,5 +1,64 @@
 /*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
  */
+
+:root {
+  --dla-color-green-light: #2ECC71;
+  --dla-color-green-main: #1ABC9C;
+  --dla-color-green-dark: #16A085;
+  --dla-color-grey: #59595C;
+  --dla-color-black: #000000;
+  --dla-color-white: #FFFFFF;
+}
+
+body {
+  background: #ffffff !important;
+  overflow-y: visible !important;
+  margin: 0 !important;
+  padding: 0 !important;
+/*  --jp-ui-font-size1: 12px; */
+}
+
+.Primer_Brand__Hero-module__Hero___EM3jf {
+  padding-top: 88px;
+}
+
+#dla-hero .Primer_Brand__Heading-module__Heading--1___Ufc7G {
+  font-size: 62px;
+}
+
+#dla-hero .Primer_Brand__Grid-module__Grid___q48mT {
+  grid-column-gap: 12px !important;
+}
+
+#dla-hero .Primer_Brand__Text-module__Text___pecHN {
+  max-width: 1000px;
+  padding-right: 15px;
+}
+
+#dla-hero .Primer_Brand__Text-module__Text___pecHN {
+  line-height: 16px;
+}
+
+/* TODO Check the specificity of this rule */
+.jp-ThemedContainer a {
+  color: var(--jp-brand-color1, #1976d2) !important;
+  text-decoration: none !important
+}
+
+.jp-Shout-button {
+  height: 30px;
+  width: 150px;
+  margin: 8px;
+  padding-top: 9px;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 2px;
+  background-color: #2296f3;
+  color: #212121;
+}
+
+.jp-Shout-summary {
+  margin: 4px;
+}

package/style/index.css

@@ -1,7 +1,6 @@
 /*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
  */
 
 @import url('base.css');

package/style/index.js

@@ -1,7 +0,0 @@
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-
-import './base.css';