Vara UI improvements (#1468)

utils/vara-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",
@@ -18,7 +18,7 @@
   ],
   "homepage": "https://github.com/gear-tech/gear-js/tree/main/utils/vara-ui#readme",
   "scripts": {
-    "dev": "storybook dev -p 6006",
+    "start": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-sb": "storybook build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -47,6 +47,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",
     "eslint-plugin-storybook": "0.6.13",
+    "sass": "^1.69.5",
     "storybook": "7.2.1",
     "typescript": "5.0.2",
     "vite": "4.4.5",

utils/vara-ui/src/components/alert/alert.tsx

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import cx from 'clsx';
 import { ReactComponent as CrossSVG } from '../../assets/images/cross.svg';
 import { Button } from '../button';
-import styles from './alert.module.css';
+import styles from './alert.module.scss';
 
 type Options = {
   type: 'info' | 'error' | 'loading' | 'success';

utils/vara-ui/src/components/alert/index.ts

@@ -1,5 +1,5 @@
 import { Alert, AlertProps } from './alert';
-import alertStyles from './alert.module.css';
+import alertStyles from './alert.module.scss';
 
 export { Alert, alertStyles };
 export type { AlertProps };

utils/vara-ui/src/components/button/button.module.css → utils/vara-ui/src/components/button/button.module.scss

@@ -12,6 +12,7 @@
   border: none;
   cursor: pointer;
   padding: 0;
+  font-family: inherit;
 
   display: inline-flex;
   align-items: center;
@@ -105,6 +106,24 @@
   }
 }
 
+.grey {
+  color: #000;
+  background-color: #e9e9e9;
+
+  &:hover {
+    background-color: #d4d4d4;
+  }
+
+  &.loading {
+    background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.01) 8%,
+      rgba(0, 0, 0, 0.075) 38%,
+      rgba(0, 0, 0, 0.01) 54%
+    );
+  }
+}
+
 .border {
   color: #000;
   background-color: transparent;

utils/vara-ui/src/components/button/button.stories.ts

@@ -26,11 +26,17 @@ const Light: Story = {
   },
 };
 
+const Grey: Story = {
+  args: {
+    color: 'grey',
+  },
+};
+
 const Border: Story = {
   args: {
     color: 'border',
   },
 };
 
 export default meta;
-export { Primary, Dark, Light, Border };
+export { Primary, Dark, Light, Grey, Border };

utils/vara-ui/src/components/button/button.tsx

@@ -1,11 +1,11 @@
 import { ButtonHTMLAttributes, FunctionComponent, ReactNode, SVGProps, forwardRef } from 'react';
 import cx from 'clsx';
-import styles from './button.module.css';
+import styles from './button.module.scss';
 
 type BaseProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   text?: string;
   icon?: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
-  color?: 'primary' | 'dark' | 'light' | 'border' | 'transparent';
+  color?: 'primary' | 'dark' | 'light' | 'grey' | 'border' | 'transparent';
   size?: 'default' | 'small';
   isLoading?: boolean;
   block?: boolean;
@@ -55,7 +55,7 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
         color !== 'transparent' && styles[size],
         disabled && styles.disabled,
         isLoading && styles.loading,
-        !text && styles.noText,
+        !text && !children && styles.noText,
         block && styles.block,
         noWrap && styles.noWrap,
         className,

utils/vara-ui/src/components/button/index.ts

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from './button';
-import buttonStyles from './button.module.css';
+import buttonStyles from './button.module.scss';
 
 export { Button, buttonStyles };
 export type { ButtonProps };

utils/vara-ui/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes, forwardRef } from 'react';
 import cx from 'clsx';
-import styles from './checkbox.module.css';
+import styles from './checkbox.module.scss';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label: string;

utils/vara-ui/src/components/checkbox/index.ts

@@ -1,5 +1,5 @@
 import { Checkbox, CheckboxProps } from './checkbox';
-import checkboxStyles from './checkbox.module.css';
+import checkboxStyles from './checkbox.module.scss';
 
 export { Checkbox, checkboxStyles };
 export type { CheckboxProps };

utils/vara-ui/src/components/input/index.ts

@@ -1,5 +1,5 @@
 import { Input, InputProps } from './input';
-import inputStyles from './input.module.css';
+import inputStyles from './input.module.scss';
 
 export { Input, inputStyles };
 export type { InputProps };

utils/vara-ui/src/components/input/input.module.css → utils/vara-ui/src/components/input/input.module.scss

@@ -6,7 +6,19 @@
 }
 
 .base {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
   position: relative;
+
+  &.default {
+    padding: 13px 14px;
+  }
+
+  &.small {
+    padding: 8px 14px;
+  }
 }
 
 .input,
@@ -26,13 +38,27 @@
 }
 
 .input {
+  padding: 0;
   background: transparent;
   border: none;
   outline: none;
-
   width: 100%;
-  padding-right: 14px;
-  padding-left: 14px;
+
+  &:-webkit-autofill {
+    background-clip: text; // transparent background on autocomplete
+  }
+
+  // hide number input buttons
+  // chrome
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  // firefox
+  &[type='number'] {
+    appearance: textfield;
+  }
 
   &:not(:focus) {
     &::-webkit-input-placeholder {
@@ -41,8 +67,7 @@
   }
 
   &:focus,
-  &:not(:placeholder-shown),
-  &.error {
+  &:not(:placeholder-shown) {
     ~ .label {
       opacity: 0;
     }
@@ -67,6 +92,10 @@
   }
 
   &.error {
+    ~ .label {
+      color: #fc174d;
+    }
+
     ~ .fieldset {
       border-color: #fc174d;
 
@@ -75,31 +104,21 @@
       }
     }
   }
-
-  &.default {
-    padding-top: 13px;
-    padding-bottom: 13px;
-  }
-
-  &.small {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
 }
 
 .label {
+  pointer-events: none;
+
   position: absolute;
   top: 50%;
-  left: 13px;
   transform: translateY(-50%);
-
-  z-index: -1;
 }
 
 .fieldset {
   min-width: 0;
   margin: 0;
   padding: 0 13px;
+  pointer-events: none;
 
   position: absolute;
   /* TODO: variables */
@@ -110,8 +129,6 @@
 
   border: 1px solid #0000003b;
   border-radius: 4px;
-
-  z-index: -1;
 }
 
 .legend,
@@ -125,6 +142,7 @@
 .legend {
   opacity: 0;
   max-width: 0.01px;
+  height: 1em;
   padding: 0;
 
   color: #313635;

utils/vara-ui/src/components/input/input.tsx

@@ -1,22 +1,58 @@
-import { InputHTMLAttributes, ReactNode, forwardRef, useId } from 'react';
+import {
+  InputHTMLAttributes,
+  ReactNode,
+  forwardRef,
+  useId,
+  FunctionComponent,
+  SVGProps,
+  useState,
+  useEffect,
+} from 'react';
 import cx from 'clsx';
-import styles from './input.module.css';
+import styles from './input.module.scss';
 
 type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> & {
+  icon?: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
   size?: 'default' | 'small';
   label?: string;
   error?: ReactNode;
 };
 
+function useWidth() {
+  const [width, setWidth] = useState(0);
+  const id = useId();
+
+  useEffect(() => {
+    // not using ref to obatain node, cuz forwardRef for svg disabled in svgr by default
+    const node = document.getElementById(id);
+
+    if (!node) return;
+
+    setWidth(node.getBoundingClientRect().width);
+  }, [id]);
+
+  return [width, id] as const;
+}
+
 const Input = forwardRef<HTMLInputElement, Props>(
-  ({ className, label, error, type = 'text', placeholder = ' ', size = 'default', ...attrs }, ref) => {
+  ({ icon: Icon, className, label, error, type = 'text', placeholder = ' ', size = 'default', ...attrs }, ref) => {
     const { disabled } = attrs;
 
     const id = useId();
 
+    // TODO: find a better way to display icon
+    // input, label and fieldset should have the same parent to detect input's state,
+    // therefore label requires position absolute
+    const [iconWidth, iconId] = useWidth();
+    const padding = 14;
+    const gap = 8;
+    const labelStyle = { left: `${iconWidth ? padding + gap + iconWidth : padding}px` };
+
     return (
       <div className={cx(styles.root, className, disabled && styles.disabled)}>
-        <div className={styles.base}>
+        <div className={cx(styles.base, styles[size])}>
+          {Icon && <Icon id={iconId} />}
+
           <input
             type={type}
             id={id}
@@ -27,7 +63,7 @@ const Input = forwardRef<HTMLInputElement, Props>(
           />
 
           {label && (
-            <label htmlFor={id} className={cx(styles.label, styles[size])}>
+            <label htmlFor={id} className={cx(styles.label, styles[size])} style={labelStyle}>
               {label}
             </label>
           )}

utils/vara-ui/src/components/modal/index.ts

@@ -1,5 +1,5 @@
 import { Modal, ModalProps } from './modal';
-import modalStyles from './modal.module.css';
+import modalStyles from './modal.module.scss';
 
 export { Modal, modalStyles };
 export type { ModalProps };

utils/vara-ui/src/components/modal/modal.tsx

@@ -4,7 +4,7 @@ import cx from 'clsx';
 
 import { ReactComponent as CrossSVG } from '../../assets/images/cross.svg';
 import { Button } from '../button';
-import styles from './modal.module.css';
+import styles from './modal.module.scss';
 
 type Props = {
   heading: string;

utils/vara-ui/src/components/radio/index.ts

@@ -1,5 +1,5 @@
 import { Radio, RadioProps } from './radio';
-import radioStyles from './radio.module.css';
+import radioStyles from './radio.module.scss';
 
 export { Radio, radioStyles };
 export type { RadioProps };

utils/vara-ui/src/components/radio/radio.tsx

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes, forwardRef } from 'react';
 import cx from 'clsx';
-import styles from './radio.module.css';
+import styles from './radio.module.scss';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label: string;

utils/vara-ui/src/components/select/index.ts

@@ -1,5 +1,5 @@
 import { Select, SelectProps } from './select';
-import selectStyles from './select.module.css';
+import selectStyles from './select.module.scss';
 
 export { Select, selectStyles };
 export type { SelectProps };