Skip to content

Commit 566c51d

Browse files
lisalupilisalupi
authored
refactor: remove emotion from examples (#5765)
* refactor: remove emotion from examples * fix: remove emotion from nextjs * fix: use scss for next example * fix: feedback
1 parent 5747647 commit 566c51d

35 files changed

+676
-655
lines changed

‎examples/next-app-router/app/Container.tsx‎

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

‎examples/next-app-router/app/GlobalStyles.tsx‎

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

‎examples/next-app-router/app/layout.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import './globals.css'
44
import { ThemeRegistry } from '@ultraviolet/nextjs'
55
import { consoleLightTheme } from '@ultraviolet/themes'
66
import type { ReactNode } from 'react'
7-
import { GlobalStyles } from './GlobalStyles'
7+
import '@ultraviolet/fonts/fonts.css'
8+
import '@ultraviolet/ui/styles'
9+
import '@ultraviolet/themes/global'
810

911
// oxlint-disable-next-line react/only-export-components
1012
export const metadata: Metadata = {
@@ -20,10 +22,7 @@ export default function RootLayout({
2022
return (
2123
<html lang="en">
2224
<body>
23-
<ThemeRegistry theme={consoleLightTheme}>
24-
<GlobalStyles />
25-
{children}
26-
</ThemeRegistry>
25+
<ThemeRegistry theme={consoleLightTheme}>{children}</ThemeRegistry>
2726
</body>
2827
</html>
2928
)

‎examples/next-app-router/app/page.tsx‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
import { Alert, Stack, Text } from '@ultraviolet/ui'
2-
import { Container } from './Container'
2+
import '@ultraviolet/fonts/fonts.css'
3+
import '@ultraviolet/ui/styles'
4+
import '@ultraviolet/themes/global'
35

46
export default function Home() {
57
return (
6-
<Container>
7-
<main>
8-
<Stack gap={2}>
9-
<Text as="h1" variant="heading">
10-
Welcome to Ultraviolet!
11-
</Text>
12-
<Text as="p" variant="body">
13-
Ultraviolet is a powerful and flexible UI library for building
14-
modern web applications.
15-
</Text>
16-
<Text as="p" variant="body">
17-
Ultraviolet works with Next.js app router by providing{' '}
18-
<Text as="code" variant="code">{`<ThemeRegistry />`}</Text>.
19-
</Text>
20-
<Text as="p" variant="body">
21-
All components will work seamlessly with Next.js app router.
22-
</Text>
23-
<Alert sentiment="warning" title="Known limitations">
24-
<Stack direction="column" width="100%">
25-
<ul>
26-
<Text as="li" variant="body">
27-
Components are not server component ready they all have{' '}
28-
<Text as="code" variant="code">
29-
&quot;use client&quot;
30-
</Text>{' '}
31-
on top.
32-
</Text>
33-
<Text as="li" variant="body">
34-
When using{' '}
35-
<Text as="code" variant="code">
36-
styled
37-
</Text>{' '}
38-
from{' '}
39-
<Text as="code" variant="code">
40-
emotion/styled
41-
</Text>{' '}
42-
will require you to add{' '}
43-
<Text as="code" variant="code">
44-
&quot;use client&quot;
45-
</Text>{' '}
46-
on top of your component file.
47-
</Text>
48-
</ul>
49-
</Stack>
50-
</Alert>
51-
</Stack>
52-
</main>
53-
</Container>
8+
<main>
9+
<Stack gap={2}>
10+
<Text as="h1" variant="heading">
11+
Welcome to Ultraviolet!
12+
</Text>
13+
<Text as="p" variant="body">
14+
Ultraviolet is a powerful and flexible UI library for building modern
15+
web applications.
16+
</Text>
17+
<Text as="p" variant="body">
18+
Ultraviolet works with Next.js app router by providing{' '}
19+
<Text as="code" variant="code">{`<ThemeRegistry />`}</Text>.
20+
</Text>
21+
<Text as="p" variant="body">
22+
All components will work seamlessly with Next.js app router.
23+
</Text>
24+
<Alert sentiment="warning" title="Known limitations">
25+
<Stack direction="column" width="100%">
26+
<ul>
27+
<Text as="li" variant="body">
28+
Components are not server component ready they all have{' '}
29+
<Text as="code" variant="code">
30+
&quot;use client&quot;
31+
</Text>{' '}
32+
on top.
33+
</Text>
34+
<Text as="li" variant="body">
35+
When using{' '}
36+
<Text as="code" variant="code">
37+
styled
38+
</Text>{' '}
39+
from{' '}
40+
<Text as="code" variant="code">
41+
emotion/styled
42+
</Text>{' '}
43+
will require you to add{' '}
44+
<Text as="code" variant="code">
45+
&quot;use client&quot;
46+
</Text>{' '}
47+
on top of your component file.
48+
</Text>
49+
</ul>
50+
</Stack>
51+
</Alert>
52+
</Stack>
53+
</main>
5454
)
5555
}

‎examples/next-app-router/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@
99
"start": "next start"
1010
},
1111
"dependencies": {
12-
"@emotion/react": "11.14.0",
13-
"@emotion/styled": "11.14.1",
1412
"@scaleway/regex": "5.6.0",
1513
"@ultraviolet/fonts": "workspace:*",
1614
"@ultraviolet/form": "workspace:*",
1715
"@ultraviolet/icons": "workspace:*",
1816
"@ultraviolet/nextjs": "workspace:*",
17+
"@ultraviolet/themes": "workspace:*",
1918
"@ultraviolet/ui": "workspace:*",
2019
"next": "15.5.6",
2120
"react": "19.2.0",

‎examples/next/emotion.d.ts‎

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

‎examples/next/next.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ const nextConfig = () => {
99
},
1010
poweredByHeader: false,
1111
reactStrictMode: true,
12-
compiler: {
13-
emotion: true,
14-
},
1512
eslint: {
1613
ignoreDuringBuilds: true,
1714
},

‎examples/next/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@
1515
"start": "next start"
1616
},
1717
"dependencies": {
18-
"@emotion/react": "11.14.0",
19-
"@emotion/styled": "11.14.1",
2018
"@scaleway/regex": "5.6.0",
2119
"@ultraviolet/fonts": "workspace:*",
2220
"@ultraviolet/form": "workspace:*",
2321
"@ultraviolet/icons": "workspace:*",
22+
"@ultraviolet/themes": "workspace:*",
2423
"@ultraviolet/ui": "workspace:*",
2524
"next": "15.5.6",
2625
"react": "19.2.0",
2726
"react-dom": "19.2.0",
2827
"react-schemaorg": "2.0.0",
2928
"react-syntax-highlighter": "15.6.6",
3029
"react-use-clipboard": "1.0.9",
30+
"sass": "1.93.3",
3131
"schema-dts": "1.1.5"
3232
},
3333
"devDependencies": {

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import styled from '@emotion/styled'
21
import { Card as ScwUICard, Text } from '@ultraviolet/ui'
32
import Image from 'next/image'
43
import type { ReactNode } from 'react'
4+
import styles from '../../styles/component.module.scss'
55

66
type CardProps = {
77
title: string
@@ -10,16 +10,10 @@ type CardProps = {
1010
className?: string
1111
}
1212

13-
const StyledBorderedBox = styled(ScwUICard)`
14-
display: grid;
15-
grid-template-columns: fit-content(20%) 3fr;
16-
gap: ${({ theme }) => theme.space['2']};
17-
height: auto;
18-
min-width: 350px;
19-
`
20-
2113
const Card = ({ title, description, icon, className }: CardProps) => (
22-
<StyledBorderedBox className={className}>
14+
<ScwUICard
15+
className={`${className ? `${className} ` : ''}${styles.borderedBox}`}
16+
>
2317
<div>
2418
<Image alt="icon" height={64} src={icon} width={64} />
2519
</div>
@@ -35,7 +29,7 @@ const Card = ({ title, description, icon, className }: CardProps) => (
3529
description
3630
)}
3731
</div>
38-
</StyledBorderedBox>
32+
</ScwUICard>
3933
)
4034

4135
export default Card

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

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import styled from '@emotion/styled'
21
import { useTheme } from '@ultraviolet/themes'
32
import { Stack, Tabs } from '@ultraviolet/ui'
43
import type { ReactElement } from 'react'
@@ -8,21 +7,7 @@ import {
87
dracula,
98
oneLight,
109
} from 'react-syntax-highlighter/dist/esm/styles/prism'
11-
12-
const StyledStack = styled(Stack)`
13-
background: ${({ theme }) => theme.colors.neutral.backgroundStrong};
14-
15-
span {
16-
background: ${({ theme }) => theme.colors.neutral.backgroundStrong};
17-
}
18-
19-
.react-syntax-highlighter-line-number {
20-
font-style: normal !important;
21-
}
22-
23-
padding: ${({ theme }) => `${theme.space['2']} ${theme.space['3']}`};
24-
border-radius: ${({ theme }) => theme.radii.default};
25-
`
10+
import styles from '../../styles/component.module.scss'
2611

2712
type CopyBoxProps = {
2813
children: ReactElement<CommandProps> | ReactElement<CommandProps>[]
@@ -37,7 +22,7 @@ const CopyBox = ({ children }: CopyBoxProps) => {
3722
const [tab, setTab] = useState(0)
3823

3924
return (
40-
<StyledStack gap={2}>
25+
<Stack className={styles.copyBox} gap={2}>
4126
{flatChild.length > 1 ? (
4227
<Tabs
4328
onChange={value => {
@@ -55,7 +40,7 @@ const CopyBox = ({ children }: CopyBoxProps) => {
5540
</Tabs>
5641
) : null}
5742
{flatChild[tab]}
58-
</StyledStack>
43+
</Stack>
5944
)
6045
}
6146

0 commit comments

Comments
 (0)