@edvisor/product-language 0.1.1 → 0.3.0

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

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

@@ -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,126 @@
+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

@@ -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

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

@@ -0,0 +1,327 @@
+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,
+      },
+    }}
+  />
+)