jfs-components 0.0.1

package/lib/typescript/utils/web-platform-utils.d.ts

@@ -0,0 +1,172 @@
+import type { PressableProps } from 'react-native';
+/**
+ * Web-specific props that should NOT be passed to React Native's Pressable component.
+ * These props are valid in web DOM but not in React Native.
+ */
+declare const WEB_ONLY_PROPS: readonly ["onClick", "className", "href", "target", "rel", "download", "tabIndex", "onKeyDown", "onKeyUp", "onKeyPress"];
+type WebOnlyProp = typeof WEB_ONLY_PROPS[number];
+/**
+ * Props that can be safely omitted from Pressable while maintaining type safety.
+ */
+export type SafePressableProps = Omit<PressableProps, WebOnlyProp | 'style' | 'children' | 'onPress' | 'disabled' | 'accessibilityLabel' | 'accessibilityHint' | 'accessibilityState' | 'accessibilityRole'>;
+/**
+ * Filters out web-specific props that should not be passed to React Native Pressable.
+ * On native platforms, returns props unchanged.
+ * On web, removes dangerous props and logs warnings in dev mode.
+ *
+ * @param props - Props object to filter
+ * @returns Filtered props safe for Pressable
+ *
+ * @example
+ * ```tsx
+ * const { filteredProps } = filterWebProps(rest)
+ * <Pressable {...filteredProps} />
+ * ```
+ */
+export declare function filterWebProps<T extends Record<string, any>>(props: T): Omit<T, WebOnlyProp>;
+/**
+ * Creates keyboard event handlers for web accessibility.
+ * On native platforms, returns empty object.
+ * On web, adds Enter and Space key support to trigger onPress callback.
+ *
+ * @param onPress - Callback to trigger on keyboard activation
+ * @returns Object with onKeyDown handler (web only)
+ *
+ * @example
+ * ```tsx
+ * const keyboardHandlers = useKeyboardNavigation(onPress)
+ * <Pressable {...keyboardHandlers} />
+ * ```
+ */
+export declare function useKeyboardNavigation(onPress?: () => void): {
+    onKeyDown?: (e: any) => void;
+};
+/**
+ * Accessibility state interface for web ARIA attributes.
+ */
+export interface WebAccessibilityProps {
+    /**
+     * ARIA label for web (takes precedence over accessibilityLabel on web)
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA described-by reference
+     */
+    ariaDescribedBy?: string;
+    /**
+     * ARIA pressed state (for toggle buttons)
+     */
+    ariaPressed?: boolean | 'mixed';
+    /**
+     * ARIA expanded state (for expandable elements)
+     */
+    ariaExpanded?: boolean;
+    /**
+     * ARIA controls reference
+     */
+    ariaControls?: string;
+    /**
+     * ARIA current state
+     */
+    ariaCurrent?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+}
+/**
+ * Converts React Native accessibility props to web ARIA attributes.
+ * On native platforms, returns empty object.
+ * On web, maps RN props to proper ARIA attributes.
+ *
+ * @param accessibilityLabel - React Native accessibility label
+ * @param webProps - Web-specific accessibility props
+ * @returns Object with ARIA attributes (web only)
+ *
+ * @example
+ * ```tsx
+ * const ariaProps = getWebAccessibilityProps('Submit button', { ariaPressed: true })
+ * <Pressable {...ariaProps} />
+ * ```
+ */
+export declare function getWebAccessibilityProps(accessibilityLabel?: string, webProps?: WebAccessibilityProps): Record<string, any>;
+/**
+ * Ensures element is focusable on web for keyboard navigation.
+ * Returns tabIndex only on web platform.
+ *
+ * @param disabled - Whether the element is disabled
+ * @returns Object with tabIndex (web only)
+ */
+export declare function getFocusableProps(disabled?: boolean): {
+    tabIndex?: 0 | -1;
+};
+/**
+ * Combined hook for web platform support on Pressable components.
+ * Provides filtered props, keyboard handlers, and accessibility attributes.
+ *
+ * @param restProps - Rest props to filter
+ * @param onPress - Press handler
+ * @param disabled - Disabled state
+ * @param accessibilityLabel - Accessibility label
+ * @param webAccessibilityProps - Web-specific accessibility props
+ * @returns Combined web platform props
+ *
+ * @example
+ * ```tsx
+ * function Button({ onPress, disabled, accessibilityLabel, ...rest }: ButtonProps) {
+ *   const webProps = usePressableWebSupport({
+ *     restProps: rest,
+ *     onPress,
+ *     disabled,
+ *     accessibilityLabel,
+ *   })
+ *
+ *   return <Pressable {...webProps} />
+ * }
+ * ```
+ */
+export declare function usePressableWebSupport({ restProps, onPress, disabled, accessibilityLabel, webAccessibilityProps, }: {
+    restProps: Record<string, any>;
+    onPress?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    accessibilityLabel?: string | undefined;
+    webAccessibilityProps?: WebAccessibilityProps | undefined;
+}): {
+    tabIndex?: 0 | -1;
+    onKeyDown?: (e: any) => void;
+};
+/**
+ * Type guard to check if running on web platform
+ */
+export declare const isWeb: boolean;
+/**
+ * Type guard to check if running on native platform (iOS or Android)
+ */
+export declare const isNative: boolean;
+/**
+ * Focus management utilities for web
+ */
+export declare const WebFocusManager: {
+    /**
+     * Apply focus visible styles only on keyboard navigation (not mouse clicks)
+     */
+    getFocusVisibleStyle: (isFocused: boolean) => {
+        outlineWidth?: undefined;
+        outlineStyle?: undefined;
+        outlineColor?: undefined;
+        outlineOffset?: undefined;
+    } | {
+        outlineWidth: number;
+        outlineStyle: string;
+        outlineColor: string;
+        outlineOffset: number;
+    };
+    /**
+     * Remove default browser focus outline (use custom focus-visible instead)
+     */
+    removeDefaultOutline: () => {
+        outlineWidth?: undefined;
+        outlineStyle?: undefined;
+    } | {
+        outlineWidth: number;
+        outlineStyle: string;
+    };
+};
+export {};
+//# sourceMappingURL=web-platform-utils.d.ts.map

package/lib/typescript/utils/web-platform-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-platform-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/web-platform-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAElD;;;GAGG;AACH,QAAA,MAAM,cAAc,0HAWV,CAAA;AAEV,KAAK,WAAW,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAA;AAEhD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,EACd,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,oBAAoB,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,mBAAmB,CACtJ,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1D,KAAK,EAAE,CAAC,GACP,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,CA6BtB;AAaD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GACnB;IAAE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAAE,CAiBlC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;CACvE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACtC,kBAAkB,CAAC,EAAE,MAAM,EAC3B,QAAQ,CAAC,EAAE,qBAAqB,GAC/B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAiCrB;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;CAAE,CAQ3E;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,qBAAqB,GACtB,EAAE;IACD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvC,qBAAqB,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAA;CAC1D;eA/CmE,CAAC,GAAG,CAAC,CAAC;gBA7GzD,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI;EAwKhC;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,SAAwB,CAAA;AAE1C;;GAEG;AACH,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAE1E;;GAEG;AACH,eAAO,MAAM,eAAe;IAC1B;;OAEG;sCAC+B,OAAO;;;;;;;;;;;IAWzC;;OAEG;;;;;;;;CASJ,CAAA"}

package/package.json

@@ -0,0 +1,136 @@
+{
+  "name": "jfs-components",
+  "version": "0.0.1",
+  "description": "React Native Jio Finance Components Library",
+  "author": "sunshuaiqi@gmail.com",
+  "license": "MIT",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/*.stories.*",
+    "!**/test-setup.*"
+  ],
+  "scripts": {
+    "android": "yarn run prestorybook && react-native run-android",
+    "ios": "yarn run prestorybook && react-native run-ios",
+    "start": "react-native start",
+    "test": "jest",
+    "lint": "eslint .",
+    "prestorybook": "rnstl",
+    "storybook": "echo 'React Native Storybook is embedded in the app. Run: yarn ios or yarn android'",
+    "build-react": "webpack --mode production",
+    "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "extract-tokens": "node scripts/extract-component-tokens.js",
+    "generate-docs": "node scripts/generate-component-docs.js",
+    "prestorybook-web": "npm run extract-tokens && npm run generate-docs",
+    "storybook-web": "storybook dev -p 6006",
+    "build:storybook-web": "storybook build",
+    "deploy:storybook": "vercel --prod",
+    "postinstall": "patch-package",
+    "icons:generate": "node scripts/generate-icon-registry.js",
+    "prepare": "bob build",
+    "build": "bob build",
+    "prepack": "yarn icons:generate && bob build"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "config": {
+    "react-native-storybook-loader": {
+      "searchDir": [
+        "./src/components"
+      ],
+      "pattern": "**/*.stories.js",
+      "outputFile": "./storybook/storyLoader.js"
+    }
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^5.2.6",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "@shopify/flash-list": "^2.2.0",
+    "ajv": "^8.17.1",
+    "ajv-keywords": "^5.1.0",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-native-reanimated": "^4.1.5",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-svg": "^15.15.0",
+    "react-native-web": "^0.21.2",
+    "react-native-worklets": "^0.6.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "styled-components": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/parser": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@babel/traverse": "^7.28.5",
+    "@react-native-community/cli": "20.0.2",
+    "@react-native-community/cli-platform-android": "20.0.2",
+    "@react-native-community/cli-platform-ios": "20.0.2",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/babel-preset": "0.82.1",
+    "@react-native/metro-config": "0.82.1",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/react-native": "^10.0.7",
+    "@storybook/react-webpack5": "^10.0.8",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-native": "^0.73.0",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^9.39.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "eslint-plugin-storybook": "10.0.8",
+    "globals": "^16.5.0",
+    "html-webpack-plugin": "^5.6.5",
+    "jest": "^30.2.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "patch-package": "^8.0.1",
+    "prettier": "^3.6.2",
+    "react-dom": "19.1.1",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-storybook-loader": "^2.0.5",
+    "react-test-renderer": "19.1.1",
+    "remark-gfm": "^4.0.1",
+    "storybook": "^10.0.8",
+    "ts-migrate": "^0.1.35",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
+    "webpack": "^5.103.0",
+    "webpack-cli": "^6.0.1"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}

package/src/Containers.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const storyContainer = styled.View`
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`