{"Insert here the component you're willing to test"}
diff --git a/package.json b/package.json
index fdf40382..5e182491 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@pagopa/io-app-design-system",
- "version": "1.16.1",
+ "version": "1.17.0",
"description": "The library defining the core components of the design system of @pagopa/io-app",
"main": "lib/commonjs/index",
"module": "lib/module/index",
@@ -36,7 +36,10 @@
"example": "yarn --cwd example",
"bootstrap": "yarn example && yarn install",
"storybook": "storybook dev -p 6006",
- "build-storybook": "storybook build"
+ "build-storybook": "storybook build",
+ "generate:icons": "node scripts/generateNewIcons.js",
+ "generate:pictograms": "node scripts/generateNewPictograms.js",
+ "generate": "npm-run-all generate:*"
},
"keywords": [
"react-native",
@@ -98,6 +101,7 @@
"react-test-renderer": "^18.2.0",
"release-it": "^15.0.0",
"storybook": "^7.4.0",
+ "storybook-react-context": "^0.6.0",
"svgo": "^3.0.2",
"typescript": "^4.9.5"
},
@@ -163,6 +167,9 @@
"react-native-builder-bob": {
"source": "src",
"output": "lib",
+ "exclude": [
+ "example"
+ ],
"targets": [
"commonjs",
"module",
diff --git a/src/components/icons/generateNewIcons.js b/scripts/generateNewIcons.js
similarity index 95%
rename from src/components/icons/generateNewIcons.js
rename to scripts/generateNewIcons.js
index 36d056aa..8489aca8 100644
--- a/src/components/icons/generateNewIcons.js
+++ b/scripts/generateNewIcons.js
@@ -74,10 +74,13 @@ const prettier = require("prettier");
const fs = require("fs-extra");
const { transform } = require("@svgr/core");
-const svgDir = join(__dirname, "svg/originals");
-const tsxDir = join(__dirname, "svg");
-const templateFilePath = join(__dirname, "svg/_IconTemplate.tsx");
-const timestampFilePath = join(__dirname, "timestamp.txt");
+const svgDir = join(__dirname, "../src/components/icons/svg/originals");
+const tsxDir = join(__dirname, "../src/components/icons/svg");
+const templateFilePath = join(
+ __dirname,
+ "../src/components/icons/svg/_IconTemplate.tsx"
+);
+const timestampFilePath = join(__dirname, "icons_timestamp.txt");
const convertTimestampToReadableFormat = timestamp =>
new Date(timestamp).toLocaleString("it-IT", {
diff --git a/src/components/pictograms/generateNewPictograms.js b/scripts/generateNewPictograms.js
similarity index 94%
rename from src/components/pictograms/generateNewPictograms.js
rename to scripts/generateNewPictograms.js
index 35d96b38..1703a146 100644
--- a/src/components/pictograms/generateNewPictograms.js
+++ b/scripts/generateNewPictograms.js
@@ -65,10 +65,13 @@ const prettier = require("prettier");
const fs = require("fs-extra");
const { transform } = require("@svgr/core");
-const svgDir = join(__dirname, "svg/originals");
-const tsxDir = join(__dirname, "svg");
-const templateFilePath = join(__dirname, "svg/_PictogramTemplate.tsx");
-const timestampFilePath = join(__dirname, "timestamp.txt");
+const svgDir = join(__dirname, "../src/components/pictograms/svg/originals");
+const tsxDir = join(__dirname, "../src/components/pictograms/svg");
+const templateFilePath = join(
+ __dirname,
+ "../src/components/pictograms/svg/_PictogramTemplate.tsx"
+);
+const timestampFilePath = join(__dirname, "pictograms_timestamp.txt");
const colorMapValues = {
"#0B3EE3": "{colorValues.hands}",
diff --git a/src/components/icons/generateNewTimestamp.js b/scripts/generateNewTimestamp.js
similarity index 100%
rename from src/components/icons/generateNewTimestamp.js
rename to scripts/generateNewTimestamp.js
diff --git a/scripts/icons_timestamp.txt b/scripts/icons_timestamp.txt
new file mode 100644
index 00000000..8b1aad2a
--- /dev/null
+++ b/scripts/icons_timestamp.txt
@@ -0,0 +1 @@
+2023-11-09T14:14:48.721Z
\ No newline at end of file
diff --git a/src/components/pictograms/timestamp.txt b/scripts/pictograms_timestamp.txt
similarity index 100%
rename from src/components/pictograms/timestamp.txt
rename to scripts/pictograms_timestamp.txt
diff --git a/src/components/checkbox/AnimatedCheckbox.tsx b/src/components/checkbox/AnimatedCheckbox.tsx
index 63fd1050..42af2d6f 100644
--- a/src/components/checkbox/AnimatedCheckbox.tsx
+++ b/src/components/checkbox/AnimatedCheckbox.tsx
@@ -126,10 +126,12 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
]}
/>
{isChecked && (
-
+
+
+
)}
);
diff --git a/src/components/codeInput/CodeInput.tsx b/src/components/codeInput/CodeInput.tsx
new file mode 100644
index 00000000..a4358080
--- /dev/null
+++ b/src/components/codeInput/CodeInput.tsx
@@ -0,0 +1,121 @@
+import React, { useEffect, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+ Easing,
+ useAnimatedStyle,
+ useSharedValue,
+ withSequence,
+ withTiming
+} from "react-native-reanimated";
+import { IOColors, IOStyles } from "../../core";
+import { triggerHaptic } from "../../functions";
+
+type CodeInputProps = {
+ value: string;
+ onValueChange: (value: string) => void;
+ length: number;
+ onValidate: (value: string) => boolean;
+ variant?: "light" | "dark";
+};
+
+const DOT_SIZE = 16;
+
+const styles = StyleSheet.create({
+ dotShape: {
+ width: DOT_SIZE,
+ height: DOT_SIZE,
+ borderRadius: 8,
+ borderWidth: 2
+ },
+ dotEmpty: {
+ borderColor: IOColors["grey-200"]
+ },
+ wrapper: { justifyContent: "center", gap: DOT_SIZE }
+});
+
+const EmptyDot = () => ;
+
+const FilletDot = ({ color }: { color: IOColors }) => (
+
+);
+
+export const CodeInput = ({
+ length,
+ value,
+ onValueChange,
+ variant = "light",
+ onValidate
+}: CodeInputProps) => {
+ const [status, setStatus] = React.useState<"default" | "error">("default");
+
+ const translate = useSharedValue(0);
+ const shakeOffset: number = 8;
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [{ translateX: translate.value }]
+ }));
+
+ const fillColor = useMemo(
+ () =>
+ status === "error"
+ ? "error-600"
+ : variant === "light"
+ ? "white"
+ : "black",
+ [variant, status]
+ );
+
+ useEffect(() => {
+ if (onValidate && value.length === length) {
+ const isValid = onValidate(value);
+
+ if (!isValid) {
+ setStatus("error");
+ triggerHaptic("notificationError");
+
+ // eslint-disable-next-line functional/immutable-data
+ translate.value = withSequence(
+ withTiming(shakeOffset, {
+ duration: 75,
+ easing: Easing.inOut(Easing.cubic)
+ }),
+ withTiming(-shakeOffset, {
+ duration: 75,
+ easing: Easing.inOut(Easing.cubic)
+ }),
+ withTiming(shakeOffset / 2, {
+ duration: 75,
+ easing: Easing.inOut(Easing.cubic)
+ }),
+ withTiming(-shakeOffset / 2, {
+ duration: 75,
+ easing: Easing.inOut(Easing.cubic)
+ }),
+ withTiming(0, { duration: 75, easing: Easing.inOut(Easing.cubic) })
+ );
+
+ const timer = setTimeout(() => {
+ setStatus("default");
+ onValueChange("");
+ }, 500);
+ return () => clearTimeout(timer);
+ }
+ }
+ return;
+ }, [value, onValidate, length, onValueChange, translate]);
+
+ return (
+
+ {[...Array(length)].map((_, i) => (
+
+ {value[i] ? : }
+
+ ))}
+
+ );
+};
diff --git a/src/components/codeInput/index.tsx b/src/components/codeInput/index.tsx
new file mode 100644
index 00000000..5766f9e2
--- /dev/null
+++ b/src/components/codeInput/index.tsx
@@ -0,0 +1 @@
+export * from "./CodeInput";
diff --git a/src/components/icons/README.md b/src/components/icons/README.md
index 22b7216b..56fe3d7d 100644
--- a/src/components/icons/README.md
+++ b/src/components/icons/README.md
@@ -4,33 +4,91 @@ There are different sets:
* **Navigation**: Icons used in the main Tab bar
* **Biometric**: Icons used for the biometric identification
* **Categories**: Icons used for the different sectors available in the Carta Giovani Nazionale
-* **Product**: PagoPA products' icons
-
-## Prefixes
-- **General**: `Icon…`
-- **Navigation**: `IconNav…`
-- **Biometric**: `IconBiometric…`
-- **Categories**: `IconCateg…`
-- **Product**: `IconProduct…`
+* **Product**: PagoPA products' icons
+* **System**: OS-specific icons (iOS/Android)
## Add a new icon
-First of all, follow the instructions stated in the main README (`Vector graphics` section).
-If you want to add a new icon in the `General` set, open the `Icon.tsx` file and import the React component:
-```jsx
-[…]
-import IconSpid from "./svg/IconSpid";
-[…]
-```
+### Prerequisites
+
+In your user interface design app (Figma/Sketch) export your SVG with `1×` preset. The name usually consists of a specific prefix followed by the associated key:
+ - **General**: `Icon…`
+ - **Navigation**: `IconNav…`
+ - **Biometric**: `IconBiometric…`
+ - **Categories**: `IconCateg…`
+ - **Product**: `IconProduct…`
+ - **System**: `IconSystem…`
+
+> [!important]
+> The icon must be contained within a `24×24` frame.
+
+> [!tip]
+> If you want to add a new `Wallet` icon to be used in the main tab bar, your icon will have a `IconNavWallet` filename. If it doesn't belong to a specific set, you just put the name after the prefix `Icon…`, so `IconWallet`
+
+> [!caution]
+> This filename will be the same as the React component, so make sure you don't already have a component with that filename
+
+### Create the corresponding React component
+
+#### Using `scripts/generateNewIcons.js`
+1. Move the exported file to the `icons/svg/originals` folder
+2. In your terminal, in the same folder, run the command: `yarn generate:icons`
+3. The script will process `scripts/icons_timestamp.txt`, generate the new React components (with `*.tsx` extension) following exactly the steps listed in the manual process (see below), and process **only the files added after this timestamp value**
+4. If the `generateNewIcons` script accidentally overwrites older React components, remember to discard the changes before committing
+
+> [!caution]
+> If your icon **is not** monochromatic, you should use the manual process because the script doesn't support this specific case yet
+
+#### Manual process (alternative)
+
+1. Move the exported file to the `icons/svg/originals` folder
+2. In your original SVG file, delete `width` and `height` attributes and leave the original `viewBox` attribute. You could easily process the image using online editors like [SVGOmg](https://jakearchibald.github.io/svgomg/) (enable `Prefer viewBox to width/height`)
+3. In the `icons/svg` folder, create a new React component (with a `.tsx` extension) of the same name
+4. Copy all the `` elements into the new React component and replace the original `` with the element `` (capital P) from the `react-native-svg` package. Replace all the harcoded fill values with the generic `currentColor` value, so that the icon inherits the color from the parent `Svg` container
+
+5. Add the dynamic size and colour (if required), replacing the hardcoded values with the corresponding props. The final result should be similar to the following:
+ ```tsx
+ import { Svg, Path } from "react-native-svg";
+ // [...]
+
+ const IconSpid = ({ size, style }: SVGIconProps) => (
+
+ );
+ ```
+6. Repeat the previous steps for each icon
+7. Once you have finished processing all the new icons, run `node generateNewTimestamp` to avoid overwriting these files with the `generateNewIcons` process.
+
+> [!caution]
+> The `currentColor` value should only be added for monochromatic icons. For example, if you export an `IconSystem...` with specific color values, don't add it at all.
+
+#### Wrong icon rendering?
+Before exporting the SVG file:
+1. Detach the symbol instance to avoid destructive actions to the original source component. Use a draft or disposable project document. **Don't detach it** if you are in the original Design System project file
+2. Outline all the present strokes (unless required for dynamic stroke width, but we don't manage this case at the moment)
+3. Select all the different paths and flatten into one. Now you should have a single vector layer.
+4. Make sure your vector path is centered (both vertically and horizontally) in a square
+
+### Add the corresponding key to the `Icon` component
+
Add the desired key to the `IOIcons` object with the corresponding component reference:
-```jsx
+```tsx
export const IOIcons = {
spid: IconSpid,
…
}
```
-Add the key to the relative icon set:
-```ts
+There's no need to add the new icon in the specific Design System page because it happens automatically.
+
+> [!important]
+> To keep the icons grouped by sets, remember to put the key above the icons with a specific prefix
+
+If the icon belongs to a specific set, add the key to the relative icon set as well:
+```tsx
export const IONavIcons = {
navMessages,
navWallet,
@@ -42,6 +100,8 @@ export const IONavIcons = {
} as const;
```
+### Use the new icon in a different component
+
You can add the recently added icon with the following declaration:
```jsx
// Default size: 24×24px
@@ -51,5 +111,5 @@ You can add the recently added icon with the following declaration:
## View all the available icons
There are two ways:
-- In the app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
+- In the main app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
- In the repository, go to the `svg/originals` subfolder
diff --git a/src/components/icons/timestamp.txt b/src/components/icons/timestamp.txt
deleted file mode 100644
index 6b33e533..00000000
--- a/src/components/icons/timestamp.txt
+++ /dev/null
@@ -1 +0,0 @@
-2023-10-30T09:55:59.147Z
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 32e3de95..4bb45465 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -6,6 +6,7 @@ export * from "./banner";
export * from "./buttons";
export * from "./checkbox";
export * from "./contentWrapper";
+export * from "./codeInput";
export * from "./divider";
export * from "./featureInfo";
export * from "./icons";
diff --git a/src/components/listitems/ListItemHeader.tsx b/src/components/listitems/ListItemHeader.tsx
new file mode 100644
index 00000000..75be23dd
--- /dev/null
+++ b/src/components/listitems/ListItemHeader.tsx
@@ -0,0 +1,146 @@
+import React, { ComponentProps, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import {
+ IOListItemStyles,
+ IOListItemVisualParams,
+ IOStyles,
+ useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { IOIcons, Icon } from "../icons";
+import { H6 } from "../typography";
+import { ButtonLink, IconButton } from "../buttons";
+import { Badge } from "../badge";
+
+type ButtonLinkActionProps = {
+ type: "buttonLink";
+ componentProps: ComponentProps;
+};
+
+type IconButtonActionProps = {
+ type: "iconButton";
+ componentProps: ComponentProps;
+};
+
+type BadgeProps = {
+ type: "badge";
+ componentProps: ComponentProps;
+};
+
+type IconProps =
+ | {
+ iconName: IOIcons;
+ iconColor?: ComponentProps["color"];
+ }
+ | { iconName?: never; iconColor?: never };
+
+type EndElementProps =
+ | ButtonLinkActionProps
+ | IconButtonActionProps
+ | BadgeProps;
+
+export type ListItemHeader = WithTestID<{
+ label: string;
+ numberOfLines?: number;
+ endElement?: EndElementProps;
+ // Accessibility
+ accessibilityLabel?: string;
+}> &
+ IconProps;
+
+export const ListItemHeader = ({
+ label,
+ iconName,
+ iconColor,
+ endElement,
+ accessibilityLabel,
+ testID
+}: ListItemHeader) => {
+ const theme = useIOTheme();
+
+ const listItemAccessibilityLabel = useMemo(
+ () => (accessibilityLabel ? accessibilityLabel : `${label}`),
+ [label, accessibilityLabel]
+ );
+
+ const itemInfoTextComponent = useMemo(
+ () => (
+
+
@@ -162,13 +175,15 @@ export const ListItemNav = ({
)}
{listItemNavContent}
-
-
-
+ {!hideChevron && (
+
+
+
+ )}
diff --git a/src/components/listitems/index.tsx b/src/components/listitems/index.tsx
index 415b8a16..56da797f 100644
--- a/src/components/listitems/index.tsx
+++ b/src/components/listitems/index.tsx
@@ -1,4 +1,5 @@
export * from "./ListItemAction";
+export * from "./ListItemHeader";
export * from "./ListItemInfo";
export * from "./ListItemInfoCopy";
export * from "./ListItemNav";
diff --git a/src/components/modules/ModuleCheckout.tsx b/src/components/modules/ModuleCheckout.tsx
new file mode 100644
index 00000000..f09e9d17
--- /dev/null
+++ b/src/components/modules/ModuleCheckout.tsx
@@ -0,0 +1,98 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import Placeholder from "rn-placeholder";
+import { IOModuleStyles, IOSpacingScale, useIOTheme } from "../../core";
+import { ButtonLink } from "../buttons";
+import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { HSpacer, VSpacer } from "../spacer";
+import { H6, LabelSmall } from "../typography";
+import { PressableModuleBase } from "./PressableModuleBase";
+
+// ---------------- types ----------------
+
+export type ModuleCheckoutProps = { ctaText: string } & (
+ | {
+ paymentLogo?: IOLogoPaymentType;
+ title: string;
+ subtitle: string;
+ isLoading?: false;
+ onPress?: () => void;
+ }
+ | {
+ isLoading: true;
+ }
+);
+
+type CtaOnlyProps = { text?: string };
+
+// ---------------- component ----------------
+
+export const ModuleCheckout = (props: ModuleCheckoutProps) => {
+ const theme = useIOTheme();
+
+ if (props.isLoading) {
+ return ;
+ }
+
+ const paymentLogoEndMargin: IOSpacingScale = 12;
+
+ return (
+
+ {/*
+ we don't want to let the `space-between`
+ handle spacing for the logo/text section,
+ so we use a row and a marginEnd on the logo
+ */}
+
+ {props.paymentLogo && (
+
+
+
+ )}
+
+
{props.title}
+
+ {props.subtitle}
+
+
+
+
+
+ );
+};
+
+// ---------------- sub-components----------------
+
+const CTA = ({ text }: CtaOnlyProps) => (
+
+ null}
+ />
+
+);
+
+const LoadingVersion = ({ text }: CtaOnlyProps) => (
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+// ---------------- styles ----------------
+
+const styles = StyleSheet.create({
+ rowCenter: {
+ flexDirection: "row",
+ alignItems: "center"
+ }
+});
diff --git a/src/components/modules/index.tsx b/src/components/modules/index.tsx
index 5fce87cd..1d2b3ac6 100644
--- a/src/components/modules/index.tsx
+++ b/src/components/modules/index.tsx
@@ -1,3 +1,4 @@
export * from "./ModuleIDP";
export * from "./ModulePaymentNotice";
export * from "./PressableModuleBase";
+export * from "./ModuleCheckout";
diff --git a/src/components/numberpad/NumberPad.tsx b/src/components/numberpad/NumberPad.tsx
index 525d183a..ed16552c 100644
--- a/src/components/numberpad/NumberPad.tsx
+++ b/src/components/numberpad/NumberPad.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable functional/immutable-data */
-import React, { ComponentProps, useRef } from "react";
+import React, { ComponentProps } from "react";
import { View } from "react-native";
import { BiometricsValidType } from "../../utils/types";
import { IONumberPadButtonStyles, IOStyles } from "../../core";
@@ -21,6 +20,7 @@ type BiometricAuthProps =
};
type NumberPadProps = {
+ value: string;
onValueChange: (value: string) => void;
variant: ComponentProps["variant"];
deleteAccessibilityLabel: string;
@@ -47,6 +47,7 @@ const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
);
export const NumberPad = ({
+ value,
variant = "dark",
onValueChange,
biometricType,
@@ -54,16 +55,14 @@ export const NumberPad = ({
biometricAccessibilityLabel,
deleteAccessibilityLabel
}: NumberPadProps) => {
- const numberPadValue = useRef("");
-
const numberPadPress = (number: number) => {
- numberPadValue.current = `${numberPadValue.current}${number}`;
- onValueChange(numberPadValue.current);
+ const newValue = `${value}${number}`;
+ onValueChange(newValue);
};
const onDeletePress = () => {
- numberPadValue.current = numberPadValue.current.slice(0, -1);
- onValueChange(numberPadValue.current);
+ const newValue = value.slice(0, -1);
+ onValueChange(newValue);
};
type ButtonType = "biometric" | "delete";
diff --git a/src/components/pictograms/README.md b/src/components/pictograms/README.md
index 53894527..b479e947 100644
--- a/src/components/pictograms/README.md
+++ b/src/components/pictograms/README.md
@@ -1,29 +1,118 @@
# Pictograms
-
-## Prefix
-To avoid confusion with other components referenced in the codebase, just use the prefix `Pictogram…`
+There are different sets:
+* **General**
+* **Objects**: Pictograms that represent object without hands
+* **Bleed**: Pictograms used near the edge of the component's block (w/o inner margins)
## Add a new pictogram
-First of all, follow the instructions stated in the main README (`Vector graphics` section).
-If you want to add a new pictogram, open the `Pictogram.tsx` file and import the React component:
-```jsx
-[…]
-import PictogramAirBaloon from "./svg/PictogramAirBaloon";
-[…]
-```
+### Prerequisites
+
+In your user interface design app (Figma/Sketch) export your SVG with `1×` preset. The name usually consists of a specific prefix followed by the associated key:
+ - **General**: `Pictogram…`
+ - **Objects**: `PictogramObj…`
+ - **Bleed**: `PictogramBleed…`
+
+> [!important]
+> The pictogram must be contained within a `240×240` frame.
+
+> [!tip]
+> If you want to add a new `key` object pictogram, your pictogram will have a `PictogramObjKey` filename. If it doesn't belong to a specific set, you just put the name after the prefix `Pictogram…`, so `PictogramKey`
+
+> [!caution]
+> This filename will be the same as the React component, so make sure you don't already have a component with that filename
+
+### Create the corresponding React component
+
+#### Using `scripts/generateNewPictograms.js`
+1. Move the exported file to the `pictograms/svg/originals` folder
+2. In your terminal, in the same folder, run the command: `yarn generate:pictograms`
+3. The script will process `scripts/pictograms_timestamp.txt`, generate the new React components (with `*.tsx` extension) following exactly the steps listed in the manual process (see below), and process **only the files added after this timestamp value**
+4. If the `generateNewPictograms` script accidentally overwrites older React components, remember to discard the changes before committing
+
+> [!caution]
+> If your pictogram **contains** other shapes than `path`, you should use the manual process because the script doesn't support this specific case yet (e.g: `Circle`)
+
+#### Manual process (alternative)
+
+1. Move the exported file to the `pictograms/svg/originals` folder
+2. In your original SVG file, delete `width` and `height` attributes and leave the original `viewBox` attribute. You could easily process the image using online editors like [SVGOmg](https://jakearchibald.github.io/svgomg/) (enable `Prefer viewBox to width/height`)
+3. In the `pictograms/svg` folder, create a new React component (with a `.tsx` extension) of the same name
+4. Copy all the `` elements into a new React component and replace the original `` with the element `` (capital P) from the `react-native-svg` package. Replace all the harcoded fill values with the following corresponding values:
+ * `#0B3EE3` → `{colorValues.hands}`
+ * `#AAEEEF` → `{colorValues.main}`
+ * `#00C5CA` → `{colorValues.secondary}`
+5. Add the dynamic size, replacing the hardcoded values with the corresponding props. The final result should be similar to the following:
+
+ ```tsx
+ import { Svg, Path } from "react-native-svg";
+ // [...]
+
+ const PictogramAttention = ({
+ size,
+ colorValues,
+ ...props
+ }: SVGPictogramProps) => (
+
+ );
+ ```
+6. Repeat the previous steps for each pictogram
+7. Once you have finished processing all the new pictograms, run `node generateNewTimestamp` to avoid overwriting these files with the `generateNewPictograms` process.
+
+#### Wrong pictogram rendering?
+Before exporting the SVG file:
+1. Detach the symbol instance to avoid destructive actions to the original source component. Use a draft or disposable project document. **Don't detach it** if you are in the original Design System project file
+2. Outline all the present strokes (unless required for dynamic stroke width, but we don't manage this case at the moment)
+3. Select all the different paths and flatten into one. Now you should have a single vector layer.
+4. Make sure your vector path is centered (both vertically and horizontally) in a square
+
+### Add the corresponding key to the `Pictogram` component
+
Add the desired key to the `IOPictograms` object with the corresponding component reference:
```jsx
export const IOPictograms = {
- airBaloon: PictogramAirBaloon,
+ feedback: PictogramFeedback,
…
}
```
+There's no need to add the new pictogram in the specific Design System page because it happens automatically.
+
+> [!important]
+> To keep the pictograms grouped by sets, remember to put the key above the pictograms with a specific prefix
+
+If the pictogram belongs to a specific set, add the key to the relative pictogram set as well:
+```tsx
+// Destructuring starting from `IOPictograms`
+const { NEW_PICTOGRAM, ibanCard, manual, trash, clock, key, flyingMessage } =
+ IOPictograms;
+
+// Add the new key to the associated object
+export const IOPictogramsObject = {
+ NEW_PICTOGRAM, // ←
+ ibanCard,
+ followMessage,
+ manual,
+ trash,
+ clock,
+ key,
+ flyingMessage
+} as const;
+```
+### Use the new icon in a different component
+
You can add the recently added pictogram with the following declaration:
```jsx
-// Default size: 120×120px
-// Default color: Turquoise
-
+// Default size: 120×120
+
```
## View all the available pictograms
diff --git a/src/components/stepper/Stepper.tsx b/src/components/stepper/Stepper.tsx
index 22b57291..a2bb02d7 100644
--- a/src/components/stepper/Stepper.tsx
+++ b/src/components/stepper/Stepper.tsx
@@ -17,19 +17,14 @@ type StepperProps = {
const STEPPER_SPACE: IOSpacer = 4;
const colorMap: Record = {
- active: "blueIO-500",
- inactive: "grey-200"
+ active: "blueIO-500"
};
const legacyColorMap: Record = {
- active: "blue",
- inactive: "bluegrey"
+ active: "blue"
};
-export const Stepper = ({
- steps,
- currentStep,
-}: StepperProps) => {
+export const Stepper = ({ steps, currentStep }: StepperProps) => {
const { isExperimental } = useIOExperimentalDesign();
const colors = useMemo(
() => (isExperimental ? colorMap : legacyColorMap),
@@ -44,9 +39,7 @@ export const Stepper = ({
};
return (
-
+ currentStep - 1 ? colors.inactive : colors.active],
+ IOColors[i > currentStep - 1 ? "grey-200" : colors.active],
borderBottomWidth: 2,
width: stepWidth - STEPPER_SPACE
}}
diff --git a/src/components/typography/README.md b/src/components/typography/README.md
new file mode 100644
index 00000000..23e2c9b0
--- /dev/null
+++ b/src/components/typography/README.md
@@ -0,0 +1,23 @@
+# Typography
+
+## Handling font files
+
+The application uses the font _Titillium Web_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumWeb-SemiBoldItalic` example, you must apply the following properties for Android:
+
+```css
+{
+ fontFamily: 'TitilliumWeb-SemiBoldItalic'
+}
+```
+
+while in iOS the code to be applied is:
+
+```css
+{
+ fontFamily: 'Titillium Web',
+ fontWeight: '600',
+ fontStyle: 'italic'
+}
+```
+
+To manage fonts and variants more easily, we have created utility functions within the file [fonts.ts](../../utils/fonts.ts).
\ No newline at end of file
diff --git a/stories/.eslintrc.js b/stories/.eslintrc.js
new file mode 100644
index 00000000..87ff5bcf
--- /dev/null
+++ b/stories/.eslintrc.js
@@ -0,0 +1,120 @@
+module.exports = {
+ root: true,
+ extends: [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react/recommended",
+ "plugin:react-hooks/recommended",
+ "prettier",
+ "plugin:storybook/recommended"
+ ],
+ parser: "@typescript-eslint/parser",
+ parserOptions: {
+ project: "tsconfig.json",
+ sourceType: "module",
+ ecmaFeatures: {
+ jsx: true
+ }
+ },
+ plugins: [
+ "@typescript-eslint",
+ "react",
+ "react-native",
+ "react-hooks",
+ "import",
+ "functional"
+ ],
+ rules: {
+ "no-case-declarations": "off",
+ "no-inner-declarations": "off",
+ "prefer-const": "error",
+ curly: "error",
+ "spaced-comment": ["error", "always", { block: { balanced: true } }],
+ radix: "error",
+ "one-var": ["error", "never"],
+ "object-shorthand": "error",
+ "no-var": "error",
+ "no-param-reassign": "error",
+ "no-underscore-dangle": "error",
+ "no-undef-init": "error",
+ "no-throw-literal": "error",
+ "no-new-wrappers": "error",
+ "no-eval": "error",
+ "no-console": "error",
+ "no-caller": "error",
+ "no-bitwise": "error",
+ "no-duplicate-imports": "error",
+ eqeqeq: ["error", "smart"],
+ "max-classes-per-file": ["error", 1],
+ "guard-for-in": "error",
+ complexity: "error",
+ "arrow-body-style": "error",
+ "import/order": "error",
+ "@typescript-eslint/no-unused-vars": "off",
+ // Enable if we want to enforce the return type for all the functions
+ "@typescript-eslint/explicit-module-boundary-types": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ // TODO: added for compatibility. Removing this line we have to remove all the any usage in the code
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/array-type": [
+ "error",
+ {
+ default: "generic"
+ }
+ ],
+ "@typescript-eslint/await-thenable": "error",
+ "@typescript-eslint/consistent-type-assertions": "error",
+ "@typescript-eslint/dot-notation": "error",
+ "@typescript-eslint/member-delimiter-style": [
+ "error",
+ {
+ multiline: {
+ delimiter: "semi",
+ requireLast: true
+ },
+ singleline: {
+ delimiter: "semi",
+ requireLast: false
+ }
+ }
+ ],
+ "@typescript-eslint/no-floating-promises": "error",
+ "no-unused-expressions": "off",
+ "@typescript-eslint/no-unused-expressions": ["error"],
+ "@typescript-eslint/prefer-function-type": "error",
+ "@typescript-eslint/restrict-plus-operands": "error",
+ semi: "off",
+ "@typescript-eslint/semi": ["error"],
+ "@typescript-eslint/unified-signatures": "error",
+ "react/prop-types": "off",
+ "react/display-name": "off",
+ "react/jsx-key": "error",
+ "react/jsx-no-bind": ["error", { allowArrowFunctions: true }],
+ "functional/no-let": "error",
+ "functional/immutable-data": "error",
+ "react-native/no-unused-styles": "error",
+ "react-native/split-platform-components": "off",
+ "react-native/no-inline-styles": "off",
+ "react-native/no-color-literals": "error",
+ "react-native/no-raw-text":
+ "off" /* Error when you launch the lint command */,
+ "react-native/no-single-element-style-arrays": "warn"
+ },
+ env: {
+ "react-native/react-native": true
+ },
+ overrides: [
+ {
+ files: ["**/*.test.*"],
+ rules: {
+ "@typescript-eslint/no-non-null-assertion": "off"
+ }
+ }
+ ],
+ settings: {
+ react: {
+ version: "detect"
+ }
+ }
+};
diff --git a/stories/accordion/RawAccordion.stories.tsx b/stories/accordion/RawAccordion.stories.tsx
new file mode 100644
index 00000000..7df0bce1
--- /dev/null
+++ b/stories/accordion/RawAccordion.stories.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccordionItem, Caption } 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: "IO-App Design System/Atoms/Accordion/Accordion",
+ component: AccordionItem,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "padded"
+ },
+ // 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 BaseAccordion: Story = {
+ args: {
+ title: "Accordion Title",
+ id: 1,
+ body:
{"Accordion body"}
+ }
+};
diff --git a/stories/buttons/ButtonExtendedOutline.stories.ts b/stories/buttons/ButtonExtendedOutline.stories.ts
new file mode 100644
index 00000000..b357377e
--- /dev/null
+++ b/stories/buttons/ButtonExtendedOutline.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { ButtonExtendedOutline } 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: "IO-App Design System/Components/Buttons/ButtonExtendedOutline",
+ component: ButtonExtendedOutline,
+ 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 Primary: Story = {
+ args: {
+ label: "Primary button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
diff --git a/src/stories/ButtonDS.stories.ts b/stories/buttons/ButtonLink.stories.ts
similarity index 84%
rename from src/stories/ButtonDS.stories.ts
rename to stories/buttons/ButtonLink.stories.ts
index 25742fcc..4f068506 100644
--- a/src/stories/ButtonDS.stories.ts
+++ b/stories/buttons/ButtonLink.stories.ts
@@ -1,19 +1,19 @@
import type { Meta, StoryObj } from "@storybook/react";
import { action } from "@storybook/addon-actions";
-import { ButtonSolid } from "../components";
+import { ButtonLink } 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: "Example/ButtonSolid",
- component: ButtonSolid,
+ title: "IO-App Design System/Components/Buttons/ButtonLink",
+ component: ButtonLink,
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;
+} satisfies Meta;
export default meta;
type Story = StoryObj;
diff --git a/stories/buttons/ButtonOutline.stories.ts b/stories/buttons/ButtonOutline.stories.ts
new file mode 100644
index 00000000..e8d3db75
--- /dev/null
+++ b/stories/buttons/ButtonOutline.stories.ts
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { ButtonOutline } 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: "IO-App Design System/Components/Buttons/ButtonOutline",
+ component: ButtonOutline,
+ 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 Primary: Story = {
+ args: {
+ color: "primary",
+ accessibilityLabel: "Tap to trigger test alert",
+ label: "Primary button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
+export const Danger: Story = {
+ args: {
+ color: "danger",
+ accessibilityLabel: "Tap to trigger test alert",
+ label: "Danger button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
+export const Contrast: Story = {
+ args: {
+ color: "contrast",
+ accessibilityLabel: "Tap to trigger test alert",
+ label: "Contrast button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
diff --git a/stories/buttons/ButtonSolid.stories.ts b/stories/buttons/ButtonSolid.stories.ts
new file mode 100644
index 00000000..56c45750
--- /dev/null
+++ b/stories/buttons/ButtonSolid.stories.ts
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { ButtonSolid } 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: "IO-App Design System/Components/Buttons/ButtonSolid",
+ component: ButtonSolid,
+ 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 Primary: Story = {
+ args: {
+ color: "primary",
+ accessibilityLabel: "Tap to trigger test alert",
+ label: "Primary button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
+export const Danger: Story = {
+ args: {
+ color: "danger",
+ accessibilityLabel: "Tap to trigger test alert",
+ label: "Danger button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
+export const Contrast: Story = {
+ args: {
+ color: "contrast",
+ accessibilityLabel: "Tap to trigger test alert",
+ label: "Contrast button",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
diff --git a/stories/buttons/IconButton.stories.ts b/stories/buttons/IconButton.stories.ts
new file mode 100644
index 00000000..e4b2603b
--- /dev/null
+++ b/stories/buttons/IconButton.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { IconButton } 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: "IO-App Design System/Components/Buttons/IconButton",
+ component: IconButton,
+ 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 Primary: Story = {
+ args: {
+ color: "primary",
+ icon: "add",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
diff --git a/stories/buttons/IconButtonContained.stories.ts b/stories/buttons/IconButtonContained.stories.ts
new file mode 100644
index 00000000..1ba36924
--- /dev/null
+++ b/stories/buttons/IconButtonContained.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { IconButtonContained } 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: "IO-App Design System/Components/Buttons/IconButtonContained",
+ component: IconButtonContained,
+ 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 Primary: Story = {
+ args: {
+ color: "primary",
+ icon: "add",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
diff --git a/stories/buttons/IconButtonSolid.stories.ts b/stories/buttons/IconButtonSolid.stories.ts
new file mode 100644
index 00000000..3842a4eb
--- /dev/null
+++ b/stories/buttons/IconButtonSolid.stories.ts
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { IconButtonSolid } from "../../src/components";
+import { withTheme } from "../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: "IO-App Design System/Components/Buttons/IconButtonSolid",
+ component: IconButtonSolid,
+ 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"],
+ decorators: [withTheme]
+} 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 Primary: Story = {
+ args: {
+ color: "primary",
+ icon: "add",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
+
+export const Contrast: Story = {
+ args: {
+ color: "contrast",
+ icon: "add",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: e => {
+ action("clicked")(e);
+ }
+ }
+};
diff --git a/stories/icons/Icon.stories.ts b/stories/icons/Icon.stories.ts
new file mode 100644
index 00000000..73ed076a
--- /dev/null
+++ b/stories/icons/Icon.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Icon } 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: "IO-App Design System/Atoms/Assets/Icons",
+ component: Icon,
+ 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;
+
+export const Primary: Story = {
+ args: {
+ color: "black",
+ name: "abacus"
+ }
+};
diff --git a/stories/icons/Pictogram.stories.ts b/stories/icons/Pictogram.stories.ts
new file mode 100644
index 00000000..0613ae85
--- /dev/null
+++ b/stories/icons/Pictogram.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Pictogram } 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: "IO-App Design System/Atoms/Assets/Pictograms",
+ component: Pictogram,
+ 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;
+
+export const Primary: Story = {
+ args: {
+ color: "blueIO-500",
+ name: "cardAdd"
+ }
+};
diff --git a/stories/listItems/ListItemCheckbox.stories.ts b/stories/listItems/ListItemCheckbox.stories.ts
new file mode 100644
index 00000000..e03514bd
--- /dev/null
+++ b/stories/listItems/ListItemCheckbox.stories.ts
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ListItemCheckbox } from "../../src/components";
+import { withTheme } from "../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: "IO-App Design System/Components/List Items/ListItemCheckbox",
+ component: ListItemCheckbox,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "padded"
+ },
+ decorators: [withTheme],
+ // 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 Active: Story = {
+ args: {
+ value: "List Item Checkbox",
+ description: "This is a list item checkbox",
+ accessibilityLabel: "Tap to trigger test alert"
+ }
+};
+
+export const Disabled: Story = {
+ args: {
+ value: "List Item Checkbox",
+ disabled: true,
+ description: "This is a list item checkbox",
+ accessibilityLabel: "Tap to trigger test alert"
+ }
+};
diff --git a/stories/listItems/ListItemRadio.stories.ts b/stories/listItems/ListItemRadio.stories.ts
new file mode 100644
index 00000000..10f10abd
--- /dev/null
+++ b/stories/listItems/ListItemRadio.stories.ts
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ListItemRadio } from "../../src/components";
+import { withTheme } from "../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: "IO-App Design System/Components/List Items/ListItemRadio",
+ component: ListItemRadio,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "padded"
+ },
+ decorators: [withTheme],
+ // 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 Active: Story = {
+ args: {
+ value: "List Item Checkbox",
+ selected: true,
+ description: "This is a list item checkbox",
+ accessibilityLabel: "Tap to trigger test alert"
+ }
+};
+
+export const Disabled: Story = {
+ args: {
+ value: "List Item Checkbox",
+ selected: true,
+ disabled: true,
+ description: "This is a list item checkbox",
+ accessibilityLabel: "Tap to trigger test alert"
+ }
+};
diff --git a/stories/listItems/ListItemSwitch.stories.ts b/stories/listItems/ListItemSwitch.stories.ts
new file mode 100644
index 00000000..f9821ebd
--- /dev/null
+++ b/stories/listItems/ListItemSwitch.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ListItemSwitch } from "../../src/components";
+import { withTheme } from "../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: "IO-App Design System/Components/List Items/ListItemSwitch",
+ component: ListItemSwitch,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "padded"
+ },
+ decorators: [withTheme],
+ // 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 Active: Story = {
+ args: {
+ label: "List Item Checkbox",
+ description: "This is a list item checkbox"
+ }
+};
+
+export const Disabled: Story = {
+ args: {
+ label: "List Item Checkbox",
+ value: true,
+ disabled: true,
+ description: "This is a list item checkbox"
+ }
+};
diff --git a/src/stories/ModuleIDP.stories.tsx b/stories/modules/ModuleIDP.stories.tsx
similarity index 89%
rename from src/stories/ModuleIDP.stories.tsx
rename to stories/modules/ModuleIDP.stories.tsx
index 51334bda..cec5a2d4 100644
--- a/src/stories/ModuleIDP.stories.tsx
+++ b/stories/modules/ModuleIDP.stories.tsx
@@ -3,12 +3,12 @@ import React from "react";
import { action } from "@storybook/addon-actions";
import { ImageSourcePropType } from "react-native";
-import { ModuleIDP } from "../components";
-import { IOThemeContext, IOThemes } from "..";
+import { ModuleIDP } from "../../src/components";
+import { IOThemeContext, IOThemes } from "../../src";
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
- title: "Example/ModuleIDP",
+ title: "IO-App Design System/Atoms/Modules/ModuleIDP",
component: ModuleIDP,
decorators: [
Story => (
diff --git a/stories/textInput/TextInput.stories.ts b/stories/textInput/TextInput.stories.ts
new file mode 100644
index 00000000..ea3f1768
--- /dev/null
+++ b/stories/textInput/TextInput.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TextInput } from "../../src/components";
+import { withTheme } from "../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: "IO-App Design System/Components/Text Input/TextInput",
+ component: TextInput,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "padded"
+ },
+ decorators: [withTheme],
+ // 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 Active: Story = {
+ args: {
+ placeholder: "Input Placeholder",
+ value: ""
+ }
+};
+
+export const Disabled: Story = {
+ args: {
+ placeholder: "Input Placeholder (Disabled)",
+ value: ""
+ }
+};
diff --git a/stories/tsconfig.json b/stories/tsconfig.json
new file mode 100644
index 00000000..1a15968e
--- /dev/null
+++ b/stories/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "extends": "../tsconfig"
+}
\ No newline at end of file
diff --git a/stories/typography/ButtonText.stories.ts b/stories/typography/ButtonText.stories.ts
new file mode 100644
index 00000000..eb3f0c73
--- /dev/null
+++ b/stories/typography/ButtonText.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { ButtonText } 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: "IO-App Design System/Atoms/Typography/ButtonText",
+ component: ButtonText,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "centered",
+ actions: { argTypesRegex: "^on.*" }
+ },
+ // 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;
+
+export const Primary: Story = {
+ args: {
+ color: "black",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: () => Alert.alert("Alert", "Action triggered"),
+ children: "Hello World"
+ }
+};
diff --git a/stories/typography/Caption.stories.ts b/stories/typography/Caption.stories.ts
new file mode 100644
index 00000000..11cb9591
--- /dev/null
+++ b/stories/typography/Caption.stories.ts
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { Caption } 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: "IO-App Design System/Atoms/Typography/Caption",
+ component: Caption,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "centered",
+ actions: { argTypesRegex: "^on.*" }
+ },
+ // 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;
+
+export const Primary: Story = {
+ args: {
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: () => Alert.alert("Alert", "Action triggered"),
+ children: "Hello World"
+ }
+};
diff --git a/stories/typography/Chip.stories.ts b/stories/typography/Chip.stories.ts
new file mode 100644
index 00000000..efe3c73f
--- /dev/null
+++ b/stories/typography/Chip.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { Chip } 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: "IO-App Design System/Atoms/Typography/Chip",
+ component: Chip,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "centered",
+ actions: { argTypesRegex: "^on.*" }
+ },
+ // 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;
+
+export const Primary: Story = {
+ args: {
+ color: "black",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: () => Alert.alert("Alert", "Action triggered"),
+ children: "Hello World"
+ }
+};
diff --git a/src/stories/H1.stories.ts b/stories/typography/H1.stories.ts
similarity index 87%
rename from src/stories/H1.stories.ts
rename to stories/typography/H1.stories.ts
index a2b24cec..ad51b75b 100644
--- a/src/stories/H1.stories.ts
+++ b/stories/typography/H1.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { H1 } from "../components";
+import { H1 } 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: "Example/H1",
+ title: "IO-App Design System/Atoms/Typography/H1",
component: H1,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/H2.stories.ts b/stories/typography/H2.stories.ts
similarity index 87%
rename from src/stories/H2.stories.ts
rename to stories/typography/H2.stories.ts
index 50cf985a..dbd5fae1 100644
--- a/src/stories/H2.stories.ts
+++ b/stories/typography/H2.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { H2 } from "../components";
+import { H2 } 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: "Example/H2",
+ title: "IO-App Design System/Atoms/Typography/H2",
component: H2,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/H3.stories.ts b/stories/typography/H3.stories.ts
similarity index 87%
rename from src/stories/H3.stories.ts
rename to stories/typography/H3.stories.ts
index 565dd0c2..dbfe551b 100644
--- a/src/stories/H3.stories.ts
+++ b/stories/typography/H3.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { H3 } from "../components";
+import { H3 } 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: "Example/H3",
+ title: "IO-App Design System/Atoms/Typography/H3",
component: H3,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/H4.stories.ts b/stories/typography/H4.stories.ts
similarity index 87%
rename from src/stories/H4.stories.ts
rename to stories/typography/H4.stories.ts
index 54d0718a..c7925ff2 100644
--- a/src/stories/H4.stories.ts
+++ b/stories/typography/H4.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { H4 } from "../components";
+import { H4 } 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: "Example/H4",
+ title: "IO-App Design System/Atoms/Typography/H4",
component: H4,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/H5.stories.ts b/stories/typography/H5.stories.ts
similarity index 87%
rename from src/stories/H5.stories.ts
rename to stories/typography/H5.stories.ts
index 9c933983..430e7b57 100644
--- a/src/stories/H5.stories.ts
+++ b/stories/typography/H5.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { H5 } from "../components";
+import { H5 } 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: "Example/H5",
+ title: "IO-App Design System/Atoms/Typography/H5",
component: H5,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/H6.stories.ts b/stories/typography/H6.stories.ts
similarity index 87%
rename from src/stories/H6.stories.ts
rename to stories/typography/H6.stories.ts
index 95b4a5d9..001c8ed0 100644
--- a/src/stories/H6.stories.ts
+++ b/stories/typography/H6.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { H6 } from "../components";
+import { H6 } 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: "Example/H6",
+ title: "IO-App Design System/Atoms/Typography/H6",
component: H6,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/stories/typography/Hero.stories.ts b/stories/typography/Hero.stories.ts
new file mode 100644
index 00000000..c8395acd
--- /dev/null
+++ b/stories/typography/Hero.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { Hero } 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: "IO-App Design System/Atoms/Typography/Hero",
+ component: Hero,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "centered",
+ actions: { argTypesRegex: "^on.*" }
+ },
+ // 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;
+
+export const Primary: Story = {
+ args: {
+ color: "black",
+ accessibilityLabel: "Tap to trigger test alert",
+ onPress: () => Alert.alert("Alert", "Action triggered"),
+ children: "Hello World"
+ }
+};
diff --git a/src/stories/Label.stories.ts b/stories/typography/Label.stories.ts
similarity index 87%
rename from src/stories/Label.stories.ts
rename to stories/typography/Label.stories.ts
index ed833a90..212fa4b8 100644
--- a/src/stories/Label.stories.ts
+++ b/stories/typography/Label.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { Label } from "../components";
+import { Label } 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: "Example/Label",
+ title: "IO-App Design System/Atoms/Typography/Label",
component: Label,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/LabelSmall.stories.ts b/stories/typography/LabelSmall.stories.ts
similarity index 86%
rename from src/stories/LabelSmall.stories.ts
rename to stories/typography/LabelSmall.stories.ts
index b64d32d8..71144204 100644
--- a/src/stories/LabelSmall.stories.ts
+++ b/stories/typography/LabelSmall.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { LabelSmall } from "../components";
+import { LabelSmall } 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: "Example/LabelSmall",
+ title: "IO-App Design System/Atoms/Typography/LabelSmall",
component: LabelSmall,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -13,7 +13,7 @@ const meta = {
actions: { argTypesRegex: "^on.*" }
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- tags: ["autodocs"],
+ tags: ["autodocs"]
} satisfies Meta;
export default meta;
@@ -25,4 +25,4 @@ export const Primary: Story = {
onPress: () => Alert.alert("Alert", "Action triggered"),
children: "Hello World"
}
-};
\ No newline at end of file
+};
diff --git a/src/stories/Link.stories.ts b/stories/typography/Link.stories.ts
similarity index 89%
rename from src/stories/Link.stories.ts
rename to stories/typography/Link.stories.ts
index 0709317d..6d656276 100644
--- a/src/stories/Link.stories.ts
+++ b/stories/typography/Link.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { LabelLink } from "../components";
+import { LabelLink } 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: "Example/Link",
+ title: "IO-App Design System/Atoms/Typography/Link",
component: LabelLink,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/stories/Monospace.stories.ts b/stories/typography/Monospace.stories.ts
similarity index 88%
rename from src/stories/Monospace.stories.ts
rename to stories/typography/Monospace.stories.ts
index b3ce056f..db4c8b23 100644
--- a/src/stories/Monospace.stories.ts
+++ b/stories/typography/Monospace.stories.ts
@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "react-native";
-import { BodyMonospace } from "../components";
+import { BodyMonospace } 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: "Example/Monospace",
+ title: "IO-App Design System/Atoms/Typography/Monospace",
component: BodyMonospace,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/stories/utils.tsx b/stories/utils.tsx
new file mode 100644
index 00000000..6712fb98
--- /dev/null
+++ b/stories/utils.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Decorator } from "@storybook/react";
+import { IOThemeContext, IOThemes } from "../src/core";
+
+export const withTheme: Decorator = (StoryFn, context) => {
+ const themeContext =
+ context.globals.backgrounds && context.globals.backgrounds.value === "dark"
+ ? IOThemes.dark
+ : IOThemes.light;
+
+ // console.log("context", context);
+ return (
+
+
+
+ );
+};
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 999d3f3c..6fe74329 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,5 +1,11 @@
{
"extends": "./tsconfig",
- "exclude": ["example"]
+ "exclude": [
+ "android",
+ "ios",
+ "example",
+ "node_modules",
+ "stories"
+ ]
}
diff --git a/tsconfig.json b/tsconfig.json
index 1fd04fb4..0c732631 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,6 +33,6 @@
"exclude": [
"android",
"ios",
- "node_modules"
+ "node_modules",
]
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 699e9ee3..24bbc6a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3122,6 +3122,46 @@
memoizerific "^1.11.3"
prop-types "^15.7.2"
+"@storybook/addons@^6.3.6":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.16.tgz#07e8f2205f86fa4c9dada719e3e096cb468e3cdd"
+ integrity sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==
+ dependencies:
+ "@storybook/api" "6.5.16"
+ "@storybook/channels" "6.5.16"
+ "@storybook/client-logger" "6.5.16"
+ "@storybook/core-events" "6.5.16"
+ "@storybook/csf" "0.0.2--canary.4566f4d.1"
+ "@storybook/router" "6.5.16"
+ "@storybook/theming" "6.5.16"
+ "@types/webpack-env" "^1.16.0"
+ core-js "^3.8.2"
+ global "^4.4.0"
+ regenerator-runtime "^0.13.7"
+
+"@storybook/api@6.5.16":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.16.tgz#897915b76de05587fd702951d5d836f708043662"
+ integrity sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==
+ dependencies:
+ "@storybook/channels" "6.5.16"
+ "@storybook/client-logger" "6.5.16"
+ "@storybook/core-events" "6.5.16"
+ "@storybook/csf" "0.0.2--canary.4566f4d.1"
+ "@storybook/router" "6.5.16"
+ "@storybook/semver" "^7.3.2"
+ "@storybook/theming" "6.5.16"
+ core-js "^3.8.2"
+ fast-deep-equal "^3.1.3"
+ global "^4.4.0"
+ lodash "^4.17.21"
+ memoizerific "^1.11.3"
+ regenerator-runtime "^0.13.7"
+ store2 "^2.12.0"
+ telejson "^6.0.8"
+ ts-dedent "^2.0.0"
+ util-deprecate "^1.0.2"
+
"@storybook/blocks@7.4.0", "@storybook/blocks@^7.4.0":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.4.0.tgz#6a9240e2b58bac99a998c559d719be7ff4e19dcc"
@@ -3215,6 +3255,15 @@
webpack-hot-middleware "^2.25.1"
webpack-virtual-modules "^0.5.0"
+"@storybook/channels@6.5.16":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.16.tgz#3fb9a3b5666ecb951a2d0cf8b0699b084ef2d3c6"
+ integrity sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==
+ dependencies:
+ core-js "^3.8.2"
+ ts-dedent "^2.0.0"
+ util-deprecate "^1.0.2"
+
"@storybook/channels@7.4.0":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/channels/-/channels-7.4.0.tgz#4ab69fce09c0fe7299f1595628b3de10b0fdcd8f"
@@ -3273,6 +3322,14 @@
ts-dedent "^2.0.0"
util-deprecate "^1.0.2"
+"@storybook/client-logger@6.5.16":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.16.tgz#955cc46b389e7151c9eb1585a75e6a0605af61a1"
+ integrity sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==
+ dependencies:
+ core-js "^3.8.2"
+ global "^4.4.0"
+
"@storybook/client-logger@7.4.0":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.4.0.tgz#f90aa5ee29d540074f6e4890bae71836ac87273c"
@@ -3352,6 +3409,13 @@
resolve-from "^5.0.0"
ts-dedent "^2.0.0"
+"@storybook/core-events@6.5.16":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.16.tgz#b1c265dac755007dae172d9d4b72656c9e5d7bb3"
+ integrity sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==
+ dependencies:
+ core-js "^3.8.2"
+
"@storybook/core-events@7.4.0":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.4.0.tgz#0d50d254d65a678065d5906ac1dcab64396f2f6a"
@@ -3441,6 +3505,13 @@
recast "^0.23.1"
ts-dedent "^2.0.0"
+"@storybook/csf@0.0.2--canary.4566f4d.1":
+ version "0.0.2--canary.4566f4d.1"
+ resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz#dac52a21c40ef198554e71fe4d20d61e17f65327"
+ integrity sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==
+ dependencies:
+ lodash "^4.17.15"
+
"@storybook/csf@^0.0.1":
version "0.0.1"
resolved "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -3631,6 +3702,17 @@
type-fest "~2.19"
util-deprecate "^1.0.2"
+"@storybook/router@6.5.16":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.16.tgz#28fb4d34e8219351a40bee1fc94dcacda6e1bd8b"
+ integrity sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==
+ dependencies:
+ "@storybook/client-logger" "6.5.16"
+ core-js "^3.8.2"
+ memoizerific "^1.11.3"
+ qs "^6.10.0"
+ regenerator-runtime "^0.13.7"
+
"@storybook/router@7.4.0":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/router/-/router-7.4.0.tgz#627f824bfd9cc4653ee84581fc09373ab1463336"
@@ -3640,6 +3722,14 @@
memoizerific "^1.11.3"
qs "^6.10.0"
+"@storybook/semver@^7.3.2":
+ version "7.3.2"
+ resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
+ integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
+ dependencies:
+ core-js "^3.6.5"
+ find-up "^4.1.0"
+
"@storybook/telemetry@7.4.0", "@storybook/telemetry@^7.1.0-alpha.32":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.4.0.tgz#04e47a2d9decf7671273130a9af9d231a8c3d2e8"
@@ -3663,6 +3753,16 @@
"@testing-library/user-event" "^14.0.0"
ts-dedent "^2.2.0"
+"@storybook/theming@6.5.16":
+ version "6.5.16"
+ resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.16.tgz#b999bdb98945b605b93b9dfdf7408535b701e2aa"
+ integrity sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==
+ dependencies:
+ "@storybook/client-logger" "6.5.16"
+ core-js "^3.8.2"
+ memoizerific "^1.11.3"
+ regenerator-runtime "^0.13.7"
+
"@storybook/theming@7.4.0":
version "7.4.0"
resolved "https://registry.npmjs.org/@storybook/theming/-/theming-7.4.0.tgz#f5d9f8f55c41e08c0f50b57d9fb0e159ed595274"
@@ -4079,6 +4179,11 @@
resolved "https://registry.npmjs.org/@types/i18n-js/-/i18n-js-3.8.5.tgz#ce0e29611e5e0e00998b764e8c55cc4a4e48cdf6"
integrity sha512-6LlMVfkAW8gwcgxIRjxuWxjhD+hw4Mj2VC609FpYCG5n8usb2GE2xbKsEQXWmAIe6LBN2OOw7HnSjZqMDHVtDw==
+"@types/is-function@^1.0.0":
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.3.tgz#548f851db5d30a12abeea2569ba75890dbf89425"
+ integrity sha512-/CLhCW79JUeLKznI6mbVieGbl4QU5Hfn+6udw1YHZoofASjbQ5zaP5LzAUZYDpRYEjS4/P+DhEgyJ/PQmGGTWw==
+
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.4"
resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -4280,6 +4385,11 @@
resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
+"@types/webpack-env@^1.16.0":
+ version "1.18.4"
+ resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.4.tgz#62879b0a9c653f9b1172d403b882f2045ecce032"
+ integrity sha512-I6e+9+HtWADAWeeJWDFQtdk4EVSAbj6Rtz4q8fJ7mSr1M0jzlFcs8/HZ+Xb5SHzVm1dxH7aUiI+A8kA8Gcrm0A==
+
"@types/yargs-parser@*":
version "21.0.0"
resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -6303,6 +6413,11 @@ core-js-pure@^3.23.3:
resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.32.1.tgz#5775b88f9062885f67b6d7edce59984e89d276f3"
integrity sha512-f52QZwkFVDPf7UEQZGHKx6NYxsxmVGJe5DIvbzOdRMJlmT6yv0KDjR8rmy3ngr/t5wU54c7Sp/qIJH0ppbhVpQ==
+core-js@^3.6.5, core-js@^3.8.2:
+ version "3.33.2"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.33.2.tgz#312bbf6996a3a517c04c99b9909cdd27138d1ceb"
+ integrity sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==
+
core-util-is@~1.0.0:
version "1.0.3"
resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -6908,6 +7023,11 @@ dom-serializer@^2.0.0:
domhandler "^5.0.2"
entities "^4.2.0"
+dom-walk@^0.1.0:
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+ integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
version "2.3.0"
resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
@@ -8517,6 +8637,14 @@ global-dirs@^3.0.0:
dependencies:
ini "2.0.0"
+global@^4.4.0:
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+ integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+ dependencies:
+ min-document "^2.19.0"
+ process "^0.11.10"
+
globals@^11.1.0:
version "11.12.0"
resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -9259,6 +9387,11 @@ is-fullwidth-code-point@^3.0.0:
resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+is-function@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+ integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
is-generator-fn@^2.0.0:
version "2.1.0"
resolved "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -9415,7 +9548,7 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
dependencies:
isobject "^3.0.1"
-is-regex@^1.1.4:
+is-regex@^1.1.2, is-regex@^1.1.4:
version "1.1.4"
resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -9583,6 +9716,11 @@ isobject@^3.0.0, isobject@^3.0.1:
resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+isobject@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
+ integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
+
issue-parser@6.0.0:
version "6.0.0"
resolved "https://registry.npmjs.org/issue-parser/-/issue-parser-6.0.0.tgz#b1edd06315d4f2044a9755daf85fdafde9b4014a"
@@ -11370,6 +11508,13 @@ mimic-response@^4.0.0:
resolved "https://registry.npmjs.org/mimic-response/-/mimic-response-4.0.0.tgz#35468b19e7c75d10f5165ea25e75a5ceea7cf70f"
integrity sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==
+min-document@^2.19.0:
+ version "2.19.0"
+ resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+ integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+ dependencies:
+ dom-walk "^0.1.0"
+
min-indent@^1.0.0, min-indent@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -12986,6 +13131,14 @@ react@18.2.0:
dependencies:
loose-envify "^1.1.0"
+react@^17.0.2:
+ version "17.0.2"
+ resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+ integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
read-pkg-up@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@@ -13153,7 +13306,7 @@ regenerate@^1.4.2:
resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
-regenerator-runtime@^0.13.2:
+regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.7:
version "0.13.11"
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
@@ -14021,11 +14174,20 @@ stop-iteration-iterator@^1.0.0:
dependencies:
internal-slot "^1.0.4"
-store2@^2.14.2:
+store2@^2.12.0, store2@^2.14.2:
version "2.14.2"
resolved "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
+storybook-react-context@^0.6.0:
+ version "0.6.0"
+ resolved "https://registry.yarnpkg.com/storybook-react-context/-/storybook-react-context-0.6.0.tgz#06c7b48dc95f4619cf12e59429305fbd6f2b1373"
+ integrity sha512-6IOUbSoC1WW68x8zQBEh8tZsVXjEvOBSJSOhkaD9o8IF9caIg/o1jnwuGibdyAd47ARN6g95O0N0vFBjXcB7pA==
+ dependencies:
+ "@storybook/addons" "^6.3.6"
+ is-plain-object "^5.0.0"
+ react "^17.0.2"
+
storybook@^7.4.0:
version "7.4.0"
resolved "https://registry.npmjs.org/storybook/-/storybook-7.4.0.tgz#f1b64222e3d474bc6e258eb7e48c675685829873"
@@ -14328,6 +14490,20 @@ tar@^6.1.13:
mkdirp "^1.0.3"
yallist "^4.0.0"
+telejson@^6.0.8:
+ version "6.0.8"
+ resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7"
+ integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==
+ dependencies:
+ "@types/is-function" "^1.0.0"
+ global "^4.4.0"
+ is-function "^1.0.2"
+ is-regex "^1.1.2"
+ is-symbol "^1.0.3"
+ isobject "^4.0.0"
+ lodash "^4.17.21"
+ memoizerific "^1.11.3"
+
telejson@^7.2.0:
version "7.2.0"
resolved "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz#3994f6c9a8f8d7f2dba9be2c7c5bbb447e876f32"