Skip to content

Commit 1ac89e5

Browse files
matthprostmatthprost
authored
feat: split theme into another package (#2247)
* feat: split theme into another package * fix: export more parameters into themes * fix: add ingore themes package into codecoverage
1 parent 353f3b8 commit 1ac89e5

16 files changed

+203
-61
lines changed

‎codecov.yml

+4
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,7 @@ comment:
2323
layout: "reach,diff,flags,files,footer"
2424
behavior: default
2525
require_changes: no
26+
27+
ignore:
28+
- "packages/themes"
29+
- "packages/ui/src/theme/index.ts"

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"test:a11y": "LC_ALL=en_US.UTF-8 jest --config .jest/a11y.config.ts",
3737
"prepare": "husky install",
3838
"size": "pnpm run build && size-limit",
39-
"tokens:update": "./scripts/figma-synchronise-tokens.sh https://raw.githubusercontent.com/scaleway/design-tokens/main/tokens.json && pnpm prettier --write src/theme/tokens",
39+
"tokens:update": "./scripts/figma-synchronise-tokens.sh https://raw.githubusercontent.com/scaleway/design-tokens/main/tokens.json && pnpm prettier --write packages/themes/src/themes/console",
4040
"chromatic": "chromatic --exit-zero-on-changes"
4141
},
4242
"lint-staged": {

‎packages/themes/.eslintrc.cjs

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const { join } = require('path')
2+
3+
module.exports = {
4+
rules: {
5+
'import/no-extraneous-dependencies': [
6+
'error',
7+
{ packageDir: [__dirname, join(__dirname, '../../')] },
8+
],
9+
},
10+
}

‎packages/themes/.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/*
2+
!/dist/**/*.js
3+
*.test.js

‎packages/themes/README.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Scaleway UI
2+
3+
[![npm version](https://badge.fury.io/js/%40scaleway%2Fui.svg)](https://badge.fury.io/js/%40scaleway%2Fui)
4+
5+
Scaleway UI is a set of React components and utilities to build fast application.
6+
7+
> :warning: This library is still WIP. We are actively working on it. Our goal is to have an easy-to-use UI system. This includes an exhaustive documentation, improved DX, confidence in testing and a lot of refactoring to have consistency across our components.
8+
9+
> :warning: We are going to break a lot of things towards V1. This library is not yet production ready.
10+
11+
📝 You can still participate in its development and [start contributing](/CONTRIBUTING.md) to it.
12+
13+
## Installation
14+
15+
```sh
16+
$ pnpm add @scaleway/ui @emotion/react @emotion/styled
17+
```
18+
19+
### Usage
20+
21+
```js
22+
import { theme, normalize, Button } from '@scaleway/ui'
23+
import { Global, css, ThemeProvider } from '@emotion/react'
24+
25+
const App = () => (
26+
<ThemeProvider theme={theme}>
27+
<Global styles={css`${normalize()}`}>
28+
<Button variant="primary" onClick={() => console.log('clicked')}>
29+
Click Me
30+
</Button>
31+
</ThemeProvider>
32+
)
33+
```
34+
35+
N.B. To allow typescript theme typings with `@emotion/styled` components,
36+
you'll have to define the `@emotion/react` module `Theme` interface in your project.
37+
38+
Example, in a `global.d.ts` file:
39+
40+
- Declaration to use the default Scaleway theme
41+
42+
```ts
43+
declare module '@emotion/react' {
44+
import type { SCWUITheme } from '@scaleway/ui'
45+
// https://emotion.sh/docs/typescript#define-a-theme
46+
// eslint-disable-next-line @typescript-eslint/no-empty-interface
47+
export interface Theme extends SCWUITheme {}
48+
}
49+
```
50+
51+
- Declaration to use your custom theme
52+
53+
```ts
54+
import type { MyTheme } from './src/theme'
55+
56+
declare module '@emotion/react' {
57+
// https://emotion.sh/docs/typescript#define-a-theme
58+
// eslint-disable-next-line @typescript-eslint/no-empty-interface
59+
export interface Theme extends MyTheme {}
60+
}
61+
```
62+
63+
## Documentation
64+
65+
Checkout our [documentation website](https://storybook.ui.scaleway.com/).

‎packages/themes/package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "@scaleway/themes",
3+
"version": "1.0.0",
4+
"description": "Scaleway Themes",
5+
"homepage": "https://github.com/scaleway/scaleway-ui#readme",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/scaleway/scaleway-ui",
9+
"directory": "packages/themes"
10+
},
11+
"keywords": [
12+
"themes",
13+
"ui"
14+
],
15+
"license": "Apache-2.0",
16+
"publishConfig": {
17+
"access": "public"
18+
},
19+
"engines": {
20+
"node": ">=18.x",
21+
"pnpm": ">=7.0.0"
22+
},
23+
"os": [
24+
"darwin",
25+
"linux"
26+
],
27+
"sideEffects": false,
28+
"main": "dist/index.js",
29+
"module": "dist/index.js",
30+
"jsnext:main": "dist/index.js",
31+
"types": "dist/index.d.ts"
32+
}

‎packages/themes/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { consoleLightTheme, consoleDarkTheme } from './themes'

‎packages/ui/src/theme/tokens/dark.ts ‎packages/themes/src/themes/console/dark.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* This file is automatically generated from /scripts/figma-synchronise-tokens.sh.
44
* PLEASE DO NOT EDIT HERE
55
*/
6-
export default {
6+
export const darkTheme = {
77
colors: {
88
danger: {
99
background: '#482037',
@@ -197,7 +197,9 @@ export default {
197197
drawer: '0px 0px 40px 10px #0000008C',
198198
dropdown: '0px 4px 24px 6px #00000066',
199199
focusDanger: '0px 0px 0px 3px #E24B7040',
200+
focusInfo: '0px 0px 0px 3px rgba(73,142,234,0.25)',
200201
focusPrimary: '0px 0px 0px 3px #CE80FF40',
202+
focusSuccess: '0px 0px 0px 3px rgba(31,218,175,0.25)',
201203
focusWarning: '0px 0px 0px 3px #FF8C6940',
202204
hoverDanger: '0px 4px 16px 4px #482037CC',
203205
hoverPrimary: '0px 4px 16px 4px #2D2242CC',

‎packages/themes/src/themes/console/index.ts

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { darkTheme } from './dark'
2+
import { lightTheme } from './light'
3+
4+
const radii = {
5+
none: '0',
6+
default: '4px',
7+
large: '8px',
8+
circle: '100%',
9+
}
10+
11+
const space = {
12+
0: '0',
13+
0.25: '2px',
14+
0.5: '4px',
15+
0.75: '6px',
16+
1: '8px',
17+
2: '16px',
18+
2.25: '18px',
19+
3: '24px',
20+
4: '32px',
21+
5: '40px',
22+
6: '48px',
23+
7: '56px',
24+
8: '64px',
25+
9: '72px',
26+
}
27+
28+
const screens = {
29+
xsmall: 0,
30+
small: 576,
31+
medium: 768,
32+
large: 992,
33+
xlarge: 1200,
34+
}
35+
36+
export const consoleLightTheme = {
37+
radii,
38+
space,
39+
screens,
40+
...lightTheme,
41+
}
42+
43+
export const consoleDarkTheme = {
44+
radii,
45+
space,
46+
screens,
47+
...darkTheme,
48+
}

‎packages/ui/src/theme/tokens/light.ts ‎packages/themes/src/themes/console/light.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* This file is automatically generated from /scripts/figma-synchronise-tokens.sh.
44
* PLEASE DO NOT EDIT HERE
55
*/
6-
export default {
6+
export const lightTheme = {
77
colors: {
88
danger: {
99
background: '#ffe1e7',
@@ -197,7 +197,9 @@ export default {
197197
drawer: '0px 0px 40px 10px #151A2D5C',
198198
dropdown: '0px 4px 24px 6px #D4DAE766',
199199
focusDanger: '0px 0px 0px 3px #DD325240',
200+
focusInfo: '0px 0px 0px 3px rgba(63,110,216,0.25)',
200201
focusPrimary: '0px 0px 0px 3px #4F059940',
202+
focusSuccess: '0px 0px 0px 3px rgba(34,200,162,0.25)',
201203
focusWarning: '0px 0px 0px 3px #FF8C6940',
202204
hoverDanger: '0px 4px 16px 4px #FFE1E7CC',
203205
hoverPrimary: '0px 4px 16px 4px #EEEEFFCC',

‎packages/themes/src/themes/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { consoleLightTheme, consoleDarkTheme } from './console'

‎packages/themes/tsconfig.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"baseUrl": "."
5+
},
6+
"include": [
7+
"src",
8+
],
9+
"exclude": ["node_modules", "coverage", "dist"]
10+
}

‎packages/ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"@nivo/scales": "0.80.0",
6565
"@nivo/tooltip": "0.80.0",
6666
"@scaleway/random-name": "4.0.1",
67+
"@scaleway/themes": "workspace:*",
6768
"@scaleway/use-media": "2.0.0",
6869
"deepmerge": "4.3.0",
6970
"prop-types": "15.8.1",

‎packages/ui/src/theme/index.ts

+14-56
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,13 @@
1+
import { consoleDarkTheme, consoleLightTheme } from '@scaleway/themes'
12
import deepmerge from 'deepmerge'
2-
import dark from './tokens/dark'
3-
import light from './tokens/light'
43

5-
const radii = {
6-
none: '0',
7-
default: '4px',
8-
large: '8px',
9-
circle: '100%',
10-
}
11-
12-
const space = {
13-
0: '0',
14-
0.25: '2px',
15-
0.5: '4px',
16-
0.75: '6px',
17-
1: '8px',
18-
2: '16px',
19-
2.25: '18px',
20-
3: '24px',
21-
4: '32px',
22-
5: '40px',
23-
6: '48px',
24-
7: '56px',
25-
8: '64px',
26-
9: '72px',
27-
}
4+
export type Spaces = keyof typeof consoleLightTheme.space
285

29-
export type Spaces = keyof typeof space
6+
export type ScreenSize = keyof typeof consoleLightTheme.screens
307

31-
const { colors, shadows, typography } = light
8+
type SCWUITheme = typeof consoleLightTheme
329

33-
const screens = {
34-
xsmall: 0,
35-
small: 576,
36-
medium: 768,
37-
large: 992,
38-
xlarge: 1200,
39-
}
40-
export type ScreenSize = keyof typeof screens
41-
42-
const theme = {
43-
colors,
44-
radii,
45-
screens,
46-
shadows,
47-
space,
48-
typography,
49-
}
50-
51-
type SCWUITheme = typeof theme
10+
const { colors, shadows, typography, space, radii, screens } = consoleLightTheme
5211

5312
type RecursivePartial<T> = {
5413
[P in keyof T]?: RecursivePartial<T[P]>
@@ -60,20 +19,19 @@ type RecursivePartial<T> = {
6019
* @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
6120
*/
6221
const extendTheme = (extendedTheme: RecursivePartial<SCWUITheme>) =>
63-
deepmerge(theme, extendedTheme) as SCWUITheme
64-
65-
const lightTheme: SCWUITheme = theme
66-
67-
const darkTheme = extendTheme(dark)
22+
deepmerge(consoleLightTheme, extendedTheme) as SCWUITheme
6823

6924
// This type exclude overlay and secondary color
70-
type Color = Exclude<keyof typeof colors, 'overlay' | 'secondary'>
25+
type Color = Exclude<
26+
keyof typeof consoleLightTheme.colors,
27+
'overlay' | 'secondary'
28+
>
7129

72-
const SENTIMENTS = Object.keys(colors).filter(
30+
const SENTIMENTS = Object.keys(consoleLightTheme.colors).filter(
7331
sentiment => sentiment !== 'overlay' && sentiment !== 'secondary',
7432
) as Array<Color>
7533

76-
const SENTIMENTS_WITHOUT_NEUTRAL = Object.keys(colors).filter(
34+
const SENTIMENTS_WITHOUT_NEUTRAL = Object.keys(consoleLightTheme.colors).filter(
7735
sentiment =>
7836
sentiment !== 'overlay' &&
7937
sentiment !== 'secondary' &&
@@ -88,11 +46,11 @@ export {
8846
space,
8947
radii,
9048
screens,
91-
darkTheme,
49+
consoleDarkTheme as darkTheme,
9250
extendTheme,
9351
SENTIMENTS,
9452
SENTIMENTS_WITHOUT_NEUTRAL,
9553
typography,
9654
}
9755

98-
export default lightTheme
56+
export default consoleLightTheme

‎pnpm-lock.yaml

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/figma-synchronise-tokens.sh

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#!/bin/bash
22

33
if [ -z "$1" ]; then
4-
echo "Error: one parameter is missing, you should pass an url that contains JSON tokens as parameter: ./figma-synchronisetokens.sh [URL]"
4+
echo "Error: one parameter is missing, you should pass an url that contains JSON tokens as parameter: ./figma-synchronise-tokens.sh [URL]"
55
exit 1
66
fi
77

@@ -99,5 +99,5 @@ do
9999
* This file is automatically generated from /scripts/figma-synchronise-tokens.sh.
100100
* PLEASE DO NOT EDIT HERE
101101
*/
102-
export default "; echo "${FINAL_RESULT}") > packages/ui/src/theme/tokens/"${i}".ts
102+
export const "${i}"Theme = "; echo "${FINAL_RESULT}") > packages/themes/src/themes/console/"${i}".ts
103103
done

0 commit comments

Comments
 (0)