@baic/yolk-cli 2.0.0-beta.1 → 2.0.1-alpha.10

package/templates/{web/base → mobile}/package.json.tpl

@@ -3,10 +3,9 @@
   "name": "{{ projectName }}",
   "scripts": {
     "start": "yolk start",
-    "build": "yolk build",
-    "test": "yolk test"
+    "build": "yolk build"
   },
   "dependencies": {
-    "@baic/preset-yolk-web": "1.x"
+    "@baic/preset-yolk-mobile": "~2.0.1-alpha.10"
   }
 }

package/templates/mobile/src/app.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { Provider } from '@baic/yolk-browser-base';
+
+import { Provider as WebProvider } from '@baic/yolk-mobile';
+
+import request from '@/common/request';
+
+import '@baic/yolk-mobile/lib/style/index.less';
+
+export function rootContainer(container: React.ReactNode) {
+  return (
+    <Provider request={request}>
+      <WebProvider
+        iconfontScriptUrl={[
+          '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
+          '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
+        ]}
+      >
+        {container}
+      </WebProvider>
+    </Provider>
+  );
+}

package/templates/mobile/src/common/request.ts

@@ -0,0 +1,3 @@
+import { Request } from '@baic/yolk-browser-base';
+
+export default new Request();

package/templates/{miniapp/base → mobile}/src/common/util.ts

@@ -1,4 +1,4 @@
-import { Util } from '@baic/yolk-miniapp';
+import { Util } from '@baic/yolk-mobile';
 
 const util = {
   ...Util,

package/templates/mobile/{base/src → src}/global.less

@@ -1,3 +1,3 @@
 #yolk-app {
   height: 100%;
-}
+}

package/templates/mobile/src/layouts/index.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IRouteComponentProps } from 'umi';
+
+export default ({ children }: IRouteComponentProps) => <>{children}</>;

package/templates/mobile/src/pages/404.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Result } from 'antd-mobile';
+
+export default () => (
+  <Result
+    title="404"
+    description="对不起，您访问的页面不存在。"
+    status="warning"
+  />
+);

package/templates/mobile/src/pages/demo/examples/BarCode.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BarCode } from '@baic/yolk-mobile';
+
+export default () => <BarCode value="https://www.baidu.com" />;

package/templates/mobile/src/pages/demo/examples/Iconfont.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Provider, Iconfont } from '@baic/yolk-mobile';
+
+export default () => {
+  return (
+    <Provider
+      iconfontScriptUrl={[
+        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
+        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
+      ]}
+    >
+      <Iconfont type="icon-javascript" />
+      <Iconfont type="icon-java" />
+      <Iconfont type="icon-shoppingcart" />
+      <Iconfont type="icon-python" />
+    </Provider>
+  );
+};

package/templates/mobile/src/pages/demo/examples/Loading.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Loading } from '@baic/yolk-mobile';
+
+export default () => (
+  <div
+    style={{
+      position: 'relative',
+    }}
+  >
+    <Loading />
+  </div>
+);

package/templates/mobile/src/pages/demo/examples/QrCode.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { QrCode } from '@baic/yolk-mobile';
+
+export default () => <QrCode value="https://www.baidu.com" />;

package/templates/mobile/src/pages/demo/examples/Required.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Required } from '@baic/yolk-mobile';
+
+export default () => <Required>必填</Required>;

package/templates/mobile/src/pages/demo/examples/TimerButton.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TimerButton } from '@baic/yolk-mobile';
+
+export default () => <TimerButton>验证码</TimerButton>;

package/templates/mobile/src/pages/demo/examples/usePreload.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Util } from '@baic/yolk';
+import { usePreload } from '@baic/yolk-mobile';
+export default () => {
+  const [wrap] = usePreload(async () => {
+    await Util.delay(1000);
+  });
+  return wrap(<div>页面加载完成显示出来了</div>);
+};

package/templates/mobile/src/pages/demo/index.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { Tabs } from 'antd-mobile';
+
+import BarCode from './examples/BarCode';
+import Iconfont from './examples/Iconfont';
+import Loading from './examples/Loading';
+import QrCode from './examples/QrCode';
+import Required from './examples/Required';
+import TimerButton from './examples/TimerButton';
+import usePreload from './examples/usePreload';
+
+const { Tab } = Tabs;
+
+const tabs: Record<string, React.FunctionComponent> = {
+  BarCode,
+  Iconfont,
+  Loading,
+  QrCode,
+  Required,
+  TimerButton,
+  usePreload,
+};
+
+export default () => {
+  const keys = Object.keys(tabs);
+  return (
+    <Tabs defaultActiveKey={keys[0]}>
+      {keys.map(key => {
+        const tab = tabs[key];
+        return (
+          <Tab key={key} title={key}>
+            {React.createElement(tab)}
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};

package/templates/mobile/src/pages/index.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default () => <div>Hello world</div>;

package/templates/mobile/{base/src → src}/types/user.d.ts

@@ -1,3 +1,3 @@
 export interface User {
   id?: string;
-}
+}

package/templates/{web/base → mobile}/tsconfig.json

@@ -4,14 +4,14 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "sourceMap": true,
     "baseUrl": "./",
     "strict": true,
     "paths": {
       "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
+      "@@/*": ["src/.umi/*"]
     },
     "allowSyntheticDefaultImports": true
   },

package/templates/mobile/typings.d.ts

@@ -0,0 +1,16 @@
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';

package/templates/web/{base/.stylelintrc.json → .stylelintrc.json}

@@ -1,3 +1,3 @@
 {
   "extends": "@baic/stylelint-config-yolk"
-}
+}

package/templates/web/.umirc.ts

@@ -0,0 +1,6 @@
+import defineConfig from '@baic/yolk-umi-web/lib/define-config';
+
+export default defineConfig({
+  title: 'web',
+  publicPath: '/',
+});

package/templates/web/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Baic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/templates/web/{base/README.md.tpl → README.md.tpl}

@@ -1,18 +1,22 @@
-# {{ projectName }}
+# web
 
 ## Getting Started
 
 Install dependencies,
 
 {{ #dependenciesInstallType }}
+
 ```bash
 $ {{ dependenciesInstallType }} install
 ```
+
 {{ /dependenciesInstallType }}
 {{ ^dependenciesInstallType }}
+
 ```bash
 $ yarn install
 ```
+
 {{ /dependenciesInstallType }}
 
 Start the dev server,
@@ -27,4 +31,4 @@ Build,
 $ npm run build
 ```
 
-[查阅文档](https://303394539.github.io/yolk-docs/)
+[查阅文档](https://303394539.github.io/yolk-docs/)

package/templates/{mobile/base → web}/package.json.tpl

@@ -3,10 +3,9 @@
   "name": "{{ projectName }}",
   "scripts": {
     "start": "yolk start",
-    "build": "yolk build",
-    "test": "yolk test"
+    "build": "yolk build"
   },
   "dependencies": {
-    "@baic/preset-yolk-mobile": "1.x"
+    "@baic/preset-yolk-web": "~2.0.1-alpha.10"
   }
 }

package/templates/web/src/app.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { Provider } from '@baic/yolk-browser-base';
+
+import { Provider as WebProvider } from '@baic/yolk-web';
+
+import request from '@/common/request';
+
+import '@baic/yolk-web/lib/style/index.less';
+
+export function rootContainer(container: React.ReactNode) {
+  return (
+    <Provider request={request}>
+      <WebProvider
+        inputMaxLength={40}
+        iconfontScriptUrl={[
+          '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
+          '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
+        ]}
+      >
+        {container}
+      </WebProvider>
+    </Provider>
+  );
+}

package/templates/web/src/common/request.ts

@@ -0,0 +1,3 @@
+import { Request } from '@baic/yolk-browser-base';
+
+export default new Request();

package/templates/{mobile/base → web}/src/common/util.ts

@@ -1,4 +1,4 @@
-import { Util } from '@baic/yolk-mobile-ui';
+import { Util } from '@baic/yolk-web';
 
 const util = {
   ...Util,

package/templates/web/{base/src → src}/global.less

@@ -1,3 +1,3 @@
 #yolk-app {
   height: 100%;
-}
+}

package/templates/web/src/layouts/index.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IRouteComponentProps } from 'umi';
+
+export default ({ children }: IRouteComponentProps) => <>{children}</>;

package/templates/web/src/pages/demo/examples/BankInput.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Form } from 'antd';
+import { useForm } from '@baic/yolk-web-form';
+import { BankInput } from '@baic/yolk-web';
+
+export default () => {
+  const [form] = useForm();
+  const { createFormItem } = form;
+  return (
+    <Form form={form}>
+      {createFormItem({ name: 'BankInput' })(<BankInput />)}
+    </Form>
+  );
+};

package/templates/web/src/pages/demo/examples/BarCode.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BarCode } from '@baic/yolk-web';
+
+export default () => <BarCode value="https://www.baidu.com" />;

package/templates/web/src/pages/demo/examples/Collapse.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Collapse } from '@baic/yolk-web';
+
+export default () => <Collapse title="折叠组件">这里是隐藏内容</Collapse>;

package/templates/web/src/pages/demo/examples/DatePicker.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DatePicker } from '@baic/yolk-web';
+
+export default () => <DatePicker autoFixDate />;

package/templates/web/src/pages/demo/examples/Flex.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Flex } from '@baic/yolk-web';
+
+export default () => (
+  <Flex>
+    <Flex>1</Flex>
+    <Flex>2</Flex>
+    <Flex>3</Flex>
+  </Flex>
+);

package/templates/web/src/pages/demo/examples/Grid/1.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Grid } from '@baic/yolk-web';
+
+export default () => (
+  <Grid
+    data={[
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+    ]}
+  />
+);

package/templates/web/src/pages/demo/examples/Grid/2.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Grid } from '@baic/yolk-web';
+
+export default () => (
+  <Grid
+    span={2}
+    data={[
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+    ]}
+  />
+);

package/templates/web/src/pages/demo/examples/Grid/3.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, Divider } from 'antd';
+import { Grid } from '@baic/yolk-web';
+
+export default () => {
+  const [bordered, setBordered] = React.useState(true);
+  const onClickHandler = React.useCallback(() => setBordered(!bordered), [
+    bordered,
+  ]);
+  return (
+    <>
+      <Button onClick={onClickHandler}>{bordered ? '关闭' : '开启'}边框</Button>
+      <Divider />
+      <Grid
+        bordered={bordered}
+        data={[
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+        ]}
+      />
+    </>
+  );
+};

package/templates/web/src/pages/demo/examples/Grid/4.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Radio, Divider } from 'antd';
+import { RadioChangeEvent } from 'antd/lib/radio/interface';
+import { Grid } from '@baic/yolk-web';
+import { GridProps } from '@baic/yolk-web/lib/grid';
+
+export default () => {
+  const [size, setSize] = React.useState<GridProps['size']>('middle');
+  const onChangeHandler = React.useCallback(
+    (e: RadioChangeEvent) => setSize(e.target.value),
+    [],
+  );
+  return (
+    <>
+      <Radio.Group value={size} onChange={onChangeHandler}>
+        <Radio.Button value="small">small</Radio.Button>
+        <Radio.Button value="middle">middle</Radio.Button>
+        <Radio.Button value="large">large</Radio.Button>
+      </Radio.Group>
+      <Divider />
+      <Grid
+        size={size}
+        data={[
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+        ]}
+      />
+    </>
+  );
+};

package/templates/web/src/pages/demo/examples/Grid/5.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Form } from 'antd';
+import { useForm } from '@baic/yolk-web-form';
+import { Grid, Input } from '@baic/yolk-web';
+
+export default () => {
+  const [form] = useForm();
+  const { createFormItem } = form;
+  return (
+    <Form form={form}>
+      <Grid
+        data={[
+          {
+            label: '标题',
+            value: createFormItem({
+              name: 'content',
+              rules: 'required',
+            })(<Input />),
+            required: true,
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+        ]}
+      />
+    </Form>
+  );
+};

package/templates/web/src/pages/demo/examples/Grid/6.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Grid } from '@baic/yolk-web';
+
+export default () => (
+  <Grid
+    bordered={false}
+    itemDirection="vertical"
+    data={[
+      {
+        label: '标题',
+        value: '内容',
+        required: true,
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+    ]}
+  />
+);

package/templates/web/src/pages/demo/examples/Iconfont.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Provider, Iconfont } from '@baic/yolk-web';
+
+export default () => {
+  return (
+    <Provider
+      iconfontScriptUrl={[
+        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
+        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
+      ]}
+    >
+      <Iconfont type="icon-javascript" />
+      <Iconfont type="icon-java" />
+      <Iconfont type="icon-shoppingcart" />
+      <Iconfont type="icon-python" />
+    </Provider>
+  );
+};