J UI p 150 creacion componente tabs #38

dam788 · 2024-06-12T22:40:39Z

LINK DE TICKET:

https://janiscommerce.atlassian.net/browse/JUIP-149

DESCRIPCIÓN DEL REQUERIMIENTO:

Contexto
En los nuevos diseños de las apps, tenemos tabs en la parte superior de algunas pantallas

Necesidad
Se requiere tener el componente uppertabs que tenemos en las apps, adaptado para ui native

DESCRIPCIÓN DE LA SOLUCIÓN:

Se agrego el componente Tab:

props	tipo de dato	valor por defecto	es requerido	nota
initialTab	number	null	0	no
scenes	arrayOf({ title: string escene: React.Node disabled: boolean})		si	el titulo y componente que se renderiza dentro de la tab.
position	enum('top', 'bottom')	‘top’	no	la posición del tab
onPressTabCb	(initialTab: number) => void	no	callback que se active cuando presiono una tab. Devuelve por params el numero de tab.
ScrollContentStyle	ViewStyle	{}	no	estilos para esl scrollview que renderiza el contenido
style	ViewStyle	{}	no	extension de los estilos

CÓMO SE PUEDE PROBAR?

Es en storybook:

npm start | npm run storybook:android

En la app:

Pegar este código en App.tsx:

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {View} from 'react-native';
import Tabs from './src/components/Tabs';
import Svg from './src/components/Svg';

const App = () => {
	const SceneX = ({children}) => (
		<View
			style={{
				justifyContent: 'center',
				alignItems: 'center',
				padding: 20,
				backgroundColor: 'whitesmoke',
			}}>
			{children}
		</View>
	);

	const scenes = [
		{
			title: 'Inicio',
			scene: (
				<SceneX>
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
				</SceneX>
			),
			// disabled: true,
		},
		{
			title: 'Notificationes',
			scene: (
				<SceneX>
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
				</SceneX>
			),
			// disabled: false,
		},
		{
			title: 'Firma',
			scene: (
				<SceneX>
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
				</SceneX>
			),
			// disabled: false,
		},
		{
			title: 'Tab 4',
			scene: (
				<SceneX>
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
					<Svg name="login-illustration" size={220} />
				</SceneX>
			),
			// disabled: true,
		},
		{
			title: 'Tab 5',
			scene: (
				<SceneX>
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
					<Svg name="no-notifications" size={220} />
				</SceneX>
			),
			// disabled: false,
		},
		{
			title: 'Tab 6',
			scene: (
				<SceneX>
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
					<Svg name="empty-illustration" size={220} />
				</SceneX>
			),
			disabled: false,
		},
	];

	return (
		<View style={{flex: 1}}>
			<Tabs
				scenes={scenes}
				initialTab={1}
				scrollContentStyle={{padding: 20}}
				position="top" // bottom
			/>
		</View>
	);
};

export default App;

En la app Wms:

En el repo de ui-nativenpm run build y yalc push.
En la app wms yalc add @janis-commerce/ui-native y npm i.
Pegar este código en Notifications.js:

import React from 'react';
import {useTranslation} from 'react-i18next';
import {Text} from 'react-native';
import LayoutComp from 'layouts/LayoutWithBottomButtons';
import {Tabs} from '@janiscommerce/ui-native';
import Styles from './styles';

const Notifications = () => {
	const {t} = useTranslation('appCommon');

	const scene = (
		<>
			<Styles.Wrapper testID="notifications">
				<Styles.Svg name="no-notifications" width={81} height={117} />
				<Styles.Title>{t('appCommon.message.ooops')}</Styles.Title>
				<Styles.Text>{t('appCommon.message.noNotifications')}</Styles.Text>
			</Styles.Wrapper>
			<Styles.Wrapper testID="notifications">
				<Styles.Svg name="no-notifications" width={81} height={117} />
				<Styles.Title>{t('appCommon.message.ooops')}</Styles.Title>
				<Styles.Text>{t('appCommon.message.noNotifications')}</Styles.Text>
			</Styles.Wrapper>
			<Styles.Wrapper testID="notifications">
				<Styles.Svg name="no-notifications" width={81} height={117} />
				<Styles.Title>{t('appCommon.message.ooops')}</Styles.Title>
				<Styles.Text>{t('appCommon.message.noNotifications')}</Styles.Text>
			</Styles.Wrapper>
			<Styles.Wrapper testID="notifications">
				<Styles.Svg name="no-notifications" width={81} height={117} />
				<Styles.Title>{t('appCommon.message.ooops')}</Styles.Title>
				<Styles.Text>{t('appCommon.message.noNotifications')}</Styles.Text>
			</Styles.Wrapper>
		</>
	);

	// eslint-disable-next-line react/prop-types
	const SceneX = ({children}) => <Styles.Wrapper testID="notifications">{children}</Styles.Wrapper>;

	const scenes = [
		{
			title: 'Init',
			scene,
		},
		{
			title: 'Notifications',
			scene: (
				<SceneX>
					<Text>Notifications</Text>
				</SceneX>
			),
		},
		{
			title: 'Config',
			scene,
		},
		{
			title: 'Tab 4',
			scene,
		},
		{
			title: 'Tab5',
			scene: (
				<SceneX>
					<Text>Notifications</Text>
				</SceneX>
			),
		},
		{
			title: 'Tab 6',
			scene,
		},
	];

	// bottom buttons
	const bottomButtons = [
		{
			title: t('appCommon.action.scanProduct'),
			startIcon: 'scanner',
			iconSize: 24,
			color: 'black',
			onPress: () => {},
		},
	];

	return (
		<LayoutComp
			style={{flex: 1}}
			buttons={bottomButtons}
			buttonBackgroundColor="white"
			buttonsDirection="column"
			variant="rounded">
			<Tabs scenes={scenes} initialTab={1} />
		</LayoutComp>
	);
};

export default Notifications;

Y éste es el styles.js:

import styled from 'styled-components/native';
import {getColor} from 'theme/utils';
import {getScale} from 'src/utils';
import {fontWeight} from 'theme/typography';
import {Svg as SvgComponent} from '@janiscommerce/ui-native';

const {verticalScale} = getScale();

const Wrapper = styled.View`
	background-color: ${getColor('white', 'main')};
	align-items: center;
	padding: ${verticalScale(59)}px;
`;

const Title = styled.Text`
	color: ${getColor('grey', '600')};
	font-size: ${verticalScale(20)}px;
	${fontWeight.medium};
	letter-spacing: 0;
	line-height: ${verticalScale(28)}px;
	margin-top: ${verticalScale(36)}px;
	margin-bottom: ${verticalScale(12)}px;
`;

const Text = styled.Text`
	color: ${getColor('grey', '500')};
	font-size: ${verticalScale(16)}px;
	letter-spacing: 0;
	line-height: ${verticalScale(24)}px;
`;

const Svg = styled(SvgComponent)``;

export default {Wrapper, Title, Text, Svg};

SCREENSHOTS:

DATOS EXTRA A TENER EN CUENTA:

CHANGELOG:

coveralls · 2024-06-12T22:49:16Z

Pull Request Test Coverage Report for Build 9490758039

Details

31 of 31 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 100.0%

Totals
Change from base Build 9405014264:	0.0%
Covered Lines:	537
Relevant Lines:	537

💛 - Coveralls

src/components/Tabs/utils/index.tsx

src/components/Tabs/index.tsx

coveralls · 2024-06-14T21:09:11Z

Pull Request Test Coverage Report for Build 9522367456

Details

31 of 31 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 100.0%

Totals
Change from base Build 9405014264:	0.0%
Covered Lines:	537
Relevant Lines:	537

💛 - Coveralls

GonzaFran · 2024-06-18T15:35:02Z

src/components/Tabs/index.tsx

+		return null;
+	}
+
+	const [activeTab, setActiveTab] = useState(initialTab);


@dam788 los ajustes de estilos quedaron bien, revisate que, cuando le paso un valor a initialTab que no sea 0, me rompe con este error:

Invariant Violation: scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, otherwise there is no way to know the location of offscreen indices or handle failures.

Cualquier cosa, si vos haces la prueba y no te pasa avisame y lo vemos a ver si estoy bardeando con algo.

si gonza, me encontre con unos problemas que no habia tenido en cuenta. Ahi los resolvi, gracias!

coveralls · 2024-06-18T20:22:08Z

Pull Request Test Coverage Report for Build 9571647947

Details

39 of 39 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 100.0%

Totals
Change from base Build 9405014264:	0.0%
Covered Lines:	545
Relevant Lines:	545

💛 - Coveralls

coveralls · 2024-06-18T20:24:19Z

Pull Request Test Coverage Report for Build 9571672680

Details

39 of 39 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 100.0%

Totals
Change from base Build 9405014264:	0.0%
Covered Lines:	545
Relevant Lines:	545

💛 - Coveralls

WilliamSaya-lvl30

@dam788 Punto que me sñalaron en diseño cuando se implemento, las tabs cuando estan inactivas tienen el titulo en negro.

Tambien hay que revisar como se ve en web.

coveralls · 2024-06-19T14:13:29Z

Pull Request Test Coverage Report for Build 9583526137

Details

40 of 40 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 100.0%

Totals
Change from base Build 9405014264:	0.0%
Covered Lines:	546
Relevant Lines:	546

💛 - Coveralls

coveralls · 2024-06-19T18:46:36Z

Pull Request Test Coverage Report for Build 9586828157

Details

40 of 40 (100.0%) changed or added relevant lines in 2 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 100.0%

Totals
Change from base Build 9405014264:	0.0%
Covered Lines:	546
Relevant Lines:	546

💛 - Coveralls

Damian Morales added 10 commits June 11, 2024 16:35

creacion componente tabs

9675de1

creacion componente tabs

82e8168

creacion componente tabs

a742da0

creacion componente tabs

c46f55e

creacion componente tabs

b6331e4

creacion componente tabs

ca56e8a

creacion componente tabs

b9475de

creacion componente tabs

41b0a88

creacion componente tabs

9bc59b7

creacion componente tabs

4c80852

dam788 self-assigned this Jun 12, 2024

dam788 requested review from colomfernando, christian97dd, WilliamSaya-lvl30, GonzaFran and pablonortiz June 12, 2024 22:41

creacion componente tabs

2e65c3a

pablonortiz approved these changes Jun 13, 2024

View reviewed changes

GonzaFran requested changes Jun 14, 2024

View reviewed changes

Damian Morales added 2 commits June 14, 2024 18:03

crear componente toast

cf7fe80

correccion 1 - crear componente toast

c5183cc

GonzaFran requested changes Jun 18, 2024

View reviewed changes

dam788 requested a review from GonzaFran June 18, 2024 17:52

Damian Morales added 2 commits June 18, 2024 17:19

correccion - crear componente tabs

5d1495e

correccion - crear componente tabs

04a4a77

WilliamSaya-lvl30 suggested changes Jun 18, 2024

View reviewed changes

GonzaFran approved these changes Jun 19, 2024

View reviewed changes

correccion - crear componente tabs

37c7774

correccion - crear componente tabs

4e9b00e

dam788 requested a review from WilliamSaya-lvl30 June 19, 2024 18:48

WilliamSaya-lvl30 approved these changes Jun 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

J UI p 150 creacion componente tabs #38

J UI p 150 creacion componente tabs #38

dam788 commented Jun 12, 2024 •

edited

Loading

coveralls commented Jun 12, 2024 •

edited

Loading

coveralls commented Jun 14, 2024 •

edited

Loading

GonzaFran Jun 18, 2024

dam788 Jun 18, 2024

coveralls commented Jun 18, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading

WilliamSaya-lvl30 left a comment •

edited

Loading

coveralls commented Jun 19, 2024 •

edited

Loading

coveralls commented Jun 19, 2024 •

edited

Loading

J UI p 150 creacion componente tabs #38

Are you sure you want to change the base?

J UI p 150 creacion componente tabs #38

Conversation

dam788 commented Jun 12, 2024 • edited Loading

LINK DE TICKET:

DESCRIPCIÓN DEL REQUERIMIENTO:

DESCRIPCIÓN DE LA SOLUCIÓN:

CÓMO SE PUEDE PROBAR?

SCREENSHOTS:

DATOS EXTRA A TENER EN CUENTA:

CHANGELOG:

coveralls commented Jun 12, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9490758039

Details

💛 - Coveralls

coveralls commented Jun 14, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9522367456

Details

💛 - Coveralls

GonzaFran Jun 18, 2024

Choose a reason for hiding this comment

dam788 Jun 18, 2024

Choose a reason for hiding this comment

coveralls commented Jun 18, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9571647947

Details

💛 - Coveralls

coveralls commented Jun 18, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9571672680

Details

💛 - Coveralls

WilliamSaya-lvl30 left a comment • edited Loading

Choose a reason for hiding this comment

coveralls commented Jun 19, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9583526137

Details

💛 - Coveralls

coveralls commented Jun 19, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9586828157

Details

💛 - Coveralls

dam788 commented Jun 12, 2024 •

edited

Loading

coveralls commented Jun 12, 2024 •

edited

Loading

coveralls commented Jun 14, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading

coveralls commented Jun 18, 2024 •

edited

Loading

WilliamSaya-lvl30 left a comment •

edited

Loading

coveralls commented Jun 19, 2024 •

edited

Loading

coveralls commented Jun 19, 2024 •

edited

Loading