Skip to content

Add Horizon UI Pro + Next.js TypeScript sample for RULE native currency ecosystem - #40

Draft
Snapp949 with Copilot wants to merge 2 commits into
mainfrom
copilot/add-horizon-ui-pro-nextjs-ts-sample
Draft

Add Horizon UI Pro + Next.js TypeScript sample for RULE native currency ecosystem#40
Snapp949 with Copilot wants to merge 2 commits into
mainfrom
copilot/add-horizon-ui-pro-nextjs-ts-sample

Conversation

Copilot AI commented Nov 28, 2025

Copy link
Copy Markdown

Packages impacted by this PR

None (new sample only)

Issues associated with this PR

N/A

Describe the problem that is addressed by this PR

Adds a new sample app under samples/horizon-ui-pro-nextjs-ts demonstrating Horizon UI Pro (private package) integration with a minimal RULE native currency ecosystem API.

Sample includes:

  • Dashboard UI for RULE balance, credit-building products, and secondary market listings
  • In-memory API (/api/rules) with GET/POST for balance, products, and market operations
  • TypeScript types for all API request/response payloads
  • .npmrc.template + DevContainer config for secure NPM_TOKEN handling (no secrets committed)

Files added:

  • package.json - Next.js deps + @horizon/ui-pro: PRIVATE_PACKAGE_PLACEHOLDER
  • pages/index.tsx - Main dashboard with RULE ecosystem UI
  • pages/api/rules.ts - Demo API with typed request/response
  • components/Layout.tsx, ProductCard.tsx - UI components with commented Horizon UI Pro imports
  • .devcontainer/devcontainer.json - Forwards port 3000, runs npm install, uses NPM_TOKEN env var
  • README.md - Setup instructions for local/Codespaces with token configuration

What are the possible designs available to address the problem? If there are more than one possible design, why was the one in this PR chosen?

Standard Next.js pages router with API routes for simplicity. In-memory store chosen over database to keep sample self-contained.

Are there test cases added in this PR? (If not, why?)

No. This is a standalone sample app, not a library. The API is demo-only with non-persistent in-memory storage.

Provide a list of related PRs (if any)

None

Command used to generate this PR:**(Applicable only to SDK release request PRs)

N/A

Checklists

  • Added impacted package name to the issue description
  • Does this PR needs any fixes in the SDK Generator?** (If so, create an Issue in the Autorest/typescript repository and link it here)
  • Added a changelog (if necessary)
Original prompt

Create a new Next.js + TypeScript sample app under samples/horizon-ui-pro-nextjs-ts that demonstrates integrating Horizon UI Pro (private package) and provides a minimal backend API surface modeling the RULE native currency ecosystem. Do not commit any private tokens. Include an .npmrc.template and devcontainer sample with instructions for adding NPM_TOKEN in Codespaces or locally. The PR should be a draft PR against the main branch and include the following files with exact contents:

Files to add (paths relative to repo root):

  • samples/horizon-ui-pro-nextjs-ts/package.json
  • samples/horizon-ui-pro-nextjs-ts/tsconfig.json
  • samples/horizon-ui-pro-nextjs-ts/next.config.js
  • samples/horizon-ui-pro-nextjs-ts/pages/_app.tsx
  • samples/horizon-ui-pro-nextjs-ts/pages/index.tsx
  • samples/horizon-ui-pro-nextjs-ts/pages/api/rules.ts
  • samples/horizon-ui-pro-nextjs-ts/components/Layout.tsx
  • samples/horizon-ui-pro-nextjs-ts/components/ProductCard.tsx
  • samples/horizon-ui-pro-nextjs-ts/styles/globals.css
  • samples/horizon-ui-pro-nextjs-ts/README.md
  • samples/horizon-ui-pro-nextjs-ts/.npmrc.template
  • samples/horizon-ui-pro-nextjs-ts/.devcontainer/devcontainer.json

Goals and details:

  • The UI shows a sample dashboard for the "RULE" native currency (balance), allows adding "products" (credit-building products) and listing them to a demo "secondary market". The UI should be simple, use React + TypeScript, and import Horizon UI Pro styles with a commented placeholder import for the private package. Provide clear README instructions for how to install the private package using an NPM_TOKEN and the .npmrc.template.
  • The API route pages/api/rules.ts should implement a small in-memory store to hold variables: balance, products, market listings, and expose GET and POST to modify/query them. Document that the API is demo-only and not persistent.
  • Add a devcontainer.json under samples to forward port 3000 and run npm install on creation; do not add any tokens in devcontainer.json.
  • The package.json should include placeholder dependency entry for the private Horizon UI Pro package ("@horizon/ui-pro": "PRIVATE_PACKAGE_PLACEHOLDER"). Include necessary public deps: next, react, react-dom, typescript, etc. Include scripts: dev, build, start.
  • Add README.md describing the RULE ecosystem, how the sample models products/workflows/secondary market, how to run locally, how to configure .npmrc and Codespaces/Devcontainer with an NPM_TOKEN, and notes about not committing secrets.
  • Ensure TypeScript types are included for the API request/response code for clarity.

Please open a draft pull request against the main branch with these changes and a descriptive title. The PR should not include any secrets or tokens. Also include the PR body describing how to run the sample and where to put the NPM_TOKEN. Keep the PR as a draft.

Do not modify other files in the repository.

NOTE: This problem statement is actionable and contains all file contents; create the branch, commit the files, and open a draft PR. Thank you.

This pull request was created as a result of the following prompt from Copilot chat.

Create a new Next.js + TypeScript sample app under samples/horizon-ui-pro-nextjs-ts that demonstrates integrating Horizon UI Pro (private package) and provides a minimal backend API surface modeling the RULE native currency ecosystem. Do not commit any private tokens. Include an .npmrc.template and devcontainer sample with instructions for adding NPM_TOKEN in Codespaces or locally. The PR should be a draft PR against the main branch and include the following files with exact contents:

Files to add (paths relative to repo root):

  • samples/horizon-ui-pro-nextjs-ts/package.json
  • samples/horizon-ui-pro-nextjs-ts/tsconfig.json
  • samples/horizon-ui-pro-nextjs-ts/next.config.js
  • samples/horizon-ui-pro-nextjs-ts/pages/_app.tsx
  • samples/horizon-ui-pro-nextjs-ts/pages/index.tsx
  • samples/horizon-ui-pro-nextjs-ts/pages/api/rules.ts
  • samples/horizon-ui-pro-nextjs-ts/components/Layout.tsx
  • samples/horizon-ui-pro-nextjs-ts/components/ProductCard.tsx
  • samples/horizon-ui-pro-nextjs-ts/styles/globals.css
  • samples/horizon-ui-pro-nextjs-ts/README.md
  • samples/horizon-ui-pro-nextjs-ts/.npmrc.template
  • samples/horizon-ui-pro-nextjs-ts/.devcontainer/devcontainer.json

Goals and details:

  • The UI shows a sample dashboard for the "RULE" native currency (balance), allows adding "products" (credit-building products) and listing them to a demo "secondary market". The UI should be simple, use React + TypeScript, and import Horizon UI Pro styles with a commented placeholder import for the private package. Provide clear README instructions for how to install the private package using an NPM_TOKEN and the .npmrc.template.
  • The API route pages/api/rules.ts should implement a small in-memory store to hold variables: balance, products, market listings, and expose GET and POST to modify/query them. Document that the API is demo-only and not persistent.
  • Add a devcontainer.json under samples to forward port 3000 and run npm install on creation; do not add any tokens in devcontainer.json.
  • The package.json should include placeholder dependency entry for the private Horizon UI Pro package ("@horizon/ui-pro": "PRIVATE_PACKAGE_PLACEHOLDER"). Include necessary public deps: next, react, react-dom, typescript, etc. Include scripts: dev, build, start.
  • Add README.md describing the RULE ecosystem, how the sample models products/workflows/secondary market, how to run locally, how to configure .npmrc and Codespaces/Devcontainer with an NPM_TOKEN, and notes about not committing secrets.
  • Ensure TypeScript types are included for the API request/response code for clarity.

Please open a draft pull request against the main branch with these changes and a descriptive title. The PR should not include any secrets or tokens. Also include the PR body describing how to run the sample and where to put the NPM_TOKEN. Keep the PR as a draft.

Do not modify other files in the repository.

NOTE: This problem statement is actionable and contains all file contents; create the branch, commit the files, and open a draft PR. Thank you.


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: Snapp949 <173113150+Snapp949@users.noreply.github.com>
Copilot AI changed the title [WIP] Add Next.js sample app integrating Horizon UI Pro Add Horizon UI Pro + Next.js TypeScript sample for RULE native currency ecosystem Nov 28, 2025
Copilot AI requested a review from Snapp949 November 28, 2025 06:46
@github-actions

Copy link
Copy Markdown

Hi @Copilot. Thank you for your interest in helping to improve the Azure SDK experience and for your contribution. We've noticed that there hasn't been recent engagement on this pull request. If this is still an active work stream, please let us know by pushing some changes or leaving a comment. Otherwise, we'll close this out in 7 days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants