Updates the env vars docs for sb env field

docs/configure/environment-variables.md

@@ -69,6 +69,34 @@ You can also pass these environment variables when you are [building your Storyb
 
 Then they'll be hardcoded to the static version of your Storybook.
 
+
+### Using Storybook configuration
+
+Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-env-field-config.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads, it will enable you to access them in your stories similar as you would do if you were working with an `env` file:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/my-component-env-var-config.js.mdx',
+    'common/my-component-env-var-config.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ### Using environment variables to choose the browser
 
 Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.
@@ -83,4 +111,4 @@ The table below lists the available options:
 
 <div class="aside">
 💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-</div>
+</div>

docs/snippets/common/my-component-env-var-config.js.mdx

@@ -0,0 +1,23 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  exampleProp: process.env.EXAMPLE_VAR,
+};
+```

docs/snippets/common/my-component-env-var-config.mdx.mdx

@@ -0,0 +1,23 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { MyComponent } from './MyComponent';
+
+<Meta title="MyComponent" component={MyComponent}/>
+
+export const Template = (args) => ({
+  //👇 Your template goes here
+});
+
+<Canvas>
+  <Story
+    name="ExampleStory"
+    args={{
+      exampleProp: process.env.EXAMPLE_VAR,
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+```

docs/snippets/common/storybook-main-env-field-config.js.mdx

@@ -0,0 +1,15 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  env: () => ({
+    EXAMPLE_VAR: 'An environment variable configured in Storybook',
+  }),
+};
+```