chore: remove tasks Label and merge it with lib Chip (#907)

* feat: remove tasks Label and merge it with lib Chip * feat: update folder structure and move components to lib * fix: fix import errors * chore: replace dropdown with select Co-authored-by: Max Schäfer <[email protected]> * chore: go back to boringavatars * fix: fix next config --------- Co-authored-by: Max Schäfer <[email protected]>
helpwave · Mar 6, 2024 · bb8dd66 · bb8dd66
1 parent 109acfc
commit bb8dd66
Show file tree

Hide file tree

Showing 42 changed files with 249 additions and 204 deletions.
diff --git a/lib/components/Avatar.tsx b/lib/components/Avatar.tsx
@@ -0,0 +1,44 @@
+import Image from 'next/image'
+import { tx } from '../twind'
+
+export const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const
+export type AvatarSize = typeof avtarSizeList[number]
+export const avtarSizeMapping: Record<AvatarSize, number> = {
+  tiny: 24,
+  small: 32,
+  medium: 48,
+  large: 64
+}
+
+export type AvatarProps = {
+  avatarUrl: string,
+  alt: string,
+  size?: AvatarSize,
+  className?: string
+}
+
+/**
+ * A component for showing a profile picture
+ */
+const Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {
+  // TODO remove later
+  avatarUrl = 'https://source.boringavatars.com/marble/80'
+  const usedSize = avtarSizeMapping[size]
+  return (
+    // TODO transparent or white background later
+    <div
+      className={tx(`rounded-full bg-hw-primary-400 h-[${usedSize}px] w-[${usedSize}px] min-h-[${usedSize}px] min-w-[${usedSize}px]`, className)}>
+      <Image
+        className={tx('rounded-full border border-slate-200 group-hover:border-indigo-200 flex justify-evenly items-center',
+          `h-[${usedSize}px] w-[${usedSize}px] min-h-[${usedSize}px] min-w-[${usedSize}px]`
+        )}
+        src={avatarUrl}
+        alt={alt}
+        width={usedSize}
+        height={usedSize}
+      />
+    </div>
+  )
+}
+
+export { Avatar }
diff --git a/lib/components/AvatarGroup.tsx b/lib/components/AvatarGroup.tsx
@@ -0,0 +1,44 @@
+import { tw, tx } from '../twind'
+import type { AvatarProps, AvatarSize } from './Avatar'
+import { Avatar, avtarSizeMapping } from './Avatar'
+import { Span } from './Span'
+
+export type AvatarGroupProps = {
+  avatars: Omit<AvatarProps, 'size'>[],
+  maxShownProfiles?: number,
+  size?: AvatarSize
+}
+
+/**
+ * A component for showing a group of Avatar's
+ */
+export const AvatarGroup = ({
+  avatars,
+  maxShownProfiles = 5,
+  size = 'tiny'
+}: AvatarGroupProps) => {
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
+  const diameter = avtarSizeMapping[size]
+  const stackingOverlap = 0.5 // given as a percentage
+  const notDisplayedProfiles = avatars.length - maxShownProfiles
+  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1)
+  return (
+    <div className={tw(`h-[${diameter}px] flex flex-row relative`)}>
+      <div className={tw(`w-[${avatarGroupWidth}px]`)}>
+        {displayedProfiles.map((avatar, index) => (
+          <div key={index} className={tx(`absolute left-[${(index * diameter * stackingOverlap)}px] z-[${maxShownProfiles - index}]`)}>
+            <Avatar avatarUrl={avatar.avatarUrl} alt={avatar.alt} size={size}/>
+          </div>
+        ))}
+      </div>
+      {
+        notDisplayedProfiles > 0 && (
+          <div
+            className={tx(`truncate ml-[${1 + diameter / 16}px] flex flex-row items-center text-[${diameter / 2}px]`)}>
+            <Span>+ {notDisplayedProfiles}</Span>
+          </div>
+        )
+      }
+    </div>
+  )
+}
diff --git a/tasks/components/BreadCrumb.tsx → lib/components/BreadCrumb.tsx b/tasks/components/BreadCrumb.tsx → lib/components/BreadCrumb.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
-import { tw, tx } from '@helpwave/common/twind'
-import { Span } from '@helpwave/common/components/Span'
+import { tw, tx } from '../twind'
+import { Span } from './Span'
 
 export type Crumb = {
   display: string,

diff --git a/lib/components/ChipList.tsx b/lib/components/ChipList.tsx
@@ -1,8 +1,14 @@
 import type { ReactNode } from 'react'
 import { tx } from '../twind'
 
+type ChipColorTypes = 'label-1' | 'label-2' | 'label-3' | 'blue' | 'pink' | 'yellow'| 'darkPrimary'; // extended these colors for more variations
+
+type ChipVariant = 'normal' | 'fullyRounded'
+
 export type ChipProps = {
   label: ReactNode,
+  color?: ChipColorTypes,
+  variant?: ChipVariant,
   className?: string
 }
 
@@ -11,10 +17,30 @@ export type ChipProps = {
  */
 export const Chip = ({
   label,
+  color,
+  variant = 'normal',
   className = ''
 }: ChipProps) => {
   return (
-    <div className={tx('rounded-md bg-hw-primary-800 text-white px-2 py-1 w-fit', className)}>
+    <div
+      className={tx(
+        'w-fit',
+        {
+          'bg-hw-primary-800 text-white': color === 'darkPrimary',
+          'bg-hw-label-pink-background text-hw-label-pink-text': color === 'pink',
+          'bg-hw-label-blue-background text-hw-label-blue-text': color === 'blue',
+          'bg-hw-label-yellow-background text-hw-label-yellow-text': color === 'yellow',
+          'bg-hw-label-1-background text-hw-label-1-text': color === 'label-1',
+          'bg-hw-label-2-background text-hw-label-2-text': color === 'label-2',
+          'bg-hw-label-3-background text-hw-label-3-text': color === 'label-3',
+        },
+        {
+          'rounded-md px-2 py-1': variant === 'normal',
+          'rounded-full text-xs font-bold px-2 py-1': variant === 'fullyRounded',
+        },
+        className
+      )}
+    >
       {label}
     </div>
   )
@@ -34,7 +60,7 @@ export const ChipList = ({
 }: ChipListProps) => {
   return (
     <div className={tx('flex flex-wrap gap-x-4 gap-y-2', className)}>
-      {list.map((value, index) => <Chip key={index} label={value.label} className={value.className}/>)}
+      {list.map((value, index) => <Chip key={index} label={value.label} color={value.color ?? 'darkPrimary'} variant={value.variant ?? 'normal'} className={value.className}/>)}
     </div>
   )
 }
diff --git a/lib/stories/layout/chip/Chip.stories.tsx b/lib/stories/layout/chip/Chip.stories.tsx
@@ -12,6 +12,8 @@ type Story = StoryObj<typeof meta>;
 export const ChipVariation: Story = {
   args: {
     label: 'Label',
-    className: ''
+    className: '',
+    variant: 'normal',
+    color: 'blue'
   },
 }
diff --git a/lib/stories/layout/chip/ChipList.stories.tsx b/lib/stories/layout/chip/ChipList.stories.tsx
@@ -15,10 +15,10 @@ export const ChipListVariation: Story = {
       { label: 'Chip 1' },
       { label: 'Chip 2' },
       { label: 'Chip 3 with longer text' },
-      { label: 'Chip 4' },
+      { label: 'Chip 4 different label', variant: 'fullyRounded' },
       { label: 'Chip 5 with text' },
-      { label: 'Chip 6' },
-      { label: 'Chip 7' },
+      { label: 'Chip 6 custom style', className: '!bg-red-400' },
+      { label: 'Chip 7 in yellow', color: 'yellow' },
       { label: 'Chip 8 with very very long text' },
       { label: 'Chip 9' },
     ],

diff --git a/lib/stories/other/BreadCrumbs.stories.tsx b/lib/stories/other/BreadCrumbs.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { BreadCrumb } from '../../components/BreadCrumb'
+
+const meta = {
+  title: 'Other/BreadCrumb',
+  component: BreadCrumb,
+} satisfies Meta<typeof BreadCrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const BreadCrumbVariation: Story = {
+  args: {
+    crumbs: [
+      { display: 'Organization', link: '' },
+      { display: 'Ward', link: '' },
+      { display: 'Bed', link: '' },
+      { display: 'Patient', link: '' },
+    ]
+  },
+}
diff --git a/lib/stories/other/avatar/Avatar.stories.tsx b/lib/stories/other/avatar/Avatar.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Avatar } from '../../../components/Avatar'
+
+const meta = {
+  title: 'Other/Avatar',
+  component: Avatar,
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const AvatarVariation: Story = {
+  args: {
+    alt: 'altText',
+    avatarUrl: 'https://helpwave.de/favicon.ico',
+    size: 'small',
+    className: ''
+  },
+}
diff --git a/lib/stories/other/avatar/AvatarGroup.stories.tsx b/lib/stories/other/avatar/AvatarGroup.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AvatarGroup } from '../../../components/AvatarGroup'
+
+const meta = {
+  title: 'Other/Avatar',
+  component: AvatarGroup,
+} satisfies Meta<typeof AvatarGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const AvatarGroupVariation: Story = {
+  args: {
+    avatars: [
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+    ],
+    maxShownProfiles: 5,
+    size: 'tiny'
+  },
+}
diff --git a/tasks/components/Avatar.tsx b/tasks/components/Avatar.tsx
@@ -1,27 +0,0 @@
-import { tw, tx } from '@helpwave/common/twind'
-import Image from 'next/image'
-
-export type AvatarProps = {
-  avatarUrl: string,
-  alt: string,
-  size?: 'tiny' | 'small' | 'medium' | 'large'
-}
-
-/**
- * A component for showing a profile picture
- */
-const Avatar = ({ avatarUrl, alt, size = 'medium' }: AvatarProps) => {
-  avatarUrl = `https://source.boringavatars.com/marble/80/${alt}`
-  return (
-    <div className={tw('rounded-full')}>
-      <Image className={tx('rounded-full border border-slate-200 group-hover:border-indigo-200  flex justify-evenly items-center', {
-        'h-6 w-6 min-h-[24px] min-w-[24px]': size === 'tiny',
-        'h-8 w-8 min-h-[32px] min-w-[32px]': size === 'small',
-        'h-12 w-12 min-h-[48px] min-w-[48px]': size === 'medium',
-        'h-16 w-16 min-h-[64px] min-w-[64px]': size === 'large'
-      })} src={avatarUrl} alt={alt} />
-    </div>
-  )
-}
-
-export { Avatar }

diff --git a/tasks/components/AvatarGroup.tsx b/tasks/components/AvatarGroup.tsx
diff --git a/tasks/components/KanbanHeader.tsx b/tasks/components/KanbanHeader.tsx
@@ -3,7 +3,7 @@ import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation, type PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
 import { Input } from '@helpwave/common/components/user-input/Input'
 import { Span } from '@helpwave/common/components/Span'
-import TriangleDown from '@/icons/TriangleDown'
+import { ChevronDown } from 'lucide-react'
 
 type KanbanHeaderTranslation = {
   tasks: string,
@@ -49,11 +49,11 @@ export const KanbanHeader = ({
       <div className={tw('flex flex-row gap-x-6')}>
         <div className={tw('flex flex-row gap-x-2 items-center hidden')}>
           {translation.status}
-          <TriangleDown className={tw('stroke-black')}/>
+          <ChevronDown className={tw('stroke-black')}/>
         </div>
         <div className={tw('flex flex-row gap-x-2 items-center hidden')}>
           {translation.label}
-          <TriangleDown className={tw('stroke-black')}/>
+          <ChevronDown className={tw('stroke-black')}/>
         </div>
         <Input id="search" value={searchValue} placeholder={translation.search} onChange={onSearchChange}/>
       </div>

diff --git a/tasks/components/Label.tsx b/tasks/components/Label.tsx