Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Corregido Storybook del componente Text #18

Merged
merged 3 commits into from
Aug 17, 2023
Merged

Corregido Storybook del componente Text #18

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c437b68
Modified Text component as to accept props for styling as well as upd…
pablonortiz Aug 14, 2023
b106b3e
Updated Text component to be able to receive styled components style
pablonortiz Aug 15, 2023
bb2ad7f
Modified Text style prop as to be a single element instead of an array
pablonortiz Aug 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .ondevice/storybook.requires.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ global.STORIES = [
directory: "./storybook/stories",
files: "**/*.stories.?(ts|tsx|js|jsx)",
importPathMatcher:
"^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
"^\\.[\\\\/](?:storybook[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
},
];

Expand Down
54 changes: 34 additions & 20 deletions src/components/StatusChip/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ exports[`StatusChip component render correct a valid component is passed 1`] = `
>
<Text
style={
Object {
"fontFamily": "Roboto",
"fontSize": 16,
}
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 16,
},
]
}
>
Custom component
Expand All @@ -48,14 +50,20 @@ exports[`StatusChip component render correct if a background is passed 1`] = `
>
<Text
style={
Object {
"color": "#fff",
"fontFamily": "Roboto",
"fontSize": 15,
"fontWeight": "900",
"lineHeight": 18,
"textAlign": "center",
}
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 16,
},
Object {
"color": "#fff",
"fontFamily": "Roboto",
"fontSize": 15,
"fontWeight": "900",
"lineHeight": 18,
"textAlign": "center",
},
]
}
>
Delivered
Expand All @@ -81,14 +89,20 @@ exports[`StatusChip component render correct text is passed 1`] = `
>
<Text
style={
Object {
"color": "#2979FF",
"fontFamily": "Roboto",
"fontSize": 15,
"fontWeight": "900",
"lineHeight": 18,
"textAlign": "center",
}
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 16,
},
Object {
"color": "#2979FF",
"fontFamily": "Roboto",
"fontSize": 15,
"fontWeight": "900",
"lineHeight": 18,
"textAlign": "center",
},
]
}
>
Partially delivered
Expand Down
5 changes: 3 additions & 2 deletions src/components/StatusChip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {ReactElement, isValidElement} from 'react';
import {StyleSheet, Text, ViewProps, View} from 'react-native';
import {StyleSheet, ViewProps, View} from 'react-native';
import {base, grey, primary} from '../../theme/palette';
import Text from '../Text';

interface StatusChipProps extends ViewProps {
children?: ReactElement | string;
Expand All @@ -19,7 +20,7 @@ const StatusChip = ({children, ...props}: StatusChipProps) => {

return (
<View style={styles(props).ViewStyles} {...props}>
{isCustomComponent ? children : <Text style={styles(props).TextStyles}>{children}</Text>}
{isCustomComponent ? children : <Text style={[styles(props).TextStyles]}>{children}</Text>}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Esto tendria que ver con el otro comentario, aqui no hace falta pasar los estilos como array

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Listo @WilliamSaya-lvl30 ahí ya lo corregí!

</View>
);
};
Expand Down
10 changes: 6 additions & 4 deletions src/components/Text/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
exports[`Text component render correct match snapshot 1`] = `
<Text
style={
Object {
"fontFamily": "Roboto",
"fontSize": 16,
}
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 16,
},
]
}
>
Janis Picking
Expand Down
26 changes: 16 additions & 10 deletions src/components/Text/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@
import React, {ReactElement} from 'react';
import {StyleSheet, Text as TextComponent, TextProps as TextComponentProps} from 'react-native';
import {
StyleSheet,
Text as TextComponent,
TextProps as TextComponentProps,
TextStyle,
} from 'react-native';

interface TextProps extends TextComponentProps {
children?: ReactElement | string;
style?: TextStyle[];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creo que no es necesario pasar un array de estilos, de esta manera creo que se ve mejor, y no hay que desectructurar style.

cuando invocas un componente no se le debería pasar mas de objeto de 1 estilo.
Captura de pantalla de 2023-08-15 15-37-07

}

const Text = ({children, ...props}: TextProps) => {
const Text = ({children, style = [], ...props}: TextProps) => {
if (!children) {
return null;
}

const styles = StyleSheet.create({
TextStyles: {
fontSize: 16,
fontFamily: 'Roboto',
},
});

return (
<TextComponent style={styles.TextStyles} {...props}>
<TextComponent style={[styles.TextStyles, ...style]} {...props}>
{children}
</TextComponent>
);
};

const styles = StyleSheet.create({
TextStyles: {
fontSize: 16,
fontFamily: 'Roboto',
},
});

export default Text;
2 changes: 1 addition & 1 deletion storybook/stories/StatusChip/StatusChip.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import StatusChip from '../../../src/components/StatusChip';
import Text from '../Text';
import Text from '../../../src/components/Text';
import React from 'react';

export default {
Expand Down
2 changes: 1 addition & 1 deletion storybook/stories/Text/Text.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Text from './index';
import Text from '../../../src/components/Text';

const fontFamilies = [
'normal',
Expand Down
15 changes: 0 additions & 15 deletions storybook/stories/Text/index.js
View file
Open in desktop

This file was deleted.