feat: add layout component

kirchoni · Apr 20, 2024 · ee66784 · ee66784
1 parent 4966142
commit ee66784
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 45 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,5 +15,11 @@
     ],
     "[xml]": {
         "editor.defaultFormatter": "redhat.vscode-xml"
+    },
+    "[mdx]": {
+        "diffEditor.wordWrap": "on"
+    },
+    "[markdown]": {
+        "diffEditor.wordWrap": "on"
     }
 }
diff --git a/apps/docs/data/design/material-you/components/layout.mdx b/apps/docs/data/design/material-you/components/layout.mdx
@@ -0,0 +1,92 @@
+---
+title: Layout
+---
+
+# Layout
+
+The Layout set of components include a `Container`, `Row`, and `Column` component that help you create responsive layouts in your web application. The `Container` component is a wrapper that centers its children horizontally and vertically. The `Row` and `Column` components are used to create an application layout with the Material Design's columns system.
+
+<Demo src="/demos/material-you/layout" />
+
+### Basic Usage
+
+You can create a layout using the `Container`, `Row`, and `Column` components by importing them from `baka-ui` and combining them to achieve the desired layout:
+
+```jsx
+import { BakaContainer, BakaRow, BakaColumn } from "baka-ui";
+
+function MyApp() {
+  return (
+    <BakaContainer>
+      <BakaRow>
+        <BakaColumn>Column 1</BakaColumn>
+        <BakaColumn>Column 2</BakaColumn>
+      </BakaRow>
+    </BakaContainer>
+  );
+}
+```
+
+### Setting column's count
+
+You can set the size of the columns by passing the `count` prop to the `BakaColumn` component. The `size` prop accepts a number between 1 and the max number of columns for the respective breakpoint.
+
+```jsx
+import { BakaContainer, BakaRow, BakaColumn } from "baka-ui";
+
+function MyApp() {
+  return (
+    <BakaContainer>
+      <BakaRow>
+        <BakaColumn size={3}>Column 1</BakaColumn>
+        <BakaColumn size={3}>Column 2</BakaColumn>
+        <BakaColumn size={3}>Column 3</BakaColumn>
+        <BakaColumn size={3}>Column 4</BakaColumn>
+      </BakaRow>
+    </BakaContainer>
+  );
+}
+```
+
+### Per breakpoint column size
+
+While the Material's design system's layout module is designed with a declining number of columns as the screen size decreases, you can manually set the size of the columns per breakpoint by passing an array to the `size` prop.
+
+> You can skip setting the size for a breakpoint by passing `null` to the array.
+
+```jsx
+import { BakaContainer, BakaRow, BakaColumn } from "baka-ui";
+
+function MyApp() {
+  return (
+    <BakaContainer>
+      <BakaRow>
+        <BakaColumn size={[null, 3, 4]}>Column 1</BakaColumn>
+        <BakaColumn size={[null, 3, 4]}>Column 2</BakaColumn>
+        <BakaColumn size={[null, 3, 4]}>Column 2</BakaColumn>
+        <BakaColumn size={[null, 3, 4]}>Column 2</BakaColumn>
+      </BakaRow>
+    </BakaContainer>
+  );
+}
+```
+
+### Variants
+
+The Material's Design System provides a single variant for the `Column` components: The `region-left` variant &mdash; intended to be used as a column for either a side-navigation or other navigation elements.
+
+```jsx
+function MyApp() {
+  return (
+    <main>
+      <BakaColumn variant="region-left">{/* side navigation: ... */}</BakaColumn>
+      <BakaContainer>
+        <BakaRow>
+          <BakaColumn size={9}>{/* content */}</BakaColumn>
+          <BakaColumn size={3}>{/* table of contents */}</BakaColumn>
+        </BakaRow>
+      </BakaContainer>
+    </main>
+  );
+}
+```
diff --git a/apps/docs/public/demos.json b/apps/docs/public/demos.json
diff --git a/apps/docs/src/app/(root)/page.tsx b/apps/docs/src/app/(root)/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
     <div className="pb-[100px]">
       <Container>
         <Row>
-          <Column count={4}>
+          <Column size={4}>
             <main className={"mt-40 w-[100%] text-center"}>
               <Text variant={"hero"} as="h1">
                 A <span className={styles.highlight}>Design System</span> Framework
@@ -57,22 +57,22 @@ export default function Home() {
             </Column>
           </Row>
           <Row className="mt-6">
-            <Column count={2}>
+            <Column size={2}>
               <DesignSystemCard released={true} href={"/design/material-you"}>
                 <Image src={MaterialYou} alt="Google Material You" />
               </DesignSystemCard>
             </Column>
-            <Column count={2}>
+            <Column size={2}>
               <DesignSystemCard>
                 <Image src={Fluent2} alt="Microsoft Fluent 2" />
               </DesignSystemCard>
             </Column>
-            <Column count={2}>
+            <Column size={2}>
               <DesignSystemCard>
                 <Image src={Geist} alt="Vercel Geist" />
               </DesignSystemCard>
             </Column>
-            <Column count={2}></Column>
+            <Column size={2}></Column>
           </Row>
         </Container>
       </div>

diff --git a/apps/docs/src/app/(root)/templates/header/index.tsx b/apps/docs/src/app/(root)/templates/header/index.tsx
@@ -21,7 +21,7 @@ export const Header = (props: HeaderProps) => {
       <TopBar as="header">
         <Container>
           <Row>
-            <Column count={12}>
+            <Column size={12}>
               <BakaIcon>{HeaderLogo}</BakaIcon>
               {/* <ul className="ml-xl flex gap-sm">
                 <li>

diff --git a/apps/docs/src/app/demos/material-you/layout/page.tsx b/apps/docs/src/app/demos/material-you/layout/page.tsx
@@ -2,15 +2,15 @@ import { BakaContainer, BakaRow, BakaColumn } from "baka-ui";
 
 export default function LayoutDemo() {
   return (
-    <div style={{ width: "calc(100vw - 64px)", height: "calc(100vh - 64px)", display: "flex" }}>
+    <div style={{ width: "calc(100vw - 128px)", height: "calc(100vh - 64px)", display: "flex" }}>
       <BakaColumn variant={"region-left"} style={{ background: "#FDE0F1" }}>
         <div style={{ height: "calc(100vh - 64px" }} />
       </BakaColumn>
       <BakaContainer>
-        <BakaRow>
-          {Array.from({ length: 6 }).map((_, index) => (
-            <BakaColumn key={index} count={2} style={{ background: "#E0F0F0" }}>
-              <div style={{ height: "calc(100vh - 64px" }} />
+        <BakaRow style={{ height: "100%" }}>
+          {Array.from({ length: 8 }).map((_, index) => (
+            <BakaColumn key={index} size={2}>
+              <div style={{ height: "100%", width: "100%", background: "#E0F0F0" }} />
             </BakaColumn>
           ))}
         </BakaRow>

diff --git a/apps/docs/src/app/demos/material-you/layout/stories/page.tsx b/apps/docs/src/app/demos/material-you/layout/stories/page.tsx
@@ -7,9 +7,9 @@ export type LayoutStoryProps = {
 };
 
 export const defaultProps = {
-  columns: 4,
+  columns: 12,
   autosize: false,
-  size: 3,
+  size: 2,
   region: true,
 };
 
@@ -24,14 +24,10 @@ export default function LayoutDemo(props: LayoutStoryProps) {
         </BakaColumn>
       ) : null}
       <BakaContainer>
-        <BakaRow>
+        <BakaRow style={{ height: "100%" }}>
           {Array.from({ length: args.columns }).map((_, index) => (
-            <BakaColumn
-              key={index}
-              count={args.autosize ? undefined : args.size}
-              style={{ background: "#E0F0F0" }}
-            >
-              <div style={{ height: "calc(100vh - 64px" }} />
+            <BakaColumn key={index} size={args.autosize ? undefined : args.size}>
+              <div style={{ height: "100%", width: "100%", background: "#E0F0F0" }} />
             </BakaColumn>
           ))}
         </BakaRow>

diff --git a/apps/docs/src/app/design/material-you/[...slug]/page.tsx b/apps/docs/src/app/design/material-you/[...slug]/page.tsx
@@ -69,14 +69,14 @@ export default function MaterialYouPage(props: { params?: { slug?: string[] } })
 
   return (
     <>
-      <Column count={[8, 9, 10]} className="pt-[45px]  pb-[100px]">
-        <article className="max-w-[100%]">
+      <Column size={[8, 8, 8, 8, 10]} className="pt-[45px]  pb-[100px]">
+        <article className="w-[100%]">
           <React.Suspense fallback={<div>loading</div>}>
             <MDXContent components={mdxComponents} />
           </React.Suspense>
         </article>
       </Column>
-      <Column count={[4, 3, 2]} className="hidden md:flex sticky top-[100px] h-[calc(100%-100px)]">
+      <Column size={[4, 3, 2, 2]} className="hidden md:flex sticky top-[100px] h-[calc(100vh-100px)]">
         <TableOfContents data={doc.toc} />
       </Column>
     </>

diff --git a/apps/docs/src/app/design/material-you/layout.tsx b/apps/docs/src/app/design/material-you/layout.tsx
@@ -85,7 +85,7 @@ export default function MaterialYouLayout({ children }: { children: React.ReactN
                   <div className="flex flex-col grow">
                     <Row className={"min-h-[72px] items-center"}>
                       <Column
-                        count={[4, 8, 10, 8, 8]}
+                        size={[4, 8, 8, 8, 8]}
                         className="items-center gap-3 sm:gap-0 justify-between relative"
                       >
                         <div className="flex items-center gap-3 ">
@@ -94,16 +94,16 @@ export default function MaterialYouLayout({ children }: { children: React.ReactN
                           </ToggleButton>
                           <Logo className="h-[30px] w-auto sm:hidden" height={33} />
                           {/* <Image
-                            src={Logo}
-                            alt="Baka UI"
-                            className="h-[30px] w-auto sm:hidden"
-                            width={400}
-                            height={33}
+                              src={Logo}
+                              alt="Baka UI"
+                              className="h-[30px] w-auto sm:hidden"
+                              width={400}
+                              height={33}
                           /> */}
                         </div>
                         <Search />
                       </Column>
-                      <Column count={[null, 2, 2, 4, 4]} className="gap-2 hidden md:flex">
+                      <Column size={[null, null, 2, 2, 4]} className="gap-2 hidden md:flex">
                         <Button
                           variant={"icon"}
                           as={Link}

diff --git a/apps/docs/src/app/design/material-you/templates/header copy/index.tsx b/apps/docs/src/app/design/material-you/templates/header copy/index.tsx
@@ -23,7 +23,7 @@ export const Header = (props: HeaderProps) => {
       <TopBar as="header">
         <Container>
           <Row>
-            <Column count={12}>
+            <Column size={12}>
               <BakaIcon>{HeaderLogo}</BakaIcon>
               <ul className="ml-xl flex gap-sm">
                 <li>

diff --git a/apps/docs/src/app/design/material-you/templates/header/header.server.tsx b/apps/docs/src/app/design/material-you/templates/header/header.server.tsx
@@ -13,7 +13,7 @@ export const Header = () => {
     <TopBar>
       <Container variant={"fluid"}>
         <Row>
-          <Column count={12} className="flex items-center justify-between">
+          <Column size={12} className="flex items-center justify-between">
             <div className="flex items-center gap-2 ml-[-24px]">
               <ToggleButton className="xl:hidden">
                 <Icon>menu</Icon>

diff --git a/apps/storybook/src/stories/layout/Layout.stories.tsx b/apps/storybook/src/stories/layout/Layout.stories.tsx
@@ -33,7 +33,7 @@ export const Overview = {
         <BakaContainer>
           <BakaRow>
             {Array.from({ length: props.columns }).map((_, index) => (
-              <BakaColumn count={props.size} style={{ background: "#E0F0F0" }}></BakaColumn>
+              <BakaColumn size={props.size} style={{ background: "#E0F0F0" }}></BakaColumn>
             ))}
           </BakaRow>
         </BakaContainer>

diff --git a/apps/storybook/src/stories/layout/layout.mdx b/apps/storybook/src/stories/layout/layout.mdx
@@ -45,7 +45,7 @@ The `BakaColumn` component is used to create columns within a row. It allows you
 ### Usage
 
 ```jsx
-<BakaColumn count={4} style={{ background: "red" }}>
+<BakaColumn size={4} style={{ background: "red" }}>
   {/* Column content */}
 </BakaColumn>
 ```

diff --git a/packages/design/material-you/components/layout/column.scss b/packages/design/material-you/components/layout/column.scss
@@ -14,33 +14,36 @@
       $_columns: map-get($breakpoint, columns);
       $_gutter: map-get($breakpoint, gutter);
       $_regions: map-get($breakpoint, regions);
-
+      $_fill: $_columns * $_gutter - $_gutter;
       flex-grow: 1;
 
       @if ($_screen == 0) {
         @for $i from 1 through $_columns {
+          $_offset: calc($_gutter * calc(calc($_columns / $i) - 1) / calc($_columns / $i));
           & {
-            width: calc(($i / $_columns) * 100% - $_gutter);
+            flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
           }
           &.value--#{$i} {
             flex-grow: 0;
-            width: calc(($i / $_columns) * 100% - $_gutter);
+            flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
           }
           &.value-0--#{$i} {
             flex-grow: 0;
-            width: calc(($i / $_columns) * 100% - $_gutter);
+            flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
           }
         }
       } @else {
         @media screen and (min-width: $_screen) {
           @for $i from 1 through $_columns {
+            $_offset: calc($_gutter * calc(calc($_columns / $i) - 1) / calc($_columns / $i));
+
             &.value--#{$i} {
               flex-grow: 0;
-              width: calc(($i / $_columns) * 100% - $_gutter);
+              flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
             }
             &.value-#{$j - 1}--#{$i} {
               flex-grow: 0;
-              width: calc(($i / $_columns) * 100% - $_gutter);
+              flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
             }
           }
         }

diff --git a/packages/design/material-you/components/layout/container.scss b/packages/design/material-you/components/layout/container.scss
@@ -3,7 +3,6 @@
 
 @mixin container--styles {
   .baka-container {
-
     @each $size, $breakpoint in $layout {
       $_gutter: map-get($breakpoint, gutter);
       $_screen: map-get($breakpoint, screen);

diff --git a/packages/design/material-you/components/layout/row.scss b/packages/design/material-you/components/layout/row.scss
@@ -11,6 +11,7 @@
       $_margin: map-get($breakpoint, margin);
 
       display: flex;
+      flex-wrap: wrap;
 
       @media screen and (min-width: $_screen) {
         gap: $_gutter;

diff --git a/packages/ui/src/components/layout/column.tsx b/packages/ui/src/components/layout/column.tsx
@@ -6,13 +6,13 @@ import { variantClassNames } from "../../utils";
 import { valueClassNames } from "../../utils/value-class-names";
 
 export type BakaColumnProps = BakaVariant<BakaDesign["ColumnVariant"]> & {
-  count?: number | Array<number>;
+  size?: number | Array<number | null>;
 };
 
 export type BakaColumn = PolymorphicComponent<"div", BakaColumnProps>;
 export const BakaColumn: BakaColumn = (props) => {
   const { _ref,
-    as: Component = "div", count, variant, ...other } = props;
+    as: Component = "div", size, variant, ...other } = props;
 
   return (
     <Component
@@ -22,7 +22,7 @@ export const BakaColumn: BakaColumn = (props) => {
         "baka-column",
         props.className,
         variantClassNames(variant),
-        valueClassNames(count)
+        valueClassNames(size)
       )}
     />
   );