DES-516: upgrade storybook

.envrc

@@ -1,2 +1,5 @@
+# Tell mkcert where the CA is located
+export CAROOT=$(pwd)
+
 # Enables the project's version of node (relies on .nvmrc)
 . ~/.nvm/nvm.sh && nvm use

.npmignore

@@ -0,0 +1 @@
+*.pem

.storybook/main.js

@@ -16,4 +16,8 @@ module.exports = {
     "storybook-addon-performance",
     "./nds-theme/register.js",
   ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
 };

.storybook/nds-theme/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name, react-hooks/rules-of-hooks */
 import React, { useEffect, useState } from "react";
-import addons from "@storybook/addons";
+import { addons } from "@storybook/preview-api";
 import { STORY_CHANGED } from "@storybook/core-events";
 import { select } from "@storybook/addon-knobs";
 import { NDSProvider, theme as NDSTheme } from "../../src";

README.md

@@ -99,3 +99,16 @@ The design-system is a collection of related packages. If you're looking for mor
 | [@nulogy/css](https://github.com/nulogy/nds-css)               | CSS components and utility classes for adding new styles to non-React applications | [![CSS on NPM](https://img.shields.io/npm/v/@nulogy/css?style=flat-square)](https://www.npmjs.com/package/@nulogy/css)                      |
 | [@nulogy/icons](https://github.com/nulogy/nds-icons)           | A selection of Material Icon `svgs` used by Nulogy applications                    | [![Icons on NPM](https://img.shields.io/npm/v/@nulogy/icons?style=flat-square)](https://www.npmjs.com/package/@nulogy/icons)                |
 | [@nulogy/tokens](https://github.com/nulogy/nds-tokens)         | Design language styles (e.g colours, type, spacing, shadows, etc.)                 | [![Tokens on NPM](https://img.shields.io/npm/v/@nulogy/tokens?style=flat-square)](https://www.npmjs.com/package/@nulogy/tokens)             |
+
+## Development
+
+### Required packages
+
+- `yarn`
+- `mkcert`
+- `nvm`
+
+### Bootstrap
+
+- `mkcert install`
+- `yarn install`

cypress/integration/components/Select.spec.js

@@ -161,5 +161,4 @@ describe("Select", () => {
       assertDropDownIsOpen();
     });
   });
-  describe("Knobs", () => {});
 });

install-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQChBRMM6Q/7484R
+W1Wtgk4cAzZSXgvY5RpKxz0to3ODMvF5bzl2UMpvvATmtT94AHedFzWWqXIZXYVN
+HYpACyBpwGuZ9VuKomtOKfvLKi32Sv5Qjxuf5jCLL8I4JH/a3ZIjND4YpxYB2wgu
+aSnML342Zv5vO1Rmec8wjFz87xQ2WOUQmyMU9wPiauIB4GcrtYttiRq4BN40znQR
+s9MTJBeGkf2TnbbdxjmylukbBaBw25Wr3KScPm9VcL20c+o3GMoj4lWeL/1mkOlL
+d7Kr+CWdeEPKOWJzLExfthUEZxSqg8+OZgdC1/9mOOozfr4vTPX3DhiJRgBB87ov
+ib4z0hQ5AgMBAAECggEAAky4QO7zM33Fa6oKRzgdNXk2RWbidG6ROZAu53/2HmGT
+4VAdWfs9aOsehsz/4w7epne2ZDh3ULVtOfS6DMAb7ma5IrHGZOx869jdp8EqduIL
+T8s7ccUv3E0KURL0YIPZmncci+2W+t/N9hu6ZRgojU5bQ+ttASmsM91NVq9zcnM8
+w7D9rzem4PrJ2t1prNOC3UEwzkAOmKfXcAwp4RJT63+ppTRX5F5xCGbChdbLgJp0
+tZV4gEcJxQxCukw8mlNmIjcyUUGD75e/fBAca6IhAdGFBSdEASTd6QLxvruDUeh/
+PRXkWPLwtVtr8U0Zi0QfZPPzMPGm7p5BFpBFFJkIIQKBgQDVqarKx6rhdkHQjBNj
+/MiKQCW/RvOkC1RMKQiQ7JrGRCpH9k6pKHxAEtCb1whtWD98S/rkVvdYpTRB2p+f
+CYX4rSDmAiP5e0rWApF8lAlPDRkkbPeiX8cezsqCkO6zEXmeqJsugggoB2fd+SLx
+l08XdwvMg3Xf7I/+Ni/U65aqRwKBgQDA7QXZVscvYMOks0Qc08xEzAFtGU9ayaGD
+1i4DdCetwFTMWgekfNsYkrP/bTOImBL861HdVLhOdbKy8i5Nwlv94ILuZEw8gT2T
+ViNYE/QiEMZHHKG1BgdZ6DU2GFKfkW6G5GOd/kWKtTVXhHd3KQpFCyDj2LpHpO2p
+Ju2zcCINfwKBgQDF0XmclzKB3mBe+mG1kEQHpA6Owt0uw4J/pPoWW8mMyW2wBL6d
+ZStskz7rGjLmMe9NYHdg05fcTdBNLGHe+A0+yOQNsGuoP1txOx2CDvlzZDgj/nNj
+tXOA9YqPSiqGRiapG4fZjnCIxxqGbHTK4wFKQ2D8L7aB5N8ISRkN9DUhXwKBgBhL
+gOoOuISp3dlWzeQHc/jR6/gOMOUQ8SsGBMNglEKYLtWRHNdE9d5RUyN+X/f6lqGN
+DMEfkxomTjukrdoS+Lyu0i4tKUCRUezE8yx7TsofbKi13VNLkA9tY44NYBJCITYR
+es4BoEZIbZA42UaDP4zUSu8GcubkyRz9DwACxfcHAoGAL4XwROusJevxnsHwgK/9
+b8YN2eFWovXSal5agZ+Ud/hQQ4+e23uPJhcp+lfXLNpIy13cRTRk5UuSH1+y6piy
+uIj5/DC/Wx/R6eD3e5lp14qgFpfGOp/H02qTjfG0ZStcNLXdJhuYArh33B+pZIxS
+ulne/kAnRiRpTrKHs97DBT4=
+-----END PRIVATE KEY-----

install.pem

@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEYjCCAsqgAwIBAgIQX+pdtg3fO3PFW32x26RgcTANBgkqhkiG9w0BAQsFADCB
+mTEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMTcwNQYDVQQLDC5qYW1l
+c2hlcmRtYW5ATWFjQm9vay1Qcm8ubG9jYWwgKEphbWVzIEhlcmRtYW4pMT4wPAYD
+VQQDDDVta2NlcnQgamFtZXNoZXJkbWFuQE1hY0Jvb2stUHJvLmxvY2FsIChKYW1l
+cyBIZXJkbWFuKTAeFw0yMzA5MjQwMDI0NTZaFw0yNTEyMjQwMTI0NTZaMGIxJzAl
+BgNVBAoTHm1rY2VydCBkZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTE3MDUGA1UECwwu
+amFtZXNoZXJkbWFuQE1hY0Jvb2stUHJvLmxvY2FsIChKYW1lcyBIZXJkbWFuKTCC
+ASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAKEFEwzpD/vjzhFbVa2CThwD
+NlJeC9jlGkrHPS2jc4My8XlvOXZQym+8BOa1P3gAd50XNZapchldhU0dikALIGnA
+a5n1W4qia04p+8sqLfZK/lCPG5/mMIsvwjgkf9rdkiM0PhinFgHbCC5pKcwvfjZm
+/m87VGZ5zzCMXPzvFDZY5RCbIxT3A+Jq4gHgZyu1i22JGrgE3jTOdBGz0xMkF4aR
+/ZOdtt3GObKW6RsFoHDblavcpJw+b1VwvbRz6jcYyiPiVZ4v/WaQ6Ut3sqv4JZ14
+Q8o5YnMsTF+2FQRnFKqDz45mB0LX/2Y46jN+vi9M9fcOGIlGAEHzui+JvjPSFDkC
+AwEAAaNcMFowDgYDVR0PAQH/BAQDAgWgMBMGA1UdJQQMMAoGCCsGAQUFBwMBMB8G
+A1UdIwQYMBaAFIDsKiaG/aVPnVIKgi93/YFED/2dMBIGA1UdEQQLMAmCB2luc3Rh
+bGwwDQYJKoZIhvcNAQELBQADggGBABpfBDz/v3gwcZv2LWkSuQmHhndO6qLezydj
+Q3hdyXUVwXNsfF2LWKLIsSXSycKz1LsBk2aiDK/x89AnQaHpdDuepPk2z4HOqDKn
+Y6UiI8VCbES78n/pa0YeIyJXTeW7I0t9vxh/PrkmimyqFnE+QEXsdbnlN6/+DRCp
+J+Sm2Jbua+V6W/NRSXHyABzr8scNYtCsHq+CWQzREpU1spb3fmlpCVk0nlVNLpIe
+DgmLaLNc5QcH0LtZt1wITQSnJivFcMo5pypOUCLSvYLMDvhg+9vmxeP9I8ilQVwL
+ijivcqa1HM7ENGcXfhpRlXpNGWDxIlbYFFbudC5d7aguqsL50ce4Y/303EhRvETF
+t+nA7TcjS9VDvFge0+17Wsv5OKJmssKUZPDz6AqPxlWMxDGfTxQkyOwn660LAnsb
+kGla0zA1BsSgEiQ8ixAeMe5EjGUcKbOGunIxltXBUWIox/iXXbrXOmUbTpkRxOju
+IC8PdagkySvf+UG5YdzzAhegvnl6fA==
+-----END CERTIFICATE-----

localhost-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC8JcEmgtuGmArd
+k9GlHvZTN/OQjyJoMvkXUjG3uU6FZSdxsaqovoYvd7yokoP/tzabDfhKAx3g+/cK
+SGGfnm0v0kFj1c+haqfSQJKhALPkgpLQ5FhHI4VA71hh6YLipBPGSJ0Db/6MJWFB
+DxBOjkPk43MSPHD/rP4CYiaYui+8XZ7V2qjhxXMKbVKl7mDGHQEqgUhnTcpBj/zi
+GbQvVVAaUWslEPNgLcGy1bR0kfKTXJ1qXFZlscYFxFDYSeWgMkuKdLxdIFIPz1FC
+HcTZ+dmhQfiod6QKay8a+5G0Xb3tClh8QfrAxz5dn/EGsYrDVtYDvHcP6292Cvz/
+96sl5RynAgMBAAECggEAPNPn8k90MbuOJ7zWlo/AC3+XWzEraoywQ33rXP6oCDB/
+5B4QkqWmNEp9z/Iugsn0+YQ2tZb0XfyYDdcA2N4bZs6PHXvOuN0GjM8bmLnlbwdX
+9/kbIUS2nBvFc0JPcn6hdgWb3bSjkyOyoZoBJ6SPBr0SQt8PmVmQdazN1aq8LCV5
+jo0M5x/Zu/5DiasdCpG0ESKkAKbHxzCIisNZMKnfgHZybrgT4UGLy1jmcy6c+KGM
+t5XwwXRmGeyEdhpXuuxE/VACxymRpLIXMgR0UxQZEHlm0vp6GM7joLtZRnG9auut
+Ww0htD5Dnxzhfu0272GC42UjvrCtFBWBfI4jtLLkAQKBgQDDlL5mqLConP5Ih/zS
+6zsAyRtlXQwWIbjEgdUwjG6zSedc1cI0ZDNIx0gQ3fqLXkOiIuPcLl13SK6JELoP
+QmNHt+W5wLgEyPX2f/a8e5sFW4D3CV/w359mU0l9tg1MVhTYEXQ4LpDa5gCgX615
+ewMA27f+Q5ooOEDdS6Y6WaA6JwKBgQD2RSN3Yg4oxJ6mRQKIhLoZFzps1dWJnoIE
+3ZYw8eHTcj7Qh+tNJx6DZZODcsRANwATYbrH79YgEqT/265oWpISo/UIOiZe/Hk6
+nj+B374h+p7YldiRoqQBCjWCZ3E2bTzVDpwd5ZSuN0o/i9J1jvq8A6AN2PmD4qhe
+/aNbA/YZgQKBgQCrt/xYXEIHORgWDLfRZFFAxlH0dHa5M9BrUGcjIhnL9tZZbyD9
+KQDSJI5EqPFizlfpkmKnnlnX8ouzsmj6HtrWTEM6DVhEc0FptT6ojIo2cPnRbHy9
+G0pz6Cp9YotYe7f/YYu+DDyIxSrFpFvGblfbuA5bA3XlXEavRc1kK+7/PwKBgQC3
+FIUeTm46TpmnACy28v0qhAMyP/HkwkrkdRsfveJlgExEWJdMHyXnBw+YLCzLlFfh
+EMl7s8gaxeGWOGm7OIHZi7ww5pH6EXXKZzTNR1mhByEp4JRFCIUmJMHM9TvL+3+6
+4IadDzzuGzp+bWMDdEzgk01cng44xrrnC2Zy1koRgQKBgESS0TzVYh8opQ9KyNtU
+q6vt7U1QohKQU+mfG5PBGBVvarZhqi4Tu4SZJ91pXIGOKOj5DfFbF4SyPOW0GEBV
+brdClnO3HcVTHk3+yMuutMzZ8M9OLD6ezoETb25L5TP1FToKOLhnlcdKTAOPcVeY
+jIxo/TTiqpa7YiJh23+U2WlR
+-----END PRIVATE KEY-----

localhost.pem

@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEZTCCAs2gAwIBAgIRAOSBYO6GRmDLcGjyeC4BOwIwDQYJKoZIhvcNAQELBQAw
+gZkxHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTE3MDUGA1UECwwuamFt
+ZXNoZXJkbWFuQE1hY0Jvb2stUHJvLmxvY2FsIChKYW1lcyBIZXJkbWFuKTE+MDwG
+A1UEAww1bWtjZXJ0IGphbWVzaGVyZG1hbkBNYWNCb29rLVByby5sb2NhbCAoSmFt
+ZXMgSGVyZG1hbikwHhcNMjMwOTIzMTM0NzA3WhcNMjUxMjIzMTQ0NzA3WjBiMScw
+JQYDVQQKEx5ta2NlcnQgZGV2ZWxvcG1lbnQgY2VydGlmaWNhdGUxNzA1BgNVBAsM
+LmphbWVzaGVyZG1hbkBNYWNCb29rLVByby5sb2NhbCAoSmFtZXMgSGVyZG1hbikw
+ggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC8JcEmgtuGmArdk9GlHvZT
+N/OQjyJoMvkXUjG3uU6FZSdxsaqovoYvd7yokoP/tzabDfhKAx3g+/cKSGGfnm0v
+0kFj1c+haqfSQJKhALPkgpLQ5FhHI4VA71hh6YLipBPGSJ0Db/6MJWFBDxBOjkPk
+43MSPHD/rP4CYiaYui+8XZ7V2qjhxXMKbVKl7mDGHQEqgUhnTcpBj/ziGbQvVVAa
+UWslEPNgLcGy1bR0kfKTXJ1qXFZlscYFxFDYSeWgMkuKdLxdIFIPz1FCHcTZ+dmh
+Qfiod6QKay8a+5G0Xb3tClh8QfrAxz5dn/EGsYrDVtYDvHcP6292Cvz/96sl5Ryn
+AgMBAAGjXjBcMA4GA1UdDwEB/wQEAwIFoDATBgNVHSUEDDAKBggrBgEFBQcDATAf
+BgNVHSMEGDAWgBSA7Comhv2lT51SCoIvd/2BRA/9nTAUBgNVHREEDTALgglsb2Nh
+bGhvc3QwDQYJKoZIhvcNAQELBQADggGBAK7OUfORN8tUUVO2doBGn1yTi5VkGYHe
+spOSPRdvvJoYzYy78OQM1U/bq8C6kTqsoimRznFvAY2ONErbQUL6SJifbEuV8uYT
+kJkKXicgxqYzxWQewUlBDSEJHLf2uZTSxWMOYk7q153CbuWJCu+pUhmTJnam/hl9
+XrvFY6BRKGJTFxLXLqlUGAx27shQ58CrHBb/paSNs5iSSvq7zwq1sImMOq+LpK5h
+Bov3ph8Auhr2b756HAu0q25utMPuLvb1zTKPu0rcEWrfQACOB5gutXww4RaGjOVE
+8//ETl7W2vaVZodwxsHRkzlj+Ek5fVEJS8mZFM+RBi6NqqF5PBRY19Fx9yuaH5sh
+Z/Hg2kPrhixN06lx9F6XuxSJ1KGGF9cnIeplX/TFyfExJCHy0RRnMtTeHi+GgUXn
+NSqcSXmvJ93b9fQ9FP22uMKB1HCl1jBNIxsj5I/iM+6aZMbBLbHIcAnxQgCaieec
+kGS8TaVhcWYKepRfEvXECHT8nMYX+HUAQw==
+-----END CERTIFICATE-----

package.json

@@ -11,10 +11,10 @@
     "lint": "yarn run tsc && yarn run eslint",
     "eslint": "eslint --config ./.eslintrc .'*/**/*.{js,ts,tsx}'",
     "lint:fix": "yarn run eslint --fix",
-    "start": "concurrently \"yarn build:watch\" \"start-storybook -p 9999\"",
+    "start": "storybook dev -p 9999 --https --ssl-cert=./localhost.pem --ssl-key=./localhost-key.pem",
     "build": "rollup -c",
     "build:watch": "yarn build --watch",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "e2e:start": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
     "e2e:test": "yarn build-storybook && yarn concurrently --success \"first\" --kill-others \"yarn http-server -p 9999 ./storybook-static\" \"yarn wait-on http://localhost:9999 && yarn cypress run\"",
     "test": "yarn lint && yarn jest && yarn e2e:test",
@@ -68,14 +68,14 @@
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^9.0.0",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "^6.1.9",
-    "@storybook/addon-actions": "^6.1.9",
-    "@storybook/addon-knobs": "^6.1.9",
-    "@storybook/addon-storysource": "^6.1.9",
-    "@storybook/addon-viewport": "^6.1.9",
-    "@storybook/codemod": "^6.1.9",
-    "@storybook/react": "^6.3.12",
-    "@storybook/theming": "^6.1.9",
+    "@storybook/addon-a11y": "^7.4.4",
+    "@storybook/addon-actions": "^7.4.4",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-storysource": "^7.4.3",
+    "@storybook/addon-viewport": "^7.4.4",
+    "@storybook/react": "^7.4.4",
+    "@storybook/react-webpack5": "^7.4.4",
+    "@storybook/theming": "^7.4.4",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.1",
@@ -87,6 +87,7 @@
     "@types/styled-system": "^5.1.11",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^5.30.5",
+    "@vitejs/plugin-react": "^4.0.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
@@ -127,13 +128,16 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "semantic-release": "^17.2.1",
     "source-map-loader": "^1.0.1",
+    "storybook": "^7.4.4",
     "storybook-addon-performance": "^0.17.1",
     "styled-components": "^5.1.0",
     "svg-sprite-loader": "^6.0.11",
     "ts-jest": "^26.1.1",
     "typescript": "4.9.5",
     "typescript-eslint": "^0.0.1-alpha.0",
-    "wait-on": "^5.1.0"
+    "wait-on": "^5.1.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",

rootCA-key.pem

@@ -0,0 +1,40 @@
+-----BEGIN PRIVATE KEY-----
+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
+/i6vX2nsSXPL/Cmm8VGdhCa3
+-----END PRIVATE KEY-----

rootCA.pem

@@ -0,0 +1,29 @@
+-----BEGIN CERTIFICATE-----
+MIIFBDCCA2ygAwIBAgIRAN7FX5LpvS8eyfchW2zr4m8wDQYJKoZIhvcNAQELBQAw
+gZkxHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTE3MDUGA1UECwwuamFt
+ZXNoZXJkbWFuQE1hY0Jvb2stUHJvLmxvY2FsIChKYW1lcyBIZXJkbWFuKTE+MDwG
+A1UEAww1bWtjZXJ0IGphbWVzaGVyZG1hbkBNYWNCb29rLVByby5sb2NhbCAoSmFt
+ZXMgSGVyZG1hbikwHhcNMjMwOTIzMTM0NzA3WhcNMzMwOTIzMTM0NzA3WjCBmTEe
+MBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMTcwNQYDVQQLDC5qYW1lc2hl
+cmRtYW5ATWFjQm9vay1Qcm8ubG9jYWwgKEphbWVzIEhlcmRtYW4pMT4wPAYDVQQD
+DDVta2NlcnQgamFtZXNoZXJkbWFuQE1hY0Jvb2stUHJvLmxvY2FsIChKYW1lcyBI
+ZXJkbWFuKTCCAaIwDQYJKoZIhvcNAQEBBQADggGPADCCAYoCggGBALGirzVHOi1A
+/xT5HRfG2SaxsX+K3Xp/KOA2wvc/IaLP3NfTMQpRwPpUm0vY4Vcb4ZRjG76p2JBW
+GJlhGSSYKGUFLnzL37XN2mE9HE2qf7+AhfseHvkbHURhp+3GyL4zDGGVsDeyAlqK
+Lg5elWC2ulI3/o4k3GRJG7Kbo7mOEXfEkFNcyLxlMrsPzf63WJuTpQVgKxMFSWLX
+Srq2Qty66F5v9KgeejD7P/VRUtfX7CPOoWTW4xi0+u05PWREnuZuiT0XlOIuJeL0
+vqUxPpRuRgBGm7neBDSkTX1hDvvtSFSq3ajN5OxKqZZ0wdnpa/ySvDieLzxdtGmc
+hKA+uxbnsoLcb1V7lMnyDMdcYOzsCLCFXyKQptVOf0aEppx3thheWMSS2K2AUwNM
+ffpHvBJmPBhtfVlDvR+6kDepOmxebQoJ8naK1HDXV7TAVphex8rHc7O5kdwYWeOr
+GGODpaCT6dJqIifgLEQhhdB/7wlI0nzQRG6R7+HhDswia3HMdptU/QIDAQABo0Uw
+QzAOBgNVHQ8BAf8EBAMCAgQwEgYDVR0TAQH/BAgwBgEB/wIBADAdBgNVHQ4EFgQU
+gOwqJob9pU+dUgqCL3f9gUQP/Z0wDQYJKoZIhvcNAQELBQADggGBAHy5Nza0DRSI
+i/kxxnG+KzRt3RA030iT59BflpSCT05UjqiAmOTp/un6s/ZLZvcoXSe460XDXEcC
+9cgkrdn2XuVYza9XSRNsqlEkZsUkIeE2m9tbCcZDt81EnMG1aaZyM/dWBio9v8J3
+j5CG+FjTy+sjAB5qX1yaE1HuNEHHaKTwxuiB7GibZu86zjuXDTawNOIg8WHtbPmk
+GR/sV0O551Dia7IBmt2tWLENDjoZbcJs6zuDLOcvlWwFeERVewhzMaxgeEcYOwci
+l4FIWzhfBIHApZuDaMm9LCkERgZTD2e7zUes/T/eaBJTYiOAWIDXA0EuhovuNoLI
+XXbSNUwK1G1z2HkkimsutGBjDXHjeOp1yranXNRNkuXo+iphTNWXPE46/9+amPuP
+VLUF2C72TIY3p1u6QIfjuryxeIJUbFe6GVxEzXHIFsJGkCjX51/DRTChLk9/A2ev
+riq3Sig1l+MaxVPARckKbadc5nKpc+0SVl1yjPzax6Z4fJJw0czqvg==
+-----END CERTIFICATE-----

src/Alert/Alert.story.tsx

@@ -1,40 +1,69 @@
-import { boolean, text } from "@storybook/addon-knobs";
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from "../index";
 import { Link } from "../Link";
 
-export default {
+const meta: Meta<typeof Alert> = {
   title: "Components/Alert",
+  component: Alert,
 };
 
-export const Danger = () => <Alert type="danger">{text("Alert Text", "Danger alert")}</Alert>;
-export const Informative = () => <Alert>{text("Alert Text", "Informative alert")}</Alert>;
-export const Success = () => <Alert type="success">{text("Alert Text", "Success alert")}</Alert>;
-export const Warning = () => <Alert type="warning">{text("Alert Text", "Warning alert")}</Alert>;
-export const WithACloseButton = () => (
-  <Alert isCloseable={boolean("isCloseable", true)}>{text("Alert Text", "Warning alert")}</Alert>
-);
+export default meta;
 
-WithACloseButton.story = {
-  name: "With a close button",
+type Story = StoryObj<typeof Alert>;
+
+export const Danger: Story = {
+  args: {
+    type: "danger",
+    children: <>Danger alert</>,
+  },
 };
 
-export const WithATitle = () => (
-  <Alert title="Danger title!" type="danger">
-    {text("Alert Text", "Danger alert")}
-  </Alert>
-);
+export const Informative: Story = {
+  args: {
+    children: <>Informative alert</>,
+  },
+};
 
-WithATitle.story = {
-  name: "With a title",
+export const Success: Story = {
+  args: {
+    type: "success",
+    children: <>Success alert</>,
+  },
 };
 
-export const WithALink = () => (
-  <Alert>
-    An alert with <Link href="/">linked details</Link>.
-  </Alert>
-);
+export const Warning: Story = {
+  args: {
+    type: "warning",
+    children: <>Warning alert</>,
+  },
+};
+
+export const WithACloseButton: Story = {
+  args: {
+    isClosable: true,
+    children: <>Warning alert</>,
+  },
+};
+
+WithACloseButton.story = {
+  name: "With a close button",
+};
+
+export const WithATitle: Story = {
+  args: {
+    title: "Danger title!",
+    type: "danger",
+    children: <>Danger alert</>,
+  },
+};
 
-WithALink.story = {
-  name: "With a link",
+export const WithALink: Story = {
+  args: {
+    children: (
+      <>
+        An alert with <Link href="/">linked details</Link>.
+      </>
+    ),
+  },
 };