@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/input-field/components/stepper.tsx

@@ -0,0 +1,64 @@
+import { Margin, Padding, Surface, Icons } from '@foundations'
+import { FC } from '@helpers'
+import { Center } from 'components/layout'
+import styled from 'styled-components'
+
+const Controls = styled.div`
+  height: 34px;
+  width: 26px;
+  padding: ${Padding.xxxs} ${Padding.xxxs};
+  box-sizing: border-box;
+
+  :hover {
+    cursor: pointer;
+  }
+`
+
+const Up = styled(Center)`
+  background: ${Surface.Neutral.Default};
+  width: 22px;
+  height: 14px;
+  border-radius: 3px;
+  margin-bottom: ${Margin.xxxs};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: ${Margin.xxs}; /* @TODO Check if keep Margin size4 or go back to last size8 one */
+`
+
+const TriangleUp = styled.div`
+  width: 0px;
+  height: 0px;
+  border-left: 3.5px solid transparent;
+  border-right: 3.5px solid transparent;
+  border-bottom: 3.5px solid ${Icons.Default};
+`
+
+const TriangleDown = styled.div`
+  width: 0px;
+  height: 0px;
+  border-left: 3.5px solid transparent;
+  border-right: 3.5px solid transparent;
+  border-top: 3.5px solid ${Icons.Default};
+`
+
+const Down = styled(Center)`
+  background: ${Surface.Neutral.Default};
+  width: 22px;
+  height: 14px;
+  border-radius: 3px;
+`
+
+interface IStepperProps {
+  onUpClick?: () => void
+  onDownClick?: () => void
+}
+
+export const Stepper: FC<IStepperProps> = (props: IStepperProps) => {
+  return (
+    <Controls>
+      <Up onClick={props.onUpClick}><TriangleUp /></Up>
+      <Down onClick={props.onDownClick}><TriangleDown /></Down>
+    </Controls>
+  )
+}

package/src/lib/components/input-field/index.ts

@@ -0,0 +1,6 @@
+// the html input
+export * from './input-field'
+
+// the simple inputs
+export * from './input-number'
+export * from './input-text'

package/src/lib/components/input-field/input-field.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InputField } from './index'
+
+describe('InputField', () => {
+  describe('the inner input element', () => {
+    it('should receive nice html props', async () => {
+      render(
+        <InputField
+          value="value"
+          onChange={() => undefined}
+          type="text"
+          label="Label"
+          placeholder="placeholder"
+        />
+      )
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('placeholder')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('value')).toBeInTheDocument()
+    })
+
+    it('should call the onChange callback on change events', async () => {
+      const handleChange = jest.fn()
+
+      render(<InputField value="value" onChange={handleChange} />)
+
+      await userEvent.type(screen.getByRole('textbox'), 'hello')
+
+      expect(handleChange).toHaveBeenCalledTimes(5)
+    })
+  })
+
+  describe('Label', () => {
+    it('should render when given', async () => {
+      render(<InputField label="Label" />)
+
+      expect(screen.getByLabelText('Label')).toBeInTheDocument()
+    })
+
+    it('should not render when not given', async () => {
+      render(<InputField />)
+
+      expect(screen.queryByLabelText('Label')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Prefix', () => {
+    it('should render when given', async () => {
+      render(<InputField prefix="$" />)
+
+      expect(screen.getByText('$')).toBeInTheDocument()
+    })
+
+    it('should not render when not given', async () => {
+      render(<InputField />)
+
+      expect(screen.queryByText('$')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Suffix', () => {
+    it('should render when given', async () => {
+      render(<InputField suffix="%" />)
+
+      expect(screen.getByText('%')).toBeInTheDocument()
+    })
+
+    it('should not render when not given', async () => {
+      render(<InputField />)
+
+      expect(screen.queryByText('&')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Slots', () => {
+    it('should render the Icon slot', async () => {
+      render(
+        <InputField>
+          <InputField.Icon>Icon</InputField.Icon>
+        </InputField>
+      )
+
+      expect(screen.getByText('Icon')).toBeInTheDocument()
+    })
+
+    it('should render the Controls slot', async () => {
+      render(
+        <InputField>
+          <InputField.Controls>Controls</InputField.Controls>
+        </InputField>
+      )
+
+      expect(screen.getByText('Controls')).toBeInTheDocument()
+    })
+
+    it('should not render other kinds of children', () => {
+      render(
+        <InputField>
+          <div>Other Children</div>
+        </InputField>
+      )
+
+      expect(screen.queryByText('Other Children')).not.toBeInTheDocument()
+    })
+  })
+})

package/src/lib/components/input-field/input-field.tsx

@@ -0,0 +1,154 @@
+import styled, { css } from 'styled-components'
+import { InputHTMLAttributes } from 'react'
+
+import { Borders, Focused, Margin, Padding, Surface, Typography, _Typography } from '@foundations'
+import { getSlot, Slot, is, forwardRef, If, isDefined, isEmpty } from '@helpers'
+import { Flex, SpaceBetween } from '../layout'
+
+import { LabeledInput } from './components'
+import { Label } from 'components/typography'
+import { labelPositionType } from 'components/select/types'
+
+const FancyBorder = styled(SpaceBetween)<{ invalid?: boolean }>`
+  background: ${({ invalid }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default };
+  border: 1px solid ${({ invalid }) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default  };
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding-left: ${Padding.s};
+
+  user-select: none;
+  outline-offset: -2px;
+
+  ${({ invalid }) => !is(invalid) && css`
+    :focus, :focus-within, :active {
+      outline: 2px solid ${Focused.Default}
+    }
+  `}
+}
+`
+
+const InputLayout = styled(Flex)`
+  width: 100%;
+`
+
+export const HTMLInput = styled.input`
+  all: unset;
+
+  cursor: auto;
+  padding: ${Padding.none} ${Padding.none} ${Padding.xs} ${Padding.none};
+
+  width: 100%;
+
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: ${Margin.none};
+  }
+
+  ${Typography.Body}
+
+  ::placeholder {
+    ${_Typography.LightText}
+  }
+`
+
+const PrefixFrame = styled(Label)`
+  margin-right: ${Margin.xs};
+`
+
+const SuffixFrame = styled(Label)`
+  margin-right: ${Margin.xs};
+`
+
+class IconSlot extends Slot {}
+class ControlsSlot extends Slot {}
+
+export type InputFieldSlots = {
+  Icon: typeof IconSlot,
+  Controls: typeof ControlsSlot,
+  Label: typeof LabeledInput,
+}
+
+interface IInputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  invalid?: boolean
+  prefix?: string
+  suffix?: string
+  label?: string
+  labelPosition?: string
+}
+
+const InputFrame = styled.label<{label?: string, labelPosition?: string}>`
+  width: 100%;
+  padding: ${Padding.xs} ${Padding.none} ${Padding.none} ${Padding.none};
+  display: flex;
+  flex-direction: ${({label, labelPosition}) =>
+    isDefined(label)
+    && !isEmpty(label)
+    && labelPosition === labelPositionType.SIDE ? 'row' : 'column'};
+
+  ${({label, labelPosition}) =>
+    isDefined(label)
+    && !isEmpty(label)
+    && labelPosition === labelPositionType.SIDE && css`
+      width: fit-content;
+      white-space: pre;
+  `}
+`
+
+const ControlsFrame = styled(Flex)`
+  margin-right: ${Margin.s};
+`
+
+const InputLabel = styled(Label)<{labelPosition?: string}>`
+  margin-bottom: ${Margin.xxs};
+  ${({labelPosition}) =>
+    labelPosition === labelPositionType.SIDE && css`
+      padding-right: ${Padding.xs};
+  `}
+`
+
+export const InputField = forwardRef<
+  HTMLInputElement,
+  IInputFieldProps,
+  InputFieldSlots
+>((props: IInputFieldProps, ref) => {
+  const {
+    children,
+    prefix,
+    suffix,
+    label,
+    className,
+    style,
+    labelPosition = labelPositionType.TOP,
+    ...inputProps } = props
+  const icon = getSlot(IconSlot, children)
+  const controls = getSlot(ControlsSlot, children)
+  const required = is(props.required) ? '*' : ''
+
+  return (
+    <FancyBorder invalid={props.invalid} className={className} style={style}>
+      <InputFrame label={label} labelPosition={labelPosition}>
+        <If is={label}>
+          <InputLabel labelPosition={labelPosition} subtle subdued>
+            {label}
+            {required}
+          </InputLabel>
+        </If>
+        <InputLayout>
+          <If is={prefix}>
+            <PrefixFrame subtle subdued>{prefix}</PrefixFrame>
+          </If>
+          <HTMLInput ref={ref} {...inputProps} />
+          <If is={suffix}>
+            <SuffixFrame subtle subdued>{suffix}</SuffixFrame>
+          </If>
+        </InputLayout>
+      </InputFrame>
+      <If is={icon}><ControlsFrame center>{icon}</ControlsFrame></If>
+      <If is={controls}><ControlsFrame center>{controls}</ControlsFrame></If>
+    </FancyBorder>
+  )
+})
+
+InputField.Icon = IconSlot
+InputField.Controls = ControlsSlot
+InputField.Label = LabeledInput

package/src/lib/components/input-field/input-number.tsx

@@ -0,0 +1,41 @@
+import { FC, isNil } from '@helpers'
+import { InputField, InputFieldSlots } from './input-field'
+import { Stepper } from './components'
+
+interface IInputNumberProps {
+  value?: number
+  onChange: (change?: number) => void
+
+  label?: string
+  placeholder?: string
+  invalid?: boolean
+  prefix?: string
+  suffix?: string
+  required?: boolean
+}
+
+type IInputNumberSlots = InputFieldSlots & {
+  Stepper: typeof Stepper
+}
+
+export const InputNumber: FC<IInputNumberProps, IInputNumberSlots> = (props) => {
+  const { onChange, value, ...inputFieldProps } = props
+
+  return (
+    <InputField 
+      type='number'
+      value={isNil(value) || isNaN(value) ? '' : value}
+      onChange={(e) => {
+        const next = e.target.value === '' ? undefined : parseFloat(e.target.value)
+
+        onChange(next)
+      }}
+      {...inputFieldProps}
+    />
+  )
+}
+
+InputNumber.Icon = InputField.Icon
+InputNumber.Controls = InputField.Controls
+InputNumber.Label = InputField.Label
+InputNumber.Stepper = Stepper

package/src/lib/components/input-field/input-text.tsx

@@ -0,0 +1,30 @@
+import { FC } from '@helpers'
+import { InputField, InputFieldSlots } from './input-field'
+
+interface IInputTextProps {
+  value: string
+  onChange: (change: string) => void
+
+  label?: string
+  invalid?: boolean
+  placeholder?: string
+  prefix?: string
+  suffix?: string
+  required?: boolean
+}
+
+export const InputText: FC<IInputTextProps, InputFieldSlots> = (props) => {
+  const { onChange, ...inputFieldProps } = props
+
+  return (
+    <InputField 
+      type='text'
+      onChange={(e) => onChange(e.target.value)}
+      {...inputFieldProps}
+    />
+  )
+}
+
+InputText.Icon = InputField.Icon
+InputText.Controls = InputField.Controls
+InputText.Label = InputField.Label