feat: minimize default styles to only what is currently used to reduc…

…e CSS size, related to #111
hunghvu · Jan 1, 2024 · ae4fb88 · ae4fb88
1 parent 6e07a6b
commit ae4fb88
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 195 deletions.
diff --git a/apps/web/app/[slug]/related-articles.tsx b/apps/web/app/[slug]/related-articles.tsx
@@ -43,12 +43,11 @@ const RelatedArticles: React.FunctionComponent<RelatedArticlesProps> = ({ curren
                   root: {
                     className: ` w-[32px] h-[32px] text-lg md:text-xl rounded-full ${
                       currentArticleSlug === item.slug
-                        ? 'bg-dark-cyan-700/70 border border-solid border-2 border-dark-cyan-700/70'
-                        : 'bg-transparent border border-solid border-2 border-dark-cyan-700/70'
+                        ? '!bg-dark-cyan-700/70 border border-solid border-2 border-dark-cyan-700/70'
+                        : 'border border-solid border-2 border-dark-cyan-700/70'
                     }`,
                   },
                 }}
-                severity='info'
                 value={item.index}
               />
               <p

diff --git a/apps/web/app/_components/header/index.tsx b/apps/web/app/_components/header/index.tsx
@@ -38,17 +38,6 @@ const Header: React.FunctionComponent = () => {
         </nav>
       }
       model={items}
-      pt={{
-        root: {
-          className: 'flex flex-row justify-around items-center font-bold sticky top-0 z-30 bg-gradient-to-b from-[#00001a] to-[#00002f]',
-        },
-        menu: {
-          className: 'lg:gap-4 bg-transparent backdrop-blur border-x-0 border-t-0 border-b-1',
-        },
-        action: {
-          className: 'flex flex-row justify-center items-center gap-1',
-        },
-      }}
       start={<Link href='/'>Hung Vu</Link>}
     />
   );

diff --git a/apps/web/app/_components/richtext/button-copy.tsx b/apps/web/app/_components/richtext/button-copy.tsx
@@ -50,9 +50,6 @@ const ButtonCopy: React.FunctionComponent<ButtonCopyProps> = ({ language, codeSn
             showToastError();
           }
         }}
-        pt={{
-          root: { className: 'bg-transparent hover:bg-dark-cyan-800 border-[#aeaeae]' },
-        }}
       />
     </>
   );

diff --git a/apps/web/app/default-styles.tsx b/apps/web/app/default-styles.tsx
@@ -1,215 +1,86 @@
 import type { PrimeReactPTOptions } from 'primereact/api';
+import type { ButtonPassThroughMethodOptions } from 'primereact/button';
+import type { MenubarPassThroughMethodOptions } from 'primereact/menubar';
+import type { ToastState } from 'primereact/toast';
 import { geist } from './_components/fonts';
 
 const DefaultStyles: PrimeReactPTOptions = {
   button: {
-    root: ({ props, context }: any) => ({
-      className: `items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full text-base md:text-lg 
-        ${geist.className} ${
-          !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
-            ? ' bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600 '
-            : ''
-        } ${props.link ? ' text-blue-600 bg-transparent border-transparent ' : ''} ${
-          props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
-            ? ' bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600 '
-            : props.severity === 'success' && !props.text && !props.outlined && !props.plain
-            ? ' bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600 '
-            : props.severity === 'info' && !props.text && !props.outlined && !props.plain
-            ? ' bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600 '
-            : props.severity === 'warning' && !props.text && !props.outlined && !props.plain
-            ? ' bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600 '
-            : props.severity === 'help' && !props.text && !props.outlined && !props.plain
-            ? ' bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600 '
-            : props.severity === 'danger' && !props.text && !props.outlined && !props.plain
-            ? ' bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600 '
-            : ''
-        } ${props.raised ? ' shadow-lg ' : ''} ${props.rounded ? ' rounded-full ' : ' rounded-md '} ${
-          props.text && !props.plain ? ' bg-transparent border-transparent ' : ''
-        } ${
-          props.text && !props.plain
-            ? ' bg-transparent border-transparent '
-            : props.text && (props.severity === null || props.severity === 'info') && !props.plain
-            ? ' text-blue-500 hover:bg-blue-300/20 '
-            : props.text && props.severity === 'secondary' && !props.plain
-            ? ' text-gray-500 hover:bg-gray-300/20 '
-            : props.text && props.severity === 'success' && !props.plain
-            ? ' text-green-500 hover:bg-green-300/20 '
-            : props.text && props.severity === 'warning' && !props.plain
-            ? ' text-orange-500 hover:bg-orange-300/20 '
-            : props.text && props.severity === 'help' && !props.plain
-            ? ' text-purple-500 hover:bg-purple-300/20 '
-            : props.text && props.severity === 'danger' && !props.plain
-            ? ' text-red-500 hover:bg-red-300/20 '
-            : ''
-        } ${props.raised && props.text ? ' shadow-lg ' : ''} ${
-          props.plain && props.text
-            ? ' text-gray-500 hover:bg-gray-300/20 '
-            : props.plain && props.outlined
-            ? ' text-gray-500 border border-gray-500 hover:bg-gray-300/20 '
-            : props.plain && !props.outlined && !props.text
-            ? ' bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600 '
-            : ''
-        } ${
-          props.outlined && !props.plain
-            ? ' bg-transparent border '
-            : props.outlined && (props.severity === null || props.severity === 'info') && !props.plain
-            ? ' text-blue-500 border border-blue-500 hover:bg-blue-300/20 '
-            : props.outlined && props.severity === 'secondary' && !props.plain
-            ? ' text-gray-500 border border-gray-500 hover:bg-gray-300/20 '
-            : props.outlined && props.severity === 'success' && !props.plain
-            ? ' text-green-500 border border-green-500 hover:bg-green-300/20 '
-            : props.outlined && props.severity === 'warning' && !props.plain
-            ? ' text-orange-500 border border-orange-500 hover:bg-orange-300/20 '
-            : props.outlined && props.severity === 'help' && !props.plain
-            ? ' text-purple-500 border border-purple-500 hover:bg-purple-300/20 '
-            : props.outlined && props.severity === 'danger' && !props.plain
-            ? ' text-red-500 border border-red-500 hover:bg-red-300/20 '
-            : ''
-        } ${
-          props.size === null
-            ? ' px-4 py-3 text-base '
-            : props.size === 'small'
-            ? ' text-xs py-2 px-3 '
-            : props.size === 'large'
-            ? ' text-xl py-3 px-4 '
-            : ''
-        } ${context.disabled ? ' opacity-60 pointer-events-none cursor-default ' : ''}
-      `,
-    }),
-    label: ({ props }: any) => ({
-      className: `flex-1 duration-200 font-bold ${props.link ? 'hover:underline' : ''}`,
-    }),
-    icon: ({ props }: any) => ({
-      className: `mx-0 ${
-        props.iconPos === 'left' && props.label !== null
-          ? 'mr-2'
-          : props.iconPos === 'right' && props.label !== null
-          ? 'ml-2'
-          : props.iconPos === 'top' && props.label !== null
-          ? 'mb-2'
-          : props.iconPos === 'bottom' && props.label !== null
-          ? 'mt-2'
-          : ''
-      }`,
+    root: ({ context }: ButtonPassThroughMethodOptions) => ({
+      className: `flex flex-row justiry-center items-center text-base md:text-lg p-2 border rounded-md border-solid border-[#8c8c8c] hover:border-[#aeaeae]
+        ${geist.className} ${context.disabled ? ' opacity-60 pointer-events-none cursor-default ' : ''}`,
     }),
-    badge: ({ props }: any) => ({
-      className: props.badge ? 'ml-2 w-4 h-4 leading-none flex items-center justify-center' : '',
+    label: ({ props }: ButtonPassThroughMethodOptions) => ({
+      className: !props.label ? 'hidden' : 'ml-2',
     }),
   },
   card: {
     root: {
-      className: `shadow-md rounded-md ${geist.className}`,
+      className: `py-2 lg:p-4 bg-transparent hover:bg-dark-cyan-800/80 hover:rounded-md lg:min-h-[21rem] ${geist.className} mt-4`,
     },
-    body: { className: 'flex flex-col gap-5 pt-5 px-5' },
-    title: { className: 'text-2xl font-bold mb-2' },
+    body: { className: 'flex flex-col gap-5 pt-5 px-5 pb-0' },
+    title: { className: 'text-2xl font-bold mb-2 text-xl md:text-2xl lg:min-h-[6rem]' },
     subTitle: {
       className: 'font-normal mb-2 ',
     },
+    content: { className: 'text-base md:text-lg lg:min-h-[6rem]' },
   },
   divider: {
-    root: ({ props }: any) => ({
-      className: `flex relative ${
-        props.layout === 'horizontal'
-          ? 'w-full my-5 mx-0 py-0 px-5 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-[#2c323a] '
-          : props.layout === 'vertical'
-          ? 'min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:border-l before:border-[#2c323a] '
-          : ''
-      } ${
-        props.type === 'solid'
-          ? 'before:border-solid'
-          : props.type === 'dotted'
-          ? 'before:border-dotted'
-          : props.type === 'dashed'
-          ? 'before:border-dashed'
-          : ''
-      }`,
-    }),
+    root: {
+      className:
+        'flex relative w-full py-4 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-[#2c323a]',
+    },
     content: { className: 'px-1 z-10 ' },
   },
   menubar: {
     root: {
-      className: `px-2 py-1 ${geist.className} text-xl md:text-2xl border-x-0 border-b border-[#2c323a] text-[#8c8c8c]`,
+      className: `
+        flex flex-row justify-around items-center font-bold sticky top-0 z-30 bg-gradient-to-b from-[#00001a] to-[#00002f]
+        px-2 py-1 ${geist.className} text-xl md:text-2xl border-b border-[#2c323a] text-[#8c8c8c]
+      `,
     },
-    menu: ({ state }: any) => ({
-      className: `m-0 sm:p-0 list-none outline-none sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent 
-        sm:shadow-none sm:w-auto flex-col top-full left-0 absolute py-1 border-0 shadow-md w-full ${
-          state?.mobileActive ? 'flex border-x-0 border-t-0 border-b border-[#2c323a]' : 'hidden'
-        }`,
-    }),
-    menuitem: ({ context }: any) => ({
+    menu: ({ state }: MenubarPassThroughMethodOptions) => ({
       className: `
-        'sm:relative sm:w-auto w-full static transition-shadow duration-200 ${
-          context.active ? '' : 'hover:bg-[#aeaeae]/10 hover:text-[#aeaeae] hover:rounded-md'
-        }`,
+        lg:gap-4 bg-transparent backdrop-blur sm:p-0 sm:flex sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent 
+        sm:shadow-none sm:w-auto flex-col top-full left-0 absolute py-1 shadow-md w-full hover:bg-[#aeaeae]/10 hover:text-[#aeaeae]
+        ${state?.mobileActive ? 'flex border-b border-[#2c323a]' : 'hidden border-none'}`,
     }),
-    popupIcon: {
-      className: 'w-[1.5rem] h-[1.5rem]',
+    action: {
+      className: 'flex flex-row justify-center items-center gap-1 cursor-pointer p-2',
     },
-    action: ({ context }: any) => ({
-      className: `select-none cursor-pointer flex items-center no-underline overflow-hidden relative py-3 px-5 select-none ${
-        context.level === 1 ? 'pl-9 sm:pl-5' : context.level === 2 ? 'pl-14 sm:pl-5' : ''
-      }`,
-    }),
-    icon: { className: 'mr-2 text-2xl' },
-    submenuIcon: ({ props }: any) => ({
-      className: props.root ? 'ml-auto sm:ml-2' : 'ml-auto',
-    }),
-    separator: { className: 'border-t border-gray-300 ' },
     button: {
-      className: `flex sm:hidden w-8 h-8 rounded-full 
-        transition duration-200 ease-in-out cursor-pointer flex items-center 
-        justify-center no-underline hover:text-[#aeaeae]`,
-    },
-    end: {
-      className: 'ml-0',
+      className: 'sm:hidden hover:text-[#aeaeae]',
     },
   },
   tag: {
-    root: ({ props }: any) => ({
-      className: `inline-flex items-center justify-center bg-blue-500 text-xs font-semibold px-2 ${
-        props.severity === 'secondary'
-          ? 'bg-gray-500'
-          : props.severity === 'success'
-          ? 'bg-green-500'
-          : props.severity === 'info'
-          ? 'bg-dark-cyan-800'
-          : props.severity === 'warning'
-          ? 'bg-orange-500'
-          : props.severity === 'help'
-          ? 'bg-purple-500'
-          : props.severity === 'danger'
-          ? 'bg-red-500'
-          : ''
-      } ${props.rounded ? 'rounded-full' : 'rounded-md'}`,
-    }),
+    root: {
+      className: 'flex items-center justify-center text-xs font-semibold px-2 bg-dark-cyan-800',
+    },
     value: { className: `leading-6 ${geist.className} text-sm md:text-base text-[#aeaeae]` },
-    icon: { className: 'mr-1 text-sm' },
   },
   toast: {
     root: {
-      className: '-translate-x-1/2 w-96 opacity-90',
+      className: '-translate-x-1/2 w-96',
     },
-    message: ({ state, index }: any) => ({
-      className: `flex flex-start my-4 rounded-md w-full border-solid border-0 border-l-4 ${
-        state.messages[index] && state.messages[index].message.severity === 'info'
-          ? 'bg-blue-100 border-blue-500 text-blue-700'
-          : state.messages[index] && state.messages[index].message.severity === 'success'
+    // ToastPassthroughMethodOptions does not have index, so we have to customize types here
+    message: ({ state, index }: { state: ToastState; index: number }) => ({
+      className: `flex flex-row my-4 border-solid border-0 border-l-4 ${
+        state.messages[index] && state.messages[index].message.severity === 'success'
           ? 'bg-green-100 border-green-500 text-green-700'
-          : state.messages[index] && state.messages[index].message.severity === 'warn'
-          ? 'bg-orange-100 border-orange-500 text-orange-700'
           : state.messages[index] && state.messages[index].message.severity === 'error'
           ? 'bg-red-100 border-red-500 text-red-700'
           : ''
       }`,
     }),
-    content: { className: 'flex items-center py-5 px-7' },
+    content: { className: 'flex justify-center p-4' },
     icon: {
-      className: 'w-6 h-6 text-lg mr-2',
+      className: 'w-6 h-6 mr-2',
     },
     text: { className: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4' },
     summary: { className: 'font-bold block' },
     detail: { className: 'mt-1 block' },
-    // Not include animation because it does not work with unstyled:true.
+    // closeButtonIcon{} does not passthrough, so cannot change "X" button size.
+    // transition{} is not included because it does not work with unstyled:true.
   },
 };
 

diff --git a/apps/web/app/page-blog.tsx b/apps/web/app/page-blog.tsx
@@ -34,25 +34,17 @@ const BlogPage: React.FunctionComponent<{ content: any }> = ({ content }) => {
                 <aside className='flex flex-col gap-4'>
                   <div className='flex flex-row flex-wrap gap-2'>
                     {item.tags.map((tag: any) => (
-                      <Tag aria-label={`The article ${item.title} belongs to the topic ${tag}.`} key={tag.id} severity='info' value={tag.title} />
+                      <Tag aria-label={`The article ${item.title} belongs to the topic ${tag}.`} key={tag.id} value={tag.title} />
                     ))}
                   </div>
                   <Divider />
                 </aside>
               }
               header={
                 <time className='text-[#aeaeae] text-sm md:text-base pl-5' dateTime={item.date}>
-                  {utcToLocal(item.date as string, 'MMMM DD, YYYY')}
+                  {utcToLocal(item.date as string, 'MMM DD, YYYY')}
                 </time>
               }
-              pt={{
-                root: {
-                  className: `py-2 lg:p-4 bg-transparent hover:bg-dark-cyan-800/80 hover:rounded-md lg:min-h-[21rem]`,
-                },
-                title: { className: 'text-xl md:text-2xl lg:min-h-[6rem]' },
-                body: { className: 'pb-0' },
-                content: { className: 'text-base md:text-lg lg:min-h-[7.75rem]' },
-              }}
               role='article'
               title={<h2 className='line-clamp-2 lg:line-clamp-3 break-words'>{item.title}</h2>}
             >
-Original file line number
+Diff line change
@@ Expand Up @@
                 showToastError();
               }
             }}
-            pt={{
-              root: { className: 'bg-transparent hover:bg-dark-cyan-800 border-[#aeaeae]' },
-            }}
           />
         </>
       );
@@ Expand Down @@