@edvisor/product-language 0.10.2 → 0.10.4

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

@@ -1,64 +0,0 @@
-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

@@ -1,6 +0,0 @@
-// 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

@@ -1,107 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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