Skip to content

Commit 1254a0c

Browse files
anuraghazraanuraghazra
authored
chore(blade): rebranded storybook changes (#1982)
1 parent 36c708a commit 1254a0c

File tree

8 files changed

+262
-317
lines changed

8 files changed

+262
-317
lines changed

‎packages/blade/.storybook/react/main.ts

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,48 +16,12 @@ const config: StorybookConfig = {
1616
'@storybook/design-system': { disable: true },
1717
},
1818
stories: [
19-
'../../docs/guides/*.stories.mdx',
20-
'../../src/components/ActionList/**/*.stories.@(ts|tsx|js|jsx)',
21-
'../../src/components/Dropdown/**/*.stories.@(ts|tsx|js|jsx)',
22-
'../../src/components/Box/**/*.stories.@(ts|tsx|js|jsx)',
23-
'../../src/components/Amount/**/*.stories.@(ts|tsx|js|jsx)',
24-
'../../src/components/Badge/**/*.stories.@(ts|tsx|js|jsx)',
25-
'../../src/components/Card/**/*.stories.@(ts|tsx|js|jsx)',
26-
'../../src/components/Icons/**/*.stories.@(ts|tsx|js|jsx)',
27-
'../../src/components/Button/IconButton/**/*.stories.@(ts|tsx|js|jsx)',
28-
'../../src/components/Counter/**/*.stories.@(ts|tsx|js|jsx)',
29-
'../../src/components/Tag/**/*.stories.@(ts|tsx|js|jsx)',
30-
'../../src/components/Indicator/**/*.stories.@(ts|tsx|js|jsx)',
31-
'../../src/components/Button/**/*.stories.@(ts|tsx|js|jsx)',
32-
'../../src/components/Divider/**/*.stories.@(ts|tsx|js|jsx)',
33-
'../../src/components/Chip/**/*.stories.@(ts|tsx|js|jsx)',
34-
'../../src/components/Carousel/**/*.stories.@(ts|tsx|js|jsx)',
35-
'../../src/components/List/**/*.stories.@(ts|tsx|js|jsx)',
36-
'../../src/components/Link/**/*.stories.@(ts|tsx|js|jsx)',
37-
'../../src/components/Tooltip/**/*.stories.@(ts|tsx|js|jsx)',
38-
'../../src/components/Tabs/**/*.stories.@(ts|tsx|js|jsx)',
39-
'../../src/components/ProgressBar/**/*.stories.@(ts|tsx|js|jsx)',
40-
'../../src/components/Spinner/**/*.stories.@(ts|tsx|js|jsx)',
41-
'../../src/components/Typography/**/**/*.stories.@(ts|tsx|js|jsx)',
42-
'../../src/components/Collapsible/**/*.stories.@(ts|tsx|js|jsx)',
43-
'../../src/components/Accordion/**/*.stories.@(ts|tsx|js|jsx)',
44-
'../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)',
45-
'../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)',
46-
'../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)',
47-
'../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)',
48-
'../../src/components/Alert/**/**/*.stories.@(ts|tsx|js|jsx)',
49-
'../../src/components/Input/**/**/*.stories.@(ts|tsx|js|jsx)',
50-
'../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)',
51-
'../../src/components/SpotlightPopoverTour/**/**/*.stories.@(ts|tsx|js|jsx)',
52-
'../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)',
53-
'../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)',
54-
'../../src/components/Table/**/**/*.stories.@(ts|tsx|js|jsx)',
5519
'../../docs/**/*.stories.mdx',
5620
'../../docs/**/*.stories.@(ts|tsx|js|jsx)',
5721
'../../src/**/*.stories.mdx',
58-
// '../../src/**/*.stories.@(ts|tsx|js|jsx)',
59-
// '../../src/**/*.internal.stories.mdx',
60-
// '../../src/**/*.internal.stories.@(ts|tsx|js|jsx)',
22+
'../../src/**/*.stories.@(ts|tsx|js|jsx)',
23+
'../../src/**/*.internal.stories.mdx',
24+
'../../src/**/*.internal.stories.@(ts|tsx|js|jsx)',
6125
],
6226
addons: [
6327
'@storybook/addon-links',

‎packages/blade/docs/tokens/ThemeExplorer.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Explore Blade's theme tokens.
2828
export const ThemeExplorer = () => {
2929
const { theme } = useTheme();
3030
return (
31-
<Box>
31+
<Box paddingX="spacing.5" paddingY="spacing.2" backgroundColor="surface.background.gray.moderate">
3232
<JSONTree
3333
data={theme}
3434
hideRoot

‎packages/blade/docs/utils/useTheme.stories.mdx

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,26 @@ import { Meta } from '@storybook/addon-docs';
1818

1919
The `useTheme` hook returns a `ThemeContext` object that contains the following properties:
2020

21-
| Property | Type | Description |
22-
| ---------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
23-
| `theme` | [`Theme`](#theme) | The current theme object, which contains the values for various design tokens such as colors, typography, and spacing. |
24-
| `colorScheme` | [`ColorScheme`](#colorscheme) | The current color scheme of the application, which can be either 'light' or 'dark'. |
25-
| `platform` | [`Platform`](#platform) | The current platform of the application, which can be either 'onDesktop' or 'onMobile'. |
26-
| `setColorScheme` | `(colorScheme: `[`ColorSchemeInput`](#colorschemeinput)`) => void` | A function that allows you to set the color scheme of the application. |
21+
```ts
22+
type ThemeContext = {
23+
/**
24+
* The current theme object, which contains the values for various design tokens such as colors, typography, and spacing.
25+
*/
26+
theme: Theme;
27+
/**
28+
* The current color scheme of the application, which can be either 'light' or 'dark'.
29+
*/
30+
colorScheme: ColorSchemeNames;
31+
/**
32+
* The current platform of the application, which can be either 'onDesktop' or 'onMobile'.
33+
*/
34+
platform: Platform;
35+
/**
36+
* A function that allows you to set the color scheme of the application.
37+
*/
38+
setColorScheme: (colorScheme: ColorSchemeInput) => void;
39+
}
40+
```
2741
2842
### Usage
2943
@@ -78,13 +92,13 @@ To further explore the tokens in Theme, you can navigate to their respective doc
7892
- [Elevation](?path=/story/tokens-elevation--page)
7993
- [Typography](?path=/story/tokens-typography--page)
8094

81-
#### `ColorScheme`
95+
#### `ColorSchemeNames`
8296

8397
The current color scheme of the application. Can be either `'dark'` or `'light'`.
8498
If color scheme is set to 'system' using `setColorScheme`, the colorScheme property will return `'dark'` or `'light'` based on the user's system preferences.
8599

86100
```tsx
87-
type ColorScheme = 'dark' | 'light';
101+
type ColorSchemeNames = 'dark' | 'light';
88102
```
89103

90104
#### `Platform`

0 commit comments

Comments
 (0)