@0610studio/zs-ui 0.0.1

package/build/ui/index.d.ts

@@ -0,0 +1,14 @@
+import ZSView from './ZSView';
+import AnimatedWrapper from './atoms/AnimatedWrapper';
+import TextAtom from './atoms/TextAtom';
+import ScrollViewAtom from './atoms/ScrollViewAtom';
+import ZSContainer from './ZSContainer';
+import ZSPressable from './ZSPressable';
+import ZSText from './ZSText';
+import ThrottleButton from './ThrottleButton';
+import ZSTextField from './ZSTextField';
+import ZSRadioGroup from './ZSRadioGroup';
+import ZSBottomButton from './ZSBottomButton';
+import * as types from './types';
+export { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, types };
+//# sourceMappingURL=index.d.ts.map

package/build/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,eAAe,MAAM,yBAAyB,CAAC;AACtD,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,EACN,CAAC"}

package/build/ui/index.js

@@ -0,0 +1,14 @@
+import ZSView from './ZSView';
+import AnimatedWrapper from './atoms/AnimatedWrapper';
+import TextAtom from './atoms/TextAtom';
+import ScrollViewAtom from './atoms/ScrollViewAtom';
+import ZSContainer from './ZSContainer';
+import ZSPressable from './ZSPressable';
+import ZSText from './ZSText';
+import ThrottleButton from './ThrottleButton';
+import ZSTextField from './ZSTextField';
+import ZSRadioGroup from './ZSRadioGroup';
+import ZSBottomButton from './ZSBottomButton';
+import * as types from './types';
+export { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, types };
+//# sourceMappingURL=index.js.map

package/build/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,eAAe,MAAM,yBAAyB,CAAC;AACtD,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,EACN,CAAC","sourcesContent":["import ZSView from './ZSView';\nimport AnimatedWrapper from './atoms/AnimatedWrapper';\nimport TextAtom from './atoms/TextAtom';\nimport ScrollViewAtom from './atoms/ScrollViewAtom';\nimport ZSContainer from './ZSContainer';\nimport ZSPressable from './ZSPressable';\nimport ZSText from './ZSText';\nimport ThrottleButton from './ThrottleButton';\nimport ZSTextField from './ZSTextField';\nimport ZSRadioGroup from './ZSRadioGroup';\nimport ZSBottomButton from './ZSBottomButton';\nimport * as types from './types';\n\nexport {\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  types\n};"]}

package/build/ui/types.d.ts

@@ -0,0 +1,14 @@
+export interface RadioOption {
+    value: string;
+    index: string;
+}
+export type ShadowLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export interface ShadowStyle {
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/build/ui/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ui/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/build/ui/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/ui/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/ui/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface RadioOption {\n    value: string;\n    index: string;\n}\n\nexport type ShadowLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;\n\nexport interface ShadowStyle {\n  shadowOffset: { width: number; height: number };\n  shadowOpacity: number;\n  shadowRadius: number;\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "tvos", "android", "web"],
+  "ios": {
+    "modules": ["ZsUiModule"]
+  },
+  "android": {
+    "modules": ["kr.co.studio0610.zsui.ZsUiModule"]
+  }
+}

package/ios/ZsUi.podspec

@@ -0,0 +1,27 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'ZsUi'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
+  s.swift_version  = '5.4'
+  s.source         = { git: 'https://github.com/0610studio' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,swift}"
+end

package/ios/ZsUiModule.swift

@@ -0,0 +1,44 @@
+import ExpoModulesCore
+
+public class ZsUiModule: Module {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('ZsUi')` in JavaScript.
+    Name("ZsUi")
+
+    // Sets constant properties on the module. Can take a dictionary or a closure that returns a dictionary.
+    Constants([
+      "PI": Double.pi
+    ])
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(ZsUiView.self) {
+      // Defines a setter for the `name` prop.
+      Prop("name") { (view: ZsUiView, prop: String) in
+        print(prop)
+      }
+    }
+  }
+}

package/ios/ZsUiView.swift

@@ -0,0 +1,7 @@
+import ExpoModulesCore
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class ZsUiView: ExpoView {
+  
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@0610studio/zs-ui",
+  "version": "0.0.1",
+  "private": false,
+  "description": "EXPO ZS-UI",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "start:android": "cd example && yarn install && npx expo run:android",
+    "build": "expo-module build",
+    "prepare": "expo-module prepare",
+    "---------------------------------------------------------------------------": "",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "zs-ui",
+    "ZsUi"
+  ],
+  "repository": "https://github.com/0610studio/zs-ui",
+  "author": "righthot <0610studio@naver.com> ()",
+  "license": "MIT",
+  "homepage": "https://github.com/0610studio/zs-ui",
+  "dependencies": {},
+  "devDependencies": {
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@types/react": "^18.0.25",
+    "expo-module-scripts": "^3.5.2",
+    "expo-modules-core": "^1.12.24",
+    "react": ">=16.8.0",
+    "react-native": ">=0.63.0",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-reanimated": "^3.16.0",
+    "react-native-safe-area-context": "^4.11.1",
+    "react-native-svg": "^15.8.0"
+  },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": "*",
+    "expo": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*"
+  }
+}

package/src/ZsUi.types.ts

@@ -0,0 +1,7 @@
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type ZsUiViewProps = {
+  name: string;
+};

package/src/ZsUiModule.ts

@@ -0,0 +1,5 @@
+import { requireNativeModule } from 'expo-modules-core';
+
+// It loads the native module object from the JSI or falls back to
+// the bridge module (from NativeModulesProxy) if the remote debugger is on.
+export default requireNativeModule('ZsUi');

package/src/ZsUiModule.web.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from 'expo-modules-core';
+
+const emitter = new EventEmitter({} as any);
+
+export default {
+  PI: Math.PI,
+  async setValueAsync(value: string): Promise<void> {
+    emitter.emit('onChange', { value });
+  },
+  hello() {
+    return 'Hello world! 👋';
+  },
+};

package/src/ZsUiView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+
+import { ZsUiViewProps } from './ZsUi.types';
+
+const NativeView: React.ComponentType<ZsUiViewProps> =
+  requireNativeViewManager('ZsUi');
+
+export default function ZsUiView(props: ZsUiViewProps) {
+  return <NativeView {...props} />;
+}

package/src/ZsUiView.web.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { ZsUiViewProps } from './ZsUi.types';
+
+export default function ZsUiView(props: ZsUiViewProps) {
+  return (
+    <div>
+      <span>{props.name}</span>
+    </div>
+  );
+}

package/src/assets/SvgCheck.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+export const SvgCheck = ({ size = 24, color = '#fff', strokeWidth = "2" }) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M6 12L10.2426 16.2426L18.727 7.75732"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

package/src/assets/SvgX.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+export const SvgX = ({ size = 12, color = '#5E696E' }) => {
+  const strokeWidth = size * 0.12;
+  
+  return (
+    <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <Path
+        d={`
+          M ${size * 0.25} ${size * 0.25}
+          Q ${size / 2} ${size / 2} ${size * 0.75} ${size * 0.75}
+          M ${size * 0.25} ${size * 0.75}
+          Q ${size / 2} ${size / 2} ${size * 0.75} ${size * 0.25}
+        `}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};

package/src/index.ts

@@ -0,0 +1,52 @@
+import { 
+  ZSView,
+  AnimatedWrapper,
+  TextAtom,
+  ScrollViewAtom,
+  ZSContainer,
+  ZSPressable,
+  ZSText,
+  ThrottleButton,
+  ZSTextField,
+  ZSRadioGroup,
+  ZSBottomButton,
+  types as uiTypes 
+} from './ui';
+
+import { 
+  AlertNotify, 
+  BottomSheetNotify, 
+  SnackbarNotify, 
+  useNotifyProvider, 
+  useNotify,
+  BSTextInput,
+  PopOverButton,
+  PopOverMenu,
+  types as notifyTypes 
+} from './notify';
+
+export {
+  ZSView,
+  AnimatedWrapper,
+  TextAtom,
+  ScrollViewAtom,
+  ZSContainer,
+  ZSPressable,
+  ZSText,
+  ThrottleButton,
+  ZSTextField,
+  ZSRadioGroup,
+  ZSBottomButton,
+  // ---
+  AlertNotify, 
+  BottomSheetNotify, 
+  SnackbarNotify, 
+  useNotifyProvider, 
+  useNotify, 
+  BSTextInput,
+  PopOverButton,
+  PopOverMenu,
+  // ---
+  uiTypes,      // UI 관련 타입
+  notifyTypes   // Notify 관련 타입
+};

package/src/model/types.ts

@@ -0,0 +1,102 @@
+import { ReactNode } from "react";
+import { TextProps, TouchableOpacityProps } from "react-native";
+
+export interface NotifyProps {
+    alertVisible: boolean;
+    setAlertVisible: (visible: boolean) => void;
+    // ---
+    snackItemStack: SnackItem[];
+    hideSnackBar: (index: number) => void;
+    // ---
+    bottomSheetVisible: boolean;
+    setBottomSheetVisible: (visible: boolean) => void;
+    // ---
+    loaderVisible: boolean;
+    // ---
+    popOverVisible: boolean;
+    setPopOverVisible: (visible: boolean) => void;
+    // ---
+    showAlert: (props: ShowAlertProps) => void;
+    showSnackBar: (props: ShowSnackBarProps) => void;
+    showBottomSheet: (props: ShowBottomSheetProps) => void;
+    showLoader: () => void;
+    showPopOverMenu: (props: PopOverMenuProps) => void;
+    // ---
+    hideNotify: (option: HideOption) => void;
+}
+
+export interface PopOverMenuProps {
+    px: number;
+    py: number;
+    component: React.ReactNode;
+}
+
+export interface ShowBottomSheetProps {
+    backgroundColor?: string;
+    isBottomRadius?: boolean;
+    marginHorizontal?: number;
+    isHandleVisible?: boolean;
+    marginBottom?: number;
+    padding?: number;
+    component: React.ReactNode;
+    contentsGestureEnable?: boolean;
+    maxHeight?: number;
+    isScrollView?: boolean;
+};
+
+export interface CustomSnackbarProps {
+    snackType: SnackType;
+    snackMessage: string;
+};
+
+export interface NotifyProviderProps {
+    children: ReactNode;
+    customSnackbar?: (props: CustomSnackbarProps) => React.ReactNode;
+    loaderComponent?: () => React.ReactNode;
+};
+
+export interface AlertAction {
+    label: string;
+    onPress?: () => void;
+};
+
+export interface ShowAlertProps {
+    title: string;
+    informative: string;
+    actions?: AlertActions;
+    isBackgroundTouchClose?: boolean;
+    titleStyle?: TextProps['style'];
+    informativeStyle?: TextProps['style'];
+    secondaryButtonStyle?: TouchableOpacityProps['style'];
+    primaryButtonStyle?: TouchableOpacityProps['style'];
+    secondaryButtonTextStyle?: TextProps['style'];
+    primaryButtonTextStyle?: TextProps['style'];
+    singleButtonTextStyle?: TextProps['style'];
+};
+
+export interface AlertActions {
+    primary: AlertAction;
+    secondary?: AlertAction;
+};
+
+export interface SnackItem {
+    message: string;
+    type: SnackType;
+    index: number;
+    snackbarDuration?: number;
+};
+
+export type SnackType = 'success' | 'error' | '';
+
+export type HideOption = 'all' | 'snack' | 'alert' | 'bottomSheet' | 'loader' | 'popOver';
+
+export interface ShowSnackBarProps {
+    message: string;
+    type?: SnackType;
+    index?: number;
+    snackbarDuration?: number;
+};
+
+export interface BottomSheetRef {
+    handleVisible: (isOpen: boolean) => void;
+};

package/src/model/useNotify.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import { NotifyProps } from './types';
+
+const NotifyContext = createContext<NotifyProps | null>(null);
+
+export const useNotify = () => {
+    const context = useContext(NotifyContext);
+    if (!context) {
+        throw new Error('useNotify must be used within a NotifyProvider');
+    }
+    return context;
+};
+
+export default NotifyContext;