@neko-os/ui 0.0.1

package/README.md

@@ -0,0 +1,79 @@
+# Neko UI
+
+Universal React Native UI library (works on react-native, react-native-web and react).
+
+## Install
+
+```
+yarn add @neko-os/ui
+```
+
+### Web or native-web
+
+```
+yarn add react-native-web
+```
+
+### Vite config
+
+vite.config.js:
+
+```js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web',
+      'react-native-svg': 'react-native-svg-web',
+    },
+    extensions: ['.web.js', '.js', '.jsx', '.json'],
+  },
+})
+```
+
+## Usage (TODO)
+
+```js
+import { SimpleLinesChart } from '@neko-os/ui
+
+const DATA = [
+  {
+    serie: 'A',
+    data: [
+      { x: 'Jan', y: 50 },
+      { x: 'Feb', y: 80 },
+      { x: 'Mar', y: 40 },
+      { x: 'Apr', y: 120 },
+      { x: 'May', y: 70 },
+    ],
+  },
+  {
+    serie: 'B',
+    data: [
+      { x: 'Jan', y: 30 },
+      { x: 'Feb', y: 60 },
+      { x: 'Mar', y: 90 },
+      { x: 'Apr', y: 75 },
+      { x: 'May', y: 100 },
+    ],
+  },
+
+  {
+    serie: 'C',
+    data: [
+      { x: 'Jan', y: 3 },
+      { x: 'Feb', y: 6 },
+      { x: 'Mar', y: 9 },
+      { x: 'Apr', y: 7 },
+      { x: 'May', y: 10 },
+    ],
+  },
+]
+
+
+<SimpleLinesChart data={DATA} />
+```

package/dist/form/Form.js

@@ -0,0 +1 @@
+var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/Form.js";import React from'react';import{FormWrapperComponent}from"./FormWrapperComponent";import{jsx as _jsx}from"react/jsx-runtime";var FormContext=React.createContext(null);export var useFormInstance=function useFormInstance(){return React.useContext(FormContext);};export function Form(_ref){var form=_ref.form,children=_ref.children;return _jsx(FormContext.Provider,{value:form,children:_jsx(FormWrapperComponent,{form:form,children:children})});}

package/dist/form/FormGroup.js

@@ -0,0 +1 @@
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormGroup.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var FormGroupContext=React.createContext(null);var useGroupPath=function useGroupPath(){var _React$useContext;return((_React$useContext=React.useContext(FormGroupContext))==null?void 0:_React$useContext.path)||[];};export function useRelativePath(name,opts){var relative=opts.relative;var listPath=!!name?Array.isArray(name)?name:[name]:[];var parentPath=useGroupPath();if(!relative)return listPath;return[].concat(_toConsumableArray(parentPath),_toConsumableArray(listPath));}export function FormGroup(_ref){var name=_ref.name;var path=useRelativePath(name,{relative:true});var value={path:path};return _jsx(FormGroupContext.Provider,{value:value,children:children});}

package/dist/form/FormItem.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormItem.js";import{Text}from"react-native-web";import React from'react';import{FormGroup,useRelativePath}from"./FormGroup";import{useFormInstance}from"./Form";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function FormItem(_ref){var name=_ref.name,relative=_ref.relative,children=_ref.children;var form=useFormInstance();var listPath=useRelativePath(name,{relative:relative});var _React$useState=React.useState(form.getFieldValue(listPath)),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];var error=form.getError(listPath);React.useEffect(function(){return form.registerListener(listPath,function(val){return setValue(val);});},[listPath.join('$NEKOJOIN$')]);var handleChange=function handleChange(e){var _e$target$value,_e$target;var val=(_e$target$value=e==null?void 0:(_e$target=e.target)==null?void 0:_e$target.value)!=null?_e$target$value:e;form.setFieldValue(listPath,val);};var child=React.Children.only(children);var childWithProps=React.cloneElement(child,{value:value,onChange:handleChange});return _jsxs(FormGroup,{name:listPath,children:[childWithProps,error&&_jsx(Text,{style:{color:'red'},children:error})]});}

package/dist/form/FormList.js

@@ -0,0 +1 @@
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormList.js";import{Text}from"react-native-web";import React from'react';import{FormGroup,useRelativePath}from"./FormGroup";import{useFormInstance}from"./Form";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var FormListContext=React.createContext(null);var useFormList=function useFormList(){return React.useContext(FormListContext);};export function FormList(_ref){var name=_ref.name,relative=_ref.relative,children=_ref.children;var form=useFormInstance();var listPath=useRelativePath(name,{relative:relative});var listPathStr=listPath.join('$NEKOJOIN$');var error=form.getError(listPath);var _React$useState=React.useState(function(){var initial=form.getFieldValue(listPath)||[];return initial.map(function(_,index){return{key:index,name:index};});}),_React$useState2=_slicedToArray(_React$useState,2),fields=_React$useState2[0],setFields=_React$useState2[1];React.useEffect(function(){return form.registerListener(listPath,function(val){if(Array.isArray(val)){setFields(val.map(function(_,index){return{key:index,name:index};}));}});},[listPathStr]);var add=function add(){var defaultValue=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,[].concat(_toConsumableArray(current),[defaultValue]));};var addOn=function addOn(index){var defaultValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,[].concat(_toConsumableArray(current.slice(0,index)),[defaultValue],_toConsumableArray(current.slice(index))));};var replace=function replace(index,value){var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,current.map(function(item,i){return i===index?value:item;}));};var move=function move(fromIndex,toIndex){var current=form.getFieldValue(listPath)||[];if(fromIndex<0||fromIndex>=current.length)return;if(toIndex<0||toIndex>=current.length)return;var item=current[fromIndex];var updated=_toConsumableArray(current);updated.splice(fromIndex,1);updated.splice(toIndex,0,item);form.setFieldValue(listPath,updated);};var remove=function remove(index){var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,current.filter(function(_,i){return i!==index;}));};var actions=React.useMemo(function(){return{add:add,addOn:addOn,replace:replace,remove:remove,move:move};},[listPathStr]);return _jsx(FormGroup,{name:listPath,children:_jsxs(FormListContext.Provider,{value:actions,children:[typeof children==='function'?children(fields,actions):React.cloneElement(React.Children.only(children),Object.assign({fields:fields},actions)),error&&_jsx(Text,{style:{color:'red'},children:error})]})});}

package/dist/form/FormWrapperComponent.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormWrapperComponent.js";var _excluded=["children","form"];import{jsx as _jsx}from"react/jsx-runtime";export function FormWrapperComponent(_ref){var children=_ref.children,form=_ref.form,props=_objectWithoutProperties(_ref,_excluded);var handleSubmit=function handleSubmit(e){e.preventDefault();form.handleSubmit();};return _jsx("form",{onSubmit:handleSubmit,children:children});}

package/dist/form/FormWrapperComponent.native.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children"];import React from'react';export function FormWrapperComponent(_ref){var children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);return children;}

package/dist/form/index.js

@@ -0,0 +1 @@
+export*from"./Form";export*from"./FormItem";export*from"./FormList";export*from"./FormWrapperComponent";export*from"./FormGroup";export*from"./useForm";

package/dist/form/useForm.js

@@ -0,0 +1 @@
+import{assocPath,path}from'ramda';import React from'react';export function useForm(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},_ref$initialValues=_ref.initialValues,initialValues=_ref$initialValues===void 0?{}:_ref$initialValues,validate=_ref.validate;var valuesRef=React.useRef(Object.assign({},initialValues));var errorsRef=React.useRef({});var listenersRef=React.useRef({});var notify=function notify(name){var key=Array.isArray(name)?name.join('.'):name;if(listenersRef.current[key]){listenersRef.current[key].forEach(function(cb){return cb(path(name,valuesRef.current));});}};var setFieldValue=function setFieldValue(name,value){valuesRef.current=assocPath(name,value,valuesRef.current);notify(name);};var getFieldValue=function getFieldValue(name){return path(name,valuesRef.current);};var getError=function getError(name){return path(name,errorsRef.current);};var setError=function setError(name,error){errorsRef.current=assocPath(name,error,errorsRef.current);};var registerListener=function registerListener(name,cb){var key=Array.isArray(name)?name.join('.'):name;if(!listenersRef.current[key]){listenersRef.current[key]=[];}listenersRef.current[key].push(cb);return function(){listenersRef.current[key]=listenersRef.current[key].filter(function(fn){return fn!==cb;});};};var validateForm=function validateForm(){if(!validate)return true;var newErrors=validate(valuesRef.current)||{};errorsRef.current=newErrors;return Object.keys(newErrors).length===0;};var handleSubmit=function handleSubmit(onValid){return function(){var isValid=validateForm();if(isValid){onValid(valuesRef.current);}};};return{setFieldValue:setFieldValue,getFieldValue:getFieldValue,getError:getError,setError:setError,registerListener:registerListener,handleSubmit:handleSubmit,valuesRef:valuesRef};}

package/dist/index.js

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

package/dist/modifiers/_helpers.js

@@ -0,0 +1 @@
+import{pickBy}from'ramda';export var clearProps=pickBy(function(item){return item!==undefined;});

package/dist/modifiers/flex.js

@@ -0,0 +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)});}

package/dist/modifiers/flexWrapper.js

@@ -0,0 +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)});}

package/dist/modifiers/margin.js

@@ -0,0 +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)});}

package/dist/modifiers/padding.js

@@ -0,0 +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)});}

package/dist/modifiers/position.js

@@ -0,0 +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)});}

package/dist/modifiers/size.js

@@ -0,0 +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)});}

package/dist/modifiers/text.js

@@ -0,0 +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)});}

package/dist/structure/View.js

@@ -0,0 +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));}

package/dist/structure/index.js

@@ -0,0 +1 @@
+export*from"./View";

package/dist/theme/ThemeHandler.js

@@ -0,0 +1 @@
+var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export function ThemeHandler(_ref){var themes=_ref.themes,children=_ref.children;var value={};return _jsx(ThemeContext.Provider,{value:value,children:children});}

package/dist/theme/index.js

@@ -0,0 +1 @@
+export*from"./ThemeHandler";

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@neko-os/ui",
+  "version": "0.0.1",
+  "author": "Christian Storch <ccstorch@gmail.com>",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "react-native": "src/index.js",
+  "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",
+    "dev": "yarn build && yarn watch",
+    "prepublishOnly": "yarn build",
+    "publish": "npm publish --access public"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "dayjs": "^1.11.13",
+    "ramda": "^0.31.3",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "prop-types": "^15.8.1",
+    "ramda": "^0.31.3",
+    "react-native-web": "^0.21.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7",
+    "@babel/core": "^7",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/src/form/Form.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { FormWrapperComponent } from './FormWrapperComponent'
+
+const FormContext = React.createContext(null)
+export const useFormInstance = () => React.useContext(FormContext)
+
+export function Form({ form, children }) {
+  return (
+    <FormContext.Provider value={form}>
+      <FormWrapperComponent form={form}>{children}</FormWrapperComponent>
+    </FormContext.Provider>
+  )
+}

package/src/form/FormGroup.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const FormGroupContext = React.createContext(null)
+const useGroupPath = () => React.useContext(FormGroupContext)?.path || []
+
+export function useRelativePath(name, opts) {
+  const { relative } = opts
+  const listPath = !!name ? (Array.isArray(name) ? name : [name]) : []
+  const parentPath = useGroupPath()
+
+  if (!relative) return listPath
+
+  return [...parentPath, ...listPath]
+}
+
+export function FormGroup({ name }) {
+  const path = useRelativePath(name, { relative: true })
+  const value = { path }
+
+  return <FormGroupContext.Provider value={value}>{children}</FormGroupContext.Provider>
+}

package/src/form/FormItem.js

@@ -0,0 +1,34 @@
+import { Text } from 'react-native'
+import React from 'react'
+
+import { FormGroup, useRelativePath } from './FormGroup'
+import { useFormInstance } from './Form'
+
+export function FormItem({ name, relative, children }) {
+  const form = useFormInstance()
+  const listPath = useRelativePath(name, { relative })
+  const [value, setValue] = React.useState(form.getFieldValue(listPath))
+  const error = form.getError(listPath)
+
+  React.useEffect(() => {
+    return form.registerListener(listPath, (val) => setValue(val))
+  }, [listPath.join('$NEKOJOIN$')])
+
+  const handleChange = (e) => {
+    const val = e?.target?.value ?? e
+    form.setFieldValue(listPath, val)
+  }
+
+  const child = React.Children.only(children)
+  const childWithProps = React.cloneElement(child, {
+    value,
+    onChange: handleChange,
+  })
+
+  return (
+    <FormGroup name={listPath}>
+      {childWithProps}
+      {error && <Text style={{ color: 'red' }}>{error}</Text>}
+    </FormGroup>
+  )
+}

package/src/form/FormList.js

@@ -0,0 +1,88 @@
+import { Text } from 'react-native'
+import React from 'react'
+
+import { FormGroup, useRelativePath } from './FormGroup'
+import { useFormInstance } from './Form'
+
+const FormListContext = React.createContext(null)
+const useFormList = () => React.useContext(FormListContext)
+
+export function FormList({ name, relative, children }) {
+  const form = useFormInstance()
+  const listPath = useRelativePath(name, { relative })
+  // To avoid watch being recalled
+  const listPathStr = listPath.join('$NEKOJOIN$')
+  const error = form.getError(listPath)
+
+  const [fields, setFields] = React.useState(() => {
+    const initial = form.getFieldValue(listPath) || []
+    return initial.map((_, index) => ({ key: index, name: index }))
+  })
+
+  React.useEffect(() => {
+    return form.registerListener(listPath, (val) => {
+      if (Array.isArray(val)) {
+        setFields(val.map((_, index) => ({ key: index, name: index })))
+      }
+    })
+  }, [listPathStr])
+
+  const add = (defaultValue = {}) => {
+    const current = form.getFieldValue(listPath) || []
+    form.setFieldValue(listPath, [...current, defaultValue])
+  }
+
+  const addOn = (index, defaultValue = {}) => {
+    const current = form.getFieldValue(listPath) || []
+    form.setFieldValue(listPath, [...current.slice(0, index), defaultValue, ...current.slice(index)])
+  }
+
+  const replace = (index, value) => {
+    const current = form.getFieldValue(listPath) || []
+    form.setFieldValue(
+      listPath,
+      current.map((item, i) => (i === index ? value : item))
+    )
+  }
+
+  const move = (fromIndex, toIndex) => {
+    const current = form.getFieldValue(listPath) || []
+    if (fromIndex < 0 || fromIndex >= current.length) return
+    if (toIndex < 0 || toIndex >= current.length) return
+    const item = current[fromIndex]
+    const updated = [...current]
+    updated.splice(fromIndex, 1)
+    updated.splice(toIndex, 0, item)
+    form.setFieldValue(listPath, updated)
+  }
+
+  const remove = (index) => {
+    const current = form.getFieldValue(listPath) || []
+    form.setFieldValue(
+      listPath,
+      current.filter((_, i) => i !== index)
+    )
+  }
+
+  const actions = React.useMemo(
+    () => ({
+      add,
+      addOn,
+      replace,
+      remove,
+      move,
+    }),
+    [listPathStr]
+  )
+
+  return (
+    <FormGroup name={listPath}>
+      <FormListContext.Provider value={actions}>
+        {typeof children === 'function'
+          ? children(fields, actions)
+          : React.cloneElement(React.Children.only(children), { fields, ...actions })}
+        {error && <Text style={{ color: 'red' }}>{error}</Text>}
+      </FormListContext.Provider>
+    </FormGroup>
+  )
+}

package/src/form/FormWrapperComponent.js

@@ -0,0 +1,8 @@
+export function FormWrapperComponent({ children, form, ...props }) {
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    form.handleSubmit()
+  }
+
+  return <form onSubmit={handleSubmit}>{children}</form>
+}

package/src/form/FormWrapperComponent.native.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function FormWrapperComponent({ children, ...props }) {
+  return children
+}

package/src/form/index.js

@@ -0,0 +1,6 @@
+export * from './Form'
+export * from './FormItem'
+export * from './FormList'
+export * from './FormWrapperComponent'
+export * from './FormGroup'
+export * from './useForm'

package/src/form/useForm.js

@@ -0,0 +1,65 @@
+import { assocPath, path } from 'ramda'
+import React from 'react'
+
+export function useForm({ initialValues = {}, validate } = {}) {
+  const valuesRef = React.useRef({ ...initialValues })
+  const errorsRef = React.useRef({})
+  const listenersRef = React.useRef({})
+
+  const notify = (name) => {
+    const key = Array.isArray(name) ? name.join('.') : name
+    if (listenersRef.current[key]) {
+      listenersRef.current[key].forEach((cb) => cb(path(name, valuesRef.current)))
+    }
+  }
+
+  const setFieldValue = (name, value) => {
+    valuesRef.current = assocPath(name, value, valuesRef.current)
+    notify(name)
+  }
+
+  const getFieldValue = (name) => path(name, valuesRef.current)
+
+  const getError = (name) => path(name, errorsRef.current)
+
+  const setError = (name, error) => {
+    errorsRef.current = assocPath(name, error, errorsRef.current)
+  }
+
+  const registerListener = (name, cb) => {
+    const key = Array.isArray(name) ? name.join('.') : name
+    if (!listenersRef.current[key]) {
+      listenersRef.current[key] = []
+    }
+    listenersRef.current[key].push(cb)
+    return () => {
+      listenersRef.current[key] = listenersRef.current[key].filter((fn) => fn !== cb)
+    }
+  }
+
+  const validateForm = () => {
+    if (!validate) return true
+    const newErrors = validate(valuesRef.current) || {}
+    errorsRef.current = newErrors
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (onValid) => {
+    return () => {
+      const isValid = validateForm()
+      if (isValid) {
+        onValid(valuesRef.current)
+      }
+    }
+  }
+
+  return {
+    setFieldValue,
+    getFieldValue,
+    getError,
+    setError,
+    registerListener,
+    handleSubmit,
+    valuesRef,
+  }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+// export * from './form'
+export * from './structure'
+
+export const version = 2

package/src/modifiers/_helpers.js

@@ -0,0 +1,3 @@
+import { pickBy } from 'ramda'
+
+export const clearProps = pickBy((item) => item !== undefined)

package/src/modifiers/flex.js

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

package/src/modifiers/flexWrapper.js

@@ -0,0 +1,39 @@
+import { clearProps } from './_helpers'
+
+export function useFlexWrapperModifier(props) {
+  const { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap } = props
+
+  let justifyContent = justify
+  let alignItems = align
+  let flexDirection = direction
+  let 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'
+
+  const style = clearProps({
+    justifyContent,
+    alignItems,
+    flexDirection,
+    flexWrap,
+    gap,
+  })
+
+  return {
+    ...props,
+    style: {
+      ...props.style,
+      ...style,
+    },
+  }
+}

package/src/modifiers/margin.js

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

package/src/modifiers/padding.js

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

package/src/modifiers/position.js

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

package/src/modifiers/size.js

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

package/src/modifiers/text.js

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

package/src/structure/View.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View as NativeView } from 'react-native'
+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'
+
+export function View(props) {
+  props = pipe(
+    useSizeModifier, //
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier
+  )
+
+  return <NativeView {...props} />
+}

package/src/structure/index.js

@@ -0,0 +1 @@
+export * from './View'

package/src/theme/ThemeHandler.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const ThemeContext = React.createContext(null)
+export const useThemeHandler = () => React.useContext(ThemeContext) || {}
+
+export function ThemeHandler({ themes, children }) {
+  const value = {}
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}

package/src/theme/index.js

@@ -0,0 +1 @@
+export * from './ThemeHandler'