From 20f55974e5b3a15351ac246141f557f97d87f412 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 3 Nov 2020 00:37:46 -0500 Subject: [PATCH 01/48] fix preset sketchy colors and fonts --- packages/docs/src/components/preset.js | 6 +-- packages/style-guide/package.json | 3 +- packages/style-guide/src/TypeStyle.tsx | 53 +++++++++++++++++--------- yarn.lock | 7 ++++ 4 files changed, 46 insertions(+), 23 deletions(-) diff --git a/packages/docs/src/components/preset.js b/packages/docs/src/components/preset.js index 743859817..1239cb5bd 100644 --- a/packages/docs/src/components/preset.js +++ b/packages/docs/src/components/preset.js @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx, Styled, components } from 'theme-ui' -import { ThemeContext } from '@emotion/core' +import { ThemeProvider } from '@theme-ui/core' import { MDXProvider } from '@mdx-js/react' import * as presets from '@theme-ui/presets' import { @@ -17,7 +17,7 @@ export default ({ preset: presetName }) => { return (
- + Colors @@ -52,7 +52,7 @@ export default ({ preset: presetName }) => { }} /> - +
) } diff --git a/packages/style-guide/package.json b/packages/style-guide/package.json index 51761bb58..476cee415 100644 --- a/packages/style-guide/package.json +++ b/packages/style-guide/package.json @@ -16,7 +16,8 @@ "@theme-ui/presets": "^0.4.0-rc.5", "@types/color": "^3.0.1", "color": "^3.1.2", - "lodash.get": "^4.4.2" + "lodash.get": "^4.4.2", + "react-google-font-loader": "^1.1.0" }, "peerDependencies": { "@emotion/core": "^10.0.10", diff --git a/packages/style-guide/src/TypeStyle.tsx b/packages/style-guide/src/TypeStyle.tsx index d21d6efb3..982a18533 100644 --- a/packages/style-guide/src/TypeStyle.tsx +++ b/packages/style-guide/src/TypeStyle.tsx @@ -1,6 +1,8 @@ /** @jsx jsx */ -import { ComponentProps } from 'react' -import { jsx } from 'theme-ui' +import { ComponentProps, Fragment } from 'react' +import GoogleFontLoader from 'react-google-font-loader' +import { jsx, get } from 'theme-ui' +import { useTheme } from './context' import Card from './Card' export interface TypeStyleProps extends ComponentProps { @@ -19,24 +21,37 @@ export const TypeStyle = ({ truncate = true, ...props }: TypeStyleProps) => { + const { fonts } = useTheme()! + const ff = get(fonts!, fontFamily) + const fontNameMatch = ff.match(/"(.*?)"/); + const font = fontNameMatch + && fontNameMatch[1]; return ( - + + {font && + } + + ) } diff --git a/yarn.lock b/yarn.lock index ad2affdf1..3133216c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16918,6 +16918,13 @@ react-focus-lock@^2.3.1: use-callback-ref "^1.2.1" use-sidecar "^1.0.1" +react-google-font-loader@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-google-font-loader/-/react-google-font-loader-1.1.0.tgz#9c9ae97aae3d2177e922c9bf4ab6312b903abc79" + integrity sha512-mnPYxBdhYEldTtREYPKllbmMvCGkTbpdmNjR6iTM3eTNWcg17OrfXjq9HRDZe+1+mhnUnI/AOcpvG0LIQPcLIw== + dependencies: + prop-types "^15.6.2" + react-helmet@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa" From cc9dd6c6b2805fa3249e548a93e3ada2e0c147c6 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 3 Nov 2020 00:58:13 -0500 Subject: [PATCH 02/48] fix: move loading to header of docs --- packages/docs/src/components/preset.js | 7 ++++ packages/style-guide/package.json | 3 +- packages/style-guide/src/TypeStyle.tsx | 49 +++++++++----------------- yarn.lock | 7 ---- 4 files changed, 25 insertions(+), 41 deletions(-) diff --git a/packages/docs/src/components/preset.js b/packages/docs/src/components/preset.js index 1239cb5bd..397a4d1b4 100644 --- a/packages/docs/src/components/preset.js +++ b/packages/docs/src/components/preset.js @@ -1,4 +1,5 @@ /** @jsx jsx */ +import { Helmet } from 'react-helmet' import { jsx, Styled, components } from 'theme-ui' import { ThemeProvider } from '@theme-ui/core' import { MDXProvider } from '@mdx-js/react' @@ -17,6 +18,12 @@ export default ({ preset: presetName }) => { return (
+ + + Colors diff --git a/packages/style-guide/package.json b/packages/style-guide/package.json index 476cee415..51761bb58 100644 --- a/packages/style-guide/package.json +++ b/packages/style-guide/package.json @@ -16,8 +16,7 @@ "@theme-ui/presets": "^0.4.0-rc.5", "@types/color": "^3.0.1", "color": "^3.1.2", - "lodash.get": "^4.4.2", - "react-google-font-loader": "^1.1.0" + "lodash.get": "^4.4.2" }, "peerDependencies": { "@emotion/core": "^10.0.10", diff --git a/packages/style-guide/src/TypeStyle.tsx b/packages/style-guide/src/TypeStyle.tsx index 982a18533..225bd204e 100644 --- a/packages/style-guide/src/TypeStyle.tsx +++ b/packages/style-guide/src/TypeStyle.tsx @@ -1,8 +1,6 @@ /** @jsx jsx */ import { ComponentProps, Fragment } from 'react' -import GoogleFontLoader from 'react-google-font-loader' import { jsx, get } from 'theme-ui' -import { useTheme } from './context' import Card from './Card' export interface TypeStyleProps extends ComponentProps { @@ -21,37 +19,24 @@ export const TypeStyle = ({ truncate = true, ...props }: TypeStyleProps) => { - const { fonts } = useTheme()! - const ff = get(fonts!, fontFamily) - const fontNameMatch = ff.match(/"(.*?)"/); - const font = fontNameMatch - && fontNameMatch[1]; return ( - - {font && - } - - + ) } diff --git a/yarn.lock b/yarn.lock index 3133216c3..ad2affdf1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16918,13 +16918,6 @@ react-focus-lock@^2.3.1: use-callback-ref "^1.2.1" use-sidecar "^1.0.1" -react-google-font-loader@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/react-google-font-loader/-/react-google-font-loader-1.1.0.tgz#9c9ae97aae3d2177e922c9bf4ab6312b903abc79" - integrity sha512-mnPYxBdhYEldTtREYPKllbmMvCGkTbpdmNjR6iTM3eTNWcg17OrfXjq9HRDZe+1+mhnUnI/AOcpvG0LIQPcLIw== - dependencies: - prop-types "^15.6.2" - react-helmet@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa" From b80afef6dcfd69d067a44eea917c6d70eea960df Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 3 Nov 2020 00:59:13 -0500 Subject: [PATCH 03/48] fix: remove unused imports --- packages/style-guide/src/TypeStyle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/style-guide/src/TypeStyle.tsx b/packages/style-guide/src/TypeStyle.tsx index 225bd204e..d21d6efb3 100644 --- a/packages/style-guide/src/TypeStyle.tsx +++ b/packages/style-guide/src/TypeStyle.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ -import { ComponentProps, Fragment } from 'react' -import { jsx, get } from 'theme-ui' +import { ComponentProps } from 'react' +import { jsx } from 'theme-ui' import Card from './Card' export interface TypeStyleProps extends ComponentProps { From cab7863ae93c36a46520e340b4203cc2c1cdec03 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 3 Nov 2020 01:06:44 -0500 Subject: [PATCH 04/48] add componnets.mdx to presets --- packages/docs/src/components/components.mdx | 210 +++++++++++++++++++ packages/docs/src/components/preset.js | 9 +- packages/docs/src/components/presets-demo.js | 9 +- 3 files changed, 216 insertions(+), 12 deletions(-) create mode 100644 packages/docs/src/components/components.mdx diff --git a/packages/docs/src/components/components.mdx b/packages/docs/src/components/components.mdx new file mode 100644 index 000000000..72b2643f5 --- /dev/null +++ b/packages/docs/src/components/components.mdx @@ -0,0 +1,210 @@ +import { Message, NavLink, Divider, Container, Box, Button, Card, Text, Image, Slider, Label, Flex, Checkbox, Select, Textarea, Radio, Input, Link, Progress, Badge, Alert } from "theme-ui" + +--- + +# Example components + + + +## Borders + + + + sketchy0 + + + sketchy1 + + + sketchy2 + + + sketchy3 + + + sketchy4 + + + +--- + +## Buttons + + + + + + + + +--- + +## Form elements + + e.preventDefault()} sx={{width: '100%', maxWidth: "500px"}}> + + + + + + + + + + +