@edvisor/product-language 0.3.0 → 0.3.1

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

@@ -1,60 +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;
-`
-
-const Up = styled(Center)`
-  background: ${Surface.Neutral.Default};
-  width: 22px;
-  height: 14px;
-  border-radius: 3px 3px 0px 0px;
-  margin-bottom: ${Margin.xxxs};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: ${Margin.xs}
-`
-
-const TriangleUp = styled.div`
-  width: 0px;
-  height: 0px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid ${Icons.Default};
-`
-
-const TriangleDown = styled.div`
-  width: 0px;
-  height: 0px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid ${Icons.Default};
-`
-
-const Down = styled(Center)`
-  background: ${Surface.Neutral.Default};
-  width: 22px;
-  height: 14px;
-  border-radius: 0px 0px 3px 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,126 +0,0 @@
-import styled from 'styled-components'
-import { InputHTMLAttributes } from 'react'
-
-import { Borders, Focused, Margin, Padding, Surface, Typography, _Typography } from '@foundations'
-import { getSlot, Slot, is, forwardRef, If } from '@helpers'
-import { Flex, SpaceBetween } from '../layout'
-
-import { LabeledInput } from './components'
-import { Label } from 'components/typography'
-
-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;
-  margin-bottom: ${Margin.xxs};
-  padding-left: ${Padding.s};
-
-  user-select: none;
-
-  :focus, :focus-within, :active {
-    border: ${({ invalid }) => is(invalid) 
-      ? `1px solid ${Borders.Critical.Default}` 
-      : `2px solid ${Focused.Default}` 
-    };
-  }
-`
-
-const InputLayout = styled(Flex)`
-  width: 100%;
-`
-
-export const HTMLInput = styled.input`
-  all: unset;
-
-  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
-}
-
-const InputFrame = styled.label`
-  width: 100%;
-  padding: ${Padding.xs} ${Padding.none} ${Padding.none} ${Padding.none};
-  flex-direction: column;
-  display: flex;
-`
-
-const ControlsFrame = Flex
-
-const InputLabel = styled(Label)`
-  margin-bottom: ${Margin.xxs};
-`
-
-export const InputField = forwardRef<
-  HTMLInputElement,
-  IInputFieldProps,
-  InputFieldSlots
->((props: IInputFieldProps, ref) => {
-  const { children, prefix, suffix, label, className, ...inputProps } = props
-  const icon = getSlot(IconSlot, children)
-  const controls = getSlot(ControlsSlot, children)
-  const required = is(props.required) ? '*' : ''
-
-  return (
-    <FancyBorder invalid={props.invalid} className={className}>
-      <InputFrame>
-        <If is={label}>
-          <InputLabel subtle subdued>
-            {label}
-            {required}
-          </InputLabel>
-        </If>
-        <InputLayout>
-          {icon}
-          <If is={prefix}>
-            <PrefixFrame subtle subdued>{prefix}</PrefixFrame>
-          </If>
-          <HTMLInput ref={ref} {...inputProps} />
-          <If is={suffix}>
-            <SuffixFrame subtle subdued>{suffix}</SuffixFrame>
-          </If>
-        </InputLayout>
-      </InputFrame>
-      <ControlsFrame center>{controls}</ControlsFrame>
-    </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

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

@@ -1,327 +0,0 @@
-import styled from 'styled-components'
-import { useForm } from 'react-hook-form'
-
-import { SpaceBetween } from 'components/layout'
-import { InputField } from '../input-field'
-
-import { IconMinor } from 'components/icon'
-
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { InputNumber } from '../input-number'
-import { InputText } from '../input-text'
-
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [invalid, setInvalid] = useState(false);
-
-<form onSubmit={(e) => e.preventDefault()}>
-  <label htmlFor="country_code">Country code*</label>
-  {/* try replacing this element with an <input /> */}
-  <InputField 
-    // try setting the prefix, suffix, and invalid props
-    type="text" 
-    placeholder="Enter a country code..."
-    id="country_code"
-    name="country_code"
-    pattern="[A-Za-z]{3}"
-    onInvalid={setInvalid}
-    invalid={invalid}
-    onChange={() => setInvalid(false)}
-    title="Three letter country code"
-    required
-  />
-  <input type="submit"/>
-</form>  
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-      },
-    }}
-  />
-)
-
-export const InnerLabelExample = () => (
-  <Playground
-    code={`
-<InputField 
-  type="text" 
-  label="Country Code"
-  placeholder="Enter a country code..."
-/>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-      },
-    }}
-  />
-)
-
-export const ReactFormHookExample = () => (
-  <Playground
-    code={`
-const { register, formState: { errors }, handleSubmit } = useForm();
-const onSubmit = data => alert(data);
-  
-<form onSubmit={handleSubmit(onSubmit)}>
-  <InputField 
-    label="First name"
-    invalid={errors.firstName}
-    required
-    {...register("firstName", { required: true, maxLength: 20 })} 
-  />
-  <InputField 
-    label="Last name"
-    invalid={errors.lastName}
-    {...register("lastName", { pattern: /^[A-Za-z]+$/i })} 
-  />
-  <InputField 
-    label="Age"
-    type="number" 
-    invalid={errors.age}
-    {...register("age", { min: 18, max: 99 })} 
-    />
-  <input type="submit" />
-</form>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        useForm,
-      },
-    }}
-  />
-)
-
-export const SimpleInputExample = () => (
-  <Playground
-    code={`
-const [state, setState] = useState({ 
-  firstName: '', 
-  lastName: '', 
-  age: 18 
-});
-
-const onChange = (change) => setState({
-  ...state,
-  ...change
-});
-  
-<>
-  <InputText 
-    label="First name"
-    value={state.firstName} 
-    onChange={(firstName) => onChange({ firstName })} 
-  />
-  <InputText 
-    label="Last name"
-    value={state.lastName} 
-    onChange={(lastName) => onChange({ lastName })} 
-  />
-  <InputNumber 
-    label="Age"
-    value={state.age} 
-    onChange={(age) => onChange({ age })} 
-    required
-  />
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputNumber,
-        InputText,
-      },
-    }}
-  />
-)
-
-export const IconExample = () => (
-  <Playground
-    code={`
-<InputField 
-  label="Search"
-  type="text" 
-  prefix="🍺"
->
-  <InputField.Icon>
-    <IconMinor.FolderOpen title="Icons render before the input" />
-  </InputField.Icon>
-</InputField>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        IconMinor,
-      },
-    }}
-  />
-)
-
-export const ControlsExample = () => (
-  <Playground
-    code={`
-const [likes, setLikes] = useState(0);
-
-const onLike = () => setLikes(likes + 1);
-const onDislike = () => setLikes(Math.max(likes - 1, 0));
-
-<InputField 
-  label="Do you like this storybook?"
-  value={likes}
-  onChange={() => undefined}
-  type="number" 
-  suffix="🍺"
->
-  <InputField.Controls>
-    <SpaceBetween>
-      <div onClick={onLike}>️👍</div>
-      <div>/</div>
-      <div onClick={onDislike}>👎️</div>
-    </SpaceBetween>
-  </InputField.Controls>
-</InputField>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        IconMinor,
-        styled,
-        SpaceBetween,
-      },
-    }}
-  />
-)
-
-export const OuterLabelExample = () => (
-  <Playground
-    code={`
-const [value, setValue] = useState('');
-const [errors, setErrors] = useState([]);
-
-const handleChange = (change: string) => {
-  const errors = [];
-
-  if (!change) {
-    errors.push({ message: 'This field is required' });
-  }
-
-  if (!change.match(/[A-Za-z]{3}/)) {
-    errors.push({ message: 'Input was not a 3 letter country code' });
-  }
-
-  setValue(change);
-  setErrors(errors);
-}
-
-<InputText.Label
-  label="Country Code"
-  helpText="Please enter a 3 letter country code"
-  errors={errors}
->
-  <InputText 
-    value={value}
-    invalid={errors.length > 0}
-    placeholder="e.g. AUD"
-    onChange={handleChange}
-  />
-</InputText.Label>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputText,
-        IconMinor,
-      },
-    }}
-  />
-)
-
-export const StepperExample = () => (
-  <Playground
-    code={`
-const [age, setAge] = useState(0);
-const onUp = () => setAge(Math.min(age + 1, 99));
-const onDown = () => setAge(Math.max(age - 1, 0));
-const errors = []
-
-if (0 > age || age > 100) {
-  errors.push({ message: 'Please choose an age between 0 and 99' })
-}
-
-<form onSubmit={(e) => e.preventDefault()}>
-  <InputNumber.Label 
-    helpText='Age should be a number between 0 and 99'
-    errors={errors}
-  >
-    <InputNumber 
-      label='Age' 
-      onChange={setAge}
-      value={age}
-      invalid={errors.length > 0}
-      placeholder="Enter your age..."
-    >
-      <InputNumber.Controls>
-        <InputNumber.Stepper onUpClick={onUp} onDownClick={onDown} />
-      </InputNumber.Controls>
-    </InputNumber>
-  </InputNumber.Label>
-  <input type="submit"/>
-</form>  
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputNumber,
-        styled,
-      },
-    }}
-  />
-)
-
-export const AllDressedExample = () => (
-  <Playground
-    code={`
-<InputField.Label 
-  label='Price'
-  helpText='Enter a price in AUD'
-  errors={[{ message: 'Too many UI decorations!' }]}
->
-  <InputField 
-    type="number" 
-    label='Price' 
-    // prefix and suffix render immediately 
-    // before and after the input field
-    prefix="$"
-    suffix="AUD"
-    step={0.01}
-    min={0.00}
-    placeholder="Enter an amount..."
-  >
-    <InputField.Icon>
-      <IconMinor.CircleDollar title="Icons render before the input" />
-    </InputField.Icon>
-    <InputField.Controls>
-      <IconMinor.CircleDollar title="Controls render after the input" />
-    </InputField.Controls>
-  </InputField>
-</InputField.Label>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        IconMinor,
-      },
-    }}
-  />
-)