chore: update readme

.storybook/main.ts

@@ -9,7 +9,8 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+    },
   },
   docs: {
     autodocs: "tag",

.storybook/preview.ts

@@ -14,9 +14,9 @@ const preview: Preview = {
     },
     globals: {
       contentfulPreview: {
-        space: "621006g5gybw",
-        accessToken: "UaqOlFCYE6lFHd_Cmvp2xD__UBceBcKA4j8KkFoCdac",
-        host: 'preview.contentful.com',
+        space: process.env.STORYBOOK_SPACE_ID,
+        accessToken: process.env.STORYBOOK_PREVIEW_TOKEN,
+        host: process.env.STORYBOOK_HOST,
         // debugMode: true,
       }
     }

README.md

@@ -43,6 +43,41 @@ This addon contributes the following parameters to Storybook, under the `content
 | `livePreview` | `boolean`  | Enables the live preview sdk                                                                               | No       |
 | `argsMutator` | `function` | Mutator for the loaded entry data. By default, all fields will be populated as top-level args to the story | No       |
 
+#### Define Parameters
+You can set the parameters globally, by adding the `contentfulPreview` parameter to the `globals` object of your `.storybook/preview.js` file.
+
+```ts
+import type {Preview} from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    globals: {
+      contentfulPreview: {
+        space: "<space-id>",
+        accessToken: "<access-token>",
+        host: 'preview.contentful.com',
+      }
+    }
+  },
+};
+
+export default preview;
+```
+
+You can also set the parameters per story, by adding the `contentfulPreview` parameter to the story.
+
+```ts
+export default {
+  title: 'Button',
+  parameters: {
+    contentfulPreview: {
+      spaceId: 'your-space',
+    }
+  }
+}
+```
+> The parameters set on the [story level will override the global](https://storybook.js.org/docs/writing-stories/parameters#rules-of-parameter-inheritance) parameters.
+
 ### Decorators
 
 #### `withContentful`
@@ -57,7 +92,7 @@ export default {
   title: 'Button',
   decorators: [withContentful],
   parameters: {
-    contentful: {
+    contentfulPreview: {
       spaceId: 'your-space',
       accessToken: 'your-access-token',
       entryId: 'your-entry-id',
@@ -76,7 +111,7 @@ export default {
   title: 'Button',
   decorators: [withLivePreview, withContentful],
   parameters: {
-    contentful: {
+    contentfulPreview: {
       spaceId: 'your-space',
       accessToken: 'your-access-token',
       entryId: 'your-entry-id',
@@ -100,7 +135,7 @@ export default {
   title: 'Button',
   decorators: [withEntryArgMutator, withContentful],
   parameters: {
-    contentful: {
+    contentfulPreview: {
       spaceId: 'your-space',
       accessToken: 'your-access-token',
       entryId: 'your-entry-id',

package.json

@@ -83,6 +83,7 @@
     "tsup": "^8.0.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.1",
+    "vite-plugin-environment": "^1.1.3",
     "zx": "^7.2.3"
   },
   "publishConfig": {

vite.config.ts

@@ -1,7 +1,15 @@
-import { defineConfig } from "vite";
+import {defineConfig} from "vite";
 import react from "@vitejs/plugin-react";
+import EnvironmentPlugin from 'vite-plugin-environment'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    EnvironmentPlugin([
+      'STORYBOOK_SPACE_ID',
+      'STORYBOOK_PREVIEW_TOKEN',
+      'STORYBOOK_HOST'
+    ]),
+  ],
 });