From 237ab628dc47d099c5b866257110941db9029981 Mon Sep 17 00:00:00 2001 From: bearni95 Date: Tue, 8 Aug 2023 20:55:33 +0200 Subject: [PATCH 1/3] added profile card component, fully based on parameters, rather than sub-components; lint warning fixes --- .../ContentHeader/ContentHeader.tsx | 1 + .../components/ProfileCard/ProfileCard.css.ts | 85 +++++++++++++++++ .../ProfileCard/ProfileCard.stories.tsx | 94 +++++++++++++++++++ .../components/ProfileCard/ProfileCard.tsx | 64 +++++++++++++ .../src/components/ProfileCard/index.ts | 4 + .../src/components/Table/Table.stories.tsx | 1 - .../libs/react-ui/src/components/index.ts | 2 + packages/libs/react-ui/src/index.ts | 2 + 8 files changed, 252 insertions(+), 1 deletion(-) create mode 100644 packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts create mode 100644 packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx create mode 100644 packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx create mode 100644 packages/libs/react-ui/src/components/ProfileCard/index.ts diff --git a/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx b/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx index 2e7a8421f5..567f4eb80e 100644 --- a/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx +++ b/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx @@ -11,6 +11,7 @@ export interface IContentHeaderProps { } export const ContentHeader: FC = ({ + // eslint-disable-next-line @typescript-eslint/naming-convention icon: Icon, heading, description, diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts new file mode 100644 index 0000000000..4f4d97b0d5 --- /dev/null +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts @@ -0,0 +1,85 @@ +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', + }), + { + objectFit: 'cover', + }, +]); + +export const boldTextClass = style([ + sprinkles({ + marginTop: '$1', + fontWeight: '$bold', + }), +]); + +const ulClass = style([ + sprinkles({ + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'flex-start', + marginX: 0, + marginY: '$2', + padding: 0, + }), +]); + +export const tagContainerClass = style([ + ulClass, + sprinkles({ + flexDirection: 'row', + }), + { + listStyleType: 'none', + }, +]); + +export const linkContainerClass = style([ + ulClass, + sprinkles({ + flexDirection: 'column', + marginLeft: '$4', + }), + {}, +]); + +export const linkClass = style([ + sprinkles({ + color: '$blue80', + + textDecoration: 'none', + }), + { + selectors: { + '&:hover': { + textDecoration: 'underline', + }, + }, + }, +]); + +export const tagClass = style([ + sprinkles({ + margin: '$1', + }), +]); + +export const profileCardClass = style([ + sprinkles({ + color: '$foreground', + }), +]); diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx new file mode 100644 index 0000000000..75f03f1deb --- /dev/null +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx @@ -0,0 +1,94 @@ +import { Grid } from '@components/Grid'; +import { IProfileCardProps, ProfileCard } from '@components/ProfileCard'; +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +const meta: Meta = { + title: 'Components/ProfileCard', + component: ProfileCard, + argTypes: { + name: { + control: { + type: 'text', + }, + }, + title: { + control: { + type: 'text', + }, + }, + + imageSrc: { + control: { + type: 'text', + }, + }, + + // this one is an array of strings + tags: { + control: { + type: 'array', + }, + }, + + /* + href: { + control: { + type: 'text', + }, + }, + target: { + control: { + type: 'select', + options: ['_blank', '_self', '_parent', '_top'], + }, + },*/ + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + name: 'ProfileCard', + 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 ( + + + + + + + + + ); + }, +}; diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx new file mode 100644 index 0000000000..96d24cec0d --- /dev/null +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx @@ -0,0 +1,64 @@ +import { + boldTextClass, + imageClass, + imageContainerClass, + linkClass, + linkContainerClass, + profileCardClass, + tagClass, + tagContainerClass, +} from './ProfileCard.css'; + +import { Grid } from '@components/Grid'; +import { Tag } from '@components/Tag'; +import React, { FC } from 'react'; + +export default {}; +export interface IProfileCardProps { + name: string; + title: string; + tags: string[]; + imageSrc: string; + links: Record; +} + +export const ProfileCard: FC = ({ + name, + title, + tags, + imageSrc, + links, +}) => { + return ( +
+ + +
+ {name} +
+ + +

{name}

+

{title}

+
    + {tags.map((tag, i) => ( +
  • + {tag} +
    • + ))} +
+

Links

+
    + {Object.entries(links).map(([text, href]) => ( +
  • + + {text} + +
    • + ))} +
+ + +
+ ); +}; diff --git a/packages/libs/react-ui/src/components/ProfileCard/index.ts b/packages/libs/react-ui/src/components/ProfileCard/index.ts new file mode 100644 index 0000000000..6d091e05db --- /dev/null +++ b/packages/libs/react-ui/src/components/ProfileCard/index.ts @@ -0,0 +1,4 @@ +import type { IProfileCardProps } from './ProfileCard'; +import { ProfileCard } from './ProfileCard'; + +export { IProfileCardProps, ProfileCard }; diff --git a/packages/libs/react-ui/src/components/Table/Table.stories.tsx b/packages/libs/react-ui/src/components/Table/Table.stories.tsx index f287fd19d7..8b72c15cdb 100644 --- a/packages/libs/react-ui/src/components/Table/Table.stories.tsx +++ b/packages/libs/react-ui/src/components/Table/Table.stories.tsx @@ -109,7 +109,6 @@ export const LinkTable: Story = { }; export const StripedTable: Story = { - name: 'Striped Table', args: { rowCount: 3, columnCount: 5, diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts index a76b29a1b4..1a53e10168 100644 --- a/packages/libs/react-ui/src/components/index.ts +++ b/packages/libs/react-ui/src/components/index.ts @@ -47,6 +47,7 @@ export type { IGradientTextProps, ILabelProps, } from './Typography'; +export type { IProfileCardProps } from './ProfileCard'; export { Accordion } from './Accordion'; export { Box } from './Box'; @@ -77,3 +78,4 @@ export { Tooltip } from './Tooltip'; export { TrackerCard } from './TrackerCard/TrackerCard'; export { Tree } from './Tree'; export { Divider } from './Divider/Divider'; +export { ProfileCard } from './ProfileCard'; diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts index ac474e8013..53ab60a7f7 100644 --- a/packages/libs/react-ui/src/index.ts +++ b/packages/libs/react-ui/src/index.ts @@ -48,6 +48,7 @@ export type { ITrackerCardProps, ITreeProps, ITrProps, + IProfileCardProps, } from './components'; export { @@ -86,6 +87,7 @@ export { Tree, useModal, Divider, + ProfileCard, } from './components'; export { breakpoints } from './styles'; From 2d7583364829ed2c91b013d65eb7242d6410f2f5 Mon Sep 17 00:00:00 2001 From: bearni95 Date: Wed, 9 Aug 2023 13:48:50 +0200 Subject: [PATCH 2/3] code cleanup; made links and tags optional --- .../ProfileCard/ProfileCard.stories.tsx | 15 --------------- .../src/components/ProfileCard/ProfileCard.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx index 75f03f1deb..0acfed8f74 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx @@ -23,26 +23,11 @@ const meta: Meta = { type: 'text', }, }, - - // this one is an array of strings tags: { control: { type: 'array', }, }, - - /* - href: { - control: { - type: 'text', - }, - }, - target: { - control: { - type: 'select', - options: ['_blank', '_self', '_parent', '_top'], - }, - },*/ }, }; diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx index 96d24cec0d..c3b7e3f3f3 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx @@ -17,17 +17,17 @@ export default {}; export interface IProfileCardProps { name: string; title: string; - tags: string[]; imageSrc: string; - links: Record; + tags?: string[]; + links?: Record; } export const ProfileCard: FC = ({ name, title, - tags, imageSrc, - links, + tags = [], + links = {}, }) => { return (
From f403d37f21cddc22cd3d84f277ce299cb5d36fcd Mon Sep 17 00:00:00 2001 From: bearni95 Date: Thu, 10 Aug 2023 14:18:58 +0200 Subject: [PATCH 3/3] made rendering of the tags and links blocks conditional upon the vars being undefined or not --- .../components/ProfileCard/ProfileCard.css.ts | 2 +- .../components/ProfileCard/ProfileCard.tsx | 46 +++++++++++-------- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts index 4f4d97b0d5..080767225e 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.css.ts @@ -22,7 +22,7 @@ export const imageClass = style([ export const boldTextClass = style([ sprinkles({ - marginTop: '$1', + marginY: '$2', fontWeight: '$bold', }), ]); diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx index c3b7e3f3f3..583cf3a16e 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx @@ -26,8 +26,8 @@ export const ProfileCard: FC = ({ name, title, imageSrc, - tags = [], - links = {}, + tags = undefined, + links = undefined, }) => { return (
@@ -40,23 +40,31 @@ export const ProfileCard: FC = ({

{name}

{title}

-
    - {tags.map((tag, i) => ( -
  • - {tag} -
    • - ))} -
-

Links

-
    - {Object.entries(links).map(([text, href]) => ( -
  • - - {text} - -
    • - ))} -
+ + {tags && ( +
    + {tags.map((tag, i) => ( +
  • + {tag} +
    • + ))} +
+ )} + + {links && ( + <> +

Links

+
    + {Object.entries(links).map(([text, href]) => ( +
  • + + {text} + +
    • + ))} +
+ + )}