@bigbinary/neetoui-rn 0.0.7 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Button.js +30 -0
- package/lib/components/Container.js +30 -0
- package/lib/components/Typography/Body.js +42 -0
- package/lib/components/Typography/Callout.js +42 -0
- package/lib/components/Typography/Caption1.js +42 -0
- package/lib/components/Typography/Caption2.js +42 -0
- package/lib/components/Typography/Headline.js +42 -0
- package/lib/components/Typography/LargeTitle.js +42 -0
- package/lib/components/Typography/Title1.js +42 -0
- package/lib/components/Typography/Title2.js +42 -0
- package/lib/components/Typography/Title3.js +42 -0
- package/lib/components/Typography/Typography.js +66 -0
- package/lib/components/index.js +13 -0
- package/lib/theme/index.js +75 -0
- package/package.json +51 -17
- package/lib/components/Typography.js +0 -23
- package/lib/index.js +0 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { flexbox, space, border, buttonStyle } from "styled-system";
|
|
3
|
+
import styled from "styled-components/native";
|
|
4
|
+
import propTypes from "@styled-system/prop-types";
|
|
5
|
+
import PropTypes from "prop-types";
|
|
6
|
+
|
|
7
|
+
export const TouchableOpacity = styled.TouchableOpacity`
|
|
8
|
+
${flexbox}
|
|
9
|
+
${space}
|
|
10
|
+
${border}
|
|
11
|
+
${buttonStyle}
|
|
12
|
+
`;
|
|
13
|
+
|
|
14
|
+
export const Button = ({ children, ...rest }) => {
|
|
15
|
+
return <TouchableOpacity {...rest}>{children}</TouchableOpacity>;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
Button.defaultProps = {
|
|
19
|
+
variant: "primary",
|
|
20
|
+
p: 15,
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
Button.propTypes = {
|
|
25
|
+
...propTypes.flexbox,
|
|
26
|
+
...propTypes.space,
|
|
27
|
+
...propTypes.border,
|
|
28
|
+
...propTypes.buttonStyle,
|
|
29
|
+
children: PropTypes.node.isRequired,
|
|
30
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { flexbox, space, border, color, layout } from "styled-system";
|
|
3
|
+
import styled from "styled-components/native";
|
|
4
|
+
import propTypes from "@styled-system/prop-types";
|
|
5
|
+
import PropTypes from "prop-types";
|
|
6
|
+
|
|
7
|
+
const View = styled.View`
|
|
8
|
+
${flexbox}
|
|
9
|
+
${space}
|
|
10
|
+
${border}
|
|
11
|
+
${color}
|
|
12
|
+
${layout}
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
export const Container = ({ children, ...rest }) => {
|
|
16
|
+
return <View {...rest}>{children}</View>;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
Container.defaultProps = {
|
|
20
|
+
color: "background.default",
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
Container.propTypes = {
|
|
24
|
+
...propTypes.flexbox,
|
|
25
|
+
...propTypes.space,
|
|
26
|
+
...propTypes.border,
|
|
27
|
+
...propTypes.color,
|
|
28
|
+
...propTypes.layout,
|
|
29
|
+
children: PropTypes.node.isRequired,
|
|
30
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Body component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Body, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Body>
|
|
20
|
+
* This is basic example of Body
|
|
21
|
+
* </Body>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Body = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="body" fontFamily="regular" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Body.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Callout component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Callout, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Callout>
|
|
20
|
+
* This is basic example of Callout
|
|
21
|
+
* </Callout>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Callout = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="callout" fontFamily="bold" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Callout.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Caption1 component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Caption1, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Caption1>
|
|
20
|
+
* This is basic example of Caption1
|
|
21
|
+
* </Caption1>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Caption1 = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="caption1" fontFamily="regular" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Caption1.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Caption2 component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Caption2, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Caption2>
|
|
20
|
+
* This is basic example of Caption2
|
|
21
|
+
* </Caption2>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Caption2 = ({ children, ...rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="caption2" fontFamily="regular" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Caption2.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Headline component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Headline, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Headline>
|
|
20
|
+
* This is basic example of Headline
|
|
21
|
+
* </Headline>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Headline = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="headline" fontFamily="bold" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Headline.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* LargeTitle component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { LargeTitle, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <LargeTitle>
|
|
20
|
+
* This is basic example of LargeTitle
|
|
21
|
+
* </LargeTitle>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const LargeTitle = ({ children, ...rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="largeTitle" fontFamily="bold" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
LargeTitle.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Title1 component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Title1, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Title1>
|
|
20
|
+
* This is basic example of Title1
|
|
21
|
+
* </Title1>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Title1 = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="title1" fontFamily="bold" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Title1.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Title2 component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Title2, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Title2>
|
|
20
|
+
* This is basic example of Title2
|
|
21
|
+
* </Title2>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Title2 = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="title2" fontFamily="bold" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Title2.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Typography } from "./Typography";
|
|
5
|
+
|
|
6
|
+
// @component-group Typography Components
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Title3 component is a build on top of typography component with some default fontFamilty and fontSize.
|
|
10
|
+
*
|
|
11
|
+
* ## Usage
|
|
12
|
+
* ```js
|
|
13
|
+
* import * as React from 'react';
|
|
14
|
+
* import { Title3, Container } from '@bigbinary/neetoui-rn';
|
|
15
|
+
*
|
|
16
|
+
* export default function Main() {
|
|
17
|
+
* return (
|
|
18
|
+
* <Container>
|
|
19
|
+
* <Title3>
|
|
20
|
+
* This is basic example of Title3
|
|
21
|
+
* </Title3>
|
|
22
|
+
* </Container>
|
|
23
|
+
* );
|
|
24
|
+
* }
|
|
25
|
+
*
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @extends StyledSystems props /styled-system
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
export const Title3 = ({ children, rest }) => {
|
|
32
|
+
return (
|
|
33
|
+
<Typography fontSize="title3" fontFamily="regular" {...rest}>
|
|
34
|
+
{children}
|
|
35
|
+
</Typography>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Title3.propTypes = {
|
|
40
|
+
...Typography.propTypes,
|
|
41
|
+
children: PropTypes.node.isRequired,
|
|
42
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components/native";
|
|
3
|
+
import { space, layout, typography, color, textStyle } from "styled-system";
|
|
4
|
+
import propTypes from "@styled-system/prop-types";
|
|
5
|
+
import PropTypes from "prop-types";
|
|
6
|
+
|
|
7
|
+
export const Text = styled.Text`
|
|
8
|
+
${space}
|
|
9
|
+
${layout}
|
|
10
|
+
${typography}
|
|
11
|
+
${color}
|
|
12
|
+
${textStyle}
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
// @component-group Typography Components
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Typography component is a primitive text component built on top of styled-system.
|
|
19
|
+
*
|
|
20
|
+
* This component supports below props categories from [styled-system ](/styled-system)
|
|
21
|
+
*
|
|
22
|
+
* <ul>
|
|
23
|
+
* <li>space</li>
|
|
24
|
+
* <li>layout</li>
|
|
25
|
+
* <li>typography</li>
|
|
26
|
+
* <li>color</li>
|
|
27
|
+
* <li>textStyle</li>
|
|
28
|
+
* </ul>
|
|
29
|
+
*
|
|
30
|
+
* <div class="screenshots">
|
|
31
|
+
* <img src="screenshots/typography-all.png" />
|
|
32
|
+
* <img src="screenshots/typography-colors.png" />
|
|
33
|
+
* <img src="screenshots/typography-fonts.png" />
|
|
34
|
+
* </div>
|
|
35
|
+
*
|
|
36
|
+
* ## Usage
|
|
37
|
+
* ```js
|
|
38
|
+
* import * as React from 'react';
|
|
39
|
+
* import { Typography, Container } from '@bigbinary/neetoui-rn';
|
|
40
|
+
*
|
|
41
|
+
* export default function Main() {
|
|
42
|
+
* return (
|
|
43
|
+
* <Container>
|
|
44
|
+
* <Typography>
|
|
45
|
+
* This is basic example of Typography
|
|
46
|
+
* </Typography>
|
|
47
|
+
* </Container>
|
|
48
|
+
* );
|
|
49
|
+
* }
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
52
|
+
* @extends StyledSystems props /styled-system
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
export const Typography = ({ children, ...rest }) => {
|
|
56
|
+
return <Text {...rest}>{children}</Text>;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
Typography.propTypes = {
|
|
60
|
+
...propTypes.space,
|
|
61
|
+
...propTypes.layout,
|
|
62
|
+
...propTypes.typography,
|
|
63
|
+
...propTypes.color,
|
|
64
|
+
...propTypes.textStyle,
|
|
65
|
+
children: PropTypes.node.isRequired,
|
|
66
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { Button } from "./Button";
|
|
2
|
+
export { Container } from "./Container";
|
|
3
|
+
|
|
4
|
+
export { Typography } from "./Typography/Typography";
|
|
5
|
+
export { LargeTitle } from "./Typography/LargeTitle";
|
|
6
|
+
export { Title1 } from "./Typography/Title1";
|
|
7
|
+
export { Title2 } from "./Typography/Title2";
|
|
8
|
+
export { Title3 } from "./Typography/Title3";
|
|
9
|
+
export { Headline } from "./Typography/Headline";
|
|
10
|
+
export { Body } from "./Typography/Body";
|
|
11
|
+
export { Callout } from "./Typography/Callout";
|
|
12
|
+
export { Caption1 } from "./Typography/Caption1";
|
|
13
|
+
export { Caption2 } from "./Typography/Caption2";
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { moderateScale } from "react-native-size-matters";
|
|
2
|
+
|
|
3
|
+
const baseTheme = {
|
|
4
|
+
colors: {
|
|
5
|
+
font: {
|
|
6
|
+
default: "#FFFFFF",
|
|
7
|
+
base: "#2F3941",
|
|
8
|
+
primary: "#1B1F23",
|
|
9
|
+
secondary: "#676767",
|
|
10
|
+
danger: "#FE295C",
|
|
11
|
+
},
|
|
12
|
+
background: {
|
|
13
|
+
default: "#FFFFFF",
|
|
14
|
+
base: "#2F3941",
|
|
15
|
+
primary: "#E4E4E7",
|
|
16
|
+
secondary: "#E9EBED",
|
|
17
|
+
},
|
|
18
|
+
card: {
|
|
19
|
+
default: "#FFFFFF",
|
|
20
|
+
base: "#2F3941",
|
|
21
|
+
primary: "#F8F9F9",
|
|
22
|
+
secondary: "#E9EBED",
|
|
23
|
+
},
|
|
24
|
+
border: {
|
|
25
|
+
default: "#FFFFFF",
|
|
26
|
+
base: "#2F3941",
|
|
27
|
+
primary: "#E4E4E7",
|
|
28
|
+
danger: "#FE295C",
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
fonts: {
|
|
32
|
+
// We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
|
|
33
|
+
// https://www.bigbinary.com/learn-react-native/adding-custom-fonats
|
|
34
|
+
|
|
35
|
+
// thin: "Inter-Thin",
|
|
36
|
+
// extraLight: "Inter-ExtraLight",
|
|
37
|
+
// light: "Inter-Light",
|
|
38
|
+
// medium: "Inter-Medium",
|
|
39
|
+
// semiBold: "Inter-SemiBold",
|
|
40
|
+
// extraBold: "Inter-ExtraBold",
|
|
41
|
+
// black: "Inter-Black",
|
|
42
|
+
|
|
43
|
+
regular: "Inter-Regular",
|
|
44
|
+
bold: "Inter-Bold",
|
|
45
|
+
},
|
|
46
|
+
fontSizes: {
|
|
47
|
+
largeTitle: moderateScale(32),
|
|
48
|
+
title1: moderateScale(24),
|
|
49
|
+
title2: moderateScale(18),
|
|
50
|
+
title3: moderateScale(18),
|
|
51
|
+
headline: moderateScale(14),
|
|
52
|
+
body: moderateScale(14),
|
|
53
|
+
callout: moderateScale(12),
|
|
54
|
+
caption1: moderateScale(12),
|
|
55
|
+
caption2: moderateScale(10),
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export const theme = {
|
|
60
|
+
...baseTheme,
|
|
61
|
+
buttons: {
|
|
62
|
+
primary: {
|
|
63
|
+
color: baseTheme.colors.white,
|
|
64
|
+
backgroundColor: baseTheme.colors.grey800,
|
|
65
|
+
},
|
|
66
|
+
secondary: {
|
|
67
|
+
color: baseTheme.colors.grey800,
|
|
68
|
+
backgroundColor: baseTheme.colors.white,
|
|
69
|
+
},
|
|
70
|
+
disabled: {
|
|
71
|
+
color: baseTheme.colors.white,
|
|
72
|
+
backgroundColor: baseTheme.colors.grey,
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
};
|
package/package.json
CHANGED
|
@@ -1,23 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui-rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
8
|
-
"android": "yarn
|
|
9
|
-
"ios": "yarn
|
|
8
|
+
"android": "yarn prestart && react-native run-android",
|
|
9
|
+
"ios": "yarn prestart && react-native run-ios",
|
|
10
10
|
"start": "react-native start",
|
|
11
11
|
"test": "jest",
|
|
12
12
|
"lint": "eslint .",
|
|
13
13
|
"format": "prettier --write .",
|
|
14
|
+
"flow": "flow",
|
|
14
15
|
"precommit": "lint-staged",
|
|
15
|
-
"
|
|
16
|
+
"prestart": "sb-rn-get-stories",
|
|
17
|
+
"storybook-watcher": "sb-rn-watcher",
|
|
16
18
|
"storybook": "start-storybook -p 7007",
|
|
17
|
-
"build-react": "webpack --mode production",
|
|
19
|
+
"build-react": "webpack --mode production --config webpack.config.js",
|
|
20
|
+
"serve": "serve -s dist",
|
|
18
21
|
"start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
|
|
19
22
|
"build-storybook-web": "./node_modules/@storybook/react/bin/build.js",
|
|
20
|
-
"storybook-web": "yarn
|
|
23
|
+
"storybook-web": "yarn prestart && ./node_modules/@storybook/react/bin/index.js",
|
|
24
|
+
"get-stories": "sb-rn-get-stories --config-path=./.storybook",
|
|
25
|
+
"preweb": "yarn get-stories",
|
|
26
|
+
"web": "yarn prestart && webpack serve --mode=development --config webpack.config.js"
|
|
21
27
|
},
|
|
22
28
|
"files": [
|
|
23
29
|
"lib"
|
|
@@ -35,24 +41,38 @@
|
|
|
35
41
|
]
|
|
36
42
|
},
|
|
37
43
|
"peerDependencies": {},
|
|
38
|
-
"dependencies": {
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@styled-system/prop-types": "^5.1.5"
|
|
46
|
+
},
|
|
39
47
|
"devDependencies": {
|
|
40
48
|
"@babel/core": "^7.12.9",
|
|
41
49
|
"@babel/runtime": "^7.12.5",
|
|
42
50
|
"@react-native-async-storage/async-storage": "^1.15.11",
|
|
51
|
+
"@react-native-community/datetimepicker": "^3.5.2",
|
|
43
52
|
"@react-native-community/eslint-config": "^3.0.1",
|
|
44
|
-
"@
|
|
45
|
-
"@storybook/addon-
|
|
53
|
+
"@react-native-community/slider": "^4.1.12",
|
|
54
|
+
"@storybook/addon-actions": "^6.3.12",
|
|
55
|
+
"@storybook/addon-controls": "^6.3.12",
|
|
56
|
+
"@storybook/addon-essentials": "^6.4.0-beta.33",
|
|
46
57
|
"@storybook/addon-knobs": "^5.3",
|
|
47
58
|
"@storybook/addon-links": "^5.3",
|
|
48
|
-
"@storybook/addon-ondevice-actions": "^
|
|
59
|
+
"@storybook/addon-ondevice-actions": "^6.0.1-alpha.6",
|
|
60
|
+
"@storybook/addon-ondevice-backgrounds": "^6.0.1-alpha.6",
|
|
61
|
+
"@storybook/addon-ondevice-controls": "^6.0.1-alpha.6",
|
|
49
62
|
"@storybook/addon-ondevice-knobs": "^5.3.25",
|
|
63
|
+
"@storybook/addon-ondevice-notes": "^6.0.1-alpha.6",
|
|
64
|
+
"@storybook/addon-storyshots": "^6.3.12",
|
|
65
|
+
"@storybook/addons": "^6.3.1",
|
|
50
66
|
"@storybook/cli": "^6.3.12",
|
|
51
67
|
"@storybook/react": "^6.3.12",
|
|
52
|
-
"@storybook/react-native": "^
|
|
68
|
+
"@storybook/react-native": "^6.0.1-alpha.6",
|
|
69
|
+
"@storybook/react-native-server": "^6.0.0-alpha.0",
|
|
70
|
+
"@svgr/webpack": "^5.5.0",
|
|
53
71
|
"babel-jest": "^26.6.3",
|
|
54
72
|
"babel-loader": "^8.2.3",
|
|
55
73
|
"babel-plugin-module-resolver": "^4.1.0",
|
|
74
|
+
"babel-plugin-react-native-web": "^0.17.5",
|
|
75
|
+
"babel-plugin-transform-remove-console": "^6.9.4",
|
|
56
76
|
"eslint": "7.14.0",
|
|
57
77
|
"eslint-config-prettier": "^8.3.0",
|
|
58
78
|
"eslint-import-resolver-babel-module": "^5.3.1",
|
|
@@ -63,25 +83,36 @@
|
|
|
63
83
|
"eslint-plugin-react": "^7.27.0",
|
|
64
84
|
"eslint-plugin-react-hooks": "^4.3.0",
|
|
65
85
|
"eslint-plugin-react-native": "^3.11.0",
|
|
86
|
+
"html-webpack-plugin": "^5.5.0",
|
|
66
87
|
"husky": "^7.0.4",
|
|
67
88
|
"jest": "^26.6.3",
|
|
89
|
+
"lint-staged": "^12.0.3",
|
|
68
90
|
"metro-react-native-babel-preset": "^0.66.2",
|
|
91
|
+
"prettier": "^2.3.1",
|
|
69
92
|
"react": "17.0.2",
|
|
70
93
|
"react-dom": "17.0.2",
|
|
71
94
|
"react-native": "0.66.2",
|
|
95
|
+
"react-native-size-matters": "^0.4.0",
|
|
72
96
|
"react-native-storybook-loader": "^2.0.4",
|
|
73
97
|
"react-native-web": "^0.17.5",
|
|
74
98
|
"react-test-renderer": "17.0.2",
|
|
75
|
-
"
|
|
99
|
+
"serve": "^13.0.2",
|
|
100
|
+
"styled-components": "^5.3.3",
|
|
101
|
+
"styled-system": "^5.1.5",
|
|
102
|
+
"url-loader": "^4.1.1",
|
|
103
|
+
"webpack": "^5.61.0",
|
|
104
|
+
"webpack-cli": "^4.9.1",
|
|
105
|
+
"webpack-dev-server": "^4.4.0"
|
|
76
106
|
},
|
|
77
107
|
"jest": {
|
|
78
|
-
"preset": "
|
|
108
|
+
"preset": "react-native",
|
|
109
|
+
"moduleDirectories": [
|
|
110
|
+
"node_modules"
|
|
111
|
+
],
|
|
79
112
|
"transformIgnorePatterns": [
|
|
80
|
-
"node_modules/(?!
|
|
113
|
+
"node_modules/(?!react-native)/"
|
|
81
114
|
],
|
|
82
|
-
"
|
|
83
|
-
"<rootDir>/__mocks__/globalMock.js"
|
|
84
|
-
]
|
|
115
|
+
"testEnvironment": "jsdom"
|
|
85
116
|
},
|
|
86
117
|
"repository": {
|
|
87
118
|
"type": "git",
|
|
@@ -102,5 +133,8 @@
|
|
|
102
133
|
"pattern": "**/*.stories.js",
|
|
103
134
|
"outputFile": "./storybook/storyLoader.js"
|
|
104
135
|
}
|
|
136
|
+
},
|
|
137
|
+
"resolutions": {
|
|
138
|
+
"styled-components": "^5"
|
|
105
139
|
}
|
|
106
140
|
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import PropTypes from "prop-types";
|
|
3
|
-
import { Text } from "react-native";
|
|
4
|
-
|
|
5
|
-
// const STYLES = {
|
|
6
|
-
// h1: "h1",
|
|
7
|
-
// h2: "h2",
|
|
8
|
-
// h3: "h3",
|
|
9
|
-
// h4: "h4",
|
|
10
|
-
// h5: "h5",
|
|
11
|
-
// h6: "h6",
|
|
12
|
-
// body1: "body1",
|
|
13
|
-
// body2: "body2",
|
|
14
|
-
// body3: "body3",
|
|
15
|
-
// };
|
|
16
|
-
|
|
17
|
-
export const Typography = ({ label }) => {
|
|
18
|
-
return <Text>{label}</Text>;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
Typography.propTypes = {
|
|
22
|
-
label: PropTypes.string,
|
|
23
|
-
};
|
package/lib/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Typography } from "./components/Typography";
|