diff --git a/packages/ui-theme/src/antd-vars-patch.less b/packages/ui-theme/src/antd-vars-patch.less index 63db709f52689802b25b349b57a33391b3665c0f..1cab60c371db50254e160595c0283cfa73a94951 100644 --- a/packages/ui-theme/src/antd-vars-patch.less +++ b/packages/ui-theme/src/antd-vars-patch.less @@ -33,7 +33,7 @@ @font-size-lg: 16px; @font-size-sm: 12px; @line-height-base: 1.5; -@border-radius-base: 2px; +@border-radius-base: 4px; @border-radius-sm: 2px; // The background colors for active and hover states for things like @@ -61,7 +61,7 @@ @outline-blur-size: 6px; @outline-width: 0; -@background-color-light: var(--ee-selected-item-bg-color); // background of header and selected item +@background-color-light: var(--theme-bg-color-light); // background of header and selected item @background-color-base: var(--theme-bg-color-base); // Disabled states @@ -113,3 +113,23 @@ @height-m: 30px; @height-l: 40px; @height-xl: 50px; + +// Alert +// --- +@alert-success-border-color: var(--alert-success-border-color); +@alert-success-bg-color: var(--alert-success-bg-color); +@alert-success-icon-color: var(--alert-success-icon-color); +@alert-info-border-color: var(--alert-info-border-color); +@alert-info-bg-color: var(--alert-info-bg-color); +@alert-info-icon-color: var(--alert-info-icon-color); +@alert-warning-border-color: var(--alert-warning-border-color); +@alert-warning-bg-color: var(--alert-warning-bg-color); +@alert-warning-icon-color: var(--alert-warning-icon-color); +@alert-error-border-color: var(--alert-error-border-color); +@alert-error-bg-color: var(--alert-error-bg-color); +@alert-error-icon-color: var(--alert-error-icon-color); +@alert-message-color: var(--theme-heading-color); +@alert-text-color: var(--color-brand-10); +@alert-close-color: var(--theme-text-color-secondary); +@alert-with-description-padding: var(--alert-with-description-padding); +@alert-with-description-icon-top: var(--alert-with-description-icon-top); diff --git a/packages/ui-theme/src/colors.js b/packages/ui-theme/src/colors.js index 1456221f63de727c4dbac0379d789a111f393e59..f86f6410a658342ede870d49b5a221c7c3a36c42 100644 --- a/packages/ui-theme/src/colors.js +++ b/packages/ui-theme/src/colors.js @@ -1,16 +1,16 @@ // 用于标签、图表等场景的色盘，100个颜色 exports.tagColors = { // 天青 - '--color-cyan-1': '#f2f3ff', - '--color-cyan-2': '#dee1ff', - '--color-cyan-3': '#bdc4ff', - '--color-cyan-4': '#9ca9ff', - '--color-cyan-5': '#7487f2', - '--color-cyan-6': '#5069e6', - '--color-cyan-7': '#3952bf', - '--color-cyan-8': '#263d99', - '--color-cyan-9': '#172b73', - '--color-cyan-10': '#0b1b4d', + '--color-cyan-1': '#f5f8ff', + '--color-cyan-2': '#e0e9ff', + '--color-cyan-3': '#c2d6ff', + '--color-cyan-4': '#4c88ff', + '--color-cyan-5': '#1a5eff', + '--color-cyan-6': '#0045e4', + '--color-cyan-7': '#083fbf', + '--color-cyan-8': '#07349d', + '--color-cyan-9': '#05287a', + '--color-cyan-10': '#041f5d', // 翡色 '--color-emerald-1': '#ebfffa', '--color-emerald-2': '#d4faf0', @@ -56,16 +56,16 @@ exports.tagColors = { '--color-maple-9': '#73171f', '--color-maple-10': '#4d0b12', // 绛紫 - '--color-purple-1': '#fbf2ff', - '--color-purple-2': '#f3deff', - '--color-purple-3': '#e8bfff', - '--color-purple-4': '#d899ff', - '--color-purple-5': '#bf72f2', - '--color-purple-6': '#a64ee6', - '--color-purple-7': '#8437bf', - '--color-purple-8': '#652599', - '--color-purple-9': '#471673', - '--color-purple-10': '#2d0b4d', + '--color-purple-1': '#eae6ff', + '--color-purple-2': '#c0b6f2', + '--color-purple-3': '#998dd9', + '--color-purple-4': '#8777d9', + '--color-purple-5': '#6554c0', + '--color-purple-6': '#5243aa', + '--color-purple-7': '#403294', + '--color-purple-8': '#35297a', + '--color-purple-9': '#29205f', + '--color-purple-10': '#1e1745', // 靛蓝（同品牌色） '--color-indigo-1': '#f2f8ff', '--color-indigo-2': '#d3e9ff', @@ -197,36 +197,41 @@ exports.uiColors = { }; exports.presetColors = { - '--theme-primary-color': 'var(--color-brand-6)', + '--theme-bg-color-base': 'var(--color-gray-4)', + '--theme-bg-color-light': 'var(--color-brand-1)', + '--theme-body-bg': 'var(--color-gray-1)', + '--theme-border-color-base': 'var(--color-gray-4)', + '--theme-border-color-inverse': '#fff', + '--theme-border-color-split': 'var(--color-gray-4)', + '--theme-component-bg': 'var(--color-gray-1)', + '--theme-disabled-bg': 'var(--color-gray-4)', + '--theme-disabled-color': 'var(--color-gray-6)', + '--theme-error-color-active': 'var(--color-error-5)', + '--theme-error-color-hover': 'var(--color-error-5)', + '--theme-error-color': 'var(--color-error-5)', + '--theme-heading-color': 'var(--color-gray-9)', + '--theme-info-color-active': 'var(--color-info-5)', + '--theme-info-color-hover': 'var(--color-info-5)', + '--theme-info-color': 'var(--color-info-5)', '--theme-primary-color-active': 'var(--color-brand-6)', '--theme-primary-color-hover': 'var(--color-brand-6)', - '--theme-secondary-color': 'var(--color-brand-2)', + '--theme-primary-color': 'var(--color-brand-6)', '--theme-secondary-color-active': 'var(--color-brand-3)', '--theme-secondary-color-hover': 'var(--color-brand-1)', - '--theme-info-color': 'var(--color-info-5)', - '--theme-info-color-active': 'var(--color-info-5)', - '--theme-info-color-hover': 'var(--color-info-5)', - '--theme-success-color': 'var(--color-success-5)', + '--theme-secondary-color': 'var(--color-brand-2)', '--theme-success-color-active': 'var(--color-success-5)', '--theme-success-color-hover': 'var(--color-success-5)', - '--theme-error-color': 'var(--color-error-5)', - '--theme-error-color-active': 'var(--color-error-5)', - '--theme-error-color-hover': 'var(--color-error-5)', - '--theme-warning-color': 'var(--color-warning-5)', + '--theme-success-color': 'var(--color-success-5)', + '--theme-text-color-secondary': 'var(--color-gray-8)', + '--theme-text-color': 'var(--color-gray-9)', '--theme-warning-color-active': 'var(--color-warning-5)', '--theme-warning-color-hover': 'var(--color-warning-5)', - '--theme-border-color-base': 'var(--color-gray-4)', - '--theme-border-color-inverse': '#fff', - '--theme-border-color-split': 'var(--color-gray-4)', - '--theme-body-bg': 'var(--color-gray-1)', - '--theme-component-bg': 'var(--color-gray-1)', - '--theme-heading-color': 'var(--color-gray-9)', - '--theme-text-color': 'var(--color-gray-9)', - '--theme-text-color-secondary': 'var(--color-gray-8)', - '--theme-bg-color-light': 'var(--color-brand-1)', - '--theme-bg-color-base': 'var(--color-gray-4)', - '--theme-disabled-color': 'var(--color-gray-6)', - '--theme-disabled-bg': 'var(--color-gray-4)', + '--theme-warning-color': 'var(--color-warning-5)', + '--theme-color-border-base': 'var(--color-gray-5)', + '--theme-color-text': 'var(--color-gray-8)', + '--theme-highlight-color': 'var(--color-error-5)', + '--theme-outline-color': 'var(--color-brand-4)', + '--theme-processing-color': 'var(--color-brand-6)', // 以下按照字母顺序排序 '--alert-error-bg-color': 'var(--color-error-1)', '--alert-error-border-color': 'var(--color-error-5)', @@ -258,4 +263,8 @@ exports.presetColors = { '--select-item-active-bg': 'var(--theme-secondary-color-hover)', '--select-item-selected-bg': 'var(--theme-secondary-color-hover)', '--table-row-hover-bg': 'var(--color-brand-1)', + '--tabs-highlight-color': 'var(--color-gray-9)', + '--tabs-ink-bar-color': 'var(--color-gray-9)', + '--tabs-top-before': '2px solid #ECEDF0', // tab的bottom线 + '--tabs-hover-color': 'var(--color-gray-9)', }; diff --git a/packages/ui/alert/CHANGELOG.md b/packages/ui/alert/CHANGELOG.md deleted file mode 100644 index 4a3f43ab81d3bacda412e0ff2c0d93f423df8d27..0000000000000000000000000000000000000000 --- a/packages/ui/alert/CHANGELOG.md +++ /dev/null @@ -1,19 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [0.1.2](https://gitee.com/yuxuanhuo/osui/tree/master/compare/@osui/alert@0.1.1...@osui/alert@0.1.2) (2020-08-07) - - -### Bug Fixes - -* **alert:** alert文档完善, 修复alert样式 ([caba747](https://gitee.com/yuxuanhuo/osui/tree/master/commits/caba747e4d1c100a759bf908c951e78fd553b09f)) - - - - - -## 0.1.1 (2020-08-07) - -**Note:** Version bump only for package @osui/alert diff --git a/packages/ui/alert/package.json b/packages/ui/alert/package.json index 5696aa981148f2d1dba03183d5479140ddc3e9bd..5f955803579a80582dd44d2cc97183bd5950725d 100644 --- a/packages/ui/alert/package.json +++ b/packages/ui/alert/package.json @@ -48,7 +48,7 @@ "type": "git", "url": "https://gitee.com/yuxuanhuo/osui/tree/master" }, - "author": "huoyuxuan", + "author": "huoyuxuan,zhusen", "license": "MIT", "dependencies": { "classnames": "^2.2.6" diff --git a/packages/ui/alert/src/index.less b/packages/ui/alert/src/index.less index cef016850d7ddf51ef6ab6ec6f52f9d1fa96e908..db414aec86a2fd4d7463e6d3d8fc108a0f7cbc26 100644 --- a/packages/ui/alert/src/index.less +++ b/packages/ui/alert/src/index.less @@ -1,7 +1,11 @@ @osui-alert-class-prefix: osui-alert; .@{osui-alert-class-prefix} { - .ant-alert-with-description { + .ant-alert-close-icon { + font-size: 14px; + } + + &.ant-alert-with-description { .ant-alert-message { font-size: 14px; font-weight: bold; @@ -14,44 +18,44 @@ } } - .ant-alert-success { + &.ant-alert-warning { .ant-alert-message { - font-size: 14px; - color: var(--theme-success-color); + color: var(--theme-warning-color); } .ant-alert-description { - color: var(--theme-success-color); + color: var(--theme-warning-color); } } - .ant-alert-warning { + &.ant-alert-error { .ant-alert-message { - color: var(--theme-warning-color); + color: var(--theme-error-color); } .ant-alert-description { - color: var(--theme-warning-color); + color: var(--theme-error-color); } } - .ant-alert-error { + &.ant-alert-info { .ant-alert-message { - color: var(--color-error-4); + color: var(--theme-primary-color); } .ant-alert-description { - color: var(--color-error-4); + color: var(--theme-primary-color); } } - .ant-alert-info { + &.ant-alert-success { .ant-alert-message { - color: var(--theme-primary-color); + font-size: 14px; + color: var(--theme-success-color); } .ant-alert-description { - color: var(--theme-primary-color); + color: var(--theme-success-color); } } } diff --git a/packages/ui/alert/src/index.tsx b/packages/ui/alert/src/index.tsx index 8ffd8c8bb426bb24547cd813639af7a6a7f54cb9..aea6b57b0934410f748bd206c5f6b4040b893f47 100644 --- a/packages/ui/alert/src/index.tsx +++ b/packages/ui/alert/src/index.tsx @@ -1,14 +1,21 @@ import * as React from 'react'; import {Alert as AntdAlert} from 'antd'; import {AlertProps as AntdAlertProps} from 'antd/lib/alert'; +import {CheckCircleFilled, InfoCircleFilled} from '@ant-design/icons'; import classNames from 'classnames'; +import './index.less'; const clsPrefix = 'osui-alert'; export type AlertProps = AntdAlertProps; const Alert: React.FC = props => { - return ; + let {icon} = props; + const {type, description} = props; + if (description && !icon) { // 描述存在，并且没有传递icon，则添加默认icon + icon = type === 'success' ? : ; + } + return ; }; export default Alert; diff --git a/packages/ui/alert/stories/index.stories.mdx b/packages/ui/alert/stories/index.stories.mdx index 633663693e3de897f04ebffc896bd8be5ac7a9d0..e1b0c64948180c080cce27b4db48fa9fb376f3dd 100644 --- a/packages/ui/alert/stories/index.stories.mdx +++ b/packages/ui/alert/stories/index.stories.mdx @@ -5,7 +5,15 @@ import {Demo} from './index.stories' # OSUI Alert -一些给UE看的文档说明，可以放在这里 +## API + +### 基本属性 + +支持所有antd属性：见[antd文档](https://ant.design/components/alert-cn/) + +### 其他说明 + +若icon不传并且存在description,则会赋予默认的icon diff --git a/packages/ui/alert/stories/index.stories.tsx b/packages/ui/alert/stories/index.stories.tsx index c6b34382d98fe4ace5308035449ea842e5b17952..d1ac292d486384cad257f4f90a4523f0d52b3f2b 100644 --- a/packages/ui/alert/stories/index.stories.tsx +++ b/packages/ui/alert/stories/index.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import {CheckCircleFilled, InfoCircleFilled} from '@ant-design/icons'; import Alert from '../src'; export default { @@ -17,109 +16,101 @@ export const Demo = () => { showIcon closable closeText={ { - console.log(1); e.stopPropagation(); }} >查看详情} /> } /> {/* warning */} { - console.log(1); e.stopPropagation(); }} >查看详情} /> } /> {/* eroor */} { - console.log(1); e.stopPropagation(); }} >查看详情} /> } /> {/* info */} { - console.log(1); e.stopPropagation(); }} >查看详情} /> } /> ); diff --git a/packages/ui/input/.storybook/main.js b/packages/ui/input/.storybook/main.js new file mode 100644 index 0000000000000000000000000000000000000000..34ac840230e8a5f5d2437f06788470d20b106cc0 --- /dev/null +++ b/packages/ui/input/.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/input/.storybook/preview.js b/packages/ui/input/.storybook/preview.js new file mode 100644 index 0000000000000000000000000000000000000000..faeb11a4db47f4aea0688797db1856f7738f461c --- /dev/null +++ b/packages/ui/input/.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/input/babel.config.js b/packages/ui/input/babel.config.js new file mode 100644 index 0000000000000000000000000000000000000000..d222841daa0815ccea18188ceb097da34d13aad9 --- /dev/null +++ b/packages/ui/input/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/input/package.json b/packages/ui/input/package.json new file mode 100644 index 0000000000000000000000000000000000000000..d22a69240a01b1d2ac3db37442833e448a605a33 --- /dev/null +++ b/packages/ui/input/package.json @@ -0,0 +1,56 @@ +{ + "name": "@osui/input", + "version": "0.1.2", + "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", + "dependencies": { + "classnames": "^2.2.6" + } +} diff --git a/packages/ui/input/src/index.less b/packages/ui/input/src/index.less new file mode 100644 index 0000000000000000000000000000000000000000..d29a96741b206b3b0423cfc9cfcd0ef2aefb2dba --- /dev/null +++ b/packages/ui/input/src/index.less @@ -0,0 +1 @@ +@osui-input-class-prefix: osui-input; diff --git a/packages/ui/input/src/index.tsx b/packages/ui/input/src/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1b9782f4ff0cb1cd5ce238789cc14a4f7ffc295e --- /dev/null +++ b/packages/ui/input/src/index.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import {Input as AntdInput} from 'antd'; +import {InputProps as AntdInputProps} from 'antd/lib/Input'; +import classNames from 'classnames'; +import './index.less'; + +const clsPrefix = 'osui-input'; +export type InputProps = AntdInputProps; + +const Input = React.forwardRef((props, ref) => { + return ; +}); + +Input.Group = AntdInput.Group; +Input.Search = AntdInput.Search; +Input.TextArea = AntdInput.TextArea; +Input.Password = AntdInput.Password; + +export default Input; + diff --git a/packages/ui/input/stories/index.stories.mdx b/packages/ui/input/stories/index.stories.mdx new file mode 100644 index 0000000000000000000000000000000000000000..99c360181ef63974812512b7b09c08de469e5dda --- /dev/null +++ b/packages/ui/input/stories/index.stories.mdx @@ -0,0 +1,14 @@ +import {Meta, Story, Preview} from '@storybook/addon-docs/blocks'; +import {Demo} from './index.stories' + + + +# OSUI Input + +支持所有antd属性：见[antd文档](https://ant.design/components/input-cn/) + + + + {Demo()} + + diff --git a/packages/ui/input/stories/index.stories.tsx b/packages/ui/input/stories/index.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c0d3b10a2149790c7f9fb8159cecd76f5eb484ee --- /dev/null +++ b/packages/ui/input/stories/index.stories.tsx @@ -0,0 +1,46 @@ + +import * as React from 'react'; +import {InputNumber} from 'antd'; +import {SearchOutlined} from '@ant-design/icons'; +import '@osui/theme/dist/theme/vars.css'; +import Input from '../src'; +const {TextArea} = Input; + +export default { + title: 'OSUI-Input', +}; + +const Item = props => { + return ( +
+ {props.children} +
+ ); +}; + +export const Demo = () => { + return (
+

+ + + + + + + + { + console.log(1); + }} + /> + } + /> + + +