@holper/react-native-holper-storybook 0.7.0 → 0.7.2

package/README.md

@@ -14,7 +14,7 @@ Run the command: `npm publish` this will build the lib before publishing.
 
 #### How to set up
 
-`import { asyncLoadFont } from  from 'react-native-holper-storybook';` and call the `asyncLoadFont` function in your app entry point.
+`import { useLoadFonts } from  from 'react-native-holper-storybook';` and call the `useLoadFonts` function in your app entry point.
 
 ```
 import { useEffect, useState } from 'react';

package/lib/components/DonutCountdown/style.ts

@@ -1,8 +1,9 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   center: {
     justifyContent: 'center',
     alignItems: 'center',
+    top: Platform.OS === 'android' ? 4 : 0,
   },
 });

package/lib/components/Input/style.ts

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import { Dimensions, Platform, StyleSheet } from 'react-native';
 
 import { borderRadius, Colors } from '../../configs/constants';
 
@@ -27,6 +27,7 @@ export default StyleSheet.create({
     fontFamily: 'poppins_regular',
     backgroundColor: Colors.white,
     marginVertical: 6,
+    paddingTop: Platform.OS === 'android' ? 14 : 0,
   },
   fixedSize: {
     width: width - 60,

package/lib/components/Select/index.tsx

@@ -29,6 +29,7 @@ const Select = ({
       Icon={() => <Feather name="chevron-down" size={24} style={style.iconStyle} />}
       useNativeAndroidPickerStyle={false}
       pickerProps={{ mode: 'dropdown', enabled: !disabled, itemStyle: style.itemStyle }}
+      dropdownItemStyle={style.dropdownStyle}
       style={{
         inputIOSContainer: { pointerEvents: 'none', ...style.basicStyle, ...style[`${variant}Container`] },
         inputAndroidContainer: { ...style.basicStyle, ...style[`${variant}Container`] },

package/lib/components/Select/style.ts

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import { Dimensions, Platform, StyleSheet } from 'react-native';
 
 import { borderRadius, Colors } from '../../configs/constants';
 
@@ -42,6 +42,7 @@ export default StyleSheet.create({
     flex: 1,
     color: Colors.darkblue,
     fontFamily: 'poppins_regular',
+    top: Platform.OS === 'android' ? 2 : 0,
   },
   errorFontStyle: {
     color: Colors.red,
@@ -56,6 +57,10 @@ export default StyleSheet.create({
     marginTop: 12,
     color: Colors.darkblue,
   },
+  dropdownStyle: {
+    backgroundColor: Colors.white,
+    color: Colors.darkblue,
+  },
   itemStyle: {
     color: Colors.darkblue,
     fontFamily: 'poppins_regular',

package/lib/components/Toast/index.tsx

@@ -1,4 +1,5 @@
 import { Ionicons } from '@expo/vector-icons';
+import { useColorScheme } from 'react-native';
 import { toast, Toaster } from 'sonner-native';
 
 import { Colors } from '../../configs/constants';
@@ -6,26 +7,39 @@ import style from './style';
 
 import type { ToastMessageProps } from '../../configs/types';
 
-const Toast = () => (
-  <Toaster
-    autoWiggleOnUpdate="toast-change"
-    closeButton
-    duration={3000}
-    icons={{
-      error: <Ionicons name="alert-circle-outline" color={Colors.darkred} size={30} />,
-      success: <Ionicons name="checkmark-circle-outline" color={Colors.darkgreen} size={30} />,
-    }}
-    pauseWhenPageIsHidden
-    position="top-center"
-    richColors
-    swipeToDismissDirection="up"
-    visibleToasts={4}
-    toastOptions={{
-      titleStyle: style.titleStyle,
-      descriptionStyle: style.descriptionStyle,
-    }}
-  />
-);
+const Toast = () => {
+  const colorScheme = useColorScheme();
+  const isDarkMode = colorScheme === 'dark';
+
+  return (
+    <Toaster
+      autoWiggleOnUpdate="toast-change"
+      closeButton
+      duration={3000}
+      icons={{
+        error: (
+          <Ionicons name="alert-circle-outline" color={isDarkMode ? Colors.brightred : Colors.darkred} size={30} />
+        ),
+        success: (
+          <Ionicons
+            name="checkmark-circle-outline"
+            color={isDarkMode ? Colors.brightgreen : Colors.darkgreen}
+            size={30}
+          />
+        ),
+      }}
+      pauseWhenPageIsHidden
+      position="top-center"
+      richColors
+      swipeToDismissDirection="up"
+      visibleToasts={4}
+      toastOptions={{
+        titleStyle: style.titleStyle,
+        descriptionStyle: style.descriptionStyle,
+      }}
+    />
+  );
+};
 
 export const sendMessage = ({ variant, message, description }: ToastMessageProps) => {
   toast[variant](message, { description });

package/lib/configs/constants.ts

@@ -8,6 +8,7 @@ export const Colors = {
   whiteice: '#E7EAEE',
   whitepearl: '#F7F8F9',
   // Greens
+  brightgreen: '#8AE8AD',
   darkgreen: '#008A2E',
   green: '#3FE384',
   lightergreen: '#F5FEFA',
@@ -28,6 +29,7 @@ export const Colors = {
   placeboPurple: '#F0ECFE',
   violet: '#300049',
   // Reds
+  brightred: '#E6A3A6',
   darkred: '#E60606',
   lightred: '#FFC1C1',
   red: '#FD4C4C',

package/package.json

@@ -1,9 +1,13 @@
 {
-  "version": "0.7.0",
   "main": "lib/index.js",
+  "version": "0.7.2",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
   "license": "MIT",
+  "files": [
+    "lib",
+    "index.js"
+  ],
   "packageManager": "yarn@4.5.0",
   "homepage": "https://github.com/holperapp/holper-storybook",
   "repository": {

package/.expo/README.md

@@ -1,8 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-> What do the files contain?
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-> Should I commit the ".expo" folder?
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.nvmrc

@@ -1 +0,0 @@
-22.17.0

package/.prettierignore

@@ -1,5 +0,0 @@
-# Ignore artifacts:
-build
-coverage
-# Ignore .storybook directory
-.storybook

package/.storybook/index.jsx

@@ -1,11 +0,0 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { view } from './storybook.requires';
-
-const StorybookUIRoot = view.getStorybookUI({
-  storage: {
-    getItem: AsyncStorage.getItem,
-    setItem: AsyncStorage.setItem,
-  },
-});
-
-export default StorybookUIRoot;

package/.storybook/main.js

@@ -1,8 +0,0 @@
-/** @type{import("@storybook/react-native").StorybookConfig} */
-module.exports = {
-  stories: ['../stories/**/*.stories.?(ts|tsx|js|jsx)'],
-  addons: [
-    '@storybook/addon-ondevice-controls',
-    '@storybook/addon-ondevice-actions',
-  ],
-};

package/.storybook/preview.jsx

@@ -1,51 +0,0 @@
-import { View } from 'react-native';
-import * as SplashScreen from 'expo-splash-screen';
-import { useLoadFonts } from '../hooks';
-import { Colors } from '../configs/constants';
-import { useEffect } from 'react';
-
-SplashScreen.preventAutoHideAsync();
-
-/** @type{import("@storybook/react").Preview} */
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-
-  decorators: [
-    (Story, { parameters }) => {
-      const { loaded, error } = useLoadFonts();
-
-      useEffect(() => {
-        if (loaded || error) {
-          SplashScreen.hideAsync();
-        }
-      }, [loaded, error]);
-
-      if (!loaded && !error) {
-        return null;
-      }
-
-      return (
-        <View
-          style={{
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: parameters.noBackground === true ? undefined : Colors.whiteice,
-            padding: 8,
-          }}
-        >
-          <Story />
-        </View>
-      );
-    },
-  ],
-};
-
-export default preview;

package/.storybook/storybook.requires.js

@@ -1,43 +0,0 @@
-/* do not change this file, it is auto generated by storybook. */
-
-import { start, updateView } from "@storybook/react-native";
-
-import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-actions/register";
-
-const normalizedStories = [
-  {
-    titlePrefix: "",
-    directory: "./stories",
-    files: "**/*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
-
-    req: require.context(
-      "../stories",
-      true,
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
-    ),
-  },
-];
-
-const annotations = [
-  require("./preview"),
-  require("@storybook/react-native/dist/preview"),
-  require("@storybook/addon-actions/preview"),
-];
-
-global.STORIES = normalizedStories;
-
-module?.hot?.accept?.();
-
-if (!global.view) {
-  global.view = start({
-    annotations,
-    storyEntries: normalizedStories,
-  });
-} else {
-  updateView(global.view, annotations, normalizedStories);
-}
-
-export const view = global.view;