<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][README.md]" value="# pkg-react-multi-components-example

组件功能描述

## Install

```bash
$ npm i pkg-react-multi-components-example --save
```

## Usage

```jsx
import PkgReactComponentExample from &#39;pkg-react-multi-components-example/Button&#39;;
```
">
<input type="hidden" name="project[files][build.config.mts]" value="import { defineConfig } from &#39;@ice/pkg&#39;;

// https://pkg.ice.work/reference/config-list
export default defineConfig({
  plugins: [
    &#39;example-pkg-plugin&#39;,
  ],
  transform: {
    formats: [&#39;esm&#39;, &#39;es2017&#39;],
    // formats: [],
  },
  sourceMaps: false,
  bundle: {
    formats: [&#39;esm&#39;, &#39;es2017&#39;],
    minify: false,
  },
  alias: {
    &#39;@&#39;: &#39;./src&#39;,
  },
});
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;example-pkg-react-multi-components&quot;,&quot;version&quot;:&quot;0.0.0&quot;,&quot;private&quot;:true,&quot;files&quot;:[&quot;esm&quot;,&quot;cjs&quot;,&quot;es2017&quot;,&quot;dist&quot;,&quot;build&quot;],&quot;exports&quot;:{&quot;./Button&quot;:{&quot;es2017&quot;:{&quot;types&quot;:&quot;./es2017/Button/index.d.ts&quot;,&quot;default&quot;:&quot;./es2017/Button/index.js&quot;},&quot;import&quot;:{&quot;types&quot;:&quot;./esm/Button/index.d.ts&quot;,&quot;default&quot;:&quot;./esm/Button/index.js&quot;}},&quot;./Avatar&quot;:{&quot;es2017&quot;:{&quot;types&quot;:&quot;./es2017/Avatar/index.d.ts&quot;,&quot;default&quot;:&quot;./es2017/Avatar/index.js&quot;},&quot;import&quot;:{&quot;types&quot;:&quot;./esm/Avatar/index.d.ts&quot;,&quot;default&quot;:&quot;./esm/Avatar/index.js&quot;}}},&quot;sideEffects&quot;:[&quot;dist/*&quot;,&quot;*.scss&quot;,&quot;*.less&quot;,&quot;*.css&quot;],&quot;scripts&quot;:{&quot;start&quot;:&quot;ice-pkg start&quot;,&quot;build&quot;:&quot;ice-pkg build&quot;,&quot;prepublishOnly&quot;:&quot;npm run build&quot;},&quot;dependencies&quot;:{&quot;@ice/jsx-runtime&quot;:&quot;^0.2.0&quot;,&quot;@swc/helpers&quot;:&quot;^0.5.1&quot;},&quot;devDependencies&quot;:{&quot;@ice/pkg&quot;:&quot;https://pkg.pr.new/ice-lab/icepkg/@ice/pkg@57b75c93852907350c6436f1e4e18c87e7ecd5e2&quot;,&quot;example-pkg-plugin&quot;:&quot;workspace:*&quot;,&quot;react&quot;:&quot;^18.2.0&quot;,&quot;react-dom&quot;:&quot;^18.2.0&quot;,&quot;@types/react&quot;:&quot;^18.0.0&quot;,&quot;@types/react-dom&quot;:&quot;^18.0.0&quot;,&quot;style-unit&quot;:&quot;^3.0.4&quot;},&quot;peerDependencies&quot;:{&quot;react&quot;:&quot;^17 || ^18&quot;},&quot;publishConfig&quot;:{&quot;access&quot;:&quot;public&quot;},&quot;license&quot;:&quot;MIT&quot;}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;target&quot;: &quot;ESNext&quot;,
    &quot;jsx&quot;: &quot;react&quot;,
    &quot;moduleResolution&quot;: &quot;nodenext&quot;,
    &quot;lib&quot;: [&quot;ESNext&quot;, &quot;DOM&quot;, &quot;DOM.Iterable&quot;],
    &quot;strict&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;paths&quot;: {
      &quot;example-pkg-react-multi-components&quot;: [&quot;./src&quot;],
      &quot;example-pkg-react-multi-components/*&quot;: [&quot;./src/*&quot;]
    }
  },
  &quot;include&quot;: [&quot;src&quot;],
}
">
<input type="hidden" name="project[files][docs/Avatar.md]" value="---
sidebar_label: Avatar
---

```tsx preview
import * as React from &#39;react&#39;;
import Avatar from &#39;example-pkg-react-multi-components/Avatar&#39;;

export default function App () {
  return (
    &lt;div&gt;
      &lt;Avatar /&gt;
    &lt;/div&gt;
  )
}
```
">
<input type="hidden" name="project[files][docs/Button.md]" value="---
sidebar_label: Button
---

```tsx preview
import * as React from &#39;react&#39;;
import Button from &#39;example-pkg-react-multi-components/Button&#39;;

export default function App () {
  return (
    &lt;div&gt;
      &lt;Button&gt;Hello&lt;/Button&gt;
    &lt;/div&gt;
  )
}
```
">
<input type="hidden" name="project[files][docs/index.md]" value="---
sidebar_label: 首页
sidebar_position: 0
---

import Readme from &#39;../README.md&#39;;

&lt;Readme /&gt;
">
<input type="hidden" name="project[files][src/typings.d.ts]" value="/// &lt;reference types=&quot;@ice/pkg/types&quot; /&gt;
">
<input type="hidden" name="project[files][src/Avatar/default.png]" value="https://pkg.pr.new/template/11d1d81a-11b7-4a83-8e75-4b15f202ddf8">
<input type="hidden" name="project[files][src/Avatar/index.css]" value=".pkg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid transparent;
  background-color: rgb(135, 208, 104);
}
">
<input type="hidden" name="project[files][src/Avatar/index.tsx]" value="import * as React from &#39;react&#39;;
import defaultAvatar from &#39;./default.png&#39;;
import &#39;./index.css&#39;;
import &#39;../styles/common.css&#39;;

interface AvatarProps {}

const Avatar: React.FunctionComponent&lt;React.PropsWithChildren&lt;AvatarProps&gt;&gt; = (props) =&gt; {
  return &lt;img src={defaultAvatar} alt=&quot;avatar&quot; className=&quot;pkg-avatar&quot; /&gt;;
};

export default Avatar;
">
<input type="hidden" name="project[files][src/styles/common.css]" value="a {
  color: red;
}">
<input type="hidden" name="project[files][src/Button/index.css]" value=".pkg-btn {
  border-radius: 6px;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 400;
}

.pkg-btn-primary {
  color: #fff;
  background-color: #1677ff;
  box-shadow: 0 2px 0 rgb(5 145 255 / 10%);
}

.pkg-btn-default {
  background-color: #fff;
  border-color: #d9d9d9;
  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
}">
<input type="hidden" name="project[files][src/Button/index.tsx]" value="import * as React from &#39;react&#39;;
import &#39;./index.css&#39;;
import &#39;../styles/common.css&#39;;

interface ButtonProps {
  type?: &#39;primary&#39; | &#39;default&#39;;
}

const Button: React.FunctionComponent&lt;React.PropsWithChildren&lt;ButtonProps&gt;&gt; = (props) =&gt; {
  const { type = &#39;default&#39; } = props;
  const typeCssSelector = {
    primary: &#39;pkg-btn-primary&#39;,
    default: &#39;pkg-btn-default&#39;,
  };
  return &lt;button className={`pkg-btn ${typeCssSelector[type] || &#39;&#39;}`}&gt;{props.children}&lt;/button&gt;;
};

export default Button;
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="example-pkg-react-multi-components">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>