storybook_vitest_addon 0.1.2 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +14 -16
  2. package/dist/cjs/Panel.js +17 -6
  3. package/dist/cjs/preset/manager.js +2 -4
  4. package/dist/esm/Panel.js +17 -6
  5. package/dist/esm/preset/manager.js +2 -4
  6. package/dist/ts/constants.d.ts +1 -1
  7. package/package.json +35 -30
  8. package/preset.js +2 -2
package/README.md CHANGED
@@ -13,13 +13,13 @@ yarn add storybook_vitest_addon
13
13
  Compatibility:
14
14
 
15
15
  ```
16
- "storybook": "^7.5.2",
17
- "@storybook/react": "^7.5.2",
18
- "vite": "^4.5.0",
19
- "vitest": "^0.34.6"
16
+ "storybook": "^7.6.7",
17
+ "@storybook/react": "^7.6.7",
18
+ "vite": "^5.0.10",
19
+ "vitest": "^1.1.0"
20
20
  ```
21
21
 
22
- Usage:
22
+ Description:
23
23
 
24
24
  Addon meant to display Vitest unit test results in a new Stoybook panel. Developed and tested with React.
25
25
  Simply add it to the addon list in your Storybook config, and then you can use it in any story.
@@ -36,14 +36,14 @@ Example usage:
36
36
  import vitestResults from "./unit-test-results.json";
37
37
  /.../
38
38
  export default {
39
- title: "Example/Button",
40
- component: Button,
41
- parameters: {
42
- vitest: {
43
- testFile: "Button.test.tsx",
44
- testResults: vitestResults,
45
- },
46
- },
39
+ title: "Example/Button",
40
+ component: Button,
41
+ parameters: {
42
+ vitest: {
43
+ testFile: "Button.test.tsx",
44
+ testResults: vitestResults,
45
+ },
46
+ },
47
47
  };
48
48
  /.../
49
49
 
@@ -51,6 +51,4 @@ testResults: vitestResults,
51
51
 
52
52
  ![](2022-04-01-22-48-00.png)
53
53
 
54
- ```
55
-
56
- ```
54
+ Also see https://storybook.js.org/addons/storybook_vitest_addon
package/dist/cjs/Panel.js CHANGED
@@ -44,14 +44,25 @@ var VitestPanel = function VitestPanel() {
44
44
  group = _ref2[1];
45
45
  return /*#__PURE__*/_react["default"].createElement("div", {
46
46
  key: title
47
- }, /*#__PURE__*/_react["default"].createElement("strong", null, title), /*#__PURE__*/_react["default"].createElement("ul", null, group.map(function (d) {
48
- return /*#__PURE__*/_react["default"].createElement("li", {
49
- key: d.title
50
- }, /*#__PURE__*/_react["default"].createElement("p", null, d.title, /*#__PURE__*/_react["default"].createElement("span", {
47
+ }, /*#__PURE__*/_react["default"].createElement("strong", null, title), /*#__PURE__*/_react["default"].createElement("div", {
48
+ style: {
49
+ display: "flex",
50
+ flexDirection: "column",
51
+ rowGap: 8,
52
+ paddingTop: 8,
53
+ paddingBottom: 16
54
+ }
55
+ }, group.map(function (d) {
56
+ return /*#__PURE__*/_react["default"].createElement("div", {
57
+ key: d.title,
51
58
  style: {
52
- color: d.status === "passed" ? "green" : "red"
59
+ display: "flex",
60
+ flexDirection: "row",
61
+ alignItems: "center",
62
+ columnGap: 4,
63
+ paddingLeft: 16
53
64
  }
54
- }, d.status)));
65
+ }, /*#__PURE__*/_react["default"].createElement("div", null, d.status === "passed" ? "✔️" : "❌"), /*#__PURE__*/_react["default"].createElement("div", null, d.title));
55
66
  })));
56
67
  }));
57
68
  };
package/dist/cjs/preset/manager.js CHANGED
@@ -15,11 +15,9 @@ _addons.addons.register(_constants.ADDON_ID, function () {
15
15
  return viewMode === "story";
16
16
  },
17
17
  render: function render(_ref2) {
18
- var active = _ref2.active,
19
- key = _ref2.key;
18
+ var active = _ref2.active;
20
19
  return /*#__PURE__*/_react["default"].createElement(_components.AddonPanel, {
21
- active: active,
22
- key: key
20
+ active: active
23
21
  }, /*#__PURE__*/_react["default"].createElement(_Panel["default"], null));
24
22
  }
25
23
  });
package/dist/esm/Panel.js CHANGED
@@ -37,14 +37,25 @@ var VitestPanel = function VitestPanel() {
37
37
  group = _ref2[1];
38
38
  return /*#__PURE__*/React.createElement("div", {
39
39
  key: title
40
- }, /*#__PURE__*/React.createElement("strong", null, title), /*#__PURE__*/React.createElement("ul", null, group.map(function (d) {
41
- return /*#__PURE__*/React.createElement("li", {
42
- key: d.title
43
- }, /*#__PURE__*/React.createElement("p", null, d.title, /*#__PURE__*/React.createElement("span", {
40
+ }, /*#__PURE__*/React.createElement("strong", null, title), /*#__PURE__*/React.createElement("div", {
41
+ style: {
42
+ display: "flex",
43
+ flexDirection: "column",
44
+ rowGap: 8,
45
+ paddingTop: 8,
46
+ paddingBottom: 16
47
+ }
48
+ }, group.map(function (d) {
49
+ return /*#__PURE__*/React.createElement("div", {
50
+ key: d.title,
44
51
  style: {
45
- color: d.status === "passed" ? "green" : "red"
52
+ display: "flex",
53
+ flexDirection: "row",
54
+ alignItems: "center",
55
+ columnGap: 4,
56
+ paddingLeft: 16
46
57
  }
47
- }, d.status)));
58
+ }, /*#__PURE__*/React.createElement("div", null, d.status === "passed" ? "✔️" : "❌"), /*#__PURE__*/React.createElement("div", null, d.title));
48
59
  })));
49
60
  }));
50
61
  };
package/dist/esm/preset/manager.js CHANGED
@@ -12,11 +12,9 @@ addons.register(ADDON_ID, function () {
12
12
  return viewMode === "story";
13
13
  },
14
14
  render: function render(_ref2) {
15
- var active = _ref2.active,
16
- key = _ref2.key;
15
+ var active = _ref2.active;
17
16
  return /*#__PURE__*/React.createElement(AddonPanel, {
18
- active: active,
19
- key: key
17
+ active: active
20
18
  }, /*#__PURE__*/React.createElement(Panel, null));
21
19
  }
22
20
  });
package/dist/ts/constants.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const ADDON_ID = "storybook/vitest";
2
- export declare const PANEL_ID: string;
2
+ export declare const PANEL_ID = "storybook/vitest/panel";
3
3
  export declare const PARAM_KEY = "vitest";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook_vitest_addon",
3
- "version": "0.1.2",
3
+ "version": "0.1.5",
4
4
  "description": "Adds a panel to display Vitest unit test results",
5
5
  "keywords": [
6
6
  "storybook-addons",
@@ -46,36 +46,38 @@
46
46
  "eject-ts": "zx scripts/eject-typescript.mjs"
47
47
  },
48
48
  "devDependencies": {
49
- "@babel/cli": "^7.12.1",
50
- "@babel/core": "^7.12.3",
51
- "@babel/preset-env": "^7.12.1",
52
- "@babel/preset-react": "^7.12.5",
53
- "@babel/preset-typescript": "^7.13.0",
54
- "@storybook/addon-essentials": "^7.5.2",
55
- "@storybook/react": "^7.5.2",
56
- "@storybook/react-webpack5": "^7.5.2",
57
- "auto": "^10.3.0",
58
- "babel-loader": "^8.1.0",
59
- "boxen": "^5.0.1",
60
- "concurrently": "^6.2.0",
61
- "dedent": "^0.7.0",
62
- "prettier": "^2.3.1",
63
- "prop-types": "^15.7.2",
64
- "react": "^17.0.1",
65
- "react-dom": "^17.0.1",
66
- "rimraf": "^3.0.2",
67
- "storybook": "^7.5.2",
68
- "typescript": "^4.2.4",
69
- "zx": "^1.14.1"
49
+ "@babel/cli": "^7.23.4",
50
+ "@babel/core": "^7.23.7",
51
+ "@babel/preset-env": "^7.23.7",
52
+ "@babel/preset-react": "^7.23.3",
53
+ "@babel/preset-typescript": "^7.23.3",
54
+ "@storybook/addon-essentials": "^7.6.7",
55
+ "@storybook/react": "^7.6.7",
56
+ "@storybook/react-webpack5": "^7.6.7",
57
+ "@types/node": "^20.10.6",
58
+ "auto": "^11.0.4",
59
+ "babel-loader": "^9.1.3",
60
+ "boxen": "^7.1.1",
61
+ "concurrently": "^8.2.2",
62
+ "dedent": "^1.5.1",
63
+ "prettier": "^3.1.1",
64
+ "prop-types": "^15.8.1",
65
+ "react": "^18.2.0",
66
+ "react-dom": "^18.2.0",
67
+ "rimraf": "^5.0.5",
68
+ "storybook": "^7.6.7",
69
+ "typescript": "^5.3.3",
70
+ "webpack": "^5.89.0",
71
+ "zx": "^7.2.3"
70
72
  },
71
73
  "peerDependencies": {
72
- "@storybook/addons": "^6.4.0",
73
- "@storybook/api": "^6.4.0",
74
- "@storybook/components": "^6.4.0",
75
- "@storybook/core-events": "^6.4.0",
76
- "@storybook/theming": "^6.4.0",
77
- "react": "^16.8.0 || ^17.0.0",
78
- "react-dom": "^16.8.0 || ^17.0.0"
74
+ "@storybook/addons": "^7.6.6",
75
+ "@storybook/api": "^7.6.6",
76
+ "@storybook/components": "^7.6.6",
77
+ "@storybook/core-events": "^7.6.6",
78
+ "@storybook/theming": "^7.6.6",
79
+ "react": "^18.2.0",
80
+ "react-dom": "^18.2.0"
79
81
  },
80
82
  "peerDependenciesMeta": {
81
83
  "react": {
@@ -96,6 +98,9 @@
96
98
  "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
97
99
  },
98
100
  "resolutions": {
99
- "jackspeak": "2.1.1"
101
+ "jackspeak": "2.3.6"
102
+ },
103
+ "dependencies": {
104
+ "jackspeak": "^2.3.6"
100
105
  }
101
106
  }
package/preset.js CHANGED
@@ -1,4 +1,4 @@
1
- function config(entry = []) {
1
+ function previewAnnotations(entry = []) {
2
2
  return [...entry, require.resolve("./dist/esm/preset/preview")];
3
3
  }
4
4
 
@@ -8,5 +8,5 @@ function managerEntries(entry = []) {
8
8
 
9
9
  module.exports = {
10
10
  managerEntries,
11
- config,
11
+ previewAnnotations,
12
12
  };