@ljcl/storybook-addon-cssprops - npm Package Compare versions

Comparing version 2.3.5 to 3.0.0

dist/cjs/components/CssPropsBlock.d.ts

 import * as React from "react";
 import type { CssPropertyItemGroup } from "./CssPropsTable/types";
-import { DocsContextProps } from "@storybook/addon-docs/blocks";
+import { DocsContext } from "@storybook/blocks";
 interface CssPropsBlockProps {
@@ -9,3 +9,3 @@ customProperties: CssPropertyItemGroup;
     interface Window {
-        __DOCS_CONTEXT__: React.Context<DocsContextProps>;
+        __DOCS_CONTEXT__: typeof DocsContext;
     }
@@ -12,0 +12,0 @@ }

dist/cjs/components/CssPropsBlock.js

@@ -28,3 +28,3 @@ "use strict";
 var CssPropsTable_1 = require("./CssPropsTable/CssPropsTable");
-var blocks_1 = require("@storybook/addon-docs/blocks");
+var blocks_1 = require("@storybook/blocks");
 var useDocsContext = function () {
@@ -40,3 +40,4 @@ var mainContext = React.useContext(blocks_1.DocsContext);
     var context = useDocsContext();
-    var cssprops = __assign({}, (_a = context === null || context === void 0 ? void 0 : context.parameters) === null || _a === void 0 ? void 0 : _a.cssprops);
+    var primaryStory = (context === null || context === void 0 ? void 0 : context.primaryStory) || {};
+    var cssprops = __assign({}, (_a = primaryStory === null || primaryStory === void 0 ? void 0 : primaryStory.parameters) === null || _a === void 0 ? void 0 : _a.cssprops);
     var presetColors = cssprops.presetColors, disable = cssprops.disable, restProperties = __rest(cssprops, ["presetColors", "disable"]);
@@ -48,4 +49,4 @@ var customProperties = overrideCustomProperties || restProperties;
         return null;
-    return (React.createElement(CssPropsTable_1.CssPropsTable, { storyId: context === null || context === void 0 ? void 0 : context.id, presetColors: presetColors, customProperties: customProperties }));
+    return (React.createElement(CssPropsTable_1.CssPropsTable, { storyId: primaryStory === null || primaryStory === void 0 ? void 0 : primaryStory.id, presetColors: presetColors, customProperties: customProperties }));
 };
 exports.CssPropsBlock = CssPropsBlock;

dist/cjs/components/CssPropsTable/CssPropsTable.js

@@ -16,3 +16,3 @@ "use strict";
 var React = require("react");
-var components_1 = require("@storybook/components");
+var blocks_1 = require("@storybook/blocks");
 var useInjectCustomProperties_1 = require("../hooks/useInjectCustomProperties");
@@ -164,3 +164,3 @@ var useLocalStorage_1 = require("../hooks/useLocalStorage");
     }, [storyId]);
-    return (React.createElement(components_1.ArgsTable, { key: stateStoryId, inAddonPanel: inAddonPanel, resetArgs: handleResetProps, rows: rows, updateArgs: function (arg) {
+    return (React.createElement(blocks_1.PureArgsTable, { key: stateStoryId, inAddonPanel: inAddonPanel, resetArgs: handleResetProps, rows: rows, updateArgs: function (arg) {
             var _a;
@@ -167,0 +167,0 @@ var name = Object.keys(arg)[0];

dist/cjs/register.js

@@ -9,4 +9,4 @@ "use strict";
 var constants_1 = require("./constants");
-addons_1.default.register(constants_1.ADDON_ID, function (api) {
-    addons_1.default.addPanel(constants_1.ADDON_ID, {
+addons_1.addons.register(constants_1.ADDON_ID, function (api) {
+    addons_1.addons.addPanel(constants_1.ADDON_ID, {
         title: title_1.useTitle,
@@ -13,0 +13,0 @@ type: addons_1.types.PANEL,

dist/esm/components/CssPropsBlock.d.ts

 import * as React from "react";
 import type { CssPropertyItemGroup } from "./CssPropsTable/types";
-import { DocsContextProps } from "@storybook/addon-docs/blocks";
+import { DocsContext } from "@storybook/blocks";
 interface CssPropsBlockProps {
@@ -9,3 +9,3 @@ customProperties: CssPropertyItemGroup;
     interface Window {
-        __DOCS_CONTEXT__: React.Context<DocsContextProps>;
+        __DOCS_CONTEXT__: typeof DocsContext;
     }
@@ -12,0 +12,0 @@ }

dist/esm/components/CssPropsBlock.js

@@ -25,3 +25,3 @@ var __assign = (this && this.__assign) || function () {
 import { CssPropsTable } from "./CssPropsTable/CssPropsTable";
-import { DocsContext } from "@storybook/addon-docs/blocks";
+import { DocsContext } from "@storybook/blocks";
 var useDocsContext = function () {
@@ -37,3 +37,4 @@ var mainContext = React.useContext(DocsContext);
     var context = useDocsContext();
-    var cssprops = __assign({}, (_a = context === null || context === void 0 ? void 0 : context.parameters) === null || _a === void 0 ? void 0 : _a.cssprops);
+    var primaryStory = (context === null || context === void 0 ? void 0 : context.primaryStory) || {};
+    var cssprops = __assign({}, (_a = primaryStory === null || primaryStory === void 0 ? void 0 : primaryStory.parameters) === null || _a === void 0 ? void 0 : _a.cssprops);
     var presetColors = cssprops.presetColors, disable = cssprops.disable, restProperties = __rest(cssprops, ["presetColors", "disable"]);
@@ -45,3 +46,3 @@ var customProperties = overrideCustomProperties || restProperties;
         return null;
-    return (React.createElement(CssPropsTable, { storyId: context === null || context === void 0 ? void 0 : context.id, presetColors: presetColors, customProperties: customProperties }));
+    return (React.createElement(CssPropsTable, { storyId: primaryStory === null || primaryStory === void 0 ? void 0 : primaryStory.id, presetColors: presetColors, customProperties: customProperties }));
 };

dist/esm/components/CssPropsTable/CssPropsTable.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import * as React from "react";
-import { ArgsTable } from "@storybook/components";
+import { PureArgsTable } from "@storybook/blocks";
 import { useInjectCustomProperties } from "../hooks/useInjectCustomProperties";
@@ -161,3 +161,3 @@ import { useLocalStorage } from "../hooks/useLocalStorage";
     }, [storyId]);
-    return (React.createElement(ArgsTable, { key: stateStoryId, inAddonPanel: inAddonPanel, resetArgs: handleResetProps, rows: rows, updateArgs: function (arg) {
+    return (React.createElement(PureArgsTable, { key: stateStoryId, inAddonPanel: inAddonPanel, resetArgs: handleResetProps, rows: rows, updateArgs: function (arg) {
             var _a;
@@ -164,0 +164,0 @@ var name = Object.keys(arg)[0];

dist/esm/register.js

 import * as React from "react";
-import addons, { types } from "@storybook/addons";
+import { addons, types } from "@storybook/addons";
 import { AddonPanel } from "@storybook/components";
@@ -4,0 +4,0 @@ import { CssPropsPanel } from "./components/CssPropsPanel";

package.json

 {
   "name": "@ljcl/storybook-addon-cssprops",
-  "version": "2.3.5",
+  "version": "3.0.0",
   "description": "Interact with css custom properties dynamically in the Storybook UI",
@@ -45,9 +45,9 @@ "keywords": [
   "devDependencies": {
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/api": "^6.5.9",
-    "@storybook/client-api": "^6.5.9",
-    "@storybook/components": "^6.4.19",
-    "@storybook/node-logger": "^6.5.9",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addons": "^7.0.2",
+    "@storybook/api": "^7.0.2",
+    "@storybook/preview-api": "^7.0.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/components": "^7.0.2",
+    "@storybook/theming": "^7.0.2",
+    "@storybook/types": "^7.0.2",
     "@types/node": "^14.14.22",
@@ -59,8 +59,10 @@ "@types/react": "^16.8.8",
   "peerDependencies": {
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/components": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@storybook/addons": "^7.0.2",
+    "@storybook/api": "^7.0.2",
+    "@storybook/preview-api": "^7.0.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/components": "^7.0.2",
+    "@storybook/theming": "^7.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
@@ -67,0 +69,0 @@ "peerDependenciesMeta": {

No alert changes

Improved metrics

Total package byte prevSize

96021

0.2%

Lines of code

985

0.2%

Worsened metrics

Dependency count

8

33.33%

No dependency changes