chore: merge main

.codesandbox/devtools.json

@@ -1,12 +1,30 @@
 {
-    "previews": {
-        "3000": {
-            "name": "Playground",
-            "script": "yarn workspace @codesandbox/sandpack-playground dev" 
-        },
-        "6006": {
-            "name": "Storybook",
-            "script": "yarn workspace @codesandbox/sandpack-react storybook"
-        }
+  "previews": {
+    "1234": {
+      "name": "Playground",
+      "command": "yarn workspace @codesandbox/sandpack-playground dev"
+    },
+    "6006": {
+      "name": "Storybook",
+      "command": "yarn workspace @codesandbox/sandpack-react storybook"
+    },
+    "3000": {
+      "name": "Docs",
+      "command": "yarn dev:docs"
     }
+  },
+  "tasks": {
+    "setup": {
+      "name": "Install Dependencies",
+      "command": "yarn"
+    },
+    "build": {
+      "name": "Build Workspace",
+      "command": "yarn build"
+    },
+    "format": {
+      "name": "Format Workspace",
+      "command": "yarn format"
+    }
+  }
 }

.codesandbox/environment.json

@@ -0,0 +1,12 @@
+{
+  "setupTasks": [
+    {
+      "name": "Installing Dependencies",
+      "command": "yarn install"
+    },
+    {
+      "name": "Building Workspace",
+      "command": "yarn build"
+    }
+  ]
+}

.codesandbox/workspace.json

@@ -0,0 +1,10 @@
+{
+  "default": {
+    "name": "Default",
+    "type": "SIDEKICK",
+    "items": [
+      { "type": "PREVIEW", "port": "3000" },
+      { "type": "PREVIEW", "port": "6006" }
+    ]
+  }
+}

.github/ISSUE_TEMPLATE/BUG.md

@@ -0,0 +1,34 @@
+---
+name: 🐛 Bug Report
+about: What went wrong?
+title: 'Bug: '
+labels: 'bug'
+---
+
+# Bug report
+
+## Packages affected
+
+- [ ] sandpack-client
+- [ ] sandpack-react
+
+## Description of the problem
+
+## What were you doing when the problem occurred?
+
+### What steps can we take to reproduce the problem?
+
+<!--
+Your best chance of getting this bug looked at quickly is to provide an example.
+-->
+
+### Link to sandbox: [link]() (optional)
+
+### Your Environment
+
+| Software                | Name/Version |
+| ----------------------- | ------------ |
+| Sandpack-client version |              |
+| Sandpack-react version  |              |
+| Browser                 |              |
+| Operating System        |              |

.github/ISSUE_TEMPLATE/DOCUMENTATION.md

@@ -0,0 +1,6 @@
+---
+name: 📃 Documentation
+about: Report an issue related to documentation
+title: 'Documentation: '
+labels: 'documentation'
+---

.github/ISSUE_TEMPLATE/FEATURE.md

@@ -0,0 +1,19 @@
+---
+name: 🌈 Feature
+about: What cool thing would you like to add?
+title: 'Feature request: '
+labels: 'feature request'
+---
+
+# Tell us how you think we can improve Sandpack
+
+## Packages affected
+
+- [ ] sandpack-client
+- [ ] sandpack-react
+
+## What is this feature?
+
+## How would your idea work?
+
+## Do you have any examples of how you would like to see us implement it?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,4 @@
+contact_links:
+  - name: Question
+    url: https://github.com/codesandbox/sandpack/discussions
+    about: Have any questions?

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,30 @@
+## What kind of change does this pull request introduce?
+
+<!-- Is it a Bug fix, feature, documentation update... -->
+
+## What is the current behavior?
+
+<!-- You can also link to an open issue here -->
+
+## What is the new behavior?
+
+<!-- if this is a feature change -->
+
+## What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.
+
+1. Step A
+2. Step B
+3. Step C
+
+## Checklist
+
+<!-- Have you done all of these things?  -->
+<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
+<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
+
+- [ ] Documentation
+- [ ] Ready to be merged
+      <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
+
+<!-- feel free to add additional comments -->
+<!-- Thank you for contributing! -->

.github/workflows/canary.yml

@@ -59,7 +59,11 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: "12.22.4"
-          registry-url: "https://npm.pkg.github.com/"
+
+      - name: Setup | Authenticate with Registry
+        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Setup | Configure git user
         run: |
@@ -81,7 +85,9 @@ jobs:
           path: bundler
 
       - name: Prepare | Build
-        run: yarn run build:publish
+        run: |
+          yarn workspace @codesandbox/sandpack-client build:publish 
+          yarn workspace @codesandbox/sandpack-react build:publish
 
       - name: Release | Lerna Publish
         run: lerna publish from-package --yes --canary #TODO - remove canary

.github/workflows/release.yml

@@ -29,10 +29,7 @@ jobs:
       - name: Setup | Install dependencies
         run: yarn
 
-      - name: Prepare | Build dependencies
-        run: yarn build:deps
-
-      - name: Prepare | Build sandpack bundler
+      - name: Prepare | Build CodeSandbox bundler
         run: yarn build:sandpack
 
       - name: Archive bundler artifacts
@@ -59,7 +56,11 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: "12.22.4"
-          registry-url: "https://npm.pkg.github.com/"
+
+      - name: Setup | Authenticate with Registry
+        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Setup | Configure git user
         run: |
@@ -81,7 +82,9 @@ jobs:
           path: bundler
 
       - name: Prepare | Build
-        run: yarn run build:publish
+        run: |
+          yarn workspace @codesandbox/sandpack-client build:publish 
+          yarn workspace @codesandbox/sandpack-react build:publish
 
       - name: Release | Lerna Publish
         run: lerna publish from-package --yes --canary #TODO - remove canary

.prettierrc.js

@@ -1 +1,2 @@
-{}
+{
+}

lint-staged.config.js

@@ -3,4 +3,4 @@ module.exports = {
     `eslint ${filenames.join(" ")} --quiet --fix`,
     `prettier --write ${filenames.join(" ")}`,
   ],
-};
+};

package.json

@@ -4,15 +4,22 @@
   "private": true,
   "workspaces": [
     "sandpack-client",
-    "sandpack-react"
+    "sandpack-react",
+    "website/docs",
+    "plugins/*"
+  ],
+  "nohoist": [
+    "website/docs/**",
+    "**/html-minifier-terser"
   ],
   "description": "",
   "scripts": {
     "lint": "eslint '**/*.ts?(x)' --fix",
-    "format": "prettier --write '**/*.ts?(x)'",
+    "format": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx}'",
     "build": "yarn workspaces run build",
-    "build:publish": "yarn workspaces run build:publish",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "clean": "yarn workspaces run clean",
+    "dev:docs": "yarn workspace sandpack-docs start"
   },
   "repository": {
     "type": "git",
@@ -28,6 +35,7 @@
     "@typescript-eslint/parser": "^4.0.0",
     "babel-eslint": "^10.0.0",
     "commitlint": "^13.1.0",
+    "esbuild": "^0.12.21",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-react-app": "^6.0.0",

plugins/docusaurus/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@codesandbox/sandpack-docusaurus",
+  "private": true,
+  "version": "0.0.1",
+  "description": "",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 1"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "0.1.13",
+    "@docusaurus/core": "2.0.0-beta.6",
+    "@docusaurus/utils-validation": "2.0.0-beta.6"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4 || ^17.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0"
+  },
+  "engines": {
+    "node": ">=12.13.0"
+  }
+}

plugins/docusaurus/src/index.js

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+const { validateThemeConfig } = require("./validateThemeConfig");
+
+function theme() {
+  return {
+    name: "docusaurus-sandpack",
+
+    getThemePath() {
+      return path.resolve(__dirname, "./theme");
+    },
+  };
+}
+
+module.exports = theme;
+
+theme.validateThemeConfig = validateThemeConfig;

plugins/docusaurus/src/theme/CodeBlock/index.jsx

@@ -0,0 +1,48 @@
+import { Sandpack } from "@codesandbox/sandpack-react";
+import CodeBlock from "@theme-init/CodeBlock";
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+import "./style.css";
+
+const RenderSandpack = (props) => {
+  const { siteConfig } = useDocusaurusContext();
+  const sandpackPluginOptions = siteConfig.themeConfig.sandpack;
+
+  if (props.sandpack) {
+    const {
+      children,
+      template = "react",
+      file = "/App.js",
+      theme = sandpackPluginOptions.theme,
+    } = props;
+
+    const occurrences = children
+      .split(/(```(.*?[^\\])```)/gms)
+      .filter((line) => line.startsWith("```"));
+
+    const files = occurrences.reduce((acc, curr) => {
+      const [firstLine, ...content] = curr.replace(/```/g, "").split("\n");
+      const fileName = firstLine.match(/file=(.+)/)?.[1] ?? "";
+
+      return {
+        ...acc,
+        [fileName]: {
+          code: content.join("\n"),
+        },
+      };
+    }, {});
+
+    return (
+      <Sandpack
+        files={occurrences.length ? files : { [file]: children }}
+        template={template}
+        theme={theme}
+      />
+    );
+  }
+
+  return <CodeBlock {...props} />;
+};
+
+export default RenderSandpack;

plugins/docusaurus/src/theme/CodeBlock/style.css

@@ -0,0 +1,5 @@
+@import "@codesandbox/sandpack-react/dist/index.css";
+
+.sp-wrapper {
+    margin-bottom: 2em;
+}

plugins/docusaurus/src/validateThemeConfig.js

@@ -0,0 +1,28 @@
+const { Joi } = require("@docusaurus/utils-validation");
+
+const DEFAULT_CONFIG = {
+  theme: "codesandbox-light",
+};
+exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
+
+const Schema = Joi.object({
+  sandpack: Joi.object({
+    theme: Joi.string()
+      .equal(
+        "codesandbox-light",
+        "codesandbox-dark",
+        "night-owl",
+        "aqua-blue",
+        "github-light",
+        "monokai-pro"
+      )
+      .default(DEFAULT_CONFIG.theme),
+  })
+    .label("themeConfig.sandpack")
+    .default(DEFAULT_CONFIG),
+});
+exports.Schema = Schema;
+
+exports.validateThemeConfig = function ({ validate, themeConfig }) {
+  return validate(Schema, themeConfig);
+};