From d552c387b91bd61ed9f6abb2b3cb20cbe9f74c00 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Tue, 21 May 2024 20:21:08 -0400
Subject: [PATCH 1/2] add: column component

---
 lib/components/CardGroup/index.tsx       |  2 +-
 lib/components/Column/Column.stories.tsx | 34 ++++++++++++++++++++++++
 lib/components/Column/content.tsx        | 11 ++++++++
 lib/components/Column/index.tsx          | 27 +++++++++++++++++++
 lib/main.ts                              |  1 +
 5 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 lib/components/Column/Column.stories.tsx
 create mode 100644 lib/components/Column/content.tsx
 create mode 100644 lib/components/Column/index.tsx

diff --git a/lib/components/CardGroup/index.tsx b/lib/components/CardGroup/index.tsx
index dd5b183..ce0ef9e 100644
--- a/lib/components/CardGroup/index.tsx
+++ b/lib/components/CardGroup/index.tsx
@@ -6,7 +6,7 @@ interface CardGroupProps {
   gap?: number
 }
 
-export const CardGroup = ({ children, cols = 3, gap = 20 }: CardGroupProps) => {
+export const CardGroup = ({ children, cols = 3, gap = 30 }: CardGroupProps) => {
   // Inline style object to handle grid gap
   const style = {
     gridGap: gap ? gap : '',
diff --git a/lib/components/Column/Column.stories.tsx b/lib/components/Column/Column.stories.tsx
new file mode 100644
index 0000000..53f590c
--- /dev/null
+++ b/lib/components/Column/Column.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Column } from '.'
+
+const meta = {
+  title: 'Layouts/Column',
+  component: Column,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Column>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => (
+    <Column {...args}>
+      <Column.Content>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida orci elit, at consectetur lectus
+          iaculis vel. Cras non fringilla velit, a posuere felis. Mauris faucibus dui ultricies ultrices luctus. Aliquam
+          erat volutpat. Vestibulum imperdiet, enim non elementum pulvinar, lacus quam vestibulum eros, ut eleifend sem
+          dui ut quam.
+        </p>
+      </Column.Content>
+      <Column.Content>
+        <p>
+          Nam facilisis pulvinar ligula nec cursus. Mauris ut tempor enim. Nullam sodales eros ut velit ullamcorper
+          fringilla. Fusce a sem est. Vivamus eleifend accumsan pellentesque. Pellentesque in ante urna. Nullam finibus
+          sed nunc ac volutpat. Maecenas lacinia justo a arcu tempor, ac tempor magna faucibus.
+        </p>
+      </Column.Content>
+    </Column>
+  ),
+}
diff --git a/lib/components/Column/content.tsx b/lib/components/Column/content.tsx
new file mode 100644
index 0000000..511eb1b
--- /dev/null
+++ b/lib/components/Column/content.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export interface ColumnContentProps {
+  children: React.ReactNode
+}
+
+export const ColumnContent = ({ children }: ColumnContentProps) => {
+  return <div>{children}</div>
+}
+
+ColumnContent.displayName = 'Column.Content'
diff --git a/lib/components/Column/index.tsx b/lib/components/Column/index.tsx
new file mode 100644
index 0000000..f629a81
--- /dev/null
+++ b/lib/components/Column/index.tsx
@@ -0,0 +1,27 @@
+import { gridColumns } from '../../utils/tailwindProps'
+import { ColumnContent } from './content'
+
+type ColumnKeys = keyof typeof gridColumns
+
+interface ColumnProps {
+  children?: React.ReactNode
+  cols?: ColumnKeys
+  gap?: number
+}
+
+export const ColumnContainer = ({ children, cols = 2, gap = 30 }: ColumnProps) => {
+  // Inline style object to handle grid gap
+  const style = {
+    gridGap: gap ? gap : '',
+  }
+
+  return (
+    <div className={`grid ${gridColumns[cols]}`} style={style}>
+      {children}
+    </div>
+  )
+}
+
+export const Column = Object.assign(ColumnContainer, {
+  Content: ColumnContent,
+})
diff --git a/lib/main.ts b/lib/main.ts
index b68a577..20a90cf 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -4,3 +4,4 @@ export { Button } from './components/Button'
 export { ButtonGroup } from './components/ButtonGroup'
 export { Card } from './components/Card'
 export { CardGroup } from './components/CardGroup'
+export { Column } from './components/Column'

From 29cc564cf333d4cb91bbdcef16c197ec335161c2 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Sat, 25 May 2024 21:01:24 -0400
Subject: [PATCH 2/2] finish: column

---
 lib/components/ButtonGroup/index.tsx | 2 +-
 lib/components/Card/index.tsx        | 2 +-
 lib/components/CardGroup/index.tsx   | 2 +-
 lib/components/Column/index.tsx      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/components/ButtonGroup/index.tsx b/lib/components/ButtonGroup/index.tsx
index 992cb20..3c197f3 100644
--- a/lib/components/ButtonGroup/index.tsx
+++ b/lib/components/ButtonGroup/index.tsx
@@ -13,7 +13,7 @@ export const ButtonGroup = ({ children, isCenter = false, gap = 10 }: ButtonGrou
   }
 
   return (
-    <div className={`flex ${centerButtons}`} style={style}>
+    <div className={`ui-buttongroup flex ${centerButtons}`} style={style}>
       {children}
     </div>
   )
diff --git a/lib/components/Card/index.tsx b/lib/components/Card/index.tsx
index aca4350..38ca6bc 100644
--- a/lib/components/Card/index.tsx
+++ b/lib/components/Card/index.tsx
@@ -23,7 +23,7 @@ export const Card = ({ children, rounded, shadow, borderWidth, borderColor }: Ca
   }
 
   return (
-    <div className={`bg-white ${cardRounded} ${cardShadow}`} style={style}>
+    <div className={`ui-card bg-white ${cardRounded} ${cardShadow}`} style={style}>
       <div className="py-5 px-7">{children}</div>
     </div>
   )
diff --git a/lib/components/CardGroup/index.tsx b/lib/components/CardGroup/index.tsx
index ce0ef9e..06dbcbc 100644
--- a/lib/components/CardGroup/index.tsx
+++ b/lib/components/CardGroup/index.tsx
@@ -13,7 +13,7 @@ export const CardGroup = ({ children, cols = 3, gap = 30 }: CardGroupProps) => {
   }
 
   return (
-    <div className={`grid ${gridColumns[cols]}`} style={style}>
+    <div className={`ui-cardgroup grid ${gridColumns[cols]}`} style={style}>
       {children}
     </div>
   )
diff --git a/lib/components/Column/index.tsx b/lib/components/Column/index.tsx
index f629a81..44975f7 100644
--- a/lib/components/Column/index.tsx
+++ b/lib/components/Column/index.tsx
@@ -16,7 +16,7 @@ export const ColumnContainer = ({ children, cols = 2, gap = 30 }: ColumnProps) =
   }
 
   return (
-    <div className={`grid ${gridColumns[cols]}`} style={style}>
+    <div className={`ui-column grid ${gridColumns[cols]}`} style={style}>
       {children}
     </div>
   )