From bb6d9c175568b26f51a11b84e44ceba7fcf3d74c Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 29 Jul 2022 12:01:19 +0100 Subject: [PATCH 01/13] fix(client): update bundler --- sandpack-client/.bundler | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandpack-client/.bundler b/sandpack-client/.bundler index 4df7607cf..777115ed0 100644 --- a/sandpack-client/.bundler +++ b/sandpack-client/.bundler @@ -1,3 +1,3 @@ // Manually generated file to trigger new releases based on the bundler changes. // The following value is the commit hash from codesandbox-client -1db0af43f6309cacd0a53440d24dcc5b336e9f5a1 +5712eae0c97f625d9390fa71266280a88e4f9fad From 92885429f8b43fe1f1affd0cc29d4d6441af7be1 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Fri, 29 Jul 2022 11:15:10 +0000 Subject: [PATCH 02/13] chore: [skip ci] bump packages --- CHANGELOG.md | 11 +++++++++++ lerna.json | 2 +- sandpack-client/CHANGELOG.md | 11 +++++++++++ sandpack-client/package.json | 2 +- sandpack-react/CHANGELOG.md | 8 ++++++++ sandpack-react/package.json | 4 ++-- 6 files changed, 34 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ba9fcae4c..5cf56fef7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.2](https://github.com/codesandbox/sandpack/compare/v1.3.1...v1.3.2) (2022-07-29) + + +### Bug Fixes + +* **client:** update bundler ([bb6d9c1](https://github.com/codesandbox/sandpack/commit/bb6d9c175568b26f51a11b84e44ceba7fcf3d74c)) + + + + + ## [1.3.1](https://github.com/codesandbox/sandpack/compare/v1.3.0...v1.3.1) (2022-07-25) **Note:** Version bump only for package sandpack diff --git a/lerna.json b/lerna.json index 7f9179b2a..f19674a81 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.3.1" + "version": "1.3.2" } diff --git a/sandpack-client/CHANGELOG.md b/sandpack-client/CHANGELOG.md index fd45431e7..9f10a0c8b 100644 --- a/sandpack-client/CHANGELOG.md +++ b/sandpack-client/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.2](https://github.com/codesandbox/sandpack/compare/v1.3.1...v1.3.2) (2022-07-29) + + +### Bug Fixes + +* **client:** update bundler ([bb6d9c1](https://github.com/codesandbox/sandpack/commit/bb6d9c175568b26f51a11b84e44ceba7fcf3d74c)) + + + + + ## [1.2.2](https://github.com/codesandbox/sandpack/compare/v1.2.1...v1.2.2) (2022-06-29) diff --git a/sandpack-client/package.json b/sandpack-client/package.json index 77776ea3c..ec094c1fe 100644 --- a/sandpack-client/package.json +++ b/sandpack-client/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-client", - "version": "1.2.2", + "version": "1.3.2", "description": "", "keywords": [], "repository": { diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 2e9a3c309..e9485abb6 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.2](https://github.com/codesandbox/sandpack/compare/v1.3.1...v1.3.2) (2022-07-29) + +**Note:** Version bump only for package @codesandbox/sandpack-react + + + + + ## [1.3.1](https://github.com/codesandbox/sandpack/compare/v1.3.0...v1.3.1) (2022-07-25) **Note:** Version bump only for package @codesandbox/sandpack-react diff --git a/sandpack-react/package.json b/sandpack-react/package.json index 883f8a4b7..f31ae55b0 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.3.1", + "version": "1.3.2", "description": "", "keywords": [], "repository": { @@ -48,7 +48,7 @@ "@codemirror/matchbrackets": "^0.19.3", "@codemirror/state": "^0.19.6", "@codemirror/view": "^0.19.32", - "@codesandbox/sandpack-client": "^1.2.2", + "@codesandbox/sandpack-client": "^1.3.2", "@react-hook/intersection-observer": "^3.1.1", "@stitches/core": "^1.2.6", "codesandbox-import-util-types": "^2.2.3", From fa9019049b2d07e33131d2303fd0695bae7a43a6 Mon Sep 17 00:00:00 2001 From: Patrick Sullivan Date: Mon, 1 Aug 2022 04:41:26 -0400 Subject: [PATCH 03/13] Update HeroDesktop.tsx to fix link access (#545) --- website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx index aab7c4a2f..ddd76ec34 100644 --- a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx +++ b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx @@ -318,6 +318,7 @@ export const HeroDesktop: React.FC = () => { width: "100%", transformOrigin: "top right", transform: "scale($scale)", + zIndex: 1 }} > From f6b29e5c8cb9c1caabba97f62974b357be04330f Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 4 Aug 2022 18:19:21 +0100 Subject: [PATCH 04/13] fix(syntax highlight): default json to javascript --- sandpack-react/src/components/CodeEditor/utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/sandpack-react/src/components/CodeEditor/utils.ts b/sandpack-react/src/components/CodeEditor/utils.ts index 4cff99852..b178756f3 100644 --- a/sandpack-react/src/components/CodeEditor/utils.ts +++ b/sandpack-react/src/components/CodeEditor/utils.ts @@ -174,6 +174,7 @@ export const getLanguageFromFile = ( switch (extension) { case "js": case "jsx": + case "json": return "javascript"; case "ts": case "tsx": From 63608345da71ad82c16b8513b2eddfb4f7f8def9 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Thu, 4 Aug 2022 17:32:27 +0000 Subject: [PATCH 05/13] chore: [skip ci] bump packages --- CHANGELOG.md | 11 +++++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 11 +++++++++++ sandpack-react/package.json | 2 +- 4 files changed, 24 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cf56fef7..37e63cc5f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.3](https://github.com/codesandbox/sandpack/compare/v1.3.2...v1.3.3) (2022-08-04) + + +### Bug Fixes + +* **syntax highlight:** default json to javascript ([f6b29e5](https://github.com/codesandbox/sandpack/commit/f6b29e5c8cb9c1caabba97f62974b357be04330f)) + + + + + ## [1.3.2](https://github.com/codesandbox/sandpack/compare/v1.3.1...v1.3.2) (2022-07-29) diff --git a/lerna.json b/lerna.json index f19674a81..c04261f92 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.3.2" + "version": "1.3.3" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index e9485abb6..683f73019 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.3](https://github.com/codesandbox/sandpack/compare/v1.3.2...v1.3.3) (2022-08-04) + + +### Bug Fixes + +* **syntax highlight:** default json to javascript ([f6b29e5](https://github.com/codesandbox/sandpack/commit/f6b29e5c8cb9c1caabba97f62974b357be04330f)) + + + + + ## [1.3.2](https://github.com/codesandbox/sandpack/compare/v1.3.1...v1.3.2) (2022-07-29) **Note:** Version bump only for package @codesandbox/sandpack-react diff --git a/sandpack-react/package.json b/sandpack-react/package.json index f31ae55b0..ff8f6461b 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.3.2", + "version": "1.3.3", "description": "", "keywords": [], "repository": { From 3e9e8a3e55a756426e8854ace100afd471e62a68 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Thu, 4 Aug 2022 17:33:30 +0000 Subject: [PATCH 06/13] chore: [skip ci] update sizebot --- scripts/sizebot/sizebot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizebot/sizebot.json b/scripts/sizebot/sizebot.json index 2221dab29..2897f6253 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":177839,"assets":[{"name":"0","size":535016},{"name":"main","size":530634},{"name":"@codesandbox/sandpack-react","size":64051},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1963},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7223,"assets":[{"name":"main","size":20629},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file +{"sandpack-react":{"gzip":177839,"assets":[{"name":"0","size":535016},{"name":"main","size":530554},{"name":"@codesandbox/sandpack-react","size":64062},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7223,"assets":[{"name":"main","size":20629},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From b07c378d04f5441ecea8b9718ddb0d494c0aa60e Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 5 Aug 2022 11:39:11 +0100 Subject: [PATCH 07/13] fix(website): ui tweaks --- website/landing/components/Features/icons.tsx | 18 +++++++++--------- .../Hero/HeroDesktop/heroSandpackFiles.ts | 1 + .../components/Intro/Sections/Theme.tsx | 2 +- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/website/landing/components/Features/icons.tsx b/website/landing/components/Features/icons.tsx index 0466f9dca..b753e9478 100644 --- a/website/landing/components/Features/icons.tsx +++ b/website/landing/components/Features/icons.tsx @@ -26,17 +26,17 @@ export const ICONS = { ), export: ( - - + diff --git a/website/landing/components/Hero/HeroDesktop/heroSandpackFiles.ts b/website/landing/components/Hero/HeroDesktop/heroSandpackFiles.ts index 4db5d0836..6f551a385 100644 --- a/website/landing/components/Hero/HeroDesktop/heroSandpackFiles.ts +++ b/website/landing/components/Hero/HeroDesktop/heroSandpackFiles.ts @@ -87,6 +87,7 @@ const common = `import { styled } from './stitches.config'; const Stack = styled("div", { display: "flex", + lineHeight: 1, variants: { horizontal: { true: { diff --git a/website/landing/components/Intro/Sections/Theme.tsx b/website/landing/components/Intro/Sections/Theme.tsx index c23826a55..d05f4f287 100644 --- a/website/landing/components/Intro/Sections/Theme.tsx +++ b/website/landing/components/Intro/Sections/Theme.tsx @@ -26,7 +26,7 @@ import { } from "./common"; const AnimatePresenceTyped = AnimatePresence as any; -const themeOptions: SandpackPredefinedTheme[] = ["dark", "light", "auto"]; +const themeOptions: SandpackPredefinedTheme[] = ["dark", "light"]; export const ThemeExample: React.FC = () => { const { ref, inView } = useInView({ threshold: THRESHOLD_VIEW }); From d9120c9f42bc5ab75619332cb44197e5e8d43b13 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 5 Aug 2022 11:56:35 +0100 Subject: [PATCH 08/13] fix(themes): tweak error surface contrast (#548) --- .codesandbox/tasks.json | 21 ++++++++++++++++--- .../styles/__snapshots__/styles.test.ts.snap | 8 +++---- .../src/themes/ExternalThemes.stories.tsx | 8 ++++++- sandpack-react/src/themes/index.ts | 8 +++---- sandpack-themes/src/aquaBlue.ts | 4 ++-- sandpack-themes/src/githubLight.ts | 3 --- sandpack-themes/src/monokaiPro.ts | 7 ++----- sandpack-themes/src/nightOwl.ts | 4 ++-- sandpack-themes/src/sandpackDark.ts | 4 ++-- .../Hero/HeroDesktop/HeroDesktop.tsx | 2 +- 10 files changed, 42 insertions(+), 27 deletions(-) diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json index 0f54944c6..077efd023 100644 --- a/.codesandbox/tasks.json +++ b/.codesandbox/tasks.json @@ -11,15 +11,15 @@ ], "tasks": { "docs": { - "name": "Docs", + "name": "Website: docs", "command": "yarn dev:docs" }, "landing": { - "name": "Landing page", + "name": "Website: landing page", "command": "yarn dev:landing" }, "theme": { - "name": "Theme", + "name": "Website: theme", "command": "yarn dev:theme" }, "storybook": { @@ -35,6 +35,21 @@ "name": "Build Workspace", "command": "yarn build" }, + "build:client": { + "name": "Build: client", + "command": "yarn workspace @codesandbox/sandpack-client build", + "runAtStart": true + }, + "build:themes": { + "name": "Build: themes", + "command": "yarn workspace @codesandbox/sandpack-themes build", + "runAtStart": true + }, + "build:react": { + "name": "Build: react", + "command": "yarn workspace @codesandbox/sandpack-react build", + "runAtStart": true + }, "format": { "name": "Format Workspace", "command": "yarn format" diff --git a/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap b/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap index c6914e823..709a97d6a 100644 --- a/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap +++ b/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap @@ -155,14 +155,14 @@ Object { "base": "#808080", "clickable": "#999999", "disabled": "#4D4D4D", - "error": "#EA3323", - "errorSurface": "#FCF1F0", + "error": "#FFB4A6", + "errorSurface": "#690000", "hover": "#C5C5C5", "surface1": "#151515", "surface2": "#252525", "surface3": "#2F2F2F", - "warning": "#6A4516", - "warningSurface": "#FEF2C0", + "warning": "#E7C400", + "warningSurface": "#3A3000", }, "font": Object { "body": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"", diff --git a/sandpack-react/src/themes/ExternalThemes.stories.tsx b/sandpack-react/src/themes/ExternalThemes.stories.tsx index a00fe3e71..b3d08e558 100644 --- a/sandpack-react/src/themes/ExternalThemes.stories.tsx +++ b/sandpack-react/src/themes/ExternalThemes.stories.tsx @@ -7,5 +7,11 @@ import { Sandpack } from "../"; const stories = storiesOf("presets/Themes (external)", module); Object.entries(allThemes).forEach(([themeName, value]) => - stories.add(themeName, () => ) + stories.add(themeName, () => ( + + )) ); diff --git a/sandpack-react/src/themes/index.ts b/sandpack-react/src/themes/index.ts index 32a5ddb1c..1a833af63 100644 --- a/sandpack-react/src/themes/index.ts +++ b/sandpack-react/src/themes/index.ts @@ -54,10 +54,10 @@ export const defaultDark: SandpackTheme = { hover: "#C5C5C5", accent: "#E5E5E5", - error: "#EA3323", - errorSurface: "#FCF1F0", - warning: "#6A4516", - warningSurface: "#FEF2C0", + error: "#FFB4A6", + errorSurface: "#690000", + warning: "#E7C400", + warningSurface: "#3A3000", }, syntax: { plain: "#FFFFFF", diff --git a/sandpack-themes/src/aquaBlue.ts b/sandpack-themes/src/aquaBlue.ts index 927e854b5..32056a44a 100644 --- a/sandpack-themes/src/aquaBlue.ts +++ b/sandpack-themes/src/aquaBlue.ts @@ -13,8 +13,8 @@ export const aquaBlue: SandpackTheme = { accent: "#2e7692", - error: "#ffcdca", - errorSurface: "#811e18", + error: "#811e18", + errorSurface: "#ffcdca", }, syntax: { diff --git a/sandpack-themes/src/githubLight.ts b/sandpack-themes/src/githubLight.ts index a3a8f4036..abf430621 100644 --- a/sandpack-themes/src/githubLight.ts +++ b/sandpack-themes/src/githubLight.ts @@ -5,14 +5,11 @@ export const githubLight: SandpackTheme = { surface1: "#ffffff", surface2: "#F3F3F3", surface3: "#f5f5f5", - clickable: "#959da5", base: "#24292e", disabled: "#d1d4d8", hover: "#24292e", - accent: "#24292e", - error: "#811e18", errorSurface: "#ffcdca", }, diff --git a/sandpack-themes/src/monokaiPro.ts b/sandpack-themes/src/monokaiPro.ts index 6e3ddd53e..b5aee54c5 100644 --- a/sandpack-themes/src/monokaiPro.ts +++ b/sandpack-themes/src/monokaiPro.ts @@ -5,16 +5,13 @@ export const monokaiPro: SandpackTheme = { surface1: "#2D2A2E", surface2: "#444344", surface3: "#484747", - clickable: "#939293", base: "#C1C0C1", disabled: "#444344", hover: "#FCFCFA", - accent: "#FFD866", - - error: "#811e18", - errorSurface: "#ffcdca", + error: "#ffcdca", + errorSurface: "#c24038", }, syntax: { plain: "rgb(252, 252, 250)", diff --git a/sandpack-themes/src/nightOwl.ts b/sandpack-themes/src/nightOwl.ts index 2715ee131..3739debf9 100644 --- a/sandpack-themes/src/nightOwl.ts +++ b/sandpack-themes/src/nightOwl.ts @@ -10,8 +10,8 @@ export const nightOwl: SandpackTheme = { disabled: "#4D4D4D", hover: "#c5e4fd", accent: "#c5e4fd", - error: "#811e18", - errorSurface: "#ffcdca", + error: "#ffcdca", + errorSurface: "#811e18", }, syntax: { plain: "#d6deeb", diff --git a/sandpack-themes/src/sandpackDark.ts b/sandpack-themes/src/sandpackDark.ts index 797efe401..114b816c0 100644 --- a/sandpack-themes/src/sandpackDark.ts +++ b/sandpack-themes/src/sandpackDark.ts @@ -10,8 +10,8 @@ export const sandpackDark: SandpackTheme = { disabled: "#4D4D4D", hover: "#C5C5C5", accent: "#90e86f", - error: "#b08df8", - errorSurface: "#dac1fb", + error: "#E1CFF8", + errorSurface: "#b08df8", }, syntax: { plain: "#f0fdaf", diff --git a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx index ddd76ec34..ea261567a 100644 --- a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx +++ b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx @@ -318,7 +318,7 @@ export const HeroDesktop: React.FC = () => { width: "100%", transformOrigin: "top right", transform: "scale($scale)", - zIndex: 1 + zIndex: 1, }} > From 160665d71c28a5bfff7513ea2228b64b0fce1f21 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Fri, 5 Aug 2022 11:09:22 +0000 Subject: [PATCH 09/13] chore: [skip ci] bump packages --- CHANGELOG.md | 12 ++++++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 11 +++++++++++ sandpack-react/package.json | 4 ++-- sandpack-themes/CHANGELOG.md | 11 +++++++++++ sandpack-themes/package.json | 2 +- 6 files changed, 38 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37e63cc5f..3fdb13c1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.4](https://github.com/codesandbox/sandpack/compare/v1.3.3...v1.3.4) (2022-08-05) + + +### Bug Fixes + +* **themes:** tweak error surface contrast ([#548](https://github.com/codesandbox/sandpack/issues/548)) ([d9120c9](https://github.com/codesandbox/sandpack/commit/d9120c9f42bc5ab75619332cb44197e5e8d43b13)) +* **website:** ui tweaks ([b07c378](https://github.com/codesandbox/sandpack/commit/b07c378d04f5441ecea8b9718ddb0d494c0aa60e)) + + + + + ## [1.3.3](https://github.com/codesandbox/sandpack/compare/v1.3.2...v1.3.3) (2022-08-04) diff --git a/lerna.json b/lerna.json index c04261f92..5e85c98f1 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.3.3" + "version": "1.3.4" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 683f73019..0b31a3535 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.4](https://github.com/codesandbox/sandpack/compare/v1.3.3...v1.3.4) (2022-08-05) + + +### Bug Fixes + +* **themes:** tweak error surface contrast ([#548](https://github.com/codesandbox/sandpack/issues/548)) ([d9120c9](https://github.com/codesandbox/sandpack/commit/d9120c9f42bc5ab75619332cb44197e5e8d43b13)) + + + + + ## [1.3.3](https://github.com/codesandbox/sandpack/compare/v1.3.2...v1.3.3) (2022-08-04) diff --git a/sandpack-react/package.json b/sandpack-react/package.json index ff8f6461b..9de2f8149 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.3.3", + "version": "1.3.4", "description": "", "keywords": [], "repository": { @@ -59,7 +59,7 @@ }, "devDependencies": { "@babel/core": "^7.12.3", - "@codesandbox/sandpack-themes": "^1.0.0", + "@codesandbox/sandpack-themes": "^1.3.4", "@storybook/addon-actions": "^6.1.9", "@storybook/addon-essentials": "^6.1.9", "@storybook/addon-knobs": "^6.1.9", diff --git a/sandpack-themes/CHANGELOG.md b/sandpack-themes/CHANGELOG.md index f1e4885ed..7cc3b3238 100644 --- a/sandpack-themes/CHANGELOG.md +++ b/sandpack-themes/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.4](https://github.com/codesandbox/sandpack/compare/v1.3.3...v1.3.4) (2022-08-05) + + +### Bug Fixes + +* **themes:** tweak error surface contrast ([#548](https://github.com/codesandbox/sandpack/issues/548)) ([d9120c9](https://github.com/codesandbox/sandpack/commit/d9120c9f42bc5ab75619332cb44197e5e8d43b13)) + + + + + # [1.0.0](https://github.com/codesandbox/sandpack/compare/v0.19.10...v1.0.0) (2022-05-25) diff --git a/sandpack-themes/package.json b/sandpack-themes/package.json index c11892e32..3a8cf548f 100644 --- a/sandpack-themes/package.json +++ b/sandpack-themes/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-themes", - "version": "1.0.0", + "version": "1.3.4", "description": "", "keywords": [], "repository": { From dcd9c7e52d632019bf4c330ef97345a97568ad55 Mon Sep 17 00:00:00 2001 From: danilowoz Date: Fri, 5 Aug 2022 11:10:18 +0000 Subject: [PATCH 10/13] chore: [skip ci] update sizebot --- scripts/sizebot/sizebot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizebot/sizebot.json b/scripts/sizebot/sizebot.json index 2897f6253..3984afceb 100644 --- a/scripts/sizebot/sizebot.json +++ b/scripts/sizebot/sizebot.json @@ -1 +1 @@ -{"sandpack-react":{"gzip":177839,"assets":[{"name":"0","size":535016},{"name":"main","size":530554},{"name":"@codesandbox/sandpack-react","size":64062},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7223,"assets":[{"name":"main","size":20629},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file +{"sandpack-react":{"gzip":177871,"assets":[{"name":"0","size":535016},{"name":"main","size":530554},{"name":"@codesandbox/sandpack-react","size":64062},{"name":"@code-hike/classer","size":1354},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"@stitches/core","size":16685},{"name":"@codemirror/state","size":35779},{"name":"@codemirror/view","size":171187},{"name":"@codemirror/closebrackets","size":6625},{"name":"@codemirror/matchbrackets","size":4066},{"name":"@codemirror/commands","size":24738},{"name":"@codemirror/comment","size":4726},{"name":"@codemirror/gutter","size":10559},{"name":"@codemirror/highlight","size":12576},{"name":"@codemirror/history","size":8939},{"name":"@react-hook/intersection-observer","size":2536},{"name":"@codemirror/lang-css","size":10854},{"name":"@codemirror/lang-javascript","size":6493},{"name":"@codemirror/lang-html","size":15443},{"name":"@codemirror/lang-markdown","size":9602},{"name":"@codemirror/text","size":13773},{"name":"style-mod","size":2618},{"name":"@codemirror/rangeset","size":16198},{"name":"w3c-keyname","size":1861},{"name":"@lezer/common","size":34307},{"name":"@codemirror/language","size":19778},{"name":"@react-hook/passive-layout-effect","size":191},{"name":"@lezer/css","size":9509},{"name":"@lezer/html","size":12213},{"name":"@lezer/javascript","size":54863},{"name":"@codemirror/autocomplete","size":34953},{"name":"@lezer/markdown","size":43319},{"name":"@lezer/lr","size":31274},{"name":"@codemirror/tooltip","size":14316},{"name":"lodash.isequal","size":18521},{"name":"lz-string","size":9259},{"name":"react-devtools-inline","size":842468},{"name":"codesandbox-import-utils","size":2590},{"name":"package-build-stats","size":487},{"name":"intersection-observer","size":12825},{"name":"react-is","size":2244}]},"sandpack-client":{"gzip":7223,"assets":[{"name":"main","size":20629},{"name":"@codesandbox/sandpack-client","size":8415},{"name":"codesandbox-import-utils","size":2590},{"name":"lodash.isequal","size":18521},{"name":"package-build-stats","size":487}]}} \ No newline at end of file From c77b51f334a33ce48b0c1a4a0b57d2dcd081afbc Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Mon, 8 Aug 2022 09:27:22 +0100 Subject: [PATCH 11/13] chore(docs): remove css link (#550) --- .codesandbox/tasks.json | 3 --- website/docs/docs/guides/integrate-monaco-editor.md | 3 +-- website/docs/src/examples/Decorators.js | 3 +-- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json index 077efd023..1a595a5e0 100644 --- a/.codesandbox/tasks.json +++ b/.codesandbox/tasks.json @@ -38,17 +38,14 @@ "build:client": { "name": "Build: client", "command": "yarn workspace @codesandbox/sandpack-client build", - "runAtStart": true }, "build:themes": { "name": "Build: themes", "command": "yarn workspace @codesandbox/sandpack-themes build", - "runAtStart": true }, "build:react": { "name": "Build: react", "command": "yarn workspace @codesandbox/sandpack-react build", - "runAtStart": true }, "format": { "name": "Format Workspace", diff --git a/website/docs/docs/guides/integrate-monaco-editor.md b/website/docs/docs/guides/integrate-monaco-editor.md index 0941dc229..bd8f8851f 100644 --- a/website/docs/docs/guides/integrate-monaco-editor.md +++ b/website/docs/docs/guides/integrate-monaco-editor.md @@ -53,14 +53,13 @@ import { FileTabs, useSandpack, } from "@codesandbox/sandpack-react"; -import "@codesandbox/sandpack-react/dist/index.css"; function MonacoEditor() { const { code, updateCode } = useActiveCode(); const { sandpack } = useSandpack(); return ( - +
Date: Wed, 10 Aug 2022 11:22:14 +0100 Subject: [PATCH 12/13] chore(themes): improvements (#552) --- cypress/plugins/index.js | 2 +- cypress/snapshots.js | 48 +++++++++--------- cypress/support/index.js | 2 +- package.json | 2 +- sandpack-react/.storybook/manager.js | 2 +- snapshots.js | 3 +- website/docs/docs/community.md | 16 +++++- .../container/Container.module.scss | 7 --- website/theme/components/container/index.js | 21 +------- website/theme/pages/index.js | 50 ++++++++++++++++--- website/theme/styles/globals.scss | 2 +- 11 files changed, 88 insertions(+), 67 deletions(-) diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 59b2bab6e..8229063ad 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -19,4 +19,4 @@ module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config -} +}; diff --git a/cypress/snapshots.js b/cypress/snapshots.js index 701980a62..1b5115465 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -1,37 +1,37 @@ module.exports = { - "__version": "9.6.1", - "CodeMirror": { - "Should render a \"html\" component with a proper syntax-highlight": { - "1": "
\n

\n
<!DOCTYPE html>
\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<meta name=\"viewport\" content=\"width=device-width,\n initial-scale=1.0\">\n
\n
<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
\n
<title>HTML 5 Boilerplate</title>
\n
<link rel=\"stylesheet\" href=\"style.css\">
\n
</head>
\n
<body>
\n
<script src=\"index.js\"></script>
\n
</body>
\n
</html>
\n

\n
" + __version: "9.6.1", + CodeMirror: { + 'Should render a "html" component with a proper syntax-highlight': { + 1: '
\n

\n
<!DOCTYPE html>
\n
<html lang="en">
\n
<head>
\n
<meta charset="UTF-8">
\n
<meta name="viewport" content="width=device-width,\n initial-scale=1.0">\n
\n
<meta http-equiv="X-UA-Compatible" content="ie=edge">
\n
<title>HTML 5 Boilerplate</title>
\n
<link rel="stylesheet" href="style.css">
\n
</head>
\n
<body>
\n
<script src="index.js"></script>
\n
</body>
\n
</html>
\n

\n
', }, - "Should render a \"js\" component with a proper syntax-highlight": { - "1": "
\n
function Greeting({ name }) {
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n

\n
export default function App() {
\n
return (
\n
<div>
\n
<Greeting name=\"Divyesh\" />
\n
<Greeting name=\"Sarah\" />
\n
<Greeting name=\"Taylor\" />
\n
</div>
\n
);
\n
}
\n
" + 'Should render a "js" component with a proper syntax-highlight': { + 1: '
\n
function Greeting({ name }) {
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n

\n
export default function App() {
\n
return (
\n
<div>
\n
<Greeting name="Divyesh" />
\n
<Greeting name="Sarah" />
\n
<Greeting name="Taylor" />
\n
</div>
\n
);
\n
}
\n
', }, - "Should render a \"jsx\" component with a proper syntax-highlight": { - "1": "
\n
function Greeting({ name }) {
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n

\n
export default function App() {
\n
return (
\n
<div>
\n
<Greeting name=\"Divyesh\" />
\n
<Greeting name=\"Sarah\" />
\n
<Greeting name=\"Taylor\" />
\n
</div>
\n
);
\n
}
\n
" + 'Should render a "jsx" component with a proper syntax-highlight': { + 1: '
\n
function Greeting({ name }) {
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n

\n
export default function App() {
\n
return (
\n
<div>
\n
<Greeting name="Divyesh" />
\n
<Greeting name="Sarah" />
\n
<Greeting name="Taylor" />
\n
</div>
\n
);
\n
}
\n
', }, - "Should render a \"css\" component with a proper syntax-highlight": { - "1": "
\n
body\n {
\n
background-color: lightblue;
\n
}
\n

\n
h1 {
\n
color: white;
\n
text-align: center;
\n
}
\n

\n
p {
\n
font-family: verdana;
\n
font-size: 20px;
\n
}
\n
" + 'Should render a "css" component with a proper syntax-highlight': { + 1: '
\n
body\n {
\n
background-color: lightblue;
\n
}
\n

\n
h1 {
\n
color: white;
\n
text-align: center;
\n
}
\n

\n
p {
\n
font-family: verdana;
\n
font-size: 20px;
\n
}
\n
', }, - "Should render a \"less\" component with a proper syntax-highlight": { - "1": "
\n
@width: 10px;
\n
@height: @width + 10px;
\n

\n
#header {\n
\n
width: @width;
\n
height: @height;
\n
}
\n
" + 'Should render a "less" component with a proper syntax-highlight': { + 1: '
\n
@width: 10px;
\n
@height: @width + 10px;
\n

\n
#header {\n
\n
width: @width;
\n
height: @height;
\n
}
\n
', }, - "Should render a \"vue\" component with a proper syntax-highlight": { - "1": "
\n
<template>
\n
<div class=\"column is-12\">
\n
<label class=\"label\" for=\"email\">Email</label>
\n
<p :class=\"{\n 'control': true }\">\n
\n
<input v-validate=\"'required|email'\" :class=\"{'input': true, 'is-danger': errors.has('email')\n }\" name=\"email\" type=\"text\" placeholder=\"Email\">
\n
<span v-show=\"errors.has('email')\" class=\"help is-danger\">{{ errors.first('email') }}</span>
\n
</p>
\n
</div>
\n
</template>
\n

\n
<script>
\n
export default {
\n
name: 'basic-example'
\n
};
\n
</script>
\n
" + 'Should render a "vue" component with a proper syntax-highlight': { + 1: '
\n
<template>
\n
<div class="column is-12">
\n
<label class="label" for="email">Email</label>
\n
<p :class="{\n \'control\': true }">\n
\n
<input v-validate="\'required|email\'" :class="{\'input\': true, \'is-danger\': errors.has(\'email\')\n }" name="email" type="text" placeholder="Email">
\n
<span v-show="errors.has(\'email\')" class="help is-danger">{{ errors.first(\'email\') }}</span>
\n
</p>
\n
</div>
\n
</template>
\n

\n
<script>
\n
export default {
\n
name: \'basic-example\'
\n
};
\n
</script>
\n
', }, - "Should render a \"markdown\" component with a proper syntax-highlight": { - "1": "
\n
## Title
\n

\n
- List item
\n
- List item
\n
- List item
\n
- List item
\n
" + 'Should render a "markdown" component with a proper syntax-highlight': { + 1: '
\n
## Title
\n

\n
- List item
\n
- List item
\n
- List item
\n
- List item
\n
', }, "should render a decoration component properly": { - "1": "
\n
const\n people = [{
\n
id: 0,
\n
name: 'Creola Katherine Johnson',
\n
profession: 'mathematician',
\n
}, {
\n
id: 1,
\n
name: 'Mario José Molina-Pasquel Henríquez',
\n
profession: 'chemist',
\n
}];
\n

\n
export default function List() {
\n
const [text, setText] = useState(\"\")
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);
\n
return <ul>{listItems}</ul>;
\n
}
\n
" + 1: '
\n
const\n people = [{
\n
id: 0,
\n
name: \'Creola Katherine Johnson\',
\n
profession: \'mathematician\',
\n
}, {
\n
id: 1,
\n
name: \'Mario José Molina-Pasquel Henríquez\',
\n
profession: \'chemist\',
\n
}];
\n

\n
export default function List() {
\n
const [text, setText] = useState("")
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);
\n
return <ul>{listItems}</ul>;
\n
}
\n
', }, "should load the autocomplete CodeMirror extension": { - "1": "
\n

\n

\n
" - } + 1: '
\n

\n

\n
', + }, }, - "CodeViewer": { + CodeViewer: { "should not be able to cut the content": { - "1": "
\n
import \"./styles.css\";
\n

\n
document.getElementById(\"app\").innerHTML = `
\n
<h1>Hello\n World</h1>
\n
<div>
\n
We use the same\n configuration as Parcel to bundle this sandbox, you can find more\n
\n
info about Parcel \n
\n
<a\n href=\"https://parceljs.org\" target=\"_blank\" rel=\"noopener\n noreferrer\">here</a>.
\n
</div>
\n
`;
\n

\n
" - } - } -} + 1: '
\n
import "./styles.css";
\n

\n
document.getElementById("app").innerHTML = `
\n
<h1>Hello\n World</h1>
\n
<div>
\n
We use the same\n configuration as Parcel to bundle this sandbox, you can find more\n
\n
info about Parcel \n
\n
<a\n href="https://parceljs.org" target="_blank" rel="noopener\n noreferrer">here</a>.
\n
</div>
\n
`;
\n

\n
', + }, + }, +}; diff --git a/cypress/support/index.js b/cypress/support/index.js index d68db96df..d076cec9f 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import "./commands"; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/package.json b/package.json index 5a4b2af3c..03bc60322 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "scripts": { "lint": "eslint '**/*.ts?(x)' --fix", "format:check": "prettier --check '**/*.{ts,tsx}'", - "format": "prettier --write '**/*.{ts,tsx}'", + "format": "prettier --write '**/*.{ts,tsx,js,jsx}'", "test": "TEST_ENV=true jest sandpack-react sandpack-client", "cy:open": "cypress open", "cy:run": "cypress run", diff --git a/sandpack-react/.storybook/manager.js b/sandpack-react/.storybook/manager.js index 0d27c1cd5..9cf71a78e 100644 --- a/sandpack-react/.storybook/manager.js +++ b/sandpack-react/.storybook/manager.js @@ -1,5 +1,5 @@ import { addons } from "@storybook/addons"; addons.setConfig({ - showPanel: false, + showPanel: false, }); diff --git a/snapshots.js b/snapshots.js index 0967ef424..2c63c0851 100644 --- a/snapshots.js +++ b/snapshots.js @@ -1 +1,2 @@ -{} +{ +} diff --git a/website/docs/docs/community.md b/website/docs/docs/community.md index b49748456..2486cf5bc 100644 --- a/website/docs/docs/community.md +++ b/website/docs/docs/community.md @@ -107,9 +107,21 @@ Our goal is to keep our docs comprehensive and updated. If you would like to hel - Fix errors and possible typos in existing docs - Help us add more guides to our docs -#### Plugins +#### Themes -Empowering developers to include live coding experiences over the web is our key goal. The make this happen, accessibility is essential. With plugins, anyone can provide an easy way to get started with Sandpack. +We're open to supporting new Sandpack themes because our key goal is empowering developers to include a custom live coding experiences over the web. That's why we provide plenty of options under `@codesandbox/sandpack-themes,` and we want even more options. So, how contribute to new thems? + +1. Create a new file in [codesandbox/sandpack/sandpack-themes/src](https://github.com/codesandbox/sandpack/tree/main/sandpack-themes/src) folder with following file `[theme name].ts` +2. The content of this file must be an export for an object that contains the theme: + +```js +import type { SandpackTheme } from "./types"; + +export const themeName: SandpackTheme = { + ...themeObject +} +``` +3. Include your new theme into the [`index.ts`](https://github.com/codesandbox/sandpack/blob/main/sandpack-themes/src/index.ts) file, that exposes all themes. #### Features diff --git a/website/theme/components/container/Container.module.scss b/website/theme/components/container/Container.module.scss index 5a575715d..ee4c8f10e 100644 --- a/website/theme/components/container/Container.module.scss +++ b/website/theme/components/container/Container.module.scss @@ -77,11 +77,4 @@ border: solid 1px var(--border-color); overflow-x: scroll; border-radius: 1rem; - padding: 2.5rem; - - pre { - padding: 0; - margin: 0; - font-size: 1.4rem; - } } diff --git a/website/theme/components/container/index.js b/website/theme/components/container/index.js index 7686641ea..d6d6043a6 100644 --- a/website/theme/components/container/index.js +++ b/website/theme/components/container/index.js @@ -1,5 +1,4 @@ import { useEffect, useRef, useState } from "react"; -import { useClipboard } from "use-clipboard-copy"; import styles from "./Container.module.scss"; @@ -59,25 +58,7 @@ export function ContainerColors({ children, isActive }) { //ContainerPre export function ContainerPre({ children }) { - const clipboard = useClipboard(); - - const selectAll = (e) => { - let pre = e.target; - if (pre) { - let range = new Range(); - range.setStart(pre, 0); - range.setEnd(pre, 1); - document.getSelection().removeAllRanges(); - document.getSelection().addRange(range); - clipboard.copy(children); - } - }; - - return ( -
- 
{children}
-
- ); + return
{children}
; } //ContainerSandpack diff --git a/website/theme/pages/index.js b/website/theme/pages/index.js index 1c53b92ff..c6cb45e77 100644 --- a/website/theme/pages/index.js +++ b/website/theme/pages/index.js @@ -1,4 +1,8 @@ -import { Sandpack } from "@codesandbox/sandpack-react"; +import { + Sandpack, + SandpackProvider, + SandpackCodeViewer, +} from "@codesandbox/sandpack-react"; import * as themeGallery from "@codesandbox/sandpack-themes"; import Container, { ContainerControls, @@ -117,6 +121,9 @@ export default function Home() { showLineNumbers: true, showInlineErrors: true, showNavigator: true, + showTabs: true, + closableTabs: true, + visibleFiles: ["/App.js", "/index.js", "/public/index.html", "/styles.css"] }} template="react" theme={theme} @@ -126,7 +133,34 @@ export default function Home() { Export - {JSON.stringify(theme, null, 2)} + + + {" "} + + + + + @@ -235,11 +269,11 @@ function Advanced({ theme, updateTheme }) { })} - font + Font { setTypeControls({ ...typeControls, body: e.target.value }); updateTheme("font.body", e.target.value); @@ -248,7 +282,7 @@ function Advanced({ theme, updateTheme }) { value={typeControls.body} /> { setTypeControls({ ...typeControls, mono: e.target.value }); updateTheme("font.mono", e.target.value); @@ -258,7 +292,7 @@ function Advanced({ theme, updateTheme }) { /> { setTypeControls({ ...typeControls, size: e.target.value }); updateTheme("font.size", `${e.target.value}px`); @@ -268,13 +302,13 @@ function Advanced({ theme, updateTheme }) { /> { setTypeControls({ ...typeControls, lineHeight: e.target.value, }); - updateTheme("font.lineHeight", e.target.value); + updateTheme("font.lineHeight", `${e.target.value}px`); }} type="number" value={typeControls.lineHeight} diff --git a/website/theme/styles/globals.scss b/website/theme/styles/globals.scss index f6ca88e50..702f29208 100644 --- a/website/theme/styles/globals.scss +++ b/website/theme/styles/globals.scss @@ -57,7 +57,7 @@ a { &::after { content: ""; display: inline-block; - background-image: url("/open_in_new.svg"); + background-image: url("/theme/open_in_new.svg"); background-size: 0.7em 0.7em; height: 0.7em; width: 0.7em; From 3c63ef8351881faeecd6230c262039e213cc605b Mon Sep 17 00:00:00 2001 From: danilowoz Date: Wed, 10 Aug 2022 10:35:55 +0000 Subject: [PATCH 13/13] chore: [skip ci] bump packages --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- sandpack-react/CHANGELOG.md | 8 ++++++++ sandpack-react/package.json | 2 +- 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fdb13c1b..07251e9de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.5](https://github.com/codesandbox/sandpack/compare/v1.3.4...v1.3.5) (2022-08-10) + +**Note:** Version bump only for package sandpack + + + + + ## [1.3.4](https://github.com/codesandbox/sandpack/compare/v1.3.3...v1.3.4) (2022-08-05) diff --git a/lerna.json b/lerna.json index 5e85c98f1..e929e552c 100644 --- a/lerna.json +++ b/lerna.json @@ -21,5 +21,5 @@ "message": "chore: [skip ci] bump packages" } }, - "version": "1.3.4" + "version": "1.3.5" } diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md index 0b31a3535..a1c554467 100644 --- a/sandpack-react/CHANGELOG.md +++ b/sandpack-react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.3.5](https://github.com/codesandbox/sandpack/compare/v1.3.4...v1.3.5) (2022-08-10) + +**Note:** Version bump only for package @codesandbox/sandpack-react + + + + + ## [1.3.4](https://github.com/codesandbox/sandpack/compare/v1.3.3...v1.3.4) (2022-08-05) diff --git a/sandpack-react/package.json b/sandpack-react/package.json index 9de2f8149..dc06a678d 100644 --- a/sandpack-react/package.json +++ b/sandpack-react/package.json @@ -1,6 +1,6 @@ { "name": "@codesandbox/sandpack-react", - "version": "1.3.4", + "version": "1.3.5", "description": "", "keywords": [], "repository": {