Skip to content

Commit b804aa6

Browse files
WesSouzaWesSouza
committed
feat(themes): add scale and shadow, storybook settings
1 parent 7efe96c commit b804aa6

File tree

112 files changed

+1142
-727
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+1142
-727
lines changed

‎.storybook/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const storybookConfig: StorybookConfig = {
1515
}
1616
},
1717
'@storybook/addon-storysource',
18-
'./theme-picker/register.ts'
18+
'./theme-settings/register.ts'
1919
],
2020
core: {
2121
builder: 'webpack5'

‎.storybook/preview.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { DecoratorFn, Parameters } from '@storybook/react';
22
import { withGlobalStyle } from './decorators/withGlobalStyle';
3-
import { withThemesProvider } from './theme-picker/ThemeProvider';
3+
import { withThemeSettings } from './theme-settings/ThemeProvider';
44

5-
export const decorators: DecoratorFn[] = [withGlobalStyle, withThemesProvider];
5+
export const decorators: DecoratorFn[] = [withGlobalStyle, withThemeSettings];
66

77
export const parameters: Parameters = {
88
layout: 'fullscreen',

‎.storybook/theme-picker/ThemeList.tsx

-77
This file was deleted.

‎.storybook/theme-picker/ThemeProvider.tsx

-17
This file was deleted.

‎.storybook/theme-picker/ThemeButton.tsx ‎.storybook/theme-settings/ThemeButton.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback } from 'react';
22
import { ThemeProvider } from 'styled-components';
3-
import { Button } from '../../src/Button/Button';
3+
import { Button } from '../../src/index';
44
import { Theme } from '../../src/types';
55

66
export function ThemeButton({
@@ -9,11 +9,11 @@ export function ThemeButton({
99
theme
1010
}: {
1111
active: boolean;
12-
onChoose: (themeName: string) => void;
12+
onChoose: (theme: Theme) => void;
1313
theme: Theme;
1414
}) {
1515
const handleClick = useCallback(() => {
16-
onChoose(theme.name);
16+
onChoose(theme);
1717
}, []);
1818

1919
return (

‎.storybook/theme-settings/ThemeProvider.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useAddonState } from '@storybook/client-api';
2+
import { DecoratorFn } from '@storybook/react';
3+
import React from 'react';
4+
import { createGlobalStyle, ThemeProvider } from 'styled-components';
5+
6+
import themes from '../../src/common/themes/index';
7+
import { SCALE } from '../../src/common/constants';
8+
import { Theme } from '../../src/common/themes/types';
9+
import { THEMES_ID } from './constants';
10+
11+
const GlobalScaledFont = createGlobalStyle`
12+
html {
13+
font-size: ${({ theme }: { theme: Theme }) =>
14+
(theme?.scale ?? SCALE) * 2 + 12}px;
15+
}
16+
`;
17+
18+
export const withThemeSettings: DecoratorFn = story => {
19+
const [themeName] = useAddonState(`${THEMES_ID}/themeName`, 'original');
20+
const [themeScale] = useAddonState(
21+
`${THEMES_ID}/themeScale`,
22+
themes.original.scale
23+
);
24+
const [themeShadow] = useAddonState(
25+
`${THEMES_ID}/themeShadow`,
26+
themes.original.shadow
27+
);
28+
29+
const theme: Theme = {
30+
...themes[themeName],
31+
scale: themeScale,
32+
shadow: themeShadow
33+
};
34+
35+
return (
36+
<ThemeProvider theme={theme}>
37+
<GlobalScaledFont />
38+
{story()}
39+
</ThemeProvider>
40+
);
41+
};

‎.storybook/theme-settings/ThemeSettings.tsx

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { useAddonState } from '@storybook/api';
2+
import React, { useCallback } from 'react';
3+
import styled, { ThemeProvider } from 'styled-components';
4+
import { SCALE } from '../../src/common/constants';
5+
6+
import themes from '../../src/common/themes';
7+
import { Checkbox, GroupBox, Slider } from '../../src/index';
8+
import { Theme } from '../../src/types';
9+
import { THEMES_ID } from './constants';
10+
import { ThemeButton } from './ThemeButton';
11+
12+
const {
13+
original,
14+
rainyDay,
15+
vaporTeal,
16+
theSixtiesUSA,
17+
olive,
18+
tokyoDark,
19+
rose,
20+
plum,
21+
matrix,
22+
travel,
23+
...otherThemes
24+
} = themes;
25+
26+
const themeList = [
27+
original,
28+
rainyDay,
29+
vaporTeal,
30+
theSixtiesUSA,
31+
olive,
32+
tokyoDark,
33+
rose,
34+
plum,
35+
matrix,
36+
travel,
37+
...Object.values(otherThemes)
38+
];
39+
40+
type ThemesProps = {
41+
active?: boolean;
42+
};
43+
44+
const Wrapper = styled.div<{ theme: Theme }>`
45+
padding: 1em;
46+
background-color: ${({ theme }) => theme.material};
47+
`;
48+
49+
const ThemesGrid = styled.div`
50+
display: grid;
51+
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
52+
grid-template-rows: repeat(auto-fill, 40px);
53+
gap: 1em;
54+
margin-bottom: 1em;
55+
`;
56+
57+
const marks = [
58+
{ label: '1', value: 1 },
59+
{ label: '2', value: 2 },
60+
{ label: '3', value: 3 },
61+
{ label: '4', value: 4 },
62+
{ label: '5', value: 5 }
63+
];
64+
65+
export function ThemeSettings({ active }: ThemesProps) {
66+
const [themeName, setThemeName] = useAddonState(
67+
`${THEMES_ID}/themeName`,
68+
'original'
69+
);
70+
const [themeScale, setThemeScale] = useAddonState(
71+
`${THEMES_ID}/themeScale`,
72+
themes.original.scale
73+
);
74+
const [themeShadow, setThemeShadow] = useAddonState(
75+
`${THEMES_ID}/themeShadow`,
76+
themes.original.shadow
77+
);
78+
79+
const handleChoose = useCallback(
80+
(newTheme: Theme) => {
81+
setThemeName(newTheme.name);
82+
},
83+
[setThemeName]
84+
);
85+
86+
const handleShadowChange = useCallback(
87+
(event: React.ChangeEvent<HTMLInputElement>) => {
88+
const checked = (event.target as HTMLInputElement).checked;
89+
setThemeShadow(checked);
90+
},
91+
[]
92+
);
93+
94+
const handleScaleChange = useCallback(
95+
(_: Event | React.SyntheticEvent, value: number) => {
96+
setThemeScale(value);
97+
},
98+
[]
99+
);
100+
101+
if (!active) {
102+
return <></>;
103+
}
104+
105+
return (
106+
<Wrapper key={THEMES_ID} theme={themes.original}>
107+
<ThemesGrid>
108+
{themeList.map(theme => (
109+
<ThemeButton
110+
active={themeName === theme.name}
111+
key={theme.name}
112+
onChoose={handleChoose}
113+
theme={theme}
114+
/>
115+
))}
116+
</ThemesGrid>
117+
<ThemeProvider theme={themes.original}>
118+
<GroupBox label='Options'>
119+
<Checkbox
120+
checked={themeShadow}
121+
onChange={handleShadowChange}
122+
label='Modern Shadows'
123+
/>
124+
<Slider
125+
onChange={handleScaleChange}
126+
min={1}
127+
max={5}
128+
marks={marks}
129+
value={themeScale ?? SCALE}
130+
/>
131+
</GroupBox>
132+
</ThemeProvider>
133+
</Wrapper>
134+
);
135+
}

‎.storybook/theme-picker/constants.ts ‎.storybook/theme-settings/constants.ts

File renamed without changes.

‎.storybook/theme-picker/register.ts ‎.storybook/theme-settings/register.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import addons, { makeDecorator, types } from '@storybook/addons';
22
import { THEMES_ID } from './constants';
3-
import { ThemeList } from './ThemeList';
3+
import { ThemeSettings } from './ThemeSettings';
44

55
addons.register(THEMES_ID, () => {
66
addons.addPanel(`${THEMES_ID}/panel`, {
7-
title: 'Themes',
7+
title: 'Theme Settings',
88
type: types.PANEL,
9-
render: ThemeList
9+
render: ThemeSettings
1010
});
1111
});
1212

1313
export default makeDecorator({
14-
name: 'withThemesProvider',
14+
name: 'withThemeSettingsProvider',
1515
parameterName: 'theme',
1616
wrapper: (getStory, context) => getStory(context)
1717
});

‎src/Avatar/Avatar.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { forwardRef } from 'react';
2-
import styled from 'styled-components';
2+
import styled, { css } from 'styled-components';
3+
import { styledDimension } from '../common';
34
import { getSize } from '../common/utils';
45
import { CommonStyledProps } from '../types';
56

@@ -28,13 +29,13 @@ const StyledAvatar = styled.div<
2829
overflow: hidden;
2930
${({ noBorder, theme }) =>
3031
!noBorder &&
31-
`
32-
border-top: 2px solid ${theme.borderDark};
33-
border-left: 2px solid ${theme.borderDark};
34-
border-bottom: 2px solid ${theme.borderLightest};
35-
border-right: 2px solid ${theme.borderLightest};
36-
background: ${theme.material};
37-
`}
32+
css`
33+
border-top: ${styledDimension(1)} solid ${theme.borderDark};
34+
border-left: ${styledDimension(1)} solid ${theme.borderDark};
35+
border-bottom: ${styledDimension(1)} solid ${theme.borderLightest};
36+
border-right: ${styledDimension(1)} solid ${theme.borderLightest};
37+
background: ${theme.material};
38+
`}
3839
${({ src }) =>
3940
!src &&
4041
`

0 commit comments

Comments
 (0)