fix(@kadena/react-ui): Updated ProfileCard component

.changeset/hungry-files-shave.md

@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': minor
+---
+
+Renamed the ProfileCard component to ProfileSummary and refactored it to use a
+subcomponent structure

packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts → packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.css.ts

@@ -1,29 +1,20 @@
 import { sprinkles } from '@theme/sprinkles.css';
 import { style } from '@vanilla-extract/css';
 
-export const imageContainerClass = style([
-  sprinkles({
-    borderRadius: '$round',
-    overflow: 'hidden',
-    width: '100%',
-  }),
-]);
-
 export const imageClass = style([
   sprinkles({
-    width: '100%',
-    height: '100%',
     borderRadius: '$round',
-  }),
-  {
+    width: '$24',
+    height: '$24',
     objectFit: 'cover',
-  },
+  }),
 ]);
 
 export const boldTextClass = style([
   sprinkles({
     marginY: '$2',
     fontWeight: '$bold',
+    display: 'block',
   }),
 ]);
 
@@ -42,10 +33,8 @@ export const tagContainerClass = style([
   ulClass,
   sprinkles({
     flexDirection: 'row',
-  }),
-  {
     listStyleType: 'none',
-  },
+  }),
 ]);
 
 export const linkContainerClass = style([
@@ -54,7 +43,6 @@ export const linkContainerClass = style([
     flexDirection: 'column',
     marginLeft: '$4',
   }),
-  {},
 ]);
 
 export const tagClass = style([
@@ -63,8 +51,11 @@ export const tagClass = style([
   }),
 ]);
 
-export const profileCardClass = style([
+export const containerClass = style([
   sprinkles({
     color: '$foreground',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '$6',
   }),
 ]);

packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.stories.tsx

@@ -0,0 +1,56 @@
+import type { IProfileSummaryRootProps } from '@components/ProfileSummary';
+import { ProfileSummary } from '@components/ProfileSummary';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+type StoryComponentType = IProfileSummaryRootProps & {
+  links: Record<string, string>;
+};
+
+const meta: Meta<StoryComponentType> = {
+  title: 'Content/ProfileSummary',
+  component: ProfileSummary.Root,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The ProfileSummary component renders a card with a profile picture, name, title, tags, and links. The links are rendered using the `Link` component and can be set with the `links` prop.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryComponentType>;
+
+export const Primary: Story = {
+  name: 'ProfileSummary',
+  args: {
+    name: 'Tasos Bitsios',
+    title: 'Developer Experience Developer (DED)',
+    tags: ['Chainweb-stream', 'SSE'],
+    imageSrc: 'https://avatars.githubusercontent.com/u/115649719?v=4',
+    links: {
+      'Personal website': 'https://tasosbitsios.com',
+      Twitter: 'https://twitter.com/tasosbitsios',
+      'Custom link': 'https://kadena.io',
+    },
+  },
+  render: ({ name, title, tags, imageSrc, links }) => {
+    return (
+      <ProfileSummary.Root
+        name={name}
+        title={title}
+        tags={tags}
+        imageSrc={imageSrc}
+      >
+        {Object.entries(links).map(([label, href]) => (
+          <ProfileSummary.Link href={href as string} key={href as string}>
+            {label}
+          </ProfileSummary.Link>
+        ))}
+      </ProfileSummary.Root>
+    );
+  },
+};

packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryLink.tsx

@@ -0,0 +1,17 @@
+import type { ILinkProps } from '@components/Link';
+import { Link } from '@components/Link';
+import type { FC } from 'react';
+import React from 'react';
+
+export interface IProfileSummaryLinkProps extends ILinkProps {}
+
+export const ProfileSummaryLink: FC<IProfileSummaryLinkProps> = ({
+  children,
+  ...restLinkProps
+}) => {
+  return (
+    <li>
+      <Link {...restLinkProps}>{children}</Link>
+    </li>
+  );
+};

packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryRoot.tsx

@@ -0,0 +1,56 @@
+import {
+  boldTextClass,
+  containerClass,
+  imageClass,
+  linkContainerClass,
+  tagClass,
+  tagContainerClass,
+} from './ProfileSummary.css';
+import type { IProfileSummaryLinkProps } from './ProfileSummaryLink';
+
+import { Tag } from '@components/Tag';
+import type { FC, FunctionComponentElement } from 'react';
+import React from 'react';
+
+export interface IProfileSummaryRootProps {
+  name: string;
+  title: string;
+  imageSrc: string;
+  tags?: string[];
+  children: FunctionComponentElement<IProfileSummaryLinkProps>[];
+}
+
+export const ProfileSummaryRoot: FC<IProfileSummaryRootProps> = ({
+  name,
+  title,
+  imageSrc,
+  tags = undefined,
+  children,
+}) => {
+  return (
+    <div className={containerClass}>
+      <img className={imageClass} src={imageSrc} alt={name} />
+      <div>
+        <span className={boldTextClass}>{name}</span>
+        <span>{title}</span>
+
+        {tags && (
+          <ul className={tagContainerClass}>
+            {tags.map((tag, i) => (
+              <li className={tagClass} key={i}>
+                <Tag key={i}>{tag}</Tag>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {children && (
+          <>
+            <span className={boldTextClass}>Links</span>
+            <ul className={linkContainerClass}>{children}</ul>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

packages/libs/react-ui/src/components/ProfileSummary/index.ts

@@ -0,0 +1,18 @@
+import type { IProfileSummaryLinkProps } from './ProfileSummaryLink';
+import { ProfileSummaryLink } from './ProfileSummaryLink';
+import type { IProfileSummaryRootProps } from './ProfileSummaryRoot';
+import { ProfileSummaryRoot } from './ProfileSummaryRoot';
+
+import type { FC } from 'react';
+
+export { IProfileSummaryLinkProps, IProfileSummaryRootProps };
+
+interface IProfileSummaryProps {
+  Root: FC<IProfileSummaryRootProps>;
+  Link: FC<IProfileSummaryLinkProps>;
+}
+
+export const ProfileSummary: IProfileSummaryProps = {
+  Root: ProfileSummaryRoot,
+  Link: ProfileSummaryLink,
+};

packages/libs/react-ui/src/components/index.ts

@@ -53,7 +53,10 @@ export type {
   IGradientTextProps,
   ILabelProps,
 } from './Typography';
-export type { IProfileCardProps } from './ProfileCard';
+export type {
+  IProfileSummaryRootProps,
+  IProfileSummaryLinkProps,
+} from './ProfileSummary';
 
 export { Accordion } from './Accordion';
 export { Box } from './Box';
@@ -85,4 +88,4 @@ export { Tooltip } from './Tooltip';
 export { TrackerCard } from './TrackerCard/TrackerCard';
 export { Tree } from './Tree';
 export { Divider } from './Divider/Divider';
-export { ProfileCard } from './ProfileCard';
+export { ProfileSummary } from './ProfileSummary';