-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adding welcome & get started pages also customizing storybook UI
- Loading branch information
Showing
15 changed files
with
638 additions
and
260 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { create } from '@storybook/theming/create'; | ||
|
|
||
| export default create({ | ||
| base: 'light', | ||
| brandTitle: ` | ||
| <div style="display: flex; gap: 4px; align-items: center;"> | ||
| <img src="https://res.cloudinary.com/dmww1p65r/image/upload/v1706181221/gxlbop2zywgiyzbujh7c.png"></img> | ||
| <span style="font-weight:bold;"> Bootwind UI</span> | ||
| </div> | ||
| `, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| <style> | ||
| #storybook-explorer-searchfield { | ||
| font-weight: 400 !important; | ||
| font-size: 14px !important; | ||
| letter-spacing: -0.01em !important; | ||
| line-height: 14px !important; | ||
| } | ||
|
|
||
| /* | ||
| * Hides "Addons" button from mobile view nav. | ||
| */ | ||
| nav > button:last-child { | ||
| display: none; | ||
| } | ||
|
|
||
| /* | ||
| Storybook has proposed a feature for this in https://github.com/storybookjs/storybook/issues/9209 | ||
| which will configure stories to exist in deeplink URL format, but do not appear in the nav tree or the docs page | ||
| Usign suggested temporary workaround until storybook gets proper support | ||
| See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing | ||
| */ | ||
| [id*='accessibility-stories'] { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /* remove margin from sidebar logo */ | ||
| .sidebar-header > div:first-of-type { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| /* remove sidebar shortcuts menu */ | ||
| .sidebar-header > div:last-child { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Add left side background color splash */ | ||
| /* colors become distracting in mobile layout so scoped to where sidebar is visible */ | ||
| @media (min-width: 600px) { | ||
| #root > div:before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: -200px; | ||
| left: -200px; | ||
| width: 400px; | ||
| height: 400px; | ||
| background: #6666ff; | ||
| opacity: 0.7; | ||
| filter: blur(150px); | ||
| z-index: 100; | ||
| } | ||
|
|
||
| /* Add right side background color splash */ | ||
| #root > div:after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: -200px; | ||
| right: -200px; | ||
| width: 400px; | ||
| height: 400px; | ||
| background: #b3d4ff; | ||
| opacity: 0.8; | ||
| filter: blur(150px); | ||
| } | ||
| } | ||
|
|
||
| /* Give sidebar a transparent white background to match design */ | ||
| .sidebar-container { | ||
| background: rgba(255, 255, 255, 0.63); | ||
| z-index: 101 !important; | ||
| } | ||
|
|
||
| /* remove background preventing color splash from showing */ | ||
| #storybook-preview-wrapper { | ||
| background: transparent; | ||
| } | ||
|
|
||
| /* | ||
| * Set position fixed to create a layer and prevent iframe from jumping when content is | ||
| * larger than the viewport and the iframe itself | ||
| */ | ||
| [role='main'] { | ||
| position: fixed; | ||
| } | ||
|
|
||
| /* remove box shadow style from storybooks wrapper div */ | ||
| [role='main'] > div { | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| /* permanently hide toolbar so animation never appears on page load */ | ||
| [role='main'] .os-host { | ||
| display: none; | ||
| } | ||
|
|
||
| /* stop offset from changing page dimensions when 't' is pressed and toolbar opened */ | ||
| [role='main'] > div > div > div { | ||
| top: 0 !important; | ||
| height: 100% !important; | ||
| } | ||
|
|
||
| /* remove the docs wrapper bg to let page bg show through */ | ||
| /* remove unnecessary padding now that theme switcher is not taking up space */ | ||
| #docs-root .sbdocs-wrapper { | ||
| background: transparent !important; | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| /* sb-show-main is missing during page transitions causing a page shift */ | ||
| /* todo: cleanup once we no longer inherit docs-root */ | ||
| .sb-show-main.sb-main-fullscreen, | ||
| .sb-main-fullscreen { | ||
| margin: 0; | ||
| padding: 0; | ||
| display: block; | ||
| } | ||
|
|
||
| .sbdocs .sbdocs-wrapper .css-k7lbue { | ||
| background-color: transparent !important; | ||
| } | ||
|
|
||
| /* remove loading overlay */ | ||
| .sb-preparing-story, | ||
| .sb-preparing-docs, | ||
| .sb-nopreview, | ||
| .sb-errordisplay { | ||
| display: none !important; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { addons } from '@storybook/manager-api'; | ||
| import BootwindTheme from './BootwindTheme'; | ||
|
|
||
| addons.setConfig({ | ||
| theme: BootwindTheme, | ||
| showPanel: false, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /* remove margin from sidebar logo */ | ||
| .sidebar-header > div:first-of-type { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| /* remove sidebar shortcuts menu */ | ||
| .sidebar-header > div:last-child { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Add left side background color splash */ | ||
| /* colors become distracting in mobile layout so scoped to where sidebar is visible */ | ||
| @media (min-width: 600px) { | ||
| #root > div:before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: -200px; | ||
| left: -200px; | ||
| width: 400px; | ||
| height: 400px; | ||
| background: #c989e8; | ||
| opacity: 0.5; | ||
| filter: blur(150px); | ||
| } | ||
|
|
||
| /* Add right side background color splash */ | ||
| #root > div:after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: -200px; | ||
| right: -200px; | ||
| width: 400px; | ||
| height: 400px; | ||
| background: #b3d4ff; | ||
| opacity: 0.5; | ||
| filter: blur(150px); | ||
| } | ||
| } | ||
|
|
||
| /* Give sidebar a transparent white background to match design */ | ||
| .sidebar-container { | ||
| background: rgba(255, 255, 255, 0.6); | ||
| } | ||
|
|
||
| /* remove background preventing color splash from showing */ | ||
| #storybook-preview-wrapper { | ||
| background: transparent; | ||
| } | ||
|
|
||
| /* | ||
| * Set position fixed to create a layer and prevent iframe from jumping when content is | ||
| * larger than the viewport and the iframe itself | ||
| */ | ||
| [role='main'] { | ||
| position: fixed; | ||
| } | ||
|
|
||
| /* remove box shadow style from storybooks wrapper div */ | ||
| [role='main'] > div { | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| /* permanently hide toolbar so animation never appears on page load */ | ||
| [role='main'] .os-host { | ||
| display: none; | ||
| } | ||
|
|
||
| /* stop offset from changing page dimensions when 't' is pressed and toolbar opened */ | ||
| [role='main'] > div > div > div { | ||
| top: 0 !important; | ||
| height: 100% !important; | ||
| } | ||
|
|
||
| /* Remove 'Published on Chromatic' banner */ | ||
| #back-to-chromatic { | ||
| display: none !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,20 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); | ||
| @import "tailwind.scss"; | ||
| @import "variables"; | ||
| @import 'tailwind.scss'; | ||
| @import 'variables'; | ||
|
|
||
| body { | ||
| font-family: 'Inter'; | ||
| font-family: 'Inter'; | ||
| } | ||
| a { | ||
| @apply text-indigo-600 transition duration-150; | ||
| @apply text-indigo-600 transition duration-150; | ||
| } | ||
| .color-default { | ||
| @apply text-zinc-400 | ||
| @apply text-zinc-400; | ||
| } | ||
| a.color-default { | ||
| @apply hover:text-zinc-800; | ||
| @apply hover:text-zinc-800; | ||
| } | ||
|
|
||
| .tooltip-wrapper:hover .tooltip-content { | ||
| display: block | ||
| } | ||
| display: block; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,17 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| } | ||
| h1,h2,h3,h4,h5,h6 { | ||
| color: var(--heading-foreground); | ||
| } | ||
| } | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| color: var(--heading-foreground); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { Meta } from '@storybook/blocks'; | ||
|
|
||
| <Meta title="Get Started" /> | ||
|
|
||
| <div classname="content"> | ||
| <h1>Get Started</h1> | ||
| <h3>Test</h3> | ||
| </div> |
Oops, something went wrong.