From 3a9b9f9df6af35b6240e3043ef943037bf53008b Mon Sep 17 00:00:00 2001 From: lightyfr <127269031+lightyfr@users.noreply.github.com> Date: Fri, 6 Dec 2024 22:58:57 -0500 Subject: [PATCH 1/3] feat: add BentoGrid component with responsive grid layout and styles --- src/once-ui/components/BentoGrid.module.scss | 29 +++++++++ src/once-ui/components/BentoGrid.tsx | 67 ++++++++++++++++++++ src/once-ui/components/index.ts | 1 + 3 files changed, 97 insertions(+) create mode 100644 src/once-ui/components/BentoGrid.module.scss create mode 100644 src/once-ui/components/BentoGrid.tsx diff --git a/src/once-ui/components/BentoGrid.module.scss b/src/once-ui/components/BentoGrid.module.scss new file mode 100644 index 0000000..9582f98 --- /dev/null +++ b/src/once-ui/components/BentoGrid.module.scss @@ -0,0 +1,29 @@ +.bentoGrid { + display: grid; + grid-gap: var(--static-space-24); + padding: var(--static-space-24); + animation: fadeIn var(--transition-duration-micro-medium) + var(--transition-eased); + background-color: var(--background-surface); + } + + .gridItem { + background-color: var(--surface-background); + border: 1px solid var(--surface-border); + border-radius: var(--radius-m); + overflow: hidden; + transition: transform 0.2s ease-in-out; + padding: var(--static-space-16); + + &:hover { + transform: scale(1.02); + } + } + + /* Responsive Adjustments */ + @media (max-width: 768px) { + .bentoGrid { + grid-template-columns: repeat(1, 1fr); + } + } + \ No newline at end of file diff --git a/src/once-ui/components/BentoGrid.tsx b/src/once-ui/components/BentoGrid.tsx new file mode 100644 index 0000000..cd026c2 --- /dev/null +++ b/src/once-ui/components/BentoGrid.tsx @@ -0,0 +1,67 @@ +import React, { ReactNode, forwardRef } from "react"; +import classNames from "classnames"; +import { GridProps } from "./Grid"; +import styles from "./BentoGrid.module.scss"; +import { Flex } from "./Flex"; + +interface BentoGridProps extends GridProps { + layout: GridLayout[]; + children: ReactNode[]; +} + +interface GridLayout { + area?: string; + columnSpan?: number; + rowSpan?: number; +} + +const BentoGrid = forwardRef( + ({ layout, children, className, style, ...rest }, ref) => { + const combinedStyle = { + ...style, + display: "grid", + gridGap: "var(--static-space-24)", + padding: "var(--static-space-24)", + animation: + "fadeIn var(--transition-duration-micro-medium) var(--transition-eased)", + backgroundColor: "var(--background-surface)", + }; + + return ( + + {children.map((child, index) => { + const itemLayout = layout[index] || {}; + const gridStyle: React.CSSProperties = { + gridColumn: itemLayout.columnSpan + ? `span ${itemLayout.columnSpan}` + : undefined, + gridRow: itemLayout.rowSpan + ? `span ${itemLayout.rowSpan}` + : undefined, + }; + + return ( + + {child} + + ); + })} + + ); + }, +); + +BentoGrid.displayName = "BentoGrid"; + +export { BentoGrid }; +export type { BentoGridProps, GridLayout }; diff --git a/src/once-ui/components/index.ts b/src/once-ui/components/index.ts index 2511655..e38883b 100644 --- a/src/once-ui/components/index.ts +++ b/src/once-ui/components/index.ts @@ -20,6 +20,7 @@ export type { DropdownOptions } from './Dropdown'; export { DropdownWrapper } from './DropdownWrapper'; export { Grid } from './Grid'; export type { GridProps } from './Grid'; +export { BentoGrid } from "./BentoGrid"; export { Feedback } from './Feedback'; export { Flex } from './Flex'; export { GlitchFx } from './GlitchFx'; From cd4a6ee730a48a92f6766d0b0292172a87b811ab Mon Sep 17 00:00:00 2001 From: lightyfr <127269031+lightyfr@users.noreply.github.com> Date: Fri, 6 Dec 2024 23:47:58 -0500 Subject: [PATCH 2/3] feat: enhance BentoGrid with customizable gap and padding options --- src/once-ui/components/BentoGrid.module.scss | 81 +++++++++++++++----- src/once-ui/components/BentoGrid.tsx | 20 +++-- 2 files changed, 74 insertions(+), 27 deletions(-) diff --git a/src/once-ui/components/BentoGrid.module.scss b/src/once-ui/components/BentoGrid.module.scss index 9582f98..59e8a54 100644 --- a/src/once-ui/components/BentoGrid.module.scss +++ b/src/once-ui/components/BentoGrid.module.scss @@ -1,29 +1,70 @@ .bentoGrid { - display: grid; + display: grid; + grid-gap: var(--static-space-24); + padding: var(--static-space-24); + animation: fadeIn var(--transition-duration-micro-medium) + var(--transition-eased); + background-color: var(--background-surface); +} + +.gridItem { + background-color: var(--surface-background); + border: 1px solid var(--surface-border); + border-radius: var(--radius-m); + overflow: hidden; + transition: transform 0.2s ease-in-out; + padding: var(--static-space-16); + + &:hover { + transform: scale(1.02); + } +} + +.gap-xs { + grid-gap: var(--static-space-4); + } + + .gap-s { + grid-gap: var(--static-space-12); + } + + .gap-m { grid-gap: var(--static-space-24); + } + + .gap-l { + grid-gap: var(--static-space-48); + } + + .gap-xl { + grid-gap: var(--static-space-64); + } + + /* Padding Sizes */ + .padding-xs { + padding: var(--static-space-4); + } + + .padding-s { + padding: var(--static-space-12); + } + + .padding-m { padding: var(--static-space-24); - animation: fadeIn var(--transition-duration-micro-medium) - var(--transition-eased); - background-color: var(--background-surface); } - .gridItem { - background-color: var(--surface-background); - border: 1px solid var(--surface-border); - border-radius: var(--radius-m); - overflow: hidden; - transition: transform 0.2s ease-in-out; - padding: var(--static-space-16); + .padding-l { + padding: var(--static-space-48); + } - &:hover { - transform: scale(1.02); - } + .padding-xl { + padding: var(--static-space-64); } - /* Responsive Adjustments */ - @media (max-width: 768px) { - .bentoGrid { - grid-template-columns: repeat(1, 1fr); - } + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .bentoGrid { + grid-template-columns: repeat(1, 1fr); } - \ No newline at end of file +} diff --git a/src/once-ui/components/BentoGrid.tsx b/src/once-ui/components/BentoGrid.tsx index cd026c2..f30d2b7 100644 --- a/src/once-ui/components/BentoGrid.tsx +++ b/src/once-ui/components/BentoGrid.tsx @@ -7,6 +7,8 @@ import { Flex } from "./Flex"; interface BentoGridProps extends GridProps { layout: GridLayout[]; children: ReactNode[]; + gap?: 'xs' | 's' | 'm' | 'l' | 'xl'; + padding?: 'xs' | 's' | 'm' | 'l' | 'xl'; } interface GridLayout { @@ -16,12 +18,16 @@ interface GridLayout { } const BentoGrid = forwardRef( - ({ layout, children, className, style, ...rest }, ref) => { + ({ layout, children, className, style, gap = 'm', padding = 'm', ...rest }, ref) => { + const combinedClassName = classNames( + styles.bentoGrid, + styles[`gap-${gap}`], + styles[`padding-${padding}`], + className + ); + const combinedStyle = { ...style, - display: "grid", - gridGap: "var(--static-space-24)", - padding: "var(--static-space-24)", animation: "fadeIn var(--transition-duration-micro-medium) var(--transition-eased)", backgroundColor: "var(--background-surface)", @@ -30,7 +36,7 @@ const BentoGrid = forwardRef( return ( @@ -39,10 +45,10 @@ const BentoGrid = forwardRef( const gridStyle: React.CSSProperties = { gridColumn: itemLayout.columnSpan ? `span ${itemLayout.columnSpan}` - : undefined, + : "span 1", gridRow: itemLayout.rowSpan ? `span ${itemLayout.rowSpan}` - : undefined, + : "span 1", }; return ( From d9e156c1878c38f2afa84eb627e5c6c8033f9093 Mon Sep 17 00:00:00 2001 From: lightyfr <127269031+lightyfr@users.noreply.github.com> Date: Sat, 7 Dec 2024 00:12:40 -0500 Subject: [PATCH 3/3] refactor: simplify BentoGrid component by removing Flex wrapper and optimizing gap/padding styles --- src/once-ui/components/BentoGrid.module.scss | 81 ++++++++++---------- src/once-ui/components/BentoGrid.tsx | 11 +-- 2 files changed, 44 insertions(+), 48 deletions(-) diff --git a/src/once-ui/components/BentoGrid.module.scss b/src/once-ui/components/BentoGrid.module.scss index 59e8a54..ebda174 100644 --- a/src/once-ui/components/BentoGrid.module.scss +++ b/src/once-ui/components/BentoGrid.module.scss @@ -21,50 +21,49 @@ } .gap-xs { - grid-gap: var(--static-space-4); - } - - .gap-s { - grid-gap: var(--static-space-12); - } - - .gap-m { - grid-gap: var(--static-space-24); - } - - .gap-l { - grid-gap: var(--static-space-48); - } - - .gap-xl { - grid-gap: var(--static-space-64); - } - - /* Padding Sizes */ - .padding-xs { - padding: var(--static-space-4); - } - - .padding-s { - padding: var(--static-space-12); - } - - .padding-m { - padding: var(--static-space-24); - } - - .padding-l { - padding: var(--static-space-48); - } - - .padding-xl { - padding: var(--static-space-64); - } - + gap: var(--static-space-4); +} + +.gap-s { + gap: var(--static-space-12); +} + +.gap-m { + gap: var(--static-space-24); +} + +.gap-l { + gap: var(--static-space-48); +} + +.gap-xl { + gap: var(--static-space-64); +} + +/* Padding Sizes */ +.padding-xs { + padding: var(--static-space-4); +} + +.padding-s { + padding: var(--static-space-12); +} + +.padding-m { + padding: var(--static-space-24); +} + +.padding-l { + padding: var(--static-space-48); +} + +.padding-xl { + padding: var(--static-space-64); +} /* Responsive Adjustments */ @media (max-width: 768px) { .bentoGrid { - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } diff --git a/src/once-ui/components/BentoGrid.tsx b/src/once-ui/components/BentoGrid.tsx index f30d2b7..c196e50 100644 --- a/src/once-ui/components/BentoGrid.tsx +++ b/src/once-ui/components/BentoGrid.tsx @@ -2,7 +2,6 @@ import React, { ReactNode, forwardRef } from "react"; import classNames from "classnames"; import { GridProps } from "./Grid"; import styles from "./BentoGrid.module.scss"; -import { Flex } from "./Flex"; interface BentoGridProps extends GridProps { layout: GridLayout[]; @@ -12,7 +11,6 @@ interface BentoGridProps extends GridProps { } interface GridLayout { - area?: string; columnSpan?: number; rowSpan?: number; } @@ -34,7 +32,7 @@ const BentoGrid = forwardRef( }; return ( - ( }; return ( - {child} - + ); })} - + ); }, );