Merge pull request #807 from Trendyol/storybook-version-selecting

docs(storybook): add version button in storybook toolbar

.storybook/preview.ts

@@ -29,3 +29,31 @@ export const parameters = {
     },
   },
 };
+
+export const globalTypes = {
+  version: {
+    name: 'version',
+    description: 'Select version Stable/Beta',
+    toolbar: {
+      icon: 'branch',
+      items: [
+        { value: 'stable', icon: 'branch', title: 'Stable Version' },
+        { value: 'beta', icon: 'branch', title: 'Beta Version' },
+      ],
+      dynamicTitle: true,
+    },
+  },
+}
+
+
+export const decorators = [
+  (storyFn, context) => {
+    if (context.globals.version === 'stable' && window.parent.location.hostname.includes('next')) {
+      window.parent.location.assign('https://baklava.design' + window.parent.location.search);
+    }
+    if (context.globals.version === 'beta' && !window.parent.location.hostname.includes('next')) {
+      window.parent.location.assign('https://next.baklava.design' + window.parent.location.search);
+    }
+    return storyFn();
+  }
+];

README.md

@@ -2,7 +2,7 @@
 
 <h1 align="center">Baklava Design System</h1>
 
-<p align="center">
+<p style="display:flex;flex-direction:row;gap:10px;justify-content:center;">
   <a href="https://www.npmjs.com/package/@trendyol/baklava">
     <img src="https://img.shields.io/npm/v/@trendyol/baklava.svg" alt="NPM Package Stable" />
   </a>

docs/welcome.stories.mdx

@@ -3,4 +3,9 @@ import ReadMe from '../README.md?raw';
 
 <Meta title="Documentation/Welcome" />
 
-<Markdown>{ReadMe}</Markdown>
+<Markdown>{ReadMe.slice(0,ReadMe.search("Baklava is a design system"))}</Markdown>
+<div align={"center"}>
+  {window.parent.location.hostname.includes('next') && <bl-button variant="secondary" icon="rocket" size="large" onclick="window.open('https://baklava.design/', '_blank')">Stable Version</bl-button>}
+  {!window.parent.location.hostname.includes('next') && <bl-button variant="secondary" kind="neutral" icon="external_link" size="large" onclick="window.open('https://next.baklava.design/', '_blank')">Beta Version</bl-button>}
+</div>
+<Markdown>{ReadMe.slice(ReadMe.search("Baklava is a design system"))}</Markdown>