refactor(component): input component (#2275)

packages/component/src/index.ts

@@ -3,7 +3,6 @@ export * from './styles';
 export * from './ui/breadcrumbs';
 export * from './ui/button';
 export * from './ui/confirm';
-export * from './ui/divider';
 export * from './ui/empty';
 export * from './ui/input';
 export * from './ui/layout';

packages/component/src/ui/divider/index.ts

@@ -1,9 +0,0 @@
-import MuiDivider from '@mui/material/Divider';
-
-import { styled } from '../../styles';
-
-export const Divider = styled(MuiDivider)(() => {
-  return {
-    borderColor: 'var(--affine-border-color)',
-  };
-});

packages/component/src/ui/empty/empty-svg.tsx

@@ -1,7 +1,7 @@
-import type { SvgIconProps } from '@mui/material/SvgIcon';
 import SvgIcon from '@mui/material/SvgIcon';
+import { memo } from 'react';
 
-export const EmptySvg = (_props: SvgIconProps) => {
+export const EmptySvg = memo(function EmptySvg() {
   return (
     <SvgIcon
       width="200"
@@ -411,4 +411,4 @@ export const EmptySvg = (_props: SvgIconProps) => {
       </defs>
     </SvgIcon>
   );
-};
+});

packages/component/src/ui/input/index.css.ts

@@ -0,0 +1,34 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const heightVar = createVar('heightVar');
+export const widthVar = createVar('widthVar');
+
+export const inputStyle = style({
+  vars: {
+    [heightVar]: 'unset',
+    [widthVar]: '100%',
+  },
+  width: widthVar,
+  height: heightVar,
+  lineHeight: '22px',
+  padding: '8px 12px',
+  color: 'var(--affine-text-primary-color)',
+  border: '1px solid',
+  borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
+  backgroundColor: 'var(--affine-white)',
+  borderRadius: '10px',
+  selectors: {
+    '&[data-no-border="true"]': {
+      border: 'unset',
+    },
+    '&[data-disabled="true"]': {
+      color: 'var(--affine-text-disable-color)',
+    },
+    '&::placeholder': {
+      color: 'var(--affine-placeholder-color)',
+    },
+    '&:focus': {
+      borderColor: 'var(--affine-primary-color)',
+    },
+  },
+});

packages/component/src/ui/input/index.stories.tsx

@@ -0,0 +1,39 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryFn } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { Input } from '.';
+
+export default {
+  title: 'AFFiNE/Input',
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export const Basic: StoryFn<typeof Input> = () => {
+  return <Input data-testid="test-input" defaultValue="test" />;
+};
+
+Basic.play = async ({ canvasElement }) => {
+  const element = within(canvasElement);
+  const item = element.getByTestId('test-input') as HTMLInputElement;
+  expect(item).toBeTruthy();
+  expect(item.value).toBe('test');
+  userEvent.clear(item);
+  userEvent.type(item, 'test 2');
+  expect(item.value).toBe('test 2');
+};
+
+export const DynamicHeight: StoryFn<typeof Input> = () => {
+  return <Input width={200} data-testid="test-input" />;
+};
+
+DynamicHeight.play = async ({ canvasElement }) => {
+  const element = within(canvasElement);
+  const item = element.getByTestId('test-input') as HTMLInputElement;
+  expect(item).toBeTruthy();
+  expect(item.getBoundingClientRect().width).toBe(200);
+};
+
+export const NoBorder: StoryFn<typeof Input> = () => {
+  return <Input noBorder={true} data-testid="test-input" />;
+};

packages/component/src/ui/input/input.tsx

@@ -1,14 +1,16 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
 import type {
+  ChangeEventHandler,
   CSSProperties,
   FocusEventHandler,
   ForwardedRef,
   HTMLAttributes,
-  InputHTMLAttributes,
   KeyboardEventHandler,
 } from 'react';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useCallback } from 'react';
 
-import { StyledInput } from './style';
+import { heightVar, inputStyle, widthVar } from './index.css';
 
 type inputProps = {
   value?: string;
@@ -27,39 +29,35 @@ type inputProps = {
 export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
   {
     disabled,
-    value: valueProp,
+    value,
     placeholder,
     maxLength,
     minLength,
     height,
     width,
     onChange,
-    onBlur,
-    onKeyDown,
     noBorder = false,
     ...otherProps
   }: inputProps,
   ref: ForwardedRef<HTMLInputElement>
 ) {
-  const [value, setValue] = useState<string>(valueProp || '');
+  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-  const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
-    const { value } = e.target;
-    setValue(value);
-    onChange && onChange(value);
-  };
-
-  const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
-    onBlur && onBlur(e);
-  };
-  const handleKeyDown: InputHTMLAttributes<HTMLInputElement>['onKeyDown'] =
     e => {
-      onKeyDown && onKeyDown(e);
+      const { value } = e.target;
-    };
+      onChange && onChange(value);
-  useEffect(() => {
+    },
-    setValue(valueProp || '');
+    [onChange]
-  }, [valueProp]);
+  );
+
   return (
-    <StyledInput
+    <input
+      className={clsx(inputStyle, otherProps.className)}
+      style={assignInlineVars({
+        [widthVar]: width ? `${width}px` : '100%',
+        [heightVar]: height ? `${height}px` : 'unset',
+      })}
+      data-no-border={noBorder}
+      data-disabled={disabled}
       ref={ref}
       value={value}
       disabled={disabled}
@@ -68,10 +66,7 @@ export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
       maxLength={maxLength}
       minLength={minLength}
       onChange={handleChange}
-      onBlur={handleBlur}
-      onKeyDown={handleKeyDown}
       height={height}
-      noBorder={noBorder}
       {...otherProps}
     />
   );

packages/component/src/ui/input/style.ts

@@ -1,31 +0,0 @@
-import type { CSSProperties } from 'react';
-
-import { styled } from '../../styles';
-
-export const StyledInput = styled('input')<{
-  disabled?: boolean;
-  value?: string;
-  width?: CSSProperties['width'];
-  height?: CSSProperties['height'];
-  noBorder?: boolean;
-}>(({ width, disabled, height, noBorder }) => {
-  return {
-    width: width || '100%',
-    height,
-    lineHeight: '22px',
-    padding: '8px 12px',
-    color: disabled
-      ? 'var(--affine-text-disable-color)'
-      : 'var(--affine-text-primary-color)',
-    border: noBorder ? 'unset' : `1px solid`,
-    borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
-    backgroundColor: 'var(--affine-white)',
-    borderRadius: '10px',
-    '&::placeholder': {
-      color: 'var(--affine-placeholder-color)',
-    },
-    '&:focus': {
-      borderColor: 'var(--affine-primary-color)',
-    },
-  };
-});