diff --git a/apps/docs/content/docs/marquee.mdx b/apps/docs/content/docs/marquee.mdx new file mode 100644 index 00000000..25152746 --- /dev/null +++ b/apps/docs/content/docs/marquee.mdx @@ -0,0 +1,179 @@ +--- +title: Marquee +description: Marquees are a great way to show a list of items in a horizontal scrolling motion. +icon: GalleryHorizontalEnd +--- + +import { AutoTypeTable } from 'fumadocs-typescript/ui'; + + + + ( +
+ + + + + {new Array(10).fill(null).map((_, index) => ( + + {\`Image + + ))} + + +
+); + +export default Example;`} /> + +## Installation + + + +## Features + +- Drag and drop items between groups +- Customize the item contents + +## Examples + +### Without fading + + ( +
+ + + {new Array(10).fill(null).map((_, index) => ( + + {\`Image + + ))} + + +
+); + +export default Example;`} /> + +### Without pre-defined options + + ( +
+ + + + + {new Array(10).fill(null).map((_, index) => ( + + {\`Image + + ))} + + +
+); + +export default Example;`} /> + +### Custom spacing + + ( +
+ + + + + {new Array(10).fill(null).map((_, index) => ( + + {\`Image + + ))} + + +
+); + +export default Example;`} /> + +## Props + +The marquee component is made up of the following subcomponents: + +### Marquee + +The `Marquee` component is used to display the marquee. + + + +### MarqueeContent + +The `MarqueeContent` component is used to display the content of the marquee. + + + +### MarqueeFade + +The `MarqueeFade` component is used to display the fade effect on the marquee. + + + +### MarqueeItem + +The `MarqueeItem` component is used to display an item. + + diff --git a/apps/docs/package.json b/apps/docs/package.json index 085caf06..20380175 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -21,6 +21,7 @@ "@repo/gantt": "workspace:*", "@repo/kanban": "workspace:*", "@repo/list": "workspace:*", + "@repo/marquee": "workspace:*", "@repo/shadcn-ui": "workspace:*", "@repo/table": "workspace:*", "@repo/tailwind-config": "workspace:*", diff --git a/apps/docs/public/registry/marquee.json b/apps/docs/public/registry/marquee.json new file mode 100644 index 00000000..edf8312c --- /dev/null +++ b/apps/docs/public/registry/marquee.json @@ -0,0 +1,17 @@ +{ + "name": "marquee", + "type": "registry:ui", + "registryDependencies": [], + "dependencies": [ + "react-fast-marquee" + ], + "devDependencies": [], + "files": [ + { + "type": "registry:ui", + "path": "index.tsx", + "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport type { HTMLAttributes } from 'react';\nimport FastMarquee from 'react-fast-marquee';\nimport type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';\n\nexport type MarqueeProps = HTMLAttributes;\n\nexport const Marquee = ({ className, ...props }: MarqueeProps) => (\n
\n);\n\nexport type MarqueeContentProps = FastMarqueeProps;\n\nexport const MarqueeContent = ({\n loop = 0,\n autoFill = true,\n pauseOnHover = true,\n ...props\n}: MarqueeContentProps) => (\n \n);\n\nexport type MarqueeFadeProps = HTMLAttributes & {\n side: 'left' | 'right';\n};\n\nexport const MarqueeFade = ({\n className,\n side,\n ...props\n}: MarqueeFadeProps) => (\n \n);\n\nexport type MarqueeItemProps = HTMLAttributes;\n\nexport const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (\n \n);\n", + "target": "ui/index.tsx" + } + ] +} \ No newline at end of file diff --git a/packages/marquee/index.tsx b/packages/marquee/index.tsx new file mode 100644 index 00000000..eae902e0 --- /dev/null +++ b/packages/marquee/index.tsx @@ -0,0 +1,56 @@ +'use client'; + +import { cn } from '@/lib/utils'; +import type { HTMLAttributes } from 'react'; +import FastMarquee from 'react-fast-marquee'; +import type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'; + +export type MarqueeProps = HTMLAttributes; + +export const Marquee = ({ className, ...props }: MarqueeProps) => ( +
+); + +export type MarqueeContentProps = FastMarqueeProps; + +export const MarqueeContent = ({ + loop = 0, + autoFill = true, + pauseOnHover = true, + ...props +}: MarqueeContentProps) => ( + +); + +export type MarqueeFadeProps = HTMLAttributes & { + side: 'left' | 'right'; +}; + +export const MarqueeFade = ({ + className, + side, + ...props +}: MarqueeFadeProps) => ( +
+); + +export type MarqueeItemProps = HTMLAttributes; + +export const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => ( +
+); diff --git a/packages/marquee/package.json b/packages/marquee/package.json new file mode 100644 index 00000000..3d1f0ee5 --- /dev/null +++ b/packages/marquee/package.json @@ -0,0 +1,17 @@ +{ + "name": "@repo/marquee", + "version": "0.0.0", + "private": true, + "dependencies": { + "@repo/shadcn-ui": "workspace:*", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-fast-marquee": "^1.6.5" + }, + "devDependencies": { + "@repo/typescript-config": "workspace:*", + "@types/react": "^19", + "@types/react-dom": "^19", + "typescript": "^5" + } +} diff --git a/packages/marquee/registry.ts b/packages/marquee/registry.ts new file mode 100644 index 00000000..0f208aa9 --- /dev/null +++ b/packages/marquee/registry.ts @@ -0,0 +1,25 @@ +import type { Registry } from '@repo/shadcn-ui'; + +/* + * As shadcn/ui custom registry components are undocumented, here are some notes: + * + * - `registryDependencies` is an array of shadcn/ui component names that this component depends on. + * - `dependencies` is an array of npm package names that this component depends on. + * - `devDependencies` is an array of npm package names that this component depends on. + */ + +export const ui: Registry = [ + { + name: 'marquee', + type: 'registry:ui', + registryDependencies: [], + dependencies: ['react-fast-marquee'], + devDependencies: [], + files: [ + { + path: 'index.tsx', + type: 'registry:ui', + }, + ], + }, +]; diff --git a/packages/marquee/tsconfig.json b/packages/marquee/tsconfig.json new file mode 100644 index 00000000..fb677b46 --- /dev/null +++ b/packages/marquee/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "@repo/typescript-config/nextjs.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@repo/*": ["../*"], + "@/components/*": ["../shadcn-ui/components/*"], + "@/lib/*": ["../shadcn-ui/lib/*"] + } + }, + "include": ["**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cbc83a4e..3a4c50c7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,6 +72,9 @@ importers: '@repo/list': specifier: workspace:* version: link:../../packages/list + '@repo/marquee': + specifier: workspace:* + version: link:../../packages/marquee '@repo/shadcn-ui': specifier: workspace:* version: link:../../packages/shadcn-ui @@ -394,6 +397,34 @@ importers: specifier: ^5 version: 5.7.3 + packages/marquee: + dependencies: + '@repo/shadcn-ui': + specifier: workspace:* + version: link:../shadcn-ui + react: + specifier: ^19.0.0 + version: 19.0.0 + react-dom: + specifier: ^19.0.0 + version: 19.0.0(react@19.0.0) + react-fast-marquee: + specifier: ^1.6.5 + version: 1.6.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + devDependencies: + '@repo/typescript-config': + specifier: workspace:* + version: link:../typescript-config + '@types/react': + specifier: ^19 + version: 19.0.7 + '@types/react-dom': + specifier: ^19 + version: 19.0.3(@types/react@19.0.7) + typescript: + specifier: ^5 + version: 5.7.3 + packages/shadcn-ui: dependencies: '@hookform/resolvers': @@ -4635,6 +4666,12 @@ packages: peerDependencies: react: ^19.0.0 + react-fast-marquee@1.6.5: + resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==} + peerDependencies: + react: '>= 16.8.0 || ^18.0.0' + react-dom: '>= 16.8.0 || ^18.0.0' + react-hook-form@7.54.2: resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==} engines: {node: '>=18.0.0'} @@ -10136,6 +10173,11 @@ snapshots: react: 19.0.0 scheduler: 0.25.0 + react-fast-marquee@1.6.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0): + dependencies: + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + react-hook-form@7.54.2(react@19.0.0): dependencies: react: 19.0.0