feat: Add Card

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 <DocComponent header="Card" description={metadata.description} docs={docs} apiKeys={['Card']} />;
+}

apps/showcase/doc/card/features/advanced/demo.tsx

@@ -0,0 +1,31 @@
+import { Card } from 'primereact/card';
+
+export default function BasicDemo() {
+    return (
+        <div className="mb-4 p-8 flex items-center justify-center">
+            <Card style={{ width: '25rem', overflow: 'hidden' }}>
+                <Card.Header>
+                    <img alt="user header" className="w-full" src="https://primefaces.org/cdn/primereact/images/usercard.png" />
+                </Card.Header>
+                <Card.Body>
+                    <Card.Caption>
+                        <Card.Title>Advanced Card</Card.Title>
+                        <Card.Subtitle>Card subtitle</Card.Subtitle>
+                    </Card.Caption>
+                    <Card.Content>
+                        <p className="m-0">
+                            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!
+                        </p>
+                    </Card.Content>
+                    <Card.Footer>
+                        <div className="flex gap-4 mt-1">
+                            {/* <Button label="Cancel" severity="secondary" outlined className="w-full" />
+                            <Button label="Save" className="w-full" /> */}
+                        </div>
+                    </Card.Footer>
+                </Card.Body>
+            </Card>
+        </div>
+    );
+}

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 (
+        <div>
+            <h2>Advanced</h2>
+            <p>
+                Card provides <i>Card.Header</i>, <i>Card.Title</i>, <i>Card.Subtitle</i>, <i>Card.Content</i> and <i>Card.Footer</i> as the named components to place content.
+            </p>
+
+            <AdvancedDemo />
+            <br />
+            <CodeViewer source={source} />
+        </div>
+    );
+}

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        <div className=\"mb-4 p-8 flex items-center justify-center\">\n            <Card style={{ width: '25rem', overflow: 'hidden' }}>\n                <Card.Header>\n                    <img alt=\"user header\" className=\"w-full\" src=\"https://primefaces.org/cdn/primereact/images/usercard.png\" />\n                </Card.Header>\n                <Card.Body>\n                    <Card.Caption>\n                        <Card.Title>Advanced Card</Card.Title>\n                        <Card.Subtitle>Card subtitle</Card.Subtitle>\n                    </Card.Caption>\n                    <Card.Content>\n                        <p className=\"m-0\">\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                        </p>\n                    </Card.Content>\n                    <Card.Footer>\n                        <div className=\"flex gap-4 mt-1\">\n                            {/* <Button label=\"Cancel\" severity=\"secondary\" outlined className=\"w-full\" />\n                            <Button label=\"Save\" className=\"w-full\" /> */}\n                        </div>\n                    </Card.Footer>\n                </Card.Body>\n            </Card>\n        </div>\n    );\n}\n"
+};

apps/showcase/doc/card/features/basic/demo.tsx

@@ -0,0 +1,21 @@
+import { Card } from 'primereact/card';
+
+export default function BasicDemo() {
+    return (
+        <div className="mb-4 p-8">
+            <Card>
+                <Card.Body>
+                    <Card.Caption>
+                        <Card.Title>Simple Card</Card.Title>
+                    </Card.Caption>
+                    <Card.Content>
+                        <p className="m-0">
+                            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!
+                        </p>
+                    </Card.Content>
+                </Card.Body>
+            </Card>
+        </div>
+    );
+}

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 (
+        <div>
+            <h2>Basic</h2>
+            <p>
+                A simple Card is created with a <i>Card.Title</i> along with the content as children.
+            </p>
+
+            <BasicDemo />
+            <br />
+            <CodeViewer source={source} />
+        </div>
+    );
+}

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        <div className=\"mb-4 p-8\">\n            <Card>\n                <Card.Body>\n                    <Card.Caption>\n                        <Card.Title>Simple Card</Card.Title>\n                    </Card.Caption>\n                    <Card.Content>\n                        <p className=\"m-0\">\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                        </p>\n                    </Card.Content>\n                </Card.Body>\n            </Card>\n        </div>\n    );\n}\n"
+};

apps/showcase/doc/card/features/import/doc.tsx

@@ -0,0 +1,5 @@
+import { CodeViewer } from '@primereact/code-viewer';
+
+export default function ImportDoc() {
+    return <CodeViewer source={`import { Card } from 'primereact/card';`} />;
+}

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;

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<usePanelProps>;
+export const defaultProps: useCardProps = {
+    __TYPE: 'useCard'
+};

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
+});

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'
+};

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 (
+            <Component as={props.as || 'div'} {...rootProps} ref={elementRef}>
+                {props.children}
+            </Component>
+        );
+    },
+    components: {
+        Body: CardBody,
+        Caption: CardCaption,
+        Content: CardContent,
+        Footer: CardFooter,
+        Header: CardHeader,
+        Subtitle: CardSubtitle,
+        Title: CardTitle
+    }
+});

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'
+};

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 (
+            <Component as={props.as || 'div'} {...bodyProps}>
+                {props.children}
+            </Component>
+        );
+    }
+});

packages/primereact/src/card/body/index.ts

@@ -0,0 +1,2 @@
+export * from './CardBody';
+export * from './CardBody.props';

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'
+};

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 (
+            <Component as={props.as || 'div'} {...captionProps}>
+                {props.children}
+            </Component>
+        );
+    }
+});

packages/primereact/src/card/caption/index.ts

@@ -0,0 +1,2 @@
+export * from './CardCaption';
+export * from './CardCaption.props';

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'
+};

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 (
+            <Component as={props.as || 'div'} {...contentProps}>
+                {props.children}
+            </Component>
+        );
+    }
+});

packages/primereact/src/card/content/index.ts

@@ -0,0 +1,2 @@
+export * from './CardContent';
+export * from './CardContent.props';

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'
+};

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 (
+            <Component as={props.as || 'div'} {...footerProps}>
+                {props.children}
+            </Component>
+        );
+    }
+});

packages/primereact/src/card/footer/index.ts

@@ -0,0 +1,2 @@
+export * from './CardFooter';
+export * from './CardFooter.props';

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'
+};