From 8693135bf2b3a64b3a47258eae7675d12179063c Mon Sep 17 00:00:00 2001 From: Saidev Dhal Date: Thu, 28 Nov 2024 11:48:14 +0530 Subject: [PATCH 1/5] add react-scan & fix turbo package --- apps/app/package.json | 3 ++- apps/status/package.json | 3 ++- apps/www/package.json | 3 ++- turbo.json | 4 ++++ 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/app/package.json b/apps/app/package.json index 3d98e59..ef47a5f 100644 --- a/apps/app/package.json +++ b/apps/app/package.json @@ -11,7 +11,8 @@ "lint:fix": "next lint --fix", "typecheck": "tsc --noEmit", "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache", - "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache" + "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache", + "react-scan": "pnpm dlx react-scan@latest http://localhost:3002" }, "dependencies": { "@better-fetch/fetch": "^1.1.12", diff --git a/apps/status/package.json b/apps/status/package.json index 136de80..bbefd07 100644 --- a/apps/status/package.json +++ b/apps/status/package.json @@ -6,7 +6,8 @@ "dev": "next dev -p 3004 --turbopack", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "react-scan": "pnpm dlx react-scan@latest http://localhost:3004" }, "dependencies": { "@radix-ui/react-accordion": "^1.2.1", diff --git a/apps/www/package.json b/apps/www/package.json index 5323984..6b8b0a9 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -11,7 +11,8 @@ "lint:fix": "next lint --fix", "typecheck": "tsc --noEmit", "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache", - "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache" + "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache", + "react-scan": "pnpm dlx react-scan@latest http://localhost:3003" }, "dependencies": { "@hookform/resolvers": "^3.9.1", diff --git a/turbo.json b/turbo.json index 7e8efb5..ac5a4be 100644 --- a/turbo.json +++ b/turbo.json @@ -25,6 +25,10 @@ "cache": false, "outputs": [] }, + "typecheck": { + "cache": false, + "outputs": [] + }, "format:check": { "cache": false, "outputs": [] From 62d1f509e0cf21c338b88d2ae76f9b863a8ebd7d Mon Sep 17 00:00:00 2001 From: Saidev Dhal Date: Fri, 29 Nov 2024 14:29:41 +0530 Subject: [PATCH 2/5] fix pricing page --- .github/workflows/format-and-push.yml | 17 +-- apps/api/package.json | 4 +- apps/app/package.json | 2 +- apps/www/app/(routes)/pricing/page.tsx | 20 ++- apps/www/components/custom/anim-numb.tsx | 31 +++++ .../custom/pricing/pricing.cards.tsx | 109 ++++++++++++---- .../custom/pricing/pricing.switch.tsx | 27 ++++ .../custom/pricing/pricing.table.tsx | 9 ++ apps/www/components/custom/text-morph.tsx | 60 +++++++++ apps/www/components/ui/switch.tsx | 29 +++++ apps/www/config/pricing.config.ts | 29 +++-- apps/www/package.json | 4 +- pnpm-lock.yaml | 119 ++++++++++++++---- 13 files changed, 379 insertions(+), 81 deletions(-) create mode 100644 apps/www/components/custom/anim-numb.tsx create mode 100644 apps/www/components/custom/pricing/pricing.switch.tsx create mode 100644 apps/www/components/custom/pricing/pricing.table.tsx create mode 100644 apps/www/components/custom/text-morph.tsx create mode 100644 apps/www/components/ui/switch.tsx diff --git a/.github/workflows/format-and-push.yml b/.github/workflows/format-and-push.yml index 56e4278..f37d657 100644 --- a/.github/workflows/format-and-push.yml +++ b/.github/workflows/format-and-push.yml @@ -41,18 +41,11 @@ jobs: restore-keys: | ${{ runner.os }}-pnpm- - - name: Install dependencies - run: pnpm install + - name: Install dependencies & turbo + run: pnpm install && pnpm i -g turbo - - name: Check formatting with Prettier - id: format_check - run: | - if pnpm format:check; then - echo "Formatting is correct" - else - echo "Formatting required" - echo "formatting_required=true" >> $GITHUB_ENV - fi + - name: Format code with Prettier + run: turbo format:write - name: Check for changes and push if needed run: | @@ -60,7 +53,7 @@ jobs: git config --global user.name "github-actions[bot]" git config --global user.email "github-actions[bot]@users.noreply.github.com" git add . - git commit -m "chore: format code with Prettier" + git commit -m "format: make the code prettier" git push else echo "No formatting changes to push." diff --git a/apps/api/package.json b/apps/api/package.json index 082196a..fc7f323 100644 --- a/apps/api/package.json +++ b/apps/api/package.json @@ -18,12 +18,12 @@ "@hono/zod-validator": "^0.4.1", "@prisma/client": "^5.22.0", "@repo/auth": "workspace:*", + "@repo/cache": "workspace:*", "@repo/db": "workspace:*", "@repo/mail": "workspace:*", "@repo/types": "workspace:*", - "@repo/cache": "workspace:*", "hono": "^4.6.9", - "next": "15.0.2", + "next": "15.0.3", "prisma": "^5.22.0", "react": "19.0.0-rc-02c0e824-20241028", "react-dom": "19.0.0-rc-02c0e824-20241028", diff --git a/apps/app/package.json b/apps/app/package.json index ef47a5f..e037d57 100644 --- a/apps/app/package.json +++ b/apps/app/package.json @@ -44,7 +44,7 @@ "geist": "^1.3.1", "input-otp": "^1.4.1", "lucide-react": "^0.454.0", - "next": "15.0.2", + "next": "15.0.3", "next-themes": "^0.4.3", "react": "19.0.0-rc-02c0e824-20241028", "react-beautiful-dnd": "^13.1.1", diff --git a/apps/www/app/(routes)/pricing/page.tsx b/apps/www/app/(routes)/pricing/page.tsx index f7677eb..f48b1fd 100644 --- a/apps/www/app/(routes)/pricing/page.tsx +++ b/apps/www/app/(routes)/pricing/page.tsx @@ -7,11 +7,17 @@ import { import PricingCards from "@/components/custom/pricing/pricing.cards"; import { siteConfig } from "@/config/site.config"; import BlurFade from "@/components/ui/blur-fade"; +import PricingTable from "@/components/custom/pricing/pricing.table"; +import PricingSwitch from "@/components/custom/pricing/pricing.switch"; +import { useState } from "react"; export default function Pricing() { + const [isYearly, setIsYearly] = useState(true); + return (
+
{siteConfig.pricingPage.title} @@ -24,11 +30,21 @@ export default function Pricing() { -
+
- +
+ +
+ + +
+ +
+ +
+
); } diff --git a/apps/www/components/custom/anim-numb.tsx b/apps/www/components/custom/anim-numb.tsx new file mode 100644 index 0000000..d91a985 --- /dev/null +++ b/apps/www/components/custom/anim-numb.tsx @@ -0,0 +1,31 @@ +'use client'; +import { cn } from '@/lib/utils'; +import { motion, SpringOptions, useSpring, useTransform } from 'framer-motion'; +import { useEffect } from 'react'; + +type AnimatedNumber = { + value: number; + className?: string; + springOptions?: SpringOptions; +}; + +export function AnimatedNumber({ + value, + className, + springOptions, +}: AnimatedNumber) { + const spring = useSpring(value, springOptions); + const display = useTransform(spring, (current) => + Math.round(current).toLocaleString() + ); + + useEffect(() => { + spring.set(value); + }, [spring, value]); + + return ( + + {display} + + ); +} diff --git a/apps/www/components/custom/pricing/pricing.cards.tsx b/apps/www/components/custom/pricing/pricing.cards.tsx index 5c02065..ef555d9 100644 --- a/apps/www/components/custom/pricing/pricing.cards.tsx +++ b/apps/www/components/custom/pricing/pricing.cards.tsx @@ -9,12 +9,18 @@ import { import { Check } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { pricingCardConfig } from "@/config/pricing.config"; +import { TextMorph } from "../text-morph"; +import { AnimatedNumber } from "../anim-numb"; -export default function PricingCards() { +interface PCards { +isYearly: boolean +} + +export default function PricingCards({isYearly}: PCards) { return ( -
- {/* Basic Plan */} - +
+ {/* Plura Basic */} +

{pricingCardConfig.basic.name} @@ -22,15 +28,20 @@ export default function PricingCards() {

{pricingCardConfig.basic.tier}

- {/* $ */} - {pricingCardConfig.basic.price} + + {pricingCardConfig.basic.currency} + + {pricingCardConfig.basic.priceMonthly} - {/*
- $199 - - 35% OFF - -
*/} +
+ + {pricingCardConfig.basic.currency} + {pricingCardConfig.basic.beforePrice} + + + {pricingCardConfig.basic.discount}% OFF + +

- Billed - - {isYearly ? "Yearly" : "Monthly"} - + Billed + {isYearly ? "Yearly" : "Monthly"}

@@ -192,33 +200,45 @@ export default function PricingCards({isYearly}: PCards) { {pricingCardConfig.pro.currency} + springOptions={{ + bounce: 0, + duration: 2000, + }} + value={ + isYearly + ? pricingCardConfig.pro.priceYearly + : pricingCardConfig.pro.priceMonthly + } + />
{pricingCardConfig.pro.currency} + springOptions={{ + bounce: 0, + duration: 2000, + }} + value={ + isYearly + ? pricingCardConfig.pro.beforePriceYearly + : pricingCardConfig.pro.beforePriceMonthly + } + /> - - % OFF + + % OFF
diff --git a/apps/www/components/custom/pricing/pricing.switch.tsx b/apps/www/components/custom/pricing/pricing.switch.tsx index 884b7d0..da15680 100644 --- a/apps/www/components/custom/pricing/pricing.switch.tsx +++ b/apps/www/components/custom/pricing/pricing.switch.tsx @@ -5,10 +5,12 @@ import { Switch } from "@/components/ui/switch"; import { useEffect, useState } from "react"; interface PricingSwitchProps { - onYearlyBillingChange?: (isYearly: boolean) => void; - } + onYearlyBillingChange?: (isYearly: boolean) => void; +} -export default function PricingSwitch({onYearlyBillingChange}: PricingSwitchProps) { +export default function PricingSwitch({ + onYearlyBillingChange, +}: PricingSwitchProps) { const [isYearly, setIsYearly] = useState(true); useEffect(() => { if (onYearlyBillingChange) { @@ -18,10 +20,14 @@ export default function PricingSwitch({onYearlyBillingChange}: PricingSwitchProp return (
- - -
+ + +
); } diff --git a/apps/www/components/custom/pricing/pricing.table.tsx b/apps/www/components/custom/pricing/pricing.table.tsx index 2a73646..ce5bd9a 100644 --- a/apps/www/components/custom/pricing/pricing.table.tsx +++ b/apps/www/components/custom/pricing/pricing.table.tsx @@ -1,9 +1,5 @@ -import React from 'react' +import React from "react"; export default function PricingTable() { - return ( -
- hey -
- ) + return
hey
; } diff --git a/apps/www/components/custom/site/header.tsx b/apps/www/components/custom/site/header.tsx index 2f89729..5cf8a94 100644 --- a/apps/www/components/custom/site/header.tsx +++ b/apps/www/components/custom/site/header.tsx @@ -10,7 +10,7 @@ import { useEffect, useState } from "react"; import { redirect } from "next/navigation"; export function SiteHeader() { - const [open, setOpen] = useState(false) + const [open, setOpen] = useState(false); useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "l" || e.key === "L") { @@ -85,41 +85,40 @@ export function SiteHeader() { - - +
diff --git a/apps/www/components/custom/text-morph.tsx b/apps/www/components/custom/text-morph.tsx index 14c48d0..a883979 100644 --- a/apps/www/components/custom/text-morph.tsx +++ b/apps/www/components/custom/text-morph.tsx @@ -1,7 +1,7 @@ -'use client'; -import { cn } from '@/lib/utils'; -import { AnimatePresence, motion } from 'framer-motion'; -import { useMemo, useId } from 'react'; +"use client"; +import { cn } from "@/lib/utils"; +import { AnimatePresence, motion } from "framer-motion"; +import { useMemo, useId } from "react"; type TextMorphProps = { children: string; @@ -12,7 +12,7 @@ type TextMorphProps = { export function TextMorph({ children, - as: Component = 'p', + as: Component = "p", className, style, }: TextMorphProps) { @@ -21,7 +21,7 @@ export function TextMorph({ const characters = useMemo(() => { const charCounts: Record = {}; - return children.split('').map((char, index) => { + return children.split("").map((char, index) => { const lowerChar = char.toLowerCase(); charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1; @@ -34,18 +34,18 @@ export function TextMorph({ return ( - + {characters.map((character) => (
); diff --git a/apps/www/components/custom/pricing/pricing.table.tsx b/apps/www/components/custom/pricing/pricing.table.tsx deleted file mode 100644 index ce5bd9a..0000000 --- a/apps/www/components/custom/pricing/pricing.table.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export default function PricingTable() { - return
hey
; -}