Merge branch 'main' into docs/improve-docs-content

codesandbox · Nov 25, 2021 · 6ebba3c · 6ebba3c
2 parents 520d77a + ec4005a
commit 6ebba3c
Show file tree

Hide file tree

Showing 53 changed files with 1,177 additions and 666 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.3](https://github.com/codesandbox/sandpack/compare/v0.7.2...v0.7.3) (2021-11-25)
+
+**Note:** Version bump only for package sandpack
+
+
+
+
+
+## [0.7.2](https://github.com/codesandbox/sandpack/compare/v0.7.1...v0.7.2) (2021-11-25)
+
+
+### Bug Fixes
+
+* **landing:** ui tweaks ([#176](https://github.com/codesandbox/sandpack/issues/176)) ([5ecf9ed](https://github.com/codesandbox/sandpack/commit/5ecf9eddd9184703e19f61739f559cca21b0595c))
+
+
+### Features
+
+* landing - update showcase structure ([#181](https://github.com/codesandbox/sandpack/issues/181)) ([b35eef3](https://github.com/codesandbox/sandpack/commit/b35eef302f763fb17a29f59c39d76641a6f3484c))
+
+
+
+
+
 ## [0.7.1](https://github.com/codesandbox/sandpack/compare/v0.7.0...v0.7.1) (2021-11-24)
 
 

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "message": "chore: [skip ci] bump packages"
     }
   },
-  "version": "0.7.1"
+  "version": "0.7.3"
 }
diff --git a/plugins/docusaurus/package.json b/plugins/docusaurus/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codesandbox/sandpack-docusaurus",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "",
   "main": "src/index.js",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "build": "echo 1"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.6.0",
+    "@codesandbox/sandpack-react": "^0.7.1",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9"
   },

diff --git a/sandpack-react/CHANGELOG.md b/sandpack-react/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.3](https://github.com/codesandbox/sandpack/compare/v0.7.2...v0.7.3) (2021-11-25)
+
+**Note:** Version bump only for package @codesandbox/sandpack-react
+
+
+
+
+
+## [0.7.2](https://github.com/codesandbox/sandpack/compare/v0.7.1...v0.7.2) (2021-11-25)
+
+
+### Bug Fixes
+
+* **landing:** ui tweaks ([#176](https://github.com/codesandbox/sandpack/issues/176)) ([5ecf9ed](https://github.com/codesandbox/sandpack/commit/5ecf9eddd9184703e19f61739f559cca21b0595c))
+
+
+
+
+
 ## [0.7.1](https://github.com/codesandbox/sandpack/compare/v0.7.0...v0.7.1) (2021-11-24)
 
 **Note:** Version bump only for package @codesandbox/sandpack-react

diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-react",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "",
   "keywords": [],
   "repository": {

diff --git a/sandpack-react/src/components/TranspiledCode/index.tsx b/sandpack-react/src/components/TranspiledCode/index.tsx
@@ -5,9 +5,10 @@ import { ErrorOverlay } from "../../common/ErrorOverlay";
 import { LoadingOverlay } from "../../common/LoadingOverlay";
 import { useSandpack } from "../../hooks/useSandpack";
 import { useTranspiledCode } from "../../hooks/useTranspiledCode";
+import type { CodeViewerProps } from "../CodeViewer";
 import { SandpackCodeViewer } from "../CodeViewer";
 
-export const SandpackTranspiledCode: React.FC = () => {
+export const SandpackTranspiledCode: React.FC<CodeViewerProps> = (props) => {
   const { sandpack } = useSandpack();
   const transpiledCode = useTranspiledCode();
   const c = useClasser("sp");
@@ -23,7 +24,9 @@ export const SandpackTranspiledCode: React.FC = () => {
 
   return (
     <div className={c("transpiled-code")}>
-      {transpiledCode ? <SandpackCodeViewer code={transpiledCode} /> : null}
+      {transpiledCode && (
+        <SandpackCodeViewer code={transpiledCode} {...props} />
+      )}
       <iframe ref={hiddenIframeRef} style={{ display: "none" }} />
       <ErrorOverlay />
       <LoadingOverlay clientId="hidden" />

diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css
@@ -113,7 +113,7 @@
   font-family: var(--sp-font-mono);
   font-size: var(--sp-font-size);
   color: var(--sp-colors-fg-active);
-  line-height: 1.4;
+  line-height: var(--sp-line-height);
 }
 
 .sp-code-editor {
@@ -149,6 +149,34 @@
   outline: 0;
 }
 
+.sp-cm .cm-scroller::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-track {
+  background-color: var(--sp-colors-bg-default);
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+/* Handle */
+.sp-cm .cm-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--sp-colors-fg-default);
+  border-radius: 9999px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-track {
+  border-left: 1px solid var(--sp-colors-fg-inactive);
+}
+
 .sp-transpiled-code {
   display: flex;
   flex-direction: column;
@@ -342,6 +370,7 @@
   border-radius: var(--sp-border-radius);
   border: 1px solid var(--sp-colors-fg-inactive);
   height: 24px;
+  line-height: 24px;
   font-size: inherit;
   outline: none;
   flex: 1;

diff --git a/sandpack-react/src/themes/index.ts b/sandpack-react/src/themes/index.ts
@@ -79,7 +79,7 @@ export const sandpackDark: SandpackTheme = {
     defaultText: "#5a5a5a",
     inactiveText: "#1a1a1a",
     activeBackground: "#272727",
-    defaultBackground: "#131313",
+    defaultBackground: "#151515",
     inputBackground: "#2e2e2e",
     accent: "#90e86f",
     errorBackground: "#dac1fb",

diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md
@@ -2,6 +2,8 @@
 sidebar_position: 3
 ---
 
+import { NestedSandpack } from "../../src/NestedSandpack";
+
 # Custom Content
 
 The `Sandpack` component that you used in the previous section is called a `preset`. It wraps all the individual components and provides some smart defaults.
@@ -14,26 +16,18 @@ Your `Sandpack` instance can start with a predefined `template`. A template is a
 collection of `files` and `dependencies`, a basic starter for a sandbox, if you want.
 The `vue` template in this instance, has the starter files generated by the `vue-cli`.
 
-```jsx
-<Sandpack template="vue" />
-```
-
-```js sandpack template=vue
-
-```
-
-The template prop accepts a string and has the following valid options: `react`, `vue`, `vue3`, `angular` and `vanilla`. If the template prop is invalid, it default to `vanilla`.
+<!-- prettier-ignore -->
+<NestedSandpack nestedProps={`  // Try out the included templates below!
+    template="react"
+    // template="react-ts"
+    // template="angular"
+    // template="vue"
+    // template="vue3"
+    // template="vanilla-ts"
+    // template="vanilla" // default`}
+/>
 
-```jsx
-<>
-  <Sandpack template="react" />
-  <Sandpack template="angular" />
-  <Sandpack template="vanilla" />
-
-  {/* Also valid, defaults to vanilla */}
-  <Sandpack />
-</>
-```
+The template prop accepts a string and has the following valid options: `react`, `react-ts`, `vue`, `vue3`, `angular`, `vanilla`, and `vanilla-ts`. If the template prop is invalid, it default to `vanilla`.
 
 ## Files
 
@@ -42,19 +36,17 @@ instance. For this, you can use the `files` prop.
 
 The code is passed as a `string` and should be pre-formatted:
 
-```jsx
-const code = `export default function App() {
-  return <h1>Hello CodeSandbox</h1>
-}
-`;
-
-<Sandpack
-  template="react"
-  files={{
-    "/App.js": code,
-  }}
-/>;
-```
+<!-- prettier-ignore -->
+<NestedSandpack
+  setupCode={`import { Sandpack } from "@codesandbox/sandpack-react";
+const code = \`export default function App() {
+  return <h1>Hello Sandpack</h1>
+}\`;`}
+  nestedProps={`  template="react"
+    files={{
+      "/App.js": code,
+    }}`}
+  />
 
 The `files` prop accepts an object, where each `key` is the **relative path** of the file in the sandbox folder
 structure. Files are added on top of the `template` structure. Furthermore, the `template` is using the same type to [define the files](https://github.com/codesandbox/sandpack/blob/main/sandpack-react/src/templates/react.ts) it contains. With this in mind, you can overwrite any of the template/sandbox
@@ -64,14 +56,6 @@ files (eg: `/index.js`, `/index.css`, etc.)
 Make sure you don't omit the leading slash (`/`) when setting the file paths
 :::
 
-If you try it out, you should get something like this:
-
-```js sandpack
-export default function App() {
-  return <h1>Hello CodeSandbox!</h1>;
-}
-```
-
 :::info Available files
 Notice that when passing the `files` prop, only the content you pass there is available in the file tabs. The other files are still bundled together, but you don't see them.
 :::
@@ -210,7 +194,10 @@ export default function App() {
 
 TODO: Inject example
 
-If both `template` and `customSetup` are provided then the `customSetup` values are merged and might override the ones from the `template`. With `customSetup` you can build your entire sandbox without using a `template`.
+If both `template` and
+`customSetup` are provided, the two are merged, with the `customSetup` values
+having higher priority. If you don't want to start from a template, you can
+specify your entire sandbox structure with the `customSetup`.
 
 ### Dependencies