@cognite/dune 0.3.1 → 0.3.3

package/_templates/app/new/config/eslint.config.mjs.ejs.t

@@ -0,0 +1,96 @@
+---
+to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>eslint.config.mjs'
+---
+import js from '@eslint/js';
+import importPlugin from 'eslint-plugin-import';
+import noOnlyTestsPlugin from 'eslint-plugin-no-only-tests';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+const sharedRules = {
+  'import/first': 'error',
+  'import/no-duplicates': 'error',
+  'import/order': [
+    'error',
+    {
+      groups: ['builtin', 'external', 'internal', 'parent', ['sibling', 'index']],
+      'newlines-between': 'always',
+      alphabetize: {
+        order: 'asc',
+        caseInsensitive: true,
+      },
+    },
+  ],
+  'no-only-tests/no-only-tests': 'error',
+  quotes: ['error', 'single', { avoidEscape: true }],
+};
+
+const noUnusedVarsOptions = {
+  argsIgnorePattern: '^_',
+  caughtErrorsIgnorePattern: '^_',
+  varsIgnorePattern: '^_',
+  ignoreRestSiblings: true,
+};
+
+export default tseslint.config(
+  {
+    ignores: ['dist', 'build', '.next', 'coverage', '*.min.js'],
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,ts,tsx}'],
+    plugins: {
+      import: importPlugin,
+      'no-only-tests': noOnlyTestsPlugin,
+    },
+    rules: sharedRules,
+  },
+  {
+    files: ['**/*.{js,mjs,cjs}'],
+    extends: [js.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', noUnusedVarsOptions],
+    },
+  },
+  {
+    files: ['**/*.cjs'],
+    languageOptions: {
+      sourceType: 'commonjs',
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      globals: {
+        ...globals.browser,
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', noUnusedVarsOptions],
+      'no-unused-vars': 'off',
+      'react-refresh/only-export-components': ['error', { allowConstantExport: true }],
+    },
+  }
+);

package/_templates/app/new/config/tailwind.config.js.ejs.t

@@ -3,13 +3,9 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>tailwind.config.
 ---
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
   plugins: [],
-  registries: {
-    "@aura": "https://cognitedata.github.io/aura/r/{name}.json",
-  },
 };
-

package/_templates/app/new/config/vite.config.ts.ejs.t

@@ -1,27 +1,26 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>vite.config.ts'
 ---
-import path from "node:path";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-import { defineConfig } from "vite";
-import mkcert from "vite-plugin-mkcert";
+import path from 'node:path';
 
-import { fusionOpenPlugin } from "@cognite/dune/vite";
+import { fusionOpenPlugin } from '@cognite/dune/vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import mkcert from 'vite-plugin-mkcert';
 
 export default defineConfig({
-  base: "./",
+  base: './',
   plugins: [react(), mkcert(), fusionOpenPlugin(), tailwindcss()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      '@': path.resolve(__dirname, './src'),
     },
   },
   server: {
     port: 3001,
   },
   worker: {
-    format: "es",
+    format: 'es',
   },
 });
-

package/_templates/app/new/config/vitest.config.ts.ejs.t

@@ -1,15 +1,14 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>vitest.config.ts'
 ---
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vitest/config";
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
-    environment: "happy-dom",
-    setupFiles: ["./vitest.setup.ts"],
+    environment: 'happy-dom',
+    setupFiles: ['./vitest.setup.ts'],
   },
 });
-

package/_templates/app/new/config/vitest.setup.ts.ejs.t

@@ -1,5 +1,4 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>vitest.setup.ts'
 ---
-import "@testing-library/jest-dom/vitest";
-
+import '@testing-library/jest-dom/vitest';

package/_templates/app/new/cursor/mcp.json.ejs.t

@@ -3,13 +3,8 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>.cursor/mcp.json
 ---
 {
   "mcpServers": {
-    "shadcn": {
-      "command": "npx",
-      "args": ["shadcn@latest", "mcp"]
-    },
     "cdf-datamodeling-mcp": {
       "command": "npx cdf-datamodelling-mcp-server"
     }
   }
 }
-

package/_templates/app/new/cursor/rules.mdc.ejs.t

@@ -6,7 +6,6 @@ description: Describes global rules
 alwaysApply: true
 ---
 
-- Use @aura shadcn components as much as possible. Stick with the style guide provided.
+- Use direct `@cognite/aura/components` exports whenever Aura provides the component you need. Fall back to custom markup only when Aura does not expose an equivalent primitive.
 - Look at the PRD.md file at the root for requirements. If the file is empty, write some yourself as the first thing, and confirm with the user the requirements.
 - The PRD.md file should contain the following: 1.1 Purpose, 1.2 Scope, 1.3 Target Audience, 2. Functional Requirements, 3. Non-Functional Requirements, 4. Data Models & Integration, 4.1 CDF Data Model, 4.1.1 Existing views, 4.1.2 New views, 4.1.3 Spaces, 5. User Stories
-

package/_templates/app/new/prompt.js

@@ -1,56 +1,56 @@
 export default [
   {
-    type: "input",
-    name: "name",
-    message: "What is the app name? (use kebab-case, e.g., my-awesome-app)",
-    initial: "my-dune-app",
+    type: 'input',
+    name: 'name',
+    message: 'What is the app name? (use kebab-case, e.g., my-awesome-app)',
+    initial: 'my-dune-app',
     validate: (input) => {
-      if (!input) return "App name is required";
+      if (!input) return 'App name is required';
       if (!/^[a-z][a-z0-9-]*$/.test(input)) {
-        return "App name must be kebab-case (lowercase, hyphens only)";
+        return 'App name must be kebab-case (lowercase, hyphens only)';
       }
       return true;
     },
   },
   {
-    type: "input",
-    name: "displayName",
-    message: "What is the display name? (e.g., My Awesome App)",
-    initial: "My Dune app",
+    type: 'input',
+    name: 'displayName',
+    message: 'What is the display name? (e.g., My Awesome App)',
+    initial: 'My Dune app',
   },
   {
-    type: "input",
-    name: "description",
-    message: "What is the app description?",
-    initial: "A Dune application",
+    type: 'input',
+    name: 'description',
+    message: 'What is the app description?',
+    initial: 'A Dune application',
   },
   {
-    type: "input",
-    name: "org",
-    message: "Deployment org? (e.g., cog-demo, cog-atlas)",
-    initial: "cog-demo",
+    type: 'input',
+    name: 'org',
+    message: 'Deployment org? (e.g., cog-demo, cog-atlas)',
+    initial: 'cog-demo',
     validate: (input) => {
-      if (!input) return "Org is required";
+      if (!input) return 'Org is required';
       return true;
     },
   },
   {
-    type: "input",
-    name: "project",
-    message: "Deployment project? (e.g., lervik-industries, atlas-greenfield)",
-    initial: "lervik-industries",
+    type: 'input',
+    name: 'project',
+    message: 'Deployment project? (e.g., lervik-industries, atlas-greenfield)',
+    initial: 'lervik-industries',
     validate: (input) => {
-      if (!input) return "Project is required";
+      if (!input) return 'Project is required';
       return true;
     },
   },
   {
-    type: "input",
-    name: "cluster",
-    message: "Cluster/baseUrl? (e.g., greenfield, westeurope-1, api)",
-    initial: "api",
+    type: 'input',
+    name: 'cluster',
+    message: 'Cluster/baseUrl? (e.g., greenfield, westeurope-1, api)',
+    initial: 'api',
     validate: (input) => {
-      if (!input) return "Cluster is required";
+      if (!input) return 'Cluster is required';
       return true;
     },
   },

package/_templates/app/new/root/index.html.ejs.t

@@ -20,17 +20,17 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>index.html'
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json" />
 
-    <!-- Fonts -->
+    <!-- Aura typography compatibility -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Source+Code+Pro:wght@200..900&display=swap"
       rel="stylesheet"
     />
+
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-

package/_templates/app/new/root/package.json.ejs.t

@@ -15,12 +15,13 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
-    "lint": "biome check .",
-    "lint:fix": "biome check --write .",
+    "lint": "eslint . --ext .js,.mjs,.cjs,.ts,.tsx",
+    "lint:fix": "eslint . --fix --ext .js,.mjs,.cjs,.ts,.tsx",
     "deploy": "dune deploy:interactive --published",
     "deploy-preview": "dune deploy:interactive"
   },
   "dependencies": {
+    "@cognite/aura": "^0.1.1",
     "@cognite/sdk": "^10.3.0",
     "@cognite/dune": "^0.2.4",
     "@tanstack/react-query": "^5.90.10",
@@ -30,7 +31,7 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
+    "@eslint/js": "9.39.2",
     "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -41,14 +42,19 @@ to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>package.json'
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.22",
+    "eslint": "9.39.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
     "happy-dom": "^20.0.2",
     "postcss": "^8.5.6",
-    "shadcn": "^3.5.2",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.0.0",
+    "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
     "vite-plugin-mkcert": "^1.17.9",
     "vitest": "^2.1.8"
   }
 }
-

package/_templates/app/new/src/App.test.tsx.ejs.t

@@ -1,38 +1,50 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/App.test.tsx'
 ---
-import * as duneAuth from "@cognite/dune";
-import { render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import App from "./App";
+import { useDune } from '@cognite/dune';
+import { CogniteClient } from '@cognite/sdk';
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import App from './App';
 
 // Mock the @cognite/dune module
-vi.mock(import("@cognite/dune"));
+vi.mock(import('@cognite/dune'));
+
+function mockUseDune(project: string, isLoading: boolean): ReturnType<typeof useDune> {
+  const sdk = new CogniteClient({
+    appId: 'dune-template-test',
+    project,
+    baseUrl: 'https://api.cognitedata.com',
+    oidcTokenProvider: async () => '',
+  });
 
-describe("App", () => {
+  const contextValue = {
+    sdk,
+    isLoading,
+  } satisfies ReturnType<typeof useDune>;
+
+  return contextValue;
+}
+
+describe('App', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("renders loading state", () => {
-    vi.mocked(duneAuth.useDune).mockReturnValue({
-      sdk: { project: "test-project" } as any,
-      isLoading: true,
-    });
+  it('renders loading state', () => {
+    vi.mocked(useDune).mockReturnValue(mockUseDune('test-project', true));
 
     render(<App />);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByText('Loading project...')).toBeInTheDocument();
   });
 
-  it("renders app with project name", () => {
-    vi.mocked(duneAuth.useDune).mockReturnValue({
-      sdk: { project: "my-test-project" } as any,
-      isLoading: false,
-    });
+  it('renders app with project name', () => {
+    vi.mocked(useDune).mockReturnValue(mockUseDune('my-test-project', false));
 
     render(<App />);
-    expect(screen.getByText("Welcome to my-test-project")).toBeInTheDocument();
-    expect(screen.getByText("Your Dune app is ready.")).toBeInTheDocument();
+    expect(screen.getByText('Welcome to my-test-project')).toBeInTheDocument();
+    expect(screen.getByText('Open starter config')).toBeInTheDocument();
+    expect(screen.getByText('<%= org %> / <%= project %>')).toBeInTheDocument();
   });
 });
-

package/_templates/app/new/src/App.tsx.ejs.t

@@ -1,22 +1,133 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/App.tsx'
 ---
-import { useDune } from "@cognite/dune";
+import {
+  Badge,
+  CodeBlock,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Loader,
+  Separator,
+  buttonVariants,
+} from '@cognite/aura/components';
+import { useDune } from '@cognite/dune';
+import appConfig from '../app.json';
+
+const deploymentChecklist = [
+  'Confirm org, project, and cluster in app.json.',
+  'Replace the starter workflow with your first real query.',
+  'Deploy with dune deploy:interactive when the shell is ready.',
+];
+
+function getCluster(baseUrl?: string) {
+  return baseUrl?.replace(/^https?:\/\//, '').replace(/\.cognitedata\.com$/, '') ?? '';
+}
 
 function App() {
   const { sdk, isLoading } = useDune();
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <main className="min-h-screen bg-[linear-gradient(145deg,var(--background)_0%,var(--mountain-50)_55%,var(--mountain-100)_100%)] text-foreground">
+        <section className="mx-auto grid min-h-screen w-full max-w-[58rem] place-content-center p-4 sm:p-8">
+          <div
+            className="mx-auto grid w-full max-w-sm justify-items-center gap-6 rounded-3xl border border-border bg-card p-5 shadow-xl backdrop-blur-lg sm:p-8"
+            aria-label="Loading project"
+            aria-live="polite"
+          >
+            <div className="inline-flex items-center gap-3 text-muted-foreground">
+              <Loader size={20} />
+              <span>Loading project...</span>
+            </div>
+          </div>
+        </section>
+      </main>
+    );
   }
 
+  const deployment = appConfig.deployments?.[0];
+  const deploymentLabel = [deployment?.org, deployment?.project ?? sdk.project].filter(Boolean).join(' / ');
+  const starterConfigPreview = JSON.stringify(
+    {
+      org: deployment?.org ?? '',
+      project: deployment?.project ?? sdk.project,
+      cluster: getCluster(deployment?.baseUrl),
+    },
+    null,
+    2
+  );
+
   return (
-    <div>
-      <h1>Welcome to {sdk.project}</h1>
-      <p>Your Dune app is ready.</p>
-    </div>
+    <main className="min-h-screen bg-[linear-gradient(145deg,var(--background)_0%,var(--mountain-50)_55%,var(--mountain-100)_100%)] text-foreground">
+      <section className="mx-auto grid min-h-screen w-full max-w-[58rem] place-content-center p-4 sm:p-8">
+        <div className="grid gap-6 rounded-3xl border border-border bg-card p-5 shadow-xl backdrop-blur-lg sm:p-8">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+            <div>
+              <h1 className="text-[clamp(2rem,4vw,3rem)] leading-none font-semibold tracking-[-0.04em]">
+                Welcome to {sdk.project}
+              </h1>
+              <div className="mt-3">
+                <Badge variant="fjord" background>
+                  {deploymentLabel}
+                </Badge>
+              </div>
+            </div>
+            <Dialog>
+              <DialogTrigger className={buttonVariants()}>Open starter config</DialogTrigger>
+              <DialogContent className="max-w-xl">
+                <DialogHeader>
+                  <DialogTitle>Starter config</DialogTitle>
+                  <DialogDescription>Current starter values as JSON.</DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-2">
+                  <div className="overflow-hidden rounded-2xl border border-border bg-background">
+                    <CodeBlock code={starterConfigPreview} language="json" />
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Badge variant="fjord" background>{sdk.project}</Badge>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+
+          <Separator />
+
+          <div className="grid gap-4">
+            <div id="deployment-checklist" className="rounded-2xl border border-border bg-muted p-4">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <p className="text-sm font-semibold">Deployment checklist</p>
+                  <p className="mt-1 text-sm text-muted-foreground">Use this to turn the starter into a deployable app.</p>
+                </div>
+                <Badge variant="fjord" background>
+                  3 steps
+                </Badge>
+              </div>
+              <div className="mt-4 grid gap-2">
+                {deploymentChecklist.map((item, index) => (
+                  <div
+                    key={item}
+                    className="grid grid-cols-[auto_1fr] items-start gap-3 rounded-xl border border-border bg-card px-3 py-2"
+                  >
+                    <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-foreground text-xs font-semibold text-background">
+                      {index + 1}
+                    </span>
+                    <p className="text-sm text-card-foreground">{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
   );
 }
 
 export default App;
-

package/_templates/app/new/src/lib/utils.ts.ejs.t

@@ -1,10 +1,9 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/lib/utils.ts'
 ---
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-

package/_templates/app/new/src/main.tsx.ejs.t

@@ -1,13 +1,14 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/main.tsx'
 ---
-import { DuneAuthProvider } from "@cognite/dune";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import { DuneAuthProvider } from '@cognite/dune';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
-import "./styles.css";
+import App from './App.tsx';
+
+import './styles.css';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,7 +19,7 @@ const queryClient = new QueryClient({
   },
 });
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <DuneAuthProvider>
@@ -27,4 +28,3 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     </QueryClientProvider>
   </React.StrictMode>
 );
-

package/_templates/app/new/src/styles.css.ejs.t

@@ -1,25 +1,11 @@
 ---
 to: '<%= useCurrentDir ? "" : ((directoryName || name) + "/") %>src/styles.css'
 ---
+@import "@cognite/aura/styles.css";
 @import "tailwindcss";
 
-body {
-  font-family: system-ui, -apple-system, sans-serif;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+:root {
+  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-source-code-pro: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
 }
-
-h1 {
-  font-size: 2rem;
-  font-weight: 600;
-  color: #1a1a2e;
-  margin-bottom: 0.5rem;
-}
-
-p {
-  color: #6b7280;
-}
-