refactor(design-system): Move atoms to molecules

Signed-off-by: Jeroen Branje <[email protected]>

apps/design-system/src/components/Atoms/Address/Address.stories.tsx → apps/design-system/src/components/Molecules/Address/Address.stories.tsx

@@ -4,7 +4,7 @@ import Address from './Address'
 
 export default {
   component: Address,
-  title: 'Components/Address',
+  title: 'Molecules/Address',
 } as Meta
 
 const Template: Story = ({ street, city, postalCode, country, phone, email }) => (

apps/design-system/src/components/Atoms/Address/Address.ui.test.tsx → apps/design-system/src/components/Molecules/Address/Address.ui.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 
 import Address from './Address'
 
-describe('compoments/Atoms/Address', () => {
+describe('compoments/Molecules/Address', () => {
   it('should render Address', () => {
     // when ... rendering component
     const street = 'STREET'

apps/design-system/src/components/Atoms/MemberProfileCard/MemberProfileCard.stories.tsx → apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, Story } from '@storybook/react'
 
-import Pill from '../Pill/Pill'
+import Pill from '../../Atoms/Pill/Pill'
 import MemberProfileCard from './MemberProfileCard'
 
 export default {
   component: MemberProfileCard,
-  title: 'Components/MemberProfileCard',
+  title: 'Molecules/MemberProfileCard',
 } as Meta
 
 const Template: Story = ({ title, logoUri, street, city, postalCode, country }) => (

apps/design-system/src/components/Atoms/MemberProfileCard/MemberProfileCard.ui.test.tsx → apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.ui.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 
-import Pill from '../Pill/Pill'
+import Pill from '../../Atoms/Pill/Pill'
 import MemberProfileCard from './MemberProfileCard'
 
-describe('compoments/Atoms/MemberProfileCard', () => {
+describe('compoments/Molecules/MemberProfileCard', () => {
   it('should render a Member Card with the title', () => {
     // when ... rendering component
     const title = 'TITLE'

apps/design-system/src/index.ts

@@ -1,4 +1,4 @@
-export { Address } from './components/Atoms/Address'
+export { Address } from './components/Molecules/Address'
 export { Button } from './components/Atoms/Button'
 export { Card } from './components/Atoms/Card'
 export { ContactPerson } from './components/Atoms/ContactPerson'
@@ -8,7 +8,7 @@ export { Grid, GridRow } from './components/Atoms/Grid'
 export { Heading } from './components/Atoms/Heading'
 export { HeadingWithTooltip } from './components/Atoms/HeadingWithTooltip'
 export { LoadingIndicator } from './components/Atoms/LoadingIndicator'
-export { MemberProfileCard } from './components/Atoms/MemberProfileCard'
+export { MemberProfileCard } from './components/Molecules/MemberProfileCard'
 export { Nav, NavItem } from './components/Atoms/Nav'
 export { Pill } from './components/Atoms/Pill'
 export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from './components/Atoms/Table'

apps/envited.ascs.digital/app/members/[slug]/page.tsx

@@ -1,5 +1,3 @@
-import { prop, propOr } from 'ramda'
-
 import { getProfile } from '../../../common/serverActions'
 import { Header } from '../../../modules/Header'
 import { Member } from '../../../modules/Member'
@@ -12,22 +10,7 @@ export default async function Index({ params: { slug } }: { params: { slug: stri
       <Header />
       <main>
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Member
-            name={propOr('', 'name')(profile)}
-            description={propOr('', 'description')(profile)}
-            logo={propOr(null, 'logo')(profile)}
-            website={propOr('', 'website')(profile)}
-            streetAddress={propOr('', 'streetAddress')(profile)}
-            addressCountry={propOr('', 'addressCountry')(profile)}
-            addressLocality={propOr('', 'addressLocality')(profile)}
-            postalCode={propOr('', 'postalCode')(profile)}
-            salesEmail={prop('salesEmail')(profile)}
-            salesName={prop('salesName')(profile)}
-            salesPhone={prop('salesPhone')(profile)}
-            principalEmail={prop('principalEmail')(profile)}
-            principalName={prop('principalName')(profile)}
-            principalPhone={prop('principalPhone')(profile)}
-          />
+          <Member member={profile} />
         </div>
       </main>
     </>

apps/envited.ascs.digital/modules/Member/Member.tsx

@@ -1,52 +1,24 @@
 'use client'
 
 import { Address, Card, ContactPerson, Heading, Pill } from '@envited-marketplace/design-system'
-import { isNil, map } from 'ramda'
+import { has, isNil, map, propOr } from 'ramda'
 import React, { FC } from 'react'
 
 import { useTranslation } from '../../common/i18n'
+import { Profile } from '../../common/types'
 
 interface MemberProps {
-  name: string
-  description: string
-  logo: string
-  website: string
-  streetAddress: string
-  addressCountry: string
-  addressLocality: string
-  postalCode: string
-  salesEmail: string | null
-  salesName: string | null
-  salesPhone: string | null
-  principalEmail: string | null
-  principalName: string | null
-  principalPhone: string | null
+  member: Profile
 }
-
-export const Member: FC<MemberProps> = ({
-  name,
-  description,
-  logo,
-  website,
-  streetAddress,
-  addressCountry,
-  addressLocality,
-  postalCode,
-  salesEmail,
-  salesName,
-  salesPhone,
-  principalEmail,
-  principalName,
-  principalPhone,
-}) => {
+export const Member: FC<MemberProps> = ({ member }) => {
   const { t } = useTranslation('Member')
 
   return (
     <div className="flex gap-x-8">
       <div className="w-3/4 flex flex-col gap-8">
         <Card>
           <Heading importance="h4">{t('[Heading] member profile')}</Heading>
-          <Heading importance="h2">{name}</Heading>
+          <Heading importance="h2">{propOr('', 'name')(member)}</Heading>
           <div className="">
             <Heading importance="h4">{t('[Heading] business categories')}</Heading>
             <div className="flex gap-3 mt-2">
@@ -55,37 +27,53 @@ export const Member: FC<MemberProps> = ({
           </div>
           <div className="mt-6">
             <Heading importance="h4">{t('[Heading] about us')}</Heading>
-            <div className="flex gap-3 mt-2">{description}</div>
+            <div className="flex gap-3 mt-2">{propOr('', 'description')(member)}</div>
           </div>
         </Card>
       </div>
       <div className="w-1/4 flex flex-col gap-8">
         <Card>
-          {!isNil(logo) && <img src={logo} alt={name} width={0} height={0} className="w-full h-auto mb-6" />}
+          {!isNil(propOr('', 'logo')(member)) && (
+            <img
+              src={propOr('', 'logo')(member)}
+              alt={propOr('', 'name')(member)}
+              width={0}
+              height={0}
+              className="w-full h-auto mb-6"
+            />
+          )}
           <Heading importance="h4">{t('[Heading] address')}</Heading>
           <div className="mt-4">
             <Address
-              street={streetAddress}
-              postalCode={postalCode}
-              city={addressLocality}
-              country={addressCountry}
-              website={website}
+              street={propOr('', 'streetAddress')(member)}
+              postalCode={propOr('', 'postalCode')(member)}
+              city={propOr('', 'addressLocality')(member)}
+              country={propOr('', 'addressCountry')(member)}
+              website={propOr('', 'website')(member)}
             />
           </div>
         </Card>
-        {principalName && principalEmail && principalPhone && (
+        {has('principalName')(member) && has('principalEmail')(member) && has('principalPhone')(member) && (
           <Card>
             <Heading importance="h4">{t('[Heading] principal contact')}</Heading>
             <div className="mt-4">
-              <ContactPerson name={principalName} email={principalEmail} phone={principalPhone} />
+              <ContactPerson
+                name={propOr('', 'principalName')(member)}
+                email={propOr('', 'principalEmail')(member)}
+                phone={propOr('', 'principalPhone')(member)}
+              />
             </div>
           </Card>
         )}
-        {salesName && salesEmail && salesPhone && (
+        {has('salesName')(member) && has('salesEmail')(member) && has('salesPhone')(member) && (
           <Card>
             <Heading importance="h4">{t('[Heading] sales contact')}</Heading>
             <div className="mt-4">
-              <ContactPerson name={salesName} email={salesEmail} phone={salesPhone} />
+              <ContactPerson
+                name={propOr('', 'salesName')(member)}
+                email={propOr('', 'salesEmail')(member)}
+                phone={propOr('', 'salesPhone')(member)}
+              />
             </div>
           </Card>
         )}