@neko-os/ui 0.0.5 → 0.0.6

package/dist/theme/ThemeHandler.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{getThemeValue}from"./helpers/relatedScales";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_BREAKPOINTS=[{name:'sm',value:768},{name:'md',value:1024},{name:'lg',value:1440},{name:'xlg',value:10000}];var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useBreakpoints=function useBreakpoints(){var _useThemeHandler;return((_useThemeHandler=useThemeHandler())==null?void 0:_useThemeHandler.breakpoints)||DEFAULT_BREAKPOINTS;};export var useTheme=function useTheme(groupKey){var theme=useThemeHandler().theme||DEFAULT_LIGHT_THEME;if(!groupKey)return theme;return(theme==null?void 0:theme[groupKey])||{};};export var useGetThemeValue=function useGetThemeValue(groupKey){var group=useTheme(groupKey);return function(key){return getThemeValue(group,key);};};export var useColors=function useColors(){return useTheme('colors');};export var useGetColor=function useGetColor(){return useGetThemeValue('colors');};export var useSpaces=function useSpaces(){return useTheme('spaces');};export var useGetSpace=function useGetSpace(){return useGetThemeValue('spaces');};export var useRadius=function useRadius(){return useTheme('radius');};export var useGetRadius=function useGetRadius(){return useGetThemeValue('radius');};export var useElementHeights=function useElementHeights(){return useTheme('elementHeights');};export var useGetElementHeight=function useGetElementHeight(){return useGetThemeValue('elementHeights');};export var useTexts=function useTexts(){return useTheme('texts');};export var useGetText=function useGetText(){return useGetThemeValue('text');};export var useThemeComponents=function useThemeComponents(){return useTheme('components');};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var breakpoints=_ref.breakpoints,themes=_ref.themes,initTheme=_ref.initTheme,children=_ref.children;var _React$useState=React.useState(initTheme||'light'),_React$useState2=_slicedToArray(_React$useState,2),activeThemeKey=_React$useState2[0],setActiveThemeKey=_React$useState2[1];var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,setActiveThemeKey:setActiveThemeKey,breakpoints:breakpoints||DEFAULT_BREAKPOINTS};return _jsx(ThemeContext.Provider,{value:value,children:children});}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{getThemeValue}from"./helpers/relatedScales";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_BREAKPOINTS=[{name:'sm',value:768},{name:'md',value:1024},{name:'lg',value:1440},{name:'xl',value:10000}];var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useBreakpoints=function useBreakpoints(){var _useThemeHandler;return((_useThemeHandler=useThemeHandler())==null?void 0:_useThemeHandler.breakpoints)||DEFAULT_BREAKPOINTS;};export var useTheme=function useTheme(groupKey){var theme=useThemeHandler().theme||DEFAULT_LIGHT_THEME;if(!groupKey)return theme;return(theme==null?void 0:theme[groupKey])||{};};export var useGetThemeValue=function useGetThemeValue(groupKey){var group=useTheme(groupKey);return function(key){return getThemeValue(group,key);};};export var useColors=function useColors(){return useTheme('colors');};export var useGetColor=function useGetColor(){return useGetThemeValue('colors');};export var useSpaces=function useSpaces(){return useTheme('spaces');};export var useGetSpace=function useGetSpace(){return useGetThemeValue('spaces');};export var useRadius=function useRadius(){return useTheme('radius');};export var useGetRadius=function useGetRadius(){return useGetThemeValue('radius');};export var useElementHeights=function useElementHeights(){return useTheme('elementHeights');};export var useGetElementHeight=function useGetElementHeight(){return useGetThemeValue('elementHeights');};export var useTexts=function useTexts(){return useTheme('texts');};export var useGetText=function useGetText(){return useGetThemeValue('text');};export var useThemeComponents=function useThemeComponents(){return useTheme('components');};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var breakpoints=_ref.breakpoints,themes=_ref.themes,initTheme=_ref.initTheme,children=_ref.children;var _React$useState=React.useState(initTheme||'light'),_React$useState2=_slicedToArray(_React$useState,2),activeThemeKey=_React$useState2[0],setActiveThemeKey=_React$useState2[1];var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,setActiveThemeKey:setActiveThemeKey,breakpoints:breakpoints||DEFAULT_BREAKPOINTS};return _jsx(ThemeContext.Provider,{value:value,children:children});}

package/dist/theme/default/base.js

@@ -1 +1 @@
-export var BASE_THEME={spaces:{xxxsm:1,xxsm:3,xsm:5,sm:10,md:15,lg:20,xlg:30,xxlg:40,xxxlg:50},radius:{xxxsm:4,xxsm:5,xsm:5,sm:7,md:8,lg:10,xlg:12,xxlg:15,xxxlg:18},icons:{xxxsm:10,xxsm:12,xsm:14,sm:16,md:18,lg:22,xlg:26,xxlg:28,xxxlg:32},elementHeights:{xsm:20,sm:30,md:35,lg:50,xlg:60},texts:{h1:{fontSize:32,strong:true},h2:{fontSize:26,strong:true},h3:{fontSize:22,strong:true},h4:{fontSize:18,strong:true},h5:{fontSize:16,strong:true},h6:{fontSize:14,strong:true},p:{fontSize:14},sm:{fontSize:12},xsm:{fontSize:10},xxsm:{fontSize:8}}};
+export var BASE_THEME={spaces:{xxxs:1,xxs:3,xs:5,sm:10,md:15,lg:20,xl:30,xxl:40,xxxl:50},radius:{xxxs:4,xxs:5,xs:5,sm:7,md:8,lg:10,xl:12,xxl:15,xxxl:18},icons:{xxxs:10,xxs:12,xs:14,sm:16,md:18,lg:22,xl:26,xxl:28,xxxl:32},elementHeights:{xs:20,sm:30,md:35,lg:50,xl:60},texts:{h1:{fontSize:32,strong:true},h2:{fontSize:26,strong:true},h3:{fontSize:22,strong:true},h4:{fontSize:18,strong:true},h5:{fontSize:16,strong:true},h6:{fontSize:14,strong:true},p:{fontSize:14},sm:{fontSize:12},xs:{fontSize:10},xxs:{fontSize:8}}};

package/dist/theme/default/darkTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',bg:'#383E44',overlayBG:'#272D34',shadow:'rgba(39, 45, 52, 0.6)',divider:'rgba(255,255,255, 0.2)',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',bg:'#383E44',overlayBG:'#272D34',shadow:'rgba(216, 210, 203, 0.1)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/hackerTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#00FF41',text:'#00FF41',text2:'#00CC33',text3:'#009926',text4:'#00661A',bg:'#000000',overlayBG:'#0A0A0A',shadow:'rgba(0, 255, 65, 0.2)',divider:'rgba(0,255,65, 0.3)',blue:'#0087BD',yellow:'#AEBF00',green:'#00FF41',purple:'#7A1FA2',orange:'#FF6D00',cyan:'#00BFA5',red:'#D50000',navy:'#003366',indigo:'#303F9F',gray:'#4A4A4A',brown:'#5D4037',lylac:'#8E24AA',pink:'#C51162'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#00FF41',text:'#00FF41',text2:'#00CC33',text3:'#009926',text4:'#00661A',bg:'#000000',overlayBG:'#0A0A0A',shadow:'rgba(0, 255, 65, 0.2)',divider:'rgba(0,255,65, 0.3)',blue:'#0087BD',yellow:'#AEBF00',green:'#00FF41',purple:'#7A1FA2',orange:'#FF6D00',cyan:'#00BFA5',red:'#D50000',navy:'#003366',indigo:'#303F9F',gray:'#4A4A4A',brown:'#5D4037',lylac:'#8E24AA',pink:'#C51162'},components:{Card:{border:1,br:5,borderColor:'divider'}}});

package/dist/theme/default/lightTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',bg:'#F4F5FE',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'rgba(0,0,0, 0.1)',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',bg:'#F4F5FE',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'#e0e0e0',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/msdosTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MSDOS_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FFFF00',text:'#FFFFFF',text2:'#FFD700',text3:'#CCCCCC',text4:'#999999',bg:'#0000AA',overlayBG:'#000088',shadow:'rgba(0, 0, 0, 0.6)',divider:'rgba(255,255,255,0.3)',blue:'#0000FF',yellow:'#FFFF00',green:'#00FF00',purple:'#AA00FF',orange:'#FF7700',cyan:'#00FFFF',red:'#FF0000',navy:'#000080',indigo:'#4B0082',gray:'#B0B0B0',brown:'#8B4513',lylac:'#9370DB',pink:'#FF69B4'},components:{Card:{borderWidth:1,br:5,borderColor:'divider'}}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MSDOS_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FFFF00',text:'#FFFFFF',text2:'#FFD700',text3:'#CCCCCC',text4:'#999999',bg:'#0000AA',overlayBG:'#000088',shadow:'rgba(0, 0, 0, 0.6)',divider:'rgba(255,255,255,0.3)',blue:'#0000FF',yellow:'#FFFF00',green:'#00FF00',purple:'#AA00FF',orange:'#FF7700',cyan:'#00FFFF',red:'#FF0000',navy:'#000080',indigo:'#4B0082',gray:'#B0B0B0',brown:'#8B4513',lylac:'#9370DB',pink:'#FF69B4'},components:{Card:{border:1,br:5,borderColor:'divider'}}});

package/dist/theme/helpers/contrastColor.js

@@ -0,0 +1 @@
+import tinycolor from'tinycolor2';export function getContrastColor(bg){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:['#FFFFFF','#666666'];var tolerance=arguments.length>2&&arguments[2]!==undefined?arguments[2]:2.5;if(!options.length)return'#666666';return tinycolor.mostReadable(bg,options).toHexString();}

package/dist/theme/helpers/dynamicColor.js

@@ -0,0 +1 @@
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var BASE_COLORS=['text3','blue','yellow','green','purple','orange','cyan','red','navy','indigo','gray','brown','lylac','pink'];var COLORS=[].concat(BASE_COLORS,_toConsumableArray(BASE_COLORS.map(function(c){return`${c}+10`;})),_toConsumableArray(BASE_COLORS.map(function(c){return`${c}-10`;})));export function getDynamicColor(id){var num;if(typeof id==='number'){num=id;}else{num=String(id).split('').reduce(function(acc,char){return acc+char.charCodeAt(0);},0);}var index=num%COLORS.length;return COLORS[index];}

package/dist/theme/helpers/relatedScales.js

@@ -1 +1 @@
-import{is}from'ramda';var SCALES=[['xxxsm'],['xxsm'],['xsm'],['sm','small'],['md','p'],['lg','h6'],['xlg','h5'],['xxlg','h4'],['xxxlg','h3']];export function getScaleSynonyms(key){return SCALES.find(function(list){return list.includes(key);})||[];}export function getThemeValue(group,key,defaultValue){defaultValue=defaultValue===undefined?key:defaultValue;if(!key)return defaultValue;var value=group[key];if(!!value||!is(String,key))return value||defaultValue;var synonyms=getScaleSynonyms(key);for(var synonym of synonyms){if(group!=null&&group[synonym]){value=group[synonym];break;}}return value||defaultValue;}
+import{is}from'ramda';var SCALES=[['xxxs'],['xxs'],['xs'],['sm','small'],['md','p'],['lg','h6'],['xl','h5'],['xxl','h4'],['xxxl','h3']];export function getScaleSynonyms(key){return SCALES.find(function(list){return list.includes(key);})||[];}export function getThemeValue(group,key,defaultValue){defaultValue=defaultValue===undefined?key:defaultValue;if(!key)return defaultValue;var value=group[key];if(!!value||!is(String,key))return value||defaultValue;var synonyms=getScaleSynonyms(key);for(var synonym of synonyms){if(group!=null&&group[synonym]){value=group[synonym];break;}}return value||defaultValue;}

package/dist/theme/helpers/sizeScale.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxsm','xxsm','xsm','sm','md','lg','xlg','xxlg','xxxlg'];export function moveScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;return SCALE[index+unit]||value;}export function getSizeFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxs','xxs','xs','sm','md','lg','xl','xxl','xxxl'];export function moveScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;var movedIndex=index+unit;var movedValue=SCALE[index+unit];if(!movedValue){movedValue=unit>0?'xxxl':'xxxs';}return movedValue;}export function getSizeFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}

package/dist/theme/helpers/textScale.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxsm','xxsm','xsm','sm','p','h6','h5','h4','h3','h2','h1'];export function moveTextScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;return SCALE[index+unit]||value;}export function getTextFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxs','xxs','xs','sm','p','h6','h5','h4','h3','h2','h1'];export function moveTextScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;return SCALE[index+unit]||value;}export function getTextFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,16 +21,20 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@remixicon/react": "^4.6.0",
     "dayjs": "^1.11.13",
     "ramda": "^0.31.3",
     "react": "*",
     "react-native": "*",
-    "react-native-web": "*",
-    "@remixicon/react": "^4.6.0",
-    "react-native-remix-icon": "^4.6.3"
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^4.1.0",
+    "react-native-remix-icon": "^4.6.3",
+    "react-native-web": "*"
   },
   "dependencies": {
+    "dayjs": "^1.11.13",
     "prop-types": "^15.8.1",
+    "react-native-safe-area-context": "^5.6.1",
     "react-native-web": "^0.21.0",
     "tinycolor2": "^1.6.0"
   },

package/src/NekoUI.js

@@ -1,5 +1,19 @@
+import { NotificationsHandler } from './components/feedback/notifications/NotificationsHandler'
+import { OverlayHandler } from './components/structure/overlay/OverlayHandler'
+import { PortalHandler } from './components/helpers/PortalHandler'
+import { ResponsiveHandler } from './responsive/ResponsiveHandler'
 import { ThemeHandler } from './theme/ThemeHandler'
 
 export function NekoUI({ children, ...props }) {
-  return <ThemeHandler {...props}>{children}</ThemeHandler>
+  return (
+    <ThemeHandler {...props}>
+      <ResponsiveHandler>
+        <PortalHandler>
+          <NotificationsHandler>
+            <OverlayHandler>{children}</OverlayHandler>
+          </NotificationsHandler>
+        </PortalHandler>
+      </ResponsiveHandler>
+    </ThemeHandler>
+  )
 }

package/src/abstractions/ActivityIndicator.js

@@ -0,0 +1,31 @@
+import tinycolor from 'tinycolor2'
+
+export function AbsActivityIndicator({ size = 20, color, style }) {
+  const bg = tinycolor(color).setAlpha(0.2).toString()
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        border: `${size / 8}px solid ${bg}`, // light transparent border
+        borderTop: `${size / 8}px solid ${color}`, // colored border for spinner effect
+        borderRadius: '50%',
+        animation: 'spin 1s linear infinite',
+        ...style,
+      }}
+    ></div>
+  )
+}
+
+// Add global CSS for animation
+// const styleSheet = document.styleSheets[0]
+// styleSheet.insertRule(
+// `
+// @keyframes spin {
+// 0% { transform: rotate(0deg); }
+// 100% { transform: rotate(360deg); }
+// }
+// `,
+// styleSheet.cssRules.length
+// )

package/src/abstractions/ActivityIndicator.native.js

@@ -0,0 +1,44 @@
+import tinycolor from 'tinycolor2'
+import { Animated, Easing } from 'react-native'
+import React from 'react'
+
+export function AbsActivityIndicator({ size = 20, color, style }) {
+  const spinValue = React.useRef(new Animated.Value(0)).current
+  const bg = tinycolor(color).setAlpha(0.2).toString()
+
+  React.useEffect(() => {
+    const spinAnimation = Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    )
+    spinAnimation.start()
+    return () => spinAnimation.stop()
+  }, [spinValue])
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  const borderWidth = size / 8
+
+  console.log(color, bg)
+  return (
+    <Animated.View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: borderWidth,
+        borderColor: `${bg}`,
+        borderTopColor: color,
+        transform: [{ rotate: spin }],
+        ...style,
+      }}
+    />
+  )
+}

package/src/abstractions/AnimatedView.js

@@ -0,0 +1,3 @@
+export function AbsAnimatedView({ children, style, ...props }) {
+  return <div style={style}>{children}</div>
+}

package/src/abstractions/AnimatedView.native.js

@@ -0,0 +1,6 @@
+import { map, prop } from 'ramda'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+
+export function AbsAnimatedView({ children, style, animatedStyles = [] }) {
+  return <Animated.View style={[style, ...animatedStyles]}>{children}</Animated.View>
+}

package/src/abstractions/DraggableSlideView.js

@@ -0,0 +1,85 @@
+export function AbsDraggableSlideView({ children }) {
+  return children
+}
+// export function AbsDraggableSlideView({
+// from = 'left',
+// distance,
+// open,
+// onClose,
+// style,
+// threshold = 0.3,
+// children,
+// resetOnOpen = true,
+// }) {
+// const [dragging, setDragging] = React.useState(false)
+// const [startPos, setStartPos] = React.useState(0)
+// const [translate, setTranslate] = React.useState(0)
+
+// const ref = React.useRef()
+
+// Reset on open
+// React.useEffect(() => {
+// if (resetOnOpen && open) setTranslate(0)
+// }, [open, resetOnOpen])
+
+// Handle pointer down
+// const handlePointerDown = (e) => {
+// setDragging(true)
+// const pos = from === 'left' || from === 'right' ? e.clientX : e.clientY
+// setStartPos(pos)
+// e.target.setPointerCapture(e.pointerId)
+// }
+
+// const handlePointerMove = (e) => {
+// if (!dragging) return
+// const pos = from === 'left' || from === 'right' ? e.clientX : e.clientY
+// let delta = pos - startPos
+
+// if (from === 'left') delta = Math.min(delta, 0)
+// else if (from === 'right') delta = Math.max(delta, 0)
+// else if (from === 'top') delta = Math.min(delta, 0)
+// else delta = Math.max(delta, 0)
+
+// setTranslate(delta)
+// }
+
+// const handlePointerUp = (e) => {
+// if (!dragging) return
+// setDragging(false)
+
+// Determine progress and if should close
+// const size = from === 'left' || from === 'right' ? window.innerWidth : window.innerHeight
+// const delta = translate
+// let progress
+// if (from === 'left') progress = -delta / (distance || size)
+// else if (from === 'right') progress = delta / (distance || size)
+// else if (from === 'top') progress = -delta / (distance || size)
+// else progress = delta / (distance || size)
+
+// const shouldClose = progress > threshold
+
+// Animate to final position
+// const finalValue = shouldClose ? (from === 'left' || from === 'top' ? -(distance || size) : distance || size) : 0
+
+// setTranslate(finalValue)
+
+// if (shouldClose && onClose) onClose()
+// }
+
+// const transformStyle =
+// from === 'left' || from === 'right'
+// ? { transform: `translateX(${translate}px)`, transition: dragging ? 'none' : 'transform 0.2s' }
+// : { transform: `translateY(${translate}px)`, transition: dragging ? 'none' : 'transform 0.2s' }
+
+// return (
+// <div
+// ref={ref}
+// style={{ ...style, ...transformStyle, touchAction: 'none', cursor: 'grab' }}
+// onPointerDown={handlePointerDown}
+// onPointerMove={handlePointerMove}
+// onPointerUp={handlePointerUp}
+// >
+// {children}
+// </div>
+// )
+// }

package/src/abstractions/DraggableSlideView.native.js

@@ -0,0 +1,62 @@
+import { Dimensions } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming, runOnJS } from 'react-native-reanimated'
+import React from 'react'
+
+export function AbsDraggableSlideView({
+  from = 'left',
+  distance,
+  open,
+  onClose,
+  style,
+  threshold = 0.3,
+  children,
+  resetOnOpen = true,
+}) {
+  const { width, height } = Dimensions.get('window')
+  const maxDistance = from === 'left' || from === 'right' ? distance || width : distance || height
+  const gestureTranslation = useSharedValue(0)
+
+  React.useEffect(() => {
+    if (resetOnOpen && open) {
+      gestureTranslation.value = 0
+    }
+  }, [open, resetOnOpen, gestureTranslation])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      if (from === 'left') gestureTranslation.value = Math.min(e.translationX, 0)
+      else if (from === 'right') gestureTranslation.value = Math.max(e.translationX, 0)
+      else if (from === 'top') gestureTranslation.value = Math.min(e.translationY, 0)
+      else gestureTranslation.value = Math.max(e.translationY, 0)
+    })
+    .onEnd((e) => {
+      let progress
+      if (from === 'left') progress = -e.translationX / maxDistance
+      else if (from === 'right') progress = e.translationX / maxDistance
+      else if (from === 'top') progress = -e.translationY / maxDistance
+      else progress = e.translationY / maxDistance
+
+      const shouldClose = progress > threshold
+      let finalValue = from === 'left' || from === 'top' ? -maxDistance : maxDistance
+      if (!shouldClose) finalValue = 0
+
+      gestureTranslation.value = withTiming(finalValue, { duration: 200 }, (finished) => {
+        if (finished && onClose && shouldClose) runOnJS(onClose)()
+      })
+    })
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const transform =
+      from === 'left' || from === 'right'
+        ? [{ translateX: gestureTranslation.value }]
+        : [{ translateY: gestureTranslation.value }]
+    return { transform }
+  })
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>
+    </GestureDetector>
+  )
+}

package/src/abstractions/Icon.js

@@ -1,48 +1,10 @@
-import React from 'react'
+import * as Icons from '@remixicon/react'
 
 import { capitalizeFirstLetter, toCamelCase } from '../helpers/string'
 
 export function AbsIcon({ name, ...props }) {
-  const [loading, setLoading] = React.useState(true)
-  const ref = React.useRef()
-  const Component = ref?.current || (() => false)
+  if (!!name && !name.startsWith('Ri')) name = 'Ri' + capitalizeFirstLetter(toCamelCase(name))
+  const IconComponent = Icons[name] || Icons['RiCircleFill']
 
-  React.useEffect(() => {
-    try {
-      import('@remixicon/react').then((module) => {
-        if (!!name && !name.startsWith('Ri')) name = 'Ri' + capitalizeFirstLetter(toCamelCase(name))
-        let IconComponent = module[name] || module['RiCircleFill']
-        ref.current = IconComponent
-        setLoading(false)
-      })
-    } catch {
-      console.error('Error loading AbsIcon component')
-    }
-  }, [])
-
-  if (loading) {
-    return (
-      <div
-        style={{
-          height: props.size,
-          width: props.size,
-          borderRadius: props.size,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <div
-          style={{
-            height: props.size / 3,
-            width: props.size / 3,
-            borderRadius: props.size,
-            backgroundColor: props.color,
-          }}
-        />
-      </div>
-    )
-  }
-
-  return <Component {...props} />
+  return <IconComponent {...props} />
 }

package/src/abstractions/Image.js

@@ -0,0 +1,12 @@
+export function AbsImage({ src, resizeMode = 'cover', style, ...props }) {
+  const objectFitMap = {
+    cover: 'cover',
+    contain: 'contain',
+    stretch: 'fill',
+    center: 'none',
+  }
+
+  const objectFit = objectFitMap[resizeMode] || 'cover'
+
+  return <img src={src} style={{ objectFit, objectPosition: 'center', ...style }} {...props} />
+}

package/src/abstractions/Image.native.js

@@ -0,0 +1,7 @@
+import { Image as RNImage } from 'react-native'
+
+export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
+  if (!source && !!src) source = { uri: src }
+
+  return <RNImage source={source} resizeMode={resizeMode} {...props} />
+}

package/src/abstractions/Image.web.js

@@ -0,0 +1,7 @@
+import { Image as RNImage } from 'react-native'
+
+export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
+  if (!source && !!src) source = { uri: src }
+
+  return <RNImage source={source} resizeMode={resizeMode} {...props} />
+}

package/src/abstractions/Platform.js

@@ -0,0 +1 @@
+export const Platform = { OS: 'web' }

package/src/abstractions/Platform.native.js

@@ -0,0 +1,3 @@
+import { Platform as RNPlatform } from 'react-native'
+
+export const Platform = RNPlatform

package/src/abstractions/Platform.web.js

@@ -0,0 +1,3 @@
+import { Platform as RNPlatform } from 'react-native'
+
+export const Platform = RNPlatform

package/src/abstractions/SafeAreaView.js

@@ -0,0 +1,3 @@
+import { AbsView } from './View'
+
+export const AbsSafeAreaView = AbsView

package/src/abstractions/SafeAreaView.native.js

@@ -0,0 +1,3 @@
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+export const AbsSafeAreaView = SafeAreaView

package/src/abstractions/Table.js

@@ -0,0 +1,29 @@
+export function AbsTable({ children, style, ...props }) {
+  return (
+    <table
+      {...props}
+      style={{
+        ...style,
+        borderCollapse: 'separate',
+        borderSpacing: 0,
+        // orderCollapse: 'collapse',
+        // whiteSpace: 'nowrap',
+        width: '100%',
+      }}
+    >
+      <tbody>{children}</tbody>
+    </table>
+  )
+}
+
+export function AbsTableRow({ ...props }) {
+  return <tr {...props} />
+}
+
+export function AbsTableHeader({ ...props }) {
+  return <th {...props} />
+}
+
+export function AbsTableCol({ ...props }) {
+  return <td {...props} />
+}

package/src/abstractions/Table.native.js

@@ -0,0 +1,19 @@
+import { View } from 'react-native'
+
+export function AbsTable({ children, ...props }) {
+  return <View {...props}>{children}</View>
+}
+
+export function AbsTableRow({ style, ...props }) {
+  return <View {...props} style={[style, { flexDirection: 'row', flex: 1 }]} />
+}
+
+export function AbsTableHeader({ style, ...props }) {
+  if (!style.width && !style.minWidth && !style.flex) style.flex = 1
+  return <View {...props} style={[style]} />
+}
+
+export function AbsTableCol({ style, ...props }) {
+  if (!style.width && !style.minWidth && !style.flex) style.flex = 1
+  return <View {...props} style={style} />
+}

package/src/abstractions/Text.js

@@ -1,3 +1,14 @@
-export function AbsText(props) {
-  return <span {...props} />
+export function AbsText({ numberOfLines, style, ...props }) {
+  style = style || {}
+
+  const limitLinesStyle = !!numberOfLines
+    ? {
+        display: '-webkit-box',
+        WebkitLineClamp: numberOfLines,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+      }
+    : {}
+
+  return <span {...props} style={{ ...limitLinesStyle, ...style }} />
 }

package/src/abstractions/TextInput.js

@@ -0,0 +1,3 @@
+export function AbsTextInput(props) {
+  return <input type="text" {...props} />
+}

package/src/abstractions/TextInput.native.js

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native'
+
+export function AbsTextInput({ onChange, ...props }) {
+  return <TextInput onChangeText={onChange} {...props} />
+}

package/src/abstractions/TextInput.web.js

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native'
+
+export function AbsTextInput({ onChange, ...props }) {
+  return <TextInput onChangeText={onChange} {...props} />
+}

package/src/abstractions/View.js

@@ -1,3 +1,3 @@
-export function AbsView(props) {
-  return <div {...props} />
+export function AbsView({ onPress, onClick, ...props }) {
+  return <div onClick={onClick || onPress} {...props} />
 }

package/src/abstractions/helpers/componentSize.js

@@ -0,0 +1,13 @@
+export function getElementSize(ref, callback) {
+  if (!ref.current) return
+
+  const el = ref.current
+  const rect = el.getBoundingClientRect()
+
+  callback({
+    width: el.offsetWidth,
+    height: el.offsetHeight,
+    x: rect.x + window.scrollX,
+    y: rect.y + window.scrollY,
+  })
+}

package/src/abstractions/helpers/componentSize.native.js

@@ -0,0 +1,12 @@
+import { UIManager, findNodeHandle } from 'react-native'
+
+export function getElementSize(ref, callback) {
+  if (!ref.current) return
+
+  const handle = findNodeHandle(ref.current)
+  if (handle) {
+    UIManager.measure(handle, (x, y, width, height) => {
+      callback({ width, height, x, y })
+    })
+  }
+}

package/src/abstractions/helpers/transformStyle.js

@@ -0,0 +1,8 @@
+export function formatTransform(transforms) {
+  return transforms
+    .map((t) => {
+      const [key, value] = Object.entries(t)[0]
+      return `${key}(${value})`
+    })
+    .join(' ')
+}

package/src/abstractions/helpers/transformStyle.native.js

@@ -0,0 +1,3 @@
+export function formatTransform(transforms) {
+  return transforms
+}