diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/.gitignore b/apps/sarah-s-app-tue-aug-25-10-32-30-am/.gitignore new file mode 100644 index 0000000..6dde684 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/.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-tue-aug-25-10-32-30-am/AGENTS.md b/apps/sarah-s-app-tue-aug-25-10-32-30-am/AGENTS.md new file mode 100644 index 0000000..f958e1a --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/AGENTS.md @@ -0,0 +1,28 @@ +# sarah-s-app-tue-aug-25-10-32-30-am + +This app is part of a Datadog Apps workspace. Shared guidance — including layout, dependencies, testing policy, and how changes ship — lives at the workspace root; read it before assuming anything not covered below. + +## Read relevant guides +- Embedded app context / routing / storage: ../../docs/agents/runtime-context.md +- Backend functions (*.backend.ts): ../../docs/agents/backend-functions.md +- Local dev / auth / build / upload: ../../docs/agents/build-upload-auth.md +- CI/CD (GitHub Actions deploy workflow): ../../docs/agents/cicd.md +- Data access (DDSQL vs. Action Catalog, Connections, datastores): ../../docs/agents/data.md +- Triggering or polling Workflow Automation from a backend function: ../../docs/agents/workflow-automation.md +- Upgrading `@datadog/vite-plugin` or `@datadog/action-catalog`: ../../docs/agents/upgrading.md +- Workspace overview (layout, dependencies, testing, shipping/CI): ../../AGENTS.md + +## This app +- This app owns its unique `apps.identifier` in `./vite.config.ts` — never share or copy it. +- Run locally: `npm run dev -w apps/sarah-s-app-tue-aug-25-10-32-30-am` (from the workspace root) or `npm run dev` (from this directory). +- Upload: `npm run upload -w apps/sarah-s-app-tue-aug-25-10-32-30-am`. + +## Testing + +Storybook stories are not required for this app right now — skip them unless explicitly asked. Playwright is still encouraged for browser validation when available, especially for visual/design changes. Validate with `npm run dev`, `npm run build`, and `npm run typecheck`/`npm run lint`. + +## Rules +- Keep secret-dependent work and privileged API calls in backend functions. +- Never hardcode API keys, app keys, or OAuth tokens. +- Prefer the generated npm scripts; this workspace uses npm. +- For any workspace, dependency, lockfile, or pull-request change, follow `Required lockfile gate before opening or updating a PR` in ../../AGENTS.md. That root section is the source of truth; do not create an app-local lockfile. diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/CLAUDE.md b/apps/sarah-s-app-tue-aug-25-10-32-30-am/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/datadog-app.config.json b/apps/sarah-s-app-tue-aug-25-10-32-30-am/datadog-app.config.json new file mode 100644 index 0000000..9521680 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/datadog-app.config.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://unpkg.com/@datadog/create-apps/dist/datadog-app.config.schema.json", + "datadogSite": "datadoghq.com", + "id": "930c642c-eb62-4cbf-acf0-fd7496aef0f8", + "name": "Barak Rainbow" +} diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/index.html b/apps/sarah-s-app-tue-aug-25-10-32-30-am/index.html new file mode 100644 index 0000000..14a8599 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/index.html @@ -0,0 +1,15 @@ + + + + + + + Barak Rainbow + + + +
+ + + + diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/package.json b/apps/sarah-s-app-tue-aug-25-10-32-30-am/package.json new file mode 100644 index 0000000..744524d --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/package.json @@ -0,0 +1,24 @@ +{ + "name": "sarah-s-app-tue-aug-25-10-32-30-am", + "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 . --ext ts,tsx --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-tue-aug-25-10-32-30-am/public/favicon.ico b/apps/sarah-s-app-tue-aug-25-10-32-30-am/public/favicon.ico new file mode 100644 index 0000000..e04da3e Binary files /dev/null and b/apps/sarah-s-app-tue-aug-25-10-32-30-am/public/favicon.ico differ diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.css b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.css new file mode 100644 index 0000000..f60d9e5 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.css @@ -0,0 +1,143 @@ +.barak-app { + min-height: 100vh; + background: + radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.95), transparent 30%), + linear-gradient(135deg, #f7fbff 0%, #fff8f1 45%, #f5fff9 100%); +} + +.barak-stage { + position: relative; + display: grid; + min-height: min(720px, calc(100vh - 48px)); + overflow: hidden; + place-items: center; + border: 1px solid rgba(30, 41, 59, 0.12); + border-radius: 8px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)), + linear-gradient(120deg, rgba(240, 77, 94, 0.22), rgba(46, 196, 182, 0.18)); + box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12); +} + +.rainbow-sky { + position: absolute; + inset: clamp(24px, 6vw, 72px) 50% auto auto; + width: min(680px, 86vw); + aspect-ratio: 2 / 1; + transform: translateX(50%); +} + +.rainbow-arc { + position: absolute; + inset: 0; + border: clamp(14px, 3vw, 30px) solid currentColor; + border-bottom: 0; + border-radius: 999px 999px 0 0; +} + +.rainbow-arc-red { + color: #f04d5e; +} + +.rainbow-arc-orange { + inset: 9% 9% 0; + color: #ff9f1c; +} + +.rainbow-arc-yellow { + inset: 18% 18% 0; + color: #ffd166; +} + +.rainbow-arc-green { + inset: 27% 27% 0; + color: #2ec4b6; +} + +.rainbow-arc-blue { + inset: 36% 36% 0; + color: #2f80ed; +} + +.rainbow-arc-violet { + inset: 45% 45% 0; + color: #8a5cf6; +} + +.barak-copy { + position: relative; + z-index: 1; + width: min(760px, 100%); + margin-top: clamp(120px, 22vw, 220px); + text-align: center; +} + +.eyebrow { + margin: 0 0 12px; + color: #4f46e5; + letter-spacing: 0; + text-transform: uppercase; +} + +.barak-title { + margin: 0; + color: transparent; + font-size: 11rem; + font-weight: 900; + letter-spacing: 0; + line-height: 0.9; + background: linear-gradient(90deg, #f04d5e, #ff9f1c, #ffd166, #2ec4b6, #2f80ed, #8a5cf6); + background-clip: text; + -webkit-background-clip: text; + text-shadow: 0 18px 46px rgba(15, 23, 42, 0.12); +} + +.barak-subtitle { + max-width: 560px; + margin: 20px auto 0; + color: #334155; +} + +.rainbow-palette { + position: relative; + z-index: 1; + display: grid; + width: min(820px, 100%); + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 10px; + margin-top: clamp(36px, 6vw, 72px); +} + +.palette-band { + display: flex; + min-width: 0; + align-items: center; + justify-content: center; + gap: 8px; + padding: 10px 8px; + border: 1px solid rgba(15, 23, 42, 0.1); + border-radius: 8px; + background: rgba(255, 255, 255, 0.74); +} + +.palette-swatch { + width: 14px; + height: 14px; + flex: 0 0 auto; + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); +} + +@media (max-width: 720px) { + .barak-stage { + min-height: calc(100vh - 32px); + } + + .barak-title { + font-size: 5rem; + } + + .rainbow-palette { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.tsx b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.tsx new file mode 100644 index 0000000..f8abce0 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/App.tsx @@ -0,0 +1,64 @@ +import { Grid } from '@datadog/druids/layout/Grid'; +import { GridItem } from '@datadog/druids/layout/GridItem'; +import { Spacing } from '@datadog/druids/layout/Spacing'; +import { Text } from '@datadog/druids/typography/Text'; + +import './App.css'; + +const rainbowBands = [ + { name: 'Red', value: '#f04d5e' }, + { name: 'Orange', value: '#ff9f1c' }, + { name: 'Yellow', value: '#ffd166' }, + { name: 'Green', value: '#2ec4b6' }, + { name: 'Blue', value: '#2f80ed' }, + { name: 'Violet', value: '#8a5cf6' }, +]; + +function App() { + return ( + + + + + + + + + Rainbow mode + + + Barak + + + A bright, color-forward space built around one name. + + + +
+ {rainbowBands.map((band) => ( +
+ + + {band.name} + +
+ ))} +
+ + + + + ); +} + +export default App; diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/main.tsx b/apps/sarah-s-app-tue-aug-25-10-32-30-am/src/main.tsx new file mode 100644 index 0000000..8f2c295 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/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-tue-aug-25-10-32-30-am/tsconfig.json b/apps/sarah-s-app-tue-aug-25-10-32-30-am/tsconfig.json new file mode 100644 index 0000000..a0b4351 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../../tsconfig.base.json", + "include": [ + "src" + ] +} diff --git a/apps/sarah-s-app-tue-aug-25-10-32-30-am/vite.config.ts b/apps/sarah-s-app-tue-aug-25-10-32-30-am/vite.config.ts new file mode 100644 index 0000000..b7554e1 --- /dev/null +++ b/apps/sarah-s-app-tue-aug-25-10-32-30-am/vite.config.ts @@ -0,0 +1,58 @@ +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), +); +const datadogSite = process.env.DD_SITE || process.env.DATADOG_SITE || datadogAppConfig.datadogSite; + +if (!process.env.DD_SITE && !process.env.DATADOG_SITE) { + process.env.DD_SITE = datadogSite; +} + +export default defineConfig({ + base: './', + build: { + sourcemap: true, + }, + plugins: [ + react(), + datadogVitePlugin({ + logLevel: 'debug', + auth: { + site: datadogSite || rootManifest.datadogApps?.site, + apiKey: process.env.DD_API_KEY, + appKey: process.env.DD_APP_KEY, + }, + apps: { + enable: true, + name: datadogAppConfig.name, + description: 'A bright rainbow experience for Barak.', + authOverrides: { + method: hasDatadogApiKeys ? 'apiKey' : 'oauth', + }, + identifier: '930c642c-eb62-4cbf-acf0-fd7496aef0f8', + }, + errorTracking: { + enable: hasDatadogApiKeys, + sourcemaps: { + minifiedPathPrefix: '/', + releaseVersion: version, + service: datadogAppConfig.name, + }, + }, + metadata: { + name: datadogAppConfig.name, + }, + metrics: { + enable: hasDatadogApiKeys, + }, + }), + ], +}); diff --git a/package-lock.json b/package-lock.json index de7e825..a793e21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,19 @@ "@napi-rs/keyring": "^1.3.0" } }, + "apps/sarah-s-app-tue-aug-25-10-32-30-am": { + "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" + } + }, "node_modules/@babel/code-frame": { "version": "7.29.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", @@ -75,6 +88,7 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -256,6 +270,7 @@ "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/types": "^7.29.8" }, @@ -319,6 +334,7 @@ "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.8", @@ -338,6 +354,7 @@ "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" @@ -1475,6 +1492,7 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -1958,6 +1976,7 @@ "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.18.0" } @@ -1975,6 +1994,7 @@ "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -2025,6 +2045,7 @@ "integrity": "sha512-fUBfTuuEulWqX6V8+O3PtScV01tzYYRUDTAirHFKoRAt7nOzoGiPt0M/bB47wWNy0coOOcgEwAMUtBpykMxl6w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.67.0", "@typescript-eslint/types": "8.67.0", @@ -2250,6 +2271,7 @@ "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2370,6 +2392,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.11.12", "caniuse-lite": "^1.0.30001809", @@ -2591,6 +2614,7 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3799,6 +3823,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -3811,6 +3836,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -3952,6 +3978,10 @@ "dev": true, "license": "MIT" }, + "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 + }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -4139,6 +4169,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -4224,6 +4255,7 @@ "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", @@ -4361,6 +4393,7 @@ "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" }