refactor(comp-510): fix mock price data generation (#547)

Fixes: #546 - Ref: https://coss.com/origin/calendar-date-picker

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixed mock price data generation in comp-510 so the calendar renders once and shows prices for the next 180 days. Also updated the registry item metadata to align with the calendar dependency.

- **Bug Fixes**
  - Generate mock prices once on mount using a local todayDate, removing the unstable today dependency.
  - Keep date disabling tied to the price map by formatted date key.

- **Refactors**
  - comp-510.json now declares name/type and the calendar registry dependency.
  - Normalized meta tags and file entry format.

<sup>Written for commit b99a9a3. Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

Author: pasqualevitiello

apps/origin/public/r/comp-510.json

@@ -1,18 +1,24 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-510",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://coss.com/origin/r/calendar.json"
+  ],
   "files": [
     {
-      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  // Mock price data\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(today);\n        date.setDate(today.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, [today]);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day_button: \"size-12\",\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n          months: \"sm:flex-col md:flex-row gap-8\",\n          today: \"*:after:hidden\",\n          weekday: \"w-12\",\n        }}\n        components={{\n          DayButton: (props: DayButtonProps) => (\n            <DayButton {...props} prices={mockPriceData} />\n          ),\n        }}\n        disabled={isDateDisabled}\n        mode=\"single\"\n        numberOfMonths={2}\n        onSelect={setDate}\n        pagedNavigation\n        selected={date}\n        showOutsideDays={false}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Pricing calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-medium text-[10px]\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"text-muted-foreground group-data-selected:text-primary-foreground/70\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
       "path": "registry/default/components/comp-510.tsx",
+      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  // Mock price data\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day_button: \"size-12\",\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n          months: \"sm:flex-col md:flex-row gap-8\",\n          today: \"*:after:hidden\",\n          weekday: \"w-12\",\n        }}\n        components={{\n          DayButton: (props: DayButtonProps) => (\n            <DayButton {...props} prices={mockPriceData} />\n          ),\n        }}\n        disabled={isDateDisabled}\n        mode=\"single\"\n        numberOfMonths={2}\n        onSelect={setDate}\n        pagedNavigation\n        selected={date}\n        showOutsideDays={false}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Pricing calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-medium text-[10px]\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"text-muted-foreground group-data-selected:text-primary-foreground/70\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
   "meta": {
     "colSpan": 3,
     "style": 1,
-    "tags": ["calendar", "date", "react daypicker"]
-  },
-  "name": "comp-510",
-  "registryDependencies": ["https://coss.com/origin/r/calendar.json"],
-  "type": "registry:component"
-}
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ]
+  }
+}

apps/origin/registry/default/components/comp-510.tsx

@@ -20,18 +20,19 @@ export default function Component() {
   useEffect(() => {
     const generateMockPriceData = () => {
       const data: Record<string, number> = {};
+      const todayDate = new Date();
 
       for (let i = 0; i < 180; i++) {
-        const date = new Date(today);
-        date.setDate(today.getDate() + i);
+        const date = new Date(todayDate);
+        date.setDate(todayDate.getDate() + i);
         const dateKey = format(date, "yyyy-MM-dd");
         const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;
         data[dateKey] = randomPrice;
       }
       return data;
     };
     setMockPriceData(generateMockPriceData());
-  }, [today]);
+  }, []);
 
   const isDateDisabled = (date: Date) => {
     return !mockPriceData[format(date, "yyyy-MM-dd")];