Skip to content

Commit a1cf2d2

Browse files
corwintinescorwintines
authored
Merge pull request #10608 from ethereum/dev
Release candidate v7.16.0
2 parents 5e008a0 + 9eeab16 commit a1cf2d2

File tree

178 files changed

+40177
-27118
lines changed

Some content is hidden

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

178 files changed

+40177
-27118
lines changed

‎.storybook/babel-storybook-config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export const babelConfig = {
1+
import { TransformOptions } from "@babel/core"
2+
3+
export const babelConfig: TransformOptions = {
24
sourceType: "unambiguous",
35
presets: [
46
[

‎.storybook/i18next.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import i18n, { Resource } from "i18next"
2+
import { initReactI18next } from "gatsby-plugin-react-i18next"
3+
4+
export const baseLocales = {
5+
en: { title: "English", left: "En" },
6+
zh: { title: "中国人", left: "Zh" },
7+
ru: { title: "Русский", left: "Ru" },
8+
uk: { title: "українська", left: "Uk" },
9+
}
10+
11+
// Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
12+
const ns = ["common", "page-about", "page-upgrades", "page-developers-index"]
13+
const supportedLngs = Object.keys(baseLocales)
14+
15+
/**
16+
* Taking the ns array and combining all the ids
17+
* under a single ns per language, set to the default of "translation"
18+
*/
19+
const resources: Resource = ns.reduce((acc, n) => {
20+
supportedLngs.forEach((lng) => {
21+
if (!acc[lng]) acc[lng] = {}
22+
acc[lng] = {
23+
translation: {
24+
...acc[lng].translation,
25+
...require(`../src/intl/${lng}/${n}.json`),
26+
},
27+
}
28+
})
29+
return acc
30+
}, {})
31+
32+
i18n.use(initReactI18next).init({
33+
debug: true,
34+
fallbackLng: "en",
35+
interpolation: { escapeValue: false },
36+
react: { useSuspense: false },
37+
supportedLngs,
38+
resources,
39+
})
40+
41+
export default i18n

‎.storybook/main.js renamed to ‎.storybook/main.ts

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
const { propNames } = require("@chakra-ui/react")
1+
import { StorybookConfig } from "@storybook/react-webpack5"
2+
import { propNames } from "@chakra-ui/react"
3+
import { babelConfig } from "./babel-storybook-config"
24

3-
const { babelConfig } = require("./babel-storybook-config")
4-
5-
module.exports = {
5+
const config: StorybookConfig = {
66
stories: ["../src/components/**/*.stories.tsx"],
77
addons: [
88
"@storybook/addon-links",
@@ -11,9 +11,10 @@ module.exports = {
1111
// https://storybook.js.org/addons/@storybook/addon-a11y/
1212
"@storybook/addon-a11y",
1313
"@chakra-ui/storybook-addon",
14+
"storybook-react-i18next",
1415
],
1516
staticDirs: ["../static"],
16-
babel: async (options) => ({
17+
babel: async () => ({
1718
...babelConfig,
1819
}),
1920
framework: {
@@ -27,30 +28,30 @@ module.exports = {
2728
},
2829
features: {},
2930
webpackFinal: async (config) => {
30-
const isRuleExist =
31-
config.module && config.module.rules && config.module.rules.length
32-
if (isRuleExist) {
33-
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
34-
config.module.rules[0].exclude = [
35-
/node_modules\/(?!(gatsby|gatsby-script)\/)/,
36-
]
37-
38-
// Remove core-js to prevent issues with Storybook
39-
config.module.rules[0].exclude = [/core-js/]
40-
}
41-
4231
if (
43-
isRuleExist &&
44-
config.module.rules[0].use &&
45-
config.module.rules[0].use.length
32+
config.module != undefined &&
33+
config.module.rules != undefined &&
34+
config.module.rules[0] !== "..."
4635
) {
47-
// Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
48-
config.module.rules[0].use[0].options.plugins.push(
49-
require.resolve("babel-plugin-remove-graphql-queries")
50-
)
36+
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
37+
config.module.rules[0].use = [
38+
{
39+
loader: require.resolve("babel-loader"),
40+
options: {
41+
presets: [
42+
// use @babel/preset-react for JSX and env (instead of staged presets)
43+
require.resolve("@babel/preset-react"),
44+
require.resolve("@babel/preset-env"),
45+
],
46+
plugins: [
47+
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
48+
require.resolve("babel-plugin-remove-graphql-queries"),
49+
],
50+
},
51+
},
52+
]
5153
}
5254

53-
config.resolve.mainFields = ["browser", "module", "main"]
5455
return config
5556
},
5657
typescript: {
@@ -83,3 +84,5 @@ module.exports = {
8384
},
8485
},
8586
}
87+
88+
export default config

‎.storybook/preview.js renamed to ‎.storybook/preview.ts

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1+
import { Preview } from "@storybook/react"
12
import { action } from "@storybook/addon-actions"
23

4+
import i18n, { baseLocales } from "./i18next"
35
import theme from "../src/@chakra-ui/gatsby-plugin/theme"
46

5-
import "../static/fonts/inter-font-face.css"
6-
import "../static/fonts/ibm-plex-font-face.css"
7-
87
const chakraBreakpointArray = Object.entries(theme.breakpoints)
98

109
// Gatsby's Link overrides:
@@ -26,42 +25,48 @@ window.___navigate = (pathname) => {
2625
action("NavigateTo:")(pathname)
2726
}
2827

29-
export const parameters = {
30-
actions: { argTypesRegex: "^on[A-Z].*" },
31-
backgrounds: {
32-
disable: true,
28+
const preview: Preview = {
29+
globals: {
30+
locale: "en",
31+
locales: baseLocales,
3332
},
34-
controls: {
35-
matchers: {
36-
color: /(background|color)$/i,
37-
date: /Date$/,
33+
parameters: {
34+
i18n,
35+
actions: { argTypesRegex: "^on[A-Z].*" },
36+
controls: {
37+
matchers: {
38+
color: /(background|color)$/i,
39+
date: /Date$/,
40+
},
3841
},
39-
},
40-
backgrounds: {
41-
disable: true,
42-
},
43-
chakra: {
44-
theme,
45-
},
46-
layout: "centered",
47-
// Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
48-
viewport: {
49-
viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
50-
const [token, key] = currVal
42+
backgrounds: {
43+
disable: true,
44+
},
45+
chakra: {
46+
theme,
47+
},
48+
layout: "centered",
49+
// Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
50+
viewport: {
51+
viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
52+
const [token, key] = currVal
5153

52-
// Unnecessary breakpoint
53-
if (token === "base") return { ...prevVal }
54+
// Unnecessary breakpoint
55+
if (token === "base") return { ...prevVal }
5456

55-
return {
56-
...prevVal,
57-
[token]: {
58-
name: token,
59-
styles: {
60-
width: key,
61-
height: "600px",
57+
return {
58+
...prevVal,
59+
[token]: {
60+
name: token,
61+
styles: {
62+
width: key,
63+
height: "600px",
64+
},
6265
},
63-
},
64-
}
65-
}, {}),
66+
}
67+
}, {}),
68+
},
6669
},
6770
}
71+
72+
export default preview

‎docs/best-practices.md

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -102,45 +102,58 @@ export default ComponentName
102102

103103
## Styling
104104

105-
- `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
106-
- We use [emotion](https://emotion.sh/)
105+
We use [Chakra UI](https://chakra-ui.com/).
107106

108-
- Tagged template literals are used to style custom components
107+
`src/@chakra-ui/gatsby-plugin/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc.
109108

110-
```tsx
111-
// Example of styling syntax using emotion
112-
113-
import styled from "@emotion/styled"
114-
115-
const GenericButton = styled.div`
116-
width: 200px;
117-
height: 50px;
118-
`
119-
const PrimaryButton = styled(GenericButton)`
120-
background: blue;
121-
`
122-
const SecondaryButton = styled(GenericButton)`
123-
background: red;
124-
`
125-
126-
// These are each components, capitalized by convention, and can be used within JSX code
127-
// ie: <PrimaryButton>Text</PrimaryButton>
128-
```
109+
- Wrappers or layout divs
129110

130-
- Values from `src/theme.ts` are automatically passed as a prop object to styled components
111+
Use the [native layouts components](https://chakra-ui.com/docs/components/box)
131112

132-
```tsx
133-
// Example of theme.ts usage
113+
```tsx
114+
<Stack direction='row'>
115+
```
134116

135-
import styled from "@emotion/styled"
117+
Center things using the `<Center />` component
136118

137-
const Container = styled.div`
138-
background: ${(props) => props.theme.colors.background};
139-
@media (max-width: ${(props) => props.theme.breakpoints.s}) {
140-
font-size: #{(props) => props.theme.fontSized.s};
141-
}
142-
`
143-
```
119+
```tsx
120+
<Center h="100px">
121+
```
122+
123+
- Group buttons using `<ButtonGroup />` or `<Wrap />`
124+
125+
```tsx
126+
<ButtonGroup variant='outline' spacing={2}>
127+
<Button>Button 1</Button>
128+
<Button>Button 2</Button>
129+
</ButtonGroup>
130+
131+
// or
132+
<Wrap spacing={2}>
133+
<WrapItem><Button variant="outline">Button 1</Button></WrapItem>
134+
<WrapItem><Button variant="outline">Button 2</Button></WrapItem>
135+
</Wrap>
136+
```
137+
138+
- Breakpoints
139+
140+
Use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/theme#breakpoints).
141+
142+
```tsx
143+
<Container display={{ base: "block", sm: "flex" }} />
144+
```
145+
146+
- Theme colors
147+
148+
```tsx
149+
<Text color="primary.base" bg="background.base" />
150+
```
151+
152+
> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts)
153+
154+
> Note 2: all the previous colors defined in the old theme `src/theme.ts` were
155+
> ported into the new theme for compatibility reasons. Those colors will
156+
> transition out of the codebase as we adopt the DS colors.
144157

145158
- [Framer Motion](https://www.framer.com/motion/) - An open source and production-ready motion library for React on the web, used for our animated designs
146159
- **Emojis**: We use [Twemoji](https://twemoji.twitter.com/), an open-source emoji set created by Twitter. These are hosted by us, and used to provide a consistent experience across operating systems.
@@ -154,29 +167,14 @@ import Emoji from "./Emoji"
154167
```
155168

156169
- **Icons**: We use [React Icons](https://react-icons.github.io/react-icons/)
157-
- `src/components/Icon.ts` is the component used to import icons to be used
158-
- If an icon you want to use is not listed you will need to add it to this file
159-
160-
`src/components/Icon.ts`:
161-
162-
```tsx
163-
// Example of how to add new icon not listed
164-
import { ZzIconName } from "react-icons/zz"
165-
166-
// Then add to IconContext.Provider children:
167-
{
168-
name === "alias" && <ZzIconName />
169-
}
170-
```
171-
172-
From React component:
170+
with [Chakra UI Icon component](https://chakra-ui.com/docs/components/icon/usage)
173171

174172
```tsx
175-
// Example of icon use
176-
import Icon from "./Icon"
173+
import { Icon } from "@chakra-ui/react"
174+
import { BsQuestionSquareFill } from "react-icons/bs"
177175
178-
// Within JSX:
179-
;<Icon name="alias" />
176+
// wrap your imported icon with the `Icon` component from Chakra UI
177+
;<Icon as={BsQuestionSquareFill} />
180178
```
181179

182180
## Image loading and API calls using GraphQL

0 commit comments

Comments
 (0)