refactor(lib): standardize CSS class naming and streamline imports

Author: websiddu

lib/Accordion/Accordion.module.scss renamed to lib/Accordion/Accordion.scss

@@ -1,4 +1,4 @@
-.accordionGroup {
+.accordion-group {
   .accordion:first-child {
     @apply rounded-b-none rounded-t-xl border-b-0;
   }
@@ -13,10 +13,10 @@
 }
 
 .accordion {
-  @apply bg-white overflow-hidden rounded-xl border dark:border-slate-700;
+  @apply overflow-hidden rounded-xl border border-gray-950/10 dark:border-gray-100/10;
 
-  .accordionSummary {
-    @apply m-0 cursor-pointer select-none bg-slate-50 px-4 py-2.5 font-medium text-gray-900 dark:bg-gray-900 dark:text-gray-200;
+  .accordion-summary {
+    @apply m-0 cursor-pointer select-none px-4 py-2.5 font-medium bg-gray-800/5 dark:bg-gray-300/5;
 
     display: flex;
 
@@ -37,7 +37,7 @@
   }
 
   &[open] {
-    .accordionSummary::before {
+    .accordion-summary::before {
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 15 6-6 6 6"/></svg>');
 
       @media (prefers-color-scheme: dark) {
@@ -53,6 +53,6 @@
   }
 }
 
-.accordionContent {
-  @apply p-4 dark:bg-slate-900 dark:text-slate-200;
+.accordion-content {
+  @apply p-4;
 }

lib/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Accordion.module.scss';
+import './Accordion.scss';
 
 interface AccordionProps {
   title: string;
@@ -12,13 +12,13 @@ interface AccordionGroupProps {
 
 export const Accordion: React.FC<AccordionProps> = ({ title = '', children }) => {
   return (
-    <details className={styles['accordion']}>
-      <summary className={styles['accordionSummary']}>{title}</summary>
-      <div className={styles['accordionContent']}>{children}</div>
+    <details className={'accordion'}>
+      <summary className={'accordion-summary'}>{title}</summary>
+      <div className={'accordion-content'}>{children}</div>
     </details>
   );
 };
 
 export const AccordionGroup: React.FC<AccordionGroupProps> = ({ children }) => {
-  return <div className={styles['accordionGroup']}>{children}</div>;
+  return <div className={'accordion-group'}>{children}</div>;
 };

lib/Steps/Steps.module.scss renamed to lib/Steps/Steps.scss

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Steps.module.scss';
+import './Steps.scss';
 
 interface StepProps {
   number: number | string;
@@ -10,19 +10,19 @@ interface StepProps {
 export const Step = ({ children, number, title }: StepProps) => {
   return (
     <div
-      className={styles['step']}
+      className={'step'}
       role="listitem"
     >
-      <div className={styles['stepLine']}></div>
-      <div className={styles['stepNumber']}>{number}</div>
-      <div className={styles['stepContainer']}>
-        <h3 className={styles['stepTitle']}>{title}</h3>
-        <div className={styles['stepContent']}>{children}</div>
+      <div className={'stepLine'}></div>
+      <div className={'stepNumber'}>{number}</div>
+      <div className={'stepContainer'}>
+        <h3 className={'stepTitle'}>{title}</h3>
+        <div className={'stepContent'}>{children}</div>
       </div>
     </div>
   );
 };
 
 export const Steps = ({ children }: { children: React.ReactNode }) => {
-  return <div className={styles['steps']}>{children}</div>;
+  return <div className={'steps'}>{children}</div>;
 };

lib/Steps/Steps.tsx

@@ -4,19 +4,19 @@
   width: 100%;
 }
 
-.tabLabel {
+.tab-label {
   cursor: pointer;
-  @apply mb-2 mr-3 rounded-md px-3 py-1.5 text-sm font-medium hover:bg-slate-800/10 dark:hover:bg-slate-800 text-slate-500;
+  @apply mb-2 mr-3 rounded-md px-3 py-1.5 text-sm font-medium hover:bg-gray-800/10 dark:hover:bg-gray-800 dark:text-gray-300 text-gray-500;
 }
 
-.tabRadio {
+.tab-radio {
   position: absolute;
   opacity: 0;
   top: 0;
 }
 
-.tabRadio:checked + .tabLabel {
-  @apply relative block text-slate-800 dark:text-slate-200;
+.tab-radio:checked + .tab-label {
+  @apply relative block text-gray-800 dark:text-gray-50;
 
   &:after {
     content: '';
@@ -27,17 +27,17 @@
     right: 0;
     bottom: -9px;
 
-    @apply bg-slate-700;
+    @apply bg-gray-700 dark:bg-gray-50;
   }
 
-  + .tabPanel {
+  + .tab-panel {
     display: block;
   }
 }
 
-.tabPanel {
+.tab-panel {
   order: 99;
   display: none;
   width: 100%;
-  @apply border-t p-4;
+  @apply border-t p-4 border-t-gray-900/10 dark:border-t-gray-50/10;
 }

lib/Tabs/Tabs.module.scss renamed to lib/Tabs/Tabs.scss

@@ -1,35 +1,35 @@
 import React, { Children, isValidElement, ReactNode } from 'react';
-import styles from './Tabs.module.scss';
+import './Tabs.scss';
 
 interface TabsProps {
   children: ReactNode[] | ReactNode;
 }
 
 const Tabs = ({ children }: TabsProps) => {
   return (
-    <div className={styles['tabs']}>
+    <div className={'tabs'}>
       {Children.map(children, (child, index) => {
         if (!isValidElement(child)) return null;
 
         return (
           <>
             <input
-              className={styles['tabRadio']}
+              className={'tab-radio'}
               type="radio"
               name="tabs"
               id={`tab${index}`}
               defaultChecked={index === 0}
             />
             <label
-              className={styles['tabLabel']}
+              className={'tab-label'}
               htmlFor={`tab${index}`}
             >
               {
                 // @ts-ignore
                 child.props.title
               }
             </label>
-            <div className={styles['tabPanel']}>
+            <div className={'tab-panel'}>
               {
                 // @ts-ignore
                 child.props.children

lib/Tabs/Tabs.tsx

@@ -8,6 +8,6 @@
   }
 
   img {
-    @apply rounded-xl outline outline-offset-8 outline-gray-100;
+    @apply rounded-xl outline outline-offset-8 outline-gray-900/10 dark:outline-gray-50/10;
   }
 }

lib/Typography/Typography.module.scss renamed to lib/Typography/Typography.scss

@@ -1,5 +1,5 @@
-import styles from './Typography.module.scss';
+import './Typography.scss';
 
 export const Typography = ({ children }: { children: React.ReactNode }) => {
-  return <div className={styles.typography}>{children}</div>;
+  return <div className={'typography dark:prose-invert'}>{children}</div>;
 };

lib/Typography/Typography.tsx

@@ -1,36 +1,27 @@
-import { Accordion, AccordionGroup } from '../../dist/accordion';
-import { Typography } from '../../dist/typography';
+import { Accordion, AccordionGroup } from '../../lib/Accordion/Accordion';
 
 export const AccordionSamples = () => {
   return (
     <>
       <AccordionGroup>
         <Accordion title="How does a tech-savvy person fix a broken lightbulb?">
-          <Typography>
-            They turn it off and on again, just like they do with routers, modems, and any other
-            device. If that fails, they google 'why won't my lightbulb work?
-          </Typography>
+          They turn it off and on again, just like they do with routers, modems, and any other
+          device. If that fails, they google 'why won't my lightbulb work?
         </Accordion>
 
         <Accordion title="Why do bugs always show up after deadlines?">
-          <Typography>
-            Because bugs love to party when you're done! It's like they know when you've declared
-            'code complete' and show up uninvited.
-          </Typography>
+          Because bugs love to party when you're done! It's like they know when you've declared
+          'code complete' and show up uninvited.
         </Accordion>
 
         <Accordion title="What happens when you fix a bug at 2 a.m.?">
-          <Typography>
-            You either break five other things or question if you're even awake. The real mystery:
-            Why are you working at 2 a.m.?
-          </Typography>
+          You either break five other things or question if you're even awake. The real mystery: Why
+          are you working at 2 a.m.?
         </Accordion>
 
         <Accordion title="Why does code always break right before launch?">
-          <Typography>
-            Because code is like a toddler — it behaves until everyone's watching. Then it throws a
-            tantrum right when it matters most!
-          </Typography>
+          Because code is like a toddler — it behaves until everyone's watching. Then it throws a
+          tantrum right when it matters most!
         </Accordion>
       </AccordionGroup>
     </>

src/pages/AccordionSamples.tsx

@@ -4,10 +4,7 @@ import { ImageZoom } from '../../lib/Image/ImageZoom';
 export const ImageSamples = () => {
   return (
     <Typography>
-      <ImageZoom
-        className="rounded-xl"
-        src="https://i.stubby.io/zb2dzjl/c5ajqz.webp"
-      ></ImageZoom>
+      <ImageZoom src="https://i.stubby.io/zb2dzjl/c5ajqz.webp"></ImageZoom>
     </Typography>
   );
 };