@bigbinary/neetoui-rn 0.0.5 → 0.0.9

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.
Files changed (18) hide show
  1. package/README.md +43 -2
  2. package/lib/components/Button.js +20 -0
  3. package/lib/components/Container.js +14 -0
  4. package/lib/components/Typography/Body.js +35 -0
  5. package/lib/components/Typography/Callout.js +35 -0
  6. package/lib/components/Typography/Caption1.js +35 -0
  7. package/lib/components/Typography/Caption2.js +35 -0
  8. package/lib/components/Typography/Headline.js +35 -0
  9. package/lib/components/Typography/LargeTitle.js +35 -0
  10. package/lib/components/Typography/Title1.js +35 -0
  11. package/lib/components/Typography/Title2.js +35 -0
  12. package/lib/components/Typography/Title3.js +35 -0
  13. package/lib/components/Typography/Typography.js +55 -0
  14. package/lib/components/index.js +13 -0
  15. package/lib/theme/index.js +75 -0
  16. package/package.json +75 -17
  17. package/lib/components/Typography.js +0 -23
  18. package/lib/index.js +0 -1
package/README.md CHANGED
@@ -1,3 +1,44 @@
1
- # Neeto UI - React Native
1
+ [![Netlify Status](https://api.netlify.com/api/v1/badges/1772e21c-61b9-4100-9b2e-9b0d1ce6a210/deploy-status)](https://app.netlify.com/sites/neetoui-rn/deploys)
2
2
 
3
- A component library for react-native
3
+ **NeetoUI-RN** is the library that drives the experience in all Neeto React
4
+ Native products built at [BigBinary](https://www.bigbinary.com).
5
+
6
+ ## Installation
7
+
8
+ ```
9
+ yarn add @bigbinary/neetoui-rn
10
+ ```
11
+
12
+ ## Development
13
+
14
+ Install all the dependencies by executing following command.
15
+
16
+ ```
17
+ yarn
18
+ ```
19
+
20
+ You can create new components in the `lib/components` and export them from
21
+ `lib/index.js`. You can create stories in `storybook/stories`.
22
+
23
+ You can use below commands for running storybook in different platforms:
24
+
25
+ | Platform | Command |
26
+ | -------- | -------------------- |
27
+ | Android | `yarn android` |
28
+ | iOS: | `yarn ios` |
29
+ | Web | `yarn storybook-web` |
30
+
31
+ ## Building
32
+
33
+ NeetoUI-RN version gets patched, auto-incremented and auto-published to npm on
34
+ new commit to master. You can checkout the `publish` workflow in git actions to
35
+ get a live update.
36
+
37
+ Run `build-storybook-web` to build locally, this would create `storybook-static`
38
+ folder with static files.
39
+
40
+ ## Documentation
41
+
42
+ Read the docs here.
43
+
44
+ https://neetoui-rn.netlify.app
package/lib/components/Button.js ADDED
@@ -0,0 +1,20 @@
1
+ import * as React from "react";
2
+ import { flexbox, space, border, buttonStyle } from "styled-system";
3
+ import styled from "styled-components/native";
4
+
5
+ export const TouchableOpacity = styled.TouchableOpacity`
6
+ ${flexbox}
7
+ ${space}
8
+ ${border}
9
+ ${buttonStyle}
10
+ `;
11
+
12
+ export const Button = ({ children, ...rest }) => {
13
+ return <TouchableOpacity {...rest}>{children}</TouchableOpacity>;
14
+ };
15
+
16
+ Button.defaultProps = {
17
+ variant: "primary",
18
+ p: 15,
19
+ alignItems: "center",
20
+ };
package/lib/components/Container.js ADDED
@@ -0,0 +1,14 @@
1
+ import { flexbox, space, border, color, layout } from "styled-system";
2
+ import styled from "styled-components/native";
3
+
4
+ export const Container = styled.View`
5
+ ${flexbox}
6
+ ${space}
7
+ ${border}
8
+ ${color}
9
+ ${layout}
10
+ `;
11
+
12
+ Container.defaultProps = {
13
+ color: "background.default",
14
+ };
package/lib/components/Typography/Body.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Body component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Body, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Body>
18
+ * This is basic example of Body
19
+ * </Body>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Body = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="body" fontFamily="regular" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Callout.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Callout component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Callout, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Callout>
18
+ * This is basic example of Callout
19
+ * </Callout>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Callout = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="callout" fontFamily="bold" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Caption1.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Caption1 component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Caption1, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Caption1>
18
+ * This is basic example of Caption1
19
+ * </Caption1>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Caption1 = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="caption1" fontFamily="regular" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Caption2.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Caption2 component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Caption2, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Caption2>
18
+ * This is basic example of Caption2
19
+ * </Caption2>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Caption2 = ({ children, ...rest }) => {
30
+ return (
31
+ <Typography fontSize="caption2" fontFamily="regular" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Headline.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Headline component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Headline, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Headline>
18
+ * This is basic example of Headline
19
+ * </Headline>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Headline = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="headline" fontFamily="bold" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/LargeTitle.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * LargeTitle component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { LargeTitle, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <LargeTitle>
18
+ * This is basic example of LargeTitle
19
+ * </LargeTitle>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const LargeTitle = ({ children, ...rest }) => {
30
+ return (
31
+ <Typography fontSize="largeTitle" fontFamily="bold" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Title1.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Title1 component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Title1, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Title1>
18
+ * This is basic example of Title1
19
+ * </Title1>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Title1 = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="title1" fontFamily="bold" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Title2.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Title2 component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Title2, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Title2>
18
+ * This is basic example of Title2
19
+ * </Title2>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Title2 = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="title2" fontFamily="bold" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Title3.js ADDED
@@ -0,0 +1,35 @@
1
+ import * as React from "react";
2
+ import { Typography } from "./Typography";
3
+
4
+ // @component-group Typography Components
5
+
6
+ /**
7
+ * Title3 component is a build on top of typography component with some default fontFamilty and fontSize.
8
+ *
9
+ * ## Usage
10
+ * ```js
11
+ * import * as React from 'react';
12
+ * import { Title3, Container } from '@bigbinary/neetoui-rn';
13
+ *
14
+ * export default function Main() {
15
+ * return (
16
+ * <Container>
17
+ * <Title3>
18
+ * This is basic example of Title3
19
+ * </Title3>
20
+ * </Container>
21
+ * );
22
+ * }
23
+ *
24
+ * ```
25
+ *
26
+ * @extends StyledSystems props /styled-system
27
+ */
28
+
29
+ export const Title3 = ({ children, rest }) => {
30
+ return (
31
+ <Typography fontSize="title3" fontFamily="regular" {...rest}>
32
+ {children}
33
+ </Typography>
34
+ );
35
+ };
package/lib/components/Typography/Typography.js ADDED
@@ -0,0 +1,55 @@
1
+ import * as React from "react";
2
+ import styled from "styled-components/native";
3
+ import { space, layout, typography, color, textStyle } from "styled-system";
4
+
5
+ export const Text = styled.Text`
6
+ ${space}
7
+ ${layout}
8
+ ${typography}
9
+ ${color}
10
+ ${textStyle}
11
+ `;
12
+
13
+ // @component-group Typography Components
14
+
15
+ /**
16
+ * Typography component is a primitive text component built on top of styled-system.
17
+ *
18
+ * This component supports below props categories from [styled-system ](/styled-system)
19
+ *
20
+ * <ul>
21
+ * <li>space</li>
22
+ * <li>layout</li>
23
+ * <li>typography</li>
24
+ * <li>color</li>
25
+ * <li>textStyle</li>
26
+ * </ul>
27
+ *
28
+ * <div class="screenshots">
29
+ * <img src="screenshots/typography-all.png" />
30
+ * <img src="screenshots/typography-colors.png" />
31
+ * <img src="screenshots/typography-fonts.png" />
32
+ * </div>
33
+ *
34
+ * ## Usage
35
+ * ```js
36
+ * import * as React from 'react';
37
+ * import { Typography, Container } from '@bigbinary/neetoui-rn';
38
+ *
39
+ * export default function Main() {
40
+ * return (
41
+ * <Container>
42
+ * <Typography>
43
+ * This is basic example of Typography
44
+ * </Typography>
45
+ * </Container>
46
+ * );
47
+ * }
48
+ * ```
49
+ *
50
+ * @extends StyledSystems props /styled-system
51
+ */
52
+
53
+ export const Typography = ({ children, ...rest }) => {
54
+ return <Text {...rest}>{children}</Text>;
55
+ };
package/lib/components/index.js ADDED
@@ -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";
package/lib/theme/index.js ADDED
@@ -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,61 +1,116 @@
1
1
  {
2
2
  "name": "@bigbinary/neetoui-rn",
3
- "version": "0.0.5",
3
+ "version": "0.0.9",
4
4
  "main": "lib/index.js",
5
5
  "author": "BigBinary",
6
6
  "license": "MIT",
7
7
  "scripts": {
8
- "android": "yarn run prestorybook && react-native run-android",
9
- "ios": "yarn run prestorybook && react-native run-ios",
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
- "prestorybook": "rnstl",
14
+ "flow": "flow",
15
+ "precommit": "lint-staged",
16
+ "prestart": "sb-rn-get-stories",
17
+ "storybook-watcher": "sb-rn-watcher",
15
18
  "storybook": "start-storybook -p 7007",
16
- "build-react": "webpack --mode production",
19
+ "build-react": "webpack --mode production --config webpack.config.js",
20
+ "serve": "serve -s dist",
17
21
  "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
18
22
  "build-storybook-web": "./node_modules/@storybook/react/bin/build.js",
19
- "storybook-web": "yarn run prestorybook && ./node_modules/@storybook/react/bin/index.js"
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"
20
27
  },
21
28
  "files": [
22
29
  "lib"
23
30
  ],
31
+ "husky": {
32
+ "hooks": {
33
+ "pre-commit": "lint-staged"
34
+ }
35
+ },
36
+ "lint-staged": {
37
+ "src/**/*.{js,es6,jsx,ts,tsx}": [
38
+ "./node_modules/prettier/bin-prettier.js --write",
39
+ "prettier --write",
40
+ "eslint --fix"
41
+ ]
42
+ },
24
43
  "peerDependencies": {},
25
44
  "dependencies": {},
26
45
  "devDependencies": {
27
46
  "@babel/core": "^7.12.9",
28
47
  "@babel/runtime": "^7.12.5",
29
- "@react-native-community/eslint-config": "^2.0.0",
30
- "@storybook/addon-actions": "^5.3",
31
- "@storybook/addon-essentials": "^6.3.12",
48
+ "@react-native-async-storage/async-storage": "^1.15.11",
49
+ "@react-native-community/datetimepicker": "^3.5.2",
50
+ "@react-native-community/eslint-config": "^3.0.1",
51
+ "@react-native-community/slider": "^4.1.12",
52
+ "@storybook/addon-actions": "^6.3.12",
53
+ "@storybook/addon-controls": "^6.3.12",
54
+ "@storybook/addon-essentials": "^6.4.0-beta.33",
32
55
  "@storybook/addon-knobs": "^5.3",
33
56
  "@storybook/addon-links": "^5.3",
34
- "@storybook/addon-ondevice-actions": "^5.3.23",
57
+ "@storybook/addon-ondevice-actions": "^6.0.1-alpha.6",
58
+ "@storybook/addon-ondevice-backgrounds": "^6.0.1-alpha.6",
59
+ "@storybook/addon-ondevice-controls": "^6.0.1-alpha.6",
35
60
  "@storybook/addon-ondevice-knobs": "^5.3.25",
61
+ "@storybook/addon-ondevice-notes": "^6.0.1-alpha.6",
62
+ "@storybook/addon-storyshots": "^6.3.12",
63
+ "@storybook/addons": "^6.3.1",
36
64
  "@storybook/cli": "^6.3.12",
37
65
  "@storybook/react": "^6.3.12",
38
- "@storybook/react-native": "^5.3.25",
66
+ "@storybook/react-native": "^6.0.1-alpha.6",
67
+ "@storybook/react-native-server": "^6.0.0-alpha.0",
68
+ "@svgr/webpack": "^5.5.0",
39
69
  "babel-jest": "^26.6.3",
40
70
  "babel-loader": "^8.2.3",
71
+ "babel-plugin-module-resolver": "^4.1.0",
72
+ "babel-plugin-react-native-web": "^0.17.5",
73
+ "babel-plugin-transform-remove-console": "^6.9.4",
41
74
  "eslint": "7.14.0",
75
+ "eslint-config-prettier": "^8.3.0",
76
+ "eslint-import-resolver-babel-module": "^5.3.1",
77
+ "eslint-plugin-import": "^2.25.3",
78
+ "eslint-plugin-jest": "^25.2.4",
79
+ "eslint-plugin-prettier": "^4.0.0",
80
+ "eslint-plugin-promise": "^5.1.1",
81
+ "eslint-plugin-react": "^7.27.0",
82
+ "eslint-plugin-react-hooks": "^4.3.0",
83
+ "eslint-plugin-react-native": "^3.11.0",
84
+ "html-webpack-plugin": "^5.5.0",
85
+ "husky": "^7.0.4",
42
86
  "jest": "^26.6.3",
87
+ "lint-staged": "^12.0.3",
43
88
  "metro-react-native-babel-preset": "^0.66.2",
89
+ "prettier": "^2.3.1",
44
90
  "react": "17.0.2",
45
91
  "react-dom": "17.0.2",
46
92
  "react-native": "0.66.2",
93
+ "react-native-size-matters": "^0.4.0",
47
94
  "react-native-storybook-loader": "^2.0.4",
48
95
  "react-native-web": "^0.17.5",
49
- "react-test-renderer": "17.0.2"
96
+ "react-test-renderer": "17.0.2",
97
+ "serve": "^13.0.2",
98
+ "styled-components": "^5.3.3",
99
+ "styled-system": "^5.1.5",
100
+ "url-loader": "^4.1.1",
101
+ "webpack": "^5.61.0",
102
+ "webpack-cli": "^4.9.1",
103
+ "webpack-dev-server": "^4.4.0"
50
104
  },
51
105
  "jest": {
52
- "preset": "jest-expo",
106
+ "preset": "react-native",
107
+ "moduleDirectories": [
108
+ "node_modules"
109
+ ],
53
110
  "transformIgnorePatterns": [
54
- "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)"
111
+ "node_modules/(?!react-native)/"
55
112
  ],
56
- "setupFilesAfterEnv": [
57
- "<rootDir>/__mocks__/globalMock.js"
58
- ]
113
+ "testEnvironment": "jsdom"
59
114
  },
60
115
  "repository": {
61
116
  "type": "git",
@@ -76,5 +131,8 @@
76
131
  "pattern": "**/*.stories.js",
77
132
  "outputFile": "./storybook/storyLoader.js"
78
133
  }
134
+ },
135
+ "resolutions": {
136
+ "styled-components": "^5"
79
137
  }
80
138
  }
package/lib/components/Typography.js DELETED
@@ -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 = ({ style = "body1", label }) => {
18
- return <Text>{label}</Text>;
19
- };
20
-
21
- Typography.propTypes = {
22
- style: PropTypes.oneOf(Object.values(STYLES)),
23
- };
package/lib/index.js DELETED
@@ -1 +0,0 @@
1
- export { Typography } from "./components/Typography";