From 7249402cac58da24212e86b0321f3689b5fd5e13 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 4 Jun 2024 09:47:00 +0200 Subject: [PATCH] [IOAPPX-310] Remove `VDivider` and `EndOfPage` components (#277) ## Short description This PR removes the `VDivider` and `EndOfPage` components. The former because it wasn't used. The latter because it's replaced by the `useScreenEndMargin` hook or space already managed by `FooterActions` or `IOScrollView`. ## List of changes proposed in this pull request - Remove mentioned components - Update example app and Storybook docs accordingly ## Related PRs Here are the PRs for the components listed above: - https://github.com/pagopa/io-app/pull/5808 - https://github.com/pagopa/io-app/pull/5787 - https://github.com/pagopa/io-app/pull/5704 --- example/src/navigation/navigator.tsx | 18 ------ example/src/navigation/params.ts | 2 - example/src/navigation/routes.ts | 8 --- example/src/pages/EndOfPage.tsx | 59 ------------------- example/src/pages/Layout.tsx | 12 ---- src/components/divider/Divider.tsx | 36 ++++------- src/components/endOfPage/EndOfPage.tsx | 55 ----------------- src/components/endOfPage/index.tsx | 1 - src/components/index.tsx | 1 - .../foundation/layout/VDivider.stories.tsx | 32 ---------- stories/markdown/Layout.md | 16 +---- 11 files changed, 14 insertions(+), 226 deletions(-) delete mode 100644 example/src/pages/EndOfPage.tsx delete mode 100644 src/components/endOfPage/EndOfPage.tsx delete mode 100644 src/components/endOfPage/index.tsx delete mode 100644 stories/foundation/layout/VDivider.stories.tsx diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index c27e2653..b8b271f3 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -20,7 +20,6 @@ import { DSAlert } from "../pages/Alert"; import { Badges } from "../pages/Badges"; import { Buttons } from "../pages/Buttons"; import { Colors } from "../pages/Colors"; -import { EndOfPageScreen, EndOfPageScreenWithCTA } from "../pages/EndOfPage"; import { FooterWithButton } from "../pages/FooterWithButton"; import { FooterWithButtonEmptyState } from "../pages/FooterWithButtonEmptyState"; import { ForceScrollDownViewPage } from "../pages/ForceScrollDownViewPage"; @@ -300,23 +299,6 @@ const AppNavigator = () => { }} /> - - - { - const insets = useSafeAreaInsets(); - - return ( - - - {[...Array(50)].map((_el, i) => ( - Repeated text - ))} - - - - ); -}; - -export const EndOfPageScreenWithCTA = () => { - const insets = useSafeAreaInsets(); - - return ( - - - {[...Array(50)].map((_el, i) => ( - Repeated text - ))} - Alert.alert("Primary Action") - } - }} - secondaryAction={{ - type: "Link", - props: { - label: "Secondary Action", - accessibilityLabel: "Secondary Action", - onPress: () => Alert.alert("Secondary Action") - } - }} - /> - - - ); -}; diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx index c54b9e57..c04b5d3b 100644 --- a/example/src/pages/Layout.tsx +++ b/example/src/pages/Layout.tsx @@ -10,7 +10,6 @@ import { IOSpacer, IOVisualCostants, LabelSmall, - VDivider, VSpacer, VStack, useIOTheme @@ -212,17 +211,6 @@ export const Layout = () => { - - -

- Vertical -

- - - - - - ); }; diff --git a/src/components/divider/Divider.tsx b/src/components/divider/Divider.tsx index 70b4e496..115b0199 100644 --- a/src/components/divider/Divider.tsx +++ b/src/components/divider/Divider.tsx @@ -2,34 +2,20 @@ import React from "react"; import { View, StyleSheet } from "react-native"; import { IOColors, useIOTheme } from "../../core"; -type DividerOrientation = "vertical" | "horizontal"; - -type DividerProps = { - orientation: DividerOrientation; -}; - const DEFAULT_BORDER_SIZE = StyleSheet.hairlineWidth; /** -Native `Divider` component -@param {DividerOrientation} orientation +Horizontal `Divider` component */ -const BaseDivider = React.memo(({ orientation }: DividerProps) => { +export const Divider = () => { const theme = useIOTheme(); - const baseStyle = { - backgroundColor: IOColors[theme["divider-default"]], - ...(orientation === "vertical" - ? { width: DEFAULT_BORDER_SIZE } - : { height: DEFAULT_BORDER_SIZE }) - }; - return ; -}); -/** -Horizontal Divider component - */ -export const Divider = () => ; -/** -Vertical Divider component - */ -export const VDivider = () => ; + return ( + + ); +}; diff --git a/src/components/endOfPage/EndOfPage.tsx b/src/components/endOfPage/EndOfPage.tsx deleted file mode 100644 index 8f947877..00000000 --- a/src/components/endOfPage/EndOfPage.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react"; -import { View } from "react-native"; -import { VSpacer } from "../spacer"; -import { - ButtonLink, - ButtonLinkProps, - ButtonSolid, - ButtonSolidProps -} from "../buttons"; - -type PrimaryActionProp = { - type: "Solid"; - props: Omit; -}; - -type SecondaryActionProp = { - type: "Link"; - props: ButtonLinkProps; -}; - -type Props = - | { - primaryAction?: never; - secondaryAction?: never; - } - | { - primaryAction: PrimaryActionProp; - secondaryAction?: never; - } - | { - primaryAction: PrimaryActionProp; - secondaryAction: SecondaryActionProp; - }; - -export const EndOfPage = ({ primaryAction, secondaryAction }: Props) => ( - <> - - {primaryAction ? ( - <> - - {secondaryAction && ( - <> - - - - - - - )} - - ) : ( - - )} - -); diff --git a/src/components/endOfPage/index.tsx b/src/components/endOfPage/index.tsx deleted file mode 100644 index 04acb1dc..00000000 --- a/src/components/endOfPage/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "./EndOfPage"; diff --git a/src/components/index.tsx b/src/components/index.tsx index 4c303a86..4003d9ba 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -8,7 +8,6 @@ export * from "./checkbox"; export * from "./codeInput"; export * from "./contentWrapper"; export * from "./divider"; -export * from "./endOfPage"; export * from "./featureInfo"; export * from "./icons"; export * from "./image"; diff --git a/stories/foundation/layout/VDivider.stories.tsx b/stories/foundation/layout/VDivider.stories.tsx deleted file mode 100644 index 12f30704..00000000 --- a/stories/foundation/layout/VDivider.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import type { Meta, StoryObj } from "@storybook/react"; - -import { View } from "react-native"; -import { VDivider } from "../../../src/components"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - title: "Foundation/Layout/VDivider", - decorators: [ - Story => ( - - - - ) - ], - component: VDivider, - 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: {} -}; diff --git a/stories/markdown/Layout.md b/stories/markdown/Layout.md index 028f966c..7763761a 100644 --- a/stories/markdown/Layout.md +++ b/stories/markdown/Layout.md @@ -3,7 +3,7 @@ There are different kinds of layout components: * **ContentWrapper**: it is a simple `` component with a default `paddingHorizontal` of `16` (defined as a style constant in `IOVisualConstants`). It is used to wrap the content of a screen to the fixed spacing. The value of the padding can be overridden by passing a `margin` prop that accepts values defined in `IOAppMargin`. * **Spacer**: there are two spacer components, `VSpacer` and `HSpacer`, which are used to add vertical and horizontal spacing between components. They are defined as `` components with a fixed height or width, respectively. -* **Divider**: there are two divider components, `Divider` and `VDivider`, which are used to add a dividing bar between components. +* **Divider**: used to add a divider between components. ## Examples
@@ -55,7 +55,7 @@ Example for **Spacers** can be found in related stories of [HSpacer](/docs/found ### Divider ``` -import { Divider, VDivider } from '@pagopa/io-app-design-system'; +import { Divider } from '@pagopa/io-app-design-system'; const Component = () => ( <> @@ -64,15 +64,5 @@ const Component = () => ( {// your content here} ); - -const ComponentWithVDivider = () => ( - - {// your content here} - - {// your content here} - -); ``` -Example for **Dividers** can be found in related stories of [Divider](/docs/foundation-layout-divider--docs) and [VDivider](/docs/foundation-layout-vdivider--docs). \ No newline at end of file +Example for **Divider** can be found in the [Divider](/docs/foundation-layout-divider--docs) relative story. \ No newline at end of file