From 667f1a3d9475c95d4f63db0052e0c9c744bf5f05 Mon Sep 17 00:00:00 2001 From: zs Date: Fri, 14 Aug 2020 15:41:55 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Etabs=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/tabs/.storybook/main.js | 74 ++++++++++++++++++++ packages/ui/tabs/.storybook/preview.js | 20 ++++++ packages/ui/tabs/README.md | 30 +++++++++ packages/ui/tabs/babel.config.js | 11 +++ packages/ui/tabs/package.json | 60 +++++++++++++++++ packages/ui/tabs/scripts/build.sh | 18 +++++ packages/ui/tabs/src/index.less | 29 ++++++++ packages/ui/tabs/src/index.tsx | 22 ++++++ packages/ui/tabs/stories/index.stories.mdx | 20 ++++++ packages/ui/tabs/stories/index.stories.tsx | 78 ++++++++++++++++++++++ packages/ui/tabs/tsconfig.json | 8 +++ 11 files changed, 370 insertions(+) create mode 100644 packages/ui/tabs/.storybook/main.js create mode 100644 packages/ui/tabs/.storybook/preview.js create mode 100644 packages/ui/tabs/README.md create mode 100644 packages/ui/tabs/babel.config.js create mode 100644 packages/ui/tabs/package.json create mode 100644 packages/ui/tabs/scripts/build.sh create mode 100644 packages/ui/tabs/src/index.less create mode 100644 packages/ui/tabs/src/index.tsx create mode 100644 packages/ui/tabs/stories/index.stories.mdx create mode 100644 packages/ui/tabs/stories/index.stories.tsx create mode 100644 packages/ui/tabs/tsconfig.json diff --git a/packages/ui/tabs/.storybook/main.js b/packages/ui/tabs/.storybook/main.js new file mode 100644 index 00000000..8a1cb9e5 --- /dev/null +++ b/packages/ui/tabs/.storybook/main.js @@ -0,0 +1,74 @@ +const {getBabelConfig} = require('@reskript/config-babel'); +const {loaders} = require('@reskript/config-webpack'); +const path = require('path'); + +const loaderOptions = { + cwd: process.cwd(), + srcDirectory: 'src', + projectSettings: { + build: { + extractCSS: false, + styleResources: [ + require.resolve('@osui/theme/dist/antd-vars-patch.less'), + require.resolve('@osui/theme/dist/less-functions-overrides.less'), + ], + }, + }, +}; + +module.exports = { + stories: [ + '../stories/**/*.stories.[tj]s{,x}', + '../stories/**/*.stories.mdx' + ], + addons: [ + { + name: '@storybook/addon-docs', + options: { + configureJSX: true, + babelOptions: {}, + sourceLoaderOptions: null, + }, + }, + '@storybook/addon-storysource', // https://github.com/storybookjs/storybook/tree/master/addons/storysource + '@storybook/addon-a11y/register', // https://github.com/storybookjs/storybook/tree/master/addons/a11y + '@storybook/addon-viewport/register', // https://github.com/storybookjs/storybook/tree/master/addons/viewport + ], + webpackFinal: async (config) => { + config.module.rules.push({ + test: /\.(js|jsx|ts|tsx)$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + options: getBabelConfig(), + }, + ], + }); + config.module.rules.push({ + test: /\.less$/, + loaders: [ + loaders.style(loaderOptions), + loaders.css(loaderOptions), + loaders.less(loaderOptions), + loaders.styleResources(loaderOptions), + ], + }); + // 如果使用css modules 请打开这个，并按需匹配css modules 文件 + // 这个同时打开了classnames loader， 可以用 import c from 'xxx.less' + // config.module.rules.push({ + // test: /\.less$/, + // loaders: [ + // loaders.classNames(), + // loaders.style(loaderOptions), + // loaders.cssModules(loaderOptions), + // loaders.less(loaderOptions), + // loaders.styleResources(loaderOptions), + // ], + // }); + + config.resolve.extensions.push('.ts', '.tsx'); + config.resolve.alias['@'] = path.resolve(__dirname, '../src'); + return config; + }, +}; diff --git a/packages/ui/tabs/.storybook/preview.js b/packages/ui/tabs/.storybook/preview.js new file mode 100644 index 00000000..07034b28 --- /dev/null +++ b/packages/ui/tabs/.storybook/preview.js @@ -0,0 +1,20 @@ +import {addParameters, addDecorator} from '@storybook/react'; +import {DocsPage, DocsContainer} from '@storybook/addon-docs/blocks'; +import { + INITIAL_VIEWPORTS, + } from '@storybook/addon-viewport'; +import '@osui/theme/dist/theme/vars.css'; + +addParameters({ + docs: { + container: DocsContainer, + page: DocsPage, + }, + viewport: { + viewports: { + ...INITIAL_VIEWPORTS + } + }, +}); + +addDecorator(storyFn =>
{storyFn()}
); diff --git a/packages/ui/tabs/README.md b/packages/ui/tabs/README.md new file mode 100644 index 00000000..4ec47dab --- /dev/null +++ b/packages/ui/tabs/README.md @@ -0,0 +1,30 @@ +# @osui/{componentName} + +## 安装说明 + +### 方式一 + +单包使用 + +``` +yarn install @osui/{componentName} +``` + +``` +import {CapComponentName} from '@osui/{componentName}' +``` + +### 方式二 + +从 `@osui/ui` 统一引入 + +``` +yarn install @osui/ui +``` + +``` +import {{CapComponentName}} from '@osui/ui'; +``` + + + diff --git a/packages/ui/tabs/babel.config.js b/packages/ui/tabs/babel.config.js new file mode 100644 index 00000000..d222841d --- /dev/null +++ b/packages/ui/tabs/babel.config.js @@ -0,0 +1,11 @@ +const {getTransformBabelConfig} = require('@reskript/config-babel'); + +const options = { + browserSupport: {}, + usage: 'build', + mode: 'production', + polyfill: false, + hostType: 'library', +}; + +module.exports = getTransformBabelConfig(options); diff --git a/packages/ui/tabs/package.json b/packages/ui/tabs/package.json new file mode 100644 index 00000000..ecf74eff --- /dev/null +++ b/packages/ui/tabs/package.json @@ -0,0 +1,60 @@ +{ + "name": "@osui/tabs", + "version": "0.1.0", + "description": "", + "main": "dist/index.js", + "scripts": { + "lint": "skr lint", + "build": "sh scripts/build.sh", + "storybook": "start-storybook -p 8700", + "clean": "rm -rf node_modules && rm -rf dist", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "sideEffects": [ + "dist/*.less" + ], + "devDependencies": { + "@babel/cli": "^7.10.5", + "@reskript/cli": "^0.9.0", + "@reskript/cli-lint": "^0.9.9", + "@reskript/config-babel": "^0.9.0", + "@reskript/config-lint": "^0.12.3", + "@reskript/config-webpack": "^0.11.2", + "@storybook/addon-a11y": "^5.3.19", + "@storybook/addon-docs": "^5.3.19", + "@storybook/addon-storysource": "^5.3.19", + "@storybook/addon-viewport": "^5.3.19", + "@storybook/addons": "^5.3.19", + "@storybook/client-api": "^5.3.19", + "@storybook/react": "^5.3.19", + "@types/classnames": "^2.2.10", + "@types/react-dom": "^16.9.8", + "antd": "^4.4.0", + "babel-loader": "^8.1.0", + "cpy-cli": "^3.1.1", + "husky": "^4.2.5", + "prop-types": "^15.7.2", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-is": "^16.13.1", + "typescript": "^3.9.6" + }, + "peerDependencies": { + "antd": ">=4.4.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + }, + "repository": { + "type": "git", + "url": "https://gitee.com/yuxuanhuo/osui/tree/master" + }, + "author": "huoyuxuan,zhusen", + "license": "MIT", + "husky": { + "hooks": { + "pre-commit": "skr lint ./src" + } + }, + "dependencies": { + } +} diff --git a/packages/ui/tabs/scripts/build.sh b/packages/ui/tabs/scripts/build.sh new file mode 100644 index 00000000..f1cf5724 --- /dev/null +++ b/packages/ui/tabs/scripts/build.sh @@ -0,0 +1,18 @@ +# export PATH=$NODEJS_BIN_LATEST:$YARN_BIN_LATEST:$PATH + +echo "node $(node -v)" +echo "npm $(npm -v)" +echo "yarn $(yarn -v)" + +rm -rf dist + +yarn install --production=false +# yarn test + +$(npm bin)/cpy '**/*' '!**/*.ts' '!**/*.tsx' '!**/*.js' '!**/*.jsx' ../tmp/ --cwd=src/ --parents +$(npm bin)/tsc +$(npm bin)/babel tmp --out-dir dist --ignore "src/**/*.test.js" --copy-files --source-maps + +rm -rf tmp + +echo "build success" diff --git a/packages/ui/tabs/src/index.less b/packages/ui/tabs/src/index.less new file mode 100644 index 00000000..abc26b01 --- /dev/null +++ b/packages/ui/tabs/src/index.less @@ -0,0 +1,29 @@ +@osui-tabs-class-prefix: osui-tabs; + +.@{osui-tabs-class-prefix} { + &.ant-tabs-top > .ant-tabs-nav::before { + border-bottom: 2px solid #ECEDF0; + } + + .ant-tabs-tab .anticon { + margin-right: 4px; + } + + .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{ + font-weight: normal; + } + + .ant-tabs-tab .ant-tabs-tab-btn em.num { + background: #f5f6f8; + border-radius: 10px; + width: 25px; + height: 20px; + font-size: 12px; + color: var(--color-gray-9); + line-height: 20px; + display: inline-block; + text-align: center; + margin-left: 5px; + font-style: normal; + } +} diff --git a/packages/ui/tabs/src/index.tsx b/packages/ui/tabs/src/index.tsx new file mode 100644 index 00000000..59f27e69 --- /dev/null +++ b/packages/ui/tabs/src/index.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import {Tabs as AntdTabs} from 'antd'; +import {TabsProps as AntdTabsProps, TabPaneProps as AntdTabPaneProps} from 'antd/lib/Tabs'; +import classNames from 'classnames'; +import './index.less'; + +const clsPrefix = 'osui-tabs'; + +export type TabsProps = AntdTabsProps; +export type TabPaneProps = AntdTabPaneProps; +interface TabInterface extends React.FC { + TabPane: typeof AntdTabs.TabPane; +} + +const Tabs: TabInterface = props => { + return ; +}; + +Tabs.TabPane = AntdTabs.TabPane; + +export default Tabs; + diff --git a/packages/ui/tabs/stories/index.stories.mdx b/packages/ui/tabs/stories/index.stories.mdx new file mode 100644 index 00000000..3ad50a76 --- /dev/null +++ b/packages/ui/tabs/stories/index.stories.mdx @@ -0,0 +1,20 @@ +import {Meta, Story, Preview} from '@storybook/addon-docs/blocks'; +import {Demo} from './index.stories' + + + +# OSUI Alert + +## API + +### 基本属性 + +支持所有antd属性：见[antd文档](https://ant.design/components/menu-cn/) + +### 其他说明 + + + + {Demo()} + + diff --git a/packages/ui/tabs/stories/index.stories.tsx b/packages/ui/tabs/stories/index.stories.tsx new file mode 100644 index 00000000..4f3f5880 --- /dev/null +++ b/packages/ui/tabs/stories/index.stories.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { ForkOutlined } from '@ant-design/icons'; +import Tabs from '../src'; + +const { TabPane } = Tabs; + +export default { + title: 'OSUI-Tabs', +}; + +export const Demo = () => { + return ( + <> + + + Content of Tab Pane 1 + + + Content of Tab Pane 2 + + + Content of Tab Pane 3 + + + + + + + Tab 1 + + } + key="1" + > + Tab 1 + + + + Tab 2 + + } + key="2" + > + Tab 2 + + + + + + Tab 115 + + } + key="1" + > + Tab 1 + + + + Tab 215 + + } + key="2" + > + Tab 2 + + + + ); +}; + + diff --git a/packages/ui/tabs/tsconfig.json b/packages/ui/tabs/tsconfig.json new file mode 100644 index 00000000..3a24a511 --- /dev/null +++ b/packages/ui/tabs/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./tmp" + }, + "include": ["src"] +} -- Gitee From 1158d48243b77dac6883241a739415f9d638b458 Mon Sep 17 00:00:00 2001 From: zs Date: Fri, 14 Aug 2020 15:47:09 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/tabs/src/index.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/tabs/src/index.less b/packages/ui/tabs/src/index.less index abc26b01..005aa331 100644 --- a/packages/ui/tabs/src/index.less +++ b/packages/ui/tabs/src/index.less @@ -1,15 +1,15 @@ @osui-tabs-class-prefix: osui-tabs; .@{osui-tabs-class-prefix} { - &.ant-tabs-top > .ant-tabs-nav::before { - border-bottom: 2px solid #ECEDF0; + &.ant-tabs-top > .ant-tabs-nav::before { + border-bottom: 2px solid #ecedf0; } .ant-tabs-tab .anticon { margin-right: 4px; } - .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{ + .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { font-weight: normal; } -- Gitee From 18cbf499872572fcc3ed22c581691d4772d72759 Mon Sep 17 00:00:00 2001 From: zs Date: Fri, 14 Aug 2020 15:50:30 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4ts=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/tabs/stories/index.stories.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ui/tabs/stories/index.stories.tsx b/packages/ui/tabs/stories/index.stories.tsx index 4f3f5880..65c0c53c 100644 --- a/packages/ui/tabs/stories/index.stories.tsx +++ b/packages/ui/tabs/stories/index.stories.tsx @@ -52,7 +52,8 @@ export const Demo = () => { tab={ - Tab 115 + Tab 1 + 15 } key="1" @@ -63,7 +64,8 @@ export const Demo = () => { tab={ - Tab 215 + Tab 2 + 15 } key="2" -- Gitee From 4960b7b91b63d11366dcd679f89519ff33835df4 Mon Sep 17 00:00:00 2001 From: zs Date: Mon, 17 Aug 2020 13:54:45 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9tabs=E7=9A=84readm?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/tabs/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/tabs/README.md b/packages/ui/tabs/README.md index 4ec47dab..5358bf2d 100644 --- a/packages/ui/tabs/README.md +++ b/packages/ui/tabs/README.md @@ -7,11 +7,11 @@ 单包使用 ``` -yarn install @osui/{componentName} +yarn install @osui/tabs ``` ``` -import {CapComponentName} from '@osui/{componentName}' +import tabs from '@osui/tabs' ``` ### 方式二 @@ -23,7 +23,7 @@ yarn install @osui/ui ``` ``` -import {{CapComponentName}} from '@osui/ui'; +import {tabs} from '@osui/ui'; ``` -- Gitee From dfe471115308df6e861bf349d0b46774393cb3be Mon Sep 17 00:00:00 2001 From: zs Date: Mon, 17 Aug 2020 13:57:13 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9tabs=E7=9A=84readm?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/tabs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/tabs/README.md b/packages/ui/tabs/README.md index 5358bf2d..97641844 100644 --- a/packages/ui/tabs/README.md +++ b/packages/ui/tabs/README.md @@ -1,4 +1,4 @@ -# @osui/{componentName} +# @osui/tabs ## 安装说明 -- Gitee