-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: re-configure storybook hosting for web (#537)
## Description <img width="600" alt="screen" src="https://github.com/dooboolab-community/dooboo-ui/assets/27461460/3d5ec738-4bf8-4d95-b7cd-7773e703d189"> Delete the separately documented Storybook from the past, and change the structure to manage it together with the existing root project. ## Checklist Before you create this PR confirms that it meets all requirements listed below by checking the relevant checkboxes (`[x]`). This will ensure a smooth and quick review process. - [x] I read the [Contributor Guide](https://github.com/dooboolab-community/dooboo-ui/blob/main/CONTRIBUTING.md) and followed the process outlined there for submitting PRs. - [x] Run `yarn test:all` and make sure nothing fails. - [x] I am willing to follow-up on review comments in a timely manner.
- Loading branch information
Showing
97 changed files
with
1,027 additions
and
16,253 deletions.
There are no files selected for viewing
File renamed without changes.
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
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,8 @@ | ||
| <link rel="shortcut icon" href="/static/icon.ico" /> | ||
| <link rel="icon" type="image/png" href="/static/icon.png" sizes="192x192" /> | ||
| <style> | ||
| html { | ||
| font-size: 16px; | ||
| } | ||
| </style> | ||
| <title>dooboo-ui</title> |
This file was deleted.
Oops, something went wrong.
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,83 @@ | ||
| import React from 'react'; | ||
| import type {Preview} from '@storybook/react'; | ||
| import {darkTheme, lightTheme} from './theme'; | ||
| import {DocsContainer} from '@storybook/addon-docs'; | ||
|
|
||
| import {useDarkMode} from 'storybook-dark-mode'; | ||
|
|
||
| export const preview: Preview = { | ||
| parameters: { | ||
| actions: {argTypesRegex: '^on[A-Z].*'}, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/, | ||
| }, | ||
| }, | ||
| darkMode: { | ||
| dark: darkTheme, | ||
| light: lightTheme, | ||
| }, | ||
| docs: { | ||
| container: ({children, context}) => ( | ||
| <DocsContainer | ||
| context={{ | ||
| ...context, | ||
| storyById: (id) => { | ||
| const storyContext = context.storyById(id); | ||
| return { | ||
| ...storyContext, | ||
| parameters: { | ||
| ...storyContext?.parameters, | ||
| docs: { | ||
| ...storyContext?.parameters?.docs, | ||
| theme: useDarkMode() ? darkTheme : lightTheme, | ||
| }, | ||
| }, | ||
| }; | ||
| }, | ||
| }} | ||
| > | ||
| {children} | ||
| </DocsContainer> | ||
| ), | ||
| }, | ||
| options: { | ||
| storySort: (a, b) => { | ||
| const sectionA = a.id.split('-')[0]; | ||
| const sectionB = b.id.split('-')[0]; | ||
| if (sectionA === sectionB) { | ||
| return a.name.localeCompare(b.name); | ||
| } | ||
| const sectionMap = { | ||
| overview: 1, | ||
| components: 2, | ||
| modals: 3, | ||
| packages: 4, | ||
| }; | ||
| return (sectionMap[sectionA] || 0) - (sectionMap[sectionB] || 0); | ||
| }, | ||
| /** | ||
| * regex for finding the hierarchy separator | ||
| * @example: | ||
| * null - turn off hierarchy | ||
| * /\// - split by `/` | ||
| * /\./ - split by `.` | ||
| * /\/|\./ - split by `/` or `.` | ||
| * @type {Regex} | ||
| */ | ||
| hierarchySeparator: /\/|\./, | ||
| /** | ||
| * regex for finding the hierarchy root separator | ||
| * @example: | ||
| * null - turn off multiple hierarchy roots | ||
| * /\|/ - split by `|` | ||
| * @type {Regex} | ||
| */ | ||
| hierarchyRootSeparator: /\|/, | ||
| isToolshown: true, | ||
| showPanel: true, | ||
| panelPosition: 'bottom', | ||
| }, | ||
| }, | ||
| }; |
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,75 @@ | ||
| import {create} from '@storybook/theming'; | ||
|
|
||
| const commonTheme = { | ||
| brandTitle: 'dooboo-ui', | ||
| brandUrl: 'https://dooboo-ui.dooboolab.com', | ||
| brandImage: '/static/icon.png', | ||
| brandTarget: '_self', | ||
| stylePreview: true, | ||
| }; | ||
|
|
||
| export const lightTheme = create({ | ||
| ...commonTheme, | ||
| base: 'light', | ||
| colorPrimary: 'black', | ||
| colorSecondary: '#00D9D5', | ||
|
|
||
| // UI | ||
| appBg: 'white', | ||
| appContentBg: 'white', | ||
| appBorderColor: '#F6F9FC', | ||
| appBorderRadius: 1, | ||
|
|
||
| // Typography | ||
| fontBase: '"Source Sans Pro", sans-serif', | ||
| fontCode: 'monospace', | ||
|
|
||
| // Text colors | ||
| textColor: 'black', | ||
| textInverseColor: 'white', | ||
|
|
||
| // Toolbar default and active colors | ||
| barTextColor: '#F6F9FC', | ||
| barSelectedColor: 'black', | ||
| barBg: '#00D9D5', | ||
|
|
||
| // Form colors | ||
| inputBg: 'white', | ||
| inputBorder: '#414141', | ||
| inputTextColor: 'black', | ||
| inputBorderRadius: 1, | ||
| }); | ||
|
|
||
| export const darkTheme = create({ | ||
| ...commonTheme, | ||
| base: 'dark', | ||
| colorPrimary: 'white', | ||
| colorSecondary: '#1E1D1D', | ||
|
|
||
| // UI | ||
| appBg: '#1D1E1E', | ||
| appContentBg: '#1D1E1E', | ||
| appBorderColor: '#1D1E1E', | ||
| appBorderRadius: 1, | ||
|
|
||
| // Typography | ||
| fontBase: '"Source Sans Pro", sans-serif', | ||
| fontCode: 'monospace', | ||
|
|
||
| // Text colors | ||
| textColor: 'white', | ||
| textInverseColor: 'black', | ||
|
|
||
| // Toolbar default and active colors | ||
| barTextColor: '#EDEDED', | ||
| barSelectedColor: '#585DFA', | ||
| barBg: '#1D1E1E', | ||
|
|
||
| // Form colors | ||
| inputBg: 'black', | ||
| inputBorder: '#414141', | ||
| inputTextColor: 'white', | ||
| inputBorderRadius: 1, | ||
|
|
||
| appPreviewBg: '#1D1E1E', | ||
| }); |
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 was deleted.
Oops, something went wrong.
Oops, something went wrong.