init project.

.babelrc

@@ -0,0 +1,37 @@
+{
+  "env": {
+    "cjs": {
+      "plugins": [
+        [
+          "babel-plugin-transform-remove-imports",
+          { "test": "(less|css)$" }
+        ]
+      ]
+    },
+    "esm": {
+      "plugins": [
+        [
+          "babel-plugin-transform-rename-import",
+          { "original": "^(.+?)\\.less$", "replacement": "$1.css" }
+        ]
+      ]
+    },
+    "esm:dev": {
+      "presets": [
+        "@babel/preset-react",
+        [
+          "@tsbb/babel-preset-tsbb",
+          {
+            "modules": false,
+            "targets": {
+              "browsers": [ "last 2 versions" ]
+            },
+            "transformRuntime": {
+              "useESModules": true
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: Build & Deploy
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-deploy:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@master
+
+    - name: Setup Node
+      uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - run: npm install
+    - run: npm run build:lib
+    - run: npm run doc
+
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+        publish_dir: ./build

.gitignore

@@ -0,0 +1,17 @@
+node_modules
+lib
+build
+npm-debug.log*
+package-lock.json
+.eslintcache
+.DS_Store
+.cache
+.rdoc-dist
+.vscode
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*

.kktrc.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import webpack, {Configuration} from 'webpack';
+import { LoaderConfOptions } from 'kkt';
+import lessModules from '@kkt/less-modules';
+import rawModules from '@kkt/raw-modules';
+import scopePluginOptions from '@kkt/scope-plugin-options';
+import pkg from './package.json';
+
+export default (conf: Configuration, env: string, options: LoaderConfOptions) => {
+  conf = rawModules(conf, env, { ...options });
+  conf = scopePluginOptions(conf, env, {
+    ...options,
+    allowedFiles: [
+      path.resolve(process.cwd(), 'README.md')
+    ]
+  });
+  conf = lessModules(conf, env, options);
+  // Get the project version.
+  conf.plugins!.push(new webpack.DefinePlugin({
+    VERSION: JSON.stringify(pkg.version),
+  }));
+  return conf;
+}

README.md

@@ -0,0 +1,117 @@
+React StackBlitz
+===
+
+<!--dividing-->
+
+[![Build & Deploy](https://github.com/uiwjs/react-stackblitz/workflows/Build%20&%20Deploy/badge.svg)](https://github.com/uiwjs/react-stackblitz/actions)
+[![Issues](https://img.shields.io/github/issues/uiwjs/react-stackblitz.svg)](https://github.com/uiwjs/react-stackblitz/issues)
+[![Forks](https://img.shields.io/github/forks/uiwjs/react-stackblitz.svg)](https://github.com/uiwjs/react-stackblitz/network)
+[![Stars](https://img.shields.io/github/stars/uiwjs/react-stackblitz.svg)](https://github.com/uiwjs/react-stackblitz/stargazers)
+[![Release](https://img.shields.io/github/release/uiwjs/react-stackblitz)](https://github.com/uiwjs/react-stackblitz/releases)
+[![npm version](https://img.shields.io/npm/v/@uiw/react-stackblitz.svg)](https://www.npmjs.com/package/@uiw/react-stackblitz)
+
+A React component is provided that allows you to programmatically generate [stackblitz](https://stackblitz.com/) projects from code samples on the fly.
+
+## Install
+
+```bash
+npm install @uiw/react-stackblitz --save
+```
+
+## Usage
+
+```jsx
+import React from 'react';
+import StackBlitz from '@uiw/react-stackblitz';
+
+const code = `import React from "react";
+import ReactDOM from "react-dom";
+import Avatar from '@uiw/react-avatar';
+import "@uiw/react-avatar/lib/esm/style/index.css";
+
+ReactDOM.render(
+  <div>
+    <div style={{ paddingBottom: 20 }}>
+      <Avatar icon="user" />
+      <Avatar size="small" icon="user" />
+    </div>
+    <div>
+      <Avatar shape="square" size="large" icon="user" />
+      <Avatar shape="square" icon="user" />
+      <Avatar shape="square" size="small" icon="user" />
+      <Avatar shape="square" size="mini" icon="user" />
+    </div>
+  </div>,
+  document.getElementById("root")
+);`;
+
+const Example = () => {
+  return (
+    <StackBlitz
+      template="create-react-app"
+      title="uiw"
+      description="uiw v4.7.2 - demo"
+      tags={["stackblitz", "uiw", "react"]}
+      dependencies={{
+        "react": "17.0.1",
+        "react-dom": "17.0.1",
+        "@uiw/react-avatar": "4.7.2",
+        "@babel/runtime": "7.12.5",
+      }}
+      files={{
+        "index.html": `<div id="root"></div>`,
+        "index.js": code,
+      }}
+    >
+      Basic Example Open in StackBlitz
+    </StackBlitz>
+  )
+}
+```
+
+## Props
+
+```typescript
+type StackBlitzProps = Project & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  /**
+   * String of the Github username, repo and optionally branch/tag/commit.
+   * https://developer.stackblitz.com/docs/platform/javascript-sdk#sdkopengithubprojectreposlug-opts
+   */
+  repoSlug?: string;
+  projectId?: string;
+  embedOpts?: EmbedOpts;
+  openOpts?: OpenOptions;
+};
+```
+
+## Development
+
+Runs the project in development mode.  
+
+```bash
+# Step 1, run first, listen to the component compile and output the .js file
+# listen for compilation output type .d.ts file
+npm run watch
+# Step 2, development mode, listen to compile preview website instance
+npm run start
+```
+
+**production**
+
+Builds the app for production to the build folder.
+
+```bash
+npm run build
+```
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
+
+### Related
+
+- [`@uiw/react-codepen`](https://github.com/uiwjs/react-codepen)
+- [`@uiw/react-codesandbox`](https://github.com/uiwjs/react-codesandbox)
+
+### License
+
+Licensed under the MIT License.

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@uiw/react-stackblitz",
+  "version": "1.0.0",
+  "description": "A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "typings": "lib/esm/index.d.ts",
+  "homepage": "https://uiwjs.github.io/react-stackblitz",
+  "scripts": {
+    "prepare": "npm run build:lib",
+    "doc": "kkt build --app-src ./website",
+    "start": "kkt start --app-src ./website",
+    "build": "npm run build:lib && npm run doc",
+    "build:lib": "npm run ts:build && npm run types:esm && npm run types:cjs && npm run css:build",
+    "watch": "npm run ts:watch & npm run types:watch & npm run css:watch",
+    "types:build": "tsbb types --sourceRoot src --target ESNEXT",
+    "types:watch": "npm run types:esm -- --watch & npm run types:cjs -- --watch",
+    "types:esm": "npm run types:build -- --outDir ../lib/esm",
+    "types:cjs": "npm run types:build -- --outDir ../lib/cjs",
+    "css:build": "compile-less -d src -o lib/esm",
+    "css:watch": "compile-less -d src -o lib/esm --watch",
+    "ts:watch": "tsbb watch --env-name esm:dev --env-name cjs --target react",
+    "ts:build": "tsbb build --target react"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-stackblitz.git"
+  },
+  "author": "Kenny Wang <wowohoo@qq.com>",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-stackblitz",
+    "stackblitz"
+  ],
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "@babel/runtime": ">=7.10.0"
+  },
+  "devDependencies": {
+    "@kkt/less-modules": "6.0.11",
+    "@kkt/raw-modules": "6.0.11",
+    "@kkt/scope-plugin-options": "6.0.11",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "@uiw/react-github-corners": "1.2.0",
+    "@uiw/react-markdown-preview": "2.1.1",
+    "compile-less-cli": "1.6.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "kkt": "6.0.11",
+    "tsbb": "1.7.9"
+  },
+  "dependencies": {
+    "@stackblitz/sdk": "1.5.2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<title>React StackBlitz</title>
+  <meta name="description" content="A React component is provided that allows you to programmatically generate StackBlitz projects from code samples on the fly.">
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+</body>
+
+</html>

renovate.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}

src/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import sdk from "@stackblitz/sdk";
+import { Project, EmbedOptions, OpenOptions } from "@stackblitz/sdk/typings/interfaces";
+
+export type EmbedOpts = {
+  /** Either an element ID string or the target HTMLElement itself. */
+  elementOrId?: string | HTMLElement;
+} & EmbedOptions;
+
+export type StackBlitzProps = Project & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  /**
+   * String of the Github username, repo and optionally branch/tag/commit.
+   * https://developer.stackblitz.com/docs/platform/javascript-sdk#sdkopengithubprojectreposlug-opts
+   */
+  repoSlug?: string;
+  /** The ID of the StackBlitz project to open */
+  projectId?: string;
+  embedOpts?: EmbedOpts;
+  openOpts?: OpenOptions;
+};
+
+const stackBlitz: React.FC<StackBlitzProps> = (props) => {
+  const { repoSlug, projectId, embedOpts = {}, openOpts, files, title, description, template = 'create-react-app', tags, dependencies, settings, ...other } = props || {};
+  const { elementOrId, ...otherEmbedOpts } = embedOpts;
+  function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    const project = { files, title, description, template, tags, dependencies, settings };
+    if (elementOrId && projectId) {
+      sdk.embedProjectId(elementOrId, projectId, project as OpenOptions);
+    } else if (projectId) {
+      sdk.openProjectId(projectId, project as OpenOptions);
+    } else if (elementOrId && repoSlug) {
+      sdk.embedGithubProject(elementOrId, repoSlug, project as OpenOptions);
+    } else if (repoSlug) {
+      sdk.openGithubProject(repoSlug, project as OpenOptions);
+    } else if (elementOrId) {
+      sdk.embedProject(elementOrId, project, otherEmbedOpts);
+    } else {
+      sdk.openProject({ ...project }, openOpts);
+    }
+    if (other.onClick) {
+      other.onClick(event)
+    }
+  }
+  return (
+    <button type="button" {...other} onClick={handleClick}>{props.children}</button>
+  );
+}
+
+export default stackBlitz;

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />