From 9476e28433cf1824f09a1a0596df6bf80c96e9db Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 19 Jan 2023 17:38:42 +0000
Subject: [PATCH] Environment vars changes

---
 docs/configure/environment-variables.md       |  1 +
 .../storybook-main-env-field-config.js.mdx    |  2 +-
 .../storybook-main-env-field-config.ts.mdx    | 25 +++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 docs/snippets/common/storybook-main-env-field-config.ts.mdx

diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index 7d8e4d9554c..fe3eb4ad0b0 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -83,6 +83,7 @@ Additionally, you can extend your Storybook configuration file (i.e., [`.storybo
 <CodeSnippets
   paths={[
     'common/storybook-main-env-field-config.js.mdx',
+    'common/storybook-main-env-field-config.ts.mdx',
   ]}
 />
 
diff --git a/docs/snippets/common/storybook-main-env-field-config.js.mdx b/docs/snippets/common/storybook-main-env-field-config.js.mdx
index ae748a51aed..c9a2d05f998 100644
--- a/docs/snippets/common/storybook-main-env-field-config.js.mdx
+++ b/docs/snippets/common/storybook-main-env-field-config.js.mdx
@@ -2,7 +2,7 @@
 // .storybook/main.js
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
diff --git a/docs/snippets/common/storybook-main-env-field-config.ts.mdx b/docs/snippets/common/storybook-main-env-field-config.ts.mdx
new file mode 100644
index 00000000000..33566b015c8
--- /dev/null
+++ b/docs/snippets/common/storybook-main-env-field-config.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  /*
+   * 👇 The `config` argument contains all the other existing environment variables.
+   * Either configured in an `.env` file or configured on the command line.
+   */
+  env: (config) => ({
+    ...config,
+    EXAMPLE_VAR: 'An environment variable configured in Storybook',
+  }),
+};
+
+export default config;
+```