@estuary-solutions/rn-core-ui 0.0.3

package/example/RNCoreUISample/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+  ignorePatterns: ['metro.config.js', 'documents/**'],
+  rules: {
+    'react/jsx-filename-extension': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'requireConfigFile': 'false'
+  },
+};

package/example/RNCoreUISample/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/example/RNCoreUISample/App.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+function App() {
+  return (
+    <GestureHandlerRootView style={styles.flex1}>
+      <SafeAreaProvider>
+        <View style={styles.flex1}>
+          <Text>Just a temp view</Text>
+        </View>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+});
+
+export default App;

package/example/RNCoreUISample/README.md

@@ -0,0 +1,104 @@
+This is a sample project, bootstrapped using [`@estuary-solutions/rn-core-ui`](https://lubrytics.com:9929/minhnhat.tran/estuary-rn-core-ui).
+
+# Getting Started
+
+**Note:** If you are new to this project just follow this command:
+
+```sh
+# If you are currently in root package folder
+# Run yarn install for the first time
+yarn install
+
+# Run yarn build for apply you local changes -> build -> copy to example/RNCoreUISample/node_modules
+yarn build
+
+# From now if you are in example/RNCoreUISample. Just run yarn install
+# All your changes in package will be packed and copy to example/RNCoreUISample/node_modules
+yarn install
+```
+
+## Initialize
+
+### Start app without Storybook
+To get started with the project without using Storybook follow those commands:
+
+```sh
+# Install require package (This will include fix node_modules and install local package)
+yarn install
+
+# For Android Developer
+yarn android
+
+# OR
+
+# For iOS Developer
+yarn ios
+```
+
+### Start app with Storybook
+
+For running app with Storybook follow those commands:
+
+```sh
+# Install require package (This will include fix node_modules and install local package)
+yarn install
+
+# For Developer using MacOS use this script:
+yarn storybook-android
+
+# OR
+
+yarn storybook-ios
+
+# For Developer using Window use this script:
+yarn windows-storybook-android
+```
+
+**Note:** Storybook can only be start within Metro. So if you don't really need to rebuild the app and want to switch from *None Storybook* to *Storybook*. Just close Metro and run the following script:
+
+```sh
+# For start Metro with apply Storybook
+yarn storybook-start
+```
+
+### Start Storybook Web
+
+For running Web with Storybook follow this command:
+
+```sh
+yarn storybook-web
+```
+
+### Build Storybook Web For Deploy Website
+
+For deploy Storybook Web follow this command:
+
+```sh
+# This script will generate a static storybook folder called:
+# estuary-core-ui
+# You can deploy that to Netify, AWS, Github, etc
+yarn storybook-build-web
+```
+
+## Contributed package
+
+If you're already updated the package, you should run `yarn build` in the root package first, then you can install package in sample project.
+
+```sh
+# Move to root folder
+cd ../..
+
+# Install require package
+yarn install
+
+# Build your contributed code
+yarn build
+
+# Move to sample project
+cd example/RNCoreUISample
+
+# Installing new contributed package
+yarn install
+
+# NOTE: You may need to remove node_modules in sample project if the package not install correctly.
+```

package/example/RNCoreUISample/babel.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      'react-native-reanimated/plugin',
+      {
+        processNestedWorklets: true,
+      },
+    ],
+    [
+      'module-resolver',
+      {
+        root: ['./src/'],
+        alias: {
+          '@constant': './src/constants',
+          '@layout': './src/views/Layout.js',
+          '@utils': './src/utils',
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-private-methods',
+      {
+        loose: true,
+      },
+    ],
+    ['module:react-native-dotenv'],
+  ],
+};

package/example/RNCoreUISample/documents/storybook/manager.js

@@ -0,0 +1,5 @@
+import React5, { useRef, useCallback, useEffect, useState } from 'react';
+import { addons, types, useGlobalTypes, useStorybookApi, useGlobals } from 'storybook/internal/manager-api';
+import { Separator, WithTooltip, TooltipLinkList, IconButton } from 'storybook/internal/components';
+
+var defaultItemValues={type:"item",value:""},normalizeArgType=(key,argType)=>({...argType,name:argType.name||key,description:argType.description||key,toolbar:{...argType.toolbar,items:argType.toolbar.items.map(_item=>{let item=typeof _item=="string"?{value:_item,title:_item}:_item;return item.type==="reset"&&argType.toolbar.icon&&(item.icon=argType.toolbar.icon,item.hideIcon=!0),{...defaultItemValues,...item}})}});var disallowedCycleableItemTypes=["reset"],createCycleValueArray=items=>items.filter(item=>!disallowedCycleableItemTypes.includes(item.type)).map(item=>item.value);var ADDON_ID="addon-toolbars";var registerShortcuts=async(api,id,shortcuts)=>{shortcuts&&shortcuts.next&&await api.setAddonShortcut(ADDON_ID,{label:shortcuts.next.label,defaultShortcut:shortcuts.next.keys,actionName:`${id}:next`,action:shortcuts.next.action}),shortcuts&&shortcuts.previous&&await api.setAddonShortcut(ADDON_ID,{label:shortcuts.previous.label,defaultShortcut:shortcuts.previous.keys,actionName:`${id}:previous`,action:shortcuts.previous.action}),shortcuts&&shortcuts.reset&&await api.setAddonShortcut(ADDON_ID,{label:shortcuts.reset.label,defaultShortcut:shortcuts.reset.keys,actionName:`${id}:reset`,action:shortcuts.reset.action});};var withKeyboardCycle=Component=>props=>{let{id,toolbar:{items,shortcuts}}=props,api=useStorybookApi(),[globals,updateGlobals]=useGlobals(),cycleValues=useRef([]),currentValue=globals[id],reset=useCallback(()=>{updateGlobals({[id]:""});},[updateGlobals]),setNext=useCallback(()=>{let values=cycleValues.current,currentIndex=values.indexOf(currentValue),newCurrentIndex=currentIndex===values.length-1?0:currentIndex+1,newCurrent=cycleValues.current[newCurrentIndex];updateGlobals({[id]:newCurrent});},[cycleValues,currentValue,updateGlobals]),setPrevious=useCallback(()=>{let values=cycleValues.current,indexOf=values.indexOf(currentValue),currentIndex=indexOf>-1?indexOf:0,newCurrentIndex=currentIndex===0?values.length-1:currentIndex-1,newCurrent=cycleValues.current[newCurrentIndex];updateGlobals({[id]:newCurrent});},[cycleValues,currentValue,updateGlobals]);return useEffect(()=>{shortcuts&&registerShortcuts(api,id,{next:{...shortcuts.next,action:setNext},previous:{...shortcuts.previous,action:setPrevious},reset:{...shortcuts.reset,action:reset}});},[api,id,shortcuts,setNext,setPrevious,reset]),useEffect(()=>{cycleValues.current=createCycleValueArray(items);},[]),React5.createElement(Component,{cycleValues:cycleValues.current,...props})};var getSelectedItem=({currentValue,items})=>currentValue!=null&&items.find(item=>item.value===currentValue&&item.type!=="reset"),getSelectedIcon=({currentValue,items})=>{let selectedItem=getSelectedItem({currentValue,items});if(selectedItem)return selectedItem.icon},getSelectedTitle=({currentValue,items})=>{let selectedItem=getSelectedItem({currentValue,items});if(selectedItem)return selectedItem.title};var ToolbarMenuButton=({active,disabled,title,icon,description,onClick})=>React5.createElement(IconButton,{active,title:description,disabled,onClick:disabled?()=>{}:onClick},icon&&React5.createElement(Icons,{icon,__suppressDeprecationWarning:!0}),title?`\xA0${title}`:null);var ToolbarMenuListItem=({right,title,value,icon,hideIcon,onClick,disabled,currentValue})=>{let Icon=icon&&React5.createElement(Icons,{style:{opacity:1},icon,__suppressDeprecationWarning:!0}),Item={id:value??"_reset",active:currentValue===value,right,title,disabled,onClick};return icon&&!hideIcon&&(Item.icon=Icon),Item};var ToolbarMenuList=withKeyboardCycle(({id,name,description,toolbar:{icon:_icon,items,title:_title,preventDynamicIcon,dynamicTitle}})=>{let[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),currentValue=globals[id],hasGlobalValue=!!currentValue,isOverridden=id in storyGlobals,icon=_icon,title=_title;preventDynamicIcon||(icon=getSelectedIcon({currentValue,items})||icon),dynamicTitle&&(title=getSelectedTitle({currentValue,items})||title),!title&&!icon&&console.warn(`Toolbar '${name}' has no title or icon`);let handleItemClick=useCallback(value=>{updateGlobals({[id]:value});},[id,updateGlobals]);return React5.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>{let links=items.filter(({type})=>{let shouldReturn=!0;return type==="reset"&&!currentValue&&(shouldReturn=!1),shouldReturn}).map(item=>ToolbarMenuListItem({...item,currentValue,disabled:isOverridden,onClick:()=>{handleItemClick(item.value),onHide();}}));return React5.createElement(TooltipLinkList,{links})},closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React5.createElement(ToolbarMenuButton,{active:isTooltipVisible||hasGlobalValue,disabled:isOverridden,description:description||"",icon,title:title||""}))});var ToolbarManager=()=>{let globalTypes=useGlobalTypes(),globalIds=Object.keys(globalTypes).filter(id=>!!globalTypes[id].toolbar);return globalIds.length?React5.createElement(React5.Fragment,null,React5.createElement(Separator,null),globalIds.map(id=>{let normalizedArgType=normalizeArgType(id,globalTypes[id]);return React5.createElement(ToolbarMenuList,{key:id,id,...normalizedArgType})})):null};addons.register(ADDON_ID,()=>addons.add(ADDON_ID,{title:ADDON_ID,type:types.TOOL,match:({tabId})=>!tabId,render:()=>React5.createElement(ToolbarManager,null)}));

package/example/RNCoreUISample/fix_node_modules.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+
+fs.copyFile(
+  'documents/storybook/manager.js',
+  'node_modules/@storybook/addon-toolbars/dist/manager.js',
+  err => {
+    if (err) {
+      console.log('Fail to copy file: manager.js');
+    }
+    console.log('Done copy file: manager.js');
+  },
+);

package/example/RNCoreUISample/index.js

@@ -0,0 +1,20 @@
+/**
+ * @format
+ */
+
+import { AppRegistry } from 'react-native';
+import App from './App'; // Import thành phần App chính của bạn
+import { name as appName } from './app.json';
+
+// Mặc định, thành phần gốc là App
+let RootComponent = App;
+// let RootComponent = require('./.rnstorybook').default;
+
+// Kiểm tra biến môi trường để quyết định hiển thị gì
+if (process.env.STORYBOOK_ENABLED === 'true') {
+  // Chỉ khi ở chế độ Storybook, chúng ta mới yêu cầu (require) và sử dụng giao diện của nó
+  RootComponent = require('./.rnstorybook').default;
+}
+
+// Đăng ký thành phần gốc đã được chọn với React Native
+AppRegistry.registerComponent(appName, () => RootComponent);

package/example/RNCoreUISample/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

package/example/RNCoreUISample/metro.config.js

@@ -0,0 +1,30 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const path = require('path');
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {};
+
+// module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+const finalConfig = mergeConfig(defaultConfig, config);
+
+/**
+ * @type {import('@storybook/react-native/metro/withStorybook').WithStorybookOptions}
+ */
+const storybookOptions = {
+  // set this to "enabled: true" to enable storybook config always
+  enabled: process.env.STORYBOOK_ENABLED === 'true',
+  configPath: path.resolve(__dirname, './.rnstorybook'),
+
+  // set this to true to remove storybook from the bundle when disabled
+  onDisabledRemoveStorybook: true,
+};
+module.exports = withStorybook(finalConfig, storybookOptions);

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@estuary-solutions/rn-core-ui",
+  "version": "0.0.3",
+  "description": "React Native Core UI components Powered by Estuary Solutions",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./themes": {
+      "import": "./themes/index.js",
+      "require": "./themes/index.js"
+    },
+    "./utils": {
+      "import": "./utils/index.js",
+      "require": "./utils/index.js"
+    },
+    "./Cards/*": {
+      "import": "./Cards/*.js",
+      "require": "./Cards/*.js"
+    },
+    "./Badges/*": {
+      "import": "./Badges/*.js",
+      "require": "./Badges/*.js"
+    },
+    "./Accordion/*": {
+      "import": "./Accordion/*.js",
+      "require": "./Accordion/*.js"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.js.map",
+    "**/*.d.ts.map",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "example": "yarn --cwd example",
+    "build": "node documents/buildFromRoot.js",
+    "publish-lib": "yarn build && cd dist && npm publish --registry=https://registry.npmjs.org/ --access public"
+  },
+  "author": "tuankiet.pham",
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "core-ui",
+    "bottom-sheet",
+    "react-native-bottom-sheet",
+    "react-native-bottom-sheet-modal",
+    "svg"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://lubrytics.com:9929/minhnhat.tran/estuary-rn-core-ui.git"
+  },
+  "homepage": "https://lubrytics.com:9929/minhnhat.tran/estuary-rn-core-ui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "0.71.0",
+    "react-native-device-info": ">=8.1.3",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-iphone-x-helper": "^1.3.1",
+    "react-native-reanimated": ">=3.10.0",
+    "react-native-svg": ">=12.1.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11",
+    "@types/react": "18.2.38",
+    "@types/react-native": "0.71",
+    "esbuild": "^0.25.3",
+    "esbuild-plugin-alias": "^0.2.1",
+    "fast-glob": "^3.3.3",
+    "react-native-device-info": "8.1.3",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": "^2.25.0",
+    "react-native-iphone-x-helper": "1.3.1",
+    "react-native-reanimated": "3.17.4",
+    "react-native-svg": "12.1.1",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.8.3"
+  },
+  "resolutions": {
+    "@types/react": "18.2.38"
+  },
+  "packageManager": "yarn@4.6.0",
+  "dependencies": {
+    "fs-extra": "^11.3.3",
+    "react-native-linear-gradient": "^2.8.3"
+  }
+}

package/src/constants/DraggableFlatList/draggable.d.ts

@@ -0,0 +1,12 @@
+export { };
+
+declare global {
+  var LayoutAnimationRepository: {
+    configs: Record<number, unknown>;
+    registerConfig: (tag: number, config: unknown) => void;
+    removeConfig: (tag: number) => void;
+  };
+  var RNDFLLayoutAnimationConfigStash:
+    | Record<number, unknown>
+    | undefined;
+}