@toptal/picasso-outlined-input 1.1.5 → 2.0.0

package/src/OutlinedInput/stylesRoot.test.ts

@@ -0,0 +1,195 @@
+import type { FieldLayout } from '@toptal/picasso-form'
+
+import {
+  getRootClassName,
+  spacingBySize,
+  heightClasses,
+  fontColorClass,
+  cursorClass,
+  bgClasses,
+  widthClasses,
+  rootBasicClasses,
+} from './stylesRoot'
+import type { WidthType, Size } from './types'
+
+describe('getRootClassName', () => {
+  const baseProps = {
+    isDark: false,
+    layout: 'vertical' as FieldLayout,
+    isError: false,
+    size: 'medium' as Size,
+    width: 'auto' as WidthType,
+  }
+
+  describe('when determining spacing by size', () => {
+    it.each([
+      ['small', spacingBySize.small],
+      ['medium', spacingBySize.medium],
+      ['large', spacingBySize.large],
+    ])(
+      'returns the correct spacing class for size "%s"',
+      (size, expectedClass) => {
+        const result = getRootClassName({ ...baseProps, size: size as Size })
+
+        expect(result).toContain(expectedClass)
+      }
+    )
+  })
+
+  describe('when determining height classes', () => {
+    describe('when multiline is false', () => {
+      it.each([
+        ['small', heightClasses.singleline.small],
+        ['medium', heightClasses.singleline.medium],
+        ['large', heightClasses.singleline.large],
+      ])(
+        'returns the correct height class for singleline "%s"',
+        (size, expectedClass) => {
+          const result = getRootClassName({
+            ...baseProps,
+            multiline: false,
+            size: size as Size,
+          })
+
+          expect(result).toContain(expectedClass)
+        }
+      )
+    })
+
+    describe('when multiline is true', () => {
+      it('returns the correct class for multiline', () => {
+        const result = getRootClassName({ ...baseProps, multiline: true })
+
+        expect(result).toContain(heightClasses.multiline)
+      })
+    })
+  })
+
+  describe('when determining width classes', () => {
+    describe('when layout is horizontal', () => {
+      it('returns the correct width class for horizontal layout', () => {
+        const result = getRootClassName({ ...baseProps, layout: 'horizontal' })
+
+        expect(result).toContain(widthClasses.horizontal)
+      })
+    })
+
+    it.each([
+      ['full', widthClasses.full],
+      ['shrink', widthClasses.shrink],
+      ['auto', widthClasses.auto],
+    ])('returns the correct width class for "%s"', (width, expectedClass) => {
+      const result = getRootClassName({
+        ...baseProps,
+        width: width as WidthType,
+      })
+
+      expect(result).toContain(expectedClass)
+    })
+  })
+
+  describe('when determining background color classes', () => {
+    describe('when input is disabled', () => {
+      it('returns the correct bg class for disabled', () => {
+        const result = getRootClassName({ ...baseProps, disabled: true })
+
+        expect(result).toContain(bgClasses.disabled)
+      })
+    })
+
+    describe('when in dark mode', () => {
+      it('returns the correct bg class for dark mode', () => {
+        const result = getRootClassName({ ...baseProps, isDark: true })
+
+        expect(result).toContain(bgClasses.dark)
+      })
+    })
+
+    describe('when highlight is "autofill"', () => {
+      it('returns the correct bg class for highlight "autofill"', () => {
+        const result = getRootClassName({ ...baseProps, highlight: 'autofill' })
+
+        expect(result).toContain(bgClasses.highlight)
+      })
+    })
+
+    describe('in the default case', () => {
+      it('returns the default bg class', () => {
+        const result = getRootClassName(baseProps)
+
+        expect(result).toContain(bgClasses.default)
+      })
+    })
+  })
+
+  describe('when determining border pseudo element classes', () => {
+    // Example only, needs additional detail on how it is structured
+    it('returns correct classes for default state', () => {
+      const result = getRootClassName(baseProps)
+
+      expect(result).toContainEqual(expect.arrayContaining(rootBasicClasses))
+    })
+
+    describe('when input is disabled', () => {
+      it('returns correct classes for disabled state', () => {
+        const result = getRootClassName({ ...baseProps, disabled: true })
+
+        expect(result).toContainEqual(expect.arrayContaining(rootBasicClasses))
+      })
+    })
+
+    describe('when there is an error', () => {
+      it('returns correct classes for error state', () => {
+        const result = getRootClassName({ ...baseProps, isError: true })
+
+        expect(result).toContainEqual(expect.arrayContaining(rootBasicClasses))
+      })
+    })
+
+    describe('when determining text color classes', () => {
+      describe('when input is disabled', () => {
+        it('returns correct text color class for disabled state', () => {
+          const result = getRootClassName({ ...baseProps, disabled: true })
+
+          expect(result).toContain(fontColorClass.disabled)
+        })
+      })
+
+      describe('in the default case', () => {
+        it('returns correct text color class for default state', () => {
+          const result = getRootClassName(baseProps)
+
+          expect(result).toContain(fontColorClass.default)
+        })
+      })
+    })
+
+    describe('when determining cursor classes', () => {
+      describe('when input is disabled', () => {
+        it('returns correct cursor class for disabled state', () => {
+          const result = getRootClassName({ ...baseProps, disabled: true })
+
+          expect(result).toContain(cursorClass.disabled)
+        })
+      })
+
+      describe('in the default case', () => {
+        it('returns correct cursor class for default state', () => {
+          const result = getRootClassName(baseProps)
+
+          expect(result).toContain(cursorClass.default)
+        })
+      })
+    })
+
+    describe('when determining visibility based on input type', () => {
+      describe('when type is "hidden"', () => {
+        it('returns "hidden" class for input type hidden', () => {
+          const result = getRootClassName({ ...baseProps, type: 'hidden' })
+
+          expect(result).toContain('hidden')
+        })
+      })
+    })
+  })
+})

package/src/OutlinedInput/stylesRoot.ts

@@ -0,0 +1,217 @@
+/* eslint-disable max-lines */
+import type { FieldLayout } from '@toptal/picasso-form'
+
+import type { WidthType, Size, Props } from './types'
+
+export const spacingBySize: Record<Size, string> = {
+  small: 'py-1 px-[0.625rem]',
+  medium: 'p-2',
+  large: 'p-3',
+}
+
+export const heightClasses = {
+  singleline: {
+    small: 'h-6',
+    medium: 'h-8',
+    large: 'h-12',
+  } as Record<Size, string>,
+  multiline: 'h-auto',
+} as const
+
+export const fontColorClass = {
+  default: 'text-black',
+  disabled: 'text-gray-500',
+}
+
+export const cursorClass = {
+  default: 'cursor-[inherit]',
+  disabled: 'cursor-default',
+}
+
+export const bgClasses = {
+  disabled: 'bg-gray-100',
+  dark: 'bg-[#081237]',
+  highlight: 'bg-yellow-100/60',
+  default: 'bg-white',
+}
+
+export const widthClasses: Record<WidthType | FieldLayout, string> = {
+  full: 'w-full',
+  shrink: 'w-auto',
+  auto: 'w-[18.75rem]',
+  horizontal: 'w-full',
+  vertical: '',
+}
+
+export const borderPseudoCoreClasses = [
+  'after:content-[""]',
+  'after:inline-block',
+  'after:absolute',
+
+  'after:top-0',
+  'after:bottom-0',
+  'after:right-0',
+  'after:left-0',
+
+  'after:pointer-events-none',
+
+  'after:border-solid',
+  'after:rounded-sm',
+]
+
+export const borderPseudoClassesByState = {
+  borderColor: {
+    dark: '',
+    default: [
+      'after:border-gray-400',
+      '[&:has(input:focus)]:after:border-blue-500',
+    ],
+    disabled: 'after:border-gray-200',
+    error: [
+      'after:border-red-500',
+      '[&:has(input:focus)]:after:border-red-500',
+    ],
+    hoverWithoutFocus: 'hover:[&:not(:has(input:focus))]:after:border-gray-600',
+  },
+  border: {
+    dark: 'after:border-none',
+    default: 'after:border',
+    disabled: '',
+    error: '',
+  },
+  shadow: {
+    dark: '[&:has(input:focus)]:after:shadow-0',
+    default: [
+      '[&:has(input:focus)]:after:shadow-[0_0_0_3px]',
+      '[&:has(input:focus)]:after:shadow-blue-500/[.48]',
+    ],
+    disabled: '',
+    error: [
+      '[&:has(input:focus)]:after:shadow-[0_0_0_3px]',
+      '[&:has(input:focus)]:after:shadow-red-500/[.48]',
+    ],
+  },
+}
+
+export const rootBasicClasses = [
+  'relative',
+  'text-black',
+  'inline-flex',
+  'gap-y-1',
+  'gap-x-2',
+  'items-center',
+  'rounded-sm',
+  '[font-size:_unset]',
+  'hover:[&_.resetButtonDirty]:visible',
+]
+
+export const getHeightClasses = ({
+  size,
+  multiline,
+}: {
+  size: Size
+  multiline: boolean | undefined
+}) => (multiline ? heightClasses.multiline : heightClasses.singleline[size])
+
+export const getWidthClasses = ({
+  width,
+  layout,
+}: {
+  width: WidthType
+  layout: FieldLayout
+}) => (layout === 'horizontal' ? widthClasses.horizontal : widthClasses[width])
+
+export const getBackgroundColorClasses = ({
+  isDark,
+  disabled,
+  highlight,
+}: {
+  isDark: boolean
+  disabled: boolean | undefined
+  highlight: string | undefined
+}) => {
+  if (disabled) {
+    return bgClasses.disabled
+  }
+
+  if (isDark) {
+    return bgClasses.dark
+  }
+
+  if (highlight === 'autofill') {
+    return bgClasses.highlight
+  }
+
+  return bgClasses.default
+}
+
+const getTextColorClass = (disabled: boolean | undefined) =>
+  disabled ? fontColorClass.disabled : fontColorClass.default
+
+const getCursorClass = (disabled: boolean | undefined) =>
+  disabled ? cursorClass.disabled : cursorClass.default
+
+type State = 'default' | 'disabled' | 'error' | 'dark'
+type StateConditions = Partial<Record<State, boolean>> & {
+  isDark: boolean
+  isError: boolean
+}
+
+const getClassForState = (
+  state: State,
+  { borderColor, border, shadow }: typeof borderPseudoClassesByState
+) => {
+  return [
+    borderColor[state] || borderColor.default,
+    border[state] || border.default,
+    shadow[state] || shadow.default,
+  ]
+}
+
+const borderPseudoElement = (conditions: StateConditions) => {
+  const { disabled, isDark, isError } = conditions
+  const { borderColor } = borderPseudoClassesByState
+  const primaryState = isError
+    ? 'error'
+    : disabled
+    ? 'disabled'
+    : isDark
+    ? 'dark'
+    : 'default'
+
+  const hoverClass = !disabled && !isError ? borderColor.hoverWithoutFocus : ''
+
+  return [
+    borderPseudoCoreClasses,
+    getClassForState(primaryState, borderPseudoClassesByState),
+    hoverClass,
+  ]
+}
+
+export const getRootClassName = ({
+  size,
+  width,
+  type,
+  layout,
+  isDark,
+  multiline,
+  highlight,
+  disabled,
+  isError,
+}: Partial<Props> & {
+  isDark: boolean
+  layout: FieldLayout
+  isError: boolean
+  size: Size
+  width: WidthType
+}) => [
+  rootBasicClasses,
+  spacingBySize[size],
+  getHeightClasses({ size, multiline }),
+  getWidthClasses({ width, layout }),
+  getBackgroundColorClasses({ isDark, disabled, highlight }),
+  borderPseudoElement({ isDark, disabled, isError }),
+  getTextColorClass(disabled),
+  getCursorClass(disabled),
+  type === 'hidden' && 'hidden',
+]

package/src/OutlinedInput/types.ts

@@ -0,0 +1,87 @@
+import type {
+  ChangeEventHandler,
+  ReactType,
+  ReactNode,
+  InputHTMLAttributes,
+  MouseEvent,
+} from 'react'
+import type { SizeType, BaseProps } from '@toptal/picasso-shared'
+// TODO: replace with mui/base
+import type { InputBaseComponentProps } from '@material-ui/core/InputBase'
+
+export type WidthType = 'full' | 'shrink' | 'auto'
+
+export type Size = SizeType<'small' | 'medium' | 'large'>
+
+export type ValueType =
+  | (string | number | boolean | object)[]
+  | string
+  | number
+  | boolean
+  | object
+
+export type Status = 'error' | 'success' | 'default'
+
+export type BaseInputProps = InputBaseComponentProps & {
+  variant?: 'dark' | 'light'
+}
+
+export interface InputProps
+  extends React.HTMLAttributes<HTMLInputElement>,
+    BaseProps {
+  size?: number | 'small' | 'medium' | 'large'
+  multiple?: boolean | undefined
+}
+
+export interface Props
+  extends BaseProps,
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      'value' | 'defaultValue' | 'size' | 'color'
+    > {
+  /** Classes for input and root */
+  classes?: { input?: string; root?: string }
+  /** Width of the component */
+  width?: WidthType
+  inputComponent?: ReactType<InputBaseComponentProps>
+  inputProps?: BaseInputProps
+  defaultValue?: ValueType
+  value?: ValueType
+  /** Whether `Input` should be rendered as `TextArea` or not */
+  multiline?: boolean
+  /** If true, `TextArea` would be resizable vertical */
+  multilineResizable?: boolean
+  /** If true, the input element will be focused during the first mount */
+  autoFocus?: boolean
+  /** Specify rows amount for `TextArea` */
+  rows?: string | number
+  /* Maximum number of rows to display when multiline option is set to true. */
+  rowsMax?: string | number
+  /** Type attribute of the Input element. It should be a valid HTML5 input type */
+  type?: string
+  /**
+   * @deprecated [FX-4715] Use the `status` prop instead to both support success and error states
+   * Indicate whether input is in error state
+   */
+  error?: boolean
+  /** Indicate input status */
+  status?: Status
+  startAdornment?: ReactNode
+  endAdornment?: ReactNode
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  /** Component size */
+  size?: Size
+  /** Whether to render reset icon when there is a value in the input */
+  enableReset?: boolean
+  /** Callback invoked when reset button was clicked */
+  onResetClick?: (
+    event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>
+  ) => void
+  /** Ref of the input element */
+  inputRef?: React.Ref<HTMLInputElement>
+  testIds?: {
+    resetButton?: string
+    validIcon?: string
+  }
+  highlight?: 'autofill'
+}

package/src/OutlinedInput/utils.ts

@@ -0,0 +1,2 @@
+export const getRows = (rows: number | string | undefined) =>
+  typeof Number(rows) === 'number' ? Number(rows) : undefined

package/dist-package/src/OutlinedInput/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, sizes: { input } }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "focused" | "error" | "notchedOutline" | "input" | "inputMultiline" | "hidden" | "rootSmall" | "rootMedium" | "rootLarge" | "rootFull" | "rootShrink" | "rootAuto" | "inputSmall" | "inputMedium" | "inputLarge" | "resetButton" | "resetButtonDirty" | "rootDark" | "notchedOutlineDark" | "inputDark" | "highlightAutofill" | "horizontalLayout">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/OutlinedInput/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;wDAwFN,KAAK;AAApD,wBA8FI"}

package/dist-package/src/OutlinedInput/styles.js

@@ -1,157 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { darken, outline, alpha } from '@toptal/picasso-shared';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ palette, sizes: { input, borderRadius } }) => ({
-    MuiOutlinedInput: {
-        root: {
-            width: input.width,
-            color: palette.common.black,
-            '& $notchedOutline': {
-                borderColor: palette.grey.light2,
-                borderRadius: borderRadius.small,
-                top: 0,
-                '& legend': {
-                    height: 0,
-                },
-            },
-            '&$focused': {
-                '& $notchedOutline': Object.assign({ borderWidth: '1px', borderColor: palette.blue.main }, outline(palette.primary.main)),
-            },
-            '&$disabled': {
-                '& $notchedOutline': {
-                    borderColor: palette.grey.lighter2,
-                },
-                backgroundColor: palette.grey.lighter,
-                color: palette.grey.main,
-            },
-            '&:hover:not($disabled)': {
-                '&:not($error)&:not($focused) $notchedOutline': {
-                    borderColor: palette.grey.main2,
-                },
-            },
-        },
-        input: {
-            display: 'flex',
-            alignItems: 'center',
-            boxSizing: 'border-box',
-            height: '100%',
-            padding: 0,
-            border: 'none',
-            '&::placeholder': {
-                color: palette.grey.main2,
-                opacity: 1,
-            },
-            '&$disabled': {
-                color: palette.grey.main2,
-                // On Safari the text gets a bit lighter as if it had some transparency applied to it
-                // We need this webkit-specific property to achieve the exact font color
-                '-webkit-text-fill-color': palette.grey.main2,
-                '&::placeholder': {
-                    color: palette.grey.main2,
-                    opacity: 1,
-                },
-            },
-        },
-        inputMultiline: {
-            padding: 0,
-        },
-        multiline: {
-            padding: 0,
-        },
-        error: {
-            backgroundColor: 'transparent',
-            color: palette.common.black,
-            '&$focused': {
-                '& $notchedOutline': Object.assign({ borderWidth: '1px', borderColor: palette.red.main }, outline(palette.red.main)),
-            },
-        },
-    },
-}));
-export default ({ palette, sizes: { input } }) => createStyles({
-    root: {
-        cursor: 'inherit',
-        gap: '0.25rem 0.5rem',
-        '&:hover': {
-            '& $resetButtonDirty': {
-                visibility: 'visible',
-            },
-            '& $notchedOutline$notchedOutlineDark': Object.assign({}, outline(palette.common.white)),
-        },
-        '&$focused': {
-            '& $notchedOutline$notchedOutlineDark': Object.assign({}, outline(palette.common.white)),
-        },
-        '&$error': {
-            backgroundColor: palette.common.white,
-        },
-    },
-    hidden: {
-        display: 'none',
-    },
-    rootSmall: {
-        padding: '0.25rem 0.625rem',
-        height: '1.5rem',
-    },
-    rootMedium: {
-        padding: input.padding,
-        height: input.height,
-    },
-    rootLarge: {
-        padding: '0.75rem',
-        height: '3rem',
-    },
-    rootFull: {
-        width: '100%',
-    },
-    rootShrink: {
-        width: 'auto',
-    },
-    rootAuto: {},
-    focused: {},
-    input: {
-        cursor: 'inherit',
-        '&:focus + $resetButtonDirty': {
-            visibility: 'visible',
-        },
-    },
-    inputSmall: {
-        fontSize: '0.75rem',
-        lineHeight: '1rem',
-    },
-    inputMedium: {
-        fontSize: '0.875rem',
-        lineHeight: '1rem',
-    },
-    inputLarge: {
-        fontSize: '1rem',
-        lineHeight: '1rem',
-    },
-    inputMultiline: {},
-    resetButton: {
-        visibility: 'hidden',
-    },
-    resetButtonDirty: {},
-    rootDark: {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        backgroundColor: `${darken(palette.blue.darker, 0.5)} !important`,
-    },
-    notchedOutline: {},
-    notchedOutlineDark: {
-        border: 'none',
-    },
-    inputDark: {
-        color: palette.common.white,
-        '&::placeholder': {
-            color: palette.common.white,
-            opacity: 0.64,
-        },
-    },
-    highlightAutofill: {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        backgroundColor: alpha(palette.yellow.lighter, 0.6),
-    },
-    horizontalLayout: {
-        width: '100%',
-    },
-    error: {},
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/OutlinedInput/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/OutlinedInput/styles.ts"],"names":[],"mappings":"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"}

package/dist-package/src/styles.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":""}

package/dist-package/src/styles.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":""}