feat(chat-settings): add font-weight on chat theme settings

NAS-Service · Sep 10, 2022 · d979507 · d979507
1 parent e0bcabb
commit d979507
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 5 deletions.
diff --git a/apps/app/src/app/pages/chatbox/create.tsx b/apps/app/src/app/pages/chatbox/create.tsx
@@ -15,6 +15,7 @@ const defaultSettings: Omit<ChatTheme, 'user_id' | 'id'> | ChatTheme = {
   name: {
     fullWidth: false,
     fontFamily: 'Rubik',
+    fontWeight: 'regular',
     fontSize: '16',
     textAlign: 'left' as 'left' | 'right' | 'center',
     textColor: '#000000',
@@ -33,6 +34,7 @@ const defaultSettings: Omit<ChatTheme, 'user_id' | 'id'> | ChatTheme = {
   message: {
     fullWidth: false,
     fontFamily: 'Rubik',
+    fontWeight: 'regular',
     fontSize: '14',
     textAlign: 'left' as 'left' | 'right' | 'center',
     textColor: '#000000',

diff --git a/libs/shared/schema/src/chat.ts b/libs/shared/schema/src/chat.ts
@@ -9,6 +9,7 @@ export const GlobalSchema = z.object({
 export const NameChatSchema = z.object({
   fullWidth: z.boolean(),
   fontFamily: z.string(),
+  fontWeight: z.string(),
   fontSize: z.string(),
   textAlign: z.enum(['left', 'center', 'right']),
   textColor: z.string(),
@@ -38,6 +39,7 @@ export const NameChatSchema = z.object({
 export const MessageSchema = z.object({
   fullWidth: z.boolean(),
   fontFamily: z.string(),
+  fontWeight: z.string(),
   fontSize: z.string(),
   textAlign: z.enum(['left', 'center', 'right']),
   textColor: z.string(),

diff --git a/libs/shared/ui/src/lib/components/chat/chat-message/chat-message.tsx b/libs/shared/ui/src/lib/components/chat/chat-message/chat-message.tsx
@@ -33,6 +33,7 @@ export function ChatMessage(props: ChatMessageProps) {
       setNameStyle({
         width: settings.name.fullWidth ? '100%' : 'auto',
         fontFamily: settings.name.fontFamily,
+        fontWeight: settings.name.fontWeight,
         color: settings.name.textColor,
         backgroundColor: settings.name.backgroundColor,
         textAlign: settings.name.textAlign as 'left' | 'center' | 'right',
@@ -52,6 +53,7 @@ export function ChatMessage(props: ChatMessageProps) {
       setMessageStyle({
         width: settings.message.fullWidth ? '100%' : 'auto',
         fontFamily: settings.message.fontFamily,
+        fontWeight: settings.message.fontWeight,
         color: settings.message.textColor,
         backgroundColor: settings.message.backgroundColor,
         textAlign: settings.message.textAlign as 'left' | 'right' | 'center',

diff --git a/libs/shared/ui/src/lib/components/chat/chat-settings/chat-settings.stories.tsx b/libs/shared/ui/src/lib/components/chat/chat-settings/chat-settings.stories.tsx
@@ -11,4 +11,6 @@ const Template: ComponentStory<typeof ChatSettings> = (args) => (
 );
 
 export const Primary = Template.bind({});
-Primary.args = {};
+Primary.args = {
+  onSettingsChange: (settings) => console.log(settings),
+};
diff --git a/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-message.tsx b/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-message.tsx
@@ -1,8 +1,10 @@
+import { useState } from 'react';
 import { Control, Controller } from 'react-hook-form';
 import Accordion from '../../accordion/accordion';
 import AccordionItem from '../../accordion/accordion-item';
 import Color from '../../forms/color/color';
-import FontSelect from '../../forms/font-select/font-select';
+import FontSelect, { fontVariants } from '../../forms/font-select/font-select';
+import Select from '../../forms/select/select';
 import Slider from '../../forms/slider/slider';
 import Spacing from '../../forms/spacing/spacing';
 import Switch from '../../forms/switch/switch';
@@ -14,6 +16,14 @@ export interface TabsGeneralProps {
 
 function TabsMessage(props: TabsGeneralProps) {
   const { control } = props;
+  const [fontVariants, setFontVariants] = useState<fontVariants[]>([
+    { label: 'Thin', value: '100' },
+    { label: 'Light', value: '300' },
+    { label: 'Regular', value: 'regular' },
+    { label: 'Medium', value: '500' },
+    { label: 'Bold', value: '700' },
+    { label: 'Black', value: '900' },
+  ]);
 
   return (
     <div>
@@ -37,11 +47,33 @@ function TabsMessage(props: TabsGeneralProps) {
               <FontSelect
                 label="Font (with Google Fonts)"
                 className="mb-3"
-                onChange={(fontName, variants) => onChange(fontName)}
+                onChange={(value) => onChange(value)}
                 defaultValue={{ value: value, label: value }}
               />
             )}
           />
+          <Controller
+            name="message.fontWeight"
+            control={control}
+            defaultValue="regular"
+            render={({ field: { onChange, value } }) => (
+              <Select
+                label="Font weight"
+                options={fontVariants.map(({ label, value }) => {
+                  return {
+                    label: label[0].toUpperCase() + label.substring(1),
+                    value: value,
+                  };
+                })}
+                onChange={(value) => onChange(value?.value)}
+                defaultValue={{
+                  label: value[0].toUpperCase() + value.substring(1),
+                  value: value,
+                }}
+                className="mb-3"
+              />
+            )}
+          />
           <Controller
             name="message.fontSize"
             control={control}

diff --git a/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-name.tsx b/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-name.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Control, Controller } from 'react-hook-form';
 import Accordion from '../../accordion/accordion';
 import AccordionItem from '../../accordion/accordion-item';
 import Color from '../../forms/color/color';
-import FontSelect from '../../forms/font-select/font-select';
+import FontSelect, { fontVariants } from '../../forms/font-select/font-select';
 import Select from '../../forms/select/select';
 import Slider from '../../forms/slider/slider';
 import Spacing from '../../forms/spacing/spacing';
@@ -15,6 +16,14 @@ export interface TabsGeneralProps {
 
 function TabsName(props: TabsGeneralProps) {
   const { control } = props;
+  const [fontVariants, setFontVariants] = useState<fontVariants[]>([
+    { label: 'Thin', value: '100' },
+    { label: 'Light', value: '300' },
+    { label: 'Regular', value: 'regular' },
+    { label: 'Medium', value: '500' },
+    { label: 'Bold', value: '700' },
+    { label: 'Black', value: '900' },
+  ]);
 
   return (
     <div>
@@ -72,11 +81,36 @@ function TabsName(props: TabsGeneralProps) {
               <FontSelect
                 label="Font (with Google Fonts)"
                 className="mb-3"
-                onChange={(fontName, variants) => onChange(fontName)}
+                onChange={(fontName, variants) => {
+                  setFontVariants(variants);
+                  onChange(fontName);
+                }}
                 defaultValue={{ label: value, value: value }}
               />
             )}
           />
+          <Controller
+            name="name.fontWeight"
+            control={control}
+            defaultValue="regular"
+            render={({ field: { onChange, value } }) => (
+              <Select
+                label="Font weight"
+                options={fontVariants.map(({ label, value }) => {
+                  return {
+                    label: label[0].toUpperCase() + label.substring(1),
+                    value: value,
+                  };
+                })}
+                onChange={(value) => onChange(value?.value)}
+                defaultValue={{
+                  label: value[0].toUpperCase() + value.substring(1),
+                  value: value,
+                }}
+                className="mb-3"
+              />
+            )}
+          />
           <Controller
             name="name.fontSize"
             control={control}