fix: refactor with field components

dbeaver · Sep 27, 2023 · a3eff5b · a3eff5b
1 parent 5826b82
commit a3eff5b
Show file tree

Hide file tree

Showing 23 changed files with 215 additions and 236 deletions.
diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx
@@ -8,7 +8,21 @@
 import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
 
-import { getComputed, Loader, Pane, ResizerControls, Split, splitStyles, useSplitUserState, useStyles } from '@cloudbeaver/core-blocks';
+import {
+  Combobox,
+  getComputed,
+  InputField,
+  InputFiles,
+  Loader,
+  Pane,
+  Radio,
+  ResizerControls,
+  Split,
+  splitStyles,
+  Textarea,
+  useSplitUserState,
+  useStyles,
+} from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { LeftBarPanelService, SideBarPanel, SideBarPanelService } from '@cloudbeaver/core-ui';
 
@@ -42,29 +56,7 @@ export const Main = observer(function Main() {
 
   return styled(styles)(
     <Loader suspense>
-      <space as="main">
-        <Split {...splitMainState} sticky={30} mode={leftBarDisabled ? 'minimize' : splitMainState.mode} disable={leftBarDisabled}>
-          <Pane basis="250px" main>
-            <Loader suspense>
-              <SideBarPanel container={leftBarPanelService.tabsContainer} />
-            </Loader>
-          </Pane>
-          <ResizerControls />
-          <Pane>
-            <Split {...splitRightState} mode={sideBarDisabled ? 'minimize' : splitRightState.mode} disable={sideBarDisabled} sticky={30}>
-              <Pane>
-                <RightArea />
-              </Pane>
-              <ResizerControls />
-              <Pane basis="250px" main>
-                <Loader suspense>
-                  <SideBarPanel container={sideBarPanelService.tabsContainer} />
-                </Loader>
-              </Pane>
-            </Split>
-          </Pane>
-        </Split>
-      </space>
+      <Combobox description="desc" items={[]}>Label</Combobox>
     </Loader>,
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx
@@ -8,10 +8,11 @@
 import { observer } from 'mobx-react-lite';
 
 import { filterLayoutFakeProps } from '../../Containers/filterLayoutFakeProps';
-import elementsSizeStyles from '../../Containers/shared/ElementsSize.m.css';
 import { s } from '../../s';
 import { useS } from '../../useS';
-import formControlStyles from '../FormControl.m.css';
+import { Field } from '../Field';
+import { FieldDescription } from '../FieldDescription';
+import { FieldLabel } from '../FieldLabel';
 import { isControlPresented } from '../isControlPresented';
 import type { ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox';
 import switchStyles from './Switch.m.css';
@@ -64,19 +65,19 @@ export const Switch: SwitchType = observer(function Switch({
     onChange,
   });
   rest = filterLayoutFakeProps(rest);
-  const styles = useS(elementsSizeStyles, formControlStyles, switchStyles, ...mod.map(mod => switchMod[mod]));
+  const styles = useS(switchStyles, ...mod.map(mod => switchMod[mod]));
 
   if (autoHide && !isControlPresented(name, state)) {
     return null;
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true }, className)} title={rest.title}>
-      <div data-testid="switch-body" className={styles.switchBody}>
-        <div data-testid="switch-control" className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
-          <div data-testid="switch-control-track" className={styles.switchControlTrack} />
-          <div data-testid="switch-control-underlay" className={styles.switchControlUnderlay}>
-            <div data-testid="switch-control-thumb" className={styles.switchControlThumb} />
+    <Field className={className} title={rest.title}>
+      <div className={styles.switchBody}>
+        <div className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
+          <div className={styles.switchControlTrack} />
+          <div className={styles.switchControlUnderlay}>
+            <div className={styles.switchControlThumb} />
             <input
               {...rest}
               type="checkbox"
@@ -91,15 +92,11 @@ export const Switch: SwitchType = observer(function Switch({
             />
           </div>
         </div>
-        <label htmlFor={id || value || name} data-testid="field-label" className={styles.fieldLabel}>
+        <FieldLabel htmlFor={id || value || name} className={styles.fieldLabel}>
           {children}
-        </label>
+        </FieldLabel>
       </div>
-      {description && (
-        <div data-testid="field-description" className={styles.fieldDescription}>
-          {description}
-        </div>
-      )}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.m.css b/webapp/packages/core-blocks/src/FormControls/Combobox.m.css
@@ -12,15 +12,17 @@
   margin: 0;
 }
 
-.fieldLabel {
-  display: block;
-  padding-bottom: 10px;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
+.input {
+  padding-right: 24px !important;
 }
 
 .input {
-  padding-right: 24px !important;
+  font-size: 12px;
+
+  &.select {
+    cursor: pointer;
+    user-select: none;
+  }
 }
 
 .menuButton {

diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -11,7 +11,6 @@ import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit/Menu';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { getComputed } from '../getComputed';
 import { Icon } from '../Icon';
 import { IconOrImage } from '../IconOrImage';
@@ -20,8 +19,10 @@ import { useTranslate } from '../localization/useTranslate';
 import { s } from '../s';
 import { useS } from '../useS';
 import comboboxStyles from './Combobox.m.css';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 
 type BaseProps<TKey, TValue> = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSelect' | 'name' | 'value' | 'defaultValue'> &
   ILayoutSizeProps & {
@@ -93,7 +94,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
   const context = useContext(FormContext);
   const menuRef = useRef<HTMLDivElement>(null);
   const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-  const styles = useS(elementsSizeStyles, formControlStyles, comboboxStyles);
+  const styles = useS(comboboxStyles);
 
   const menu = useMenuState({
     placement: 'bottom-end',
@@ -255,12 +256,12 @@ export const Combobox: ComboboxType = observer(function Combobox({
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true, inline, ...layoutProps }, className)}>
+    <Field {...layoutProps} className={s(styles, { field: true, inline }, className)}>
       {children && (
-        <div title={title} data-testid="field-label" className={styles.fieldLabel}>
+        <FieldLabel title={title} className={styles.fieldLabel}>
           {children}
           {rest.required && ' *'}
-        </div>
+        </FieldLabel>
       )}
       <div data-testid="input-box" className={styles.inputBox}>
         {(icon || loading) && (
@@ -322,20 +323,14 @@ export const Combobox: ComboboxType = observer(function Combobox({
                       {icon && typeof icon === 'string' ? <IconOrImage icon={icon} className={styles.iconOrImage} /> : icon}
                     </div>
                   )}
-                  <div data-testid="item-value" className={styles.itemValue}>
-                    {valueSelector(item)}
-                  </div>
+                  <div>{valueSelector(item)}</div>
                 </MenuItem>
               );
             })
           )}
         </Menu>
       </div>
-      {description && (
-        <div data-testid="field-description" className={styles.fieldDescription}>
-          {description}
-        </div>
-      )}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Field.m.css b/webapp/packages/core-blocks/src/FormControls/Field.m.css
@@ -0,0 +1,8 @@
+.field {
+  box-sizing: border-box;
+
+  & .field {
+    height: 32px;
+    padding: 0;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/Field.tsx b/webapp/packages/core-blocks/src/FormControls/Field.tsx
@@ -0,0 +1,25 @@
+import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
+import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldStyles from './Field.m.css';
+
+type Props = ILayoutSizeProps &
+  HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+  };
+export const Field: React.FC<PropsWithChildren<Props>> = observer(function Field({ children, className, ...rest }) {
+  const styles = useS(fieldStyles, elementsSizeStyles);
+
+  const layoutProps = getLayoutProps(rest);
+
+  return (
+    <div {...rest} className={s(styles, { ...layoutProps, field: true }, className)}>
+      {children}
+    </div>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldDescription.m.css b/webapp/packages/core-blocks/src/FormControls/FieldDescription.m.css
@@ -0,0 +1,11 @@
+.fieldDescription {
+  composes: theme-typography--caption from global;
+  color: var(--theme-text-hint-on-background);
+  box-sizing: border-box;
+  padding-top: 4px;
+  min-height: 24px;
+
+  &.invalid {
+    color: var(--theme-negative);
+  }
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldDescription.tsx b/webapp/packages/core-blocks/src/FormControls/FieldDescription.tsx
@@ -0,0 +1,16 @@
+import { observer } from 'mobx-react-lite';
+import type { PropsWithChildren } from 'react';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldDescriptionStyles from './FieldDescription.m.css';
+
+interface Props {
+  className?: string;
+  invalid?: boolean;
+}
+export const FieldDescription: React.FC<PropsWithChildren<Props>> = observer(function FieldDescription({ children, className, invalid }) {
+  const styles = useS(fieldDescriptionStyles);
+
+  return <div className={s(styles, { fieldDescription: true, invalid }, className)}>{children}</div>;
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldLabel.m.css b/webapp/packages/core-blocks/src/FormControls/FieldLabel.m.css
@@ -0,0 +1,16 @@
+.fieldLabel {
+  composes: theme-typography--body1 from global;
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: initial;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-weight: 500;
+}
+
+.fieldLabel:not(:empty) {
+  padding-bottom: 10px;
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx b/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx
@@ -0,0 +1,29 @@
+import { observer } from 'mobx-react-lite';
+import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldLabelStyles from './FieldLabel.m.css';
+
+type Props = LabelHTMLAttributes<HTMLLabelElement> & {
+  className?: string;
+  title?: string;
+  required?: boolean;
+};
+export const FieldLabel: React.FC<PropsWithChildren<Props>> = observer(function FieldLabel({
+  children,
+  className,
+  htmlFor,
+  title,
+  required,
+  ...rest
+}) {
+  const styles = useS(fieldLabelStyles);
+
+  return (
+    <label {...rest} className={s(styles, { fieldLabel: true }, className)}>
+      {children}
+      {required && ' *'}
+    </label>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.m.css b/webapp/packages/core-blocks/src/FormControls/Filter.m.css
@@ -40,9 +40,6 @@
   }
 }
 
-.innerInputStyle {
-}
-
 .toggleMode {
   composes: theme-background-primary theme-text-on-primary from global;
   cursor: pointer;

diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx
@@ -107,8 +107,8 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
   return (
     <div className={s(styles, { filterContainer: true })} onClick={onClick}>
       <InputField
-        className={s(styles, { inputField: true, max, toggled }, className)}
         ref={inputRef}
+        className={s(styles, { inputField: true, max, toggled }, className)}
         placeholder={placeholder}
         disabled={disabled}
         name={name}

diff --git a/webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx b/webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx
@@ -21,7 +21,13 @@ interface Props extends ILayoutSizeProps {
   className?: string;
 }
 
-export const FormFieldDescription: React.FC<React.PropsWithChildren<Props>> = observer(function FormFieldDescription({ label, title, children, className, ...rest }) {
+export const FormFieldDescription: React.FC<React.PropsWithChildren<Props>> = observer(function FormFieldDescription({
+  label,
+  title,
+  children,
+  className,
+  ...rest
+}) {
   const styles = useS(formControlStyles, elementsSizeStyles, style);
   const layoutProps = getLayoutProps(rest);
   rest = filterLayoutFakeProps(rest);

diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.m.css b/webapp/packages/core-blocks/src/FormControls/InputField.m.css
@@ -1,14 +1,6 @@
 .icon {
   composes: theme-text-on-secondary from global;
 }
-.fieldLabel {
-  display: block;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
-}
-.fieldLabel:not(:empty) {
-  margin-bottom: 10px;
-}
 .inputContainer {
   position: relative;
 }
@@ -38,6 +30,10 @@
   cursor: auto;
 }
 
+.input {
+  font-size: 12px;
+}
+
 .input[disabled] + .iconContainer {
   cursor: auto;
   opacity: 0.8;