feat(SignaturePad): add smileid-signature-pad component (#192)

* config: add components to workspaces

* deps: set up @smileid/signature-pad package

* config: set up storybook in signature-pad component

* feat(SignaturePad): add signature-pad component

* config: add `signature-pad` to components package.json

package.json

@@ -17,6 +17,7 @@
   ],
   "author": "SmileID <[email protected]> (https://usesmileid.com)",
   "workspaces": [
+    "packages/components/*",
     "packages/*"
   ],
   "license": "MIT"

packages/components/package.json

@@ -7,6 +7,7 @@
     "./combobox": "./combobox/src/index.js",
     "./end-user-consent": "./end-user-consent/src/index.js",
     "./navigation": "./navigation/src/index.js",
+    "./signature-pad": "./signature-pad/src/index.js",
     "./totp-consent": "./totp-consent/src/index.js",
     "./document-capture": "./document-capture/src/index.js"
   },
@@ -21,6 +22,7 @@
   ],
   "author": "SmileID <[email protected]> (https://usesmileid.com)",
   "dependencies": {
+    "signature_pad": "^4.1.7",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
@@ -29,14 +31,14 @@
     "@storybook/blocks": "^7.6.8",
     "@storybook/web-components": "^7.6.4",
     "@storybook/web-components-vite": "^7.6.7",
-    "storybook": "^7.6.7",
     "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.2"
+    "prettier": "^3.2.2",
+    "storybook": "^7.6.7"
   }
 }

packages/components/signature-pad/.storybook/main.js

@@ -0,0 +1,29 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../src/*.mdx",
+    "../src/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/web-components-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

packages/components/signature-pad/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/components/signature-pad/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@smileid/signature-pad",
+  "version": "1.0.0",
+  "private": "true",
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext .js",
+    "lint:fix": "eslint . --ext .js --fix"
+  },
+  "description": "A component to capture signatures using the signature_pad library, and uploads",
+  "keywords": [
+    "Web Components"
+  ],
+  "author": "SmileID <[email protected]> (https://usesmileid.com)",
+  "dependencies": {
+    "signature_pad": "^4.1.7"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.8",
+    "@storybook/web-components": "^7.6.4",
+    "@storybook/web-components-vite": "^7.6.7",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.2",
+    "storybook": "^7.6.7"
+  }
+}