npm - @bigbinary/neetoui-rn - Versions diffs - 0.0.8 → 0.0.9 - Mend

@bigbinary/neetoui-rn 0.0.8 → 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 (17) hide show

package/lib/components/Button.js +17 -16
package/lib/components/Container.js +14 -0
package/lib/components/Typography/Body.js +35 -0
package/lib/components/Typography/Callout.js +35 -0
package/lib/components/Typography/Caption1.js +35 -0
package/lib/components/Typography/Caption2.js +35 -0
package/lib/components/Typography/Headline.js +35 -0
package/lib/components/Typography/LargeTitle.js +35 -0
package/lib/components/Typography/Title1.js +35 -0
package/lib/components/Typography/Title2.js +35 -0
package/lib/components/Typography/Title3.js +35 -0
package/lib/components/Typography/Typography.js +55 -0
package/lib/components/index.js +13 -0
package/lib/theme/index.js +75 -0
package/package.json +16 -6
package/lib/components/Typography.js +0 -23
package/lib/index.js +0 -2

package/lib/components/Button.js CHANGED Viewed

@@ -1,19 +1,20 @@
-import React from "react";
-import { TouchableOpacity, Text, StyleSheet } from "react-native";
+import * as React from "react";
+import { flexbox, space, border, buttonStyle } from "styled-system";
+import styled from "styled-components/native";
-export const Button = ({ onPress, text }) => {
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Text style={styles.text}>{text}</Text>
-    </TouchableOpacity>
-  );
+export const TouchableOpacity = styled.TouchableOpacity`
+  ${flexbox}
+  ${space}
+  ${border}
+  ${buttonStyle}
+`;
+export const Button = ({ children, ...rest }) => {
+  return <TouchableOpacity {...rest}>{children}</TouchableOpacity>;
 };
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: "violet",
-  },
-  text: { color: "black" },
-});
+Button.defaultProps = {
+  variant: "primary",
+  p: 15,
+  alignItems: "center",
+};

package/lib/components/Container.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { flexbox, space, border, color, layout } from "styled-system";
+import styled from "styled-components/native";
+export const Container = styled.View`
+  ${flexbox}
+  ${space}
+  ${border}
+  ${color}
+  ${layout}
+`;
+Container.defaultProps = {
+  color: "background.default",
+};

package/lib/components/Typography/Body.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Body component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Body, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Body>
+ *         This is basic example of Body
+ *      </Body>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Body = ({ children, rest }) => {
+  return (
+    <Typography fontSize="body" fontFamily="regular" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Callout.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Callout component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Callout, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Callout>
+ *         This is basic example of Callout
+ *      </Callout>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Callout = ({ children, rest }) => {
+  return (
+    <Typography fontSize="callout" fontFamily="bold" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Caption1.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Caption1 component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Caption1, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Caption1>
+ *         This is basic example of Caption1
+ *      </Caption1>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Caption1 = ({ children, rest }) => {
+  return (
+    <Typography fontSize="caption1" fontFamily="regular" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Caption2.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Caption2 component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Caption2, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Caption2>
+ *         This is basic example of Caption2
+ *      </Caption2>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Caption2 = ({ children, ...rest }) => {
+  return (
+    <Typography fontSize="caption2" fontFamily="regular" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Headline.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Headline component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Headline, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Headline>
+ *         This is basic example of Headline
+ *      </Headline>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Headline = ({ children, rest }) => {
+  return (
+    <Typography fontSize="headline" fontFamily="bold" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/LargeTitle.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * LargeTitle component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { LargeTitle, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <LargeTitle>
+ *         This is basic example of LargeTitle
+ *      </LargeTitle>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const LargeTitle = ({ children, ...rest }) => {
+  return (
+    <Typography fontSize="largeTitle" fontFamily="bold" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Title1.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Title1 component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Title1, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Title1>
+ *         This is basic example of Title1
+ *      </Title1>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Title1 = ({ children, rest }) => {
+  return (
+    <Typography fontSize="title1" fontFamily="bold" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Title2.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Title2 component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Title2, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Title2>
+ *         This is basic example of Title2
+ *      </Title2>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Title2 = ({ children, rest }) => {
+  return (
+    <Typography fontSize="title2" fontFamily="bold" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Title3.js ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Typography } from "./Typography";
+// @component-group Typography Components
+/**
+ * Title3 component is a build on top of typography component with some default fontFamilty and fontSize.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Title3, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Title3>
+ *         This is basic example of Title3
+ *      </Title3>
+ *     </Container>
+ *  );
+ * }
+ *
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Title3 = ({ children, rest }) => {
+  return (
+    <Typography fontSize="title3" fontFamily="regular" {...rest}>
+      {children}
+    </Typography>
+  );
+};

package/lib/components/Typography/Typography.js ADDED Viewed

@@ -0,0 +1,55 @@
+import * as React from "react";
+import styled from "styled-components/native";
+import { space, layout, typography, color, textStyle } from "styled-system";
+export const Text = styled.Text`
+  ${space}
+  ${layout}
+  ${typography}
+  ${color}
+  ${textStyle}
+`;
+// @component-group Typography Components
+/**
+ * Typography component is a primitive text component built on top of styled-system.
+ *
+ * This component supports below props categories from [styled-system ](/styled-system)
+ *
+ * <ul>
+ * <li>space</li>
+ * <li>layout</li>
+ * <li>typography</li>
+ * <li>color</li>
+ * <li>textStyle</li>
+ * </ul>
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/typography-all.png" />
+ *   <img src="screenshots/typography-colors.png" />
+ *   <img src="screenshots/typography-fonts.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Typography, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Typography>
+ *         This is basic example of Typography
+ *      </Typography>
+ *     </Container>
+ *  );
+ * }
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+export const Typography = ({ children, ...rest }) => {
+  return <Text {...rest}>{children}</Text>;
+};

package/lib/components/index.js ADDED Viewed

@@ -0,0 +1,13 @@
+export { Button } from "./Button";
+export { Container } from "./Container";
+export { Typography } from "./Typography/Typography";
+export { LargeTitle } from "./Typography/LargeTitle";
+export { Title1 } from "./Typography/Title1";
+export { Title2 } from "./Typography/Title2";
+export { Title3 } from "./Typography/Title3";
+export { Headline } from "./Typography/Headline";
+export { Body } from "./Typography/Body";
+export { Callout } from "./Typography/Callout";
+export { Caption1 } from "./Typography/Caption1";
+export { Caption2 } from "./Typography/Caption2";

package/lib/theme/index.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { moderateScale } from "react-native-size-matters";
+const baseTheme = {
+  colors: {
+    font: {
+      default: "#FFFFFF",
+      base: "#2F3941",
+      primary: "#1B1F23",
+      secondary: "#676767",
+      danger: "#FE295C",
+    },
+    background: {
+      default: "#FFFFFF",
+      base: "#2F3941",
+      primary: "#E4E4E7",
+      secondary: "#E9EBED",
+    },
+    card: {
+      default: "#FFFFFF",
+      base: "#2F3941",
+      primary: "#F8F9F9",
+      secondary: "#E9EBED",
+    },
+    border: {
+      default: "#FFFFFF",
+      base: "#2F3941",
+      primary: "#E4E4E7",
+      danger: "#FE295C",
+    },
+  },
+  fonts: {
+    // We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
+    // https://www.bigbinary.com/learn-react-native/adding-custom-fonats
+    // thin: "Inter-Thin",
+    // extraLight: "Inter-ExtraLight",
+    // light: "Inter-Light",
+    // medium: "Inter-Medium",
+    // semiBold: "Inter-SemiBold",
+    // extraBold: "Inter-ExtraBold",
+    // black: "Inter-Black",
+    regular: "Inter-Regular",
+    bold: "Inter-Bold",
+  },
+  fontSizes: {
+    largeTitle: moderateScale(32),
+    title1: moderateScale(24),
+    title2: moderateScale(18),
+    title3: moderateScale(18),
+    headline: moderateScale(14),
+    body: moderateScale(14),
+    callout: moderateScale(12),
+    caption1: moderateScale(12),
+    caption2: moderateScale(10),
+  },
+};
+export const theme = {
+  ...baseTheme,
+  buttons: {
+    primary: {
+      color: baseTheme.colors.white,
+      backgroundColor: baseTheme.colors.grey800,
+    },
+    secondary: {
+      color: baseTheme.colors.grey800,
+      backgroundColor: baseTheme.colors.white,
+    },
+    disabled: {
+      color: baseTheme.colors.white,
+      backgroundColor: baseTheme.colors.grey,
+    },
+  },
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -11,6 +11,7 @@
     "test": "jest",
     "lint": "eslint .",
     "format": "prettier --write .",
+    "flow": "flow",
     "precommit": "lint-staged",
     "prestart": "sb-rn-get-stories",
     "storybook-watcher": "sb-rn-watcher",
@@ -58,6 +59,7 @@
     "@storybook/addon-ondevice-controls": "^6.0.1-alpha.6",
     "@storybook/addon-ondevice-knobs": "^5.3.25",
     "@storybook/addon-ondevice-notes": "^6.0.1-alpha.6",
+    "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/addons": "^6.3.1",
     "@storybook/cli": "^6.3.12",
     "@storybook/react": "^6.3.12",
@@ -68,6 +70,7 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-native-web": "^0.17.5",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "7.14.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-babel-module": "^5.3.1",
@@ -81,29 +84,33 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
+    "lint-staged": "^12.0.3",
     "metro-react-native-babel-preset": "^0.66.2",
     "prettier": "^2.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.66.2",
+    "react-native-size-matters": "^0.4.0",
     "react-native-storybook-loader": "^2.0.4",
     "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",
     "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
   },
   "jest": {
-    "preset": "jest-expo",
+    "preset": "react-native",
+    "moduleDirectories": [
+      "node_modules"
+    ],
     "transformIgnorePatterns": [
-      "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)"
+      "node_modules/(?!react-native)/"
     ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/__mocks__/globalMock.js"
-    ]
+    "testEnvironment": "jsdom"
   },
   "repository": {
     "type": "git",
@@ -124,5 +131,8 @@
       "pattern": "**/*.stories.js",
       "outputFile": "./storybook/storyLoader.js"
     }
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

package/lib/components/Typography.js DELETED Viewed

@@ -1,23 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Text } from "react-native";
-// const STYLES = {
-//   h1: "h1",
-//   h2: "h2",
-//   h3: "h3",
-//   h4: "h4",
-//   h5: "h5",
-//   h6: "h6",
-//   body1: "body1",
-//   body2: "body2",
-//   body3: "body3",
-// };
-export const Typography = ({ label }) => {
-  return <Text>{label}</Text>;
-};
-Typography.propTypes = {
-  label: PropTypes.string,
-};

package/lib/index.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export { Typography } from "./components/Typography";
2	- export { Button } from "./components/Button";