From 43e062f817f5518a85129b357addba56f6a10c95 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 8 Apr 2024 13:56:31 +0200 Subject: [PATCH 1/3] Add `VStack` and `HStack` components --- example/src/pages/Layout.tsx | 139 +++++++++++++++++++++++++------ src/components/index.tsx | 9 +- src/components/spacer/Spacer.tsx | 2 +- src/components/stack/Stack.tsx | 41 +++++++++ src/components/stack/index.tsx | 1 + 5 files changed, 160 insertions(+), 32 deletions(-) create mode 100644 src/components/stack/Stack.tsx create mode 100644 src/components/stack/index.tsx diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx index d0c632f0..53b1ed4b 100644 --- a/example/src/pages/Layout.tsx +++ b/example/src/pages/Layout.tsx @@ -4,7 +4,7 @@ import { Divider, H1, H3, - HSpacer, + HStack, IOAppMargin, IOColors, IOSpacer, @@ -12,10 +12,12 @@ import { LabelSmall, VDivider, VSpacer, + VStack, useIOTheme } from "@pagopa/io-app-design-system"; import React from "react"; -import { StatusBar, View } from "react-native"; +import { View } from "react-native"; +import { ComponentViewerBox } from "../components/ComponentViewerBox"; import { NoMarginScreen } from "../components/Screen"; import { SpacerViewerBox } from "../components/SpacerViewerBox"; @@ -24,10 +26,6 @@ export const Layout = () => { return ( -

{ ContentWrapper

- {IOAppMargin.map((value, i, arr) => ( - + + + {IOAppMargin.map((value, i) => ( { - {i !== arr.length - 1 && } - - ))} + ))} + @@ -84,15 +83,15 @@ export const Layout = () => { {/* Vertical */} - {IOSpacer.map((spacerEntry, i, arr) => ( - - - {/* Don't add spacer to the last item. Quick and dirty - alternative to the Stack component. - https://stackoverflow.com/a/60975451 */} - {i !== arr.length - 1 && } - - ))} + + {IOSpacer.map((spacerEntry, i) => ( + + ))} + @@ -101,18 +100,104 @@ export const Layout = () => { {/* Horizontal */} - - {IOSpacer.map((spacerEntry, i, arr) => ( - - - {i !== arr.length - 1 && } - + + {IOSpacer.map((spacerEntry, i) => ( + ))} - + + +

+ Stack +

+ + + + + {[...Array(3)].map((_el, i) => ( + + {`Block n.${i + 1}`} + + ))} + + + Different height + + + + + + + + + + {[...Array(3)].map((_el, i) => ( + + {`${i + 1}`} + + ))} + + + Different width + + + + + + +

Divider diff --git a/src/components/index.tsx b/src/components/index.tsx index ff47dbb4..5324961c 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -5,8 +5,8 @@ export * from "./badge"; export * from "./banner"; export * from "./buttons"; export * from "./checkbox"; -export * from "./contentWrapper"; export * from "./codeInput"; +export * from "./contentWrapper"; export * from "./divider"; export * from "./endOfPage"; export * from "./featureInfo"; @@ -14,8 +14,8 @@ export * from "./icons"; export * from "./image"; export * from "./layout"; export * from "./listitems"; -export * from "./logos"; export * from "./loadingSpinner"; +export * from "./logos"; export * from "./modules"; export * from "./numberpad"; export * from "./otpInput"; @@ -23,10 +23,11 @@ export * from "./pictograms"; export * from "./progressLoader"; export * from "./radio"; export * from "./spacer"; +export * from "./stack"; export * from "./stepper"; export * from "./switch"; -export * from "./tag"; export * from "./tabs"; +export * from "./tag"; +export * from "./textInput"; export * from "./toast"; export * from "./typography"; -export * from "./textInput"; diff --git a/src/components/spacer/Spacer.tsx b/src/components/spacer/Spacer.tsx index 762c52de..e6f56584 100644 --- a/src/components/spacer/Spacer.tsx +++ b/src/components/spacer/Spacer.tsx @@ -13,7 +13,7 @@ type SpacerProps = { size?: IOSpacer; }; -const DEFAULT_SIZE = 16; +const DEFAULT_SIZE: IOSpacer = 16; /* Debug Mode */ const debugMode = false; diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx new file mode 100644 index 00000000..8be521b3 --- /dev/null +++ b/src/components/stack/Stack.tsx @@ -0,0 +1,41 @@ +import React, { ReactNode } from "react"; +import { View } from "react-native"; +import { IOSpacer } from "../../core"; + +type Stack = { + space?: IOSpacer; + children: ReactNode; +}; + +/** +Horizontal Stack component +@param {IOSpacer} space + */ +export const HStack = ({ space, children }: Stack) => ( + + {children} + +); + +/** +Vertical Stack component +@param {IOSpacer} space + */ + +export const VStack = ({ space, children }: Stack) => ( + + {children} + +); diff --git a/src/components/stack/index.tsx b/src/components/stack/index.tsx new file mode 100644 index 00000000..92c29a03 --- /dev/null +++ b/src/components/stack/index.tsx @@ -0,0 +1 @@ +export * from "./Stack"; From b8aadee71b7a87fdd58a69408e389d8fc6f476f5 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 8 Apr 2024 14:00:19 +0200 Subject: [PATCH 2/3] Change copy in example app --- example/src/pages/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx index 53b1ed4b..c54b9e57 100644 --- a/example/src/pages/Layout.tsx +++ b/example/src/pages/Layout.tsx @@ -188,7 +188,7 @@ export const Layout = () => { }} > - Different width + Growing block From 53d4e5d147c978fdcd250fd9af591b25f366d82c Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 8 Apr 2024 17:15:18 +0200 Subject: [PATCH 3/3] Add relative stories --- stories/foundation/layout/HStack.stories.tsx | 73 ++++++++++++++++++++ stories/foundation/layout/VStack.stories.tsx | 72 +++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 stories/foundation/layout/HStack.stories.tsx create mode 100644 stories/foundation/layout/VStack.stories.tsx diff --git a/stories/foundation/layout/HStack.stories.tsx b/stories/foundation/layout/HStack.stories.tsx new file mode 100644 index 00000000..01504b2f --- /dev/null +++ b/stories/foundation/layout/HStack.stories.tsx @@ -0,0 +1,73 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { View } from "react-native"; +import { HStack, LabelSmall } from "../../../src/components"; +import { IOColors } from "../../../src/core"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: "Foundation/Layout/HStack", + decorators: [ + Story => ( + + + + ) + ], + component: HStack, + parameters: { + // Optional parameter to center the component in the CanHas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: "centered" + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ["autodocs"] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Base: Story = { + args: { + space: 16, + children: ( + + {[...Array(3)].map((_el, i) => ( + + {`${ + i + 1 + }`} + + ))} + + + Growing width + + + + ) + } +}; diff --git a/stories/foundation/layout/VStack.stories.tsx b/stories/foundation/layout/VStack.stories.tsx new file mode 100644 index 00000000..e636817d --- /dev/null +++ b/stories/foundation/layout/VStack.stories.tsx @@ -0,0 +1,72 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { View } from "react-native"; +import { LabelSmall, VStack } from "../../../src/components"; +import { IOColors } from "../../../src/core"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: "Foundation/Layout/VStack", + decorators: [ + Story => ( + + + + ) + ], + component: VStack, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: "centered" + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ["autodocs"] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Base: Story = { + args: { + space: 16, + children: ( + + {[...Array(3)].map((_el, i) => ( + + {`Block n.${ + i + 1 + }`} + + ))} + + + Different height + + + + ) + } +};