feat: Add further stories and minor refactoring (#132)

## Short description
This PR includes some stories on the storybook collection and adds some
minor refactoring

## List of changes proposed in this pull request
- Adds some stories
- Minor refactoring and file movement

## How to test
run storybook

.storybook/main.ts

@@ -1,7 +1,10 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -31,7 +34,7 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {}
   },
-  staticDirs: ['../example/assets'],
+  staticDirs: ["../example/assets"],
   docs: {
     autodocs: "tag"
   },

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { sbTheme } from "./theme";
+
+addons.setConfig({
+  theme: sbTheme
+});

.storybook/preview.ts

@@ -1,7 +1,21 @@
 import type { Preview } from "@storybook/react";
+import { IOThemeLight, IOThemeDark } from "../src/core";
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: "light",
+      values: [
+        {
+          name: "light",
+          value: IOThemeLight["appBackground-primary"]
+        },
+        {
+          name: "dark",
+          value: IOThemeDark["appBackground-primary"]
+        }
+      ]
+    },
     actions: { argTypesRegex: "^on.*" },
     controls: {
       matchers: {

.storybook/theme.ts

@@ -0,0 +1,10 @@
+import { create } from "@storybook/theming";
+
+export const sbTheme = create({
+  base: "light",
+  brandTitle: "IO App Design System",
+  brandUrl: "https://github.com/pagopa/io-app-design-system",
+  brandImage:
+    "https://raw.githubusercontent.com/pagopa/io-app/master/img/app-logo.svg",
+  brandTarget: "_self"
+});

package.json

@@ -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",

src/components/icons/generateNewIcons.js → 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", {

src/components/pictograms/generateNewPictograms.js → 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}",

scripts/icons_timestamp.txt

@@ -0,0 +1 @@
+2023-11-09T14:14:48.721Z

src/components/checkbox/AnimatedCheckbox.tsx

@@ -126,10 +126,12 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         ]}
       />
       {isChecked && (
-        <AnimatedTick
-          progress={tickAnimationProgress}
-          stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
-        />
+        <View style={{ zIndex: 1 }}>
+          <AnimatedTick
+            progress={tickAnimationProgress}
+            stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+          />
+        </View>
       )}
     </Pressable>
   );

src/components/icons/README.md

@@ -30,10 +30,10 @@ In your user interface design app (Figma/Sketch) export your SVG with `1×` pres
 
 ### Create the corresponding React component
 
-#### Using `generateNewIcons.js`
+#### 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: `node generateNewIcons.js`
-3. The script will process `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**
+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] 

src/components/pictograms/README.md

@@ -24,10 +24,10 @@ In your user interface design app (Figma/Sketch) export your SVG with `1×` pres
 
 ### Create the corresponding React component
 
-#### Using `generateNewPictograms.js`
+#### 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: `node generateNewPictograms.js`
-3. The script will process `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**
+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] 

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"
+    }
+  }
+};

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<typeof AccordionItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 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: <Caption>{"Accordion body"}</Caption>
+  }
+};

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<typeof ButtonExtendedOutline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 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);
+    }
+  }
+};

src/stories/ButtonDS.stories.ts → 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<typeof ButtonSolid>;
+} satisfies Meta<typeof ButtonLink>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;