fix preview.js examples

README.md

@@ -111,7 +111,7 @@ You can specify the default tab shown in the addon panel. Set it to the correspo
 `.storybook/preview.js`
 
 ```javascript
-const preview = {
+export default {
   parameters: {
     designToken: {
       defaultTab: 'Colors'
@@ -127,7 +127,7 @@ To inject styles needed by your design token documentation, use the `styleInject
 `.storybook/preview.js`
 
 ```javascript
-const preview = {
+export default {
   parameters: {
     designToken: {
       styleInjection:
@@ -142,7 +142,7 @@ const preview = {
 In some cases you might only want to use the Doc Blocks and hide the addon panel. You can do so by the setting the `disable` parameter:
 
 ```javascript
-const preview = {
+export default {
   parameters: {
     designToken: {
       disable: true
@@ -156,7 +156,7 @@ const preview = {
 In some cases you might not need the search field to be visible. You can control its visibility by the setting the `showSearch` parameter:
 
 ```javascript
-const preview = {
+export default {
   parameters: {
     designToken: {
       showSearch: false
@@ -170,7 +170,7 @@ const preview = {
 By default `pageSize` of the card view is 50 items. You can configure it by setting the `pageSize` parameter:
 
 ```javascript
-const preview = {
+export default {
   parameters: {
     designToken: {
       pageSize: 10
@@ -182,7 +182,7 @@ const preview = {
 You can disable pagination in the following way:
 
 ```javascript
-const preview = {
+export default {
   parameters: {
     designToken: {
       // specify max value to disable pagination

addon/.storybook/preview.js

@@ -0,0 +1,9 @@
+export default {
+  parameters: {
+    designToken: {
+      disable: false,
+      defaultTab: "Colors",
+      showSearch: true,
+    },
+  },
+};

addon/package.json

@@ -64,12 +64,12 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.0",
-    "@storybook/addon-interactions": "^7.0.0",
-    "@storybook/addon-links": "^7.0.0",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
     "@storybook/builder-webpack5": "^7.0.5",
-    "@storybook/react": "^7.0.0",
-    "@storybook/react-vite": "^7.0.0",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.0.14-next.1",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.15.0",
@@ -81,20 +81,20 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "storybook": "^7.0.0",
+    "storybook": "^7.5.3",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "@storybook/blocks": "^7.0.0",
-    "@storybook/components": "^7.0.0",
-    "@storybook/core-events": "^7.0.0",
-    "@storybook/manager-api": "^7.0.0",
-    "@storybook/preview-api": "^7.0.0",
-    "@storybook/theming": "^7.0.0",
-    "@storybook/types": "^7.0.0",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/components": "^7.5.3",
+    "@storybook/core-events": "^7.5.3",
+    "@storybook/manager-api": "^7.5.3",
+    "@storybook/preview-api": "^7.5.3",
+    "@storybook/theming": "^7.5.3",
+    "@storybook/types": "^7.5.3",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },