refactor(expogooglefonts): shifted implementation to use expo-google-…

…fonts
agrawal-rohit · Sep 21, 2021 · 5c14691 · 5c14691
1 parent 45e98a4
commit 5c14691
Show file tree

Hide file tree

Showing 22 changed files with 126 additions and 100 deletions.
diff --git a/.github/workflows/Publish.yml b/.github/workflows/Publish.yml
@@ -110,32 +110,32 @@ jobs:
       - name: Build
         run: yarn prepare
 
-      #----------------------------------------------
-      # Codacy Security Analysis
-      #----------------------------------------------
-      - name: Run Codacy Analysis CLI
-        uses: codacy/[email protected]
-        with:
-          # Check https://github.com/codacy/codacy-analysis-cli#project-token to get your project token from your Codacy repository
-          # You can also omit the token and run the tools that support default configurations
-          project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
-          verbose: true
-          output: results.sarif
-          format: sarif
-          # Adjust severity of non-security issues
-          gh-code-scanning-compat: true
-          # Force 0 exit code to allow SARIF file generation
-          # This will handover control about PR rejection to the GitHub side
-          max-allowed-issues: 2147483647
-
-
-      #----------------------------------------------
-      # Upload the SARIF file generated in the previous step
-      #----------------------------------------------
-      - name: Upload SARIF results file
-        uses: github/codeql-action/upload-sarif@v1
-        with:
-          sarif_file: results.sarif
+      # #----------------------------------------------
+      # # Codacy Security Analysis
+      # #----------------------------------------------
+      # - name: Run Codacy Analysis CLI
+      #   uses: codacy/[email protected]
+      #   with:
+      #     # Check https://github.com/codacy/codacy-analysis-cli#project-token to get your project token from your Codacy repository
+      #     # You can also omit the token and run the tools that support default configurations
+      #     project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
+      #     verbose: true
+      #     output: results.sarif
+      #     format: sarif
+      #     # Adjust severity of non-security issues
+      #     gh-code-scanning-compat: true
+      #     # Force 0 exit code to allow SARIF file generation
+      #     # This will handover control about PR rejection to the GitHub side
+      #     max-allowed-issues: 2147483647
+
+
+      # #----------------------------------------------
+      # # Upload the SARIF file generated in the previous step
+      # #----------------------------------------------
+      # - name: Upload SARIF results file
+      #   uses: github/codeql-action/upload-sarif@v1
+      #   with:
+      #     sarif_file: results.sarif
 
       #----------------------------------------------
       # Publish package

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": false
+}
diff --git a/App.tsx b/App.tsx
@@ -1,20 +1,25 @@
 import React from "react";
 import Storybook from "./storybook";
-import { useFonts } from "expo-font";
+import {
+  useFonts,
+  Poppins_300Light,
+  Poppins_400Regular,
+  Poppins_500Medium,
+  Poppins_600SemiBold,
+  Poppins_700Bold,
+  Poppins_800ExtraBold,
+} from "@expo-google-fonts/poppins";
 import Screen from "./src/components/Atoms/Screen/Screen";
-import AppLoading from "expo-app-loading";
 import { ThemeProvider } from "./src/theme/src/themeContext";
 
 const App = () => {
   const [haveFontsLoaded] = useFonts({
-    "Poppins-Regular": require("./src/fonts/Poppins-Regular.ttf"),
-    "Poppins-SemiBold": require("./src/fonts/Poppins-SemiBold.ttf"),
-    "Poppins-Bold": require("./src/fonts/Poppins-Bold.ttf"),
-    "Poppins-ExtraBold": require("./src/fonts/Poppins-ExtraBold.ttf"),
-    "Poppins-ExtraLight": require("./src/fonts/Poppins-ExtraLight.ttf"),
-    "Poppins-Light": require("./src/fonts/Poppins-Light.ttf"),
-    "Poppins-Medium": require("./src/fonts/Poppins-Medium.ttf"),
-    "Poppins-Thin": require("./src/fonts/Poppins-Thin.ttf"),
+    "Poppins-Light": Poppins_300Light,
+    "Poppins-Regular": Poppins_400Regular,
+    "Poppins-Medium": Poppins_500Medium,
+    "Poppins-SemiBold": Poppins_600SemiBold,
+    "Poppins-Bold": Poppins_700Bold,
+    "Poppins-ExtraBold": Poppins_800ExtraBold,
   });
 
   return (

diff --git a/documentationwebsite/docs/getting-started/installation.mdx b/documentationwebsite/docs/getting-started/installation.mdx
@@ -4,15 +4,13 @@ title: Installation
 ---
 
 :::caution
-Pearl UI is still in a **beta** stage. There might be some bugs and performance issue, please bear with us 😇
+Pearl UI is still in a **beta** stage. There might be some bugs and performance issues, please bear with us 😇
 :::
 
 :::info
 Pearl UI currently **only** supports React Native projects using [Expo](https://docs.expo.dev/)'s [managed workflow](https://docs.expo.dev/introduction/managed-vs-bare/#managed-workflow)
 :::
 
-## Installing the package
-
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 

diff --git a/documentationwebsite/src/pages/index.tsx b/documentationwebsite/src/pages/index.tsx
@@ -58,7 +58,7 @@ function FeaturesSection() {
     {
       title: "Accessible",
       description:
-        "Every components follows the official Android and Apple accessibility guidelines and provides screen reader support.",
+        "All components follow the official Android and Apple accessibility guidelines, as well as support for screen readers.",
       icon: <IoAccessibility fontSize={30} />,
     },
     {

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
+    "@expo-google-fonts/poppins": "^0.2.0",
     "@react-native-async-storage/async-storage": "~1.15.0",
     "@react-native-community/netinfo": "^6.0.2",
     "@storybook/addon-a11y": "^6.3.8",
@@ -32,9 +33,13 @@
     "@storybook/addon-toolbars": "^6.3.8",
     "@types/react-native-indicators": "^0.16.1",
     "@types/react-test-renderer": "^17.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "expo": "~42.0.1",
     "expo-app-loading": "^1.1.2",
+    "expo-font": "~9.2.1",
     "expo-status-bar": "~1.0.4",
+    "prettier": "^2.4.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
@@ -168,4 +173,4 @@
       }
     ]
   }
-}
+}
diff --git a/src/components/Atoms/ActivityIndicator/ActivityIndicator.tsx b/src/components/Atoms/ActivityIndicator/ActivityIndicator.tsx
@@ -43,6 +43,7 @@ const IndicatorTypeToComponentMap = {
   wave: WaveIndicator,
 };
 
+/** A spinner component which can be used to display a loading status to the user */
 const ActivityIndicator: React.FC<IActivityIndicatorProps> = ({
   loading = true,
   variant = "spinner",

diff --git a/src/components/Atoms/Box/Box.tsx b/src/components/Atoms/Box/Box.tsx
@@ -48,19 +48,10 @@ type ViewProps = React.ComponentProps<typeof View> & {
 };
 type ComponentProps = BoxProps & Omit<ViewProps, keyof BoxProps>;
 
-const createBox = () => {
-  const StyledBox = React.forwardRef((props: ComponentProps, ref: any) => {
-    const passedProps = useStyledProps(boxStyleFunctions, props);
+const Box = React.forwardRef((props: ComponentProps, ref: any) => {
+  const passedProps = useStyledProps(boxStyleFunctions, props);
 
-    return <View ref={ref} {...passedProps} />;
-  });
-
-  type StyledBoxComponentType = typeof StyledBox;
-  return StyledBox as StyledBoxComponentType & {
-    defaultProps?: Partial<React.ComponentProps<StyledBoxComponentType>>;
-  };
-};
-
-const Box = createBox();
+  return <View ref={ref} {...passedProps} />;
+});
 
 export default Box;
diff --git a/src/components/Atoms/Center/Center.tsx b/src/components/Atoms/Center/Center.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Box, { BoxProps } from "../Box/Box";
 
+/** A layout component which center aligns it's children across both axes */
 const Center: React.FC<BoxProps> = ({ children, ...rest }) => {
   return (
     <Box alignItems="center" justifyContent="center" {...rest}>

diff --git a/src/components/Atoms/Screen/Screen.tsx b/src/components/Atoms/Screen/Screen.tsx
@@ -3,6 +3,7 @@ import Box, { BoxProps } from "../Box/Box";
 import { SafeAreaView, StatusBar, Platform } from "react-native";
 import { useComponentConfig } from "../../../hooks/useComponentConfig";
 
+/** A layout component to wrap each screen in your app */
 const Screen: React.FC<BoxProps> = ({ children, ...rest }) => {
   const componentStyles = useComponentConfig("Screen", {});
 

diff --git a/src/components/Atoms/Text/Text.tsx b/src/components/Atoms/Text/Text.tsx
@@ -25,7 +25,6 @@ export type TextProps = ColorProps &
   TypographyProps &
   SpacingProps &
   TextShadowProps & {
-    size?: string;
     variant?: string;
   };
 
@@ -38,48 +37,38 @@ export const textStyleFunctions = [
   textShadow,
 ];
 
-/**
- * Text is the most abstract  text component.
- */
-const createText = <
-  Theme extends BasePearlTheme,
-  Props = React.ComponentProps<typeof RNText> & {
-    children?: React.ReactNode;
-  }
->() => {
-  const StyledText = React.forwardRef(
-    (props: TextProps & Omit<Props, keyof TextProps>, ref: any) => {
-      const passedProps = useStyledProps(textStyleFunctions, props);
-      const componentSpecificProps = useComponentConfig(
-        "Text",
-        {
-          variant: props.variant,
-        },
-        textStyleFunctions
-      );
+type RNTextProps = React.ComponentProps<typeof RNText> & {
+  children?: React.ReactNode;
+};
 
-      const finalStyle = {
-        ...componentSpecificProps.style,
-        ...passedProps.style,
-      };
+type ComponentProps = TextProps & Omit<RNTextProps, keyof TextProps>;
 
-      return (
-        <RNText
-          ref={ref}
-          {...componentSpecificProps}
-          {...passedProps}
-          style={finalStyle}
-        />
-      );
-    }
+/**
+ * Text is the component which controls the typography across your app. By default, it renders a <Text /> component
+ */
+const Text = React.forwardRef((props: ComponentProps, ref: any) => {
+  const passedProps = useStyledProps(textStyleFunctions, props);
+  const componentSpecificProps = useComponentConfig(
+    "Text",
+    {
+      variant: props.variant,
+    },
+    textStyleFunctions
   );
 
-  type StyledTextComponentType = typeof StyledText;
-  return StyledText as StyledTextComponentType & {
-    defaultProps?: Partial<React.ComponentProps<StyledTextComponentType>>;
+  const finalStyle = {
+    ...componentSpecificProps.style,
+    ...passedProps.style,
   };
-};
 
-const Text = createText<typeof baseTheme>();
+  return (
+    <RNText
+      ref={ref}
+      {...componentSpecificProps}
+      {...passedProps}
+      style={finalStyle}
+    />
+  );
+});
 
 export default Text;
diff --git a/src/components/Molecules/Button/Button.tsx b/src/components/Molecules/Button/Button.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { TouchableHighlight } from "react-native";
+import { Pressable } from "react-native";
 import ActivityIndicator from "../../Atoms/ActivityIndicator/ActivityIndicator";
 import Box, { BoxProps } from "../../Atoms/Box/Box";
 import Text from "../../Atoms/Text/Text";
@@ -15,7 +15,7 @@ const Button: React.FC<ButtonProps> = ({
   loading,
   ...props
 }) => (
-  <TouchableHighlight underlayColor="transparent" onPress={onPress}>
+  <Pressable onPress={onPress}>
     <Box
       py="m"
       px="m"
@@ -31,7 +31,7 @@ const Button: React.FC<ButtonProps> = ({
         <Text variant="button">{children}</Text>
       )}
     </Box>
-  </TouchableHighlight>
+  </Pressable>
 );
 
 export default Button;
diff --git a/src/fonts/Poppins-Black.ttf b/src/fonts/Poppins-Black.ttf
diff --git a/src/fonts/Poppins-Bold.ttf b/src/fonts/Poppins-Bold.ttf
diff --git a/src/fonts/Poppins-ExtraBold.ttf b/src/fonts/Poppins-ExtraBold.ttf
diff --git a/src/fonts/Poppins-ExtraLight.ttf b/src/fonts/Poppins-ExtraLight.ttf
diff --git a/src/fonts/Poppins-Light.ttf b/src/fonts/Poppins-Light.ttf
diff --git a/src/fonts/Poppins-Medium.ttf b/src/fonts/Poppins-Medium.ttf
diff --git a/src/fonts/Poppins-Regular.ttf b/src/fonts/Poppins-Regular.ttf
diff --git a/src/fonts/Poppins-SemiBold.ttf b/src/fonts/Poppins-SemiBold.ttf
diff --git a/src/fonts/Poppins-Thin.ttf b/src/fonts/Poppins-Thin.ttf
diff --git a/yarn.lock b/yarn.lock
@@ -1536,6 +1536,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@expo-google-fonts/poppins@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@expo-google-fonts/poppins/-/poppins-0.2.0.tgz#f6df892909142740b53d3227cb5eb24990ece151"
+  integrity sha512-NIwmzadXGHmS7F7nznfpObVAAi4PdSvueLKnPN3ERG0yMYrC8svEP2IY25H4xLoIGBazgkN192ZkStM3PMYajA==
+
 "@expo/[email protected]":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-2.0.4.tgz#955fd70a2aeefbe99ec71cecb1d7ea7b626dc79e"
@@ -3235,11 +3240,6 @@
     lodash "^4.17.4"
     read-pkg-up "^7.0.0"
 
-"@shopify/restyle@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@shopify/restyle/-/restyle-1.4.0.tgz#81d1fbfd16bf1688e7638aa53e6a524c623f936c"
-  integrity sha512-wzckvAzDE8Xi39EFAoO0cWpkvWY0sDI5CrxBn7Ae1Xzc9J17/IQKvTU8uxMN32jjE2VPwQ8i0BVuS8lJfIxUcQ==
-
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -8403,6 +8403,18 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
+  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
+
+eslint-plugin-prettier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
+  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -8825,6 +8837,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^2.0.2, fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -14828,11 +14845,23 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^2.0.5:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
   integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
 
+prettier@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
+  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+
 prettier@~2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"