Skip to content

Commit 23aa6f2

Browse files
aulneauaulneau
committed
feat: emotion, @stacks/ui & ui-core
1 parent 083cd88 commit 23aa6f2

Some content is hidden

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

73 files changed

+1553
-1124
lines changed

‎babel.config.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
module.exports = {
2-
presets: ['next/babel'],
3-
plugins: [
4-
'./lib/babel-plugin-nextjs-mdx-patch',
5-
'babel-plugin-macros',
6-
['styled-components', { ssr: true }],
7-
],
2+
presets: ['next/babel', '@emotion/babel-preset-css-prop'],
3+
plugins: ['./lib/babel-plugin-nextjs-mdx-patch', 'babel-plugin-macros', '@emotion'],
84
};

‎next.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,10 @@ module.exports = withFonts(
394394
aliases.react = aliases['react-dom'] = 'preact/compat';
395395
aliases['react-ssr-prepass'] = 'preact-ssr-prepass';
396396
}
397+
config.resolve.alias['@emotion/react'] = path.resolve(
398+
__dirname,
399+
'./node_modules/@emotion/react'
400+
);
397401

398402
return config;
399403
},

‎package.json

+37-18
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,39 @@
22
"name": "@blockstack/docs",
33
"version": "1.0.0",
44
"dependencies": {
5-
"@blockstack/ui": "2.12.2-beta.0",
65
"@docsearch/css": "^1.0.0-alpha.27",
76
"@docsearch/react": "^1.0.0-alpha.27",
7+
"@emotion/babel-plugin": "^11.0.0-next.15",
8+
"@emotion/babel-preset-css-prop": "^11.0.0-next.10",
9+
"@emotion/cache": "^11.0.0-next.15",
10+
"@emotion/core": "^11.0.0-next.10",
11+
"@emotion/css": "^11.0.0-next.15",
12+
"@emotion/react": "^11.0.0-next.15",
13+
"@emotion/server": "^11.0.0-next.15",
814
"@hashicorp/remark-plugins": "^3.0.0",
915
"@mdx-js/loader": "1.6.16",
1016
"@mdx-js/mdx": "^1.6.16",
1117
"@mdx-js/react": "^1.6.16",
1218
"@next/mdx": "^9.5.2",
13-
"@reach/accordion": "^0.10.5",
14-
"@reach/tooltip": "^0.10.5",
19+
"@reach/accordion": "^0.11.0",
20+
"@reach/tooltip": "^0.11.0",
21+
"@stacks/ui": "^3.0.0-alpha.12",
22+
"@stacks/ui-core": "^1.0.0-beta.6",
1523
"@styled-system/theme-get": "^5.1.2",
1624
"@types/mdx-js__react": "^1.5.2",
17-
"@types/node": "^14.0.27",
25+
"@types/node": "^14.6.2",
1826
"@types/nprogress": "^0.2.0",
1927
"@types/reach__tooltip": "^0.2.0",
2028
"algoliasearch": "^4.4.0",
2129
"babel-plugin-macros": "^2.8.0",
2230
"cache-manager": "^3.3.0",
2331
"cache-manager-fs-hash": "^0.0.9",
2432
"capsize": "^1.1.0",
25-
"csstype": "^3.0.2",
33+
"csstype": "^3.0.3",
2634
"csvtojson": "^2.0.10",
2735
"docsearch.js": "^2.6.3",
36+
"emotion": "^10.0.27",
37+
"emotion-server": "^10.0.27",
2838
"fathom-client": "^3.0.0",
2939
"front-matter": "^4.0.2",
3040
"fs-extra": "^9.0.1",
@@ -36,24 +46,25 @@
3646
"lodash.debounce": "^4.0.8",
3747
"mdi-react": "7.3.0",
3848
"micro-memoize": "^4.0.9",
49+
"modern-normalize": "^1.0.0",
3950
"next": "^9.5.2",
4051
"next-fonts": "^1.4.0",
41-
"next-mdx-remote": "^0.6.0",
52+
"next-mdx-remote": "^1.0.0",
4253
"nprogress": "^0.2.0",
4354
"p-all": "^3.0.0",
44-
"preact": "^10.4.7",
55+
"preact": "^10.4.8",
4556
"preact-render-to-string": "^5.1.4",
4657
"preact-ssr-prepass": "^1.1.1",
47-
"prettier": "^2.0.5",
58+
"prettier": "^2.1.1",
4859
"preval.macro": "^5.0.0",
4960
"react-gesture-responder": "^2.1.0",
50-
"react-intersection-observer": "^8.26.2",
61+
"react-intersection-observer": "^8.27.1",
5162
"react-spring": "^8.0.27",
5263
"remark": "^12.0.1",
5364
"remark-custom-blocks": "^2.5.0",
5465
"remark-emoji": "2.1.0",
55-
"remark-external-links": "^6.1.0",
56-
"remark-footnotes": "^1.0.0",
66+
"remark-external-links": "^7.0.0",
67+
"remark-footnotes": "^2.0.0",
5768
"remark-frontmatter": "^2.0.0",
5869
"remark-heading-id": "^1.0.0",
5970
"remark-images": "2.0.0",
@@ -65,9 +76,10 @@
6576
"remark-unwrap-images": "2.0.0",
6677
"remark-vscode": "^1.0.0-beta.2",
6778
"strip-markdown": "^3.1.2",
68-
"swr": "^0.3.0",
79+
"stylis": "^4.0.2",
80+
"swr": "^0.3.1",
6981
"turndown": "^6.0.0",
70-
"typescript": "^3.9.7",
82+
"typescript": "^4.0.2",
7183
"unified-vscode": "^1.0.0-beta.2",
7284
"unist-builder": "^2.0.3",
7385
"unist-util-is": "^4.0.2",
@@ -82,14 +94,17 @@
8294
"@blockstack/eslint-config": "^1.0.5",
8395
"@blockstack/prettier-config": "^0.0.6",
8496
"@next/bundle-analyzer": "^9.5.2",
97+
"@typescript-eslint/eslint-plugin": "^4.0.1",
98+
"@typescript-eslint/parser": "^4.0.1",
8599
"babel-plugin-styled-components": "^1.11.0",
86-
"eslint": "^7.6.0",
100+
"eslint": "^7.8.0",
101+
"eslint-plugin-import": "^2.22.0",
102+
"eslint-plugin-prettier": "^3.1.4",
87103
"husky": "^4.2.5",
88-
"next-transpile-modules": "^4.0.2",
104+
"next-transpile-modules": "^4.1.0",
89105
"react": "^16.13.0",
90106
"react-dom": "^16.13.0",
91107
"rimraf": "^3.0.2",
92-
"styled-components": "^5.0.1",
93108
"tsconfig-paths-webpack-plugin": "^3.3.0"
94109
},
95110
"private": true,
@@ -111,8 +126,12 @@
111126
},
112127
"resolutions": {
113128
"preact": "^10.4.4",
114-
"@blockstack/ui": "2.12.2-beta.0",
115-
"eslint": "^7.4.0"
129+
"eslint": "^7.4.0",
130+
"@emotion/cache": "^11.0.0-next.15",
131+
"@emotion/core": "^11.0.0-next.10",
132+
"@emotion/css": "^11.0.0-next.15",
133+
"@emotion/react": "^11.0.0-next.15",
134+
"@emotion/server": "^11.0.0-next.15"
116135
},
117136
"husky": {
118137
"hooks": {

‎src/common/hooks/use-lock-body-scroll.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { useSafeLayoutEffect } from '@blockstack/ui';
2+
import { useSafeLayoutEffect } from '@stacks/ui';
33

44
export const useLockBodyScroll = (lock: boolean) => {
55
useSafeLayoutEffect(() => {

‎src/common/hooks/use-media-query.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { useSafeLayoutEffect } from '@blockstack/ui';
2+
import { useSafeLayoutEffect } from '@stacks/ui';
33

44
const isBrowser = typeof window !== 'undefined';
55

‎src/common/utils/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Children, isValidElement, ReactNode, ReactElement, ReactText } from 'react';
22
import { Property } from 'csstype';
3-
import { color } from '@blockstack/ui';
4-
import { ColorsStringLiteral } from '@blockstack/ui';
3+
import { color } from '@stacks/ui';
4+
import { ColorsStringLiteral } from '@stacks/ui';
55

66
const camelToKebab = (string: string) =>
77
string

‎src/components/app-wrapper.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React from 'react';
22
import { AppStateProvider } from '@components/app-state';
3-
import { MdxOverrides } from '@components/mdx/overrides';
43
import { ProgressBar } from '@components/progress-bar';
54
import { BaseLayout } from '@components/layouts/base-layout';
6-
import { ColorModes } from '@components/color-modes/styles';
75
import { Meta } from '@components/meta-head';
86
import { useFathom } from '@common/hooks/use-fathom';
97

@@ -12,8 +10,6 @@ export const AppWrapper: React.FC<any> = ({ children, isHome }) => {
1210
return (
1311
<>
1412
<Meta />
15-
<MdxOverrides />
16-
<ColorModes />
1713
<ProgressBar />
1814
<AppStateProvider>
1915
<BaseLayout isHome={isHome}>{children}</BaseLayout>

‎src/components/back-button.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Flex, Box, color, space } from '@blockstack/ui';
2+
import { Flex, Box, color, space } from '@stacks/ui';
33
import ArrowLeftIcon from 'mdi-react/ArrowLeftIcon';
44
import { Text } from '@components/typography';
55
import Link from 'next/link';
@@ -21,7 +21,7 @@ export const BackButton = ({ href, ...rest }) => (
2121
cursor: 'pointer',
2222
color: color('text-title'),
2323
}}
24-
align="center"
24+
alignItems="center"
2525
as={href ? 'a' : 'div'}
2626
display="flex !important"
2727
{...rest}

‎src/components/clarity-ref.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Components } from '@components/mdx/mdx-components';
33
import { TableOfContents } from '@components/toc';
44
import hydrate from 'next-mdx-remote/hydrate';
5-
import { space } from '@blockstack/ui';
5+
import { space } from '@stacks/ui';
66

77
export const ClarityKeywordReference = React.memo(({ content, headings }: any) => {
88
return (

‎src/components/cli-reference.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import cliReferenceData from '../_data/cli-reference.json';
33
import { Components } from '@components/mdx/mdx-components';
4-
import { Grid, Box, color } from '@blockstack/ui';
4+
import { Grid, Box, color } from '@stacks/ui';
55
import { border, onlyText, slugify } from '@common/utils';
66
import hydrate from 'next-mdx-remote/hydrate';
77

‎src/components/color-modes/styles.tsx

+48-82
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,53 @@
1-
import { createGlobalStyle } from 'styled-components';
2-
import { generateCssVariables } from '@blockstack/ui';
3-
4-
export const ColorModes = createGlobalStyle`
5-
:root{
6-
${generateCssVariables('light')};
7-
--colors-highlight-line-bg: rgba(255,255,255,0.08);
8-
}
9-
10-
* {
11-
-webkit-font-smoothing: antialiased;
12-
-moz-osx-font-smoothing: grayscale;
13-
}
14-
15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
${generateCssVariables('dark')};
18-
--colors-highlight-line-bg: rgba(255,255,255,0.04);
19-
}
20-
* {
21-
-webkit-font-smoothing: subpixel-antialiased;
22-
-moz-osx-font-smoothing: auto;
23-
}
24-
}
25-
26-
@media (prefers-color-scheme: light) {
27-
:root {
28-
${generateCssVariables('light')};
29-
--colors-highlight-line-bg: rgba(255,255,255,0.08);
30-
}
31-
* {
32-
-webkit-font-smoothing: antialiased;
33-
-moz-osx-font-smoothing: grayscale;
34-
}
35-
}
36-
37-
html, body, #__next {
38-
background: var(--colors-bg);
39-
border-color: var(--colors-border);
40-
41-
&.light {
42-
${generateCssVariables('light')};
43-
--colors-highlight-line-bg: rgba(255,255,255,0.08);
44-
* {
1+
/** @jsx jsx */
2+
import * as React from 'react';
3+
import { jsx, css, Global } from '@emotion/react';
4+
import { theme, generateCssVariables } from '@stacks/ui';
5+
6+
export const Base = (
7+
<Global
8+
styles={css`
9+
* {
4510
-webkit-font-smoothing: antialiased;
4611
-moz-osx-font-smoothing: grayscale;
4712
}
48-
}
49-
&.dark {
50-
${generateCssVariables('dark')};
51-
--colors-highlight-line-bg: rgba(255,255,255,0.04);
52-
* {
53-
-webkit-font-smoothing: subpixel-antialiased;
54-
-moz-osx-font-smoothing: auto;
13+
:root {
14+
${generateCssVariables('light')({ colorMode: 'light', theme })};
15+
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1);
16+
17+
@media (prefers-color-scheme: dark) {
18+
${generateCssVariables('dark')({ colorMode: 'dark', theme })};
19+
--colors-highlight-line-bg: rgba(255, 255, 255, 0.05);
20+
}
5521
}
56-
}
57-
}
58-
59-
input:-webkit-autofill,
60-
input:-webkit-autofill:hover,
61-
input:-webkit-autofill:focus,
62-
textarea:-webkit-autofill,
63-
textarea:-webkit-autofill:hover,
64-
textarea:-webkit-autofill:focus,
65-
select:-webkit-autofill,
66-
select:-webkit-autofill:hover,
67-
select:-webkit-autofill:focus {
68-
-webkit-text-fill-color: var(--colors-text-body);
69-
font-size: 16px !important;
70-
transition: background-color 5000s ease-in-out 0s;
71-
}
72-
73-
input:-ms-input-placeholder,
74-
textarea:-ms-input-placeholder {
75-
color: var(--colors-input-placeholder) !important;
76-
}
77-
78-
input::-ms-input-placeholder,
79-
textarea::-ms-input-placeholder {
80-
color: var(--colors-input-placeholder) !important;
81-
}
22+
html,
23+
body,
24+
#__next {
25+
background: var(--colors-bg);
26+
border-color: var(--colors-border);
27+
28+
&.light {
29+
:root {
30+
${generateCssVariables('light')({ colorMode: 'light', theme })};
31+
--colors-highlight-line-bg: rgba(255, 255, 255, 0.1);
32+
}
33+
* {
34+
-webkit-font-smoothing: antialiased;
35+
-moz-osx-font-smoothing: grayscale;
36+
}
37+
}
38+
&.dark {
39+
:root {
40+
${generateCssVariables('dark')({ colorMode: 'dark', theme })};
41+
--colors-highlight-line-bg: rgba(255, 255, 255, 0.04);
42+
}
43+
* {
44+
-webkit-font-smoothing: subpixel-antialiased;
45+
-moz-osx-font-smoothing: auto;
46+
}
47+
}
48+
}
49+
`}
50+
/>
51+
);
8252

83-
input::placeholder,
84-
textarea::placeholder {
85-
color: var(--colors-input-placeholder) !important;
86-
}
87-
`;
53+
export const ColorModes = Base;

‎src/components/content-wrapper.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import React from 'react';
2-
import { Flex, FlexProps, space } from '@blockstack/ui';
2+
import { Flex, FlexProps, space } from '@stacks/ui';
3+
import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core';
34

4-
const ContentWrapper: React.FC<FlexProps> = props => (
5+
const ContentWrapper: ForwardRefExoticComponentWithAs<FlexProps, 'div'> = forwardRefWithAs<
6+
FlexProps,
7+
'div'
8+
>((props, ref) => (
59
<Flex
610
flexShrink={0}
711
pt={space(['base', 'base', 'extra-loose'])}
812
pb={[4, 4, 6]}
913
flexDirection="column"
14+
ref={ref}
1015
{...props}
1116
/>
12-
);
17+
));
1318

1419
export { ContentWrapper };

0 commit comments

Comments
 (0)