mirror of
https://github.com/gosticks/svgr.git
synced 2025-10-16 11:55:43 +00:00
docs(website): upgrade & make it standalone
This commit is contained in:
Greg Bergé
parent
cfc0fc2786
commit
2cadbb4da1
15
api/svgr.js
Normal file
15
api/svgr.js
Normal file
@ -0,0 +1,15 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
const { default: svgr } = require('@svgr/core')
|
||||
const { default: jsx } = require('@svgr/plugin-jsx')
|
||||
const { default: svgo } = require('@svgr/plugin-svgo')
|
||||
const { default: prettier } = require('@svgr/plugin-prettier')
|
||||
|
||||
module.exports = (req, res) => {
|
||||
svgr(req.body.code, { ...req.body.options, plugins: [svgo, jsx, prettier] })
|
||||
.then(output => {
|
||||
res.status(200).json({ output })
|
||||
})
|
||||
.catch(error => {
|
||||
res.status(400).json({ error: error.message })
|
||||
})
|
||||
}
|
||||
11
netlify.toml
11
netlify.toml
@ -1,7 +1,4 @@
|
||||
[build]
|
||||
base = "website"
|
||||
command = "yarn build"
|
||||
publish = "website/public"
|
||||
|
||||
[context.production]
|
||||
command = "yarn build:pp"
|
||||
[build]
|
||||
base = "website"
|
||||
command = "yarn build"
|
||||
publish = "website/public"
|
||||
12
now.json
12
now.json
@ -1,6 +1,12 @@
|
||||
{
|
||||
"version": 1,
|
||||
"public": true,
|
||||
"name": "svgr",
|
||||
"alias": "svgr"
|
||||
"version": 2,
|
||||
"public": true,
|
||||
"alias": "svgr",
|
||||
"redirects": [
|
||||
{
|
||||
"source": "/",
|
||||
"destination": "https://react-svgr.com/playground"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -9,8 +9,6 @@
|
||||
"dev": "lerna run build --parallel -- --watch",
|
||||
"format": "prettier --write \"**/*.{js,json,md}\"",
|
||||
"lint": "eslint .",
|
||||
"now-build": "yarn build && cd svgr.now.sh && yarn",
|
||||
"now-start": "cd svgr.now.sh && yarn start",
|
||||
"release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular",
|
||||
"test": "jest --runInBand"
|
||||
},
|
||||
@ -22,6 +20,7 @@
|
||||
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
||||
"@babel/plugin-syntax-typescript": "^7.3.3",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@now/node": "^1.3.0",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-jest": "^24.8.0",
|
||||
@ -37,8 +36,5 @@
|
||||
"jest": "^24.8.0",
|
||||
"lerna": "^3.14.1",
|
||||
"react": "^16.8.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
}
|
||||
|
||||
0
public/.exists
Normal file
0
public/.exists
Normal file
1
svgr.now.sh/.gitignore
vendored
1
svgr.now.sh/.gitignore
vendored
@ -1 +0,0 @@
|
||||
node_modules/
|
||||
@ -1,7 +0,0 @@
|
||||
# `svgr.now.sh`
|
||||
|
||||
`svgr.now.sh` exposes SVGR as a service. It is used on the [SVGR playground](https://www.smooth-code.com/open-source/svgr/playground/).
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@ -1,33 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
const bodyParser = require('body-parser')
|
||||
const express = require('express')
|
||||
const cors = require('cors')
|
||||
const { default: svgr } = require('@svgr/core')
|
||||
const { default: jsx } = require('@svgr/plugin-jsx')
|
||||
const { default: svgo } = require('@svgr/plugin-svgo')
|
||||
const { default: prettier } = require('@svgr/plugin-prettier')
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use(cors())
|
||||
|
||||
app.post('/api/svgr', bodyParser.json(), (req, res) => {
|
||||
svgr(req.body.code, { ...req.body.options, plugins: [svgo, jsx, prettier] })
|
||||
.then(output => {
|
||||
res.send({ output })
|
||||
})
|
||||
.catch(error => {
|
||||
res.send({ error: error.message })
|
||||
})
|
||||
})
|
||||
|
||||
app.get('*', (req, res) => {
|
||||
res.redirect('https://www.smooth-code.com/open-source/svgr/playground/')
|
||||
})
|
||||
|
||||
app.listen(3000, err => {
|
||||
if (err) throw err
|
||||
/* eslint-disable no-console */
|
||||
console.log('> Ready on http://localhost:3000')
|
||||
/* eslint-enable no-console */
|
||||
})
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "svgr-now-sh",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "nodemon index.js",
|
||||
"start": "NODE_ENV=production node index.js"
|
||||
},
|
||||
"now": {
|
||||
"alias": "svgr"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^1.18.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"body-parser": "^1.18.3",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.16.4"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1 +1 @@
|
||||
https://svgr.netlify.com/* https://svgr.smooth-code.com/:splat 301!
|
||||
https://svgr.netlify.com/* https://react-svgr.com/:splat 301!
|
||||
@ -1,26 +1,27 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@smooth-ui/core-sc": "^10.1.0",
|
||||
"@smooth-ui/core-sc": "^11.1.4",
|
||||
"@xstyled/styled-components": "^1.15.0",
|
||||
"brace": "^0.11.1",
|
||||
"final-form": "^4.18.5",
|
||||
"gatsby": "^2.15.28",
|
||||
"final-form": "^4.18.6",
|
||||
"gatsby": "^2.18.17",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"polished": "^3.4.1",
|
||||
"polished": "^3.4.2",
|
||||
"prismjs": "^1.17.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.10.1",
|
||||
"react-ace": "^7.0.4",
|
||||
"react-dom": "^16.10.1",
|
||||
"react-final-form": "^6.3.0",
|
||||
"react": "^16.12.0",
|
||||
"react-ace": "^8.0.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-final-form": "^6.3.3",
|
||||
"react-helmet": "^5.2.1",
|
||||
"smooth-code-landers": "^1.3.2",
|
||||
"smooth-doc": "^2.14.2",
|
||||
"styled-components": "^4.4.0"
|
||||
"react-icons": "^3.8.0",
|
||||
"reakit": "^1.0.0-beta.14",
|
||||
"smooth-doc": "^3.3.0",
|
||||
"styled-components": "^4.4.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gatsby build && cp _redirects public/",
|
||||
"build:pp": "gatsby build --prefix-paths && cp _redirects public/",
|
||||
"dev": "gatsby develop",
|
||||
"serve": "gatsby serve"
|
||||
}
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
import styled from 'styled-components'
|
||||
import styled from '@xstyled/styled-components'
|
||||
|
||||
export const Ad = styled.a`
|
||||
display: block;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
background-color: darker;
|
||||
border-radius: 3;
|
||||
padding: 8;
|
||||
display: flex;
|
||||
`
|
||||
|
||||
export const AdImg = styled.img`
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
margin-right: 8px;
|
||||
width: 130;
|
||||
height: 100;
|
||||
margin-right: 8;
|
||||
flex-shrink: 0;
|
||||
`
|
||||
|
||||
export const AdText = styled.div`
|
||||
font-size: 14px;
|
||||
font-size: 14;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
color: black;
|
||||
width: 200px;
|
||||
color: lighter;
|
||||
width: 200;
|
||||
`
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import React from 'react'
|
||||
|
||||
function useScript(src) {
|
||||
useEffect(() => {
|
||||
React.useEffect(() => {
|
||||
const script = document.createElement('script')
|
||||
script.src = src
|
||||
script.async = true
|
||||
@ -12,7 +12,7 @@ function useScript(src) {
|
||||
}, [src])
|
||||
}
|
||||
|
||||
export default function CodeFund() {
|
||||
export function CodeFund() {
|
||||
useScript('https://codefund.io/properties/267/funder.js')
|
||||
return <div id="codefund" />
|
||||
}
|
||||
|
||||
@ -1,75 +1,86 @@
|
||||
import React from 'react'
|
||||
import { styled } from '@smooth-ui/core-sc'
|
||||
import styled from '@xstyled/styled-components'
|
||||
|
||||
const FullWidth = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
const ChildWrapper = styled(FullWidth)`
|
||||
opacity: ${({ dragging }) => (dragging ? 0.1 : 1)};
|
||||
transition: base;
|
||||
opacity: 1;
|
||||
|
||||
&[data-dragging='true'] {
|
||||
opacity: 0.1;
|
||||
}
|
||||
`
|
||||
|
||||
const Area = styled(FullWidth)`
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const DragHelp = styled(FullWidth)`
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
padding-top: 20%;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
border: 4px dashed white;
|
||||
color: light800;
|
||||
font-size: 28;
|
||||
border: 2px dashed;
|
||||
border-color: light800;
|
||||
`
|
||||
|
||||
const prevent = e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
function prevent(event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
export default class DropArea extends React.Component {
|
||||
state = { dragging: false }
|
||||
export function DropArea({ onChange, children }) {
|
||||
const [dragging, setDragging] = React.useState(false)
|
||||
|
||||
function onStart() {
|
||||
setDragging(true)
|
||||
}
|
||||
|
||||
function onEnd() {
|
||||
setDragging(false)
|
||||
}
|
||||
|
||||
function onDrop(event) {
|
||||
onEnd()
|
||||
prevent(event)
|
||||
const {
|
||||
files: [file],
|
||||
} = event.dataTransfer
|
||||
if (!file || file.type !== 'image/svg+xml') return
|
||||
|
||||
onDrop = e => {
|
||||
this.onEnd()
|
||||
prevent(e)
|
||||
const { files } = e.dataTransfer
|
||||
const file = files[0]
|
||||
if (!file || file.type !== 'image/svg+xml') {
|
||||
return
|
||||
}
|
||||
const fileReader = new FileReader()
|
||||
fileReader.onload = () => {
|
||||
const text = fileReader.result
|
||||
this.props.onChange(text)
|
||||
onChange(fileReader.result)
|
||||
}
|
||||
fileReader.readAsText(file)
|
||||
}
|
||||
|
||||
onStart = () => this.setState({ dragging: true })
|
||||
|
||||
onEnd = () => this.setState({ dragging: false })
|
||||
|
||||
render() {
|
||||
const { dragging } = this.state
|
||||
return (
|
||||
<Area
|
||||
onDragEnterCapture={this.onStart}
|
||||
onDragLeaveCapture={this.onEnd}
|
||||
onDragOverCapture={prevent}
|
||||
onDrop={prevent}
|
||||
onDropCapture={this.onDrop}
|
||||
>
|
||||
{dragging && (
|
||||
<DragHelp>
|
||||
<p id="drop-zone">
|
||||
<span role="img" aria-labelledby="drop-zone">
|
||||
📄
|
||||
</span>{' '}
|
||||
Drop .svg file here.
|
||||
</p>
|
||||
</DragHelp>
|
||||
)}
|
||||
<ChildWrapper dragging={dragging}>{this.props.children}</ChildWrapper>
|
||||
</Area>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Area
|
||||
onDragEnterCapture={onStart}
|
||||
onDragLeaveCapture={onEnd}
|
||||
onDragOverCapture={prevent}
|
||||
onDrop={prevent}
|
||||
onDropCapture={onDrop}
|
||||
>
|
||||
{dragging && (
|
||||
<DragHelp>
|
||||
<p id="drop-zone">
|
||||
<span role="img" aria-labelledby="drop-zone">
|
||||
📄
|
||||
</span>{' '}
|
||||
Drop .svg file here.
|
||||
</p>
|
||||
</DragHelp>
|
||||
)}
|
||||
<ChildWrapper data-dragging={dragging}>{children}</ChildWrapper>
|
||||
</Area>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,29 @@
|
||||
import React from 'react'
|
||||
import { useColorMode } from '@xstyled/styled-components'
|
||||
|
||||
import AceEditor from 'react-ace'
|
||||
import 'brace'
|
||||
import 'brace/mode/xml'
|
||||
import 'brace/mode/jsx'
|
||||
import 'brace/theme/tomorrow_night'
|
||||
import 'brace/theme/github'
|
||||
|
||||
export default AceEditor
|
||||
const editorProps = { $blockScrolling: true }
|
||||
|
||||
export default function Editor(props) {
|
||||
const [colorMode] = useColorMode()
|
||||
const theme = colorMode === 'dark' ? 'tomorrow_night' : 'github'
|
||||
return (
|
||||
<AceEditor
|
||||
key={theme}
|
||||
width="100%"
|
||||
height="100%"
|
||||
showPrintMargin={false}
|
||||
theme={theme}
|
||||
editorProps={editorProps}
|
||||
scrollMargin={[10, 0, 0, 0]}
|
||||
fontSize={13}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -26,13 +26,13 @@ const Loader = styled.div`
|
||||
background-size: 30%;
|
||||
`
|
||||
|
||||
const Loading = () => (
|
||||
<StaticQuery
|
||||
query={QUERY}
|
||||
render={data => (
|
||||
<Loader backgroundImage={data.logo.childImageSharp.fluid.src} />
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
||||
export default Loading
|
||||
export function Loading() {
|
||||
return (
|
||||
<StaticQuery
|
||||
query={QUERY}
|
||||
render={data => (
|
||||
<Loader backgroundImage={data.logo.childImageSharp.fluid.src} />
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
/* eslint-disable jsx-a11y/accessible-emoji */
|
||||
import React from 'react'
|
||||
import { createGlobalStyle } from 'styled-components'
|
||||
import { Box, styled, up, down, css } from '@smooth-ui/core-sc'
|
||||
import Settings from 'components/playground/Settings'
|
||||
import svgr from 'components/playground/modules/svgr'
|
||||
import defaultSvg from 'components/playground/defaultSVG'
|
||||
import DropArea from 'components/playground/DropArea'
|
||||
import Loading from 'components/playground/Loading'
|
||||
import styled, {
|
||||
Box,
|
||||
createGlobalStyle,
|
||||
up,
|
||||
down,
|
||||
css,
|
||||
} from '@xstyled/styled-components'
|
||||
import {
|
||||
settings,
|
||||
getInitialState,
|
||||
transformSettings,
|
||||
} from 'components/playground/config/settings'
|
||||
import CodeFund from './CodeFund'
|
||||
useDialogState,
|
||||
Dialog as ReakitDialog,
|
||||
DialogBackdrop as ReakitDialogBackdrop,
|
||||
} from 'reakit/Dialog'
|
||||
import { lighten } from 'polished'
|
||||
import { Button } from '@smooth-ui/core-sc'
|
||||
import { Settings } from './Settings'
|
||||
import { svgr } from './modules/svgr'
|
||||
import defaultSvg from './defaultSVG'
|
||||
import { DropArea } from './DropArea'
|
||||
import { Loading } from './Loading'
|
||||
import { settings, getInitialState, transformSettings } from './config/settings'
|
||||
import { CodeFund } from './CodeFund'
|
||||
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
.loading {
|
||||
@ -30,140 +38,277 @@ const GlobalStyle = createGlobalStyle`
|
||||
}
|
||||
`
|
||||
|
||||
const editorProps = { $blockScrolling: true }
|
||||
|
||||
const PlaygroundContainer = styled(Box)`
|
||||
const PlaygroundContainer = styled.box`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 122px);
|
||||
${up('md', 'flex-direction: row;')}
|
||||
background-color: lighter;
|
||||
height: calc(100vh - 67px);
|
||||
|
||||
${up(
|
||||
'md',
|
||||
css`
|
||||
flex-direction: row;
|
||||
`,
|
||||
)}
|
||||
`
|
||||
|
||||
const PlaygroundEditors = styled(Box)`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
background-color: lighter;
|
||||
height: 50%;
|
||||
${up('md', 'height: 100%;')}
|
||||
|
||||
${up(
|
||||
'md',
|
||||
css`
|
||||
height: 100%;
|
||||
|
||||
> :first-child {
|
||||
border-right: 1px solid;
|
||||
border-color: light400;
|
||||
}
|
||||
`,
|
||||
)}
|
||||
`
|
||||
|
||||
const FloatingAd = styled.div`
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
bottom: 16;
|
||||
right: 16;
|
||||
z-index: 500;
|
||||
${down('md', 'display: none;')}
|
||||
background-color: black !important;
|
||||
${down(
|
||||
'md',
|
||||
css`
|
||||
display: none;
|
||||
`,
|
||||
)}
|
||||
`
|
||||
|
||||
class Playground extends React.Component {
|
||||
state = {
|
||||
input: defaultSvg,
|
||||
settings: getInitialState(),
|
||||
output: '',
|
||||
loading: false,
|
||||
Editor: null,
|
||||
const EditorTitle = styled.div`
|
||||
background-color: light100;
|
||||
color: light900;
|
||||
padding: 4 8;
|
||||
font-size: 12;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid;
|
||||
border-color: light400;
|
||||
`
|
||||
|
||||
const InnerDialog = styled.div`
|
||||
background-color: light900;
|
||||
color: lighter;
|
||||
position: fixed;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
max-width: 90%;
|
||||
min-width: 500;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 10;
|
||||
padding: 8;
|
||||
outline: 0;
|
||||
z-index: 999;
|
||||
box-shadow: 5px 5px rgba(50, 50, 50, 0.4), 10px 10px rgba(50, 50, 50, 0.3),
|
||||
15px 15px rgba(50, 50, 50, 0.2), 20px 20px rgba(50, 50, 50, 0.1),
|
||||
25px 25px rgba(50, 50, 50, 0.05);
|
||||
`
|
||||
|
||||
const InnerBackdrop = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: light800;
|
||||
opacity: 0.4;
|
||||
z-index: 899;
|
||||
`
|
||||
|
||||
const ThankBody = styled.div`
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: lighter;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
import('components/playground/Editor').then(({ default: Editor }) =>
|
||||
this.setState({ Editor }),
|
||||
)
|
||||
this.transform(this.state)
|
||||
h2 {
|
||||
font-size: 18;
|
||||
font-weight: 500;
|
||||
}
|
||||
`
|
||||
|
||||
transformId = 0
|
||||
const SponsorButton = styled(Button)`
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
min-width: 300;
|
||||
text-decoration: none !important;
|
||||
|
||||
handleInputChange = async input => {
|
||||
this.setState({ input })
|
||||
this.transform({ input, settings: this.state.settings })
|
||||
&:hover {
|
||||
color: white !important;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
`
|
||||
|
||||
handleSettingsChange = settings => {
|
||||
this.setState({ settings })
|
||||
this.transform({ settings, input: this.state.input })
|
||||
}
|
||||
function CopyFeedback(props) {
|
||||
return (
|
||||
<>
|
||||
<ReakitDialogBackdrop as={InnerBackdrop} {...props} />
|
||||
<ReakitDialog as={InnerDialog} {...props} aria-label="Thank you">
|
||||
<ThankBody>
|
||||
<h2>
|
||||
SVGR is made with ❤️ by{' '}
|
||||
<a
|
||||
href="https://gregberge.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Greg Bergé
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
Glad it helps!
|
||||
<br />A few ways to say thank you 👇
|
||||
</p>
|
||||
<Box my={24}>
|
||||
<SponsorButton
|
||||
forwardedAs="a"
|
||||
href="https://github.com/sponsors/gregberge"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant={lighten(0.1, '#EA4BAA')}
|
||||
>
|
||||
❤️ Sponsor me on GitHub
|
||||
</SponsorButton>
|
||||
</Box>
|
||||
<Box my={24}>
|
||||
<SponsorButton
|
||||
forwardedAs="a"
|
||||
href="https://opencollective.com/svgr"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant={lighten(0.1, '#2A7EFF')}
|
||||
>
|
||||
💸 Donate on OpenCollective
|
||||
</SponsorButton>
|
||||
</Box>
|
||||
<Box my={24}>
|
||||
<SponsorButton
|
||||
forwardedAs="a"
|
||||
href="https://twitter.com/neoziro"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant={lighten(0.1, '#1DA1F3')}
|
||||
>
|
||||
😉 Follow me on Twitter
|
||||
</SponsorButton>
|
||||
</Box>
|
||||
</ThankBody>
|
||||
</ReakitDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
async transform({ input, settings }) {
|
||||
const Editor = React.lazy(() => import('components/playground/Editor'))
|
||||
|
||||
export function Playground() {
|
||||
const [input, setInput] = React.useState(defaultSvg)
|
||||
const [output, setOutput] = React.useState('')
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const [state, setState] = React.useState(getInitialState)
|
||||
|
||||
const dialog = useDialogState({ visible: true })
|
||||
|
||||
const transformIdRef = React.useRef(0)
|
||||
|
||||
async function transform(input) {
|
||||
if (input.trim() === '') {
|
||||
this.setState({ output: '' })
|
||||
setOutput('')
|
||||
return
|
||||
}
|
||||
|
||||
this.setState({ loading: true })
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
/* eslint-disable-next-line no-plusplus */
|
||||
const transformId = ++this.transformId
|
||||
const output = await svgr(input, transformSettings(settings))
|
||||
if (transformId === this.transformId) {
|
||||
this.setState({ output })
|
||||
this.setState({ loading: false })
|
||||
const transformId = ++transformIdRef.current
|
||||
const output = await svgr(input, transformSettings(state))
|
||||
if (transformId === transformIdRef.current) {
|
||||
setOutput(output)
|
||||
setLoading(false)
|
||||
}
|
||||
} catch (error) {
|
||||
// We do nothing and assume that provided code is not correct
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<PlaygroundContainer
|
||||
display="flex"
|
||||
flex="1 0 auto"
|
||||
backgroundColor="white"
|
||||
>
|
||||
<Settings
|
||||
settings={settings}
|
||||
onChange={this.handleSettingsChange}
|
||||
initialValues={this.state.settings}
|
||||
/>
|
||||
{this.state.Editor ? (
|
||||
<PlaygroundEditors>
|
||||
<Box flex={1}>
|
||||
<DropArea onChange={this.handleInputChange}>
|
||||
<this.state.Editor
|
||||
width="100%"
|
||||
height="100%"
|
||||
showPrintMargin={false}
|
||||
mode="xml"
|
||||
theme="tomorrow_night"
|
||||
onChange={this.handleInputChange}
|
||||
value={this.state.input}
|
||||
function handleInputChange(input) {
|
||||
setInput(input)
|
||||
transform(input)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
transform(input)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<PlaygroundContainer>
|
||||
<Settings
|
||||
settings={settings}
|
||||
initialValues={state}
|
||||
onChange={setState}
|
||||
/>
|
||||
<React.Suspense fallback={<Loading />}>
|
||||
<PlaygroundEditors>
|
||||
<Box flex={1} display="flex" flexDirection="column">
|
||||
<EditorTitle>SVG input</EditorTitle>
|
||||
<Box flex={1} position="relative">
|
||||
<DropArea onChange={handleInputChange}>
|
||||
<Editor
|
||||
name="input"
|
||||
editorProps={editorProps}
|
||||
scrollMargin={[10, 0, 0, 0]}
|
||||
fontSize={13}
|
||||
mode="xml"
|
||||
onChange={handleInputChange}
|
||||
value={input}
|
||||
/>
|
||||
</DropArea>
|
||||
</Box>
|
||||
<Box flex={1} className={this.state.loading ? 'loading' : ''}>
|
||||
<this.state.Editor
|
||||
width="100%"
|
||||
height="100%"
|
||||
showPrintMargin={false}
|
||||
mode="jsx"
|
||||
theme="tomorrow_night"
|
||||
value={this.state.output}
|
||||
name="output"
|
||||
readOnly
|
||||
editorProps={editorProps}
|
||||
scrollMargin={[10, 0, 0, 0]}
|
||||
fontSize={13}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
flex={1}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
className={loading ? 'loading' : ''}
|
||||
>
|
||||
<EditorTitle>JSX output</EditorTitle>
|
||||
<Box
|
||||
flex={1}
|
||||
position="relative"
|
||||
onKeyDown={event => {
|
||||
// Detect copy
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === 'c') {
|
||||
dialog.show()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Editor name="output" mode="jsx" readOnly value={output} />
|
||||
</Box>
|
||||
</PlaygroundEditors>
|
||||
) : (
|
||||
<Loading />
|
||||
)}
|
||||
<FloatingAd>
|
||||
<CodeFund />
|
||||
</FloatingAd>
|
||||
</PlaygroundContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</PlaygroundEditors>
|
||||
</React.Suspense>
|
||||
<CopyFeedback {...dialog} />
|
||||
<FloatingAd>
|
||||
<CodeFund />
|
||||
</FloatingAd>
|
||||
</PlaygroundContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Playground
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React from 'react'
|
||||
import { styled, up, css } from '@smooth-ui/core-sc'
|
||||
import styled, { up, css } from '@xstyled/styled-components'
|
||||
import { Form, FormSpy } from 'react-final-form'
|
||||
import SettingsFieldBoolean from './SettingsFieldBoolean'
|
||||
import SettingsGroup from './SettingsGroup'
|
||||
import SettingsFieldString from './SettingsFieldString'
|
||||
import SettingsFieldEnum from './SettingsFieldEnum'
|
||||
import SettingsFieldInteger from './SettingsFieldInteger'
|
||||
import { SettingsFieldBoolean } from './SettingsFieldBoolean'
|
||||
import { SettingsGroup } from './SettingsGroup'
|
||||
import { SettingsFieldString } from './SettingsFieldString'
|
||||
import { SettingsFieldEnum } from './SettingsFieldEnum'
|
||||
import { SettingsFieldInteger } from './SettingsFieldInteger'
|
||||
|
||||
const SettingsContainer = styled.div`
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
background-color: #22252b;
|
||||
color: #9ea5b3;
|
||||
font-size: 14;
|
||||
background-color: light100;
|
||||
color: light800;
|
||||
user-select: none;
|
||||
overflow: auto;
|
||||
max-height: 50%;
|
||||
@ -42,28 +42,30 @@ const renderSetting = setting => {
|
||||
return <SettingComponent key={setting.name} setting={setting} />
|
||||
}
|
||||
|
||||
const Settings = ({ settings, initialValues, onChange }) => (
|
||||
<Form onSubmit={() => {}} initialValues={initialValues}>
|
||||
{() => (
|
||||
<>
|
||||
<FormSpy
|
||||
subscription={{ values: true }}
|
||||
onChange={({ values }) => onChange(values)}
|
||||
/>
|
||||
<SettingsContainer direction="column">
|
||||
<SettingsGroup title="Global">
|
||||
{getGroupSettings('global', settings).map(renderSetting)}
|
||||
</SettingsGroup>
|
||||
<SettingsGroup title="SVGO">
|
||||
{getGroupSettings('svgo', settings).map(renderSetting)}
|
||||
</SettingsGroup>
|
||||
<SettingsGroup title="Prettier">
|
||||
{getGroupSettings('prettier', settings).map(renderSetting)}
|
||||
</SettingsGroup>
|
||||
</SettingsContainer>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
)
|
||||
const noop = () => {}
|
||||
|
||||
export default Settings
|
||||
export function Settings({ settings, initialValues, onChange }) {
|
||||
return (
|
||||
<Form onSubmit={noop} initialValues={initialValues}>
|
||||
{() => (
|
||||
<>
|
||||
<FormSpy
|
||||
subscription={{ values: true }}
|
||||
onChange={({ values }) => onChange(values)}
|
||||
/>
|
||||
<SettingsContainer direction="column">
|
||||
<SettingsGroup title="Global">
|
||||
{getGroupSettings('global', settings).map(renderSetting)}
|
||||
</SettingsGroup>
|
||||
<SettingsGroup title="SVGO">
|
||||
{getGroupSettings('svgo', settings).map(renderSetting)}
|
||||
</SettingsGroup>
|
||||
<SettingsGroup title="Prettier">
|
||||
{getGroupSettings('prettier', settings).map(renderSetting)}
|
||||
</SettingsGroup>
|
||||
</SettingsContainer>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
import React from 'react'
|
||||
import { FormCheck, FormCheckLabel, Box } from '@smooth-ui/core-sc'
|
||||
import CheckboxControl from './controls/CheckboxControl'
|
||||
import { Box } from '@xstyled/styled-components'
|
||||
import { FormCheck, FormCheckLabel } from '@smooth-ui/core-sc'
|
||||
import { CheckboxControl } from './controls/CheckboxControl'
|
||||
|
||||
const SettingsFieldBoolean = ({ setting }) => (
|
||||
<Box p="3px 15px">
|
||||
<FormCheck>
|
||||
<CheckboxControl id={setting.name} name={`.${setting.name}`} />
|
||||
<FormCheckLabel htmlFor={setting.name}>{setting.label}</FormCheckLabel>
|
||||
</FormCheck>
|
||||
</Box>
|
||||
)
|
||||
|
||||
export default SettingsFieldBoolean
|
||||
export function SettingsFieldBoolean({ setting }) {
|
||||
return (
|
||||
<Box mx={16} my={8}>
|
||||
<FormCheck>
|
||||
<CheckboxControl
|
||||
scale="sm"
|
||||
id={setting.name}
|
||||
name={`.${setting.name}`}
|
||||
/>
|
||||
<FormCheckLabel htmlFor={setting.name}>{setting.label}</FormCheckLabel>
|
||||
</FormCheck>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
import React from 'react'
|
||||
import { Box, FormGroup, FormCheck, FormCheckLabel } from '@smooth-ui/core-sc'
|
||||
import RadioControl from 'components/playground/controls/RadioControl'
|
||||
import SmallLabel from './SmallLabel'
|
||||
import { Box } from '@xstyled/styled-components'
|
||||
import { FormField, FormCheck, FormCheckLabel } from '@smooth-ui/core-sc'
|
||||
import { RadioControl } from 'components/playground/controls/RadioControl'
|
||||
import { SmallLabel } from './SmallLabel'
|
||||
|
||||
const SettingsFieldBoolean = ({ setting }) => (
|
||||
<Box p="5px 15px">
|
||||
<FormGroup>
|
||||
<SmallLabel htmlFor={setting.name}>{setting.label}</SmallLabel>
|
||||
{setting.values.map(value => (
|
||||
<FormCheck key={value}>
|
||||
<RadioControl
|
||||
id={`${setting.name}-${value}`}
|
||||
name={`.${setting.name}`}
|
||||
value={value}
|
||||
/>
|
||||
<FormCheckLabel htmlFor={`${setting.name}-${value}`}>
|
||||
{value}
|
||||
</FormCheckLabel>
|
||||
</FormCheck>
|
||||
))}
|
||||
</FormGroup>
|
||||
</Box>
|
||||
)
|
||||
|
||||
export default SettingsFieldBoolean
|
||||
export function SettingsFieldEnum({ setting }) {
|
||||
return (
|
||||
<Box m={16}>
|
||||
<FormField>
|
||||
<SmallLabel htmlFor={setting.name}>{setting.label}</SmallLabel>
|
||||
{setting.values.map(value => (
|
||||
<FormCheck key={value}>
|
||||
<RadioControl
|
||||
scale="sm"
|
||||
id={`${setting.name}-${value}`}
|
||||
name={`.${setting.name}`}
|
||||
value={value}
|
||||
/>
|
||||
<FormCheckLabel htmlFor={`${setting.name}-${value}`}>
|
||||
{value}
|
||||
</FormCheckLabel>
|
||||
</FormCheck>
|
||||
))}
|
||||
</FormField>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
import React from 'react'
|
||||
import { Box, FormGroup } from '@smooth-ui/core-sc'
|
||||
import InputControl from './controls/InputControl'
|
||||
import SmallLabel from './SmallLabel'
|
||||
import { Box } from '@xstyled/styled-components'
|
||||
import { FormField } from '@smooth-ui/core-sc'
|
||||
import { InputControl } from './controls/InputControl'
|
||||
import { SmallLabel } from './SmallLabel'
|
||||
|
||||
const SettingsFieldBoolean = ({ setting }) => (
|
||||
<Box p="5px 15px">
|
||||
<FormGroup>
|
||||
<SmallLabel htmlFor={setting.name}>{setting.label}</SmallLabel>
|
||||
<InputControl
|
||||
type="number"
|
||||
size="sm"
|
||||
id={setting.name}
|
||||
name={`.${setting.name}`}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Box>
|
||||
)
|
||||
|
||||
export default SettingsFieldBoolean
|
||||
export function SettingsFieldInteger({ setting }) {
|
||||
return (
|
||||
<Box m={16}>
|
||||
<FormField>
|
||||
<SmallLabel htmlFor={setting.name}>{setting.label}</SmallLabel>
|
||||
<InputControl
|
||||
type="number"
|
||||
size="sm"
|
||||
id={setting.name}
|
||||
name={`.${setting.name}`}
|
||||
/>
|
||||
</FormField>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
import React from 'react'
|
||||
import { Box, FormGroup } from '@smooth-ui/core-sc'
|
||||
import SmallLabel from 'components/playground/SmallLabel'
|
||||
import TextareaControl from 'components/playground/controls/TextareaControl'
|
||||
import { Box } from '@xstyled/styled-components'
|
||||
import { FormField } from '@smooth-ui/core-sc'
|
||||
import { TextareaControl } from 'components/playground/controls/TextareaControl'
|
||||
import { SmallLabel } from './SmallLabel'
|
||||
|
||||
const SettingsFieldBoolean = ({ setting }) => (
|
||||
<Box p="5px 15px">
|
||||
<FormGroup display="flex" flexDirection="column">
|
||||
<SmallLabel htmlFor={setting.name}>{setting.label}</SmallLabel>
|
||||
<TextareaControl
|
||||
id={setting.name}
|
||||
placeholder={setting.placeholder}
|
||||
name={`.${setting.name}`}
|
||||
size="sm"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Box>
|
||||
)
|
||||
|
||||
export default SettingsFieldBoolean
|
||||
export function SettingsFieldString({ setting }) {
|
||||
return (
|
||||
<Box m={16}>
|
||||
<FormField display="flex" flexDirection="column">
|
||||
<SmallLabel htmlFor={setting.name}>{setting.label}</SmallLabel>
|
||||
<TextareaControl
|
||||
id={setting.name}
|
||||
placeholder={setting.placeholder}
|
||||
name={`.${setting.name}`}
|
||||
size="sm"
|
||||
/>
|
||||
</FormField>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,73 +1,79 @@
|
||||
import React from 'react'
|
||||
import { Box, styled, up, css } from '@smooth-ui/core-sc'
|
||||
import ChevronLeft from 'components/playground/icons/ChevronLeft'
|
||||
import styled, { up, css, Box } from '@xstyled/styled-components'
|
||||
import { useHiddenState, Hidden, HiddenDisclosure } from 'reakit/Hidden'
|
||||
import { ChevronLeft } from 'components/playground/icons/ChevronLeft'
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #181a1e;
|
||||
`
|
||||
|
||||
const Title = styled.button`
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
padding: 10px 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: background-color 300ms;
|
||||
line-height: 20px;
|
||||
border-bottom: 1px solid #181a1e;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: #292d36;
|
||||
outline: none;
|
||||
}
|
||||
`
|
||||
const Content = styled.div`
|
||||
padding: 0 0 20px;
|
||||
border-bottom: 1px solid #181a1e;
|
||||
border-right: 1px solid;
|
||||
border-color: light400;
|
||||
`
|
||||
|
||||
const Marker = styled(ChevronLeft)`
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transition: transform 300ms;
|
||||
width: 18;
|
||||
height: 18;
|
||||
transition: base;
|
||||
transform: rotate(90deg);
|
||||
margin-left: 10px;
|
||||
&.opened {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
${up(
|
||||
'md',
|
||||
css`
|
||||
transform: rotate(0);
|
||||
margin-left: 0px;
|
||||
`,
|
||||
)}
|
||||
`
|
||||
|
||||
class SettingGroup extends React.Component {
|
||||
state = { opened: true }
|
||||
const Button = styled.buttonBox`
|
||||
font-size: 15;
|
||||
font-weight: bold;
|
||||
padding: 8 16;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: base;
|
||||
border: 0;
|
||||
border-bottom: 1px solid;
|
||||
border-color: light400;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
handleClick = () => this.setState(state => ({ opened: !state.opened }))
|
||||
|
||||
render() {
|
||||
const { title, children } = this.props
|
||||
return (
|
||||
<Container>
|
||||
<Title onClick={this.handleClick}>
|
||||
<Box textAlign="left" display="flex" alignItems="center">
|
||||
<Box flex={1}>{title}</Box>
|
||||
<Marker className={this.state.opened ? 'opened' : ''} />
|
||||
</Box>
|
||||
</Title>
|
||||
{this.state.opened && <Content>{children}</Content>}
|
||||
</Container>
|
||||
)
|
||||
&[aria-expanded='true'] {
|
||||
${Marker} {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SettingGroup
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: light200;
|
||||
outline: none;
|
||||
}
|
||||
`
|
||||
|
||||
const Content = styled.div`
|
||||
border-bottom: 1px solid;
|
||||
border-color: light400;
|
||||
`
|
||||
|
||||
export function SettingsGroup({ title, children }) {
|
||||
const hidden = useHiddenState({ visible: true })
|
||||
return (
|
||||
<Container>
|
||||
<HiddenDisclosure {...hidden}>
|
||||
{hiddenDisclosureProps => (
|
||||
<Button row {...hiddenDisclosureProps}>
|
||||
<Box col>{title}</Box>
|
||||
<Box col="auto">
|
||||
<Marker />
|
||||
</Box>
|
||||
</Button>
|
||||
)}
|
||||
</HiddenDisclosure>
|
||||
<Hidden as={Content} {...hidden}>
|
||||
{children}
|
||||
</Hidden>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Label, styled } from '@smooth-ui/core-sc'
|
||||
import { FormFieldLabel } from '@smooth-ui/core-sc'
|
||||
import styled from '@xstyled/styled-components'
|
||||
|
||||
const SmallLabel = styled(Label)`
|
||||
export const SmallLabel = styled(FormFieldLabel)`
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
`
|
||||
export default SmallLabel
|
||||
|
||||
@ -31,6 +31,13 @@ export const settings = [
|
||||
group: 'global',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
label: 'Memo',
|
||||
name: 'memo',
|
||||
type: 'boolean',
|
||||
group: 'global',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
label: 'Title prop',
|
||||
name: 'titleProp',
|
||||
@ -78,7 +85,8 @@ export const settings = [
|
||||
placeholder: '{ "plugins": [{ "removeTitle": false }] }',
|
||||
type: 'string',
|
||||
group: 'svgo',
|
||||
default: '{ "plugins": [{ "removeTitle": false }] }',
|
||||
default:
|
||||
'{ "plugins": [{ "removeTitle": false }, { "removeViewBox": false }] }',
|
||||
transform: parseJson,
|
||||
},
|
||||
{
|
||||
|
||||
@ -2,14 +2,14 @@ import React from 'react'
|
||||
import { Field } from 'react-final-form'
|
||||
import { Checkbox } from '@smooth-ui/core-sc'
|
||||
|
||||
const CheckboxControl = props => (
|
||||
<Field
|
||||
type="checkbox"
|
||||
render={({ input: { value, ...inputProps }, ...props }) => (
|
||||
<Checkbox {...inputProps} {...props} />
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default CheckboxControl
|
||||
export function CheckboxControl(props) {
|
||||
return (
|
||||
<Field
|
||||
type="checkbox"
|
||||
render={({ input: { value, ...inputProps }, ...props }) => (
|
||||
<Checkbox {...inputProps} {...props} />
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,11 +2,11 @@ import React from 'react'
|
||||
import { Field } from 'react-final-form'
|
||||
import { Input } from '@smooth-ui/core-sc'
|
||||
|
||||
const InputControl = props => (
|
||||
<Field
|
||||
render={({ input, ...props }) => <Input {...input} {...props} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default InputControl
|
||||
export function InputControl(props) {
|
||||
return (
|
||||
<Field
|
||||
render={({ input, ...props }) => <Input {...input} {...props} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@ import React from 'react'
|
||||
import { Field } from 'react-final-form'
|
||||
import { Radio } from '@smooth-ui/core-sc'
|
||||
|
||||
const RadioControl = props => (
|
||||
<Field
|
||||
type="radio"
|
||||
render={({ input, ...props }) => <Radio {...input} {...props} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default RadioControl
|
||||
export function RadioControl(props) {
|
||||
return (
|
||||
<Field
|
||||
type="radio"
|
||||
render={({ input, ...props }) => <Radio {...input} {...props} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,11 +2,13 @@ import React from 'react'
|
||||
import { Field } from 'react-final-form'
|
||||
import { Textarea } from '@smooth-ui/core-sc'
|
||||
|
||||
const TextareaControl = props => (
|
||||
<Field
|
||||
render={({ input, ...props }) => <Textarea {...input} {...props} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
export default TextareaControl
|
||||
export function TextareaControl(props) {
|
||||
return (
|
||||
<Field
|
||||
render={({ input, ...props }) => (
|
||||
<Textarea fontSize={12} rows={4} {...input} {...props} />
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
|
||||
const ChevronLeft = props => (
|
||||
export const ChevronLeft = props => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
@ -16,5 +16,3 @@ const ChevronLeft = props => (
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ChevronLeft
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import fetch from 'isomorphic-fetch'
|
||||
|
||||
/* eslint-env browser */
|
||||
async function svgr(code, options = {}) {
|
||||
export async function svgr(code, options = {}) {
|
||||
const res = await fetch('https://svgr.now.sh/api/svgr', {
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
@ -13,5 +13,3 @@ async function svgr(code, options = {}) {
|
||||
if (json.error) throw new Error(json.error)
|
||||
return json.output
|
||||
}
|
||||
|
||||
export default svgr
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Not Found
|
||||
---
|
||||
|
||||
import { NotFound } from 'smooth-doc/components'
|
||||
|
||||
<NotFound />
|
||||
42
website/src/pages/index.js
Normal file
42
website/src/pages/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
/* eslint-disable react/jsx-one-expression-per-line */
|
||||
/* eslint-disable jsx-a11y/accessible-emoji */
|
||||
import React from 'react'
|
||||
import { Box } from '@xstyled/styled-components'
|
||||
import Helmet from 'react-helmet'
|
||||
import { HomeHero, ShowCase, BaseLayout } from 'smooth-doc/components'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<BaseLayout>
|
||||
<Helmet>
|
||||
<title>SVGR - Transform SVG into React components</title>
|
||||
</Helmet>
|
||||
|
||||
<HomeHero title="Transform SVGs into React components." />
|
||||
|
||||
<ShowCase>
|
||||
<Box maxWidth={660} px={20}>
|
||||
<Box row>
|
||||
<Box col={{ xs: 1, md: true }}>
|
||||
<h2>What is it?</h2>
|
||||
<ul>
|
||||
<li>A SVG to React transformer</li>
|
||||
<li>A Node library</li>
|
||||
<li>A CLI tool</li>
|
||||
<li>A webpack plugin</li>
|
||||
</ul>
|
||||
</Box>
|
||||
<Box col={{ xs: 1, md: 'auto' }}>
|
||||
<h2>Why</h2>
|
||||
<ul>
|
||||
<li>Easy integration</li>
|
||||
<li>Flexibility</li>
|
||||
<li>Performances</li>
|
||||
</ul>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</ShowCase>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
---
|
||||
title: SVGR
|
||||
---
|
||||
|
||||
import { Grid, Row, Col } from '@smooth-ui/core-sc'
|
||||
import { HomeHero, ShowCase } from 'smooth-doc/components'
|
||||
import Helmet from 'react-helmet'
|
||||
|
||||
<Helmet>
|
||||
<title>SVGR - The React to SVG transformer</title>
|
||||
</Helmet>
|
||||
|
||||
<HomeHero title="Transform SVGs into React components." />
|
||||
|
||||
<ShowCase>
|
||||
<Grid maxWidth={660} gutter={20}>
|
||||
<Row>
|
||||
<Col xs={12} md>
|
||||
<h2># What is SVGR?</h2>
|
||||
<ul>
|
||||
<li>A SVG to React transformer</li>
|
||||
<li>A Node library</li>
|
||||
<li>A CLI tool</li>
|
||||
<li>A webpack plugin</li>
|
||||
</ul>
|
||||
</Col>
|
||||
<Col xs={12} md="auto">
|
||||
<h2># Why?</h2>
|
||||
<ul>
|
||||
<li>Easy integration</li>
|
||||
<li>Flexibility</li>
|
||||
<li>Performances</li>
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</ShowCase>
|
||||
@ -2,6 +2,6 @@
|
||||
title: Playground
|
||||
---
|
||||
|
||||
import Playground from 'components/playground/Playground'
|
||||
import { Playground } from 'components/playground/Playground'
|
||||
|
||||
<Playground />
|
||||
|
||||
14
website/src/smooth-doc/components/ThemeProvider.js
Normal file
14
website/src/smooth-doc/components/ThemeProvider.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import { ThemeProvider as SCThemeProvider } from '@xstyled/styled-components'
|
||||
import deepmerge from 'deepmerge'
|
||||
import { theme as suiTheme } from '@smooth-ui/core-sc'
|
||||
import { theme as smoothDocTheme } from 'smooth-doc/src/components/ThemeProvider'
|
||||
|
||||
const theme = deepmerge(
|
||||
{ ...smoothDocTheme, useCustomProperties: false },
|
||||
suiTheme,
|
||||
)
|
||||
|
||||
export function ThemeProvider({ children }) {
|
||||
return <SCThemeProvider theme={theme}>{children}</SCThemeProvider>
|
||||
}
|
||||
4761
website/yarn.lock
4761
website/yarn.lock
File diff suppressed because it is too large
Load Diff
73
yarn.lock
73
yarn.lock
@ -1747,6 +1747,13 @@
|
||||
"@nodelib/fs.scandir" "2.1.3"
|
||||
fastq "^1.6.0"
|
||||
|
||||
"@now/node@^1.3.0":
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@now/node/-/node-1.3.0.tgz#9fe614114a4207600820d9c3398f51e7297c4d9b"
|
||||
integrity sha512-tkEKrxSh7XMx6HmN6j55HfuJKZ+DzlxWP0Xg728Oe2qXyxpvfDhQFYNyRzU7kN9UaGXJ+MAL5zQ8p3dqCQxMnA==
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@octokit/endpoint@^5.5.0":
|
||||
version "5.5.1"
|
||||
resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.5.1.tgz#2eea81e110ca754ff2de11c79154ccab4ae16b3f"
|
||||
@ -3907,7 +3914,7 @@ debug@3.1.0:
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
debug@^3.1.0, debug@^3.2.6:
|
||||
debug@^3.1.0:
|
||||
version "3.2.6"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
|
||||
integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
|
||||
@ -3956,11 +3963,6 @@ dedent@^0.7.0:
|
||||
resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
|
||||
integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
|
||||
|
||||
deep-extend@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
|
||||
integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
|
||||
|
||||
deep-is@~0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
|
||||
@ -4054,11 +4056,6 @@ detect-indent@^5.0.0:
|
||||
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
|
||||
integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
|
||||
|
||||
detect-libc@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
|
||||
integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
|
||||
|
||||
detect-newline@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
|
||||
@ -5532,7 +5529,7 @@ humanize-ms@^1.2.1:
|
||||
dependencies:
|
||||
ms "^2.0.0"
|
||||
|
||||
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
|
||||
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
|
||||
version "0.4.24"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
||||
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
|
||||
@ -5650,7 +5647,7 @@ inherits@2.0.3:
|
||||
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
|
||||
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
|
||||
|
||||
ini@^1.3.2, ini@^1.3.4, ini@~1.3.0:
|
||||
ini@^1.3.2, ini@^1.3.4:
|
||||
version "1.3.5"
|
||||
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
|
||||
integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
|
||||
@ -7378,15 +7375,6 @@ natural-compare@^1.4.0:
|
||||
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
|
||||
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
|
||||
|
||||
needle@^2.2.1:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
|
||||
integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
|
||||
dependencies:
|
||||
debug "^3.2.6"
|
||||
iconv-lite "^0.4.4"
|
||||
sax "^1.2.4"
|
||||
|
||||
neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
|
||||
@ -7496,22 +7484,6 @@ node-notifier@^5.4.2:
|
||||
shellwords "^0.1.1"
|
||||
which "^1.3.0"
|
||||
|
||||
node-pre-gyp@*:
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
|
||||
integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
|
||||
dependencies:
|
||||
detect-libc "^1.0.2"
|
||||
mkdirp "^0.5.1"
|
||||
needle "^2.2.1"
|
||||
nopt "^4.0.1"
|
||||
npm-packlist "^1.1.6"
|
||||
npmlog "^4.0.2"
|
||||
rc "^1.2.7"
|
||||
rimraf "^2.6.1"
|
||||
semver "^5.3.0"
|
||||
tar "^4.4.2"
|
||||
|
||||
node-releases@^1.1.42:
|
||||
version "1.1.43"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.43.tgz#2c6ca237f88ce11d49631f11190bb01f8d0549f2"
|
||||
@ -7604,7 +7576,7 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
|
||||
semver "^5.6.0"
|
||||
validate-npm-package-name "^3.0.0"
|
||||
|
||||
npm-packlist@^1.1.6, npm-packlist@^1.4.4:
|
||||
npm-packlist@^1.4.4:
|
||||
version "1.4.7"
|
||||
resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
|
||||
integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
|
||||
@ -7628,7 +7600,7 @@ npm-run-path@^2.0.0:
|
||||
dependencies:
|
||||
path-key "^2.0.0"
|
||||
|
||||
npmlog@^4.0.2, npmlog@^4.1.2:
|
||||
npmlog@^4.1.2:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
|
||||
integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
|
||||
@ -8898,16 +8870,6 @@ range-parser@~1.2.1:
|
||||
resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
|
||||
integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
|
||||
|
||||
rc@^1.2.7:
|
||||
version "1.2.8"
|
||||
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
|
||||
integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
|
||||
dependencies:
|
||||
deep-extend "^0.6.0"
|
||||
ini "~1.3.0"
|
||||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
react-is@^16.8.1, react-is@^16.8.4:
|
||||
version "16.12.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
|
||||
@ -9330,7 +9292,7 @@ rimraf@2.6.3:
|
||||
dependencies:
|
||||
glob "^7.1.3"
|
||||
|
||||
rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
|
||||
rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3:
|
||||
version "2.7.1"
|
||||
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
|
||||
integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
|
||||
@ -9493,7 +9455,7 @@ semver-regex@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
|
||||
integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
|
||||
|
||||
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.1, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
|
||||
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.1, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
|
||||
version "5.7.1"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
|
||||
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
|
||||
@ -10058,11 +10020,6 @@ strip-json-comments@^3.0.1:
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
|
||||
integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
|
||||
|
||||
strip-json-comments@~2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||
integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
|
||||
|
||||
strong-log-transformer@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
|
||||
@ -10158,7 +10115,7 @@ tapable@^1.0.0, tapable@^1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
|
||||
integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
|
||||
|
||||
tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
|
||||
tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
|
||||
version "4.4.13"
|
||||
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
|
||||
integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user