feat: components

NOTE.md

@@ -1,7 +1,7 @@
 # Responsive
 
-
 # Basic Components
+
 * [x] Typography
 	* [x] Link
 * [x] Button
@@ -13,24 +13,25 @@
 * [x] Tag
 
 # HandWrite Component
+
 * Hamburger Menu - 需要手写！
 * Captcha Input - 需要找别的组件！
 
 # Form Components
+
 * [x] Input
 	* [x] Password Input with Eye Icon
 * [x] Radio - 大屏上黑色主题
 * [x] Radio Group
 * [x] Checkbox
 * [x] Textarea
-* Select
+* [x] Select
-* Form
+* [x] Form
-* FormItem
+* [x] FormItem
-  * FormItem with Validate Icon
+	* [x] FormItem with Error Message
-  * FormItem with Help Icon
-  * FormItem with Error Message
 
 # Layout Components
+
 * Layout
 	* Header
 	* Footer

scripts/genAntdCss.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 const outputPath = './src/styles/antd.min.css';
 
+
 const brandPrimary = '#FF5200';
 const textPrimary = '#1E1D1F'
 const textDarker = '#000022'
@@ -69,7 +70,44 @@ const css = extractStyle((node) => (
 				Steps: {
 					colorSplit: brandPrimary,
 					colorTextDescription: textLighter,
-				}
+				},
+				Input: {
+					colorErrorOutline: brandPrimary,
+					colorBorder: textDarker,
+					colorError: textDarker,
+					colorErrorBorderHover: textDarker,
+					borderRadius: 2,
+					fontSize: 16,
+					colorIcon: '#D9D9D9',
+					colorPrimaryHover: textDarker,
+					colorTextPlaceholder: '#CACACC',
+				},
+				Select: {
+					colorBorder: textDarker,
+					colorPrimaryHover: textDarker,
+					colorTextPlaceholder: '#CACACC',
+					colorErrorOutline: brandPrimary,
+					colorError: textDarker,
+					colorErrorBorderHover: textDarker,
+					colorTextQuaternary: textDarker,
+					borderRadius: 2,
+					fontSize: 16,
+					borderRadiusLG: 0
+				},
+				Checkbox: {
+					controlInteractiveSize: 24,
+					colorPrimaryHover: textDarker,
+					colorPrimary: textDarker,
+					colorTextDisabled: textDarker,
+					colorBorder: textDarker,
+					borderRadiusSM: 2,
+				},
+				Radio: {
+					colorPrimaryHover: textDarker,
+					colorPrimary: textDarker,
+					colorTextDisabled: textDarker,
+					colorBorder: textDarker,
+				},
 			}
 		}}
 	>

src/App.tsx

@@ -1,123 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { BreakpointProvider } from './components/Breakpoint'
-import { ConfigProvider, Space } from 'antd'
+import { Button } from './components/Button'
-import {RadioGroup, Radio, RadioChangeEvent} from './components/FormControl'
-
-const brandPrimary = '#FF5200';
-const textPrimary = '#1E1D1F'
-const textDarker = '#000022'
-const textLighter = '#8F9296'
-const white = '#FDFDFD'
 
 function App() {
-	const [value, setValue] = useState(1);
-
-	const onChange = (e: RadioChangeEvent) => {
-		console.log('radio checked', e.target.value);
-		setValue(e.target.value);
-	};
-
 	return (
-		<ConfigProvider
-			theme={{
-				token: {
-					colorBgMask: 'rgba(217, 217, 217, 0.65)',
-					colorLink: brandPrimary,
-					colorLinkHover: brandPrimary,
-					colorLinkActive: brandPrimary,
-					colorPrimary: brandPrimary,
-					colorText: textPrimary,
-					colorTextBase: textPrimary,
-					fontSize: 16,
-					fontSizeHeading1: 28,
-					fontSizeHeading2: 22,
-					fontSizeHeading3: 20,
-					lineHeightHeading1: 1.3,
-					lineHeightHeading2: 1.3,
-					lineHeightHeading3: 1.3,
-					fontSizeHeading4: 16,
-					fontFamily: 'Lato, Helvetica, Arial, sans-serif'
-				},
-				components: {
-					Button: {
-						// button base
-						fontSize: 20,
-						borderRadius: 4,
-						controlHeight: 45,
-						lineHeight: 45 / 20,
-						controlOutlineWidth: 0,
-						controlOutline: 'transparent',
-						// primary button
-						colorPrimary: '#FF5A0C',
-						colorTextLightSolid: white,
-						colorPrimaryHover: brandPrimary,
-						colorPrimaryActive: brandPrimary,
-						// disabled button
-						colorBgContainerDisabled: '#CACACC',
-						colorTextDisabled: white,
-						// text button
-						colorText: brandPrimary,
-						colorBgTextHover: 'transparent',
-						colorBgTextActive: 'transparent',
-					},
-					Modal: {
-						borderRadiusLG: 10,
-						boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
-						paddingContentHorizontalLG: 32,
-					},
-					Tooltip: {
-						fontSize: 14,
-						paddingSM: 12,
-						paddingXS: 10,
-						borderRadius: 4,
-						colorTextLightSolid: textDarker,
-						colorBgDefault: white,
-					},
-					Steps: {
-						colorSplit: brandPrimary,
-						colorTextDescription: textLighter,
-					},
-					Input: {
-						colorErrorOutline: brandPrimary,
-						colorBorder: textDarker,
-						colorError: textDarker,
-						colorErrorBorderHover: textDarker,
-						borderRadius: 2,
-						fontSize: 16,
-						colorIcon: '#D9D9D9',
-						colorPrimaryHover: textDarker,
-						colorTextPlaceholder: '#CACACC',
-					},
-					Checkbox: {
-						controlInteractiveSize: 24,
-						colorPrimaryHover: textDarker,
-						colorPrimary: textDarker,
-						colorTextDisabled: textDarker,
-						colorBorder: textDarker,
-						borderRadiusSM: 2,
-					},
-					Radio: {
-						colorPrimaryHover: textDarker,
-						colorPrimary: textDarker,
-						colorTextDisabled: textDarker,
-						colorBorder: textDarker,
-					}
-				}
-			}}
-		>
 		<BreakpointProvider>
-				<div>iHealth</div>
+			<Button>iHealth</Button>
-				<div style={{ padding: 30 }}>
-					<RadioGroup onChange={onChange} value={value}>
-						<Space direction="vertical">
-							<Radio value={1}>Option A</Radio>
-							<Radio value={2}>Option B</Radio>
-							<Radio value={3}>Option C</Radio>
-						</Space>
-					</RadioGroup>
-				</div>
 		</BreakpointProvider>
-		</ConfigProvider>
 	);
 }
 

src/components/FormControl/Select.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react'
+import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd'
+
+export type SelectProps = Omit<AntdSelectProps, 'allowClear' | 'autoClearSearchValue' | 'bordered'
+	| 'clearIcon' | 'maxTagPlaceholder' | 'maxTagTextLength' | 'menuItemSelectedIcon' |
+	'mode' | 'notFoundContent' | 'optionFilterProp' | 'removeIcon' | 'searchValue' | 'showArrow' | 'size'
+	| 'suffixIcon' | 'tagRender' | 'tokenSeparators' | 'onDeselect' | 'onClear'>
+
+export const Select: FC<SelectProps> = (props) => {
+	return <AntdSelect {...props} />
+}

src/components/FormControl/index.ts

@@ -1,6 +1,7 @@
 export * from './TextArea'
 export * from './Password'
 export * from './Input'
+export * from './Select'
 export * from './Chekbox'
 export * from './Radio'
 export * from './RadioGroup'

src/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ConfigProvider } from 'antd'
+import { Theme } from './theme'
 import App from './App';
 import 'typeface-lato'
 import 'antd/dist/reset.css';
-import './styles/antd.min.css';
 import './styles/reset.css';
 
 const root = ReactDOM.createRoot(
@@ -11,6 +12,8 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
+		<ConfigProvider theme={Theme}>
     <App />
+		</ConfigProvider>
   </React.StrictMode>
 );

src/styles/reset.css

@@ -120,3 +120,67 @@
 	background: #FF5200;
 	transform: scale(1);
 }
+
+.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+	height: 48px;
+	padding: 0 12px;
+}
+
+.ant-select-single .ant-select-selector .ant-select-selection-item, .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+.ant-select-single:not(.ant-select-customize-input) .ant-select-selector:after {
+	line-height: 46px;
+}
+
+.ant-select-single .ant-select-selector .ant-select-selection-search {
+	inset-inline-start: 12px;
+	inset-inline-end: 12px;
+}
+
+.ant-select-focused.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
+	box-shadow: none !important;
+}
+
+.ant-select-single.ant-select-open .ant-select-selection-item {
+	color: #000022;
+}
+
+.ant-select-status-error:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
+	border-color: #000022;
+	outline: 1px solid #FF5200;
+}
+
+.ant-select-dropdown {
+	padding: 0;
+	box-shadow: none;
+	margin-top: -16px;
+	border: 1px solid #000022;
+}
+
+.ant-select-dropdown .ant-select-item-option,
+.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+	background: #F3F3F3;
+	min-height: 48px;
+	padding: 12px;
+	border-bottom: 2px solid #fff;
+}
+
+.ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+	display: none;
+}
+
+.ant-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {
+	padding: 0 0 4px;
+	line-height: 18px;
+}
+
+.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused {
+	box-shadow: none !important;
+}
+
+.ant-form-item .ant-form-item-explain, .ant-form-item .ant-form-item-extra {
+	line-height: 1;
+	padding-top: 6px;
+}
+.ant-form-item {
+	margin-bottom: 15px;
+}

src/theme/index.ts

@@ -0,0 +1,104 @@
+import { ThemeConfig } from 'antd'
+
+const brandPrimary = '#FF5200';
+const textPrimary = '#1E1D1F'
+const textDarker = '#000022'
+const textLighter = '#8F9296'
+const white = '#FDFDFD'
+export const Theme: ThemeConfig = {
+	token: {
+		colorBgMask: 'rgba(217, 217, 217, 0.65)',
+		colorLink: brandPrimary,
+		colorLinkHover: brandPrimary,
+		colorLinkActive: brandPrimary,
+		colorPrimary: brandPrimary,
+		colorText: textPrimary,
+		colorTextBase: textPrimary,
+		fontSize: 16,
+		fontSizeHeading1: 28,
+		fontSizeHeading2: 22,
+		fontSizeHeading3: 20,
+		lineHeightHeading1: 1.3,
+		lineHeightHeading2: 1.3,
+		lineHeightHeading3: 1.3,
+		fontSizeHeading4: 16,
+		fontFamily: 'Lato, Helvetica, Arial, sans-serif'
+	},
+	components: {
+		Button: {
+			// button base
+			fontSize: 20,
+			borderRadius: 4,
+			controlHeight: 45,
+			lineHeight: 45 / 20,
+			controlOutlineWidth: 0,
+			controlOutline: 'transparent',
+			// primary button
+			colorPrimary: '#FF5A0C',
+			colorTextLightSolid: white,
+			colorPrimaryHover: brandPrimary,
+			colorPrimaryActive: brandPrimary,
+			// disabled button
+			colorBgContainerDisabled: '#CACACC',
+			colorTextDisabled: white,
+			// text button
+			colorText: brandPrimary,
+			colorBgTextHover: 'transparent',
+			colorBgTextActive: 'transparent',
+		},
+		Modal: {
+			borderRadiusLG: 10,
+			boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
+			paddingContentHorizontalLG: 32,
+		},
+		Tooltip: {
+			fontSize: 14,
+			paddingSM: 12,
+			paddingXS: 10,
+			borderRadius: 4,
+			colorTextLightSolid: textDarker,
+			colorBgDefault: white,
+		},
+		Steps: {
+			colorSplit: brandPrimary,
+			colorTextDescription: textLighter,
+		},
+		Input: {
+			colorErrorOutline: brandPrimary,
+			colorBorder: textDarker,
+			colorError: textDarker,
+			colorErrorBorderHover: textDarker,
+			borderRadius: 2,
+			fontSize: 16,
+			colorIcon: '#D9D9D9',
+			colorPrimaryHover: textDarker,
+			colorTextPlaceholder: '#CACACC',
+		},
+		Select: {
+			colorBorder: textDarker,
+			colorPrimaryHover: textDarker,
+			colorTextPlaceholder: '#CACACC',
+			colorErrorOutline: brandPrimary,
+			colorError: textDarker,
+			colorErrorBorderHover: textDarker,
+			colorTextQuaternary: textDarker,
+			borderRadius: 2,
+			fontSize: 16,
+			borderRadiusLG: 0
+		},
+		Checkbox: {
+			controlInteractiveSize: 24,
+			colorPrimaryHover: textDarker,
+			colorPrimary: textDarker,
+			colorTextDisabled: textDarker,
+			colorBorder: textDarker,
+			borderRadiusSM: 2,
+		},
+		Radio: {
+			colorPrimaryHover: textDarker,
+			colorPrimary: textDarker,
+			colorTextDisabled: textDarker,
+			colorBorder: textDarker,
+		},
+	}
+}