Merge pull request #191 from reapit/develop

Create Pull request for Resolve conflict

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "0.5.17",
+  "version": "0.5.19",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "main": "dist/index.js",
   "umd:main": "dist/elements.umd.production.js",
@@ -74,7 +74,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "rimraf": "^2.7.0",
-    "rollup": "^1.27.9",
+    "rollup": "1.27.13",
     "rollup-plugin-scss": "^1.0.2",
     "sass-loader": "^7.2.0",
     "style-loader": "^1.0.0",
@@ -86,7 +86,8 @@
     "tslint-config-prettier": "^1.18.0",
     "tslint-config-standard": "^8.0.1",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "3.7.2"
+    "typescript": "3.7.2",
+    "webpack": "4.41.3"
   },
   "dependencies": {
     "bulma": "^0.7.5",
@@ -97,6 +98,7 @@
     "jsonwebtoken": "^8.5.1",
     "pell": "^1.0.6",
     "prop-types": "^15.7.2",
+    "react-datasheet": "^1.4.0",
     "react-datepicker": "^2.9.6",
     "react-google-map": "^3.1.1",
     "react-google-maps-loader": "^4.2.5",

src/components/AcDynamicLinks/ac-dynamic-links.stories.tsx

@@ -144,7 +144,7 @@ export const dynamicLinkScenarios: DynamicLinkScenario[] = [
   }
 ]
 
-storiesOf('AcDynamicLinks', module).add('AcButtonsAndLinks', () => (
+storiesOf('DynamicLinks', module).add('DynamicButtonsAndLinks', () => (
   <Content>
     {dynamicLinkScenarios.map((scenario: DynamicLinkScenario, index: number) => (
       <Section key={index}>

src/components/Form/form.stories.tsx

@@ -24,7 +24,13 @@ export const FormExample: React.SFC = () => (
               <FormSection>
                 <FormHeading>Section One</FormHeading>
                 <FormSubHeading>Information about this section to help the user</FormSubHeading>
-                <Input id="text" type="text" placeholder="Some text here" name="text" labelText="Text" />
+                <Input
+                  id="text-1-section-1"
+                  type="text"
+                  placeholder="Some text here"
+                  name="text-1-section-1"
+                  labelText="Text"
+                />
                 <Input id="email" type="email" placeholder="[email protected]" name="email" labelText="Email" />
                 <Input id="tel" type="tel" placeholder="0800 800 800" name="tel" labelText="Telephone" />
               </FormSection>
@@ -36,7 +42,7 @@ export const FormExample: React.SFC = () => (
                   id="passwordConfirm"
                   type="password"
                   placeholder="********"
-                  name="password"
+                  name="passwordConfirm"
                   labelText="Password Confirm"
                 />
               </FormSection>
@@ -46,7 +52,13 @@ export const FormExample: React.SFC = () => (
               <FormSection>
                 <FormHeading>Section Three</FormHeading>
                 <FormSubHeading>Information about this section to help the user</FormSubHeading>
-                <Input id="text" type="text" placeholder="Some text here" name="text" labelText="Text" />
+                <Input
+                  id="text-1-section-3"
+                  type="text"
+                  placeholder="Some text here"
+                  name="text-1-section-3"
+                  labelText="Text"
+                />
                 <div className="control">
                   <label className="label">Label for editor</label>
                   <Editor
@@ -58,14 +70,14 @@ export const FormExample: React.SFC = () => (
                 </div>
               </FormSection>
               <FormSection>
-                <FormHeading>Section Three</FormHeading>
+                <FormHeading>Section Four</FormHeading>
                 <FormSubHeading>Information about this section to help the user</FormSubHeading>
                 <TextArea id="text" placeholder="Some text here" name="primary" labelText="Details" />
               </FormSection>
             </GridItem>
           </Grid>
           <FormSection>
-            <FormHeading>Section Four</FormHeading>
+            <FormHeading>Section Five</FormHeading>
             <FormSubHeading>Information about this section to help the user</FormSubHeading>
             <Grid>
               <GridItem>

src/components/RadioSelect/__tests__/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
 import RadioSelect from '../index'
-import { Formik, Form } from 'formik'
+import { Formik, Form, FormikValues } from 'formik'
 
 describe('RadioSelect', () => {
   it('should match snapshot', () => {
@@ -12,7 +12,7 @@ describe('RadioSelect', () => {
       dataTest: 'mockDatatest',
       options: [{ label: 'label', value: 'value' }, { label: 'label1', value: 'value1' }]
     }
-    const wrapper = shallow(<RadioSelect {...mockProps} />)
+    const wrapper = shallow(<RadioSelect setFieldValue={jest.fn()} state={'value'} {...mockProps} />)
     expect(wrapper).toMatchSnapshot()
   })
 
@@ -25,10 +25,10 @@ describe('RadioSelect', () => {
       options: [{ label: 'label', value: 'value' }, { label: 'label1', value: 'value1' }]
     }
     const wrapper = mount(
-      <Formik initialValues={{ username: '' }} onSubmit={jest.fn()}>
-        {() => (
+      <Formik initialValues={{ username: '' } as FormikValues} onSubmit={jest.fn()}>
+        {({ setFieldValue, values }) => (
           <Form>
-            <RadioSelect {...mockProps} />
+            <RadioSelect setFieldValue={setFieldValue} state={values[mockProps.name]} {...mockProps} />
           </Form>
         )}
       </Formik>

src/components/RadioSelect/index.stories.tsx

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react'
 import { RadioSelect } from '.'
 import { Formik, Form } from 'formik'
 import { action } from '@storybook/addon-actions'
+import { Button } from '../Button'
 
 storiesOf('RadioSelect', module).add('Primary', () => {
   const mockProps = {
@@ -16,16 +17,20 @@ storiesOf('RadioSelect', module).add('Primary', () => {
   return (
     <section className="section">
       <Formik
-        initialValues={{ demo: 'b' }}
+        initialValues={{ [mockProps.name]: '' }}
         onSubmit={values => {
           action('Form Values' + values)
+          console.log(values)
         }}
       >
-        {() => (
+        {({ setFieldValue, values }) => (
           <Form>
             <div className="column is-half-desktop">
-              <RadioSelect {...mockProps} />
+              <RadioSelect setFieldValue={setFieldValue} state={values[mockProps.name]} {...mockProps} />
             </div>
+            <Button variant={'primary'} type={'submit'}>
+              Submit
+            </Button>
           </Form>
         )}
       </Formik>

src/components/RadioSelect/index.tsx

@@ -13,12 +13,22 @@ export type RadioSelectProps = {
   id: string
   dataTest?: string
   options: RadioSelectOption[]
+  setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void
+  state: any
 }
 
-export const RadioSelect: React.FC<RadioSelectProps> = ({ name, labelText, id, dataTest, options }) => {
+export const RadioSelect: React.FC<RadioSelectProps> = ({
+  name,
+  labelText,
+  id,
+  dataTest,
+  options,
+  setFieldValue,
+  state
+}) => {
   return (
     <Field type="radio" name={name}>
-      {({ field, meta }: FieldProps<string>) => {
+      {({ meta }: FieldProps<string>) => {
         const hasError = checkError(meta)
         const className = hasError ? 'input is-danger' : ''
         return (
@@ -30,15 +40,16 @@ export const RadioSelect: React.FC<RadioSelectProps> = ({ name, labelText, id, d
               {options.map(({ label, value }: RadioSelectOption, index: number) => (
                 <div key={index} data-test={dataTest} className={className}>
                   <input
-                    id={value as string}
+                    id={label as string}
                     className="checkbox"
                     type="radio"
                     key={value}
-                    checked={field.value === value}
-                    {...field}
+                    checked={state === value}
+                    name={name}
                     value={value}
+                    onChange={() => setFieldValue(name, value)}
                   />
-                  <label htmlFor={name}>{label}</label>
+                  <label htmlFor={label as string}>{label}</label>
                 </div>
               ))}
             </div>

src/components/Spreadsheet/__stubs__/index.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import { Cell, SelectedMatrix } from '../types'
+import ReactDataSheet from 'react-datasheet'
+
+export const data: Cell[][] = [
+  [
+    { readOnly: true, value: 'Office Name' },
+    { readOnly: true, value: 'Building Name' },
+    { readOnly: true, value: 'Building No.' },
+    { readOnly: true, value: 'Address 1' },
+    { readOnly: true, value: 'Address 2' },
+    { readOnly: true, value: 'Address 3' },
+    { readOnly: true, value: 'Address 4' },
+    { readOnly: true, value: 'Post Code' },
+    { readOnly: true, value: 'Telephone' },
+    { readOnly: true, value: 'Fax' },
+    { readOnly: true, value: 'Email' }
+  ],
+  [
+    { value: 'London' },
+    { value: 'The White House' },
+    { value: '15' },
+    { value: 'London 1' },
+    { value: '' },
+    { value: 'Londom 3' },
+    { value: '' },
+    { value: 'EC12NH' },
+    { value: '0845 0000' },
+    { value: '' },
+    { value: '[email protected]' }
+  ],
+  [
+    { value: 'London2' },
+    { value: 'The Black House' },
+    { value: '11' },
+    { value: '' },
+    { value: '' },
+    { value: 'Adress 3' },
+    { value: '' },
+    { value: 'EC12NH' },
+    { value: '087 471 929' },
+    { value: '' },
+    { value: '[email protected]' }
+  ],
+  [
+    { value: 'New York' },
+    { value: 'Building A' },
+    { value: '11' },
+    { value: '' },
+    { value: '' },
+    { value: 'City Z' },
+    { value: '' },
+    { value: 'AL7187' },
+    { value: '017 7162 9121' },
+    { value: '' },
+    { value: '[email protected]' }
+  ]
+]
+
+export const cellRenderProps: ReactDataSheet.CellRendererProps<Cell> = {
+  row: 3,
+  col: 10,
+  cell: { value: '[email protected]' },
+  selected: false,
+  editing: false,
+  updated: false,
+  attributesRenderer: jest.fn() as ReactDataSheet.AttributesRenderer<Cell>,
+  className: 'cell',
+  style: { background: 'red' },
+  onMouseDown: jest.fn(),
+  onMouseOver: jest.fn(),
+  onDoubleClick: jest.fn(),
+  onContextMenu: jest.fn(),
+  children: <div>hi</div>
+}
+
+export const setData: React.Dispatch<Cell[][]> = jest.fn()
+
+export const setSelected: React.Dispatch<SelectedMatrix> = jest.fn()
+
+export const selectedMatrix = {
+  start: { i: 0, j: 1 },
+  end: { i: 2, j: 3 }
+}