Skip to content

Commit 635874f

Browse files
lisalupilisalupi
committed
refactor: remove emotion from storybook and ui
1 parent 91c824a commit 635874f

File tree

62 files changed

+556
-845
lines changed

Some content is hidden

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

62 files changed

+556
-845
lines changed

‎.storybook/.babelrc‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
11
{
2-
"plugins": [
3-
[
4-
"@emotion",
5-
{
6-
"sourceMap": false,
7-
"autoLabel": "never",
8-
"labelFormat": "[filename]--[local]"
9-
}
10-
]
11-
],
2+
123
"presets": [
134
"@babel/preset-typescript",
145
[
@@ -18,8 +9,7 @@
189
[
1910
"@babel/preset-react",
2011
{
21-
"runtime": "automatic",
22-
"importSource": "@emotion/react"
12+
"runtime": "automatic"
2313
}
2414
]
2515
]

‎.storybook/components/DocsContainer.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Global, ThemeProvider } from '@emotion/react'
21
import type {
32
DocsContainerProps as BaseContainerProps} from '@storybook/addon-docs/blocks';
43
import {
@@ -8,9 +7,10 @@ import {
87
import { consoleLightTheme as lightTheme, ThemeProvider as ThemeProviderUV } from '@ultraviolet/themes'
98
import type { ReactNode } from 'react'
109
import { cloneElement, isValidElement, useState } from 'react'
11-
import { globalStyles } from './globalStyle'
1210
import '@ultraviolet/fonts/fonts.css'
1311
import { GlobalAlert } from '@ultraviolet/ui'
12+
import "../../packages/themes/dist/themes.css"
13+
import { globalStyleStoryBook } from './globalStyle.css';
1414

1515
type ExtraProps = {
1616
/**
@@ -66,8 +66,8 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
6666

6767
return (
6868
<Unstyled>
69-
<ThemeProviderUV>
70-
<ThemeProvider theme={lightTheme}>
69+
<div className={globalStyleStoryBook}>
70+
<ThemeProviderUV theme={lightTheme}>
7171
{isBeta ?
7272
<GlobalAlert
7373
buttonText="Access to Beta"
@@ -76,7 +76,6 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
7676
>
7777
A Beta version is available. Please use this version if your dependencies include the Beta release.
7878
</GlobalAlert> : null}
79-
<Global styles={[globalStyles]} />
8079
<BaseContainer context={context}>
8180
{isValidElement<ExtraProps>(children)
8281
? cloneElement(children, {
@@ -88,8 +87,7 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
8887
})
8988
: children}
9089
</BaseContainer>
91-
</ThemeProvider>
92-
</ThemeProviderUV>
90+
</ThemeProviderUV></div>
9391
</Unstyled>
9492
)
9593
}

‎.storybook/components/Page.tsx‎

Lines changed: 11 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import styled from '@emotion/styled'
21
import { linkTo } from '@storybook/addon-links'
32
import {
43
Controls,
@@ -9,59 +8,7 @@ import {
98
Title,
109
} from '@storybook/addon-docs/blocks'
1110
import { Alert, Stack, Text } from '@ultraviolet/ui'
12-
import background from '../assets/brand-background.png'
13-
14-
const TitleDecorator = styled.div`
15-
h1 {
16-
color: ${({ theme }) => theme.colors.neutral.text};
17-
font-size: ${({ theme }) => theme.typography.headingLargeStronger.fontSize};
18-
font-family: ${({ theme }) => theme.typography.headingLargeStronger.fontFamily};
19-
font-weight: ${({ theme }) => theme.typography.headingLargeStronger.weight};
20-
letter-spacing: ${({ theme }) => theme.typography.headingLargeStronger.letterSpacing};
21-
line-height: ${({ theme }) => theme.typography.headingLargeStronger.lineHeight};
22-
text-transform: ${({ theme }) => theme.typography.headingLargeStronger.textCase};
23-
text-decoration: ${({ theme }) => theme.typography.headingLargeStronger.textDecoration};
24-
padding: ${({ theme }) => theme.space[5]} ${({ theme }) => theme.space[3]};
25-
border-radius: ${({ theme }) => theme.radii.default};
26-
background-image: url(${background});
27-
background-size: cover;
28-
background-position: center;
29-
background-repeat: no-repeat;
30-
width: 100%;
31-
}
32-
`
33-
34-
const StyledH2 = styled(Text)`
35-
padding-bottom: ${({ theme }) => theme.space[1]};
36-
margin-bottom: ${({ theme }) => theme.space[2]};
37-
border-bottom: 2px solid ${({ theme }) => theme.colors.neutral.borderStronger};
38-
`
39-
40-
const StoriesDecorator = styled(Stack)`
41-
#stories {
42-
color: ${({ theme }) => theme.colors.neutral.text};
43-
font-size: ${({ theme }) => theme.typography.headingStrong.fontSize};
44-
font-family: ${({ theme }) => theme.typography.headingStrong.fontFamily};
45-
font-weight: ${({ theme }) => theme.typography.headingStrong.weight};
46-
letter-spacing: ${({ theme }) => theme.typography.headingStrong.letterSpacing};
47-
line-height: ${({ theme }) => theme.typography.headingStrong.lineHeight};
48-
text-transform: ${({ theme }) => theme.typography.headingStrong.textCase};
49-
text-decoration: ${({ theme }) => theme.typography.headingStrong.textDecoration};
50-
padding-bottom: ${({ theme }) => theme.space[1]};
51-
border-bottom: 2px solid ${({ theme }) => theme.colors.neutral.borderStronger};
52-
margin-bottom: ${({ theme }) => theme.space[2]};
53-
}
54-
`
55-
56-
const StoriesThemes = styled.div`
57-
.docs-story > div {
58-
padding: 0;
59-
}
60-
61-
.css-xzp052 .innerZoomElementWrapper > * {
62-
border: 0 !important;
63-
}
64-
`
11+
import { h2Decorator, storiesDecorator, storiesTheme, titleDecorator } from './globalStyle.css'
6512

6613
type PageProps = {
6714
deprecated?: boolean
@@ -78,12 +25,12 @@ const Page = ({
7825
hideArgsTable,
7926
experimental,
8027
}: PageProps) => (
81-
<StoriesThemes>
28+
<div className={storiesTheme}>
8229
<Stack gap={1}>
8330
<div>
84-
<TitleDecorator>
31+
<div className={titleDecorator}>
8532
<Title />
86-
</TitleDecorator>
33+
</div>
8734
{deprecated ? (
8835
<Alert
8936
title="Deprecated component"
@@ -107,29 +54,29 @@ const Page = ({
10754
</div>
10855
<Stack gap={2}>
10956
<Stack>
110-
<StyledH2 as="h2" variant="headingStrong">
57+
<Text as="h2" className={h2Decorator} variant="headingStrong">
11158
Overview
112-
</StyledH2>
59+
</Text>
11360
<Subtitle />
11461
<Description />
11562
</Stack>
11663
<div>
11764
<Primary />
11865
{!hideArgsTable ? (
11966
<>
120-
<StyledH2 as="h2" variant="headingStrong">
67+
<Text as="h2" className={h2Decorator} variant="headingStrong">
12168
Props
122-
</StyledH2>
69+
</Text>
12370
<Controls />
12471
</>
12572
) : null}
12673
</div>
127-
<StoriesDecorator>
74+
<Stack className={storiesDecorator}>
12875
<Stories />
129-
</StoriesDecorator>
76+
</Stack>
13077
</Stack>
13178
</Stack>
132-
</StoriesThemes>
79+
</div>
13380
)
13481

13582
export default Page

‎.storybook/components/globalStyle.css.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { consoleLightTheme as theme } from '@ultraviolet/themes'
2+
import { globalStyle, style } from '@vanilla-extract/css'
3+
import background from '../assets/brand-background.png'
4+
5+
export const globalStyleStoryBook = style({
6+
fontFamily: "'Inter', sans-serif",
7+
fontSize: 16,
8+
9+
color: theme.colors.neutral.text
10+
})
11+
12+
globalStyle(`${globalStyleStoryBook} p`, { margin: 0 })
13+
14+
15+
globalStyle(`${globalStyleStoryBook} h2, ${globalStyleStoryBook} h3, ${globalStyleStoryBook} h4, ${globalStyleStoryBook} h5, ${globalStyleStoryBook} h6`, { margin: `${theme.space[2]} 0 ${theme.space[1]} 0`,
16+
})
17+
18+
globalStyle(`${globalStyleStoryBook} .sb-anchor h1, ${globalStyleStoryBook} .sb-anchor h2, ${globalStyleStoryBook} .sb-anchor h3, ${globalStyleStoryBook} .sb-anchor h4, ${globalStyleStoryBook} .sb-anchor h5, ${globalStyleStoryBook} .sb-anchor h6`, { margin: "inherit" })
19+
20+
globalStyle(`${globalStyleStoryBook} body`, {
21+
fontFamily: "'Inter', sans-serif",
22+
fontSize: 16,
23+
fontWeight: 400,
24+
lineHeight: 24,
25+
color: theme.colors.neutral.text
26+
})
27+
28+
29+
globalStyle(`${globalStyleStoryBook} h1, h2, h3, h4, h5, h3`, {
30+
color: theme.colors.neutral.text
31+
})
32+
33+
globalStyle(`${globalStyleStoryBook} .toc-list-item::before`, { borderColor: `${theme.colors.primary.border} !important` })
34+
35+
globalStyle(`${globalStyleStoryBook} .toc-list-item`, { paddingBottom: "3px !important" })
36+
37+
globalStyle(`${globalStyleStoryBook} .toc-list-item.is-active-li>a`, { color: `${theme.colors.primary.text} !important` })
38+
39+
export const titleDecorator = style({})
40+
41+
globalStyle(`${titleDecorator} > h1`, {
42+
color: theme.colors.neutral.text,
43+
fontSize: theme.typography.headingLargeStronger.fontSize,
44+
fontFamily: theme.typography.headingLargeStronger.fontFamily,
45+
fontWeight: theme.typography.headingLargeStronger.weight,
46+
letterSpacing: theme.typography.headingLargeStronger.letterSpacing,
47+
lineHeight: theme.typography.headingLargeStronger.lineHeight,
48+
textDecoration: theme.typography.headingLargeStronger.textDecoration,
49+
padding: `${theme.space[5]} ${theme.space[3]}`,
50+
borderRadius: theme.radii.default,
51+
backgroundImage: `url(${background})`,
52+
backgroundSize: "cover",
53+
backgroundPosition: "center",
54+
backgroundRepeat: 'no-repeat',
55+
width: "100%",
56+
})
57+
58+
export const h2Decorator = style({
59+
paddingBottom: theme.space[1],
60+
marginBottom: `${theme.space[2]} !important`,
61+
borderBottom: `2px solid ${theme.colors.neutral.borderStronger}`
62+
})
63+
64+
export const storiesDecorator = style({})
65+
66+
globalStyle(`${storiesDecorator} #stories`, {
67+
color: theme.colors.neutral.text,
68+
fontSize: theme.typography.headingStrong.fontSize,
69+
fontFamily: theme.typography.headingStrong.fontFamily,
70+
fontWeight: theme.typography.headingStrong.weight,
71+
letterSpacing: theme.typography.headingStrong.letterSpacing,
72+
lineHeight: theme.typography.headingStrong.lineHeight,
73+
textDecoration: theme.typography.headingStrong.textDecoration,
74+
paddingBottom: theme.space[1],
75+
borderBottom: `2px solid ${theme.colors.neutral.borderStronger}`,
76+
marginBottom: theme.space[2],
77+
})
78+
export const storiesTheme = style({})
79+
80+
globalStyle(`${storiesTheme} .docs-story > div`, { padding: 0})
81+
82+
globalStyle(`${storiesTheme} .css-xzp052 .innerZoomElementWrapper > *`, { border: "0 !important"})

‎.storybook/components/globalStyle.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎.storybook/preview.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Global, ThemeProvider } from '@emotion/react'
2-
import { withThemeFromJSXProvider } from '@storybook/addon-themes'
31
import type { Preview, StoryFn } from '@storybook/react-vite'
42
import { themes } from 'storybook/theming'
53
import {
@@ -10,9 +8,9 @@ import {
108
} from '@ultraviolet/themes'
119
import DocsContainer from './components/DocsContainer'
1210
import Page from './components/Page'
13-
import { globalStyles } from './components/globalStyle'
1411
import { dark, light } from './storybookThemes'
1512
import '@ultraviolet/fonts/fonts.css'
13+
1614
import { scan } from "react-scan"
1715

1816
const BREAKPOINT_ORDER = [
@@ -166,16 +164,7 @@ const decorators = [
166164
</ThemeProviderUI>
167165
</>
168166
)}, // Storybook is broken without this please refer to this issue: https://github.com/storybookjs/storybook/issues/24625
169-
withThemeFromJSXProvider({
170-
themes: {
171-
light: lightTheme,
172-
dark: darkTheme,
173-
darker: darkerTheme,
174-
},
175-
defaultTheme: 'light',
176-
Provider: ThemeProvider,
177-
GlobalStyles: () => <Global styles={[globalStyles]} />,
178-
}),
167+
179168
withThemeProvider,
180169
]
181170

‎examples/next/src/components/Header.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from '@emotion/styled'
22
import { MoonIcon, SunIcon } from '@ultraviolet/icons'
33
import { useTheme } from '@ultraviolet/themes'
4-
import { Breakpoint, Toggle } from '@ultraviolet/ui'
4+
import { Toggle } from '@ultraviolet/ui'
55
import { APP_MAX_WIDTH } from '../constants'
66
import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
77
import Logo from './Logo'
@@ -44,9 +44,7 @@ const TopBar = () => {
4444
<HeaderRow>
4545
<Logo />
4646
<HorizontalStack>
47-
<Breakpoint up="medium">
48-
<GithubAndDocumentationButtons />
49-
</Breakpoint>
47+
<GithubAndDocumentationButtons />
5048
<SunIcon size="small" />
5149
<Toggle checked={theme === 'dark'} name="darkMode" />
5250
<MoonIcon size="small" />

‎examples/next/src/pages/advanced/Introduction.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import { Breakpoint, down, Stack, Text } from '@ultraviolet/ui'
2+
import { down, Stack, Text } from '@ultraviolet/ui'
33
import Image from 'next/image'
44
import swA11y from '../../assets/icons/icon-scaleway-a11y.svg'
55
import swCustom from '../../assets/icons/icon-scaleway-custom.svg'
@@ -20,9 +20,7 @@ const Introduction = () => (
2020
gap={2}
2121
justifyContent="space-between"
2222
>
23-
<Breakpoint down="medium">
24-
<GithubAndDocumentationButtons />
25-
</Breakpoint>
23+
<GithubAndDocumentationButtons />
2624
<Stack>
2725
<Text as="h1" sentiment="primary" variant="headingLarge">
2826
Scaleway <b>UI</b>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
"@ultraviolet/fonts": "workspace:*",
138138
"@ultraviolet/themes": "workspace:*",
139139
"@ultraviolet/ui": "workspace:*",
140+
"@vanilla-extract/css": "1.17.4",
140141
"@vanilla-extract/vite-plugin": "5.1.1",
141142
"@vitejs/plugin-react": "5.0.4",
142143
"@vitest/coverage-istanbul": "3.2.4",

0 commit comments

Comments
 (0)