Feat: Frontend core components migration (#311)

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    modulePaths: ['<rootDir>/src'],
+    testEnvironment: 'jsdom',
+    transform: {
+        '.+\\.(ts|tsx)$': 'ts-jest'
+    }
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.23",
+    "version": "0.27.00",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -62,11 +62,12 @@
         "@storybook/manager-webpack5": "6.5.13",
         "@storybook/react": "6.5.13",
         "@testing-library/cypress": "8.0.3",
-        "@testing-library/react": "9.3.2",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/cypress-cucumber-preprocessor": "4.0.1",
         "@types/faker": "5.5.3",
         "@types/history": "4.7.11",
-        "@types/jest": "24.0.22",
+        "@types/jest": "^29.5.0",
         "@types/node": "10.9.4",
         "@types/ramda": "0.25.36",
         "@types/react": "18.0.26",
@@ -98,7 +99,8 @@
         "eslint-plugin-storybook": "0.6.7",
         "fs-extra": "7.0.0",
         "gh-pages": "2.0.0",
-        "jest": "24.9.0",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
         "node-fetch": "2.6.7",
         "node-polyfill-webpack-plugin": "2.0.1",
         "prettier": "2.8.0",
@@ -107,20 +109,16 @@
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "styled-components": "5.0.0",
+        "ts-jest": "^29.1.0",
         "ts-loader": "^9.4.2",
-        "typescript": "3.9.10",
+        "typescript": "^4.3.0",
         "webpack": "5"
     },
     "peerDependencies": {
         "date-fns": "2.4.1",
         "react": "16.8.0",
         "styled-components": "5.0.0"
     },
-    "jest": {
-        "setupFilesAfterEnv": [
-            "<rootDir>/src/setupTests.js"
-        ]
-    },
     "publishConfig": {
         "ignore": [
             "!dist/",

src/core/DataTable/Rows.tsx

@@ -164,7 +164,10 @@ export const StatefulRow = <D extends Data>({
 
     const partialUpdate = useCallback(
         <D1 extends Data>(field: keyof D1, value: D1[keyof D1]) => {
-            setEditableState(values => ({ ...values, [`${field}`]: value }))
+            setEditableState(values => ({
+                ...values,
+                [`${String(field)}`]: value
+            }))
             const patch: Partial<D1> = {}
             patch[field] = value
             onUpdate?.(patch)

src/core/EditableTable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import React, { forwardRef, useRef } from 'react'
-import MaterialTable, {
+import MaterialTable from 'material-table'
+import {
     Column,
     Options,
     MTableEditRow,

src/core/Experimental/Button/Button.tsx

@@ -0,0 +1,36 @@
+import Button from '../../Button'
+import { NoteAdd as IconAdd } from '../../../icons'
+import React from 'react'
+import styled from 'styled-components'
+
+export type Props = {
+    label?: string
+    name: string
+    margin?: string | number
+    padding?: string | number
+    onClick?(): void
+}
+
+const ButtonStyled = styled(Button)`
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+`
+
+const AddButton = (props: Props) => (
+    <ButtonStyled
+        {...props}
+        variant='dashed'
+        color='primary'
+        id={'add-' + props.name}
+        name={'add-' + props.name}
+        padding={props.padding}
+        margin={props.margin || '12px 0 24px'}
+        onClick={props.onClick}>
+        <IconAdd />
+        {props.label}
+    </ButtonStyled>
+)
+
+export default AddButton

src/core/Experimental/Button/button.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import Button from './Button'
+
+describe('Button', () => {
+    const NAME = 'btnName'
+    const LABEL = 'Click Me'
+    it('should render', () => {
+        render(<Button name={NAME} label={LABEL} />)
+
+        const button = screen.getByText(LABEL)
+
+        expect(button).toBeDefined()
+    })
+
+    it('should call onClick', () => {
+        const onClick = jest.fn()
+        render(<Button name={NAME} label={LABEL} onClick={onClick} />)
+
+        const button = screen.getByText(LABEL)
+        button.click()
+
+        expect(onClick).toHaveBeenCalled()
+    })
+})

src/core/Experimental/Button/button.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Button from './Button'
+
+export const button = () => {
+    return <Button name='AddFoo' label='Add Foo' />
+}
+
+export default {
+    title: 'v2/Button',
+    component: Button
+}

src/core/Experimental/Button/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './Button'
+
+// export more components, hooks or helpers below if needed

src/core/Experimental/Card/Card.tsx

@@ -0,0 +1,112 @@
+import { Close as IconClose, Edit as IconEdit } from '../../../icons'
+import React, { CSSProperties } from 'react'
+import Typography from '../../Typography'
+import styled from 'styled-components'
+import IconButton from '../../IconButton'
+import Paper from '../../Paper'
+import Line from '../../Line'
+import AddButton from '../../Button'
+
+export interface IProps {
+    children: React.ReactNode
+    label?: string
+    nested?: boolean
+    title?: string
+    name: string
+    id?: string
+    editing?: boolean
+    action?: JSX.Element | null
+    onClickAdd?(): void
+    onToggleEdit?(): void
+}
+
+export const Content = styled.div`
+    flex: 1;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+`
+
+const Header = styled.div`
+    display: flex;
+`
+
+export const Title = styled(Typography)`
+    flex: 1;
+`
+
+const EditButton = styled(IconButton)`
+    && {
+        width: 36px;
+        height: 36px;
+    }
+`
+
+const NESTED_ELEVATION = 0
+
+const paperStyle: CSSProperties = {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column'
+}
+
+const Card = (props: IProps) => {
+    const {
+        id,
+        name,
+        nested,
+        title,
+        action,
+        onToggleEdit,
+        editing,
+        label,
+        children,
+        onClickAdd,
+        ...otherProps
+    } = props
+
+    return (
+        <Paper
+            {...otherProps}
+            name={name}
+            id={id}
+            style={paperStyle}
+            className='showable'
+            elevation={nested ? NESTED_ELEVATION : undefined}
+            padding={nested ? '0' : '24px'}>
+            {title && (
+                <>
+                    <Header>
+                        {title && (
+                            <Title
+                                name={name + '-title'}
+                                variant='h6'
+                                color='primary'>
+                                {title}
+                            </Title>
+                        )}
+                        {action}
+                        {onToggleEdit && (
+                            <EditButton
+                                className={editing ? '' : 'showable-target'}
+                                name={`${editing ? 'cancel' : 'edit'}-${name}`}
+                                margin='-10px'
+                                padding='0px'
+                                onClick={onToggleEdit}>
+                                {editing ? <IconClose /> : <IconEdit />}
+                            </EditButton>
+                        )}
+                    </Header>
+                    <div>
+                        <Line />
+                    </div>
+                </>
+            )}
+            {onClickAdd && <AddButton onClick={onClickAdd} />}
+            <div>{children}</div>
+        </Paper>
+    )
+}
+
+export default Card

src/core/Experimental/Card/card.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Card from './Card'
+import Typography from '../../Typography'
+
+export const card = () => {
+    return (
+        <Card name='Card' title='Foo Bar'>
+            <Typography>Dummy content</Typography>
+        </Card>
+    )
+}
+
+export default {
+    title: 'experimental/Card',
+    component: Card
+}

src/core/Experimental/Card/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './Card'
+
+// export more components, hooks or helpers below if needed

src/core/Experimental/Dialog/ConfirmDialog.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import DialogV2 from './Dialog'
+
+export interface IProps {
+    open: boolean
+    title: string
+    text: string
+    disableBackdropClick?: boolean
+    labels?: {
+        cancel?: string
+        confirm?: string
+    }
+    onCancel(): void
+    onConfirm(): void
+}
+
+const ConfirmDialog = (props: IProps) => {
+    const {
+        open,
+        title,
+        text,
+        labels,
+        onCancel,
+        onConfirm,
+        disableBackdropClick,
+        ...otherProps
+    } = props
+
+    return (
+        <DialogV2
+            {...otherProps}
+            open={open}
+            title={title}
+            text={text}
+            primaryButtonAction={onConfirm}
+            primaryButtonText={(labels && labels.confirm) || 'Sim'}
+            secondaryButtonText={(labels && labels.cancel) || 'Voltar'}
+            primaryButtonColor='primary'
+            secondaryButtonAction={onCancel}
+            onClose={disableBackdropClick ? undefined : onCancel}
+        />
+    )
+}
+
+export default ConfirmDialog