diff --git a/docs/debug_local.md b/docs/debug_local.md index 40846f7b..14e4a969 100644 --- a/docs/debug_local.md +++ b/docs/debug_local.md @@ -2,16 +2,21 @@ ## Debug beagle-react locally When debugging beagle-react as a dependency on a local project in your machine, you may experience the error [Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html). This [issue](https://github.com/facebook/react/issues/14257) explains the reason. However, there is a workaround for this problem and it is described below. -``` +```bash cd beagle-react yarn yarn build -cd dist -yarn link -cd ../node_modules/react -yarn link -cd ../react-dom -yarn link +yarn link-beagle cd YOUR_PROJECT yarn link beagle-react react react-dom ``` + +If you need to undo the linking and download the dependencies from npm: + +```bash +cd beagle-react +yarn unlink-beagle +cd YOUR_PROJECT +yarn unlink beagle-react react react-dom +yarn install --force +``` diff --git a/package.json b/package.json index cfa2e485..be1b1c06 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "husky": "^4.2.5", "jest": "^26.1.0", "lerna": "^3.22.1", - "react": "^16.13.1", "nodemon": "^2.0.4", "ts-jest": "25.2.1", "tscpaths": "https://github.com/Tiagoperes/tscpaths.git#498769882091cfe6fd8c4067bb50843dc4ca551e", diff --git a/packages/beagle-react-native/package.json b/packages/beagle-react-native/package.json index 84c5bd44..358bd8d4 100644 --- a/packages/beagle-react-native/package.json +++ b/packages/beagle-react-native/package.json @@ -22,18 +22,17 @@ "test": "jest" }, "dependencies": { - "lodash": "^4.17.15", + "@zup-it/beagle-web": "1.3.0", "react-native": "^0.63.2", "react-native-swiper": "^1.6.0", - "react-native-webview": "^10.8.3", - "@zup-it/beagle-web": "1.3.0" + "react-native-webview": "^10.8.3" }, "peerDependencies": { "react": ">=16.8.0", "react-native-webview": "^10.8.3" }, "devDependencies": { - "@types/lodash": "^4.14.149" + "react": "16.14.0" }, "publishConfig": { "access": "public", diff --git a/packages/beagle-react/package.json b/packages/beagle-react/package.json index d6a890cc..df575fd0 100644 --- a/packages/beagle-react/package.json +++ b/packages/beagle-react/package.json @@ -19,12 +19,11 @@ "watch": "yarn nodemon --watch src -e ts,tsx --exec yarn build", "check-types": "tsc --noEmit", "check-test-types": "tsc ./__tests__/** --noEmit", - "test": "jest" + "test": "jest", + "link-beagle": "cd dist && yarn link && cd ../node_modules/react && yarn link && cd ../react-dom && yarn link && cd ../..", + "unlink-beagle": "cd dist && yarn unlink && cd ../node_modules/react && yarn unlink && cd ../react-dom && yarn unlink && cd ../.." }, "dependencies": { - "lodash": "^4.17.15", - "react-dom": "^16.13.1", - "showdown": "^1.9.1", "@zup-it/beagle-web": "1.3.0", "styled-components": "^5.1.1" }, @@ -33,14 +32,14 @@ "react-dom": ">=16.8.0" }, "devDependencies": { - "@types/lodash": "^4.14.149", "@types/react-dom": "^16.9.8", - "@types/showdown": "^1.9.3", + "@types/styled-components": "^5.1.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.4", "enzyme-to-json": "^3.5.0", "jest-mock-extended": "^1.0.10", - "@types/styled-components": "^5.1.0" + "react": "16.14.0", + "react-dom": "16.14.0" }, "publishConfig": { "access": "public", diff --git a/packages/beagle-react/src/__tests__/components/Markdown.spec.tsx b/packages/beagle-react/src/__tests__/components/Markdown.spec.tsx deleted file mode 100644 index cb57c662..00000000 --- a/packages/beagle-react/src/__tests__/components/Markdown.spec.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright 2020 ZUP IT SERVICOS EM TECNOLOGIA E INOVACAO SA - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ - -// Link.react.test.js -import React from 'react' -import Adapter from 'enzyme-adapter-react-16' -import { configure, mount } from 'enzyme' -import Markdown from '../../components/Markdown' - -let wrapper: any -const markdownMock = '#Beagle Test' - -configure({ adapter: new Adapter() }) -beforeAll(() => { - wrapper = mount() -}) - -test('Beagle snapshot Markdown', () => { - expect(wrapper).toMatchSnapshot() -}) diff --git a/packages/beagle-react/src/__tests__/components/__snapshots__/Markdown.spec.tsx.snap b/packages/beagle-react/src/__tests__/components/__snapshots__/Markdown.spec.tsx.snap deleted file mode 100644 index 0cb0ce9b..00000000 --- a/packages/beagle-react/src/__tests__/components/__snapshots__/Markdown.spec.tsx.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Beagle snapshot Markdown 1`] = ` - - - -
- - - -`; diff --git a/packages/beagle-react/src/components/Markdown/index.tsx b/packages/beagle-react/src/components/Markdown/index.tsx deleted file mode 100644 index c2013e13..00000000 --- a/packages/beagle-react/src/components/Markdown/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright 2020 ZUP IT SERVICOS EM TECNOLOGIA E INOVACAO SA - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ - -import React, { FC, useEffect, useRef, useMemo } from 'react' -import { Converter } from 'showdown' -import { BeagleDefaultComponent } from 'common/models' -import withTheme from '../utils/withTheme' -import { Container } from './styled' - -export interface MarkdownInterface extends BeagleDefaultComponent { - text: string, -} - -const Markdown: FC = ({ text, style, className }) => { - const htmlContainer = useRef() as React.MutableRefObject - const converter = useMemo(() => new Converter(), []) - - function convertMarkdownToHTML() { - if (!text) { - htmlContainer.current.innerHTML = '' - return - } - - htmlContainer.current.innerHTML = converter - .makeHtml(text) - .replace(/]*)>/g, '') - } - - useEffect(convertMarkdownToHTML, [text]) - - return -} - -export default withTheme(Markdown) diff --git a/packages/beagle-react/src/components/Markdown/styled.ts b/packages/beagle-react/src/components/Markdown/styled.ts deleted file mode 100644 index 3572203f..00000000 --- a/packages/beagle-react/src/components/Markdown/styled.ts +++ /dev/null @@ -1,178 +0,0 @@ -/* - * Copyright 2020 ZUP IT SERVICOS EM TECNOLOGIA E INOVACAO SA - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ - -import styled from 'styled-components' - -export const Container = styled.div` - /** - * Styles taken from https://github.com/KrauseFx/markdown-to-html-github-style - */ - - hr { - color: #bbb; - background-color: #bbb; - height: 1px; - flex: 0 1 auto; - margin: 1em 0; - padding: 0; - border: none; - } - - /** - * Links - */ - a { - color: #0366d6; - text-decoration: none; - } - a:visited { - color: #0366d6; - } - a:hover { - color: #0366d6; - text-decoration: underline; - } - - pre { - background-color: #f6f8fa; - border-radius: 3px; - font-size: 85%; - line-height: 1.45; - overflow: auto; - padding: 16px; - } - - /** - * Code blocks - */ - - code { - background-color: rgba(27,31,35,.05); - border-radius: 3px; - font-size: 85%; - margin: 0; - word-wrap: break-word; - padding: .2em .4em; - font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace; - } - - pre > code { - background-color: transparent; - border: 0; - display: inline; - line-height: inherit; - margin: 0; - overflow: visible; - padding: 0; - word-wrap: normal; - font-size: 100%; - } - - /** - * Blockquotes - */ - blockquote { - margin-left: 30px; - margin-top: 0px; - margin-bottom: 16px; - border-left-width: 3px; - padding: 0 1em; - color: #828282; - border-left: 4px solid #e8e8e8; - padding-left: 15px; - font-size: 18px; - letter-spacing: -1px; - font-style: italic; - } - blockquote * { - font-style: normal !important; - letter-spacing: 0; - color: #6a737d !important; - } - - /** - * Tables - */ - table { - border-spacing: 2px; - display: block; - font-size: 14px; - overflow: auto; - width: 100%; - margin-bottom: 16px; - border-spacing: 0; - border-collapse: collapse; - } - - td { - padding: 6px 13px; - border: 1px solid #dfe2e5; - } - - th { - font-weight: 600; - padding: 6px 13px; - border: 1px solid #dfe2e5; - } - - tr { - background-color: #fff; - border-top: 1px solid #c6cbd1; - } - - table tr:nth-child(2n) { - background-color: #f6f8fa; - } - - /** - * Others - */ - - img { - max-width: 100%; - } - - p { - line-height: 24px; - font-weight: 400; - font-size: 16px; - color: #24292e; - } - - ul { - margin-top: 0; - } - - li { - color: #24292e; - font-size: 16px; - font-weight: 400; - line-height: 1.5; - } - - li + li { - margin-top: 0.25em; - } - - a:visited { - color: #0366d6; - } - - h1, h2, h3 { - border-bottom: 1px solid #eaecef; - color: #111; - } -` diff --git a/packages/beagle-react/src/components/index.ts b/packages/beagle-react/src/components/index.ts index a88a8d99..6c835501 100644 --- a/packages/beagle-react/src/components/index.ts +++ b/packages/beagle-react/src/components/index.ts @@ -28,7 +28,6 @@ import BeagleSimpleForm from './BeagleSimpleForm' import BeagleTabView from './BeagleTabView' import BeagleTabItem from './BeagleTabView/BeagleTabItem' import BeaglePageView from './BeaglePageView' -import Markdown from './Markdown' import Modal from './Modal' import TextArea from './TextArea' import BeagleInput from './BeagleInput' @@ -64,7 +63,6 @@ const beagleDefaultComponents = { } const webSpecificComponents = { - 'custom:markdown': Markdown, 'custom:modal': Modal, 'custom:text-area': TextArea, } diff --git a/packages/common/renderer.ts b/packages/common/renderer.ts index 70460910..d336bb5b 100644 --- a/packages/common/renderer.ts +++ b/packages/common/renderer.ts @@ -15,7 +15,6 @@ */ import { Fragment, FC, createElement, ComponentClass } from 'react' -import { map } from 'lodash' import { BeagleUIElement, ViewContentManagerMap } from '@zup-it/beagle-web' import { BeagleConfig } from 'common/types' import { getComponentByCaseInsensitiveKey } from 'common/utils/beagleComponent' @@ -47,9 +46,18 @@ const createReactComponentTree = ( return createElement(Fragment) } + function beagleComponentAsReactComponent(beagleComponent: BeagleUIElement) { + return createReactComponentTree( + components, + beagleComponent, + viewId, + contentManagerMap, + BeagleId, + ) + } + const viewContentManager = contentManagerMap.get(viewId, id) - const componentChildren = map(children, child => - createReactComponentTree(components, child, viewId, contentManagerMap, BeagleId)) + const componentChildren = children ? children.map(beagleComponentAsReactComponent) : [] const componentProps = { ...props, key: id, viewContentManager } return createElement(BeagleId, { id, key: id }, [ diff --git a/packages/common/useComponent.ts b/packages/common/useComponent.ts index 62412703..1fa0ca8c 100644 --- a/packages/common/useComponent.ts +++ b/packages/common/useComponent.ts @@ -21,10 +21,11 @@ import { logger, LoadParams, } from '@zup-it/beagle-web' -import { uniqueId } from 'lodash' import BeagleProvider from './provider' import { BeagleRemoteViewType } from './types' +let nextId = 0 + function useComponent({ id, viewRef, @@ -41,7 +42,7 @@ function useComponent({ throw Error('Couldn\'t find a BeagleProvider in the component tree!') const beagleView = useMemo(() => { - if (!id) setViewID(uniqueId()) + if (!id) setViewID(`${nextId++}`) const view = beagleService.createView(networkOptions, controllerId) view.subscribe(setUiTree)