diff --git a/packages/ui/checkbox/.storybook/main.js b/packages/ui/checkbox/.storybook/main.js new file mode 100644 index 0000000000000000000000000000000000000000..34ac840230e8a5f5d2437f06788470d20b106cc0 --- /dev/null +++ b/packages/ui/checkbox/.storybook/main.js @@ -0,0 +1,73 @@ +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)$/, + 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/checkbox/.storybook/preview.js b/packages/ui/checkbox/.storybook/preview.js new file mode 100644 index 0000000000000000000000000000000000000000..faeb11a4db47f4aea0688797db1856f7738f461c --- /dev/null +++ b/packages/ui/checkbox/.storybook/preview.js @@ -0,0 +1,18 @@ +import {addParameters} 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 + } + }, +}); diff --git a/packages/ui/checkbox/CHANGELOG.md b/packages/ui/checkbox/CHANGELOG.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/packages/ui/checkbox/babel.config.js b/packages/ui/checkbox/babel.config.js new file mode 100644 index 0000000000000000000000000000000000000000..d222841daa0815ccea18188ceb097da34d13aad9 --- /dev/null +++ b/packages/ui/checkbox/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/checkbox/package.json b/packages/ui/checkbox/package.json new file mode 100644 index 0000000000000000000000000000000000000000..9071acbc7ddd5ec999e51f8390edbb172b858a12 --- /dev/null +++ b/packages/ui/checkbox/package.json @@ -0,0 +1,56 @@ +{ + "name": "@osui/checkbox", + "version": "0.0.1", + "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", + "license": "MIT", + "dependencies": { + "classnames": "^2.2.6" + } +} diff --git a/packages/ui/checkbox/scripts/build.sh b/packages/ui/checkbox/scripts/build.sh new file mode 100644 index 0000000000000000000000000000000000000000..f1cf5724ccdec601e43fab14da4e8f9f80d5765c --- /dev/null +++ b/packages/ui/checkbox/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/checkbox/src/index.less b/packages/ui/checkbox/src/index.less new file mode 100644 index 0000000000000000000000000000000000000000..fc97c702ac016dc63d909830896c303dd6602633 --- /dev/null +++ b/packages/ui/checkbox/src/index.less @@ -0,0 +1,23 @@ +@osui-checkbox-class-prefix: osui-checkbox; + +.@{osui-checkbox-class-prefix} { + .ant-checkbox-inner, + .ant-checkbox-checked::after { + border-radius: 4px; + } + + .ant-checkbox-disabled .ant-checkbox-inner { + background-color: #fff; + } + + &-group { + .ant-checkbox-inner, + .ant-checkbox-checked::after { + border-radius: 4px; + } + + .ant-checkbox-disabled .ant-checkbox-inner { + background-color: #fff; + } + } +} diff --git a/packages/ui/checkbox/src/index.tsx b/packages/ui/checkbox/src/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..583135bdf73e81e3ec67370dc2e2acde94eaa8e2 --- /dev/null +++ b/packages/ui/checkbox/src/index.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { Checkbox as AntdCheckbox } from 'antd'; +import { CheckboxProps as AntdCheckboxProps, CheckboxGroupProps as AntdCheckboxGroupProps } from 'antd/lib/Checkbox'; +import classNames from 'classnames'; +import './index.less'; + +const AntdCheckboxGroup = AntdCheckbox.Group; + +const clsPrefix = 'osui-checkbox'; + +export type CheckboxProps = AntdCheckboxProps; +export type CheckboxGroupProps = AntdCheckboxGroupProps; + +const CheckboxGroup: React.FC = ({ className, ...restProps }) => { + return ; +}; +const Checkbox: React.FC = ({ className, ...restProps }) => { + return ; +}; + +Checkbox.Group = CheckboxGroup; + +export default Checkbox; diff --git a/packages/ui/checkbox/stories/index.stories.mdx b/packages/ui/checkbox/stories/index.stories.mdx new file mode 100644 index 0000000000000000000000000000000000000000..e3d432d40fcde7746d694ff6a5272ede2bc9c758 --- /dev/null +++ b/packages/ui/checkbox/stories/index.stories.mdx @@ -0,0 +1,20 @@ +import {Meta, Story, Preview} from '@storybook/addon-docs/blocks'; +import {Demo} from './index.stories' + + + +# OSUI Checkbox + +## API + +### 基本属性 + +支持所有antd属性：见[antd文档](https://ant.design/components/checkbox-cn/#API) + + + + + + {Demo()} + + diff --git a/packages/ui/checkbox/stories/index.stories.tsx b/packages/ui/checkbox/stories/index.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..84d6028256c92b8119204ce4fbc28761b83ba5a3 --- /dev/null +++ b/packages/ui/checkbox/stories/index.stories.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import Checkbox from '../src'; + +const Group = Checkbox.Group; + +export default { + title: 'OSUI-Checkbox', +}; + +export const Demo = () => { + function onChange(checkedValues) { + console.log('checked = ', checkedValues); + } + + const plainOptions = ['Apple', 'Pear', 'Orange']; + const options = [ + { label: 'Apple', value: 'Apple' }, + { label: 'Pear', value: 'Pear' }, + { label: 'Orange', value: 'Orange' }, + ]; + const optionsWithDisabled = [ + { label: 'Apple', value: 'Apple' }, + { label: 'Pear', value: 'Pear' }, + { label: 'Orange', value: 'Orange', disabled: false }, + ]; + return ( +
+

基础示例

+ Checkbox + Checkbox + Checkbox + Checkbox +

+

Checkbox组

+ +
+
+ +
+
+ +
); +}; diff --git a/packages/ui/checkbox/tsconfig.json b/packages/ui/checkbox/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..3a24a511df9639581444c76e59ea1b775c5d8ea6 --- /dev/null +++ b/packages/ui/checkbox/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./tmp" + }, + "include": ["src"] +} diff --git a/packages/ui/message/.storybook/main.js b/packages/ui/message/.storybook/main.js new file mode 100644 index 0000000000000000000000000000000000000000..34ac840230e8a5f5d2437f06788470d20b106cc0 --- /dev/null +++ b/packages/ui/message/.storybook/main.js @@ -0,0 +1,73 @@ +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)$/, + 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/message/.storybook/preview.js b/packages/ui/message/.storybook/preview.js new file mode 100644 index 0000000000000000000000000000000000000000..faeb11a4db47f4aea0688797db1856f7738f461c --- /dev/null +++ b/packages/ui/message/.storybook/preview.js @@ -0,0 +1,18 @@ +import {addParameters} 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 + } + }, +}); diff --git a/packages/ui/message/CHANGELOG.md b/packages/ui/message/CHANGELOG.md new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/packages/ui/message/babel.config.js b/packages/ui/message/babel.config.js new file mode 100644 index 0000000000000000000000000000000000000000..d222841daa0815ccea18188ceb097da34d13aad9 --- /dev/null +++ b/packages/ui/message/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/message/package.json b/packages/ui/message/package.json new file mode 100644 index 0000000000000000000000000000000000000000..1b666f0a7ecde8c267e3f473686fcfc0de27f3e5 --- /dev/null +++ b/packages/ui/message/package.json @@ -0,0 +1,56 @@ +{ + "name": "@osui/message", + "version": "0.0.1", + "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", + "license": "MIT", + "dependencies": { + "classnames": "^2.2.6" + } +} diff --git a/packages/ui/message/scripts/build.sh b/packages/ui/message/scripts/build.sh new file mode 100644 index 0000000000000000000000000000000000000000..f1cf5724ccdec601e43fab14da4e8f9f80d5765c --- /dev/null +++ b/packages/ui/message/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/message/src/index.less b/packages/ui/message/src/index.less new file mode 100644 index 0000000000000000000000000000000000000000..d290f5d94a5c5085b3fa6ffe57fe86c2f7828902 --- /dev/null +++ b/packages/ui/message/src/index.less @@ -0,0 +1,8 @@ +@osui-message-class-prefix: osui-message; + +.@{osui-message-class-prefix} { + .ant-message-notice-content { + box-shadow: 0 4 8px -2px rgba(9, 30, 66, .25), 0 0 1px 0 rgba(9, 30, 66, .31); + border-radius: 4px; + } +} diff --git a/packages/ui/message/src/index.tsx b/packages/ui/message/src/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..30c712f563e0f54c68df0db71b2a840b2ef42739 --- /dev/null +++ b/packages/ui/message/src/index.tsx @@ -0,0 +1,27 @@ +import { message as AntdMessage } from 'antd'; +import { MessageInstance as AntdMessageInstance, MessageApi as AntdMessageApi } from 'antd/lib/Message'; +import './index.less'; + +const clsPrefix = 'osui-message'; + +export type MessageInstance = AntdMessageInstance; +export type MessageApi = AntdMessageApi; + +const types = ['success', 'error', 'info', 'warning', 'warn', 'loading', 'config', 'destroy', 'useMessage']; + +enum message { } + +types.forEach(item => { + message[item] = props => { + const defaultProps = { className: '' }; + if (typeof props === 'object') { + defaultProps.className = clsPrefix + ` ${props.className ? props.className : ''}`; + } else if (typeof props === 'string') { + defaultProps.className = clsPrefix; + defaultProps.content = props; + } + AntdMessage[item](defaultProps); + }; +}); + +export default message; diff --git a/packages/ui/message/stories/index.stories.mdx b/packages/ui/message/stories/index.stories.mdx new file mode 100644 index 0000000000000000000000000000000000000000..0b2b2e4b3cfbd578d6c4d660e97ac25120e89971 --- /dev/null +++ b/packages/ui/message/stories/index.stories.mdx @@ -0,0 +1,20 @@ +import {Meta, Story, Preview} from '@storybook/addon-docs/blocks'; +import {Demo} from './index.stories' + + + +# OSUI Message + +## API + +### 基本属性 + +支持所有antd属性：见[antd文档](https://ant.design/components/message-cn/#API) + + + + + + {Demo()} + + diff --git a/packages/ui/message/stories/index.stories.tsx b/packages/ui/message/stories/index.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6319b21f1303c2e4a8d5121f49ca6b29e80ee9dc --- /dev/null +++ b/packages/ui/message/stories/index.stories.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { Button, Space } from 'antd'; +import message from '../src'; + +export default { + title: 'OSUI-Message', +}; + +export const Demo = () => { + const success = () => { + message.success('This is a success message'); + }; + const error = () => { + message.error('This is an error message'); + }; + const info = () => { + message.info('This is an info message'); + }; + const warning = () => { + message.warning('This is a warning message'); + }; + const warn = () => { + message.warn('This is a warn message'); + }; + const loading = () => { + message.loading('This is a loading message'); + }; + return ( +
+ + + + + + + + +
); +}; diff --git a/packages/ui/message/tsconfig.json b/packages/ui/message/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..3a24a511df9639581444c76e59ea1b775c5d8ea6 --- /dev/null +++ b/packages/ui/message/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./tmp" + }, + "include": ["src"] +} diff --git a/packages/ui/modal/stories/index.stories.mdx b/packages/ui/modal/stories/index.stories.mdx index b9d6f7261f509d3f0cb45ad32ca3785eaf865c3d..237c8f9d4831e6a81f259b3c0097dfcfc5590ca7 100644 --- a/packages/ui/modal/stories/index.stories.mdx +++ b/packages/ui/modal/stories/index.stories.mdx @@ -1,7 +1,7 @@ import {Meta, Story, Preview} from '@storybook/addon-docs/blocks'; import {Demo} from './index.stories' - + # OSUI Modal