@neko-os/ui 0.0.1 → 0.0.2

package/README.md

@@ -5,7 +5,7 @@ Universal React Native UI library (works on react-native, react-native-web and r
 ## Install
 
 ```
-yarn add @neko-os/ui
+yarn add @neko-os/ui ramda dayjs
 ```
 
 ### Web or native-web

package/dist/abstractions/View.js

@@ -0,0 +1 @@
+var _this=this,_jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/View.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var AbsView;try{var _require=require("react-native-web"),Platform=_require.Platform,RNView=_require.View;console.log('NATIVE');AbsView=function AbsView(props){return _jsx(RNView,Object.assign({},props));};}catch(_unused){console.log('WEB');AbsView=function AbsView(props){return _jsx("div",Object.assign({},props));};}export{AbsView};

package/dist/index.js

@@ -1 +1 @@
-export*from"./structure";export var version=2;
+export*from"./structure";export var version=8;

package/dist/modifiers/flex.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function useFlexModifier(props){var flex=props.flex;if(flex===true)flex=1;var style=clearProps({flex:flex});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["flex"];import{clearProps}from"./_helpers";export function useFlexModifier(props){var flex=props.flex,restProps=_objectWithoutProperties(props,_excluded);if(flex===true)flex=1;var style=clearProps({flex:flex});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/modifiers/flexWrapper.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function useFlexWrapperModifier(props){var justify=props.justify,align=props.align,center=props.center,centerV=props.centerV,centerH=props.centerH,toRight=props.toRight,toBottom=props.toBottom,direction=props.direction,row=props.row,wrap=props.wrap,gap=props.gap;var justifyContent=justify;var alignItems=align;var flexDirection=direction;var flexWrap;if(center){justifyContent='center';alignItems='center';}else{if(centerV)justifyContent='center';if(toBottom)justifyContent='flex-end';if(centerH)alignItems='center';if(toRight)alignItems='flex-end';}if(row)flexDirection='row';if(wrap)flexWrap='wrap';var style=clearProps({justifyContent:justifyContent,alignItems:alignItems,flexDirection:flexDirection,flexWrap:flexWrap,gap:gap});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["justify","align","center","centerV","centerH","toRight","toBottom","direction","row","wrap","gap"];import{clearProps}from"./_helpers";export function useFlexWrapperModifier(props){var justify=props.justify,align=props.align,center=props.center,centerV=props.centerV,centerH=props.centerH,toRight=props.toRight,toBottom=props.toBottom,direction=props.direction,row=props.row,wrap=props.wrap,gap=props.gap,restProps=_objectWithoutProperties(props,_excluded);var justifyContent=justify;var alignItems=align;var flexDirection=direction||'column';var flexWrap;if(center){justifyContent='center';alignItems='center';}else{if(centerV)justifyContent='center';if(toBottom)justifyContent='flex-end';if(centerH)alignItems='center';if(toRight)alignItems='flex-end';}if(row)flexDirection='row';if(wrap)flexWrap='wrap';var style=clearProps({display:'flex',justifyContent:justifyContent,alignItems:alignItems,flexDirection:flexDirection,flexWrap:flexWrap,gap:gap});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/modifiers/margin.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function useMarginModifier(props){var _ref,_ref2,_ref3,_ref4;var marginT=props.marginT,marginB=props.marginB,marginL=props.marginL,marginR=props.marginR,marginV=props.marginV,marginH=props.marginH,margin=props.margin;var marginTop=(_ref=marginT!=null?marginT:marginV)!=null?_ref:margin;var marginBottom=(_ref2=marginB!=null?marginB:marginV)!=null?_ref2:margin;var marginRight=(_ref3=marginR!=null?marginR:marginH)!=null?_ref3:margin;var marginLeft=(_ref4=marginL!=null?marginL:marginH)!=null?_ref4:margin;var style=clearProps({marginTop:marginTop,marginBottom:marginBottom,marginRight:marginRight,marginLeft:marginLeft});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["marginT","marginB","marginL","marginR","marginV","marginH","margin"];import{clearProps}from"./_helpers";export function useMarginModifier(props){var _ref,_ref2,_ref3,_ref4;var marginT=props.marginT,marginB=props.marginB,marginL=props.marginL,marginR=props.marginR,marginV=props.marginV,marginH=props.marginH,margin=props.margin,restProps=_objectWithoutProperties(props,_excluded);var marginTop=(_ref=marginT!=null?marginT:marginV)!=null?_ref:margin;var marginBottom=(_ref2=marginB!=null?marginB:marginV)!=null?_ref2:margin;var marginRight=(_ref3=marginR!=null?marginR:marginH)!=null?_ref3:margin;var marginLeft=(_ref4=marginL!=null?marginL:marginH)!=null?_ref4:margin;var style=clearProps({marginTop:marginTop,marginBottom:marginBottom,marginRight:marginRight,marginLeft:marginLeft});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/modifiers/padding.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function usePaddingModifier(props){var _ref,_ref2,_ref3,_ref4;var paddingT=props.paddingT,paddingB=props.paddingB,paddingL=props.paddingL,paddingR=props.paddingR,paddingV=props.paddingV,paddingH=props.paddingH,padding=props.padding;var paddingTop=(_ref=paddingT!=null?paddingT:paddingV)!=null?_ref:padding;var paddingBottom=(_ref2=paddingB!=null?paddingB:paddingV)!=null?_ref2:padding;var paddingRight=(_ref3=paddingR!=null?paddingR:paddingH)!=null?_ref3:padding;var paddingLeft=(_ref4=paddingL!=null?paddingL:paddingH)!=null?_ref4:padding;var style=clearProps({paddingTop:paddingTop,paddingBottom:paddingBottom,paddingRight:paddingRight,paddingLeft:paddingLeft});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["paddingT","paddingB","paddingL","paddingR","paddingV","paddingH","padding"];import{clearProps}from"./_helpers";export function usePaddingModifier(props){var _ref,_ref2,_ref3,_ref4;var paddingT=props.paddingT,paddingB=props.paddingB,paddingL=props.paddingL,paddingR=props.paddingR,paddingV=props.paddingV,paddingH=props.paddingH,padding=props.padding,restProps=_objectWithoutProperties(props,_excluded);var paddingTop=(_ref=paddingT!=null?paddingT:paddingV)!=null?_ref:padding;var paddingBottom=(_ref2=paddingB!=null?paddingB:paddingV)!=null?_ref2:padding;var paddingRight=(_ref3=paddingR!=null?paddingR:paddingH)!=null?_ref3:padding;var paddingLeft=(_ref4=paddingL!=null?paddingL:paddingH)!=null?_ref4:padding;var style=clearProps({paddingTop:paddingTop,paddingBottom:paddingBottom,paddingRight:paddingRight,paddingLeft:paddingLeft});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/modifiers/position.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function usePositionModifier(props){var position=props.position,absolute=props.absolute,relative=props.relative,top=props.top,bottom=props.bottom,left=props.left,right=props.right;if(absolute)position='absolute';if(relative)position='relative';var style=clearProps({position:position,top:top,bottom:bottom,left:left,right:right});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["position","absolute","relative","top","bottom","left","right"];import{clearProps}from"./_helpers";export function usePositionModifier(props){var position=props.position,absolute=props.absolute,relative=props.relative,top=props.top,bottom=props.bottom,left=props.left,right=props.right,restProps=_objectWithoutProperties(props,_excluded);if(absolute)position='absolute';if(relative)position='relative';var style=clearProps({position:position,top:top,bottom:bottom,left:left,right:right});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/modifiers/size.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function useSizeModifier(props){var _ref=props||{},width=_ref.width,height=_ref.height,fullWidth=_ref.fullWidth,fullHeight=_ref.fullHeight;if(fullWidth)width='100%';if(fullHeight)height='100%';var style=clearProps({height:height,width:width});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["width","height","fullWidth","fullHeight"];import{clearProps}from"./_helpers";export function useSizeModifier(props){var _ref=props||{},width=_ref.width,height=_ref.height,fullWidth=_ref.fullWidth,fullHeight=_ref.fullHeight,restProps=_objectWithoutProperties(_ref,_excluded);if(fullWidth)width='100%';if(fullHeight)height='100%';var style=clearProps({height:height,width:width});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/modifiers/text.js

@@ -1 +1 @@
-import{clearProps}from"./_helpers";export function useTextModifier(props){var opacity=props.opacity,bold=props.bold,strong=props.strong,fontWeight=props.fontWeight,italic=props.italic,underline=props.underline,lineHeight=props.lineHeight,align=props.align,center=props.center,toRight=props.toRight;var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity});return Object.assign({},props,{style:Object.assign({},props.style,style)});}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["opacity","bold","strong","fontWeight","italic","underline","lineHeight","align","center","toRight"];import{clearProps}from"./_helpers";export function useTextModifier(props){var opacity=props.opacity,bold=props.bold,strong=props.strong,fontWeight=props.fontWeight,italic=props.italic,underline=props.underline,lineHeight=props.lineHeight,align=props.align,center=props.center,toRight=props.toRight,restProps=_objectWithoutProperties(props,_excluded);var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity});return Object.assign({},restProps,{style:Object.assign({},props.style,style)});}

package/dist/structure/View.js

@@ -1 +1 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/structure/View.js";import React from'react';import{View as NativeView}from"react-native-web";import{pipe}from'ramda';import{useFlexModifier}from"../modifiers/flex";import{useFlexWrapperModifier}from"../modifiers/flexWrapper";import{useMarginModifier}from"../modifiers/margin";import{usePaddingModifier}from"../modifiers/padding";import{usePositionModifier}from"../modifiers/position";import{useSizeModifier}from"../modifiers/size";import{jsx as _jsx}from"react/jsx-runtime";export function View(props){props=pipe(useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier);return _jsx(NativeView,Object.assign({},props));}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/structure/View.js";var _excluded=["children"];import{pipe}from'ramda';import{AbsView}from"../abstractions/View";import{useFlexModifier}from"../modifiers/flex";import{useFlexWrapperModifier}from"../modifiers/flexWrapper";import{useMarginModifier}from"../modifiers/margin";import{usePaddingModifier}from"../modifiers/padding";import{usePositionModifier}from"../modifiers/position";import{useSizeModifier}from"../modifiers/size";import{jsx as _jsx}from"react/jsx-runtime";export function View(_ref){var children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);props=pipe(useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier)(props);return _jsx(AbsView,Object.assign({},props,{children:children}));}

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "react-native": "src/index.js",
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "rm -rf dist && babel src --out-dir dist --extensions \".js,.jsx\" --copy-files",
     "watch": "babel src --out-dir dist --extensions \".js,.jsx\" --copy-files --watch",
@@ -23,9 +26,7 @@
     "react-native": "*"
   },
   "dependencies": {
-    "dayjs": "^1.11.13",
     "prop-types": "^15.8.1",
-    "ramda": "^0.31.3",
     "react-native-web": "^0.21.0"
   },
   "devDependencies": {

package/src/abstractions/View.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+let AbsView
+
+try {
+  const { Platform, View: RNView } = require('react-native')
+  console.log('NATIVE')
+  AbsView = (props) => <RNView {...props} />
+} catch {
+  console.log('WEB')
+  AbsView = (props) => <div {...props} />
+}
+
+export { AbsView }

package/src/index.js

@@ -1,4 +1,6 @@
 // export * from './form'
 export * from './structure'
+//
+// export const View = 10
 
-export const version = 2
+export const version = 8

package/src/modifiers/flex.js

@@ -1,14 +1,14 @@
 import { clearProps } from './_helpers'
 
 export function useFlexModifier(props) {
-  let { flex } = props
+  let { flex, ...restProps } = props
 
   if (flex === true) flex = 1
 
   const style = clearProps({ flex })
 
   return {
-    ...props,
+    ...restProps,
     style: {
       ...props.style,
       ...style,

package/src/modifiers/flexWrapper.js

@@ -1,11 +1,11 @@
 import { clearProps } from './_helpers'
 
 export function useFlexWrapperModifier(props) {
-  const { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap } = props
+  const { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap, ...restProps } = props
 
   let justifyContent = justify
   let alignItems = align
-  let flexDirection = direction
+  let flexDirection = direction || 'column'
   let flexWrap
 
   if (center) {
@@ -22,6 +22,7 @@ export function useFlexWrapperModifier(props) {
   if (wrap) flexWrap = 'wrap'
 
   const style = clearProps({
+    display: 'flex',
     justifyContent,
     alignItems,
     flexDirection,
@@ -30,7 +31,7 @@ export function useFlexWrapperModifier(props) {
   })
 
   return {
-    ...props,
+    ...restProps,
     style: {
       ...props.style,
       ...style,

package/src/modifiers/margin.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 
 export function useMarginModifier(props) {
-  const { marginT, marginB, marginL, marginR, marginV, marginH, margin } = props
+  const { marginT, marginB, marginL, marginR, marginV, marginH, margin, ...restProps } = props
 
   const marginTop = marginT ?? marginV ?? margin
   const marginBottom = marginB ?? marginV ?? margin
@@ -11,7 +11,7 @@ export function useMarginModifier(props) {
   const style = clearProps({ marginTop, marginBottom, marginRight, marginLeft })
 
   return {
-    ...props,
+    ...restProps,
     style: {
       ...props.style,
       ...style,

package/src/modifiers/padding.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 
 export function usePaddingModifier(props) {
-  const { paddingT, paddingB, paddingL, paddingR, paddingV, paddingH, padding } = props
+  const { paddingT, paddingB, paddingL, paddingR, paddingV, paddingH, padding, ...restProps } = props
 
   const paddingTop = paddingT ?? paddingV ?? padding
   const paddingBottom = paddingB ?? paddingV ?? padding
@@ -11,7 +11,7 @@ export function usePaddingModifier(props) {
   const style = clearProps({ paddingTop, paddingBottom, paddingRight, paddingLeft })
 
   return {
-    ...props,
+    ...restProps,
     style: {
       ...props.style,
       ...style,

package/src/modifiers/position.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 
 export function usePositionModifier(props) {
-  let { position, absolute, relative, top, bottom, left, right } = props
+  let { position, absolute, relative, top, bottom, left, right, ...restProps } = props
 
   if (absolute) position = 'absolute'
   if (relative) position = 'relative'
@@ -9,7 +9,7 @@ export function usePositionModifier(props) {
   const style = clearProps({ position, top, bottom, left, right })
 
   return {
-    ...props,
+    ...restProps,
     style: {
       ...props.style,
       ...style,

package/src/modifiers/size.js

@@ -1,14 +1,14 @@
 import { clearProps } from './_helpers'
 
 export function useSizeModifier(props) {
-  let { width, height, fullWidth, fullHeight } = props || {}
+  let { width, height, fullWidth, fullHeight, ...restProps } = props || {}
   if (fullWidth) width = '100%'
   if (fullHeight) height = '100%'
 
   const style = clearProps({ height, width })
 
   return {
-    ...props,
+    ...restProps,
     style: { ...props.style, ...style },
   }
 }

package/src/modifiers/text.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 
 export function useTextModifier(props) {
-  let { opacity, bold, strong, fontWeight, italic, underline, lineHeight, align, center, toRight } = props
+  let { opacity, bold, strong, fontWeight, italic, underline, lineHeight, align, center, toRight, ...restProps } = props
 
   let fontStyle
   if (italic) fontStyle = 'italic'
@@ -27,7 +27,7 @@ export function useTextModifier(props) {
   // TODO: Handle font sizes based on theme
 
   return {
-    ...props,
+    ...restProps,
     style: {
       ...props.style,
       ...style,

package/src/structure/View.js

@@ -1,7 +1,6 @@
-import React from 'react'
-import { View as NativeView } from 'react-native'
 import { pipe } from 'ramda'
 
+import { AbsView } from '../abstractions/View'
 import { useFlexModifier } from '../modifiers/flex'
 import { useFlexWrapperModifier } from '../modifiers/flexWrapper'
 import { useMarginModifier } from '../modifiers/margin'
@@ -9,7 +8,7 @@ import { usePaddingModifier } from '../modifiers/padding'
 import { usePositionModifier } from '../modifiers/position'
 import { useSizeModifier } from '../modifiers/size'
 
-export function View(props) {
+export function View({ children, ...props }) {
   props = pipe(
     useSizeModifier, //
     usePositionModifier,
@@ -17,7 +16,7 @@ export function View(props) {
     useMarginModifier,
     useFlexWrapperModifier,
     useFlexModifier
-  )
+  )(props)
 
-  return <NativeView {...props} />
+  return <AbsView {...props}>{children}</AbsView>
 }