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

package/package.json

@@ -1,91 +1,100 @@
 {
+  "version": "0.7.0",
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.101",
   "license": "MIT",
-  "files": [
-    "lib",
-    "index.js"
-  ],
-  "homepage": "https://bitbucket.org/d4fitwearapps/holper-storybook",
+  "packageManager": "yarn@4.5.0",
+  "homepage": "https://github.com/holperapp/holper-storybook",
   "repository": {
     "type": "git",
-    "url": "https://bitbucket.org/d4fitwearapps/holper-storybook.git"
+    "url": "https://github.com/holperapp/holper-storybook.git"
   },
   "bugs": {
-    "url": "https://bitbucket.org/d4fitwearapps/holper-storybook/issues",
+    "url": "https://github.com/holperapp/holper-storybook/issues",
     "email": "d4fitwear@gmail.com"
   },
   "scripts": {
-    "start": "npx expo start",
+    "start": "expo start",
     "build-dev": "eas build --profile development",
-    "build-preview": "eas build --profile preview",
-    "eject": "expo eject",
     "clear": "watchman watch-del-all",
-    "storybook": "start-storybook -p 7007",
-    "storybook-publish": "./build.sh"
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint:debug": "TIMING=all eslint -c ./eslint.config.mjs --debug",
+    "lint:fix": "eslint -c ./eslint.config.mjs --fix",
+    "lint": "eslint -c ./eslint.config.mjs",
+    "format:check": "prettier . --check --config prettier.config.mjs",
+    "format": "prettier . --write --config prettier.config.mjs",
+    "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo start --android",
+    "storybook:generate": "sb-rn-get-stories -js",
+    "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo start --ios",
+    "storybook:publish": "./build.sh",
+    "storybook:start": "cross-env STORYBOOK_ENABLED='true' expo start",
+    "type:check": "tsc --extendedDiagnostics",
+    "verify:fix": "yarn lint:fix && yarn format && yarn type:check",
+    "verify": "yarn lint && yarn format:check && yarn type:check"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.3.0",
-    "@react-native-community/slider": "4.5.6",
-    "expo": "^53.0.10",
-    "expo-asset": "~11.1.5",
-    "expo-camera": "~16.1.7",
-    "expo-font": "~13.3.1",
-    "expo-image": "~2.2.0",
+    "@expo/metro-runtime": "~5.0.4",
+    "@expo/vector-icons": "^14.1.0",
+    "@react-native-picker/picker": "2.11.1",
+    "@types/react": "~19.0.10",
+    "dayjs": "^1.11.13",
+    "expo": "^53.0.19",
+    "expo-camera": "~16.1.10",
+    "expo-constants": "~17.1.7",
+    "expo-dev-client": "~5.2.4",
+    "expo-font": "~13.3.2",
     "expo-image-manipulator": "~13.1.7",
     "expo-image-picker": "~16.1.4",
     "expo-media-library": "~17.1.7",
-    "expo-status-bar": "~2.2.3",
-    "moment": "^2.30.1",
-    "prop-types": "^15.8.1",
+    "expo-splash-screen": "~0.30.10",
+    "lodash": "^4.17.21",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.3",
-    "react-native-countdown-circle-timer": "^3.2.1",
-    "react-native-deck-swiper": "^2.0.16",
-    "react-native-dropdown-picker": "^5.4.6",
-    "react-native-flash-message": "^0.4.2",
+    "react-native": "0.79.5",
+    "react-native-deck-swiper": "^2.0.18",
     "react-native-maps": "1.20.1",
-    "react-native-maps-directions": "1.9.0",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-status-bar-height": "^2.6.0",
-    "react-native-svg": "15.11.2",
-    "react-native-vector-icons": "^10.0.3",
-    "react-native-web": "^0.20.0"
+    "react-native-picker-select": "^9.3.1",
+    "react-native-screens": "~4.11.1",
+    "react-native-web": "^0.20.0",
+    "sonner-native": "^0.21.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/traverse": "^7.26.9",
-    "@storybook/addon-actions": "^7.6.11",
-    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.6.11",
-    "@storybook/addon-ondevice-actions": "^7.6.11",
-    "@storybook/addon-ondevice-knobs": "^7.6.11",
-    "@storybook/preview-api": "^7.6.11",
-    "@storybook/react-native": "^6.5.7",
-    "@storybook/react-native-server": "^6.5.8",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-class-static-block": "^7.27.1",
+    "@eslint/js": "^9.31.0",
+    "@gorhom/bottom-sheet": "^4.6.4",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/slider": "4.5.6",
+    "@storybook/addon-ondevice-actions": "^8.3.5",
+    "@storybook/addon-ondevice-controls": "^8.3.5",
+    "@storybook/react-native": "^8.3.5",
+    "@types/lodash": "^4.17.20",
     "babel-loader": "^9.1.3",
-    "expo-dev-client": "~5.2.0"
-  },
-  "peerDependencies": {
-    "expo-camera": ">=13.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-native": ">=0.71.0"
+    "cross-env": "^7.0.3",
+    "eslint": "^9.30.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-perfectionist": "^4.15.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.3.0",
+    "lint-staged": "^16.1.2",
+    "prettier": "^3.6.2",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-svg": "15.11.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.37.0"
   },
-  "expo": {
-    "doctor": {
-      "reactNativeDirectoryCheck": {
-        "exclude": [
-          "react-native-maps",
-          "react-native-maps-directions",
-          "react-native-status-bar-height"
-        ],
-        "listUnknownPackages": false
-      }
-    }
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json,css,md}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   }
 }

package/prettier.config.mjs

@@ -0,0 +1,23 @@
+/**
+ * @type {import('prettier').Config}
+ * Need to restart IDE after changes.
+ * Open command palette and run (Ctrl + Shift + P) and execute the command > Reload Window.
+ */
+const config = {
+  semi: true,
+  tabWidth: 2,
+  endOfLine: 'lf',
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: 'es5',
+  overrides: [
+    {
+      files: '*.json',
+      options: {
+        tabWidth: 2,
+      },
+    },
+  ],
+};
+
+export default config;

package/stories/Button.stories.tsx

@@ -0,0 +1,181 @@
+import { Ionicons } from '@expo/vector-icons';
+
+import { Button, Text } from '../components';
+import { Colors } from '../configs/constants';
+import { ScrollView } from '../utilities';
+
+export default {
+  title: 'Button',
+  component: Button,
+  decorators: [
+    (Story: any) => (
+      <ScrollView>
+        <Story />
+      </ScrollView>
+    ),
+  ],
+};
+
+export const Variants = {
+  render: () => (
+    <>
+      <Button variant="primary">
+        <Text color="white">Primary Button</Text>
+      </Button>
+      <Button variant="secondary">
+        <Text>Secondary Button</Text>
+      </Button>
+      <Button variant="dim">
+        <Text>Button Dim</Text>
+      </Button>
+      <Button variant="light">
+        <Text>Button Light</Text>
+      </Button>
+      <Button variant="brightblue">
+        <Text>Button Bright</Text>
+      </Button>
+      <Button variant="lightgreen">
+        <Text>Button Light Green</Text>
+      </Button>
+      <Button variant="electricblue">
+        <Text>Button Electric Blue</Text>
+      </Button>
+      <Button variant="brightviolet">
+        <Text>Button Bright Violet</Text>
+      </Button>
+      <Button variant="darkyellow">
+        <Text>Button Dark Yellow</Text>
+      </Button>
+      <Button variant="inverted">
+        <Text color="white">Button Inverted</Text>
+      </Button>
+      <Button variant="error">
+        <Text color="white">Button Error</Text>
+      </Button>
+    </>
+  ),
+};
+
+export const Size = {
+  render: () => (
+    <>
+      <Button size="fit">
+        <Text color="white">Fit</Text>
+      </Button>
+      <Button>
+        <Text color="white">Medium</Text>
+      </Button>
+      <Button size="small">
+        <Text color="white">Small</Text>
+      </Button>
+      <Button size="tiny">
+        <Text color="white">Tiny</Text>
+      </Button>
+      <Button size="icon">
+        <Ionicons name="navigate-outline" size={24} color={Colors.white} />
+      </Button>
+    </>
+  ),
+};
+
+export const Bordered = {
+  render: () => (
+    <>
+      <Button bordered>
+        <Text>Button Primary Bordered</Text>
+      </Button>
+      <Button bordered variant="secondary">
+        <Text>Button Secondary Bordered</Text>
+      </Button>
+      <Button bordered variant="dim">
+        <Text>Button Dim Bordered</Text>
+      </Button>
+      <Button bordered variant="light">
+        <Text>Button Light</Text>
+      </Button>
+      <Button bordered variant="inverted">
+        <Text>Button Inverted Bordered</Text>
+      </Button>
+      <Button bordered variant="error">
+        <Text>Button Error Bordered</Text>
+      </Button>
+    </>
+  ),
+};
+
+export const Disabled = {
+  render: () => (
+    <>
+      <Button disabled>
+        <Text color="white">Button Primary Disabled</Text>
+      </Button>
+      <Button disabled variant="secondary">
+        <Text>Button Secondary Disabled</Text>
+      </Button>
+      <Button disabled variant="dim">
+        <Text>Button Dim Disabled</Text>
+      </Button>
+      <Button disabled variant="inverted">
+        <Text color="white">Button Inverted Disabled</Text>
+      </Button>
+      <Button disabled variant="error">
+        <Text color="white">Button Error Disabled</Text>
+      </Button>
+    </>
+  ),
+};
+
+export const NoShadow = {
+  render: () => (
+    <>
+      <Button disabled>
+        <Text color="white">Button Primary Disabled</Text>
+      </Button>
+      <Button disabled variant="secondary">
+        <Text>Button Secondary Disabled</Text>
+      </Button>
+      <Button disabled variant="dim">
+        <Text>Button Dim Disabled</Text>
+      </Button>
+      <Button disabled variant="inverted">
+        <Text color="white">Button Inverted Disabled</Text>
+      </Button>
+      <Button disabled variant="error">
+        <Text color="white">Button Error Disabled</Text>
+      </Button>
+    </>
+  ),
+};
+
+export const Loading = {
+  render: () => (
+    <>
+      <Button isLoading>
+        <Text color="white">Button Primary</Text>
+      </Button>
+      <Button variant="secondary" isLoading>
+        <Text>Button Secondary</Text>
+      </Button>
+      <Button variant="dim" isLoading>
+        <Text>Button Dim</Text>
+      </Button>
+      <Button variant="light" isLoading>
+        <Text>Button Light</Text>
+      </Button>
+      <Button variant="inverted" isLoading>
+        <Text color="white">Button Inverted</Text>
+      </Button>
+      <Button variant="error" isLoading>
+        <Text color="white">Button Error</Text>
+      </Button>
+    </>
+  ),
+};
+
+export const WithDebounce = {
+  render: () => (
+    <Button debounceDelay={2000}>
+      <Text color="white">Button Primary</Text>
+    </Button>
+  ),
+};

package/stories/Card.stories.tsx

@@ -0,0 +1,22 @@
+import { Card, Text } from '../components';
+
+export default {
+  title: 'Card',
+  component: Card,
+};
+
+export const Default = {
+  render: () => (
+    <Card>
+      <Text>The card with some text as content</Text>
+    </Card>
+  ),
+};
+
+export const AsButton = {
+  render: () => (
+    <Card isButton>
+      <Text>The card as text with some text as content</Text>
+    </Card>
+  ),
+};

package/stories/Colors.stories.tsx

@@ -0,0 +1,57 @@
+import { View } from 'react-native';
+
+import { Text } from '../components';
+import { Colors } from '../configs/constants';
+import { lightOrDark, ScrollView } from '../utilities';
+
+const colorList: { key: string; value: string }[] = [];
+for (const [key, value] of Object.entries(Colors)) {
+  colorList.push({ key, value });
+}
+
+export default {
+  title: 'Colors',
+  decorators: [
+    (Story: any) => (
+      <ScrollView
+        contentContainerStyle={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+        }}
+      >
+        <Story />
+      </ScrollView>
+    ),
+  ],
+};
+
+export const Default = {
+  render: () => (
+    <>
+      {colorList.map((color, index) => (
+        <View key={index} style={{ flexDirection: 'column', margin: 5 }}>
+          <View
+            style={{
+              height: 90,
+              width: 90,
+              backgroundColor: color.value,
+            }}
+          >
+            {color.key === 'transparent' ? (
+              <Text color="dark" size="small">
+                {color.key}:{'\n'}
+                {color.value}
+              </Text>
+            ) : (
+              <Text color={lightOrDark(color.value) === 'light' ? 'dark' : 'white'} size="small">
+                {color.key}:{'\n'}
+                {color.value}
+              </Text>
+            )}
+          </View>
+        </View>
+      ))}
+    </>
+  ),
+};

package/stories/ConfirmationModal.stories.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+
+import { Button, ConfirmationModal, Text } from '../components';
+
+export default {
+  title: 'Confirmation Modal',
+  component: ConfirmationModal,
+};
+
+const DefaultComponent = () => {
+  const [showDefault, setShowDefault] = useState<boolean>(false);
+  const [showAlert, setShowAlert] = useState<boolean>(false);
+
+  return (
+    <>
+      <Button onPress={() => setShowDefault(true)}>
+        <Text color="white">Default modal</Text>
+      </Button>
+      <Button variant="inverted" onPress={() => setShowAlert(true)}>
+        <Text color="white">Alert modal</Text>
+      </Button>
+
+      <ConfirmationModal
+        visible={showDefault}
+        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+        confirmText="Accept"
+        cancelText="Cancel"
+        onConfirm={() => setShowDefault(false)}
+        onCancel={() => setShowDefault(false)}
+      >
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
+          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
+          facilisi. Nulla molestie nisl et purus facilisis tempor.
+        </Text>
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        visible={showAlert}
+        title="Lorem ipsum dolor sit amet"
+        confirmText="Accept"
+        onConfirm={() => setShowAlert(false)}
+        alertMode
+      >
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
+          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
+          facilisi. Nulla molestie nisl et purus facilisis tempor.
+        </Text>
+      </ConfirmationModal>
+    </>
+  );
+};
+
+const InvertedComponent = () => {
+  const [showDefault, setShowDefault] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setShowDefault(true)}>
+        <Text color="white">Default modal</Text>
+      </Button>
+      <Button variant="inverted" onPress={() => setShowAlert(true)}>
+        <Text color="white">Alert modal</Text>
+      </Button>
+
+      <ConfirmationModal
+        inverted
+        visible={showDefault}
+        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+        confirmText="Accept"
+        cancelText="Cancel"
+        onConfirm={() => setShowDefault(false)}
+        onCancel={() => setShowDefault(false)}
+      >
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
+          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
+          facilisi. Nulla molestie nisl et purus facilisis tempor.
+        </Text>
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        inverted
+        visible={showAlert}
+        title="Lorem ipsum dolor sit amet"
+        confirmText="Accept"
+        onConfirm={() => setShowAlert(false)}
+        alertMode
+      >
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
+          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
+          facilisi. Nulla molestie nisl et purus facilisis tempor.
+        </Text>
+      </ConfirmationModal>
+    </>
+  );
+};
+
+const InfoModeComponent = () => {
+  const [showAlert, setShowAlert] = useState(false);
+
+  return (
+    <>
+      <Button variant="inverted" onPress={() => setShowAlert(true)}>
+        <Text color="white">Default modal</Text>
+      </Button>
+
+      <ConfirmationModal
+        visible={showAlert}
+        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+        infoMode
+        onClose={() => setShowAlert(false)}
+      >
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
+          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
+          facilisi. Nulla molestie nisl et purus facilisis tempor.
+        </Text>
+      </ConfirmationModal>
+    </>
+  );
+};
+
+export const Default = {
+  render: DefaultComponent,
+};
+
+export const Inverted = {
+  render: InvertedComponent,
+};
+
+export const InfoMode = {
+  render: InfoModeComponent,
+};