diff --git a/babel.config.js b/babel.config.js index ea05946c..4d9d5d72 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,8 +1,4 @@ module.exports = { - presets: ['next/babel'], - plugins: [ - './lib/babel-plugin-nextjs-mdx-patch', - 'babel-plugin-macros', - ['styled-components', { ssr: true }], - ], + presets: ['next/babel', '@emotion/babel-preset-css-prop'], + plugins: ['./lib/babel-plugin-nextjs-mdx-patch', 'babel-plugin-macros', '@emotion'], }; diff --git a/next.config.js b/next.config.js index c22aa69c..c890727f 100755 --- a/next.config.js +++ b/next.config.js @@ -394,6 +394,10 @@ module.exports = withFonts( aliases.react = aliases['react-dom'] = 'preact/compat'; aliases['react-ssr-prepass'] = 'preact-ssr-prepass'; } + config.resolve.alias['@emotion/react'] = path.resolve( + __dirname, + './node_modules/@emotion/react' + ); return config; }, diff --git a/package.json b/package.json index 23e53d89..a33c302d 100755 --- a/package.json +++ b/package.json @@ -2,19 +2,27 @@ "name": "@blockstack/docs", "version": "1.0.0", "dependencies": { - "@blockstack/ui": "2.12.2-beta.0", "@docsearch/css": "^1.0.0-alpha.27", "@docsearch/react": "^1.0.0-alpha.27", + "@emotion/babel-plugin": "^11.0.0-next.15", + "@emotion/babel-preset-css-prop": "^11.0.0-next.10", + "@emotion/cache": "^11.0.0-next.15", + "@emotion/core": "^11.0.0-next.10", + "@emotion/css": "^11.0.0-next.15", + "@emotion/react": "^11.0.0-next.15", + "@emotion/server": "^11.0.0-next.15", "@hashicorp/remark-plugins": "^3.0.0", "@mdx-js/loader": "1.6.16", "@mdx-js/mdx": "^1.6.16", "@mdx-js/react": "^1.6.16", "@next/mdx": "^9.5.2", - "@reach/accordion": "^0.10.5", - "@reach/tooltip": "^0.10.5", + "@reach/accordion": "^0.11.0", + "@reach/tooltip": "^0.11.0", + "@stacks/ui": "^3.0.0-alpha.12", + "@stacks/ui-core": "^1.0.0-beta.6", "@styled-system/theme-get": "^5.1.2", "@types/mdx-js__react": "^1.5.2", - "@types/node": "^14.0.27", + "@types/node": "^14.6.2", "@types/nprogress": "^0.2.0", "@types/reach__tooltip": "^0.2.0", "algoliasearch": "^4.4.0", @@ -22,9 +30,11 @@ "cache-manager": "^3.3.0", "cache-manager-fs-hash": "^0.0.9", "capsize": "^1.1.0", - "csstype": "^3.0.2", + "csstype": "^3.0.3", "csvtojson": "^2.0.10", "docsearch.js": "^2.6.3", + "emotion": "^10.0.27", + "emotion-server": "^10.0.27", "fathom-client": "^3.0.0", "front-matter": "^4.0.2", "fs-extra": "^9.0.1", @@ -36,24 +46,25 @@ "lodash.debounce": "^4.0.8", "mdi-react": "7.3.0", "micro-memoize": "^4.0.9", + "modern-normalize": "^1.0.0", "next": "^9.5.2", "next-fonts": "^1.4.0", - "next-mdx-remote": "^0.6.0", + "next-mdx-remote": "^1.0.0", "nprogress": "^0.2.0", "p-all": "^3.0.0", - "preact": "^10.4.7", + "preact": "^10.4.8", "preact-render-to-string": "^5.1.4", "preact-ssr-prepass": "^1.1.1", - "prettier": "^2.0.5", + "prettier": "^2.1.1", "preval.macro": "^5.0.0", "react-gesture-responder": "^2.1.0", - "react-intersection-observer": "^8.26.2", + "react-intersection-observer": "^8.27.1", "react-spring": "^8.0.27", "remark": "^12.0.1", "remark-custom-blocks": "^2.5.0", "remark-emoji": "2.1.0", - "remark-external-links": "^6.1.0", - "remark-footnotes": "^1.0.0", + "remark-external-links": "^7.0.0", + "remark-footnotes": "^2.0.0", "remark-frontmatter": "^2.0.0", "remark-heading-id": "^1.0.0", "remark-images": "2.0.0", @@ -65,9 +76,10 @@ "remark-unwrap-images": "2.0.0", "remark-vscode": "^1.0.0-beta.2", "strip-markdown": "^3.1.2", - "swr": "^0.3.0", + "stylis": "^4.0.2", + "swr": "^0.3.1", "turndown": "^6.0.0", - "typescript": "^3.9.7", + "typescript": "^4.0.2", "unified-vscode": "^1.0.0-beta.2", "unist-builder": "^2.0.3", "unist-util-is": "^4.0.2", @@ -82,14 +94,17 @@ "@blockstack/eslint-config": "^1.0.5", "@blockstack/prettier-config": "^0.0.6", "@next/bundle-analyzer": "^9.5.2", + "@typescript-eslint/eslint-plugin": "^4.0.1", + "@typescript-eslint/parser": "^4.0.1", "babel-plugin-styled-components": "^1.11.0", - "eslint": "^7.6.0", + "eslint": "^7.8.0", + "eslint-plugin-import": "^2.22.0", + "eslint-plugin-prettier": "^3.1.4", "husky": "^4.2.5", - "next-transpile-modules": "^4.0.2", + "next-transpile-modules": "^4.1.0", "react": "^16.13.0", "react-dom": "^16.13.0", "rimraf": "^3.0.2", - "styled-components": "^5.0.1", "tsconfig-paths-webpack-plugin": "^3.3.0" }, "private": true, @@ -111,8 +126,12 @@ }, "resolutions": { "preact": "^10.4.4", - "@blockstack/ui": "2.12.2-beta.0", - "eslint": "^7.4.0" + "eslint": "^7.4.0", + "@emotion/cache": "^11.0.0-next.15", + "@emotion/core": "^11.0.0-next.10", + "@emotion/css": "^11.0.0-next.15", + "@emotion/react": "^11.0.0-next.15", + "@emotion/server": "^11.0.0-next.15" }, "husky": { "hooks": { diff --git a/src/common/hooks/use-lock-body-scroll.tsx b/src/common/hooks/use-lock-body-scroll.tsx index 50ee48c1..3055599d 100644 --- a/src/common/hooks/use-lock-body-scroll.tsx +++ b/src/common/hooks/use-lock-body-scroll.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useSafeLayoutEffect } from '@blockstack/ui'; +import { useSafeLayoutEffect } from '@stacks/ui'; export const useLockBodyScroll = (lock: boolean) => { useSafeLayoutEffect(() => { diff --git a/src/common/hooks/use-media-query.tsx b/src/common/hooks/use-media-query.tsx index 1b83ab45..e20b99be 100644 --- a/src/common/hooks/use-media-query.tsx +++ b/src/common/hooks/use-media-query.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useSafeLayoutEffect } from '@blockstack/ui'; +import { useSafeLayoutEffect } from '@stacks/ui'; const isBrowser = typeof window !== 'undefined'; diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts index e39a7f72..0ba07fc4 100644 --- a/src/common/utils/index.ts +++ b/src/common/utils/index.ts @@ -1,7 +1,7 @@ import { Children, isValidElement, ReactNode, ReactElement, ReactText } from 'react'; import { Property } from 'csstype'; -import { color } from '@blockstack/ui'; -import { ColorsStringLiteral } from '@blockstack/ui'; +import { color } from '@stacks/ui'; +import { ColorsStringLiteral } from '@stacks/ui'; const camelToKebab = (string: string) => string diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index 266dd8fc..002e621a 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -1,9 +1,7 @@ import React from 'react'; import { AppStateProvider } from '@components/app-state'; -import { MdxOverrides } from '@components/mdx/overrides'; import { ProgressBar } from '@components/progress-bar'; import { BaseLayout } from '@components/layouts/base-layout'; -import { ColorModes } from '@components/color-modes/styles'; import { Meta } from '@components/meta-head'; import { useFathom } from '@common/hooks/use-fathom'; @@ -12,8 +10,6 @@ export const AppWrapper: React.FC = ({ children, isHome }) => { return ( <> - - {children} diff --git a/src/components/back-button.tsx b/src/components/back-button.tsx index eaae471f..1bb0f93e 100644 --- a/src/components/back-button.tsx +++ b/src/components/back-button.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, Box, color, space } from '@blockstack/ui'; +import { Flex, Box, color, space } from '@stacks/ui'; import ArrowLeftIcon from 'mdi-react/ArrowLeftIcon'; import { Text } from '@components/typography'; import Link from 'next/link'; @@ -21,7 +21,7 @@ export const BackButton = ({ href, ...rest }) => ( cursor: 'pointer', color: color('text-title'), }} - align="center" + alignItems="center" as={href ? 'a' : 'div'} display="flex !important" {...rest} diff --git a/src/components/clarity-ref.tsx b/src/components/clarity-ref.tsx index 3c71947b..cb27c20a 100644 --- a/src/components/clarity-ref.tsx +++ b/src/components/clarity-ref.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Components } from '@components/mdx/mdx-components'; import { TableOfContents } from '@components/toc'; import hydrate from 'next-mdx-remote/hydrate'; -import { space } from '@blockstack/ui'; +import { space } from '@stacks/ui'; export const ClarityKeywordReference = React.memo(({ content, headings }: any) => { return ( diff --git a/src/components/cli-reference.tsx b/src/components/cli-reference.tsx index 3016697e..9de6be95 100644 --- a/src/components/cli-reference.tsx +++ b/src/components/cli-reference.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cliReferenceData from '../_data/cli-reference.json'; import { Components } from '@components/mdx/mdx-components'; -import { Grid, Box, color } from '@blockstack/ui'; +import { Grid, Box, color } from '@stacks/ui'; import { border, onlyText, slugify } from '@common/utils'; import hydrate from 'next-mdx-remote/hydrate'; diff --git a/src/components/color-modes/styles.tsx b/src/components/color-modes/styles.tsx index 32f5c651..6c4e09ba 100644 --- a/src/components/color-modes/styles.tsx +++ b/src/components/color-modes/styles.tsx @@ -1,87 +1,53 @@ -import { createGlobalStyle } from 'styled-components'; -import { generateCssVariables } from '@blockstack/ui'; - -export const ColorModes = createGlobalStyle` - :root{ - ${generateCssVariables('light')}; - --colors-highlight-line-bg: rgba(255,255,255,0.08); - } - - * { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - @media (prefers-color-scheme: dark) { - :root { - ${generateCssVariables('dark')}; - --colors-highlight-line-bg: rgba(255,255,255,0.04); - } - * { - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - } - } - - @media (prefers-color-scheme: light) { - :root { - ${generateCssVariables('light')}; - --colors-highlight-line-bg: rgba(255,255,255,0.08); - } - * { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - } - - html, body, #__next { - background: var(--colors-bg); - border-color: var(--colors-border); - - &.light { - ${generateCssVariables('light')}; - --colors-highlight-line-bg: rgba(255,255,255,0.08); - * { +/** @jsx jsx */ +import * as React from 'react'; +import { jsx, css, Global } from '@emotion/react'; +import { theme, generateCssVariables } from '@stacks/ui'; + +export const Base = ( + +); - input::placeholder, - textarea::placeholder { - color: var(--colors-input-placeholder) !important; - } - `; +export const ColorModes = Base; diff --git a/src/components/content-wrapper.tsx b/src/components/content-wrapper.tsx index a4210bfe..a091a446 100644 --- a/src/components/content-wrapper.tsx +++ b/src/components/content-wrapper.tsx @@ -1,14 +1,19 @@ import React from 'react'; -import { Flex, FlexProps, space } from '@blockstack/ui'; +import { Flex, FlexProps, space } from '@stacks/ui'; +import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; -const ContentWrapper: React.FC = props => ( +const ContentWrapper: ForwardRefExoticComponentWithAs = forwardRefWithAs< + FlexProps, + 'div' +>((props, ref) => ( -); +)); export { ContentWrapper }; diff --git a/src/components/custom-blocks/page-reference.tsx b/src/components/custom-blocks/page-reference.tsx index 260794cc..b19d426b 100644 --- a/src/components/custom-blocks/page-reference.tsx +++ b/src/components/custom-blocks/page-reference.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Flex, BoxProps, color, Grid, space } from '@blockstack/ui'; +import { Box, Flex, BoxProps, color, Grid, space } from '@stacks/ui'; import { BlockstackLogo } from '@components/icons/blockstack-logo'; import { StackIcon } from '@components/icons/stack'; import { SitemapIcon } from '@components/icons/sitemap'; @@ -9,7 +9,6 @@ import { Text } from '@components/typography'; import Link from 'next/link'; import { useAppState } from '@common/hooks/use-app-state'; import { Img } from '@components/mdx/image'; -import { css } from '@styled-system/css'; import { getCapsizeStyles, getHeadingStyles } from '@components/mdx/typography'; const Image = ({ @@ -42,13 +41,8 @@ const Image = ({ ); -const Title = ({ children, ...props }: BoxProps) => ( - +const Title: React.FC = ({ children, ...props }) => ( + {children} ); @@ -56,11 +50,9 @@ const Title = ({ children, ...props }: BoxProps) => ( const Description = ({ children, ...props }) => ( {children} @@ -94,7 +86,7 @@ const InlineCard = ({ page }) => { flexDirection={['column', 'row', 'row', 'row']} p={space('base-loose')} borderRadius="12px" - align="center" + alignItems="center" transition={transition()} boxShadow={hover ? 'mid' : 'none'} position="relative" @@ -126,7 +118,7 @@ const InlineCard = ({ page }) => { mt={space(['base', 'none', 'none', 'none'])} textAlign={['center', 'left', 'left', 'left']} > - + { borderRadius="18px" px={space('base-tight')} height="20px" - align="center" + alignItems="center" justify="center" fontSize="12px" bg={color('border')} @@ -175,7 +167,7 @@ const GridCardImage: React.FC< bg="#9985FF" position="relative" borderRadius="12px" - mb={space('loose')} + marginBottom="base" overflow="hidden" {...props} > @@ -225,6 +217,7 @@ const GridCard: React.FC<BoxProps & { page?: any }> = React.memo(({ page, ...res alt={`Graphic for: ${page.title || page.headings[0]}`} src={page?.images?.large} isHovered={hover || active} + mb={'loose'} /> <GridItemDetails page={page} /> </Box> @@ -264,7 +257,7 @@ const GridSmallItem: React.FC<BoxProps & { page?: any }> = ({ page, ...rest }) = {...rest} {...bind} > - {page.icon ? <Icon mb={space('base')} /> : null} + {page.icon ? <Icon mb={space('loose')} /> : null} <GridItemDetails page={page} /> </Box> ); @@ -297,7 +290,6 @@ export const PageReference: React.FC<BoxProps> = React.memo(({ children, ...rest return ( <Box {...rest}> <Grid - display="grid" width="100%" gridColumnGap={space('extra-loose')} gridRowGap={space('extra-loose')} diff --git a/src/components/example.tsx b/src/components/example.tsx index 64ba851c..594e4333 100644 --- a/src/components/example.tsx +++ b/src/components/example.tsx @@ -10,7 +10,7 @@ import { ChevronIcon, themeColor, FlexProps, -} from '@blockstack/ui'; +} from '@stacks/ui'; import { Caption, Text } from '@components/typography'; import { border } from '@common/utils'; @@ -33,7 +33,7 @@ const AppItem: React.FC<FlexProps & { name: string; usage: string }> = ({ ...rest }) => ( <ListItem {...rest}> - <Flex align="center"> + <Flex alignItems="center"> <Box bg={color('bg-alt')} border={border()} @@ -43,7 +43,7 @@ const AppItem: React.FC<FlexProps & { name: string; usage: string }> = ({ /> <Title>{name} - + {usage} @@ -52,7 +52,7 @@ const AppItem: React.FC = ({ const ListItem: React.FC = props => ( = props => ( width={['100%', '320px', '320px', '320px']} {...props} > - + Data storage Connected to - + My Gaia Hub - + @@ -106,7 +111,7 @@ export const exampleCode = ` borderRadius="lg" width="320px"> @@ -127,7 +132,7 @@ export const exampleCode = ` export const gaiaHubUsage = ` - + - + {usage} { - + {title} {description} diff --git a/src/components/feedback.tsx b/src/components/feedback.tsx index e003a1f4..d7eb77c0 100644 --- a/src/components/feedback.tsx +++ b/src/components/feedback.tsx @@ -9,7 +9,7 @@ import { Stack, transition, SlideFade, -} from '@blockstack/ui'; +} from '@stacks/ui'; import { Text } from '@components/typography'; import { Link } from '@components/mdx'; import { SadIcon, NeutralIcon, HappyIcon } from '@components/icons/feedback'; @@ -17,7 +17,7 @@ import { useTouchable } from '@common/hooks/use-touchable'; import { border } from '@common/utils'; import { useRouter } from 'next/router'; import { getHeadingStyles } from '@components/mdx/typography'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { StatusCheck } from '@components/status-check'; import { useColorMode } from '@common/hooks/use-color-mode'; @@ -49,7 +49,7 @@ const FeedbackCard = ({ show, onClose }) => { p={space('base')} border={border()} borderRadius="12px" - align="center" + alignItems="center" justifyContent="center" bg={color('bg')} size="100%" @@ -108,13 +108,7 @@ export const FeedbackSection: React.FC = props => { > - - Was this page helpful? - + Was this page helpful? handleShow()} icon={SadIcon} /> handleShow()} icon={NeutralIcon} /> @@ -126,7 +120,7 @@ export const FeedbackSection: React.FC = props => { { @@ -23,19 +23,19 @@ export const Glossary = ({ data }) => { + css({ + '& p': { + display: 'block', + wordBreak: 'break-word', + hyphens: 'auto', + }, + code: { + wordBreak: 'break-all', + }, + })(theme) + } > {hydrate(entry.definition, Components)} diff --git a/src/components/header.tsx b/src/components/header.tsx index f26aebfc..7df06d74 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -10,13 +10,13 @@ import { ChevronIcon, FlexProps, Fade, -} from '@blockstack/ui'; +} from '@stacks/ui'; import { Link, LinkProps, Text } from '@components/typography'; import MenuIcon from 'mdi-react/MenuIcon'; import CloseIcon from 'mdi-react/CloseIcon'; import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; -import { css } from '@styled-system/css'; +import { css, ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; import NextLink from 'next/link'; import { ColorModeButton } from '@components/color-mode-button'; import { PAGE_WIDTH } from '@common/constants'; @@ -41,7 +41,7 @@ const MenuButton = ({ ...rest }: any) => { ); }; -const HeaderWrapper: React.FC = React.forwardRef((props, ref) => ( +const HeaderWrapper: React.FC = React.forwardRef((props, ref: any) => ( )); @@ -88,27 +88,30 @@ const nav: NavItem[] = [ export const HEADER_HEIGHT = 132; -const HeaderTextItem: React.FC = ({ children, href, as, ...rest }) => ( +const HeaderTextItem: ForwardRefExoticComponentWithAs = forwardRefWithAs< + BoxProps & LinkProps, + 'a' +>(({ children, href, as = 'a', ...rest }, ref) => ( {children} -); +)); const NavItem: React.FC = ({ item, ...props }) => { const { hover, active, bind } = useTouchable({ @@ -200,29 +203,21 @@ const Navigation: React.FC = props => { const LogoLink = () => { const { hover, active, bind } = useTouchable(); - const router = useRouter(); return ( - - + + - - Blockstack - + + Blockstack + @@ -236,7 +231,7 @@ const Header = ({ hideSubBar, ...rest }: any) => { { {...rest} > - + diff --git a/src/components/home/card.tsx b/src/components/home/card.tsx index d6639afc..6a7e918a 100644 --- a/src/components/home/card.tsx +++ b/src/components/home/card.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Grid, Box, Flex, space, color, transition, FlexProps } from '@blockstack/ui'; +import { Grid, Box, Flex, space, color, transition, FlexProps } from '@stacks/ui'; import NextLink from 'next/link'; import { useTouchable } from '@common/hooks/use-touchable'; diff --git a/src/components/home/common.tsx b/src/components/home/common.tsx index e9f34ab9..3cc75eaa 100644 --- a/src/components/home/common.tsx +++ b/src/components/home/common.tsx @@ -1,14 +1,23 @@ import React from 'react'; -import { Box, Grid, Flex, BoxProps, transition, space, themeColor, color } from '@blockstack/ui'; -import { GridProps } from '@blockstack/ui/dist/ui/src/grid/types'; +import { + Box, + Grid, + Flex, + BoxProps, + transition, + space, + GridProps, + color, + FlexProps, +} from '@stacks/ui'; import { CONTENT_MAX_WIDTH } from '@common/constants'; export const CircleIcon: React.FC< - BoxProps & { icon: React.FC; hover?: boolean; dark?: boolean } + FlexProps & { icon: React.FC; hover?: boolean; dark?: boolean } > = ({ size = '72px', icon: Icon, hover, dark, ...rest }) => ( { diff --git a/src/components/home/sections/hero.tsx b/src/components/home/sections/hero.tsx deleted file mode 100644 index ea08c54b..00000000 --- a/src/components/home/sections/hero.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { Box, Grid, space, color } from '@blockstack/ui'; -import { CircleIcon } from '@components/home/common'; -import { CONTENT_MAX_WIDTH } from '@common/constants'; -import { Card } from '@components/home/card'; -import { Body, H1, BodyLarge, SubHeading } from '@components/home/text'; -import { HEADER_HEIGHT } from '@components/header'; - -export const Hero = ({ cards }: { cards?: any }) => { - return ( - <> - - -

Easily build decentralized apps

- - Blockstack is a developer-friendly toolkit for building decentralized apps, anchored in - the Bitcoin blockchain. - - - - - {cards.map(({ href, title, subtitle, icon: Icon }, index) => ( - - {({ hover, active }) => ( - - - - {title} - - - {subtitle} - - - )} - - ))} - - - ); -}; diff --git a/src/components/home/text.tsx b/src/components/home/text.tsx index bb1b014f..dc1982e3 100644 --- a/src/components/home/text.tsx +++ b/src/components/home/text.tsx @@ -1,25 +1,25 @@ import React from 'react'; -import { Box, BoxProps, color } from '@blockstack/ui'; +import { Box, BoxProps, color } from '@stacks/ui'; import { Text } from '@components/typography'; -import { css } from '@styled-system/css'; +import { getCapsizeStyles } from '@components/mdx/typography'; export const H1: React.FC = ({ children, ...rest }) => ( = ({ children, ...rest }) => ( display: 'block', height: 0, }, - })} + }} as="h1" > {children} @@ -40,26 +40,26 @@ export const H1: React.FC = ({ children, ...rest }) => ( export const H2: React.FC = ({ children, ...rest }) => ( {children} @@ -69,26 +69,26 @@ export const H2: React.FC = ({ children, ...rest }) => ( export const BodyLarge: React.FC = ({ children, ...rest }) => ( {children} @@ -97,53 +97,32 @@ export const BodyLarge: React.FC = ({ children, ...rest }) => ( export const SubHeading = ({ as, children, ...rest }: any) => ( {children} ); export const Body = ({ as, children, ...rest }: any) => ( - + {children} ); diff --git a/src/hover-image.tsx b/src/components/hover-image.tsx similarity index 95% rename from src/hover-image.tsx rename to src/components/hover-image.tsx index 3ffb3d79..c1c2f308 100644 --- a/src/hover-image.tsx +++ b/src/components/hover-image.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, BoxProps, Grid, space } from '@blockstack/ui'; +import { Box, BoxProps, Grid, space } from '@stacks/ui'; import { transition } from '@common/utils'; import { Img } from '@components/mdx/image'; diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx index 55a2a6fc..5ea45692 100644 --- a/src/components/icon-button.tsx +++ b/src/components/icon-button.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, Ref } from 'react'; -import { Box, color } from '@blockstack/ui'; +import { Box, color } from '@stacks/ui'; import { LinkProps } from '@components/typography'; export const IconButton = forwardRef((props: LinkProps, ref: Ref) => ( diff --git a/src/components/icons/_base.tsx b/src/components/icons/_base.tsx index 7184cbbd..01a1c5a7 100644 --- a/src/components/icons/_base.tsx +++ b/src/components/icons/_base.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; -import { SVGProps } from 'react'; - -export type SvgProps = React.FC>; +import { Box, BoxProps } from '@stacks/ui'; +export type SvgProps = React.FC; export const BaseSvg: SvgProps = props => ( > = props => ( +export const AccessibleIcon: React.FC = props => ( > = props => ( +import { Box, BoxProps } from '@stacks/ui'; +export const AtomIcon: React.FC = props => ( ( diff --git a/src/components/icons/dark-mode.tsx b/src/components/icons/dark-mode.tsx index 6e3fe128..c86f7d22 100644 --- a/src/components/icons/dark-mode.tsx +++ b/src/components/icons/dark-mode.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; +import { Box, BoxProps } from '@stacks/ui'; export const DarkModeIcon = (props: BoxProps) => ( diff --git a/src/components/icons/feedback.tsx b/src/components/icons/feedback.tsx index 7f7737ca..443d826f 100644 --- a/src/components/icons/feedback.tsx +++ b/src/components/icons/feedback.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { Box, BoxProps, transition } from '@blockstack/ui'; -import { SVGProps } from 'react'; - -export type SvgProps = React.FC>; +import { Box, BoxProps, transition } from '@stacks/ui'; +export type SvgProps = React.FC; export const SadIcon: SvgProps = ({ bg = '#E1E3E8', ...props }) => ( ( diff --git a/src/components/icons/magnifying-glass.tsx b/src/components/icons/magnifying-glass.tsx index 3744fc60..8e92e87b 100644 --- a/src/components/icons/magnifying-glass.tsx +++ b/src/components/icons/magnifying-glass.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; +import { Box, BoxProps } from '@stacks/ui'; interface MagnifyingGlassProps extends BoxProps { size?: number; diff --git a/src/components/icons/package.tsx b/src/components/icons/package.tsx index 2e64f9b5..33cabb82 100644 --- a/src/components/icons/package.tsx +++ b/src/components/icons/package.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; -import { SVGProps } from 'react'; - -export const PackageIcon: React.FC> = props => ( +import { Box, BoxProps } from '@stacks/ui'; +export const PackageIcon: React.FC = props => ( > = props => ( +import { Box, BoxProps } from '@stacks/ui'; +export const PaintIcon: React.FC = props => ( > = props => ( +import { Box, BoxProps } from '@stacks/ui'; +export const PaletteIcon: React.FC = props => ( = ({ src, srcSet, style = {}, placeholder, ...props }) => { +export const LazyImage: ForwardRefExoticComponentWithAs = forwardRefWithAs< + BoxProps, + 'img' +>(({ as = 'img', src, srcSet, style = {}, placeholder, ...props }, forwardedRef) => { const [ref, inView] = useInView({ triggerOnce: true, rootMargin: '200px 0px', @@ -134,18 +131,20 @@ export const LazyImage: React.FC< maxWidth="100%" width={['100%', '100%', 'inherit', 'inherit']} display="block" - as={animated.img} + as={(animated.img as unknown) as 'img'} zIndex={99} - style={{ - opacity: 0, - willChange: 'opacity', - ...style, - ...styleProps, - }} - {...source} - {...props} + style={ + { + opacity: 0, + willChange: 'opacity', + ...style, + ...styleProps, + } as any + } + {...(source as any)} + {...(props as any)} /> ) : null} ); -}; +}); diff --git a/src/components/main.tsx b/src/components/main.tsx index a8d8292e..2948db83 100644 --- a/src/components/main.tsx +++ b/src/components/main.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; +import { Box, BoxProps } from '@stacks/ui'; const Main = (props: BoxProps) => ; diff --git a/src/components/mdx/components/blockquote.tsx b/src/components/mdx/components/blockquote.tsx index e9646d0d..e6b06a14 100644 --- a/src/components/mdx/components/blockquote.tsx +++ b/src/components/mdx/components/blockquote.tsx @@ -1,8 +1,8 @@ -import { Box, Flex, BoxProps, color, themeColor, space } from '@blockstack/ui'; +import { Box, Flex, BoxProps, color, themeColor, space } from '@stacks/ui'; import React from 'react'; import { border } from '@common/utils'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { CheckCircleIcon } from '@components/icons/check-circle'; import { AlertTriangleIcon } from '@components/icons/alert-triangle'; import { AlertCircleIcon } from '@components/icons/alert-circle'; @@ -61,12 +61,12 @@ export const Blockquote: React.FC = React.memo( display="block" my={space('extra-loose')} className={className} - ref={ref} + ref={ref as any} {...rest} > = React.memo( boxShadow: isAlert ? 'mid' : 'unset', py: space('base'), px: space('base'), - '& p': { - flexGrow: 1, - pt: '4px', - }, - ...styles, - })} + }} + css={theme => + css({ + '& p': { + flexGrow: 1, + pt: '4px', + }, + })(theme) + } + {...styles} > {Icon && ( - + diff --git a/src/components/mdx/components/code.tsx b/src/components/mdx/components/code.tsx index 622f9f75..5656e02b 100644 --- a/src/components/mdx/components/code.tsx +++ b/src/components/mdx/components/code.tsx @@ -1,9 +1,9 @@ import React, { Children } from 'react'; -import { Box, Flex, BoxProps, color, space, useClipboard, themeColor } from '@blockstack/ui'; +import { Box, Flex, BoxProps, color, space, useClipboard, themeColor } from '@stacks/ui'; import { ClipboardCheckIcon } from '@components/icons/clipboard-check'; import { border, onlyText } from '@common/utils'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { Text } from '@components/typography'; import { useHover } from 'use-events'; import { IconButton } from '@components/icon-button'; @@ -66,16 +66,23 @@ export const Code: React.FC< > @@ -188,14 +190,12 @@ const preProps = { export const InlineCode: React.FC = ({ children, ...rest }) => ( {children} diff --git a/src/components/mdx/components/heading.tsx b/src/components/mdx/components/heading.tsx index c09c3d50..38d39104 100644 --- a/src/components/mdx/components/heading.tsx +++ b/src/components/mdx/components/heading.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, FlexProps, BoxProps, color, useClipboard, space } from '@blockstack/ui'; +import { Box, Flex, FlexProps, BoxProps, color, useClipboard, space } from '@stacks/ui'; import React from 'react'; import LinkIcon from 'mdi-react/LinkVariantIcon'; @@ -7,10 +7,10 @@ import { useTouchable } from '@common/hooks/use-touchable'; import { Tooltip } from '@components/tooltip'; import { useActiveHeading } from '@common/hooks/use-active-heading'; import { Title } from '@components/typography'; -import { css } from '@styled-system/css'; import { getHeadingStyles, baseTypeStyles } from '@components/mdx/typography'; import { useRouter } from 'next/router'; import { Link } from '@components/mdx/components/link'; +import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; const LinkButton = React.memo(({ link, onClick, ...rest }: BoxProps & { link: string }) => { const url = @@ -49,7 +49,7 @@ const LinkButton = React.memo(({ link, onClick, ...rest }: BoxProps & { link: st }); // this is to adjust the offset of where the page scrolls to when an anchor is present -const AnchorOffset = ({ id }: BoxProps) => +const AnchorOffset: React.FC = ({ id }) => id ? ( ( ( ); -export const Heading = ({ as, children, id, ...rest }: FlexProps) => { - const { isActive, doChangeActiveSlug } = useActiveHeading(id); +export const Heading: ForwardRefExoticComponentWithAs< + FlexProps, + 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' +> = forwardRefWithAs( + ({ as, children, id, ...rest }) => { + const { isActive, doChangeActiveSlug } = useActiveHeading(id); - const { bind: _bind, hover, active } = useTouchable(); - const router = useRouter(); + const { bind: _bind, hover, active } = useTouchable(); + const router = useRouter(); - const link = `#${id}`; + const link = `#${id}`; - const handleLinkClick = () => { - void router.push(router.pathname, router.pathname + link, { shallow: true }); - doChangeActiveSlug(id); - }; - const styles = getHeadingStyles(as as any); + const handleLinkClick = () => { + void router.push(router.pathname, router.pathname + link, { shallow: true }); + doChangeActiveSlug(id); + }; + const styles = getHeadingStyles(as as any); - const bind = id ? _bind : {}; + const bind = id ? _bind : {}; - return ( - - <Box as="span">{children}</Box> - <AnchorOffset id={id} /> - {id && isActive && <Hashtag />} - {id && <LinkButton opacity={hover ? 1 : 0} link={link} />} - - ); -}; + return ( + + <Box as="span">{children}</Box> + <AnchorOffset id={id} /> + {id && isActive && <Hashtag />} + {id && <LinkButton opacity={hover ? 1 : 0} link={link} />} + + ); + } +); -export const BaseHeading: React.FC = React.memo(props => ( - +export const BaseHeading: React.FC = React.memo(({ ...props }) => ( + )); diff --git a/src/components/mdx/components/link.tsx b/src/components/mdx/components/link.tsx index 64e5e030..19b034e2 100644 --- a/src/components/mdx/components/link.tsx +++ b/src/components/mdx/components/link.tsx @@ -1,11 +1,11 @@ -import { Box, BoxProps, color, space, Fade } from '@blockstack/ui'; +import { Box, BoxProps, color, space, Fade } from '@stacks/ui'; import NextLink from 'next/link'; import React, { forwardRef, Ref } from 'react'; import { useAppState } from '@common/hooks/use-app-state'; import { border, transition } from '@common/utils'; import { Text } from '@components/typography'; import { useTouchable } from '@common/hooks/use-touchable'; -import { css } from '@styled-system/css'; +import { css, forwardRefWithAs } from '@stacks/ui-core'; import { getHeadingStyles } from '@components/mdx/typography'; import { PageMeta } from '@components/page-meta'; @@ -58,10 +58,10 @@ const Card = ({ route, styles, ...rest }) => { > {description} @@ -120,23 +120,18 @@ export const LinkWithHover = forwardRef( } ); -export const Link = forwardRef( - ( - props: { href?: string; target?: string; rel?: string } & BoxProps, - ref: Ref - ) => { - return ( - - ); - } -); +export const Link = forwardRefWithAs((props, ref) => { + return ( + + ); +}); diff --git a/src/components/mdx/components/list.tsx b/src/components/mdx/components/list.tsx index b5acd9e3..a01e646c 100644 --- a/src/components/mdx/components/list.tsx +++ b/src/components/mdx/components/list.tsx @@ -1,4 +1,4 @@ -import { Box, BoxProps, color, space } from '@blockstack/ui'; +import { Box, BoxProps, color, space } from '@stacks/ui'; import React, { forwardRef, Ref } from 'react'; export const Ol: React.FC = props => ( diff --git a/src/components/mdx/components/section.tsx b/src/components/mdx/components/section.tsx index 6a9a5630..dd9107b2 100644 --- a/src/components/mdx/components/section.tsx +++ b/src/components/mdx/components/section.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; +import { Box, BoxProps } from '@stacks/ui'; export const Section: React.FC = React.memo( React.forwardRef(({ children, ...rest }, ref) => { diff --git a/src/components/mdx/components/table.tsx b/src/components/mdx/components/table.tsx index 807ebb43..0abb159b 100644 --- a/src/components/mdx/components/table.tsx +++ b/src/components/mdx/components/table.tsx @@ -1,4 +1,4 @@ -import { Box, color, space } from '@blockstack/ui'; +import { Box, color, space } from '@stacks/ui'; import React from 'react'; import { P } from '@components/mdx/components'; import { border } from '@common/utils'; diff --git a/src/components/mdx/components/typography.tsx b/src/components/mdx/components/typography.tsx index d3e18a92..bfc1dffd 100644 --- a/src/components/mdx/components/typography.tsx +++ b/src/components/mdx/components/typography.tsx @@ -1,21 +1,44 @@ -import { Box, BoxProps, color, space } from '@blockstack/ui'; +import { Box, BoxProps, color, space } from '@stacks/ui'; import React from 'react'; import { Text } from '@components/typography'; import { BaseHeading } from '@components/mdx/components/heading'; +import { forwardRefWithAs, ForwardRefExoticComponentWithAs } from '@stacks/ui-core'; -export const H1: React.FC = props => ; -export const H2: React.FC = props => ; -export const H3: React.FC = props => ; -export const H4: React.FC = props => ; -export const H5: React.FC = props => ; -export const H6: React.FC = props => ; +export const H1: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); +export const H2: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); +export const H3: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); +export const H4: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); +export const H5: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); +export const H6: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); -export const Br: React.FC = props => ; -export const Hr: React.FC = props => ( - +export const Br: ForwardRefExoticComponentWithAs = forwardRefWithAs( + props => +); +export const Hr: ForwardRefExoticComponentWithAs = forwardRefWithAs( + props => ); -export const P: React.FC = props => ; +export const P: ForwardRefExoticComponentWithAs = forwardRefWithAs( + (props, ref) => +); -export const Pre = (props: any) => ; -export const Sup: React.FC = props => ; +export const Pre: ForwardRefExoticComponentWithAs = forwardRefWithAs< + BoxProps, + 'pre' +>((props, ref) => ); +export const Sup: ForwardRefExoticComponentWithAs = forwardRefWithAs< + BoxProps, + 'sup' +>((props, ref) => ); diff --git a/src/components/mdx/image.tsx b/src/components/mdx/image.tsx index d1ce61da..927c1a0b 100644 --- a/src/components/mdx/image.tsx +++ b/src/components/mdx/image.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { Box, BoxProps } from '@blockstack/ui'; +import { Box, BoxProps } from '@stacks/ui'; import { useRouter } from 'next/router'; +import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; const imgix = 'https://stacks-documentation.imgix.net'; @@ -18,7 +19,7 @@ const getUrl = pathname => { }; const useImgix = (src: string) => { - if (process.env.NODE_ENV !== 'production' || !src) + if (process.env.NEXT_PUBLIC_STAGING || process.env.NODE_ENV !== 'production' || !src) return { src, srcset: undefined, @@ -56,30 +57,29 @@ const getAspectRatio = dimensions => { return (height / width) * 100; }; -const BaseImg: React.FC< - BoxProps & { - src?: string; - srcSet?: string; - loading?: string; +const BaseImg: ForwardRefExoticComponentWithAs = forwardRefWithAs( + ({ as = 'img', style = {}, ...props }, ref) => { + return ( + + ); } -> = ({ style = {}, ...props }) => { - return ( - - ); -}; +); -export const Img: React.FC< - BoxProps & { loading?: string; src?: string; alt?: string; dimensions?: any } +export const Img: ForwardRefExoticComponentWithAs< + BoxProps & { loading?: string; dimensions?: any }, + 'img' > = React.memo(({ src: _src, dimensions, ...rest }) => { const { src, srcset } = useImgix(_src); @@ -99,9 +99,9 @@ export const Img: React.FC< return ( - + ); } - return ; + return ; }); diff --git a/src/components/mdx/md-contents.tsx b/src/components/mdx/md-contents.tsx index a9ae8eb3..fa0d33dc 100644 --- a/src/components/mdx/md-contents.tsx +++ b/src/components/mdx/md-contents.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Box, space, themeColor, color } from '@blockstack/ui'; +import { Box, space, themeColor, color } from '@stacks/ui'; import { ContentWrapper } from '../content-wrapper'; import { TableOfContents } from '@components/toc'; -import { css } from '@styled-system/css'; import { TOC_WIDTH } from '@common/constants'; import { useRouter } from 'next/router'; import dynamic from 'next/dynamic'; @@ -11,7 +10,8 @@ import { border } from '@common/utils'; import { getCapsizeStyles } from '@components/mdx/typography'; import { MDXProvider } from '@mdx-js/react'; import { MDXComponents } from '@components/mdx'; -export const styleOverwrites = { +import { css, ThemeUICSSObject } from '@stacks/ui-core'; +export const styleOverwrites: ThemeUICSSObject = { '& > section': { '&:nth-child(2)': { '& > *:first-child, & > section:first-child > *:first-child': { @@ -75,7 +75,7 @@ export const styleOverwrites = { 'p, li': { overflowWrap: 'break-word', display: 'inline-block', - ...getCapsizeStyles(16, 26), + ...getCapsizeStyles(16, 26, ':'), }, li: { '& > p': { @@ -129,7 +129,7 @@ export const styleOverwrites = { h2: { mt: '64px', '&, & > *': { - ...getHeadingStyles('h2'), + ...getHeadingStyles('h2', ':'), }, '& > code': { px: space('tight'), @@ -144,7 +144,7 @@ export const styleOverwrites = { h3: { mt: '64px', '&, & > *': { - ...getHeadingStyles('h3'), + ...getHeadingStyles('h3', ':'), }, '& + section > h4': { mt: 0, @@ -153,7 +153,7 @@ export const styleOverwrites = { h4: { mt: '64px', '&, & > *': { - ...getHeadingStyles('h4'), + ...getHeadingStyles('h4', ':'), }, '& + section > h5': { mt: 0, @@ -162,19 +162,19 @@ export const styleOverwrites = { h5: { mt: space('extra-loose'), '&, & > *': { - ...getHeadingStyles('h5'), + ...getHeadingStyles('h5', ':'), }, }, h6: { mt: space('extra-loose'), '&, & > *': { - ...getHeadingStyles('h6'), + ...getHeadingStyles('h6', ':'), }, }, h1: { mt: space('extra-loose'), '&, & > *': { - ...getHeadingStyles('h1'), + ...getHeadingStyles('h1', ':'), }, '& + *': { mt: space('extra-loose'), @@ -251,9 +251,9 @@ export const MDContents: React.FC = ({ pageTop: PageTop = null, headings, c <> css(styleOverwrites)(theme)} pr={!isHome && ['0', '0', '0', 'extra-loose']} > {PageTop && } diff --git a/src/components/mdx/overrides.tsx b/src/components/mdx/overrides.tsx index 948aba17..3d0ad5da 100644 --- a/src/components/mdx/overrides.tsx +++ b/src/components/mdx/overrides.tsx @@ -1,103 +1,125 @@ import React from 'react'; -import { color } from '@blockstack/ui'; -import { createGlobalStyle } from 'styled-components'; +import { color } from '@stacks/ui'; +import { css, Global } from '@emotion/react'; -const GlobalStyles = createGlobalStyle` -:root { - --reach-tooltip: 1; -} +const GlobalStyles = ( + pre { - color: ${color('accent')} !important; - } -} -`; -export const MdxOverrides: React.FC = props => ( - <> - - + pre { + display: inline-block; + } + p, + ul, + ol, + table { + color: ${color('text-body')}; + a > pre { + color: ${color('accent')} !important; + } + } + `} + /> ); +export const MdxOverrides = GlobalStyles; diff --git a/src/components/mdx/styles.tsx b/src/components/mdx/styles.tsx index 8489d0a2..015ccbe5 100644 --- a/src/components/mdx/styles.tsx +++ b/src/components/mdx/styles.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { color, space, themeColor } from '@blockstack/ui'; +import { color, space, themeColor } from '@stacks/ui'; import { getHeadingStyles } from '@components/mdx/typography'; import { border } from '@common/utils'; import { getCapsizeStyles } from '@components/mdx/typography'; diff --git a/src/components/mdx/typography.ts b/src/components/mdx/typography.ts index 7fd775dc..c2e34aef 100644 --- a/src/components/mdx/typography.ts +++ b/src/components/mdx/typography.ts @@ -14,54 +14,64 @@ export const baseTypeStyles = { fontFamily: `'Soehne', Inter, sans-serif`, }; -export const getCapsizeStyles = (fontSize, leading) => - capsize({ +export const getCapsizeStyles = (fontSize, leading, prefix = '_') => { + const styles = capsize({ fontMetrics, fontSize, leading, }); -const h1 = { - fontWeight: 600, - ...getCapsizeStyles(36, 42), + Object.keys(styles).forEach(prop => { + if (prop.startsWith('::')) { + styles[prop.replace('::', prefix)] = styles[prop]; + delete styles[prop]; + } + }); + + return styles; }; -const h2 = { +const h1 = prefix => ({ + fontWeight: 600, + ...getCapsizeStyles(36, 42, prefix), +}); + +const h2 = prefix => ({ fontWeight: 500, - ...getCapsizeStyles(24, 32), -}; + ...getCapsizeStyles(24, 32, prefix), +}); -const h3 = { +const h3 = prefix => ({ fontWeight: 500, - ...getCapsizeStyles(18, 28), -}; + ...getCapsizeStyles(18, 28, prefix), +}); -const h4 = { +const h4 = prefix => ({ fontWeight: 400, - ...getCapsizeStyles(20, 32), -}; + ...getCapsizeStyles(20, 32, prefix), +}); -const h5 = { +const h5 = prefix => ({ fontWeight: 400, - ...getCapsizeStyles(16, 26), -}; + ...getCapsizeStyles(16, 26, prefix), +}); -const h6 = { +const h6 = prefix => ({ fontWeight: 400, - ...getCapsizeStyles(14, 20), -}; + ...getCapsizeStyles(14, 20, prefix), +}); -const headings = { - h1, - h2, - h3, - h4, - h5, - h6, -}; +const headings = (as, prefix) => ({ + h1: h1(prefix), + h2: h2(prefix), + h3: h3(prefix), + h4: h4(prefix), + h5: h5(prefix), + h6: h6(prefix), +}); -export const getHeadingStyles = (as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => { +export const getHeadingStyles = (as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', prefix = '_') => { return { - ...headings[as], + ...headings(as, prefix)[as], }; }; diff --git a/src/components/mobile-menu.tsx b/src/components/mobile-menu.tsx index d7be11cc..936f3ea7 100644 --- a/src/components/mobile-menu.tsx +++ b/src/components/mobile-menu.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, Box, FlexProps, color, space, CloseIcon, Fade, Transition } from '@blockstack/ui'; +import { Flex, Box, FlexProps, color, space, CloseIcon, Fade, Transition } from '@stacks/ui'; import { SideNav } from '@components/side-nav'; import { useLockBodyScroll } from '@common/hooks/use-lock-body-scroll'; import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; @@ -68,7 +68,7 @@ export const MobileMenu: React.FC = props => { borderLeft={border()} > = ({ level, small, ...rest }) => ( - + - + {level} ); -const Duration: React.FC = ({ +const Duration: React.FC = ({ value, small, ...rest }) => ( - + - - {value} - + {value} ); diff --git a/src/components/page-top.tsx b/src/components/page-top.tsx index ea310d4b..580b44b1 100644 --- a/src/components/page-top.tsx +++ b/src/components/page-top.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { Box, Flex, Stack, space, BoxProps } from '@blockstack/ui'; +import { Box, Flex, Stack, space, BoxProps } from '@stacks/ui'; import { H1 } from '@components/mdx'; import { Text } from '@components/typography'; import { useRouter } from 'next/router'; import dynamic from 'next/dynamic'; import { getTitle } from '@common/utils'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { getHeadingStyles } from '@components/mdx/typography'; const Search = dynamic(() => import('@components/search')); import { PageMeta } from '@components/page-meta'; @@ -38,13 +38,7 @@ export const PageTop: React.FC = React.memo( {description ? ( - - {description} - + {description} ) : null} diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx index 5953c94c..d26216e7 100644 --- a/src/components/pagination.tsx +++ b/src/components/pagination.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, BoxProps, Flex, Grid, color, space, transition } from '@blockstack/ui'; +import { Box, BoxProps, Flex, Grid, color, space, transition } from '@stacks/ui'; import { useAppState } from '@common/hooks/use-app-state'; import { useRouter } from 'next/router'; import { border, getTitle } from '@common/utils'; @@ -7,7 +7,7 @@ import NextLink from 'next/link'; import { Caption, Text, Link } from '@components/typography'; import { useTouchable } from '@common/hooks/use-touchable'; import { getHeadingStyles } from '@components/mdx/typography'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { ArrowRightIcon } from '@components/icons/arrow-right'; import { ArrowLeftIcon } from '@components/icons/arrow-left'; @@ -82,9 +82,7 @@ const Pretitle: React.FC = props => ( display="block" color={color('text-caption')} transition={transition} - css={css({ - ...getHeadingStyles('h6'), - })} + {...getHeadingStyles('h6')} {...props} /> ); @@ -97,9 +95,7 @@ const Title: React.FC = ({ isHovered, ...pro transition={transition} color={isHovered ? color('accent') : color('text-title')} mb={space('tight')} - css={css({ - ...getHeadingStyles('h4'), - })} + {...getHeadingStyles('h4')} {...props} /> ); @@ -112,7 +108,7 @@ const PrevCard: React.FC = React.memo(props => { {({ hover, active }) => ( <> - + = React.memo(props => { const { next } = usePaginateRoutes(); return next ? ( - + {({ hover, active }) => ( <> - + ; export const useProgressBar = () => { + // eslint-disable-next-line @typescript-eslint/unbound-method const { start, done } = NProgress; return { @@ -70,7 +71,7 @@ export const useProgressBar = () => { }; }; -export const ProgressBar = () => { +export const ProgressBar = React.memo(() => { // eslint-disable-next-line @typescript-eslint/unbound-method const start = debounce(NProgress.start, 450); React.useEffect(() => { @@ -86,9 +87,5 @@ export const ProgressBar = () => { NProgress.done(); }); }, []); - return ( - <> - - - ); -}; + return <>; +}); diff --git a/src/components/search.tsx b/src/components/search.tsx index c4b904ce..0690268b 100644 --- a/src/components/search.tsx +++ b/src/components/search.tsx @@ -10,14 +10,14 @@ import { BoxProps, Grid, Stack, -} from '@blockstack/ui'; +} from '@stacks/ui'; import { useDocSearchKeyboardEvents } from '@docsearch/react'; import { Text } from '@components/typography'; import { SearchIcon } from '@components/icons/search'; import Router from 'next/router'; import Link from 'next/link'; import { getCapsizeStyles } from '@components/mdx/typography'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { border } from '@common/utils'; const getLocalUrl = href => { @@ -58,12 +58,12 @@ const Key: React.FC = React.memo(({ children, ...rest }) => ( {...rest} > {children} @@ -148,13 +148,13 @@ export const SearchBox: React.FC = React.memo(props => { }} {...props} > - + = React.memo(props => { Search docs diff --git a/src/components/side-nav.tsx b/src/components/side-nav.tsx index 1e1aa6f5..b8d198da 100644 --- a/src/components/side-nav.tsx +++ b/src/components/side-nav.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, Box, color, space, BoxProps } from '@blockstack/ui'; +import { Flex, Box, color, space, BoxProps } from '@stacks/ui'; import Link from 'next/link'; import { useAppState } from '@common/hooks/use-app-state'; import { SIDEBAR_WIDTH } from '@common/constants'; @@ -10,9 +10,10 @@ import { getCategory, getTitle, slugify } from '@common/utils'; import { useRouter } from 'next/router'; import { getCapsizeStyles } from '@components/mdx/typography'; import { Text } from '@components/typography'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { SmartLink } from '@components/mdx'; import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; +import { useTheme } from '@emotion/react'; const Wrapper: React.FC = ({ width = `${SIDEBAR_WIDTH}px`, @@ -58,23 +59,19 @@ const PageItem = React.forwardRef( ref: any ) => { const typeStyles = isTopLevel ? getCapsizeStyles(16, 26) : getCapsizeStyles(14, 20); + const styleProps = { + outline: '0', + display: 'block', + color: isActive ? color('accent') : isTopLevel ? color('text-title') : _color, + mb: isTopLevel ? space('base-loose') : mb, + }; return ( {children} @@ -85,12 +82,12 @@ const PageItem = React.forwardRef( const SectionTitle: React.FC = ({ children, ...rest }) => ( {children} @@ -156,7 +153,7 @@ const ChildPages = ({ items, handleClick }: any) => { }; const ChildSection: React.FC = ({ sections, ...rest }) => - sections.map((section, key) => { + sections?.map((section, key) => { return ( ( cursor: 'pointer', color: color('text-title'), }} - align="center" + alignItems="center" {...props} > @@ -289,7 +286,7 @@ const Navigation = () => { return ( {section.title ? ( - + {section.title} ) : null} diff --git a/src/components/status-check.tsx b/src/components/status-check.tsx index c4fe504b..3d6615e0 100644 --- a/src/components/status-check.tsx +++ b/src/components/status-check.tsx @@ -1,14 +1,14 @@ import React from 'react'; import useSWR from 'swr'; -import { Box, Flex, space, color, BoxProps } from '@blockstack/ui'; +import { Box, Flex, space, color, BoxProps } from '@stacks/ui'; import { border, transition } from '@common/utils'; import { Link } from '@components/mdx'; import { LinkProps, Text } from '@components/typography'; -import { Spinner } from '@blockstack/ui'; +import { Spinner } from '@stacks/ui'; import { CircleCheck } from '@components/icons/circle-check'; import { AlertCircleIcon } from '@components/icons/alert-circle'; import { STATUS_CHECKER_URL } from '@common/constants'; -import { css } from '@styled-system/css'; +import { css } from '@stacks/ui-core'; import { getCapsizeStyles } from '@components/mdx/typography'; const fetcher = url => fetch(url).then(r => r.json()); @@ -69,7 +69,7 @@ export const StatusCheck: React.FC = props => { transition={transition()} {...props} > - + {!data && !error ? ( = props => { )} Stacks 2.0 testnet status diff --git a/src/components/toc.tsx b/src/components/toc.tsx index 41f710d2..c7dcabef 100644 --- a/src/components/toc.tsx +++ b/src/components/toc.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import { Box, Grid, color, space, BoxProps } from '@blockstack/ui'; +import { Box, Grid, color, space, BoxProps } from '@stacks/ui'; import { slugify } from '@common/utils'; import { Text } from '@components/typography'; import { Link } from '@components/mdx'; import { useActiveHeading } from '@common/hooks/use-active-heading'; import NextLink from 'next/link'; import { getHeadingStyles } from '@components/mdx/typography'; -import { css } from '@styled-system/css'; const getLevelPadding = (level: number) => { switch (level) { @@ -82,10 +81,10 @@ export const TableOfContents = ({ {!noLabel && ( {label} @@ -95,7 +94,7 @@ export const TableOfContents = ({ gridColumnGap={space('base-loose')} gridTemplateColumns={ Array.isArray(columns) - ? columns.map(value => `repeat(${value}, 1fr)`) + ? (columns as any).map(value => `repeat(${value}, 1fr)`) : `repeat(${columns}, 1fr)` } > diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx index b7331240..d7e6d4f3 100644 --- a/src/components/tooltip.tsx +++ b/src/components/tooltip.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { color } from '@blockstack/ui'; +import { color } from '@stacks/ui'; import { useTooltip, TooltipPopup } from '@reach/tooltip'; const centered = (triggerRect: any, tooltipRect: any) => { diff --git a/src/components/typography.tsx b/src/components/typography.tsx index 75ac0403..284612e6 100644 --- a/src/components/typography.tsx +++ b/src/components/typography.tsx @@ -1,36 +1,47 @@ import * as React from 'react'; -import { Text as BaseText, BoxProps, color } from '@blockstack/ui'; +import { Box, BoxProps, color } from '@stacks/ui'; import { getCapsizeStyles } from '@components/mdx/typography'; +import { forwardRefWithAs, ForwardRefExoticComponentWithAs } from '@stacks/ui-core'; -export const Text = React.forwardRef((props: BoxProps, ref) => ( - -)); +export const Text: ForwardRefExoticComponentWithAs = forwardRefWithAs< + BoxProps, + 'span' +>((props, ref) => ); -export const Caption: React.FC = props => ( +export const Caption: ForwardRefExoticComponentWithAs< + BoxProps, + 'span' +> = forwardRefWithAs((props, ref) => ( -); +)); -export const Title: React.FC = React.forwardRef((props, ref) => ( +export const Title: ForwardRefExoticComponentWithAs< + BoxProps, + 'span' +> = React.forwardRef((props, ref) => ( )); export type LinkProps = BoxProps & Partial>; -export const Link = React.forwardRef(({ _hover = {}, ...props }: LinkProps, ref) => ( - -)); +export const Link: ForwardRefExoticComponentWithAs = forwardRefWithAs( + ({ _hover = {}, ...props }: LinkProps, ref) => ( + + ) +); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bbad388b..a2a922ff 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,18 +1,21 @@ -import React from 'react'; -import type { AppProps } from 'next/app'; - -import { CSSReset, ThemeProvider } from '@blockstack/ui'; +import { AppProps } from 'next/app'; +import * as React from 'react'; +import 'modern-normalize/modern-normalize.css'; import { AppWrapper } from '@components/app-wrapper'; +import { theme } from '@stacks/ui'; +import { CacheProvider, ThemeProvider } from '@emotion/react'; +import { cache } from '@emotion/css'; import '@docsearch/css'; const MyApp: React.FC = ({ Component, pageProps, ...rest }) => ( - - - - - - + + + + + + + ); export default MyApp; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 73a20d54..43157219 100755 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -2,44 +2,43 @@ import React from 'react'; import Document, { DocumentContext, DocumentProps, + DocumentInitialProps, Html, Head, Main, NextScript, } from 'next/document'; import { THEME_STORAGE_KEY } from '@common/constants'; -import { ServerStyleSheet } from 'styled-components'; +import { extractCritical } from '@emotion/server'; +import { MdxOverrides } from '@components/mdx/overrides'; +import { ColorModes } from '@components/color-modes/styles'; +import { ProgressBarStyles } from '@components/progress-bar'; export default class MyDocument extends Document { - static async getInitialProps(ctx: DocumentContext) { - const sheet = new ServerStyleSheet(); - const originalRenderPage = ctx.renderPage; - - try { - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: App => props => sheet.collectStyles(), - }); - - const initialProps = await Document.getInitialProps(ctx); - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {sheet.getStyleElement()} - - ), - }; - } finally { - sheet.seal(); - } + static async getInitialProps(ctx: DocumentContext): Promise { + const page = await ctx.renderPage(); + const styles = extractCritical(page.html); + return { + ...page, + styles: ( + <> + {MdxOverrides} + {ProgressBarStyles} + {ColorModes} +