Trendyol / baklava

Baklava is a design system provided by Trendyol to create a consistent UI/UX for app users.
https://baklava.design/
MIT License
1.26k stars 112 forks source link

docs(storybook): add version button in storybook toolbar #807

Closed ozkersemih closed 6 months ago

ozkersemih commented 7 months ago

In this pr, I want to add custom toolbar button in storybook to redirect beta/stable version Screenshot 2024-03-04 at 17 21 34

AykutSarac commented 6 months ago

I don't think it is visible enough within the UI. Is that possible to place a select component or similar under the search input here?

image
ozkersemih commented 6 months ago

I don't think it is visible enough within the UI. Is that possible to place a select component or similar under the search input here?

image

I totally aggre with you but i didn't find anything about to add selection for version switching in storybook.

buseselvi commented 6 months ago

Great job! Let's add a button like the one below on the welcome pages, too.

image
ozkersemih commented 6 months ago

@AykutSarac @erbilnas I have another idea

// welcome.stories.mdx file
<Markdown>{ReadMe.slice(0,ReadMe.search("## How to use"))}</Markdown>
<bl-button>...</bl-button>
<Markdown>{ReadMe.slice(ReadMe.search("## How to use"))}</Markdown>

We can split readme in welcome mdx file like this. With this way, also we wont crash original readme file. What do u think?

erbilnas commented 6 months ago

@erbilnas, in reference to your recent commit, Baklava CDN is integrated into the storybook. However, since the README.md is also displayed on the GitHub repository, we won't be able to access Baklava components from there.

You're correct, let me amend it now.

ozkersemih commented 6 months ago

Last touch will be like below, I think it is ok.

<Meta title="Documentation/Welcome" />

<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" size="large" onclick="window.open('https://baklava.design/', '_blank')">Stable Version</bl-button>}
  {!window.parent.location.hostname.includes('next') && <bl-button variant="secondary" 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>

Screenshot 2024-03-18 at 16 18 14

github-actions[bot] commented 6 months ago

:tada: This PR is included in version 3.0.0-beta.6 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 5 months ago

:tada: This PR is included in version 3.1.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: