fix: Updated peer dependencies

agrawal-rohit · Jan 3, 2024 · 5e49f1f · 5e49f1f · vercel · Jan 3, 2024
1 parent ad209eb
commit 5e49f1f
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 147 deletions.
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -71,3 +71,39 @@
     margin-bottom: 10px;
   }
 }
+
+.showcaseContainer {
+  padding: 50px;
+  border-radius: 16px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.lightShowcaseContainer {
+  background-image: radial-gradient(at top left, #222b45, transparent),
+    radial-gradient(at top right, #6356e5, transparent),
+    radial-gradient(at bottom left, #1a202c 200%, transparent);
+}
+
+.darkShowcaseContainer {
+  background-image: radial-gradient(at top left, #222b45, transparent),
+    radial-gradient(at top right, #6356e5, transparent),
+    radial-gradient(at bottom left, #1a202c 200%, transparent);
+}
+
+.showcaseContainer section {
+  flex: 0.8;
+}
+
+.showcaseContainer section h1 {
+  font-size: 22px;
+  font-weight: 600;
+  font-family: "Poppins";
+}
+
+.showcaseContainer section p {
+  font-size: 16px;
+  font-family: "Poppins";
+}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -165,14 +165,59 @@ function FeaturesSection() {
   );
 }
 
+function ExpoQRCodeSection() {
+  const { isDarkTheme } = useThemeContext();
+
+  return (
+    <section>
+      <div className="container">
+        <main
+          className={`${styles.showcaseContainer} ${
+            isDarkTheme
+              ? styles.darkShowcaseContainer
+              : styles.lightShowcaseContainer
+          }`}
+        >
+          <section>
+            <h1>Check out Pearl UI in action!</h1>
+            <p>
+              Simply scan the QR code using the Expo app on your device. This
+              will launch a live demo showcasing the wide array of ready-to-use
+              components and intuitive animations that Pearl UI offers.
+            </p>
+            <img
+              src={require("@site/static/img/showcase-qr-code.png").default}
+              style={{
+                width: 180,
+                height: 180,
+                padding: 10,
+                marginTop: 20,
+                borderRadius: 8,
+                backgroundColor: "white",
+              }}
+            />
+          </section>
+          <img
+            src={require("@site/static/img/showcase.png").default}
+            style={{
+              width: 200,
+              display: "flex",
+              height: "auto",
+              marginRight: 8,
+            }}
+          />
+        </main>
+      </div>
+    </section>
+  );
+}
+
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title} - ${siteConfig.tagline}`}
-      description="Pearl UI is a design-system-driven framework for developers to build
-      beautiful, accessible mobile apps straight out of the box. Take your
-      idea from a design mockup to a finished product at the speed of light!"
+      description="Pearl UI is a user-friendly UI library for React Native, offering ready-to-use components, framer-motion-like animations, dark mode, and responsive design. With its design-first approach and intuitive styling system, Pearl UI greatly enhances developer efficiency, simplifying and accelerating app development."
     >
       {/* <Head>
         <script async src="https://snack.expo.dev/embed.js"></script>
@@ -182,6 +227,9 @@ export default function Home(): JSX.Element {
       <FeaturesSection />
       <br />
       <br />
+      <ExpoQRCodeSection />
+      <br />
+      <br />
     </Layout>
   );
 }
diff --git a/docs/static/img/showcase-qr-code.png b/docs/static/img/showcase-qr-code.png
diff --git a/docs/static/img/showcase.png b/docs/static/img/showcase.png
diff --git a/package.json b/package.json
@@ -2,11 +2,18 @@
   "name": "pearl-ui",
   "main": "node_modules/expo/AppEntry.js",
   "module": "lib/module/index.js",
+  "react-native": "src/index.ts",
   "types": "lib/typescript/src/index.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "lib",
+    "src",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
   "typings": "lib/typescript/src/index.d.ts",
-  "react-native": "src/index.ts",
   "version": "2.3.1",
-  "source": "src/index",
   "repository": "https://github.com/agrawal-rohit/pearl-ui.git",
   "license": "MIT",
   "private": false,
@@ -26,8 +33,8 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.0.2",
-    "@expo/webpack-config": "^18.1.3",
-    "@react-native-async-storage/async-storage": "^1.18.2",
+    "@expo/webpack-config": "^19.0.0",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "crypto-js": "^4.2.0",
     "expo": "^49.0.13",
     "expo-app-loading": "^2.1.1",
@@ -36,15 +43,22 @@
     "expo-file-system": "~15.4.5",
     "expo-status-bar": "~1.6.0",
     "lodash": "^4.17.21",
-    "moti": "^0.27.2",
+    "moti": "0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.72.6",
-    "react-native-gesture-handler": "^2.12.0",
+    "react-native": "0.72.6",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-reanimated": "^3.3.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-web": "^0.19.9"
   },
+  "peerDependencies": {
+    "expo-av": "~13.4.1",
+    "expo-blur": "~12.4.1",
+    "expo-file-system": "~15.4.5",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-gesture-handler": "~2.12.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@commitlint/cli": "^17.7.2",
@@ -57,7 +71,6 @@
     "@types/jest": "29.5.5",
     "@types/lodash": "^4.14.199",
     "@types/react": "18.2.28",
-    "@types/react-native": "0.72.3",
     "@types/react-test-renderer": "18.0.3",
     "@welldone-software/why-did-you-render": "^7.0.1",
     "babel-loader": "^9.1.3",
@@ -106,13 +119,6 @@
       "<rootDir>/docs/"
     ]
   },
-  "files": [
-    "src",
-    "lib",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__"
-  ],
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -155,4 +161,4 @@
       }
     ]
   }
-}
+}
diff --git a/src/components/atoms/pressable/pressable.tsx b/src/components/atoms/pressable/pressable.tsx
@@ -127,10 +127,7 @@ const Pressable = React.memo(
         ..._.pick(props.animate, STYLE_PROPS_FOR_CONTAINER),
         ..._.pick(props.style, STYLE_PROPS_FOR_CONTAINER),
       };
-      const childStyles = _.omit(
-        { ...((props.style as object) || {}) },
-        STYLE_PROPS_FOR_CONTAINER
-      );
+      const childStyles = _.omit(props.style || {}, STYLE_PROPS_FOR_CONTAINER);
 
       // Methods to handle local pressable state
       const onPressInHandler = () => {

diff --git a/src/components/molecules/progress/progress.config.ts b/src/components/molecules/progress/progress.config.ts
@@ -109,7 +109,10 @@ const ProgressConfig: MolecularComponentConfig<ProgressAtoms> = {
   variants: {
     filled: {
       container: {
-        backgroundColor: "neutral.200",
+        bgColor: {
+          light: "neutral.200",
+          dark: "neutral.700",
+        },
       },
       bar: {
         bgColor: "primary.500",