diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/.gitignore b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/.gitignore new file mode 100644 index 0000000..6dde684 --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/.gitignore @@ -0,0 +1,28 @@ +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Environment variables +.env +.env.local +.env.*.local diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/AGENTS.md b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/AGENTS.md new file mode 100644 index 0000000..b536a7d --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/AGENTS.md @@ -0,0 +1,44 @@ +# Sarah's App Mon, Aug 31, 1:17:54 pm + +This is a Datadog App scaffolded with `npm create @datadog/apps`. + +Datadog Apps are React + TypeScript applications bundled by Vite and embedded in the Datadog product experience. Frontend code runs in the browser. Backend functions live in `*.backend.*` files and execute through Datadog's managed runtime. + +## DRUIDS components + +This app uses the published `@datadog/druids` package. In scaffolded apps, import components from `@datadog/druids/[category]/[Component]`; do not import private web-ui paths like `@druids/ui/...`. + +- The scaffold already wraps the app in `DruidsEnvironment` and imports `@datadog/druids/styles.css` at the React root. Keep that setup in place if you restructure the root. +- Discover available components by browsing the installed package. Treat the `exports` map in `node_modules/@datadog/druids/package.json` as the source of truth for public entry points, and explore the corresponding category directories under `node_modules/@datadog/druids/dist` instead of relying on a hard-coded component list. +- After choosing an exported component, inspect its TypeScript definitions under `node_modules/@datadog/druids/dist/**/*.d.mts` before inventing props or imports. For icons, only use entry points that are present in the installed package. +- Start with the [DRUIDS docs](https://druids.datadoghq.com/), especially [Foundations](https://druids.datadoghq.com/foundations), [Spacing & Layout](https://druids.datadoghq.com/foundations/spacing-and-layout), [Typography](https://druids.datadoghq.com/foundations/typography), and [Components](https://druids.datadoghq.com/components). The docs cover the full internal DRUIDS library; the public `@datadog/druids` package exposes only a subset for Datadog Apps. +- Use the docs after confirming the local API to understand design intent, layout guidance, examples, and component selection tradeoffs. +- Prefer appropriate DRUIDS layout and typography components over ad hoc HTML wrappers or inline CSS. Use component props and design tokens for spacing, size, and variants. + +## Read relevant guides + +- For embedded Datadog app context, routing, navigation, browser storage, or parent-page constraints, read `docs/agents/runtime-context.md`. +- For writing backend functions in `*.backend.ts` or `*.backend.js` files, or for calling backend functions from frontend code, read `docs/agents/backend-functions.md`. +- For local development, auth, deploy, publish, `DD_APPS_PUBLISH`, or deploy troubleshooting, read `docs/agents/build-upload-auth.md`. +- For GitHub Actions CI/CD setup, read `docs/agents/cicd.md`. +- For choosing between DDSQL and Action Catalog, configuring Connections, or querying app datastores, read `docs/agents/data.md`. +- For triggering or polling a Workflow Automation workflow from a backend function, read `docs/agents/workflow-automation.md`. +- For upgrading `@datadog/vite-plugin` or `@datadog/action-catalog`, read `docs/agents/upgrading.md`. + +## General rules + +- Route every external network request through a backend function that calls the generic HTTP action from `@datadog/action-catalog/http/http`. Never call `fetch` or use Node.js networking APIs to contact external services directly, including from a backend function. +- Do not hardcode API keys, app keys, OAuth tokens, passwords, or third-party credentials. +- Set the `name` and `description` fields in `datadog-app.config.json` to concise, user-facing values that describe the app. +- Prefer the generated npm scripts in `package.json`; this scaffold uses npm. +- Never change `id` in `datadog-app.config.json`. It is this app's permanent identity, not the app's UUID from App Builder — changing it makes the next upload create a duplicate app. +- Before inventing package imports or component props, inspect installed package exports and TypeScript definitions. + +## Broader Datadog Apps guidance + +- For scaffolding a new app from scratch, use the Datadog Apps agent skill when it is available. +- Use Playwright when available for browser validation, including screenshots for visual design changes. +- Use the Datadog `pup` CLI (https://github.com/DataDog/pup) when available for Datadog API inspection and troubleshooting. +- Use Datadog MCP tools when available for Datadog-specific lookup, diagnostics, or API-backed workflows. + +Primary docs: https://docs.datadoghq.com/actions/datadog_apps/ diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/CLAUDE.md b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/datadog-app.config.json b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/datadog-app.config.json new file mode 100644 index 0000000..8968724 --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/datadog-app.config.json @@ -0,0 +1,7 @@ +{ + "$schema": "https://unpkg.com/@datadog/create-apps/dist/datadog-app.config.schema.json", + "datadogSite": "datadoghq.com", + "id": "49cc0c41-c813-47db-baf6-92c38dc664be", + "name": "Sarah's App Mon, Aug 31, 1:17:54 pm", + "description": "A simple purple Drew app." +} diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/index.html b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/index.html new file mode 100644 index 0000000..f5cd7ac --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/index.html @@ -0,0 +1,15 @@ + + + + + + + Sarah's App Mon, Aug 31, 1:17:54 pm + + + +
+ + + + diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/package.json b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/package.json new file mode 100644 index 0000000..7f9085c --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/package.json @@ -0,0 +1,24 @@ +{ + "name": "sarah-s-app-mon-aug-31-1-17-54-pm", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite", + "build": "vite build", + "upload": "DD_APPS_UPLOAD_ASSETS=1 vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "lint:fix": "eslint . --fix", + "preview": "vite preview", + "typecheck": "tsc --noEmit" + }, + "dependencies": { + "@datadog/action-catalog": "^0.0.3", + "@datadog/druids": "^0.0.7", + "@tanstack/react-query": "^5.101.2", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "optionalDependencies": { + "@napi-rs/keyring": "^1.3.0" + } +} diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/public/favicon.ico b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/public/favicon.ico new file mode 100644 index 0000000..e04da3e Binary files /dev/null and b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/public/favicon.ico differ diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.css b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.css new file mode 100644 index 0000000..111413e --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.css @@ -0,0 +1,22 @@ +.drew-app { + align-items: center; + background: #fbf7ff; + display: flex; + justify-content: center; + min-height: 100vh; +} + +.drew-name { + color: #7c3aed; + font-size: 96px; + font-weight: 800; + letter-spacing: 0; + line-height: 1; + margin: 0; +} + +@media (max-width: 600px) { + .drew-name { + font-size: 64px; + } +} diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.tsx b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.tsx new file mode 100644 index 0000000..23405e3 --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/App.tsx @@ -0,0 +1,16 @@ +import { Spacing } from '@datadog/druids/layout/Spacing'; +import { Text } from '@datadog/druids/typography/Text'; + +import './App.css'; + +function App() { + return ( + + + drew + + + ); +} + +export default App; diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/main.tsx b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/main.tsx new file mode 100644 index 0000000..8f2c295 --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/src/main.tsx @@ -0,0 +1,24 @@ +import '@datadog/druids/styles.css'; + +import { DruidsEnvironment } from '@datadog/druids/layout/DruidsEnvironment'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './App'; + +const queryClient = new QueryClient(); +const appRoot = document.getElementById('app'); +if (appRoot) { + createRoot(appRoot).render( + + + + + + + , + ); +} else { + console.error('Missing #app div for createRoot.'); +} diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/tsconfig.json b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/tsconfig.json new file mode 100644 index 0000000..7a01668 --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": [ + "src" + ] +} \ No newline at end of file diff --git a/apps/sarah-s-app-mon-aug-31-1-17-54-pm/vite.config.ts b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/vite.config.ts new file mode 100644 index 0000000..b9fcd88 --- /dev/null +++ b/apps/sarah-s-app-mon-aug-31-1-17-54-pm/vite.config.ts @@ -0,0 +1,52 @@ +import { datadogVitePlugin } from '@datadog/vite-plugin'; +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; + +import rootManifest from '../../package.json'; +import { version } from './package.json'; +import datadogAppConfig from './datadog-app.config.json'; + +const hasDatadogApiKeys = Boolean( + (process.env.DD_API_KEY || process.env.DATADOG_API_KEY) && + (process.env.DD_APP_KEY || process.env.DATADOG_APP_KEY), +); + +export default defineConfig({ + base: './', + build: { + sourcemap: true, + }, + plugins: [ + react(), + datadogVitePlugin({ + logLevel: 'debug', + auth: { + site: process.env.DD_SITE || datadogAppConfig.datadogSite || rootManifest.datadogApps?.site, + apiKey: process.env.DD_API_KEY, + appKey: process.env.DD_APP_KEY, + }, + apps: { + enable: true, + identifier: '49cc0c41-c813-47db-baf6-92c38dc664be', + name: datadogAppConfig.name, + authOverrides: { + method: hasDatadogApiKeys ? 'apiKey' : 'oauth', + }, + }, + errorTracking: { + enable: hasDatadogApiKeys, + sourcemaps: { + minifiedPathPrefix: '/', + service: datadogAppConfig.name, + releaseVersion: version, + }, + }, + metadata: { + name: datadogAppConfig.name, + }, + metrics: { + enable: hasDatadogApiKeys, + }, + }), + ], +}); diff --git a/package-lock.json b/package-lock.json index 23ddb64..22102a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,19 @@ "@napi-rs/keyring": "^1.3.0" } }, + "apps/sarah-s-app-mon-aug-31-1-17-54-pm": { + "version": "0.0.1", + "dependencies": { + "@datadog/action-catalog": "^0.0.3", + "@datadog/druids": "^0.0.7", + "@tanstack/react-query": "^5.101.2", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "optionalDependencies": { + "@napi-rs/keyring": "^1.3.0" + } + }, "apps/sarah-s-app-tue-aug-25-10-32-30-am": { "version": "0.0.1", "dependencies": { @@ -3991,6 +4004,10 @@ "dev": true, "license": "MIT" }, + "node_modules/sarah-s-app-mon-aug-31-1-17-54-pm": { + "resolved": "apps/sarah-s-app-mon-aug-31-1-17-54-pm", + "link": true + }, "node_modules/sarah-s-app-tue-aug-25-10-32-30-am": { "resolved": "apps/sarah-s-app-tue-aug-25-10-32-30-am", "link": true