Skip to content

Commit 358d142

Browse files
layershifterlayershifter
authored
chore: bump dependencies, minor fixes (#4001)
* chore: bump dependencies, minor fixes * fix formatting errors * fix formatting errors * fix docs
1 parent 32365e4 commit 358d142

13 files changed

Lines changed: 247 additions & 110 deletions

File tree

‎.babel-preset.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,6 @@ const plugins = [
3939
removeImport: isUMDBuild,
4040
},
4141
],
42-
// A plugin for react-static
43-
isDocsBuild && [
44-
'universal-import',
45-
{
46-
disableWarnings: true,
47-
},
48-
],
4942
// A plugin for removal of debug in production builds
5043
isLibBuild && [
5144
'filter-imports',
@@ -79,4 +72,15 @@ module.exports = () => ({
7972
plugins: [['istanbul', { include: ['src'] }]],
8073
},
8174
},
75+
overrides: [
76+
// A workaround to avoid collisions between "babel-plugin-dynamic-import-node" & "universal-import"
77+
{
78+
test: /react-static-routes.js/,
79+
plugins: [
80+
['universal-import', { disableWarnings: true }],
81+
'@babel/plugin-transform-modules-commonjs',
82+
],
83+
presets: [['@babel/env', { modules: false }]],
84+
},
85+
],
8286
})

‎docs/src/components/CodeSnippet/CodeSnippet.js‎

Lines changed: 114 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,119 @@
1-
import { CodeSnippet as StardustCodeSnippet } from '@stardust-ui/docs-components'
1+
import _ from 'lodash'
2+
import * as Prism from 'prismjs/components/prism-core'
3+
import prettier from 'prettier/standalone'
4+
import babel from 'prettier/parser-babel'
5+
import html from 'prettier/parser-html'
6+
import PropTypes from 'prop-types'
27
import React from 'react'
38

4-
import NoSSR from '../NoSSR'
9+
// Order of PrismJS imports there is sensitive
10+
import 'prismjs/components/prism-clike'
11+
import 'prismjs/components/prism-json'
12+
import 'prismjs/components/prism-markup'
13+
import 'prismjs/components/prism-bash'
14+
import 'prismjs/components/prism-javascript'
15+
import 'prismjs/components/prism-jsx'
516

6-
const CodeSnippet = (props) => (
7-
<NoSSR>
8-
<StardustCodeSnippet {...props} />
9-
</NoSSR>
10-
)
17+
import CodeSnippetLabel from './CodeSnippetLabel'
18+
19+
const prettierConfig = {
20+
htmlWhitespaceSensitivity: 'ignore',
21+
printWidth: 100,
22+
tabWidth: 2,
23+
semi: false,
24+
singleQuote: true,
25+
trailingComma: 'all',
26+
plugins: {
27+
babel,
28+
html,
29+
},
30+
}
31+
32+
const normalizeToString = (value) => {
33+
if (Array.isArray(value)) {
34+
return value.join('\n')
35+
}
36+
37+
return _.isObject(value) ? JSON.stringify(value, null, 2) : value
38+
}
39+
40+
export const prettifyCode = (code, parser) => {
41+
const formatted = prettier.format(code, {
42+
...prettierConfig,
43+
// a narrower print width is more friendly to doc examples
44+
parser,
45+
})
46+
47+
return formatted.replace(/^;</m, '<') // remove beginning semi in JSX/HTML
48+
}
49+
50+
const formatters = {
51+
bash: (val = '') => val.replace(/^/g, '$ '),
52+
json: (val) => prettifyCode(val, 'json'),
53+
js: (val = '') => prettifyCode(val, 'babel'),
54+
jsx: (val = '') => prettifyCode(val, 'babel'),
55+
html: (val = '') => prettifyCode(val, 'html'),
56+
}
57+
58+
export const formatCode = (code, mode) => {
59+
if (!code) return ''
60+
const formatter = formatters[mode]
61+
62+
return (
63+
formatter(normalizeToString(code))
64+
// remove eof line break, they are not helpful for snippets
65+
.replace(/\n$/, '')
66+
)
67+
}
68+
69+
const CodeSnippet = React.memo((props) => {
70+
const {
71+
className,
72+
copyable = true,
73+
fitted,
74+
formattable = true,
75+
label,
76+
mode = 'jsx',
77+
value,
78+
} = props
79+
80+
const codeClassName = `language-${mode}`
81+
const code = formattable ? formatCode(value, mode) : value
82+
const codeRef = React.useRef(null)
83+
84+
React.useLayoutEffect(() => {
85+
Prism.highlightElement(codeRef.current)
86+
})
87+
88+
return (
89+
<div
90+
className={className}
91+
style={{
92+
fontSize: '12px',
93+
position: 'relative',
94+
...props.style,
95+
}}
96+
>
97+
<CodeSnippetLabel copyable={copyable} label={label} mode={mode} value={code} />
98+
99+
<pre style={{ margin: fitted ? '0' : undefined }}>
100+
<code className={codeClassName} ref={codeRef}>
101+
{code}
102+
</code>
103+
</pre>
104+
</div>
105+
)
106+
})
107+
108+
CodeSnippet.propTypes = {
109+
className: PropTypes.string,
110+
copyable: PropTypes.bool,
111+
fitted: PropTypes.bool,
112+
formattable: PropTypes.bool,
113+
label: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
114+
mode: PropTypes.oneOf(['bash', 'json', 'js', 'jsx', 'html']),
115+
style: PropTypes.object,
116+
value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
117+
}
11118

12119
export default CodeSnippet

‎docs/src/components/CodeSnippet/CodeSnippetLabel.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import PropTypes from 'prop-types'
2+
import * as React from 'react'
3+
4+
import { useCopyToClipboard } from '../CopyToClipboard'
5+
6+
const checkIcon = (
7+
<svg style={{ height: '.7rem', width: '0.7rem' }} viewBox='0 0 512 512'>
8+
<path
9+
fill='currentColor'
10+
d='M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7 c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7 c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8 c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z'
11+
/>
12+
</svg>
13+
)
14+
15+
const copyIcon = (
16+
<svg style={{ height: '.7rem', width: '0.7rem' }} viewBox='0 0 16 16'>
17+
<path d='M2,0v1v2H0v13h13v-2h2h1V1V0H3H2z M15,1v12h-2V3H3V1H15z' fill='currentColor ' />
18+
</svg>
19+
)
20+
21+
const CodeSnippetLabel = (props) => {
22+
const { copyable, label, mode, value } = props
23+
const hasLabel = label !== false
24+
25+
const [active, onCopy] = useCopyToClipboard(value)
26+
27+
return (
28+
hasLabel && (
29+
<div
30+
onClick={copyable ? onCopy : undefined}
31+
style={{
32+
border: '1px solid #ccc',
33+
color: '#ccc',
34+
cursor: copyable ? 'pointer' : 'default',
35+
display: 'flex',
36+
fontSize: '0.8rem',
37+
fontFamily: 'monospace',
38+
lineHeight: 1,
39+
padding: '0.2rem 0.35rem',
40+
position: 'absolute',
41+
right: '0.8rem',
42+
top: '0.8rem',
43+
zIndex: 100,
44+
}}
45+
title={copyable ? 'Copy' : undefined}
46+
>
47+
<div>{label || mode}</div>
48+
{copyable && <div style={{ marginLeft: '5px' }}>{active ? checkIcon : copyIcon}</div>}
49+
</div>
50+
)
51+
)
52+
}
53+
54+
CodeSnippetLabel.propTypes = {
55+
copyable: PropTypes.bool,
56+
label: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
57+
mode: PropTypes.oneOf(['bash', 'json', 'js', 'jsx', 'html']),
58+
value: PropTypes.string,
59+
}
60+
61+
export default CodeSnippetLabel

‎docs/src/components/CodeSnippet/index.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
export default from './CodeSnippet'
1+
import React from 'react'
2+
import DefaultCodeSnippet from './CodeSnippet'
3+
4+
import NoSSR from '../NoSSR'
5+
6+
const CodeSnippet = (props) => (
7+
<NoSSR>
8+
<DefaultCodeSnippet {...props} />
9+
</NoSSR>
10+
)
11+
12+
export default CodeSnippet

‎docs/src/components/ComponentDoc/ExampleEditor/ExampleEditorMenu.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,17 +89,15 @@ class ExampleEditorMenu extends PureComponent {
8989
<Button inverted compact content='Nevermind' onClick={this.resetStop} />
9090
</Popup>
9191

92-
<CopyToClipboard
93-
render={(active, onClick) => (
92+
<CopyToClipboard timeout={1000} value={sourceCode}>
93+
{(active, onClick) => (
9494
<Menu.Item
9595
icon={active ? { color: 'green', name: 'check' } : 'copy'}
9696
content='Copy'
9797
onClick={onClick}
9898
/>
9999
)}
100-
timeout={1000}
101-
value={sourceCode}
102-
/>
100+
</CopyToClipboard>
103101

104102
<Menu.Item icon='github' content='Edit' href={githubEditHref} target='_blank' />
105103
</Menu>

‎docs/src/components/CopyToClipboard.js‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,30 @@
1+
import copyToClipboard from 'copy-to-clipboard'
12
import PropTypes from 'prop-types'
23
import React from 'react'
3-
import copyToClipboard from 'copy-to-clipboard'
4-
5-
class CopyToClipboard extends React.Component {
6-
state = {
7-
active: false,
8-
}
94

10-
timeoutId
5+
export const useCopyToClipboard = (value, timeout = 3000) => {
6+
const [active, setActive] = React.useState(false)
7+
const onCopy = React.useCallback(() => {
8+
copyToClipboard(typeof value === 'function' ? value() : value)
9+
setActive(true)
1110

12-
componentWillUnmount() {
13-
clearTimeout(this.timeoutId)
14-
}
11+
const timeoutId = setTimeout(() => setActive(false), timeout)
1512

16-
handleClick = () => {
17-
const { timeout, value } = this.props
13+
return () => clearTimeout(timeoutId)
14+
}, [timeout, value])
1815

19-
clearTimeout(this.timeoutId)
20-
21-
this.setState({ active: true })
22-
this.timeoutId = setTimeout(() => {
23-
this.setState({ active: false })
24-
}, timeout)
25-
26-
copyToClipboard(value)
27-
}
16+
return [active, onCopy]
17+
}
2818

29-
render() {
30-
const { render } = this.props
31-
const { active } = this.state
19+
export const CopyToClipboard = (props) => {
20+
const { children, timeout, value } = props
21+
const [active, onCopy] = useCopyToClipboard(value, timeout)
3222

33-
return render(active, this.handleClick)
34-
}
23+
return children(active, onCopy)
3524
}
3625

3726
CopyToClipboard.propTypes = {
38-
render: PropTypes.func.isRequired,
27+
children: PropTypes.func.isRequired,
3928
timeout: PropTypes.number,
4029
value: PropTypes.string.isRequired,
4130
}

‎docs/src/components/Document.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
2727
<script
2828
src={`https://cdn.jsdelivr.net/npm/@babel/standalone@${versions.babel.standalone}/babel.min.js`}
2929
/>
30-
<script
31-
src={`https://cdn.jsdelivr.net/npm/@babel/preset-env-standalone@${versions.babel.standaloneEnv}/babel-preset-env.min.js`}
32-
/>
3330
<script src={`https://cdn.jsdelivr.net/faker.js/${versions.faker}/faker.min.js`} />
3431

3532
<script
@@ -38,7 +35,7 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
3835
/>
3936
<script
4037
crossOrigin='true'
41-
src={`https://cdn.jsdelivr.net/combine/npm/prettier@${versions.prettier}/parser-babylon.min.js,npm/prettier@${versions.prettier}/parser-html.min.js`}
38+
src={`https://cdn.jsdelivr.net/combine/npm/prettier@${versions.prettier}/parser-babel.min.js,npm/prettier@${versions.prettier}/parser-html.min.js`}
4239
/>
4340
<script
4441
src={`https://cdnjs.cloudflare.com/ajax/libs/prop-types/${versions.propTypes}/prop-types${

‎docs/src/components/DocumentationPage/components.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import CodeSnippet from 'docs/src/components/CodeSnippet'
1010

1111
export const a = ({ children, href }) => <Link to={href}>{children}</Link>
1212

13-
export const code = ({ className, children, fitted, label }) => (
13+
export const code = ({ className, children, fitted, formattable, label }) => (
1414
<CodeSnippet
1515
fitted={fitted}
16+
formattable={formattable !== 'false'}
1617
mode={className.replace('language-', '')}
1718
label={label}
1819
value={children}

‎docs/src/pages/Theming.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ npx @semantic-ui-react/bootstrap
145145

146146
This file is mostly prepared, but you have to change some details in the bottom of it:
147147

148-
```json label=src/semantic-ui/theme.config
148+
```json label=src/semantic-ui/theme.config formattable=false
149149
/*******************************
150150
Folders
151151
*******************************/
@@ -173,7 +173,7 @@ yarn start
173173

174174
You can now go e.g. to `src/semantic-ui/site/globals/site.variables` and add:
175175

176-
```json
176+
```json formattable=false
177177
@primaryColor: #002f4e;
178178
@pageBackground: #eff0f1;
179179
```

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,11 @@
9393
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
9494
"@babel/plugin-transform-runtime": "^7.10.5",
9595
"@babel/preset-env": "^7.10.4",
96-
"@babel/preset-env-standalone": "7.8.3",
9796
"@babel/preset-react": "^7.10.4",
9897
"@babel/register": "^7.10.5",
9998
"@babel/standalone": "^7.10.5",
10099
"@mdx-js/loader": "^0.20.3",
101100
"@size-limit/file": "^4.5.5",
102-
"@stardust-ui/docs-components": "^0.34.1",
103101
"@types/react": "^16.9.43",
104102
"@typescript-eslint/eslint-plugin": "^3.7.1",
105103
"@typescript-eslint/parser": "^3.7.1",
@@ -148,6 +146,7 @@
148146
"lint-staged": "^10.2.11",
149147
"mocha": "^8.0.1",
150148
"prettier": "^2.0.5",
149+
"prismjs": "^1.20.0",
151150
"puppeteer": "^5.2.1",
152151
"raw-loader": "^4.0.1",
153152
"react": "^16.9.0",
@@ -162,7 +161,7 @@
162161
"react-source-render": "^3.0.0-5",
163162
"react-static": "^5.9.7",
164163
"react-static-routes": "^1.0.0",
165-
"react-test-renderer": "^16.13.1",
164+
"react-test-renderer": "^16.9.0",
166165
"react-universal-component": "^3.0.3",
167166
"rimraf": "^3.0.2",
168167
"satisfied": "^1.1.2",

0 commit comments

Comments
 (0)