denwa-web-shared 1.0.51 → 1.0.53

package/README.md

@@ -0,0 +1,13 @@
+# denwa-web-shared
+
+A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.
+
+## AI Agent Integration
+
+This library supports `@tanstack/intent` for automated developer assistance.
+
+If you use an AI agent (Claude Code, Cursor, Copilot, etc.), run the following command in your project to install this library's skills:
+
+```bash
+npx @tanstack/intent@latest install
+```

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "denwa-web-shared",
   "private": false,
-  "version": "1.0.51",
+  "version": "1.0.53",
   "type": "module",
   "author": "Denwa",
   "main": "dist/denwa-web-shared.cjs.js",
   "module": "dist/denwa-web-shared.es.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Denwa799/web-shared.git"
+  },
   "files": [
-    "dist"
+    "dist",
+    "skills",
+    "!skills/_artifacts"
   ],
   "types": "dist/index.d.ts",
   "exports": {
@@ -52,6 +58,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.28.0",
+    "@tanstack/intent": "^0.0.36",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react-swc": "^3.10.1",
@@ -75,5 +82,8 @@
     "typescript-eslint": "^8.33.1",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4"
-  }
+  },
+  "keywords": [
+    "tanstack-intent"
+  ]
 }

package/skills/infinity-list/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: infinity-list
+description: >
+  Implement a continuous feed of items using InfinityList component.
+  Load when implementing infinite scroll, lazy loading, or pagination lists.
+type: core
+library: denwa-web-shared
+library_version: "1.0.51"
+sources:
+  - "src/client/ui/infinity-list.tsx"
+---
+
+# denwa-web-shared — Implement infinite lists
+
+## Setup
+
+```tsx
+import { InfinityList } from 'denwa-web-shared/client';
+
+<InfinityList 
+  isNext={hasNextPage} 
+  onIntersection={fetchNextPage} 
+  intersectionElement={() => <div>Loading...</div>}
+>
+  {items.map(item => <Item key={item.id} {...item} />)}
+</InfinityList>
+```
+
+## Core Patterns
+
+### Infinite scroll list
+
+```tsx
+import { InfinityList } from 'denwa-web-shared/client';
+import { Spinner } from '@/components/spinner';
+
+export const Feed = ({ items, hasNext, loadMore }) => {
+  return (
+    <InfinityList
+      isNext={hasNext}
+      onIntersection={loadMore}
+      intersectionElement={() => <Spinner />}
+      intersectionElementClassName="py-4"
+    >
+      {items.map(item => (
+        <FeedItem key={item.id} data={item} />
+      ))}
+    </InfinityList>
+  );
+};
+```
+
+## Common Mistakes
+
+### MEDIUM Incorrect handling of intersection triggers
+
+Wrong:
+
+```tsx
+// Manual intersection observer implementation
+```
+
+Correct:
+
+```tsx
+import { InfinityList } from 'denwa-web-shared/client';
+
+<InfinityList isNext={hasNextPage} onIntersection={fetchNextPage} intersectionElement={() => <Spinner />}>
+  {items}
+</InfinityList>
+```
+
+Agents might manually write intersection observers instead of using InfinityList.
+
+Source: maintainer interview

package/skills/render-picture/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: render-picture
+description: >
+  Use the BasePicture component to render images instead of Next.js Image.
+  Load when generating images, using getImageData, IPreparedServerImage, or IPreparedServerImageWithAlt.
+type: core
+library: denwa-web-shared
+library_version: "1.0.51"
+sources:
+  - "src/server/ui/image.tsx"
+  - "src/server/lib/utils.ts"
+---
+
+# denwa-web-shared — Render responsive images
+
+## Setup
+
+```tsx
+import { BasePicture } from 'denwa-web-shared/server';
+import { getImageData } from 'denwa-web-shared/server';
+
+// Assuming serverImage is of type IPreparedServerImage
+const pictureData = getImageData(serverImage);
+
+<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />
+```
+
+## Core Patterns
+
+### Rendering a picture using server data
+
+```tsx
+import { BasePicture, getImageData } from 'denwa-web-shared/server';
+import type { IPreparedServerImage } from 'denwa-web-shared/server';
+
+export const MyComponent = ({ image }: { image: IPreparedServerImage }) => {
+  const data = getImageData(image);
+  
+  return <BasePicture data={data} alt="Responsive image" type={image.type} />;
+};
+```
+
+## Common Mistakes
+
+### CRITICAL Using next/image instead of Picture
+
+Wrong:
+
+```tsx
+import Image from 'next/image';
+
+<Image src={src} alt={alt} />
+```
+
+Correct:
+
+```tsx
+import { BasePicture, getImageData } from 'denwa-web-shared/server';
+
+const pictureData = getImageData(serverImage);
+<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />
+```
+
+Agents default to next/image instead of using the custom BasePicture component.
+
+Source: maintainer interview
+
+### HIGH Not using getImageData for Picture path
+
+Wrong:
+
+```tsx
+import { BasePicture } from 'denwa-web-shared/server';
+
+<BasePicture data={{ image1x: item.path }} alt="alt text" type="image/jpeg" />
+```
+
+Correct:
+
+```tsx
+import { BasePicture, getImageData } from 'denwa-web-shared/server';
+
+const pictureData = getImageData(item);
+<BasePicture data={pictureData} alt="alt text" type={item.type} />
+```
+
+Agents try to construct paths manually instead of using the getImageData helper to generate PictureData.
+
+Source: maintainer interview

package/skills/shared-constants/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: shared-constants
+description: >
+  Use shared library constants like TIME and THEME.
+  Load when hardcoding time durations, milliseconds, breakpoints, or offsets.
+type: core
+library: denwa-web-shared
+library_version: "1.0.51"
+sources:
+  - "src/server/constants/index.ts"
+---
+
+# denwa-web-shared — Use library constants
+
+## Setup
+
+```tsx
+import { TIME, THEME } from 'denwa-web-shared/server';
+
+const timeout = TIME.milliseconds.seconds5;
+const offset = THEME.OFFSET[4];
+```
+
+## Core Patterns
+
+### Using TIME constants for durations
+
+```tsx
+import { TIME } from 'denwa-web-shared/server';
+
+export const fetchWithTimeout = async (url: string) => {
+  const controller = new AbortController();
+  setTimeout(() => controller.abort(), TIME.milliseconds.seconds5);
+  
+  return fetch(url, { signal: controller.signal });
+};
+```
+
+## Common Mistakes
+
+### MEDIUM Hardcoding time values
+
+Wrong:
+
+```tsx
+setTimeout(fn, 1000);
+```
+
+Correct:
+
+```tsx
+import { TIME } from 'denwa-web-shared/server';
+
+setTimeout(fn, TIME.milliseconds.seconds1);
+```
+
+Agents hardcode milliseconds values instead of using the TIME constant.
+
+Source: maintainer interview

package/skills/viewport-hooks/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: viewport-hooks
+description: >
+  Use the shared viewport hooks rather than react-use.
+  Load when writing responsive behavior, using useMedia, useLaptopBigViewPort, useMobileViewPort.
+type: core
+library: denwa-web-shared
+library_version: "1.0.51"
+sources:
+  - "src/client/hooks/use-view-port.ts"
+---
+
+# denwa-web-shared — Use custom viewport hooks
+
+## Setup
+
+```tsx
+import { useMobileViewPort } from 'denwa-web-shared/client';
+
+const { isMobileMaxWidth, isMobileMinWidth } = useMobileViewPort();
+```
+
+## Core Patterns
+
+### Conditional rendering based on viewport
+
+```tsx
+import { useMobileViewPort, useLaptopViewPort } from 'denwa-web-shared/client';
+
+export const ResponsiveLayout = () => {
+  const { isMobileMaxWidth } = useMobileViewPort();
+  const { isLaptopMinWidth } = useLaptopViewPort();
+
+  if (isMobileMaxWidth) return <MobileMenu />;
+  if (isLaptopMinWidth) return <DesktopMenu />;
+  
+  return <DefaultMenu />;
+};
+```
+
+## Common Mistakes
+
+### HIGH Importing useMedia directly
+
+Wrong:
+
+```tsx
+import { useMedia } from 'react-use';
+
+const isMobile = useMedia('(max-width: 450px)');
+```
+
+Correct:
+
+```tsx
+import { useMobileViewPort } from 'denwa-web-shared/client';
+
+const { isMobileMaxWidth } = useMobileViewPort();
+```
+
+Agents import useMedia from react-use and manually provide viewport breakpoints instead of using the custom hooks.
+
+Source: maintainer interview

package/skills/yandex-feed/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: yandex-feed
+description: >
+  Generate XML feeds for Yandex using generateYandexFeedXML.
+  Load when creating RSS feeds or Yandex XML exports.
+type: core
+library: denwa-web-shared
+library_version: "1.0.51"
+sources:
+  - "src/server/lib/utils.ts"
+---
+
+# denwa-web-shared — Generate Yandex Feed XML
+
+## Setup
+
+```tsx
+import { generateYandexFeedXML } from 'denwa-web-shared/server';
+
+const feedXml = generateYandexFeedXML({
+  // feed configuration
+});
+```
+
+## Core Patterns
+
+### Generating feed XML
+
+```tsx
+import { generateYandexFeedXML } from 'denwa-web-shared/server';
+
+export async function GET() {
+  const data = await getFeedData();
+  const xml = generateYandexFeedXML(data);
+  
+  return new Response(xml, {
+    headers: { 'Content-Type': 'application/xml' }
+  });
+}
+```
+
+## Common Mistakes
+
+### HIGH Manual XML generation for Yandex feeds
+
+Wrong:
+
+```tsx
+const xml = `<yml_catalog><shop>...</shop></yml_catalog>`;
+```
+
+Correct:
+
+```tsx
+import { generateYandexFeedXML } from 'denwa-web-shared/server';
+
+const xml = generateYandexFeedXML(feedData);
+```
+
+Agents write their own XML builders instead of using the library helper.
+
+Source: maintainer interview