Merge pull request #13 from troychaplin/feature/propNames

add: prefix to class props
troychaplin · Sep 8, 2024 · b80b679 · b80b679
2 parents d2417b1 + f49e878
commit b80b679
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 19 deletions.
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
@@ -10,7 +10,7 @@ export interface ButtonProps {
 
 export const Button = ({
   bgColor = '#2b8164',
-  textColor = '#ffffff', // Default text color
+  textColor = '#ffffff',
   label,
   type = 'button',
   size = 'md',

diff --git a/lib/components/Card/index.tsx b/lib/components/Card/index.tsx
@@ -1,7 +1,7 @@
-import { roundedCorners, dropShadow } from '../../utils/tailwindProps'
+import { uiRoundedCorners, uiDropShadow } from '../../utils/tailwindProps'
 
-type RoundedKeys = keyof typeof roundedCorners
-type ShadowKeys = keyof typeof dropShadow
+type RoundedKeys = keyof typeof uiRoundedCorners
+type ShadowKeys = keyof typeof uiDropShadow
 
 export interface CardProps {
   children?: React.ReactNode
@@ -12,8 +12,8 @@ export interface CardProps {
 }
 
 export const Card = ({ children, rounded, shadow, borderWidth, borderColor }: CardProps) => {
-  const cardRounded = rounded ? roundedCorners[rounded] : ''
-  const cardShadow = shadow ? dropShadow[shadow] : ''
+  const cardRounded = rounded ? uiRoundedCorners[rounded] : ''
+  const cardShadow = shadow ? uiDropShadow[shadow] : ''
 
   // Inline style object to handle border color
   const style = {

diff --git a/lib/components/CardGroup/index.tsx b/lib/components/CardGroup/index.tsx
@@ -1,4 +1,4 @@
-import { gridColumns } from '../../utils/tailwindProps'
+import { uiGridColumns } from '../../utils/tailwindProps'
 
 export interface CardGroupProps {
   children?: React.ReactNode
@@ -13,7 +13,7 @@ export const CardGroup = ({ children, cols = 3, gap = 25 }: CardGroupProps) => {
   }
 
   return (
-    <div className={`ui-cardgroup grid ${gridColumns[cols]}`} style={style}>
+    <div className={`ui-cardgroup grid ${uiGridColumns[cols]}`} style={style}>
       {children}
     </div>
   )

diff --git a/lib/components/Column/index.tsx b/lib/components/Column/index.tsx
@@ -1,7 +1,7 @@
-import { gridColumns } from '../../utils/tailwindProps'
+import { uiGridColumns } from '../../utils/tailwindProps'
 import { ColumnContent } from './content'
 
-type ColumnKeys = keyof typeof gridColumns
+type ColumnKeys = keyof typeof uiGridColumns
 
 export interface ColumnProps {
   children?: React.ReactNode
@@ -16,7 +16,7 @@ export const ColumnContainer = ({ children, cols = 2, gap = 25 }: ColumnProps) =
   }
 
   return (
-    <div className={`ui-column grid ${gridColumns[cols]}`} style={style}>
+    <div className={`ui-column grid ${uiGridColumns[cols]}`} style={style}>
       {children}
     </div>
   )

diff --git a/lib/components/Main/index.tsx b/lib/components/Main/index.tsx
@@ -1,8 +1,11 @@
 import React from 'react'
+import { uiMaxWidth } from '../../utils/tailwindProps'
+
+type MaxWidthKeys = keyof typeof uiMaxWidth
 
 export interface MainProps {
   children: React.ReactNode
-  maxWidth?: '5xl' | '6xl' | '7xl' | 'max' | 'full'
+  maxWidth?: MaxWidthKeys
   noProse?: boolean
 }
 

diff --git a/lib/components/Section/index.tsx b/lib/components/Section/index.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
+import { uiMaxWidth } from '../../utils/tailwindProps'
+
+type MaxWidthKeys = keyof typeof uiMaxWidth
 
 export interface SectionProps {
   children?: React.ReactNode
   as?: 'section' | 'div'
   isGrey?: boolean
-  maxWidth?: '5xl' | '6xl' | '7xl' | 'max' | 'full'
+  maxWidth?: MaxWidthKeys
 }
 
 export const Section = ({ children, as = 'section', isGrey, maxWidth }: SectionProps) => {

diff --git a/lib/utils/tailwindProps.ts b/lib/utils/tailwindProps.ts
@@ -1,4 +1,4 @@
-export const maxWidth = {
+export const uiMaxWidth = {
   xs: 'max-w-xs',
   sm: 'max-w-sm',
   md: 'max-w-md',
@@ -14,7 +14,7 @@ export const maxWidth = {
   full: 'max-w-full',
 }
 
-export const gridColumns = {
+export const uiGridColumns = {
   1: '',
   2: 'md:grid-cols-2',
   3: 'md:grid-cols-3',
@@ -23,19 +23,19 @@ export const gridColumns = {
   '2/3': 'lg:grid-cols-3 lg:[&>*:first-child]:col-span-2',
 }
 
-export const flexRow = {
+export const uiFlexRow = {
   sm: 'sm:flex-row',
   md: 'md:flex-row',
   lg: 'lg:flex-row',
 }
 
-export const flexCol = {
+export const uiFlexCol = {
   sm: 'sm:flex-col',
   md: 'md:flex-col',
   lg: 'lg:flex-col',
 }
 
-export const roundedCorners = {
+export const uiRoundedCorners = {
   none: 'rounded-none',
   sm: 'rounded-sm',
   base: 'rounded',
@@ -46,7 +46,7 @@ export const roundedCorners = {
   full: 'rounded-full',
 }
 
-export const dropShadow = {
+export const uiDropShadow = {
   none: 'shadow-none',
   base: 'shadow',
   md: 'shadow-md',