refactor(Conversation): vanilla extract

.changeset/slimy-rats-lose.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+Refactor component `Conversation` to use vanilla extract instead of Emotion

packages/plus/src/components/Conversation/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,128 +2,33 @@
 
 exports[`conversation > should work with Default 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  margin-top: 1.5rem;
-  text-align: center;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-  margin-bottom: 1rem;
-}
-
-.emotion-4 {
-  width: 100%;
-}
-
-.emotion-6 {
-  margin: 0 1.5rem;
-  margin-top: 1.5rem;
-  border-radius: 0.25rem;
-  padding: 1.5rem;
-  background-color: #e9eaeb;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  margin: 0 3.5rem;
-}
-
-.emotion-10 {
-  background-color: #e9eaeb;
-  height: 16px;
-  margin-right: 0.5rem;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-}
-
-.emotion-14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  margin-bottom: 1rem;
-}
-
-.emotion-18 {
-  margin: 0 1.5rem;
-  margin-top: 1.5rem;
-  border-radius: 0.25rem;
-  padding: 1.5rem;
-  background-color: #f1eefc;
-}
-
-.emotion-20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-  margin: 0 3.5rem;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
       class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u5d"
     >
       <p
-        class="emotion-0 emotion-1 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owl uv_m4c9own uv_m4c9ow1b uv_m4c9ow3f"
+        class="styles__16zcyo53 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owl uv_m4c9own uv_m4c9ow1b uv_m4c9ow3f"
       >
         2022-03-02
       </p>
       <div
-        class="emotion-2 emotion-3"
+        class="styles_left__16zcyo55 styles__16zcyo54"
       >
         <div
-          class="emotion-4 emotion-5"
+          class="styles__16zcyo5b"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="styles_left__16zcyo58 styles__16zcyo57"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="styles_left__16zcyo51 styles__16zcyo50"
             >
               Hello
             </div>
             <span
-              class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
+              class="styles__16zcyo5c uv_d6zknp0 uv_d6zknp4"
             >
               <span
                 class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
@@ -134,29 +39,29 @@ exports[`conversation > should work with Default 1`] = `
           </div>
         </div>
         <div
-          class="emotion-12 emotion-13"
+          class="styles__16zcyo5a"
         >
           <div>
             Hello
           </div>
         </div>
       </div>
       <div
-        class="emotion-14 emotion-3"
+        class="styles_right__16zcyo56 styles__16zcyo54"
       >
         <div
-          class="emotion-4 emotion-5"
+          class="styles__16zcyo5b"
         >
           <div
-            class="emotion-18 emotion-7"
+            class="styles_right__16zcyo59 styles__16zcyo57"
           >
             <div
-              class="emotion-20 emotion-9"
+              class="styles_right__16zcyo52 styles__16zcyo50"
             >
               Hello
             </div>
             <span
-              class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
+              class="styles__16zcyo5c uv_d6zknp0 uv_d6zknp4"
             >
               <span
                 class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
@@ -167,7 +72,7 @@ exports[`conversation > should work with Default 1`] = `
           </div>
         </div>
         <div
-          class="emotion-12 emotion-13"
+          class="styles__16zcyo5a"
         >
           <div>
             Hello

packages/plus/src/components/Conversation/index.tsx

@@ -1,68 +1,35 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { Stack, Tag, Text } from '@ultraviolet/ui'
 import type { ReactNode } from 'react'
+import {
+  conversationAvatar,
+  conversationBubble,
+  conversationContainer,
+  conversationInfos,
+  conversationRawMessage,
+  conversationTag,
+  styledText,
+} from './styles.css'
 
 const Conversation = ({ children }: { children: ReactNode }) => (
   <Stack>{children}</Stack>
 )
-const StyledInfos = styled.div<{ align: 'left' | 'right' }>`
-  display: flex;
-  align-items: center;
-  justify-content: ${({ align }) =>
-    align === 'left' ? 'flex-start' : 'flex-end'};
-  margin: 0 ${({ theme }) => theme.space['7']};
-`
+
 export const MessageInfos = ({
   children,
   align,
 }: {
   children: ReactNode
   align: 'left' | 'right'
-}) => <StyledInfos align={align}>{children}</StyledInfos>
-
-const StyledText = styled(Text)`
-  margin-top: ${({ theme }) => theme.space['3']};
-  text-align: center;
-`
+}) => <div className={conversationInfos[align]}>{children}</div>
 
 export const Date = ({ children }: { children: ReactNode }) => (
-  <StyledText as="p" prominence="weak" variant="bodySmall">
+  <Text as="p" className={styledText} prominence="weak" variant="bodySmall">
     {children}
-  </StyledText>
+  </Text>
 )
 
-const MessageContainer = styled('div', {
-  shouldForwardProp: prop => !['align'].includes(prop),
-})<{ align: 'left' | 'right' }>`
-  display: flex;
-  flex-direction: ${({ align }) => (align === 'left' ? 'row-reverse' : 'row')};
-  margin-bottom: ${({ theme }) => theme.space['2']};
-`
-
-const RawMessageContainer = styled('div', {
-  shouldForwardProp: prop => !['align'].includes(prop),
-})<{ align: 'left' | 'right' }>`
-  margin: 0 ${({ theme }) => theme.space['3']};
-  margin-top: ${({ theme }) => theme.space['3']};
-  border-radius: ${({ theme }) => theme.radii.default};
-  padding: ${({ theme }) => theme.space['3']};
-  background-color: ${({ theme, align }) =>
-    align === 'left'
-      ? theme.colors.neutral.backgroundStrong
-      : theme.colors.primary.background};
-`
-
-const AvatarContainer = styled.div`
-  display: flex;
-  align-self: flex-end;
-`
-
-const BubbleContainer = styled.div`
-  width: 100%;
-`
-
 type MessageProps = {
   className?: string
   children: ReactNode
@@ -76,22 +43,18 @@ export const Message = ({
   avatar,
   align = 'right',
 }: MessageProps) => (
-  <MessageContainer align={align} className={className}>
-    <BubbleContainer>
-      <RawMessageContainer align={align}>{children}</RawMessageContainer>
-    </BubbleContainer>
-    <AvatarContainer>{avatar}</AvatarContainer>
-  </MessageContainer>
+  <div
+    className={`${className ? `${className} ` : ''}${conversationContainer[align]}`}
+  >
+    <div className={conversationBubble}>
+      <div className={conversationRawMessage[align]}>{children}</div>
+    </div>
+    <div className={conversationAvatar}>{avatar}</div>
+  </div>
 )
 
-const StyledTag = styled(Tag)`
-  background-color: ${({ theme }) => theme.colors.neutral.backgroundStrong};
-  height: 16px;
-  margin-right: ${({ theme }) => theme.space['1']};
-`
-
 export const MessageTag = ({ children }: { children: ReactNode }) => (
-  <StyledTag>{children}</StyledTag>
+  <Tag className={conversationTag}>{children}</Tag>
 )
 
 Conversation.Date = Date

packages/plus/src/components/Conversation/styles.css.ts

@@ -0,0 +1,58 @@
+import { theme } from '@ultraviolet/themes'
+import { style, styleVariants } from '@vanilla-extract/css'
+
+const conversationInfosBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  margin: `0 ${theme.space[7]}`,
+})
+
+export const conversationInfos = styleVariants({
+  left: [conversationInfosBase, { justifyContent: 'flex-start' }],
+  right: [conversationInfosBase, { justifyContent: 'flex-end' }],
+})
+
+export const styledText = style({
+  marginTop: theme.space[3],
+  textAlign: 'center',
+})
+
+const conversationContainerBase = style({
+  display: 'flex',
+  marginBottom: theme.space[2],
+})
+
+export const conversationContainer = styleVariants({
+  left: [conversationContainerBase, { flexDirection: 'row-reverse' }],
+  right: [conversationContainerBase, { flexDirection: 'row' }],
+})
+
+const conversationRawMessageBase = style({
+  margin: theme.space[3],
+  marginBottom: 0,
+  borderRadius: theme.radii.default,
+  padding: theme.space[3],
+})
+export const conversationRawMessage = styleVariants({
+  left: [
+    conversationRawMessageBase,
+    { backgroundColor: theme.colors.neutral.backgroundStrong },
+  ],
+  right: [
+    conversationRawMessageBase,
+    { backgroundColor: theme.colors.primary.background },
+  ],
+})
+
+export const conversationAvatar = style({
+  display: 'flex',
+  alignSelf: 'flex-end',
+})
+
+export const conversationBubble = style({ width: '100%' })
+
+export const conversationTag = style({
+  backgroundColor: theme.colors.neutral.backgroundStrong,
+  height: theme.sizing[200],
+  marginRight: theme.space[1],
+})