zupit / beagle-web-react Goto Github PK

What would you like to be added:
Reexportar loadParams que está definido no core para que o usuário final possa importar da lib que ele mesmo instalou, no caso beagle-react, ao invés de importar do web que ele não instalou diretamente.

Why is this needed:
Evitar confusões para o usuário final na hora de usar

Deve-se refatorar esse componente utilizando as novas features de contexto.

Nova interface do PageView:

data class PageView(
    val children: List<ServerDrivenComponent>,
    override val context: ContextData? = null,
    val onPageChange: List<Action>? = null,
    val currentPage: Bind<Int>? = null
) : ServerDrivenComponent, ContextComponent

data class PageIndicator(
    val selectedColor: String,
    val unselectedColor: String,
    var numberOfPages: Int,
    var currentPage: Bind<Int>
) : PageIndicatorComponent

Issue original: ZupIT/beagle#422

Beagle React version: 1.10

Steps To Reproduce

1. npm install --save @zup-it/beagle-react
2. JSON creation - payload.json
3. create beagle-service.ts
4. Modify app.js

Followed all the steps given https://www.npmjs.com/package/@zup-it/beagle-react to install Begale React in new REact web proejct, facing JSON issue - "ERROR: Unexpected token < in JSON at position 0"

what i also found is when i open the network tab and look for payload.json i found

Link to code example:

The current behavior

The expected behavior

As releases do Beagle React são geradas automaticamente, mas quando são geradas as release notes são "todo".

Devemos gerar as release notes corretamente, de acordo com os textos dos PR's merjados desde o último release.

We now have properties that are passed to the ErrorComponent. Our default ErrorComponent should take advantage of this by using both the retry function and the array of errors.

What would you like to be added:
Criar testes do beagle-react. É necessário que a issue #22 esteja finalizada para início desta.

• src/utils
• src/components
• renderer.ts
• outros ?

Why is this needed:
É necessário testar a lib!

Beagle React version: 1.7.0

Steps To Reproduce

1. Run yarn beagle
2. Run yarn beagle again
3. The program will ask if we really want to replace "app.tsx"
4. Answer no

The current behavior

The program will not replace app.tsx, as we instructed it. But it will replace beagle-service.ts.

The expected behavior

I expected the program to also ask me if I wanted to replace beagle-service.ts. Both files are very important and it's really bad if we replace a file that the user has already configured.

We have to create a Ritchie's Formula to quickly start a project.
EPIC reference - ZupIT/beagle#508

What would you like to be added:
Remove styled components dependency from root package.json

Why is this needed:
With the new structure and addition of the React Native project we now have three different package.json files one for the root and one for each of the packages. As the React Native library is no longer using the styled components dependency I think we can remove it from the root package.json file and leave it only in its required package

Beagle React version: 1.4

Steps To Reproduce

1. Yarn
2. Yarn build

The current behavior

Currently doing build we have the command yarn clean in package.json. Executing "rm -rf dist". This command causes errors when building on Windows as it is only used for macOS and Linux.

The expected behavior

Yarn clean command must be removed.

Beagle React version: 1.7.0

Steps To Reproduce

1. Create an absolute positioned element
2. Create a normal element
3. Place both inside a container
4. The absolutely position element will always be on top, even if I created it before the other one

Link to code example: https://playground.usebeagle.io/#/cloud/S3-8296c204-8747-4f75-8045-2393e2141a83/absolute.json?platform=react-web

The current behavior

The white div, in the example, appears behind the absolutely positioned element.

The expected behavior

I expected the white div to be positioned on top of the other one. Just like in Android and iOS.

In general, it is expected that the deepest elements declared in the tree (last) will be rendered on top of the others, despite of positionType.

Observation

This may be discussed with the mobile teams. How can we change the order? We have no equivalent to z-index.

It looks like Beagle is not compatible with the new React 17. We should check and fix it if it's broken.

Refatorar o componente listview de forma que se adeque ao novo contrato estabelecido na seguinte issue: ZupIT/beagle#210

Beagle React version: 1.7.0

Steps To Reproduce

1. Create a listview
2. Inside the listview's template, use a component that names its children something other than children. The component touchable is a good example (it uses child).
3. Create a component, give it a fixed id, and place it as a child of the component created in the previous step.

Link to code example:

This example uses an image inside a touchable in the template of a list view: https://playground.usebeagle.io/#/cloud/S3-b213d4c3-31b2-4f03-a4e0-e6cdbabb75c3?platform=react

The current behavior

Every element created in the step 3 will have the same Beagle ID, which is very wrong. The Beagle ID should be a unique identifier.

In the example I linked, another effect is that every image renders the same.

The expected behavior

I expected every component to have a unique Beagle ID, they should be prefixed by the fixed id, but have suffixes like ":0", ":1", etc.

onCreateBeagleView should be removed from BeagleRemoteView. This is the Angular way of getting the BeagleView and should not be replicated in React.

The React component already have a way to reference the view, which is the viewRef prop.

What would you like to be added:
Currently, we have a beagle-core dependency in each package.json. As a result, we have to do a yarn link three times for local development and control the version separately.

Is there a way to improve this beagle-core dependency control?

Why is this needed:
We need a better solution to control the beagle-core version for the whole project.

Deve-se atualizar o Readme deste projeto com o Getting Started mais recente para o React.

O Readme desta biblioteca deve ser incluído no package distribuído pelo NPM.

Criar exibição de cobertura de testes no CI

Beagle React version:

Problem

The guide to start a project with React don't provide a suggestion to install styled-components. The developer needs to find the error and install the dependency to fix.

Steps To Reproduce

1. Follow the Beagle React guide instructions (https://docs.usebeagle.io/get-started/new-project/case-web)

Error:

Beagle React version:

Steps To Reproduce

1. Create a react app and install beagle (as provided on the documentation)
2. Add as payload: form.json and confirm.json
3. On your App.tsx set: <BeagleRemoteView route="/form.json" />
4. Run it
5. Click on "Próximo"

The current behavior

The expected behavior

Navigate to /confirm.json page

What would you like to be added:
Currently, our process of converting the backend styles to CSS styles is focused on the web environment. We need to change it in order to work correctly for React Native too. For example, in RN, images don't accept sizes in px.

Why is this needed:
Not every style processed from BFF works in React Native.

What would you like to be added:
Configurar Jest para realizar tests

Why is this needed:
Não existe configuração para tests no projeto. É necessário criar essa configuração para testar a lib.

What would you like to be added:
Implementação do componente default webview

Why is this needed:
Manter compatibilidade com o mobile

Beagle React version:

Steps To Reproduce

1. Criar o Projeto Default do React
2. Instalar o Beagle segundo o Tutorial
3. Fazer o Init do Beagle
4. Start no Server

Link to code example:

Ambiente de Desenvolvimento
NODE v16.15.0
YARN 1.22.18
"@types/react-dom": "^18.0.5",
"@zup-it/beagle-react": "^2.0.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.2",

The current behavior

The expected behavior

Alterações para conformidade com ZupIT/beagle-web-core#75

What would you like to be added:
Trocar beagleType para beagleComponent

Why is this needed:
Padronização e correto funcionamento com a versão do beagle-web-core

We need to be able to deploy patches from specific branch using Github Releases.

ZupIT/beagle#501

What would you like to be added:
Currently, the component BeagleId for React Native doesn't do anything at all.
Is it right? We need to understand if the behavior that we have in the beagle-react for the BeagleId component is necessary here. If so, we need to create it. If not, we can remove this component in the beagle-react-native.

Why is this needed:
Because the current implementation of BeagleId for React Native is useless.

What would you like to be added:
Nosso simple form está com o onSubmit opcional porém deveria ser obrigatório.

Why is this needed:

Atualmente no nosso processo de CI, toda vez que um PR é aberto roda uma validação no github actions.
Nesta validação, fazemos o npm install das libs que utilizamos como dependência.

O problema é que caso alguma task do React dependa de uma nova versão do beagle-web-core somente iriamos conseguir aceitar o PR deste repositório quando o beagle-web-core subisse uma versão no NPM.

Para solucionar este problema e não precisar esperar que uma nova versão do beagle-web-core esteja no NPM, precisaremos alterar o nosso CI e fazer um LINK com o repositório do beagle-web-core para utilizar a versão que estiver na master.

Com isto, devemos tornar como prática comum no desenvolvimento do beagle-web-react deixar sempre linkado com a master do beagle-web-core.

What would you like to be added:
Componentes padrões do Beagle

Widgets:

• Button
• Text
• Container
• Image
• Loading
• Error

ServerDrivenComponent:

• ListView
• Screen
• ScrollView
• Lazy
• Page
• TabBar
• Touchable

Why is this needed:
Precisamos estar em acordo com os componentes do mobile.

Beagle React version: 1.4.0

Steps To Reproduce

1. Dependabot found vulnerability in …/beagle-react-native/package.json

See the attachment below:

Precisamos adicionar a secret NODE_AUTH_TOKEN na configuração do repositório para os scripts de CI/CD.

Beagle React version:

Steps To Reproduce

1. Abra o playground neste link https://beagle-playground.netlify.app/#/cloud/929b0402d117492aaf73f0d0cef85ce6
2. O componente de Input não deveria estar ocupando toda a tela ( se alterar a plataforma para Angular o comportamento está certo )

Link to code example:

https://beagle-playground.netlify.app/#/cloud/929b0402d117492aaf73f0d0cef85ce6

The current behavior

Aparentemente o Input está com uma classe de flex:1

The expected behavior

Não deveria ter este flex:1

Beagle React version:

Steps To Reproduce

1. start a project from scratch by creating a new directory named project
2. cd project
3. yarn init: use all default options (enter)
4. yarn add react
5. yarn add @zup-it/beagle-react
6. yarn beagle init

The current behavior

It fails to execute saying the directory src doesn't exist. In this case, the script should create the directory src.

If I create the directory by myself, there's another problem. It prompts me with the message:
Do you want to replace "app.tsx" content with the Beagle configuration (y or n)?

I don't have any file in my project, why is it asking me if I want to replace anything? The script should only ask this if app.tsx exists in the project.

Furthermore, the file created has an uppercase "A", i.e. it's named App.tsx. This is a problem, the naming convention generally used with javascript would name it app.tsx, with a lowercase "a".

The expected behavior

I expected the script to run, without errors and without questions. I also expected "App.tsx" to be named "app.tsx", in lowercase letters.

We now have properties that are passed to the ErrorComponent. Our default ErrorComponent should take advantage of this by using both the retry function and the array of errors.

Beagle React version: 1.0.0

Steps To Reproduce

1. Create a React app using create-react-app
2. Add beagle-react library
3. Add basic beagle config to render a simple component
4. Run project

Link to code example:

The current behavior

The following Error is shown after running a basic React project from create-react-app using the beagle-react library

Module not found: Can't resolve 'styled-components' in 'C:\Users\zupper\Documents\Projects\Pocs\beagle-react-app\node_modules@zup-it\beagle-react\components\BeagleButton'

The expected behavior

If we install styled-components everything works fine. But as it is a dependency we should not have to install it separately

Deve-se recriar a landing page do Beagle utilizando o Beagle Web React.

Utilizar branch nova no Beagle Creator.

• Obter acesso ao código do projeto
• Obter acesso ao S3 para atualizar a página
• Solicitar acesso a uma máquina para rodar o bff do Beagle e servir os JSONs
• Planejar os componentes server-driven e o Payload retornado pelo BFF
• Criar o BFF que servirá o payload para o front-end
• Modificar o código da Landing Page para que utilize o Beagle React

The Modal component is behind the Page View and Tab Bar components

I believe that the ideal is the modal to be apparent in any situation