Skip to content

Commit 2ca2343

Browse files
Merge branch 'main' into patch-1
2 parents 6147468 + 49dda3c commit 2ca2343

File tree

240 files changed

+3958
-10149
lines changed

Some content is hidden

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

240 files changed

+3958
-10149
lines changed

beta/illustrations/import-export.ai

Lines changed: 0 additions & 4950 deletions
This file was deleted.

beta/illustrations/jsx.ai

Lines changed: 0 additions & 1564 deletions
This file was deleted.
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
2+
index 4acfc3a..d00e57d 100644
3+
--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
4+
+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
5+
@@ -566,17 +566,16 @@ var REACT_TEMPLATE = {
6+
},
7+
"/index.js": {
8+
code: `import React, { StrictMode } from "react";
9+
-import ReactDOM from "react-dom";
10+
+import { createRoot } from "react-dom/client";
11+
import "./styles.css";
12+
13+
import App from "./App";
14+
15+
-const rootElement = document.getElementById("root");
16+
-ReactDOM.render(
17+
+const root = createRoot(document.getElementById("root"));
18+
+root.render(
19+
<StrictMode>
20+
<App />
21+
- </StrictMode>,
22+
- rootElement
23+
+ </StrictMode>
24+
);`
25+
},
26+
"/styles.css": {
27+
@@ -611,8 +610,8 @@ h1 {
28+
}
29+
},
30+
dependencies: {
31+
- react: "^17.0.0",
32+
- "react-dom": "^17.0.0",
33+
+ react: "^18.0.0",
34+
+ "react-dom": "^18.0.0",
35+
"react-scripts": "^4.0.0"
36+
},
37+
entry: "/index.js",

beta/plugins/sandbox-templates/cra/package.json

Lines changed: 0 additions & 13 deletions
This file was deleted.

beta/plugins/sandbox-templates/cra/public/index.html

Lines changed: 0 additions & 26 deletions
This file was deleted.

beta/plugins/sandbox-templates/cra/src/App.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

beta/plugins/sandbox-templates/cra/src/index.js

Lines changed: 0 additions & 13 deletions
This file was deleted.

beta/plugins/sandbox-templates/cra/src/styles.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

beta/public/html/single-file-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Hello World</title>
6-
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
7-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
8-
6+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
8+
99
<!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
1010
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1111
</head>

beta/public/images/docs/diagrams/sharing_data_child.dark.svg

Lines changed: 0 additions & 60 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_child.svg

Lines changed: 0 additions & 60 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.svg

Lines changed: 0 additions & 64 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_child_clicked.svg

Lines changed: 0 additions & 64 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_parent.dark.svg

Lines changed: 0 additions & 57 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_parent.svg

Lines changed: 0 additions & 57 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.svg

Lines changed: 0 additions & 75 deletions
This file was deleted.

beta/public/images/docs/diagrams/sharing_data_parent_clicked.svg

Lines changed: 0 additions & 75 deletions
This file was deleted.
Binary file not shown.
Binary file not shown.
Binary file not shown.
-1.25 MB
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
-284 KB
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
-114 KB
Binary file not shown.

beta/public/images/team/huxpro.jpg

340 KB

beta/src/components/Icon/IconChevron.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const IconChevron = React.memo<
99
JSX.IntrinsicElements['svg'] & {
1010
displayDirection: 'up' | 'down' | 'left' | 'right';
1111
}
12-
>(function IconChevron({className, displayDirection, ...rest}) {
12+
>(function IconChevron({className, displayDirection}) {
1313
const classes = cn(
1414
{
1515
'rotate-0': displayDirection === 'down',

beta/src/components/Icon/IconNavArrow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const IconNavArrow = React.memo<
99
JSX.IntrinsicElements['svg'] & {
1010
displayDirection: 'right' | 'down' | 'left';
1111
}
12-
>(function IconNavArrow({displayDirection = 'right', className, ...rest}) {
12+
>(function IconNavArrow({displayDirection = 'right', className}) {
1313
const classes = cn(
1414
'duration-100 ease-in transition',
1515
{

beta/src/components/Layout/Page.tsx

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,35 @@ import {Nav} from './Nav';
88
import {RouteItem, SidebarContext} from './useRouteMeta';
99
import {Sidebar} from './Sidebar';
1010
import {Footer} from './Footer';
11+
import SocialBanner from '../SocialBanner';
1112
interface PageProps {
1213
children: React.ReactNode;
1314
routeTree: RouteItem;
1415
}
1516

1617
export function Page({routeTree, children}: PageProps) {
1718
return (
18-
<MenuProvider>
19-
<SidebarContext.Provider value={routeTree}>
20-
<div className="h-auto lg:h-screen flex flex-row">
21-
<div className="no-bg-scrollbar h-auto lg:h-full lg:overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
22-
<Nav />
23-
<Sidebar />
24-
</div>
19+
<>
20+
<SocialBanner />
21+
<MenuProvider>
22+
<SidebarContext.Provider value={routeTree}>
23+
<div className="h-auto lg:h-screen flex flex-row">
24+
<div className="no-bg-scrollbar h-auto lg:h-[calc(100%-40px)] lg:overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-16 sm:top-10 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
25+
<Nav />
26+
<Sidebar />
27+
</div>
2528

26-
<div className="flex flex-1 w-full h-full self-stretch">
27-
<div className="w-full min-w-0">
28-
<main className="flex flex-1 self-stretch flex-col items-end justify-around">
29-
{children}
30-
<Footer />
31-
</main>
29+
<div className="flex flex-1 w-full h-full self-stretch">
30+
<div className="w-full min-w-0">
31+
<main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
32+
{children}
33+
<Footer />
34+
</main>
35+
</div>
3236
</div>
3337
</div>
34-
</div>
35-
</SidebarContext.Provider>
36-
</MenuProvider>
38+
</SidebarContext.Provider>
39+
</MenuProvider>
40+
</>
3741
);
3842
}

beta/src/components/Layout/Sidebar/Sidebar.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ import {MenuContext} from 'components/useMenu';
99
import {useMediaQuery} from '../useMediaQuery';
1010
import {SidebarRouteTree} from './SidebarRouteTree';
1111
import {Search} from 'components/Search';
12-
import {Button} from 'components/Button';
1312
import {MobileNav} from '../Nav/MobileNav';
1413
import {Feedback} from '../Feedback';
1514

1615
const SIDEBAR_BREAKPOINT = 1023;
1716

18-
export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
17+
export function Sidebar() {
1918
const {menuRef, isOpen} = React.useContext(MenuContext);
2019
const isMobileSidebar = useMediaQuery(SIDEBAR_BREAKPOINT);
2120
let routeTree = React.useContext(SidebarContext);
@@ -32,7 +31,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
3231
isOpen ? 'block z-40' : 'hidden lg:block'
3332
)}
3433
aria-hidden={isHidden}>
35-
<div className="px-5">
34+
<div className="px-5 pt-16 sm:pt-10 lg:pt-0">
3635
<Search />
3736
</div>
3837
<nav

beta/src/components/Layout/Toc.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function Toc({
1919
return (
2020
<nav
2121
role="navigation"
22-
className="pt-6 fixed top-0 right-0"
22+
className="pt-6 fixed top-10 right-0"
2323
style={{
2424
// This keeps the layout fixed width instead of adjusting for content.
2525
width: 'inherit',

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,11 @@ const CodeBlock = function CodeBlock({
2323
className = 'language-js',
2424
metastring,
2525
noMargin,
26-
noMarkers,
2726
}: {
2827
children: string;
2928
className?: string;
3029
metastring: string;
3130
noMargin?: boolean;
32-
noMarkers?: boolean;
3331
}) {
3432
const getDecoratedLineInfo = () => {
3533
if (!metastring) {

beta/src/components/MDX/Diagram.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,49 @@ interface DiagramProps {
1111
height: number;
1212
width: number;
1313
children: string;
14+
captionPosition: 'top' | 'bottom' | null;
1415
}
1516

16-
export function Diagram({name, alt, height, width, children}: DiagramProps) {
17+
function Caption({text}: {text: string}) {
1718
return (
18-
<figure className="flex flex-col px-0 py-5 sm:p-10">
19+
<div className="w-full table">
20+
<figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption">
21+
{text}
22+
</figcaption>
23+
</div>
24+
);
25+
}
26+
27+
export function Diagram({
28+
name,
29+
alt,
30+
height,
31+
width,
32+
children,
33+
captionPosition,
34+
}: DiagramProps) {
35+
return (
36+
<figure className="flex flex-col px-0 p-0 sm:p-10 first:mt-0 mt-10 sm:mt-0 justify-center items-center">
37+
{captionPosition === 'top' && <Caption text={children} />}
1938
<div className="dark-image">
2039
<Image
21-
src={`/images/docs/diagrams/${name}.dark.svg`}
40+
src={`/images/docs/diagrams/${name}.dark.png`}
2241
alt={alt}
2342
height={height}
2443
width={width}
2544
/>
2645
</div>
2746
<div className="light-image">
2847
<Image
29-
src={`/images/docs/diagrams/${name}.svg`}
48+
src={`/images/docs/diagrams/${name}.png`}
3049
alt={alt}
3150
height={height}
3251
width={width}
3352
/>
3453
</div>
35-
<figcaption className="p-1 sm:p-4 mt-4 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-6">
36-
{children}
37-
</figcaption>
54+
{(!captionPosition || captionPosition === 'bottom') && (
55+
<Caption text={children} />
56+
)}
3857
</figure>
3958
);
4059
}

beta/src/components/MDX/DiagramGroup.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface DiagramGroupProps {
1111

1212
export function DiagramGroup({children}: DiagramGroupProps) {
1313
return (
14-
<div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 space-y-10 sm:space-y-0">
14+
<div className="flex flex-col sm:flex-row py-2 sm:p-0 sm:space-y-0 justify-center items-start sm:items-center w-full">
1515
{children}
1616
</div>
1717
);

beta/src/components/MDX/ExpandableCallout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function ExpandableCallout({children, type}: ExpandableCalloutProps) {
4141
return (
4242
<div
4343
className={cn(
44+
'expandable-callout',
4445
'pt-8 pb-4 px-5 sm:px-8 my-8 relative rounded-none shadow-inner -mx-5 sm:mx-auto sm:rounded-lg',
4546
variant.containerClasses
4647
)}>

beta/src/components/MDX/Intro.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5-
import React, {ReactNode} from 'react';
5+
import React from 'react';
66

77
export interface IntroProps {
88
children?: React.ReactNode;

beta/src/components/MDX/Link.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function Link({
1717
const classes =
1818
'inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal';
1919
const modifiedChildren = React.Children.toArray(children).map(
20-
(child: any, idx: number) => {
20+
(child: any) => {
2121
if (child.props?.mdxType && child.props?.mdxType === 'inlineCode') {
2222
return React.cloneElement(child, {
2323
isLink: true,

beta/src/components/MDX/MDXComponents.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,14 +200,12 @@ function Illustration({
200200
alt,
201201
author,
202202
authorLink,
203-
children,
204203
}: {
205204
caption: string;
206205
src: string;
207206
alt: string;
208207
author: string;
209208
authorLink: string;
210-
children: any;
211209
}) {
212210
return (
213211
<div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">

beta/src/components/MDX/Sandpack/ResetButton.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,10 @@
55
import * as React from 'react';
66
import {IconRestart} from '../../Icon/IconRestart';
77
export interface ResetButtonProps {
8-
clientId?: string;
98
onReset: () => void;
109
}
1110

12-
export const ResetButton: React.FC<ResetButtonProps> = ({
13-
clientId,
14-
onReset,
15-
}) => {
11+
export const ResetButton: React.FC<ResetButtonProps> = ({onReset}) => {
1612
return (
1713
<button
1814
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"

beta/src/components/MDX/Sandpack/utils.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,6 @@ export const computeViewportSize = (
4949
};
5050

5151
export const createFileMap = (codeSnippets: any) => {
52-
let isSingleFile = true;
53-
5452
return codeSnippets.reduce(
5553
(result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
5654
if (codeSnippet.props.mdxType !== 'pre') {
@@ -70,7 +68,6 @@ export const createFileMap = (codeSnippets: any) => {
7068
if (params.includes('active')) {
7169
fileActive = true;
7270
}
73-
isSingleFile = false;
7471
} else {
7572
if (props.className === 'language-js') {
7673
filePath = '/App.js';

0 commit comments

Comments
 (0)