refactor: rename and restructure styling variables

Author: stampaaaron

src/components/Timeline.css

@@ -2,20 +2,20 @@
   --line-width: 0.2rem;
   --line-color: black;
   --line-overhang: 1rem;
+  --item-gap: 1rem;
+  --item-start-offset-left: 0;
+  --item-start-offset-right: 5rem;
   --marker-size: 1rem;
   --marker-color: var(--line-color);
   --marker-radius: 50%;
   --pointer-height: 2rem;
   --pointer-width: 1rem;
-  --pointer-offset: 5rem;
+  --pointer-min-offset: 5rem;
+  --pointer-spacing: 1rem;
   --card-background: whitesmoke;
   --card-radius: 0.1rem;
-  --card-offset: 1rem;
   --card-shadow: unset;
   --card-padding: 1rem;
-  --offset-left: 0;
-  --offset-right: 5rem;
-  --gap: 1rem;
 }
 
 .timeline {
@@ -46,32 +46,32 @@
   display: flex;
   padding-block: var(--line-overhang);
   flex-direction: column;
-  gap: var(--gap);
+  gap: var(--item-gap);
   flex: 1;
 }
 
 .timeline__items-container--left {
-  margin-top: var(--offset-left);
+  margin-top: var(--item-start-offset-left);
 }
 
 .timeline__items-container--right {
-  margin-top: var(--offset-right);
+  margin-top: var(--item-start-offset-right);
 }
 
 .timeline-item {
   position: relative;
   display: flex;
   align-items: flex-start;
   transition: top 0.1s;
-  gap: var(--card-offset);
+  gap: var(--pointer-spacing);
 }
 
 .timeline__items-container--left .timeline-item {
   flex-direction: row-reverse;
 }
 
 .timeline-item__marker {
-  margin-top: var(--pointer-offset);
+  margin-top: var(--pointer-min-offset);
 }
 
 .timeline-item__marker:not(.timeline-item__marker--custom) {

src/components/Timeline.stories.tsx

@@ -161,13 +161,15 @@ export const SpacingOptions: StoryObj<typeof Timeline> = {
     items,
     ...defaultTimelineConfig,
     styleConfig: {
-      gap: '5rem',
-      offset: {
-        left: '10rem',
-        right: '3rem',
+      item: {
+        gap: '5rem',
+        startOffset: {
+          left: '10rem',
+          right: '3rem',
+        },
       },
       pointer: {
-        offset: '4rem',
+        minOffset: '4rem',
       },
       line: {
         overhang: '4rem',
@@ -191,7 +193,6 @@ export const CustomStyle: StoryObj<typeof Timeline> = {
         background: 'white',
         radius: '.2rem',
         shadow: '.1rem .1rem .5rem rgb(0,0,0,0.1)',
-        offset: '2rem',
       },
       line: {
         width: '.1rem',
@@ -205,6 +206,7 @@ export const CustomStyle: StoryObj<typeof Timeline> = {
       pointer: {
         width: '2rem',
         height: '2rem',
+        spacing: '2rem',
       },
     },
   },

src/helper/object.ts

@@ -1,17 +1,27 @@
-export const flattenObject = <O extends Record<string, T>, T extends O | string | undefined>(ob: Record<string, T>, delimiter?: string) => {
+export const flattenObject = <O extends Record<string, T>, T extends O | string | undefined>(
+  ob: Record<string, T>,
+  delimiter?: string,
+  keyTransformer: (key: string) => string = (key) => key,
+) => {
   const result: Record<string, string> = {};
 
   Object.keys(ob).forEach((i) => {
     const value = ob[i];
     if (typeof value === 'object') {
       const temp = flattenObject(value, delimiter);
       Object.keys(temp).forEach((j) => {
-        result[`${i}${delimiter ?? '.'}${j}`] = temp[j];
+        result[`${keyTransformer(i)}${delimiter ?? '.'}${j}`] = temp[j];
       });
     } else if (value) {
-      result[i] = value;
+      result[keyTransformer(i)] = value;
     }
   });
 
   return result;
 };
+
+export const camelCaseToKebabCase = (value: string) =>
+  value
+    .split(/(?=[A-Z])/g)
+    .join('-')
+    .toLowerCase();

src/models/style.ts

@@ -1,37 +1,40 @@
-import { flattenObject } from '../helper/object';
+import { CSSProperties } from 'react';
+import { camelCaseToKebabCase, flattenObject } from '../helper/object';
 
 export type StyleConfig = {
   line?: {
-    width?: string;
-    color?: string;
-    overhang?: string;
+    width?: CSSProperties['width'];
+    color?: CSSProperties['backgroundColor'];
+    overhang?: CSSProperties['paddingBlock'];
   };
-  gap?: string;
-  offset?: {
-    left?: string;
-    right?: string;
+  item?: {
+    gap?: CSSProperties['gap'];
+    startOffset?: {
+      left?: CSSProperties['marginTop'];
+      right?: CSSProperties['marginTop'];
+    };
   };
   marker?: {
-    size?: string;
-    color?: string;
-    radius?: string;
+    size?: CSSProperties['width'];
+    color?: CSSProperties['backgroundColor'];
+    radius?: CSSProperties['borderRadius'];
   };
   pointer?: {
-    height?: string;
-    width?: string;
-    offset?: string;
+    height?: CSSProperties['height'];
+    width?: CSSProperties['width'];
+    minOffset?: CSSProperties['marginTop'];
+    spacing?: CSSProperties['gap'];
   };
   card?: {
-    background?: string;
-    radius?: string;
-    offset?: string;
-    shadow?: string;
-    padding?: string;
+    background?: CSSProperties['backgroundColor'];
+    radius?: CSSProperties['borderRadius'];
+    shadow?: CSSProperties['boxShadow'];
+    padding?: CSSProperties['padding'];
   };
 };
 
 export const convertToCssVariable = (styleConfig: StyleConfig) =>
-  Object.entries(flattenObject(styleConfig, '-')).reduce(
-    (prev: Record<string, string>, [key, value]) => ({ ...prev, [`--${key}`]: value }),
+  Object.entries(flattenObject(styleConfig, '-', camelCaseToKebabCase)).reduce(
+    (prev: Record<string, string>, [key, value]) => ({ ...prev, [`--${key}`]: typeof value === 'number' ? `${value}px` : value }),
     {},
   );