pixel-react 1.9.0 → 1.9.1

package/src/components/MobileSkin/MobileSkin.scss

@@ -12,56 +12,56 @@
   &.landscape {
     gap: 38px;
   }
-}
 
-.ff-mobileskin-container {
-  @extend .ff-mobileskin-wrapper;
-}
+  .ff-mobileskin-container {
+    @extend .ff-mobileskin-wrapper;
+    .ff-mobile-container {
+      @include center-content;
+      border: 8px solid var(--text-color);
+      border-radius: 30px;
+      position: relative;
+      overflow: hidden;
 
-.ff-mobile-container {
-  border: 8px solid var(--text-color);
-  @include center-content;
-  position: relative;
-  overflow: hidden;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
 
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+      }
+      .ff-mobile-image-container {
+        @include center-content;
+        overflow: hidden;
+      }
+    }
   }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
+  .ff-notch {
+    background-color: var(--text-color);
+    border-radius: 24px;
+    position: absolute;
+    &.android-notch {
+      border-radius: 50%;
+    }
   }
-}
-
-.ff-mobile-image-container {
-  @include center-content;
-  overflow: hidden;
-}
-
-.ff-notch {
-  background-color: var(--text-color);
-  border-radius: 24px;
-  position: absolute;
-}
-
-.ff-nav-bar {
-  height: 32px;
-  padding: 8px;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  border: 1px solid var(--brand-color);
-  border-radius: 24px;
-}
-
-.ff-nav-bar-icon {
-  height: 16px;
-  padding: 8px;
-  border-right: 1px solid var(--brand-color);
-  @include center-content;
+  .ff-nav-bar {
+    height: 32px;
+    padding: 8px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border: 1px solid var(--brand-color);
+    border-radius: 24px;
+  }
+  .ff-nav-bar-icon {
+    height: 16px;
+    padding: 8px;
+    border-right: 1px solid var(--brand-color);
+    @include center-content;
 
-  &.last-icon {
-    border-right: none;
+    &.last-icon {
+      border-right: none;
+    }
   }
 }

package/src/components/MobileSkin/MobileSkin.tsx

@@ -22,7 +22,9 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
 
   return (
     <div
-      className={`ff-mobileskin-wrapper ${isPortrait ? 'portrait' : 'landscape'}`}
+      className={`ff-mobileskin-wrapper ${
+        isPortrait ? 'portrait' : 'landscape'
+      }`}
     >
       <div
         className="ff-mobileskin-container"
@@ -36,7 +38,6 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
           style={{
             width: containerWidth,
             height: containerHeight,
-            borderRadius: isIos ? '30px' : '10px',
           }}
         >
           <div className="ff-mobile-image-container">
@@ -55,18 +56,18 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
           </div>
         </div>
 
-        {isIos && (
-          <div
-            className="ff-notch"
-            style={{
-              height: isPortrait ? notchHeight : notchWidth,
-              width: isPortrait ? notchWidth : notchHeight,
-              transform: isPortrait
-                ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.46}px)`
-                : `translate(${containerWidth * -0.46}px, ${containerHeight * -0.01}px)`,
-            }}
-          ></div>
-        )}
+        <div
+          className={`ff-notch ${!isIos ? 'android-notch' : ''}`}
+          style={{
+            height: !isIos ? 15 : isPortrait ? notchHeight : notchWidth,
+            width: !isIos ? 15 : isPortrait ? notchWidth : notchHeight,
+            transform: isPortrait
+              ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.43}px)`
+              : `translate(${containerWidth * -0.46}px, ${
+                  containerHeight * -0.01
+                }px)`,
+          }}
+        ></div>
       </div>
       <div className="ff-nav-bar">
         {navBarIcons.map((icon, index) => (

package/src/components/MobileSkin/types.ts

@@ -12,7 +12,7 @@ export interface MobileSkinProps {
   /**
    *    Portrait or landScape View of the Mobile
    */
-  orientation: string;
+  orientation: "portrait" | "landscape";
   /**
    * type either it will be ios or android
    */

package/src/index.ts

@@ -162,6 +162,7 @@ import {
   ELEMENTS_WHITE_SPACE_REGEX,
   PARAMETER_ALPHANUMERIC_REGEX,
 } from './validations/regex';
+import { getFromIndexedDB, saveToIndexedDB } from './utils/indexDBStore/indexDB';
 
 export {
   Button,
@@ -270,6 +271,8 @@ export {
   FormatString,
   hasDuplicateFile,
   useKeyboardActions,
+  saveToIndexedDB,
+  getFromIndexedDB,
   
   EMAIL_REGEX,
   URL_REGEX,

package/src/utils/indexDBStore/indexDB.ts

@@ -0,0 +1,37 @@
+import { openDB, DBSchema } from 'idb';
+
+// Define the database schema
+interface MyDB extends DBSchema {
+  items: {
+    key: string; // Key for each item
+    value: string; // Stored value, encoded as a string
+  };
+}
+
+// Open the database
+const dbPromise = openDB<MyDB>('my-database', 1, {
+  upgrade(db) {
+    if (!db.objectStoreNames.contains('items')) {
+      db.createObjectStore('items');
+    }
+  },
+});
+
+// Encoding utility
+const encode = (data: string): string => btoa(unescape(encodeURIComponent(data))); // Example: Base64 encoding
+// Decoding utility
+const decode = (data: string): string => decodeURIComponent(escape(atob(data)));
+
+// Save data to IndexedDB
+export const saveToIndexedDB = async (key: string, value: string): Promise<void> => {
+  const db = await dbPromise;
+  const encodedValue = encode(value);
+  await db.put('items', encodedValue, key);
+};
+
+// Get data from IndexedDB
+export const getFromIndexedDB = async (key: string): Promise<string | null> => {
+  const db = await dbPromise;
+  const encodedValue = await db.get('items', key);
+  return encodedValue ? decode(encodedValue) : null;
+};

package/lib/components/ThemeProvider/CustomThemeProvider.d.ts

@@ -1,8 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ThemeContextType } from './types';
-declare const ThemeContext: React.Context<ThemeContextType | undefined>;
-declare const CustomThemeProvider: React.FC<{
-    children: ReactNode;
-}>;
-export { ThemeContext };
-export default CustomThemeProvider;

package/lib/hooks/useCustomThemeProvider.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-interface ThemeContextType {
-    currentTheme: string;
-    setCurrentTheme: React.Dispatch<React.SetStateAction<string>>;
-    applyTheme: (newTheme: string) => void;
-}
-export declare const useCustomThemeProvider: React.FC<{
-    children: ReactNode;
-}>;
-export declare const useTheme: () => ThemeContextType;
-export {};