feat: update form components

NOTE.md

@@ -17,13 +17,12 @@
 * Captcha Input - 需要找别的组件！
 
 # Form Components
-* Input
-  * Password Input with Eye Icon
-* Radio Group
-  * Vertical Layout
-  * Horizontal Layout
-* Checkbox
-* Textarea
+* [x] Input
+  * [x] Password Input with Eye Icon
+* [x] Radio - 大屏上黑色主题
+* [x] Radio Group
+* [x] Checkbox
+* [x] Textarea
 * Select
 * Form
 * FormItem

src/App.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BreakpointProvider } from './components/Breakpoint'
-import { ConfigProvider } from 'antd'
-import { Button } from './components/Button'
-import Icon from '@ant-design/icons';
-import { ReactComponent as CloseIcon } from './icons/close.svg'
+import { ConfigProvider, Space } from 'antd'
+import {RadioGroup, Radio, RadioChangeEvent} from './components/FormControl'
 
 const brandPrimary = '#FF5200';
 const textPrimary = '#1E1D1F'
@@ -12,20 +10,13 @@ const textLighter = '#8F9296'
 const white = '#FDFDFD'
 
 function App() {
-	const items = [
-		{
-			title: 'Account',
-		},
-		{
-			title: 'Tester Info',
-		},
-		{
-			title: 'Review',
-		},
-		{
-			title: 'Done',
-		},
-	];
+	const [value, setValue] = useState(1);
+
+	const onChange = (e: RadioChangeEvent) => {
+		console.log('radio checked', e.target.value);
+		setValue(e.target.value);
+	};
+
 	return (
 		<ConfigProvider
 			theme={{
@@ -85,13 +76,46 @@ function App() {
 					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 icon={<Icon component={CloseIcon} />} />
+				<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/Chekbox.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react'
+import { Checkbox as AntdCheckbox, CheckboxProps as AntdCheckboxProps } from 'antd'
+
+export type CheckboxProps = Omit<AntdCheckboxProps, 'indeterminate'>
+
+export const Checkbox: FC<CheckboxProps> = (props) => {
+	return <AntdCheckbox {...props} />
+}

src/components/FormControl/Input.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react'
+import { Input as AntdInput, InputProps as AntdInputProps } from 'antd'
+
+export type InputProps = Omit<AntdInputProps, 'size' | 'showCount' | 'bordered' | 'addonAfter' | 'addonBefore' | 'allowClear'>
+
+export const Input: FC<InputProps> = (props) => {
+	return <AntdInput {...props} />
+}

src/components/FormControl/Password.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+import { Input as AntdInput, } from 'antd'
+import { PasswordProps as AntdPasswordProps } from 'antd/es/input/Password'
+
+export type PasswordProps = Omit<AntdPasswordProps, 'size' | 'showCount' | 'bordered' | 'addonAfter' | 'addonBefore' | 'allowClear' | 'iconRender'>
+
+export const Password: FC<PasswordProps> = (props) => {
+	return <AntdInput.Password {...props} />
+}

src/components/FormControl/Radio.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+import { Radio as AntdRadio, RadioProps } from 'antd'
+
+export const Radio: FC<RadioProps> = (props) => {
+	return <AntdRadio {...props} />
+}
+
+export type { RadioProps, RadioChangeEvent } from 'antd'
+

src/components/FormControl/RadioGroup.tsx

@@ -0,0 +1,8 @@
+import React, { ComponentProps, FC } from 'react'
+import { Radio as AntdRadio } from 'antd'
+
+export type RadioGroupProps = Omit<ComponentProps<typeof AntdRadio.Group>, 'buttonStyle' | 'optionType' | 'size'>
+
+export const RadioGroup: FC<RadioGroupProps> = (props) => {
+	return (<AntdRadio.Group {...props} />)
+}

src/components/FormControl/TextArea.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+import { Input as AntdInput, } from 'antd'
+import { TextAreaProps as AntdTextAreaProps } from 'antd/es/input/TextArea'
+
+export type TextAreaProps = Omit<AntdTextAreaProps, 'size' | 'showCount' | 'bordered' | 'addonAfter' | 'addonBefore' | 'allowClear'>
+
+export const TextArea: FC<TextAreaProps> = (props) => {
+	return <AntdInput.TextArea {...props} />
+}

src/components/FormControl/index.ts

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

src/styles/reset.css

@@ -54,3 +54,69 @@
 	position: relative;
 	box-shadow: 0 2px 0px 0 #000022, 0 2px 0px 0px #000022, 1px 1px 0px 2px #000022;
 }
+
+.ant-input, .ant-input-password {
+	padding: 11px 12px;
+}
+
+.ant-input:focus {
+	box-shadow: none !important;
+}
+
+.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+	outline: 1px solid #FF5200;
+}
+
+.ant-checkbox-wrapper {
+	line-height: 18px;
+	font-weight: 500;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner {
+	background: transparent !important;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner:before {
+	content: '';
+	background: #000022;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 18px;
+	height: 18px;
+	border-radius: 2px;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner:after {
+	width: 6px;
+	height: 11px;
+	transform: rotate(45deg) scale(1) translate(-45%, -65%);
+}
+
+.ant-radio-wrapper {
+	font-size: 12px;
+	line-height: 24px;
+}
+
+.ant-radio-wrapper .ant-radio-inner {
+	background: #fff;
+	width: 24px;
+	height: 24px;
+}
+
+.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
+	background: #fff;
+}
+
+.ant-radio-wrapper .ant-radio-inner::after {
+	width: 16px;
+	height: 16px;
+	margin-block-start: -8px;
+	margin-inline-start: -8px;
+}
+
+.ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
+	background: #FF5200;
+	transform: scale(1);
+}