From b631f7db0b6c13e27419f1e949d226b0a3fa0239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrgen=20Rudigier?= Date: Sat, 25 Mar 2023 00:13:25 +0100 Subject: [PATCH] feat: improve component lib --- src/components/Atoms/Grid/Grid.tsx | 2 +- src/components/Atoms/Link/Link.stories.tsx | 1 + .../Molecules/IconLink/IconLink.tsx | 106 ------------------ src/components/Molecules/IconLink/index.ts | 1 - .../IconText.stories.tsx} | 12 +- .../Molecules/IconText/IconText.tsx | 88 +++++++++++++++ src/components/Molecules/IconText/index.ts | 1 + .../Molecules/UserName/UserName.stories.tsx | 19 ---- .../Molecules/UserName/UserName.tsx | 34 ------ src/components/Molecules/UserName/index.ts | 1 - src/components/Organisms/Modal/Modal.tsx | 4 +- src/index.ts | 3 +- src/styles/main.css | 6 + .../Snippets/ContentCard/ContentCard.tsx | 13 ++- .../Snippets/ContentInput/ContentInput.tsx | 8 +- src/templates/Snippets/UserCard/UserCard.tsx | 14 ++- src/templates/Templates/Profile/Profile.tsx | 23 ++-- .../Templates/ProfileNew/ProfileNew.tsx | 23 ++-- src/templates/Templates/Timeline/Timeline.tsx | 4 +- 19 files changed, 158 insertions(+), 205 deletions(-) delete mode 100644 src/components/Molecules/IconLink/IconLink.tsx delete mode 100644 src/components/Molecules/IconLink/index.ts rename src/components/Molecules/{IconLink/IconLink.stories.tsx => IconText/IconText.stories.tsx} (65%) create mode 100644 src/components/Molecules/IconText/IconText.tsx create mode 100644 src/components/Molecules/IconText/index.ts delete mode 100644 src/components/Molecules/UserName/UserName.stories.tsx delete mode 100644 src/components/Molecules/UserName/UserName.tsx delete mode 100644 src/components/Molecules/UserName/index.ts diff --git a/src/components/Atoms/Grid/Grid.tsx b/src/components/Atoms/Grid/Grid.tsx index 553ddec..bd7fcad 100644 --- a/src/components/Atoms/Grid/Grid.tsx +++ b/src/components/Atoms/Grid/Grid.tsx @@ -44,7 +44,7 @@ type TGrid = { /* * Styles */ -export const GridBaseStyle = 'flex'; +export const GridBaseStyle = 'flex w-full'; export const GridVariantStyleMap: Record = { row: 'flex-row', diff --git a/src/components/Atoms/Link/Link.stories.tsx b/src/components/Atoms/Link/Link.stories.tsx index dbbf7a8..c4b71a0 100644 --- a/src/components/Atoms/Link/Link.stories.tsx +++ b/src/components/Atoms/Link/Link.stories.tsx @@ -14,4 +14,5 @@ export const Link = Template.bind({}); Link.args = { children: 'Link', href: '/', + newTab: true, }; diff --git a/src/components/Molecules/IconLink/IconLink.tsx b/src/components/Molecules/IconLink/IconLink.tsx deleted file mode 100644 index 3fe63e4..0000000 --- a/src/components/Molecules/IconLink/IconLink.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { FC, ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, HTMLAttributes } from 'react'; - -import { Icon, TIconSize, TIconName } from '../../Atoms/Icon/Icon'; - -/* - * Type - */ - -type TIconLinkSize = keyof typeof IconLinkSizeMap; -type TIconLinkColor = keyof typeof IconLinkColorMap; - -type TIconLink = { - /** - * React Children: here most probably text - */ - children: ReactNode; - - /** - * HTML tag to render a button (button, a, span) - */ - as: 'a' | 'button' | 'span'; - - /** - * text size options of this button (S, M, L) - */ - size?: TIconLinkSize; - - /** - * color scheme options of this button (slate, violet, gradient) - */ - colorScheme: TIconLinkColor; - - /** - * icon name to render - */ - icon: TIconName; -}; - -type TLinkButtonProps = TIconLink & { as: 'a' } & AnchorHTMLAttributes; -type THTMLButtonProps = TIconLink & { as: 'button' } & ButtonHTMLAttributes; -type TSpanButtonProps = TIconLink & { as: 'span' } & HTMLAttributes; - -type TIconLinkProps = TSpanButtonProps | THTMLButtonProps | TLinkButtonProps; - -/* - * Style - */ - -const IconLinkBaseStyle: string[] = ['flex items-center', 'leading-none']; - -export const IconLinkSizeMap: Record = { - S: 'text-sm gap-1', - M: 'text-base gap-2', - L: 'text-xl gap-2', -}; - -export const IconLinkColorMap: Record = { - slate: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 ', - violet: 'text-violet-600 hover:text-violet-900 hover:bg-violet-50 ', - pink: ' text-pink-400 hover:text-pink-600 hover:bg-pink-50', -}; - -/** - * IconLink component - * - * @param {string} children - React Children: here most probably text - * @param {string} as - HTML tag to render a button (button, a, span) - * @param {string} size - text size options of this button (S, M, L) - * @param {string} colorScheme - color scheme options of this button (slate, violet, gradient) - * @param {string} icon - icon name to render - * - * @example IconLink - * / - - -/* - * State - */ - -export const IconLink: FC = ({ - children = 'IconLink', - as: Tag = 'a', - colorScheme = 'slate', - size = 'M', - icon, - ...props -}) => { - const styles = [ - ...IconLinkBaseStyle, - IconLinkSizeMap[size], - IconLinkColorMap[colorScheme], - 'group', - 'transition-all duration-300', - ]; - - return ( - - - {children} - - ); -}; diff --git a/src/components/Molecules/IconLink/index.ts b/src/components/Molecules/IconLink/index.ts deleted file mode 100644 index 23fcdcf..0000000 --- a/src/components/Molecules/IconLink/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './IconLink'; diff --git a/src/components/Molecules/IconLink/IconLink.stories.tsx b/src/components/Molecules/IconText/IconText.stories.tsx similarity index 65% rename from src/components/Molecules/IconLink/IconLink.stories.tsx rename to src/components/Molecules/IconText/IconText.stories.tsx index 770d6a2..9127559 100644 --- a/src/components/Molecules/IconLink/IconLink.stories.tsx +++ b/src/components/Molecules/IconText/IconText.stories.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IconNames } from '../../Atoms/Icon/IconLib'; -import { IconLink as Component, IconLinkSizeMap, IconLinkColorMap } from './IconLink'; +import { IconText as Component, IconTextSizeMap, IconTextColorMap } from './IconText'; export default { - title: 'Components/Molecules/IconLink', + title: 'Components/Molecules/IconText', component: Component, argTypes: { icon: { @@ -14,16 +14,16 @@ export default { }, size: { control: { type: 'radio' }, - options: Object.keys(IconLinkSizeMap), + options: Object.keys(IconTextSizeMap), }, colorScheme: { control: { type: 'radio' }, - options: Object.keys(IconLinkColorMap), + options: Object.keys(IconTextColorMap), }, }, } as ComponentMeta; const Template: ComponentStory = (args): JSX.Element => ; -export const IconLink = Template.bind({}); -IconLink.args = {}; +export const IconText = Template.bind({}); +IconText.args = {}; diff --git a/src/components/Molecules/IconText/IconText.tsx b/src/components/Molecules/IconText/IconText.tsx new file mode 100644 index 0000000..5e2ce41 --- /dev/null +++ b/src/components/Molecules/IconText/IconText.tsx @@ -0,0 +1,88 @@ +import React, { FC, ReactNode } from 'react'; + +import { Icon, TIconSize, TIconName } from '../../Atoms/Icon/Icon'; + +/* + * Type + */ + +type TIconTextSize = keyof typeof IconTextSizeMap; +type TIconTextColor = keyof typeof IconTextColorMap; + +type TIconText = { + /** + * React Children: here most probably text + */ + children: ReactNode; + + /** + * text size options of this button (S, M, L) + */ + size?: TIconTextSize; + + /** + * color scheme options of this button (slate, violet, gradient) + */ + colorScheme: TIconTextColor; + + /** + * icon name to render + */ + icon: TIconName; +}; + +/* + * Style + */ + +const IconTextBaseStyle: string[] = ['flex items-center', 'leading-none', 'rounded-full']; + +export const IconTextSizeMap: Record = { + S: 'text-sm gap-1 px-2 py-1', + M: 'text-base gap-2 px-3 py-2', + L: 'text-xl gap-2 px-4 py-3', +}; + +export const IconTextColorMap: Record = { + slate: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 ', + violet: 'text-violet-600 hover:text-violet-900 hover:bg-violet-50 ', + pink: ' text-pink-400 hover:text-pink-600 hover:bg-pink-50', +}; + +/** + * IconText component + * + * @param {string} children - React Children: here most probably text + * @param {string} as - HTML tag to render a button (button, a, span) + * @param {string} size - text size options of this button (S, M, L) + * @param {string} colorScheme - color scheme options of this button (slate, violet, gradient) + * @param {string} icon - icon name to render + * + * @example IconText + * / + + +/* + * State + */ + +export const IconText: FC = ({ children = 'IconText', colorScheme = 'slate', size = 'M', icon, ...props }) => { + const styles = [ + ...IconTextBaseStyle, + IconTextSizeMap[size], + IconTextColorMap[colorScheme], + 'group', + 'transition-all duration-300', + ]; + + return ( + + + {children} + + ); +}; diff --git a/src/components/Molecules/IconText/index.ts b/src/components/Molecules/IconText/index.ts new file mode 100644 index 0000000..06fc22a --- /dev/null +++ b/src/components/Molecules/IconText/index.ts @@ -0,0 +1 @@ +export * from './IconText'; diff --git a/src/components/Molecules/UserName/UserName.stories.tsx b/src/components/Molecules/UserName/UserName.stories.tsx deleted file mode 100644 index 698575a..0000000 --- a/src/components/Molecules/UserName/UserName.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; - -import { UserName as Component } from './UserName'; -import { Current } from '../../../mocks/User'; - -export default { - title: 'Components/Molecules/UserName', - component: Component, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args): JSX.Element => ; - -export const UserName = Template.bind({}); -UserName.args = { - children: Current.userName, - href: Current.profileLink, -}; diff --git a/src/components/Molecules/UserName/UserName.tsx b/src/components/Molecules/UserName/UserName.tsx deleted file mode 100644 index e2bcc76..0000000 --- a/src/components/Molecules/UserName/UserName.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { FC, ReactNode } from 'react'; -import { IconLink } from '../IconLink'; - -/* - * Type - */ - -type TUserName = { - /** - * children React Node: here the name of the user. - */ - children: ReactNode; - /** - * href string: here the link to the user profile. - */ - href: string; -}; - -/** - * User Name Component - * - * @param { ReactNode } children - Child Nodes, here the name of the user. - * @param { string } href - here the link to the user profile. - * - * @example User Name - */ - -export const UserName: FC = ({ children, href }) => { - return ( - - {children} - - ); -}; diff --git a/src/components/Molecules/UserName/index.ts b/src/components/Molecules/UserName/index.ts deleted file mode 100644 index ff984d4..0000000 --- a/src/components/Molecules/UserName/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './UserName'; diff --git a/src/components/Organisms/Modal/Modal.tsx b/src/components/Organisms/Modal/Modal.tsx index aa95b3a..f74618c 100644 --- a/src/components/Organisms/Modal/Modal.tsx +++ b/src/components/Organisms/Modal/Modal.tsx @@ -42,7 +42,9 @@ const ModalBaseStyle = [ 'bg-white rounded-2xl shadow-lg sm:rounded-none sm:shadow-none ', ]; const ModalOverlayStyle = ['fixed inset-0 z-40', 'opacity-25 bg-violet-600']; -const ModalBodyStyle = ['relative flex flex-col w-full overflow-x-hidden max-w-screen max-h-screen min-w-full']; +const ModalBodyStyle = [ + 'relative flex flex-col w-full overflow-x-hidden max-w-screen max-h-screen min-w-full sm:rounded-none sm:shadow-none sm:h-full', +]; const ModalHeaderStyle = ['flex items-center justify-between gap-4', 'px-8 py-6', 'bg-violet-600 text-white']; /** diff --git a/src/index.ts b/src/index.ts index 8525d81..ba381fc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,13 +10,12 @@ export * from './components/Atoms/TimeStamp'; export * from './components/Molecules/Button'; export * from './components/Molecules/Card'; export * from './components/Molecules/Form'; -export * from './components/Molecules/IconLink'; +export * from './components/Molecules/IconText'; export * from './components/Molecules/ImageOverlay'; export * from './components/Molecules/InteractionButton'; export * from './components/Molecules/Navi'; export * from './components/Molecules/RoundButton'; export * from './components/Molecules/Switch'; -export * from './components/Molecules/UserName'; export * from './components/Molecules/UserProfile'; export * from './components/Organisms/CopyToClipboardButton'; export * from './components/Organisms/Modal'; diff --git a/src/styles/main.css b/src/styles/main.css index b5c61c9..a82d520 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,3 +1,9 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + body { + @apply bg-slate-100 dark:bg-slate-900 text-slate-900 dark:text-slate-100; + } +} diff --git a/src/templates/Snippets/ContentCard/ContentCard.tsx b/src/templates/Snippets/ContentCard/ContentCard.tsx index 861579a..d086347 100644 --- a/src/templates/Snippets/ContentCard/ContentCard.tsx +++ b/src/templates/Snippets/ContentCard/ContentCard.tsx @@ -7,8 +7,7 @@ import { Image } from '../../../components/Atoms/Image'; import { Richtext } from '../../../components/Atoms/Richtext'; import { Label } from '../../../components/Atoms/Label'; -import { UserName } from '../../../components/Molecules/UserName'; -import { IconLink } from '../../../components/Molecules/IconLink'; +import { IconText } from '../../../components/Molecules/IconText'; import { ImageOverlay } from '../../../components/Molecules/ImageOverlay'; import { InteractionButton } from '../../../components/Molecules/InteractionButton'; @@ -68,10 +67,14 @@ export const ContentCard: FC = ({ variant, post }) => { {post.author.fullName} - {post.author.userName} - + + + {post.author.userName} + + + - + ); diff --git a/src/templates/Snippets/ContentInput/ContentInput.tsx b/src/templates/Snippets/ContentInput/ContentInput.tsx index d7db41e..eef4be6 100644 --- a/src/templates/Snippets/ContentInput/ContentInput.tsx +++ b/src/templates/Snippets/ContentInput/ContentInput.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react'; import { Grid } from '../../../components/Atoms/Grid/Grid'; import { Label } from '../../../components/Atoms/Label'; -import { UserName } from '../../../components/Molecules/UserName'; +import { IconText } from '../../../components/Molecules/IconText'; import { Button } from '../../../components/Molecules/Button'; import { FormTextarea } from '../../../components/Molecules/Form/FormTextarea'; @@ -54,7 +54,11 @@ export const ContentInput: FC = (props) => { {author.fullName} - {author.userName} + + + {author.userName} + + diff --git a/src/templates/Snippets/UserCard/UserCard.tsx b/src/templates/Snippets/UserCard/UserCard.tsx index e24339a..58f65ce 100644 --- a/src/templates/Snippets/UserCard/UserCard.tsx +++ b/src/templates/Snippets/UserCard/UserCard.tsx @@ -2,12 +2,12 @@ import React, { FC } from 'react'; import { Grid } from '../../../components/Atoms/Grid/Grid'; -import { Label } from '../../../components/Atoms/Label/index'; +import { Label } from '../../../components/Atoms/Label'; import { Card } from '../../../components/Molecules/Card/Card'; -import { UserName } from '../../../components/Molecules/UserName/index'; -import { UserProfile } from '../../../components/Molecules/UserProfile/index'; -import { Button } from '../../../components/Molecules/Button/index'; +import { IconText } from '../../../components/Molecules/IconText'; +import { UserProfile } from '../../../components/Molecules/UserProfile'; +import { Button } from '../../../components/Molecules/Button'; import { User } from '../../../types/User'; @@ -33,7 +33,11 @@ export const UserCard: FC = ({ user }) => { {user.fullName} - {user.userName} + + + {user.userName} + + diff --git a/src/templates/Templates/Profile/Profile.tsx b/src/templates/Templates/Profile/Profile.tsx index 971972d..667cb11 100644 --- a/src/templates/Templates/Profile/Profile.tsx +++ b/src/templates/Templates/Profile/Profile.tsx @@ -5,9 +5,8 @@ import { Headline } from '../../../components/Atoms/Headline/Headline'; import { Richtext } from '../../../components/Atoms/Richtext'; import { Switch } from '../../../components/Molecules/Switch'; -import { UserName } from '../../../components/Molecules/UserName'; import { TimeStamp } from '../../../components/Atoms/TimeStamp'; -import { IconLink } from '../../../components/Molecules/IconLink'; +import { IconText } from '../../../components/Molecules/IconText'; import { Header } from '../../Snippets/Header/Header'; import { ProfileHeader } from '../../Snippets/ProfileHeader'; @@ -30,26 +29,30 @@ export const Profile: FC = ({ user, posts = [] }) => { }; return ( -
+ <>
-
+
{user.fullName}
- {user.userName} + + + {user.userName} + + - + {user.city} - + - + - +
@@ -90,6 +93,6 @@ export const Profile: FC = ({ user, posts = [] }) => {
-
+ ); }; diff --git a/src/templates/Templates/ProfileNew/ProfileNew.tsx b/src/templates/Templates/ProfileNew/ProfileNew.tsx index 63ce427..8eae229 100644 --- a/src/templates/Templates/ProfileNew/ProfileNew.tsx +++ b/src/templates/Templates/ProfileNew/ProfileNew.tsx @@ -5,8 +5,7 @@ import { Headline } from '../../../components/Atoms/Headline/Headline'; import { Richtext } from '../../../components/Atoms/Richtext'; import { TimeStamp } from '../../../components/Atoms/TimeStamp'; -import { UserName } from '../../../components/Molecules/UserName'; -import { IconLink } from '../../../components/Molecules/IconLink'; +import { IconText } from '../../../components/Molecules/IconText'; import { Header } from '../../Snippets/Header'; import { ProfileHeader } from '../../Snippets/ProfileHeader'; @@ -25,25 +24,29 @@ type ProfileNewType = { export const ProfileNew: FC = ({ user, promotedPosts, promotedUsers }) => { return ( -
+ <>
-
+
{user.fullName}
- {user.userName} - + + + {user.userName} + + + {user.city || 'Location'} - - + + - +
@@ -90,6 +93,6 @@ export const ProfileNew: FC = ({ user, promotedPosts, promotedUs
-
+ ); }; diff --git a/src/templates/Templates/Timeline/Timeline.tsx b/src/templates/Templates/Timeline/Timeline.tsx index a332ddf..9346ab8 100644 --- a/src/templates/Templates/Timeline/Timeline.tsx +++ b/src/templates/Templates/Timeline/Timeline.tsx @@ -17,7 +17,7 @@ type TimelineType = { export const Timeline: FC = ({ user, posts = [] }) => { return ( -
+ <>
@@ -51,6 +51,6 @@ export const Timeline: FC = ({ user, posts = [] }) => {
-
+ ); };