Skip to content

Commit daa9d07

Browse files
jaywcjlovejaywcjlove
committed
init project.
0 parents  commit daa9d07

19 files changed

+561
-0
lines changed

‎.babelrc

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"env": {
3+
"cjs": {
4+
"plugins": [
5+
[
6+
"babel-plugin-transform-remove-imports",
7+
{ "test": "(less|css)$" }
8+
]
9+
]
10+
},
11+
"esm": {
12+
"plugins": [
13+
[
14+
"babel-plugin-transform-rename-import",
15+
{ "original": "^(.+?)\\.less$", "replacement": "$1.css" }
16+
]
17+
]
18+
},
19+
"esm:dev": {
20+
"presets": [
21+
"@babel/preset-react",
22+
[
23+
"@tsbb/babel-preset-tsbb",
24+
{
25+
"modules": false,
26+
"targets": {
27+
"browsers": [ "last 2 versions" ]
28+
},
29+
"transformRuntime": {
30+
"useESModules": true
31+
}
32+
}
33+
]
34+
]
35+
}
36+
}
37+
}

‎.github/workflows/ci.yml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Build & Deploy
2+
on:
3+
push:
4+
branches:
5+
- master
6+
jobs:
7+
build-deploy:
8+
runs-on: ubuntu-18.04
9+
steps:
10+
- uses: actions/checkout@master
11+
12+
- name: Setup Node
13+
uses: actions/setup-node@v1
14+
with:
15+
node-version: 12
16+
17+
- run: npm install
18+
- run: npm run build:lib
19+
- run: npm run doc
20+
21+
- name: Deploy
22+
uses: peaceiris/actions-gh-pages@v3
23+
with:
24+
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
25+
publish_dir: ./build

‎.gitignore

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
node_modules
2+
lib
3+
build
4+
npm-debug.log*
5+
package-lock.json
6+
.eslintcache
7+
.DS_Store
8+
.cache
9+
.rdoc-dist
10+
.vscode
11+
12+
*.bak
13+
*.tem
14+
*.temp
15+
#.swp
16+
*.*~
17+
~*.*

‎.kktrc.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import path from 'path';
2+
import webpack, {Configuration} from 'webpack';
3+
import { LoaderConfOptions } from 'kkt';
4+
import lessModules from '@kkt/less-modules';
5+
import rawModules from '@kkt/raw-modules';
6+
import scopePluginOptions from '@kkt/scope-plugin-options';
7+
import pkg from './package.json';
8+
9+
export default (conf: Configuration, env: string, options: LoaderConfOptions) => {
10+
conf = rawModules(conf, env, { ...options });
11+
conf = scopePluginOptions(conf, env, {
12+
...options,
13+
allowedFiles: [
14+
path.resolve(process.cwd(), 'README.md')
15+
]
16+
});
17+
conf = lessModules(conf, env, options);
18+
// Get the project version.
19+
conf.plugins!.push(new webpack.DefinePlugin({
20+
VERSION: JSON.stringify(pkg.version),
21+
}));
22+
return conf;
23+
}

‎README.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
React Codepen
2+
===
3+
4+
<!--dividing-->
5+
6+
[![Build & Deploy](https://github.com/uiwjs/react-codepen/workflows/Build%20&%20Deploy/badge.svg)](https://github.com/uiwjs/react-codepen/actions)
7+
[![Issues](https://img.shields.io/github/issues/uiwjs/react-codepen.svg)](https://github.com/uiwjs/react-codepen/issues)
8+
[![Forks](https://img.shields.io/github/forks/uiwjs/react-codepen.svg)](https://github.com/uiwjs/react-codepen/network)
9+
[![Stars](https://img.shields.io/github/stars/uiwjs/react-codepen.svg)](https://github.com/uiwjs/react-codepen/stargazers)
10+
[![Release](https://img.shields.io/github/release/uiwjs/react-codepen)](https://github.com/uiwjs/react-codepen/releases)
11+
[![npm version](https://img.shields.io/npm/v/@uiw/react-codepen.svg)](https://www.npmjs.com/package/@uiw/react-codepen)
12+
13+
A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/react-codepen --save
19+
```
20+
21+
## Usage
22+
23+
```jsx
24+
import React from 'react';
25+
import Codepen from '@uiw/react-codepen';
26+
27+
const code = `import { Button, Divider, Icon } from 'uiw';
28+
29+
ReactDOM.render(
30+
<div>
31+
<Button type="primary">主要按钮</Button>
32+
<Button type="success">成功按钮</Button>
33+
<Button type="warning">警告按钮</Button>
34+
<Button type="danger">错误按钮</Button>
35+
<Button type="light">亮按钮</Button>
36+
<Button type="dark">暗按钮</Button>
37+
</div>,
38+
document.getElementById("root")
39+
);`;
40+
41+
const Example = () => {
42+
return (
43+
<Codepen
44+
title="uiw v4.7.2 - demo"
45+
html={`<div id="root"></div>`}
46+
css_external="https://unpkg.com/[email protected]/dist/uiw.min.css"
47+
js={code}
48+
js_external="https://unpkg.com/[email protected]/umd/react.development.js;https://unpkg.com/[email protected]/umd/react-dom.development.js;https://unpkg.com/[email protected]/index.js;https://unpkg.com/[email protected]/dist/uiw.min.js;https://unpkg.com/@uiw/[email protected]/index.js"
49+
>
50+
Basic Example Open in Codepen
51+
</Codepen>
52+
)
53+
}
54+
```
55+
56+
## Props
57+
58+
```typescript
59+
type CodePenOption = {
60+
title?: string;
61+
html?: string;
62+
js?: string;
63+
css?: string;
64+
editors?: string;
65+
css_external?: string;
66+
js_external?: string;
67+
js_pre_processor?: string;
68+
}
69+
70+
type CodepenProps = CodePenOption & React.FormHTMLAttributes<HTMLFormElement>;
71+
```
72+
73+
## Development
74+
75+
Runs the project in development mode.
76+
77+
```bash
78+
# Step 1, run first, listen to the component compile and output the .js file
79+
# listen for compilation output type .d.ts file
80+
npm run watch
81+
# Step 2, development mode, listen to compile preview website instance
82+
npm run start
83+
```
84+
85+
**production**
86+
87+
Builds the app for production to the build folder.
88+
89+
```bash
90+
npm run build
91+
```
92+
93+
The build is minified and the filenames include the hashes.
94+
Your app is ready to be deployed!
95+
96+
### License
97+
98+
Licensed under the MIT License.

‎package.json

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "@uiw/react-codepen",
3+
"version": "1.0.0",
4+
"description": "A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.",
5+
"main": "lib/cjs/index.js",
6+
"module": "lib/esm/index.js",
7+
"typings": "lib/esm/index.d.ts",
8+
"homepage": "https://uiwjs.github.io/react-codepen",
9+
"scripts": {
10+
"prepare": "npm run build:lib",
11+
"doc": "kkt build --app-src ./website",
12+
"start": "kkt start --app-src ./website",
13+
"build": "npm run build:lib && npm run doc",
14+
"build:lib": "npm run ts:build && npm run types:esm && npm run types:cjs && npm run css:build",
15+
"watch": "npm run ts:watch & npm run types:watch & npm run css:watch",
16+
"types:build": "tsbb types --sourceRoot src --target ESNEXT",
17+
"types:watch": "npm run types:esm -- --watch & npm run types:cjs -- --watch",
18+
"types:esm": "npm run types:build -- --outDir ../lib/esm",
19+
"types:cjs": "npm run types:build -- --outDir ../lib/cjs",
20+
"css:build": "compile-less -d src -o lib/esm",
21+
"css:watch": "compile-less -d src -o lib/esm --watch",
22+
"ts:watch": "tsbb watch --env-name esm:dev --env-name cjs --target react",
23+
"ts:build": "tsbb build --target react"
24+
},
25+
"repository": {
26+
"type": "git",
27+
"url": "https://github.com/uiwjs/react-codepen.git"
28+
},
29+
"author": "Kenny Wang <[email protected]>",
30+
"license": "MIT",
31+
"peerDependencies": {
32+
"react": ">=16.9.0",
33+
"react-dom": ">=16.9.0",
34+
"@babel/runtime": ">=7.10.0"
35+
},
36+
"devDependencies": {
37+
"@kkt/less-modules": "6.0.11",
38+
"@kkt/raw-modules": "6.0.11",
39+
"@kkt/scope-plugin-options": "6.0.11",
40+
"@types/react": "17.0.0",
41+
"@types/react-dom": "17.0.0",
42+
"@uiw/react-github-corners": "1.2.0",
43+
"@uiw/react-markdown-preview": "2.1.1",
44+
"compile-less-cli": "1.6.0",
45+
"react": "17.0.1",
46+
"react-dom": "17.0.1",
47+
"kkt": "6.0.11",
48+
"tsbb": "1.7.9"
49+
},
50+
"eslintConfig": {
51+
"extends": [
52+
"react-app",
53+
"react-app/jest"
54+
]
55+
},
56+
"browserslist": {
57+
"production": [
58+
">0.2%",
59+
"not dead",
60+
"not op_mini all"
61+
],
62+
"development": [
63+
"last 1 chrome version",
64+
"last 1 firefox version",
65+
"last 1 safari version"
66+
]
67+
}
68+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
9+
<title>React App</title>
10+
</head>
11+
12+
<body>
13+
<noscript>
14+
You need to enable JavaScript to run this app.
15+
</noscript>
16+
<div id="root"></div>
17+
</body>
18+
19+
</html>

‎renovate.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": [
3+
"config:base"
4+
]
5+
}

‎src/index.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
3+
/**
4+
* CodePenOption Example
5+
*
6+
* ```js
7+
* {
8+
* title: `uiw${version} - demo`,
9+
* editors: '0010',
10+
* js_pre_processor: 'babel',
11+
* html: '<div id="container" style="padding: 24px"></div>',
12+
* js: jsxCode || '',
13+
* css: '',
14+
* css_external: `https://unpkg.com/uiw${version}/dist/uiw.min.css`,
15+
* js_external: `https://unpkg.com/[email protected]/umd/react.development.js;https://unpkg.com/[email protected]/umd/react-dom.development.js;https://unpkg.com/[email protected]/index.js;https://unpkg.com/uiw${version}/dist/uiw.min.js;https://unpkg.com/@uiw/[email protected]/index.js`,
16+
* };
17+
* ```
18+
*/
19+
export type CodePenOption = {
20+
title?: string;
21+
html?: string;
22+
js?: string;
23+
css?: string;
24+
editors?: string;
25+
css_external?: string;
26+
js_external?: string;
27+
js_pre_processor?: string;
28+
}
29+
30+
export type CodepenProps = CodePenOption & React.FormHTMLAttributes<HTMLFormElement>;
31+
32+
const defaultOptions: CodePenOption = {
33+
editors: '0010',
34+
js_pre_processor: 'babel',
35+
}
36+
37+
const codepen: React.FC<CodepenProps> = (props) => {
38+
const { title, html, js, css, editors = defaultOptions.editors, css_external, js_external, js_pre_processor = defaultOptions.js_pre_processor, ...other } = props || {};
39+
const codePenOption: CodePenOption = { title, html, js, css, editors, css_external, js_external, js_pre_processor };
40+
return (
41+
<form action="https://codepen.io/pen/define" method="POST" target="_blank" {...other}>
42+
<input type="hidden" name="data" value={JSON.stringify(codePenOption)} />
43+
<button type="submit">{props.children}</button>
44+
</form>
45+
);
46+
}
47+
48+
export default codepen;

0 commit comments

Comments
 (0)