CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
5495b9c269
stack/packages/template
History
BilalG1 5ac2b0d74a
product card fixes, payments test mode (#928) 
https://www.loom.com/share/59ff826f88324a61bb2fefc51769f840?sid=3fe23444-c56e-46c8-a402-8df38a69403c
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR improves the payment products UI by relocating the save/cancel
buttons from the top to the bottom of the product card and replacing the
generic `EditableInput` component with a custom `ProductEditableInput`
component that better handles the specific styling and interaction
patterns needed for product fields. The changes include better visual
feedback during editing and improved layout alignment for the price
input field.

⏱️ Estimated Review Time: 15-30 minutes

<details>
<summary>💡 Review Order Suggestion</summary>

| Order | File Path |
|-------|-----------|
| 1 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx`
|
</details>



[![Need help? Join our
Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U)


[![Analyze latest
changes](21cf02f719/?repo_owner=stack-auth&repo_name=stack-auth&pr_number=928)
<!-- RECURSEML_SUMMARY:END -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* New Features
- Unified editable product input with read-only and inline editing
modes, placeholder support, and explicit Cancel/Save actions.

* Style
- Improved price-editing layout: aligned currency symbol, spacing, and
input visuals for clearer monetary entry.
- Polished input appearance for consistent look and feel across product
views.

* Refactor
- Replaced scattered editable fields with a single reusable input
component across product editing screens for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Move save/cancel buttons to bottom and replace `EditableInput` with
`ProductEditableInput` for improved UI in
`page-client-catalogs-view.tsx`.
> 
>   - **UI Changes**:
> - Move save/cancel buttons to the bottom of the product card in
`ProductCard`.
> - Replace `EditableInput` with `ProductEditableInput` for better
styling and interaction in `ProductCard`.
>   - **Component Changes**:
> - Add `ProductEditableInput` component to handle product-specific
input styling and behavior.
> - Update `ProductPriceRow` to improve price input layout and visuals.
>   - **Misc**:
>     - Remove unused import of `EditableInput`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for c09cb54306. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->
2025-10-07 18:07:13 +00:00
..
scripts Widget playground mobile mode 2025-07-14 20:04:43 -07:00
src product card fixes, payments test mode (#928) 2025-10-07 18:07:13 +00:00
.env Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
.eslintrc.cjs tsup for stack-shared (#647) 2025-04-28 21:26:52 -07:00
.gitignore Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
CHANGELOG.md chore: update package versions 2025-09-26 23:16:39 -05:00
components.json Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
LICENSE Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
next-env.d.ts Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
package-template.json drop react v18 support (#921) 2025-10-06 12:46:34 -07:00
package.json drop react v18 support (#921) 2025-10-06 12:46:34 -07:00
postcss.config.js Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
quetzal.config.json Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
README.md Update branding from Stack to Stack Auth in documentation (#504) 2025-03-04 04:07:54 +01:00
tailwind.config.js Vanilla JS client library (#408) 2025-02-08 02:31:03 +01:00
tsconfig.json In-source unit tests (#429) 2025-02-14 11:47:52 -08:00
tsup.config.ts tsup for stack-shared (#647) 2025-04-28 21:26:52 -07:00
vitest.config.ts In-source unit tests (#429) 2025-02-14 11:47:52 -08:00

README.md

Stack Auth: Open-source Clerk/Auth0 alternative

📘 Docs | ☁️ Hosted Version | ✨ Demo | 🎮 Discord | GitHub

Stack Auth is a managed user authentication solution. It is developer-friendly and fully open-source (licensed under MIT and AGPL).

Stack Auth gets you started in just five minutes, after which you'll be ready to use all of its features as you grow your project. Our managed service is completely optional and you can export your user data and self-host, for free, at any time.

We support Next.js frontends, along with any backend that can use our REST API. Check out our setup guide to get started.

📦 Installation & Setup

  1. Run Stack Auth's installation wizard with the following command: 
    npx @stackframe/init-stack@latest
  2. Then, create an account on the Stack Auth dashboard, create a new project with an API key, and copy its environment variables into the .env.local file of your Next.js project: 
    NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id>
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key>
STACK_SECRET_SERVER_KEY=<your-secret-server-key>
  3. That's it! You can run your app with npm run dev and go to http://localhost:3000/handler/signup to see the sign-up page. You can also check out the account settings page at http://localhost:3000/handler/account-settings.

Check out the documentation for a more detailed guide.