From 22057b052cc97c8abf39b0b2f5306efb254b3e5b Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Thu, 17 Apr 2025 09:17:41 +0300 Subject: [PATCH] feat: Add Card --- apps/showcase/app/(page)/card/page.tsx | 16 ++++++ .../doc/card/features/advanced/demo.tsx | 31 ++++++++++ .../doc/card/features/advanced/doc.tsx | 18 ++++++ .../doc/card/features/advanced/source.auto.ts | 7 +++ .../showcase/doc/card/features/basic/demo.tsx | 21 +++++++ apps/showcase/doc/card/features/basic/doc.tsx | 18 ++++++ .../doc/card/features/basic/source.auto.ts | 7 +++ .../showcase/doc/card/features/import/doc.tsx | 5 ++ apps/showcase/doc/card/features/index.ts | 24 ++++++++ packages/headless/src/card/useCard.props.ts | 14 ++--- packages/headless/src/card/useCard.ts | 4 +- packages/primereact/src/card/Card.props.ts | 7 +++ packages/primereact/src/card/Card.test.ts | 0 packages/primereact/src/card/Card.tsx | 57 +++++++++++++++++++ .../src/card/body/CardBody.props.ts | 5 ++ .../primereact/src/card/body/CardBody.tsx | 27 +++++++++ packages/primereact/src/card/body/index.ts | 2 + .../src/card/caption/CardCaption.props.ts | 5 ++ .../src/card/caption/CardCaption.tsx | 27 +++++++++ packages/primereact/src/card/caption/index.ts | 2 + .../src/card/content/CardContent.props.ts | 5 ++ .../src/card/content/CardContent.tsx | 27 +++++++++ packages/primereact/src/card/content/index.ts | 2 + .../src/card/footer/CardFooter.props.ts | 5 ++ .../primereact/src/card/footer/CardFooter.tsx | 27 +++++++++ packages/primereact/src/card/footer/index.ts | 2 + .../src/card/header/CardHeader.props.ts | 5 ++ .../primereact/src/card/header/CardHeader.tsx | 27 +++++++++ packages/primereact/src/card/header/index.ts | 2 + packages/primereact/src/card/index.ts | 2 + .../src/card/subtitle/CardSubtitle.props.ts | 5 ++ .../src/card/subtitle/CardSubtitle.tsx | 27 +++++++++ .../primereact/src/card/subtitle/index.ts | 2 + .../src/card/title/CardTitle.props.ts | 5 ++ .../primereact/src/card/title/CardTitle.tsx | 27 +++++++++ packages/primereact/src/card/title/index.ts | 2 + packages/styles/src/card/Card.style.ts | 19 +++++++ packages/styles/src/card/index.ts | 1 + packages/types/src/shared/card/Card.types.ts | 12 ++++ .../types/src/shared/card/CardBody.types.ts | 11 ++++ .../src/shared/card/CardCaption.types.ts | 11 ++++ .../src/shared/card/CardContent.types.ts | 11 ++++ .../types/src/shared/card/CardFooter.types.ts | 11 ++++ .../types/src/shared/card/CardHeader.types.ts | 11 ++++ .../src/shared/card/CardSubtitle.types.ts | 11 ++++ .../types/src/shared/card/CardTitle.types.ts | 11 ++++ packages/types/src/shared/card/index.ts | 9 +++ .../types/src/shared/card/useCard.types.ts | 9 +++ 48 files changed, 585 insertions(+), 11 deletions(-) create mode 100644 apps/showcase/app/(page)/card/page.tsx create mode 100644 apps/showcase/doc/card/features/advanced/demo.tsx create mode 100644 apps/showcase/doc/card/features/advanced/doc.tsx create mode 100644 apps/showcase/doc/card/features/advanced/source.auto.ts create mode 100644 apps/showcase/doc/card/features/basic/demo.tsx create mode 100644 apps/showcase/doc/card/features/basic/doc.tsx create mode 100644 apps/showcase/doc/card/features/basic/source.auto.ts create mode 100644 apps/showcase/doc/card/features/import/doc.tsx create mode 100644 apps/showcase/doc/card/features/index.ts create mode 100644 packages/primereact/src/card/Card.props.ts create mode 100644 packages/primereact/src/card/Card.test.ts create mode 100644 packages/primereact/src/card/Card.tsx create mode 100644 packages/primereact/src/card/body/CardBody.props.ts create mode 100644 packages/primereact/src/card/body/CardBody.tsx create mode 100644 packages/primereact/src/card/body/index.ts create mode 100644 packages/primereact/src/card/caption/CardCaption.props.ts create mode 100644 packages/primereact/src/card/caption/CardCaption.tsx create mode 100644 packages/primereact/src/card/caption/index.ts create mode 100644 packages/primereact/src/card/content/CardContent.props.ts create mode 100644 packages/primereact/src/card/content/CardContent.tsx create mode 100644 packages/primereact/src/card/content/index.ts create mode 100644 packages/primereact/src/card/footer/CardFooter.props.ts create mode 100644 packages/primereact/src/card/footer/CardFooter.tsx create mode 100644 packages/primereact/src/card/footer/index.ts create mode 100644 packages/primereact/src/card/header/CardHeader.props.ts create mode 100644 packages/primereact/src/card/header/CardHeader.tsx create mode 100644 packages/primereact/src/card/header/index.ts create mode 100644 packages/primereact/src/card/index.ts create mode 100644 packages/primereact/src/card/subtitle/CardSubtitle.props.ts create mode 100644 packages/primereact/src/card/subtitle/CardSubtitle.tsx create mode 100644 packages/primereact/src/card/subtitle/index.ts create mode 100644 packages/primereact/src/card/title/CardTitle.props.ts create mode 100644 packages/primereact/src/card/title/CardTitle.tsx create mode 100644 packages/primereact/src/card/title/index.ts create mode 100644 packages/styles/src/card/Card.style.ts create mode 100644 packages/styles/src/card/index.ts create mode 100644 packages/types/src/shared/card/Card.types.ts create mode 100644 packages/types/src/shared/card/CardBody.types.ts create mode 100644 packages/types/src/shared/card/CardCaption.types.ts create mode 100644 packages/types/src/shared/card/CardContent.types.ts create mode 100644 packages/types/src/shared/card/CardFooter.types.ts create mode 100644 packages/types/src/shared/card/CardHeader.types.ts create mode 100644 packages/types/src/shared/card/CardSubtitle.types.ts create mode 100644 packages/types/src/shared/card/CardTitle.types.ts create mode 100644 packages/types/src/shared/card/index.ts create mode 100644 packages/types/src/shared/card/useCard.types.ts diff --git a/apps/showcase/app/(page)/card/page.tsx b/apps/showcase/app/(page)/card/page.tsx new file mode 100644 index 0000000000..cea603387b --- /dev/null +++ b/apps/showcase/app/(page)/card/page.tsx @@ -0,0 +1,16 @@ +import DocComponent from '@/components/doc/DocComponent'; +import features from '@/doc/card/features'; +import { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'React Card Component', + description: 'Card is a flexible container component.' +}; + +export default function CardPage() { + const docs = { + features + }; + + return ; +} diff --git a/apps/showcase/doc/card/features/advanced/demo.tsx b/apps/showcase/doc/card/features/advanced/demo.tsx new file mode 100644 index 0000000000..8225c70309 --- /dev/null +++ b/apps/showcase/doc/card/features/advanced/demo.tsx @@ -0,0 +1,31 @@ +import { Card } from 'primereact/card'; + +export default function BasicDemo() { + return ( +
+ + + user header + + + + Advanced Card + Card subtitle + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate + neque quas! +

+ + +
+ {/*
+ + + +
+ ); +} diff --git a/apps/showcase/doc/card/features/advanced/doc.tsx b/apps/showcase/doc/card/features/advanced/doc.tsx new file mode 100644 index 0000000000..830e7df445 --- /dev/null +++ b/apps/showcase/doc/card/features/advanced/doc.tsx @@ -0,0 +1,18 @@ +import { CodeViewer } from '@primereact/code-viewer'; +import AdvancedDemo from './demo'; +import { source } from './source.auto'; + +export default function AdvancedDoc() { + return ( +
+

Advanced

+

+ Card provides Card.Header, Card.Title, Card.Subtitle, Card.Content and Card.Footer as the named components to place content. +

+ + +
+ +
+ ); +} diff --git a/apps/showcase/doc/card/features/advanced/source.auto.ts b/apps/showcase/doc/card/features/advanced/source.auto.ts new file mode 100644 index 0000000000..c73f83b22d --- /dev/null +++ b/apps/showcase/doc/card/features/advanced/source.auto.ts @@ -0,0 +1,7 @@ +/**************************************************************************** +****************** PrimeReact Demo Source (Auto-Generated) ****************** +*****************************************************************************/ + +export const source = { + "code": "import { Card } from 'primereact/card';\n\nexport default function BasicDemo() {\n return (\n
\n \n \n \"user\n \n \n \n Advanced Card\n Card subtitle\n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate\n neque quas!\n

\n \n \n
\n {/*
\n \n \n \n
\n );\n}\n" +}; diff --git a/apps/showcase/doc/card/features/basic/demo.tsx b/apps/showcase/doc/card/features/basic/demo.tsx new file mode 100644 index 0000000000..c24bd96c4a --- /dev/null +++ b/apps/showcase/doc/card/features/basic/demo.tsx @@ -0,0 +1,21 @@ +import { Card } from 'primereact/card'; + +export default function BasicDemo() { + return ( +
+ + + + Simple Card + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate + neque quas! +

+ + + +
+ ); +} diff --git a/apps/showcase/doc/card/features/basic/doc.tsx b/apps/showcase/doc/card/features/basic/doc.tsx new file mode 100644 index 0000000000..8178f44b1a --- /dev/null +++ b/apps/showcase/doc/card/features/basic/doc.tsx @@ -0,0 +1,18 @@ +import { CodeViewer } from '@primereact/code-viewer'; +import BasicDemo from './demo'; +import { source } from './source.auto'; + +export default function BasicDoc() { + return ( +
+

Basic

+

+ A simple Card is created with a Card.Title along with the content as children. +

+ + +
+ +
+ ); +} diff --git a/apps/showcase/doc/card/features/basic/source.auto.ts b/apps/showcase/doc/card/features/basic/source.auto.ts new file mode 100644 index 0000000000..7f0fd80ac4 --- /dev/null +++ b/apps/showcase/doc/card/features/basic/source.auto.ts @@ -0,0 +1,7 @@ +/**************************************************************************** +****************** PrimeReact Demo Source (Auto-Generated) ****************** +*****************************************************************************/ + +export const source = { + "code": "import { Card } from 'primereact/card';\n\nexport default function BasicDemo() {\n return (\n
\n \n \n \n Simple Card\n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate\n neque quas!\n

\n \n \n \n
\n );\n}\n" +}; diff --git a/apps/showcase/doc/card/features/import/doc.tsx b/apps/showcase/doc/card/features/import/doc.tsx new file mode 100644 index 0000000000..d755212dea --- /dev/null +++ b/apps/showcase/doc/card/features/import/doc.tsx @@ -0,0 +1,5 @@ +import { CodeViewer } from '@primereact/code-viewer'; + +export default function ImportDoc() { + return ; +} diff --git a/apps/showcase/doc/card/features/index.ts b/apps/showcase/doc/card/features/index.ts new file mode 100644 index 0000000000..454e62ef69 --- /dev/null +++ b/apps/showcase/doc/card/features/index.ts @@ -0,0 +1,24 @@ +'use client'; +import AdvancedDoc from './advanced/doc'; +import BasicDoc from './basic/doc'; +import ImportDoc from './import/doc'; + +const features = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'advanced', + label: 'Advanced', + component: AdvancedDoc + } +]; + +export default features; diff --git a/packages/headless/src/card/useCard.props.ts b/packages/headless/src/card/useCard.props.ts index f0a129c322..bba4f90bbc 100644 --- a/packages/headless/src/card/useCard.props.ts +++ b/packages/headless/src/card/useCard.props.ts @@ -1,11 +1,5 @@ -import type { usePanelProps } from './useCard.types'; +import type { useCardProps } from '@primereact/types/shared/card'; -export const defaultProps = { - __TYPE: 'Card', - collapsed: undefined, - toggleable: undefined, - // events - onCollapse: undefined, - onExpand: undefined, - onToggle: undefined -} as Partial; +export const defaultProps: useCardProps = { + __TYPE: 'useCard' +}; diff --git a/packages/headless/src/card/useCard.ts b/packages/headless/src/card/useCard.ts index 9ec9c9326b..55496bc6b8 100644 --- a/packages/headless/src/card/useCard.ts +++ b/packages/headless/src/card/useCard.ts @@ -1,4 +1,6 @@ import { withHeadless } from '@primereact/core/headless'; import { defaultProps } from './useCard.props'; -export const useCard = withHeadless(({ props }) => {}, defaultProps); +export const useCard = withHeadless({ + defaultProps +}); diff --git a/packages/primereact/src/card/Card.props.ts b/packages/primereact/src/card/Card.props.ts new file mode 100644 index 0000000000..da77eaa2e7 --- /dev/null +++ b/packages/primereact/src/card/Card.props.ts @@ -0,0 +1,7 @@ +import * as HeadlessCard from '@primereact/headless/card'; +import type { CardProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardProps = { + ...HeadlessCard.defaultProps, + __TYPE: 'Card' +}; diff --git a/packages/primereact/src/card/Card.test.ts b/packages/primereact/src/card/Card.test.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/primereact/src/card/Card.tsx b/packages/primereact/src/card/Card.tsx new file mode 100644 index 0000000000..0acdef54eb --- /dev/null +++ b/packages/primereact/src/card/Card.tsx @@ -0,0 +1,57 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { useCard } from '@primereact/headless/card'; +import { styles } from '@primereact/styles/card'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { CardBody } from './body'; +import { CardCaption } from './caption'; +import { defaultProps } from './Card.props'; +import { CardContent } from './content'; +import { CardFooter } from './footer'; +import { CardHeader } from './header'; +import { CardSubtitle } from './subtitle'; +import { CardTitle } from './title'; + +export const Card = withComponent({ + defaultProps, + styles, + setup: (instance) => { + const card = useCard(instance.inProps); + + return card; + }, + render: (instance) => { + const { + id, + props, + ptmi, + cx, + // element refs + elementRef + } = instance; + + const rootProps = mergeProps( + { + id, + className: cx('root') + }, + ptmi('root') + ); + + return ( + + {props.children} + + ); + }, + components: { + Body: CardBody, + Caption: CardCaption, + Content: CardContent, + Footer: CardFooter, + Header: CardHeader, + Subtitle: CardSubtitle, + Title: CardTitle + } +}); diff --git a/packages/primereact/src/card/body/CardBody.props.ts b/packages/primereact/src/card/body/CardBody.props.ts new file mode 100644 index 0000000000..08eed5516f --- /dev/null +++ b/packages/primereact/src/card/body/CardBody.props.ts @@ -0,0 +1,5 @@ +import type { CardBodyProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardBodyProps = { + __TYPE: 'CardBody' +}; diff --git a/packages/primereact/src/card/body/CardBody.tsx b/packages/primereact/src/card/body/CardBody.tsx new file mode 100644 index 0000000000..71beca4bd9 --- /dev/null +++ b/packages/primereact/src/card/body/CardBody.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardBody.props'; + +export const CardBody = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const bodyProps = mergeProps( + { + className: card?.cx('body') + }, + card?.ptm('body'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/body/index.ts b/packages/primereact/src/card/body/index.ts new file mode 100644 index 0000000000..c66d3eeeb2 --- /dev/null +++ b/packages/primereact/src/card/body/index.ts @@ -0,0 +1,2 @@ +export * from './CardBody'; +export * from './CardBody.props'; diff --git a/packages/primereact/src/card/caption/CardCaption.props.ts b/packages/primereact/src/card/caption/CardCaption.props.ts new file mode 100644 index 0000000000..ff06a059a6 --- /dev/null +++ b/packages/primereact/src/card/caption/CardCaption.props.ts @@ -0,0 +1,5 @@ +import type { CardCaptionProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardCaptionProps = { + __TYPE: 'CardCaption' +}; diff --git a/packages/primereact/src/card/caption/CardCaption.tsx b/packages/primereact/src/card/caption/CardCaption.tsx new file mode 100644 index 0000000000..c2e417d67c --- /dev/null +++ b/packages/primereact/src/card/caption/CardCaption.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardCaption.props'; + +export const CardCaption = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const captionProps = mergeProps( + { + className: card?.cx('caption') + }, + card?.ptm('caption'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/caption/index.ts b/packages/primereact/src/card/caption/index.ts new file mode 100644 index 0000000000..24434f621f --- /dev/null +++ b/packages/primereact/src/card/caption/index.ts @@ -0,0 +1,2 @@ +export * from './CardCaption'; +export * from './CardCaption.props'; diff --git a/packages/primereact/src/card/content/CardContent.props.ts b/packages/primereact/src/card/content/CardContent.props.ts new file mode 100644 index 0000000000..a098a7fe8b --- /dev/null +++ b/packages/primereact/src/card/content/CardContent.props.ts @@ -0,0 +1,5 @@ +import type { CardContentProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardContentProps = { + __TYPE: 'CardContent' +}; diff --git a/packages/primereact/src/card/content/CardContent.tsx b/packages/primereact/src/card/content/CardContent.tsx new file mode 100644 index 0000000000..de9b8393ed --- /dev/null +++ b/packages/primereact/src/card/content/CardContent.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardContent.props'; + +export const CardContent = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const contentProps = mergeProps( + { + className: card?.cx('content') + }, + card?.ptm('content'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/content/index.ts b/packages/primereact/src/card/content/index.ts new file mode 100644 index 0000000000..744ae3fb8f --- /dev/null +++ b/packages/primereact/src/card/content/index.ts @@ -0,0 +1,2 @@ +export * from './CardContent'; +export * from './CardContent.props'; diff --git a/packages/primereact/src/card/footer/CardFooter.props.ts b/packages/primereact/src/card/footer/CardFooter.props.ts new file mode 100644 index 0000000000..841110d23e --- /dev/null +++ b/packages/primereact/src/card/footer/CardFooter.props.ts @@ -0,0 +1,5 @@ +import type { CardFooterProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardFooterProps = { + __TYPE: 'CardFooter' +}; diff --git a/packages/primereact/src/card/footer/CardFooter.tsx b/packages/primereact/src/card/footer/CardFooter.tsx new file mode 100644 index 0000000000..2172a86277 --- /dev/null +++ b/packages/primereact/src/card/footer/CardFooter.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardFooter.props'; + +export const CardFooter = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const footerProps = mergeProps( + { + className: card?.cx('footer') + }, + card?.ptm('footer'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/footer/index.ts b/packages/primereact/src/card/footer/index.ts new file mode 100644 index 0000000000..3295000768 --- /dev/null +++ b/packages/primereact/src/card/footer/index.ts @@ -0,0 +1,2 @@ +export * from './CardFooter'; +export * from './CardFooter.props'; diff --git a/packages/primereact/src/card/header/CardHeader.props.ts b/packages/primereact/src/card/header/CardHeader.props.ts new file mode 100644 index 0000000000..369265a7cb --- /dev/null +++ b/packages/primereact/src/card/header/CardHeader.props.ts @@ -0,0 +1,5 @@ +import type { CardHeaderProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardHeaderProps = { + __TYPE: 'CardHeader' +}; diff --git a/packages/primereact/src/card/header/CardHeader.tsx b/packages/primereact/src/card/header/CardHeader.tsx new file mode 100644 index 0000000000..ae1f609042 --- /dev/null +++ b/packages/primereact/src/card/header/CardHeader.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardHeader.props'; + +export const CardHeader = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const headerProps = mergeProps( + { + className: card?.cx('header') + }, + card?.ptm('header'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/header/index.ts b/packages/primereact/src/card/header/index.ts new file mode 100644 index 0000000000..b854cbe580 --- /dev/null +++ b/packages/primereact/src/card/header/index.ts @@ -0,0 +1,2 @@ +export * from './CardHeader'; +export * from './CardHeader.props'; diff --git a/packages/primereact/src/card/index.ts b/packages/primereact/src/card/index.ts new file mode 100644 index 0000000000..a1e9aee372 --- /dev/null +++ b/packages/primereact/src/card/index.ts @@ -0,0 +1,2 @@ +export * from './Card'; +export * from './Card.props'; diff --git a/packages/primereact/src/card/subtitle/CardSubtitle.props.ts b/packages/primereact/src/card/subtitle/CardSubtitle.props.ts new file mode 100644 index 0000000000..6521c79c43 --- /dev/null +++ b/packages/primereact/src/card/subtitle/CardSubtitle.props.ts @@ -0,0 +1,5 @@ +import type { CardSubtitleProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardSubtitleProps = { + __TYPE: 'CardSubtitle' +}; diff --git a/packages/primereact/src/card/subtitle/CardSubtitle.tsx b/packages/primereact/src/card/subtitle/CardSubtitle.tsx new file mode 100644 index 0000000000..5efbc9d4f4 --- /dev/null +++ b/packages/primereact/src/card/subtitle/CardSubtitle.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardSubtitle.props'; + +export const CardSubtitle = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const subtitleProps = mergeProps( + { + className: card?.cx('subtitle') + }, + card?.ptm('subtitle'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/subtitle/index.ts b/packages/primereact/src/card/subtitle/index.ts new file mode 100644 index 0000000000..47b519c8fd --- /dev/null +++ b/packages/primereact/src/card/subtitle/index.ts @@ -0,0 +1,2 @@ +export * from './CardSubtitle'; +export * from './CardSubtitle.props'; diff --git a/packages/primereact/src/card/title/CardTitle.props.ts b/packages/primereact/src/card/title/CardTitle.props.ts new file mode 100644 index 0000000000..23a954aeae --- /dev/null +++ b/packages/primereact/src/card/title/CardTitle.props.ts @@ -0,0 +1,5 @@ +import type { CardTitleProps } from '@primereact/types/shared/card'; + +export const defaultProps: CardTitleProps = { + __TYPE: 'CardTitle' +}; diff --git a/packages/primereact/src/card/title/CardTitle.tsx b/packages/primereact/src/card/title/CardTitle.tsx new file mode 100644 index 0000000000..2357b5d54c --- /dev/null +++ b/packages/primereact/src/card/title/CardTitle.tsx @@ -0,0 +1,27 @@ +'use client'; +import { Component, withComponent } from '@primereact/core/component'; +import { mergeProps } from '@primeuix/utils'; +import * as React from 'react'; +import { defaultProps } from './CardTitle.props'; + +export const CardTitle = withComponent({ + defaultProps, + render: (instance) => { + const { props, getParent, ptmi } = instance; + const card = getParent('Card'); + + const titleProps = mergeProps( + { + className: card?.cx('title') + }, + card?.ptm('title'), + ptmi('root') + ); + + return ( + + {props.children} + + ); + } +}); diff --git a/packages/primereact/src/card/title/index.ts b/packages/primereact/src/card/title/index.ts new file mode 100644 index 0000000000..6af27b61c7 --- /dev/null +++ b/packages/primereact/src/card/title/index.ts @@ -0,0 +1,2 @@ +export * from './CardTitle'; +export * from './CardTitle.props'; diff --git a/packages/styles/src/card/Card.style.ts b/packages/styles/src/card/Card.style.ts new file mode 100644 index 0000000000..a510f30761 --- /dev/null +++ b/packages/styles/src/card/Card.style.ts @@ -0,0 +1,19 @@ +import { createStyles } from '@primereact/styles/utils'; +import { style } from '@primeuix/styles/card'; + +export const classes = { + root: 'p-card p-component', + header: 'p-card-header', + body: 'p-card-body', + caption: 'p-card-caption', + title: 'p-card-title', + subtitle: 'p-card-subtitle', + content: 'p-card-content', + footer: 'p-card-footer' +}; + +export const styles = createStyles({ + name: 'card', + style, + classes +}); diff --git a/packages/styles/src/card/index.ts b/packages/styles/src/card/index.ts new file mode 100644 index 0000000000..310ff0dcb9 --- /dev/null +++ b/packages/styles/src/card/index.ts @@ -0,0 +1 @@ +export * from './Card.style'; diff --git a/packages/types/src/shared/card/Card.types.ts b/packages/types/src/shared/card/Card.types.ts new file mode 100644 index 0000000000..e7f504eaa2 --- /dev/null +++ b/packages/types/src/shared/card/Card.types.ts @@ -0,0 +1,12 @@ +import { BaseComponentProps } from '..'; +import { useCardProps } from './useCard.types'; + +/** + * Card component props. + */ +export interface CardProps extends BaseComponentProps { + /** + * The type of the component. + */ + readonly __TYPE?: 'Card'; +} diff --git a/packages/types/src/shared/card/CardBody.types.ts b/packages/types/src/shared/card/CardBody.types.ts new file mode 100644 index 0000000000..23dc96c2ac --- /dev/null +++ b/packages/types/src/shared/card/CardBody.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardBody component props. + */ +export interface CardBodyProps extends BaseComponentProps<{ readonly __TYPE: 'CardBody' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardBody'; +} diff --git a/packages/types/src/shared/card/CardCaption.types.ts b/packages/types/src/shared/card/CardCaption.types.ts new file mode 100644 index 0000000000..d80ccd169a --- /dev/null +++ b/packages/types/src/shared/card/CardCaption.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardCaption component props. + */ +export interface CardCaptionProps extends BaseComponentProps<{ readonly __TYPE: 'CardCaption' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardCaption'; +} diff --git a/packages/types/src/shared/card/CardContent.types.ts b/packages/types/src/shared/card/CardContent.types.ts new file mode 100644 index 0000000000..718a807bb1 --- /dev/null +++ b/packages/types/src/shared/card/CardContent.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardContent component props. + */ +export interface CardContentProps extends BaseComponentProps<{ readonly __TYPE: 'CardContent' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardContent'; +} diff --git a/packages/types/src/shared/card/CardFooter.types.ts b/packages/types/src/shared/card/CardFooter.types.ts new file mode 100644 index 0000000000..35fef28091 --- /dev/null +++ b/packages/types/src/shared/card/CardFooter.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardFooter component props. + */ +export interface CardFooterProps extends BaseComponentProps<{ readonly __TYPE: 'CardFooter' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardFooter'; +} diff --git a/packages/types/src/shared/card/CardHeader.types.ts b/packages/types/src/shared/card/CardHeader.types.ts new file mode 100644 index 0000000000..2268f8742c --- /dev/null +++ b/packages/types/src/shared/card/CardHeader.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardHeader component props. + */ +export interface CardHeaderProps extends BaseComponentProps<{ readonly __TYPE: 'CardHeader' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardHeader'; +} diff --git a/packages/types/src/shared/card/CardSubtitle.types.ts b/packages/types/src/shared/card/CardSubtitle.types.ts new file mode 100644 index 0000000000..1734d176fa --- /dev/null +++ b/packages/types/src/shared/card/CardSubtitle.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardSubtitle component props. + */ +export interface CardSubtitleProps extends BaseComponentProps<{ readonly __TYPE: 'CardSubtitle' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardSubtitle'; +} diff --git a/packages/types/src/shared/card/CardTitle.types.ts b/packages/types/src/shared/card/CardTitle.types.ts new file mode 100644 index 0000000000..d88bdc6a2a --- /dev/null +++ b/packages/types/src/shared/card/CardTitle.types.ts @@ -0,0 +1,11 @@ +import { BaseComponentProps } from '..'; + +/** + * CardTitle component props. + */ +export interface CardTitleProps extends BaseComponentProps<{ readonly __TYPE: 'CardTitle' }, 'div'> { + /** + * The type of the component. + */ + readonly __TYPE?: 'CardTitle'; +} diff --git a/packages/types/src/shared/card/index.ts b/packages/types/src/shared/card/index.ts new file mode 100644 index 0000000000..a33ec88d98 --- /dev/null +++ b/packages/types/src/shared/card/index.ts @@ -0,0 +1,9 @@ +export * from './Card.types'; +export * from './CardBody.types'; +export * from './CardCaption.types'; +export * from './CardContent.types'; +export * from './CardFooter.types'; +export * from './CardHeader.types'; +export * from './CardSubtitle.types'; +export * from './CardTitle.types'; +export * from './useCard.types'; diff --git a/packages/types/src/shared/card/useCard.types.ts b/packages/types/src/shared/card/useCard.types.ts new file mode 100644 index 0000000000..eb955762f0 --- /dev/null +++ b/packages/types/src/shared/card/useCard.types.ts @@ -0,0 +1,9 @@ +/** + * Props for the useCard hook. + */ +export interface useCardProps { + /** + * The type of the hook. + */ + readonly __TYPE?: 'useCard'; +}