refactor: convert subcomponents to compound component approach

abelflopes · Mar 7, 2024 · d15a430 · d15a430
1 parent de610db
commit d15a430
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 51 deletions.
diff --git a/packages/components/card/src/index.ts b/packages/components/card/src/index.ts
diff --git a/packages/components/card/src/Card.tsx → packages/components/card/src/index.tsx b/packages/components/card/src/Card.tsx → packages/components/card/src/index.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import styles from "./styles/index.module.scss";
 import React, { useMemo, useState } from "react";
 import { CardContext, type CardContextValue } from "./context";
+import { CardImage } from "./CardImage";
 
 /**
  * Props for the Card component
@@ -22,7 +23,7 @@ interface CardProps extends Readonly<React.HTMLAttributes<HTMLDivElement>> {
  * @returns a React element
  */
 
-export const Card = ({
+const Card = ({
   skin = "bordered",
   variation = "vertical",
   spacing = "m",
@@ -61,3 +62,7 @@ export const Card = ({
     </CardContext.Provider>
   );
 };
+
+Card.Image = CardImage;
+
+export { Card, type CardProps };
diff --git a/packages/components/grid/src/index.ts b/packages/components/grid/src/index.ts
diff --git a/packages/components/grid/src/Container.tsx → packages/components/grid/src/index.tsx b/packages/components/grid/src/Container.tsx → packages/components/grid/src/index.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useMemo, useState } from "react";
 import styles from "./styles/container.module.scss";
 import classNames from "classnames";
 import { GridContext, type GridContextProps } from "./context";
+import { GridColumn } from "./Column";
 
-export interface GridContainerProps extends React.HTMLAttributes<HTMLHRElement> {
+interface GridProps extends React.HTMLAttributes<HTMLHRElement> {
   /** The spacing between columns in the grid  */
   spacing?: "s" | "m" | "l" | "none";
   /** Whether to allow grid items to wrap to the next line  */
@@ -16,12 +17,12 @@ export interface GridContainerProps extends React.HTMLAttributes<HTMLHRElement>
  * @returns a React element
  */
 
-export const GridContainer = ({
+const Grid = ({
   spacing = "m",
   wrap = true,
   className,
   ...otherProps
-}: Readonly<GridContainerProps>): React.ReactElement => {
+}: Readonly<GridProps>): React.ReactElement => {
   const [columnsCount, setColumnsCount] = useState(0);
 
   const registerColumn = useCallback<GridContextProps["registerColumn"]>(() => {
@@ -56,3 +57,7 @@ export const GridContainer = ({
     </GridContext.Provider>
   );
 };
+
+Grid.Column = GridColumn;
+
+export { Grid, type GridProps };
diff --git a/packages/docs/stories/src/card.stories.tsx b/packages/docs/stories/src/card.stories.tsx
@@ -4,21 +4,27 @@ import { Manager } from "@react-ck/manager";
 import { faker } from "@faker-js/faker";
 import { Text } from "@react-ck/text/src";
 import { configureStory } from "@react-ck/story-config";
-import { Card, CardImage } from "@react-ck/card/src";
+import { Card } from "@react-ck/card";
 
 type Story = StoryObj<typeof Card>;
 
 const meta: Meta<typeof Card> = {
   title: "Generic/Card",
-  ...configureStory(Card, {
-    decorators: [
-      (Story): React.ReactElement => (
-        <Manager>
-          <Story />
-        </Manager>
-      ),
-    ],
-  }),
+  ...configureStory(
+    Card,
+    {
+      decorators: [
+        (Story): React.ReactElement => (
+          <Manager>
+            <Story />
+          </Manager>
+        ),
+      ],
+    },
+    {
+      subComponents: [Card.Image],
+    },
+  ),
 };
 
 export default meta;
@@ -27,7 +33,7 @@ export const Component: Story = {
   args: {
     children: (
       <>
-        <CardImage src={faker.image.urlPicsumPhotos({ width: 320, height: 100 })} />
+        <Card.Image src={faker.image.urlPicsumPhotos({ width: 320, height: 100 })} />
 
         <Text type="h2">{faker.lorem.sentence(4)}</Text>
 

diff --git a/packages/docs/stories/src/form-hook.stories.tsx b/packages/docs/stories/src/form-hook.stories.tsx
@@ -4,7 +4,7 @@ import { Manager } from "@react-ck/manager";
 import { configureStory } from "@react-ck/story-config";
 import { useForm } from "@react-ck/form/src";
 import * as LoginForm from "@react-ck/form/fixtures/login";
-import { GridColumn, GridContainer } from "@react-ck/grid";
+import { Grid } from "@react-ck/grid";
 import { Card } from "@react-ck/card";
 import { Container } from "@react-ck/container";
 import { Text } from "@react-ck/text";
@@ -56,17 +56,17 @@ export const Component: Story = {
           {form}
         </Container>
 
-        <GridContainer>
+        <Grid>
           {Object.entries({ initialValues, validity, values }).map(([title, obj]) => (
-            <GridColumn key={title}>
+            <Grid.Column key={title}>
               <Card>
                 <Text type="h3">{capitalCase(title)}</Text>
 
                 <code style={{ whiteSpace: "pre" }}>{JSON.stringify(obj, undefined, 2)}</code>
               </Card>
-            </GridColumn>
+            </Grid.Column>
           ))}
-        </GridContainer>
+        </Grid>
       </>
     );
   },

diff --git a/packages/docs/stories/src/grid.stories.tsx b/packages/docs/stories/src/grid.stories.tsx
@@ -3,15 +3,15 @@ import { type Meta, type StoryObj } from "@storybook/react";
 import { Manager } from "@react-ck/manager";
 import { faker } from "@faker-js/faker";
 import { configureStory } from "@react-ck/story-config/src/index";
-import { GridContainer, GridColumn } from "@react-ck/grid/src";
+import { Grid } from "@react-ck/grid";
 import { Card } from "@react-ck/card";
 
-type Story = StoryObj<typeof GridContainer>;
+type Story = StoryObj<typeof Grid>;
 
-const meta: Meta<typeof GridContainer> = {
+const meta: Meta<typeof Grid> = {
   title: "Layout/Grid",
   ...configureStory(
-    GridContainer,
+    Grid,
     {
       decorators: [
         (Story): React.ReactElement => (
@@ -22,7 +22,7 @@ const meta: Meta<typeof GridContainer> = {
       ],
     },
     {
-      subComponents: [GridColumn],
+      subComponents: [Grid.Column],
     },
   ),
 };
@@ -33,45 +33,45 @@ export const Component: Story = {
   args: {
     children: (
       <>
-        <GridColumn size={2}>
+        <Grid.Column size={2}>
           <Card>{faker.lorem.sentence(2)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={2}>
+        <Grid.Column size={2}>
           <Card>{faker.lorem.sentence(2)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={3}>
+        <Grid.Column size={3}>
           <Card>{faker.lorem.sentence(5)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={5}>
+        <Grid.Column size={5}>
           <Card>{faker.lorem.sentence(10)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={6}>
+        <Grid.Column size={6}>
           <Card>{faker.lorem.sentence(10)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={4}>
+        <Grid.Column size={4}>
           <Card>{faker.lorem.sentence(6)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={2}>
+        <Grid.Column size={2}>
           <Card>{faker.lorem.sentence(2)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={2}>
+        <Grid.Column size={2}>
           <Card>{faker.lorem.sentence(1)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size="auto">
+        <Grid.Column size="auto">
           <Card>{faker.lorem.sentence(2)}</Card>
-        </GridColumn>
+        </Grid.Column>
 
-        <GridColumn size={2}>
+        <Grid.Column size={2}>
           <Card>{faker.lorem.sentence(1)}</Card>
-        </GridColumn>
+        </Grid.Column>
       </>
     ),
   },