IOPLT-137 Introducing storybook (#52)

## Short description Introducing storybook for the DS. The current implementation provides a basic structure with the typography and ButtonSolid components. ## List of changes proposed in this pull request - .storybook - Configuration folder for storybook - /src/stories - The storybook stories with ButtonSolid and Typography components ## How to test Run "yarn storybook" to launch storybook on you local env. --------- Co-authored-by: Cristiano Tofani <[email protected]> Co-authored-by: Damiano Plebani <[email protected]>
pagopa · Sep 1, 2023 · c2ea988 · c2ea988
1 parent 6c2c0a3
commit c2ea988
Show file tree

Hide file tree

Showing 24 changed files with 7,370 additions and 2,621 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,7 +6,8 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,78 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-actions",
+    {
+      name: "@storybook/addon-react-native-web",
+      options: {
+        modulesToTranspile: [
+          "react-native-reanimated",
+          "rn-placeholder",
+          "react-native-linear-gradient"
+        ],
+        projectRoot: "../",
+        // modulesToAlias: {
+        //   "react-native": "react-native-web"
+        // },
+        babelPlugins: [
+          "@babel/plugin-proposal-export-namespace-from",
+          "react-native-reanimated/plugin"
+        ]
+      }
+    }
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  staticDirs: ['../example/assets'],
+  docs: {
+    autodocs: "tag"
+  },
+  core: {
+    builder: "@storybook/builder-webpack5"
+  },
+  webpackFinal: config => {
+    config.module!.rules!.push({
+      test: /\.(tsx|ts|js)?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: require.resolve("babel-loader"),
+          options: {
+            presets: [
+              require("@babel/preset-typescript").default,
+              [
+                require("@babel/preset-react").default,
+                { runtime: "automatic" }
+              ],
+              require("@babel/preset-env").default
+            ]
+          }
+        }
+      ]
+    });
+
+    config.resolve!.extensions!.push(".ts", ".tsx");
+    config.resolve!.alias = {
+      "react-native$": "react-native-web",
+      "react-native-linear-gradient$": "react-native-web-linear-gradient"
+    };
+    config.module!.rules!.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto"
+    });
+
+    config.resolve!.extensions!.push(".mjs");
+
+    return config;
+  }
+};
+export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,23 @@
+<!-- .storybook/preview-head.html -->
+
+<!-- Pull in static files served from your Static directory or the internet -->
+<!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
+<link rel="preload" href="/fonts/ReadexPro/ReadexPro-Regular.ttf" as="font" />
+<link rel="preload" href="/fonts/RobotoMono/RobotoMono-Bold.ttf" as="font"/>
+<link rel="preload" href="/fonts/RobotoMono/RobotoMono-BoldItalic.ttf" as="font"/>
+<link rel="preload" href="/fonts/RobotoMono/RobotoMono-Light.ttf" as="font"/>
+<link rel="preload" href="/fonts/RobotoMono/RobotoMono-LightItalic.ttf" as="font"/>
+<link rel="preload" href="/fonts/RobotoMono/RobotoMono-Regular.ttf" as="font"/>
+<link rel="preload" href="/fonts/RobotoMono/RobotoMono-RegularItalic.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Black.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Bold.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-BoldItalic.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-ExtraLight.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-ExtraLightItalic.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Italic.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Light.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-LightItalic.ttf" as="font" />
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-Regular.ttf" as="font" />
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf" as="font"/>
+<link rel="preload" href="/fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf" as="font" />
+<link rel="stylesheet" href="/css/fonts.css" />
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on.*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+};
+
+export default preview;
diff --git a/README.md b/README.md
@@ -61,6 +61,16 @@ In order to contribute to the development of the library, you need to install no
 
 We recommend the usage of nvm to properly handle the supported nodejs version (see [.nvmrc](./.nvmrc)).
 
+## Storybook
+
+The library is provided with a [storybook](https://storybook.js.org/) instance to ease the development and the testing of the components.
+
+To start the storybook instance, run the following command:
+
+```sh
+yarn storybook
+```
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,11 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ["module:metro-react-native-babel-preset"],
+  plugins: [
+    [
+      "react-native-reanimated/plugin",
+      {
+        globals: ["__scanCodes"]
+      }
+    ]
+  ]
 };
diff --git a/example/assets/css/fonts.css b/example/assets/css/fonts.css
@@ -0,0 +1,128 @@
+@font-face {
+    font-family: 'ReadexPro';
+    src: url('../fonts/ReadexPro/ReadexPro-Regular.ttf') format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* ROBOTO MONO */
+@font-face {
+    font-family: 'RobotoMono';
+    src: url('../fonts/RobotoMono/RobotoMono-Regular.ttf') format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'RobotoMono';
+    src: url('../fonts/RobotoMono/RobotoMono-RegularItalic.ttf') format("truetype");
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'RobotoMono';
+    src: url('../fonts/RobotoMono/RobotoMono-Light.ttf') format("truetype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'RobotoMono';
+    src: url('../fonts/RobotoMono/RobotoMono-LightItalic.ttf') format("truetype");
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'RobotoMono';
+    src: url('../fonts/RobotoMono/RobotoMono-Bold.ttf') format("truetype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'RobotoMono';
+    src: url('../fonts/RobotoMono/RobotoMono-BoldItalic.ttf') format("truetype");
+    font-weight: 700;
+    font-style: italic;
+}
+
+/* TITILLIUM WEB */
+@font-face {
+    font-family: 'TitilliumWeb';
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-Regular.ttf') format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* @font-face {
+    font-family: 'TitilliumWeb';
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-Black.ttf') format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    color: black;
+} */
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-Bold.ttf') format("truetype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-BoldItalic.ttf') format("truetype");
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-ExtraLight.ttf') format("truetype");
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-ExtraLightItalic.ttf') format("truetype");
+    font-weight: 200;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-Italic.ttf') format("truetype");
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-Light.ttf') format("truetype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-LightItalic.ttf') format("truetype");
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf') format("truetype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "TitilliumWeb";
+    src: url('../fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf') format("truetype");
+    font-weight: 600;
+    font-style: italic;
+}
diff --git a/lefthook.yml b/lefthook.yml
@@ -0,0 +1,35 @@
+# EXAMPLE USAGE:
+#
+#   Refer for explanation to following link:
+#   https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md
+#
+# pre-push:
+#   commands:
+#     packages-audit:
+#       tags: frontend security
+#       run: yarn audit
+#     gems-audit:
+#       tags: backend security
+#       run: bundle audit
+#
+# pre-commit:
+#   parallel: true
+#   commands:
+#     eslint:
+#       glob: "*.{js,ts,jsx,tsx}"
+#       run: yarn eslint {staged_files}
+#     rubocop:
+#       tags: backend style
+#       glob: "*.rb"
+#       exclude: "application.rb|routes.rb"
+#       run: bundle exec rubocop --force-exclusion {all_files}
+#     govet:
+#       tags: backend style
+#       files: git ls-files -m
+#       glob: "*.go"
+#       run: go vet {files}
+#   scripts:
+#     "hello.js":
+#       runner: node
+#     "any.go":
+#       runner: go run