@axelor/aos-mobile-ui 0.0.1

package/README.md

@@ -0,0 +1,234 @@
+<h1 align="center">@axelor/aos-mobile-ui</h1>
+
+<div align="center">
+    <img src="https://i.imgur.com/KJAAFlT.png" width="30%"/>
+</div>
+
+## Presentation
+
+This package was developed for the [Axelor Open Mobile](https://github.com/axelor/axelor-mobile) application.
+
+It contains:
+- Basic components to create screens
+- Themes management system with basic light theme and a color blind theme
+- Writing themes management system with basic theme
+- UseOutsideClick hook to notify components when the user clicked outside of itself
+- Basic animation tools
+
+## Usage
+
+Install the library :
+
+```bash
+yarn add @axelor/aos-mobile-ui
+```
+
+Compatibility with React v18.2.x and React Native v0.68.x.
+
+This package has a few required libraries as peer dependencies:
+
+- [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons)
+- [react-native-system-navigation-bar](https://www.npmjs.com/package/react-native-system-navigation-bar)
+- [react-native-pell-rich-editor](https://www.npmjs.com/package/react-native-pell-rich-editor)
+
+### Use of basic components
+
+You can import components from the main bundle:
+
+```typescript
+import {Button} from '@axelor/aos-mobile-ui';
+```
+
+Then, you can use it as a regular component with the specified props :
+
+```typescript
+<Button title="Save" onPress={() => console.log('Pressed')} />
+```
+
+### Use themes management system
+
+This package provides a context to manage themes system. To use this context you need to wrap your application with the ThemeProvider component. You can also define additional themes and the default theme value through the component props:
+
+```typescript
+import { ThemeProvider } from '@axelor/aos-mobile-ui';
+
+...
+
+<ThemeProvider themes={themes} defaultTheme={defaultTheme}>
+    ...
+</ThemeProvider>
+```
+
+A theme in the application has the following structure:
+
+```typescript
+export interface Theme {
+  key: string;
+  name: string;
+  colors: ThemeColors;
+}
+
+export interface ThemeColors {
+  screenBackgroundColor: string;
+  backgroundColor: string;
+  primaryColor: Color;
+  secondaryColor: Color;
+  secondaryColor_dark: Color;
+  errorColor: Color;
+  cautionColor: Color;
+  plannedColor: Color;
+  progressColor: Color;
+  priorityColor: Color;
+  defaultColor: Color;
+  importantColor: Color;
+  successColor: Color;
+  warningColor: Color;
+  inverseColor: Color;
+  infoColor: Color;
+  text: string;
+  placeholderTextColor: string;
+}
+
+export interface Color {
+  background_light: string; // This color is a lighter variation of the main color 
+  foreground: string; // This color is mainly used for text to maintain a good contrast with the background color
+  background: string; // This is the main color for this structure
+}
+```
+
+Once the context is in place, you can access current theme colors with the hook `useThemeColor`. Then, you can use the colors directly in your components:
+
+```typescript
+import { Button, useThemeColor } from '@axelor/aos-mobile-ui';
+
+...
+
+const Colors = useThemeColor();
+
+...
+<Button
+    title="Save"
+    color={Colors.primaryColor}
+    onPress={() => console.log("Pressed")}
+/>
+```
+
+### Use writing themes management system
+
+Writing themes management system is based on the same structure as theme system defined above with a context provider called `WritingThemeProvider`.
+
+A writing theme in the application has the following structure:
+
+```typescript
+export interface Writing {
+  key: string;
+  name: string;
+  style: WritingStyles;
+}
+
+export interface WritingStyles {
+  defaultSize: number;
+  title: TextStyle;
+  subTitle: TextStyle;
+  textImportant: TextStyle;
+  textDetails: TextStyle;
+}
+
+export interface TextStyle {
+  fontSize?: number;
+  fontWeight?: 'normal' | 'bold';
+  fontStyle?: 'normal' | 'italic';
+}
+```
+
+Once the context is in place, you can access the current theme with the hook `useWritingStyle`. Then, you can use the writing styles directly in your components:
+
+```typescript
+import { Text, useWritingStyle } from '@axelor/aos-mobile-ui';
+
+...
+
+const Writing = useWritingStyle();
+
+...
+<Text style={Writing.title}>Hello World</Text>
+```
+
+### Use outside click notifier
+
+This package provides a context provider to notify components when the user clicks out, this provider is called `OutsideAlerterProvider` and should wrap the application component.
+
+Once the context is in place, you can ask to be notified in the component by using the hook `useClickOutside`. This hook needs the reference of the global view of your component and a boolean to know if the component is active:
+
+```typescript
+import { OUTSIDE_INDICATOR, useClickOutside } from '@axelor/aos-mobile-ui';
+
+...
+
+const ComponentName = (...) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const clickOutside = useClickOutside({wrapperRef, visible: isOpen});
+
+  useEffect(() => {
+    if (clickOutside === OUTSIDE_INDICATOR && isOpen) {
+      setIsOpen(false);
+    }
+  }, [clickOutside, isOpen]);
+
+  return (
+    <View ref={wrapperRef}>
+      ...
+    </View>
+  );
+};
+```
+
+### Use animation tools
+
+This package provides basic tools to create animation in your application.
+
+All you have to do is to call the method `animateNext` from the object `animationUtil`. This method can take the animation config as an optional parameter or nothing. If nothing is provided, it will use the default config defined in the package:
+
+```typescript
+  {
+    easeInEaseOut: LayoutAnimation.Presets.easeInEaseOut,
+    linear: LayoutAnimation.Presets.linear,
+    spring: LayoutAnimation.Presets.spring,
+  };
+```
+
+For example, if you want to animate the appearance and disappearance of a component children:
+
+```typescript
+import { animationUtil, Icon, useThemeColor } from '@axelor/aos-mobile-ui';
+
+...
+
+const ComponentName = ({children}) => {
+  const [isVisible, setVisible] = useState(true);
+  const Colors = useThemeColor();
+
+  const handleExpandPress = useCallback(() => {
+    animationUtil.animateNext();
+    setVisible(!isVisible);
+  }, [isVisible]);
+
+  return (
+    <View>
+        {isVisible && children}
+        <TouchableOpacity onPress={handleExpandPress}>
+          <Icon
+            name={isVisible ? 'angle-up' : 'angle-down'}
+            size={22}
+            color={Colors.primaryColor.background}
+          />
+        </TouchableOpacity>
+    </View>
+  );
+};
+```
+
+## Developpment
+
+This package is developed as part of the Axelor Open Mobile application. To contribute, please go to the [Github project](https://github.com/axelor/axelor-mobile) and follow the guidelines. You will also find an installation guide to help you configure your environment.

package/lib/components/atoms/BlockInteractionScreen/BlockInteractionScreen.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface BlockInteractionScreenProps {
+    children: ReactNode;
+    hideHeader?: boolean;
+}
+declare const BlockInteractionScreen: ({ children, hideHeader, }: BlockInteractionScreenProps) => JSX.Element;
+export default BlockInteractionScreen;

package/lib/components/atoms/BlockInteractionScreen/BlockInteractionScreen.js

@@ -0,0 +1,50 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import { useConfig } from '../../../config/ConfigContext';
+const DEFAULT_TOP_OFFSET = 0;
+const BlockInteractionScreen = ({ children, hideHeader = false, }) => {
+    const { headerHeight } = useConfig();
+    const styles = useMemo(() => getStyles(hideHeader ? DEFAULT_TOP_OFFSET : headerHeight), [headerHeight, hideHeader]);
+    return (<View style={styles.container}>
+      <View style={styles.greyCard}/>
+      {children}
+    </View>);
+};
+const getStyles = topOffset => StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: topOffset,
+        left: 0,
+        zIndex: 999,
+    },
+    greyCard: {
+        marginTop: 15,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'grey',
+        opacity: 0.2,
+        height: Dimensions.get('window').height * 2,
+        top: -50,
+        width: Dimensions.get('window').width,
+        position: 'absolute',
+    },
+});
+export default BlockInteractionScreen;
+//# sourceMappingURL=BlockInteractionScreen.js.map

package/lib/components/atoms/BlockInteractionScreen/BlockInteractionScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockInteractionScreen.js","sourceRoot":"","sources":["../../../../src/components/atoms/BlockInteractionScreen/BlockInteractionScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAY,OAAO,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAC,MAAM,+BAA+B,CAAC;AAOxD,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B,MAAM,sBAAsB,GAAG,CAAC,EAC9B,QAAQ,EACR,UAAU,GAAG,KAAK,GACU,EAAE,EAAE;IAChC,MAAM,EAAC,YAAY,EAAC,GAAG,SAAS,EAAE,CAAC;IAEnC,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,EAC/D,CAAC,YAAY,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAC7B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,SAAS,CAAC,EAAE,CAC5B,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,GAAG;KACZ;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE;QACb,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM;QACvB,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC;QAC3C,GAAG,EAAE,CAAC,EAAE;QACR,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK;QACrC,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEL,eAAe,sBAAsB,CAAC"}

package/lib/components/atoms/Card/Card.d.ts

@@ -0,0 +1,6 @@
+interface CardProps {
+    style?: any;
+    children: any;
+}
+declare const Card: ({ style, children }: CardProps) => JSX.Element;
+export default Card;

package/lib/components/atoms/Card/Card.js

@@ -0,0 +1,37 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useThemeColor } from '../../../theme/ThemeContext';
+const Card = ({ style, children }) => {
+    const Colors = useThemeColor();
+    const styles = useMemo(() => getStyles(Colors), [Colors]);
+    return <View style={[styles.container, style]}>{children}</View>;
+};
+const getStyles = Colors => StyleSheet.create({
+    container: {
+        paddingHorizontal: 24,
+        paddingRight: 32,
+        paddingVertical: 16,
+        borderRadius: 14,
+        elevation: 3,
+        backgroundColor: Colors.backgroundColor,
+    },
+});
+export default Card;
+//# sourceMappingURL=Card.js.map

package/lib/components/atoms/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/atoms/Card/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAO1D,MAAM,IAAI,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE;IAC5C,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CACzB,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,iBAAiB,EAAE,EAAE;QACrB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,EAAE;QAChB,SAAS,EAAE,CAAC;QACZ,eAAe,EAAE,MAAM,CAAC,eAAe;KACxC;CACF,CAAC,CAAC;AAEL,eAAe,IAAI,CAAC"}

package/lib/components/atoms/DottedLine/DottedLine.d.ts

@@ -0,0 +1,5 @@
+interface DottedLineProps {
+    style?: any;
+}
+declare function DottedLine({ style }: DottedLineProps): JSX.Element;
+export default DottedLine;

package/lib/components/atoms/DottedLine/DottedLine.js

@@ -0,0 +1,38 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useThemeColor } from '../../../theme/ThemeContext';
+function DottedLine({ style }) {
+    const Colors = useThemeColor();
+    const styles = useMemo(() => getStyles(Colors), [Colors]);
+    return <View style={[styles.dottedLine, style]}/>;
+}
+const getStyles = Colors => StyleSheet.create({
+    dottedLine: {
+        borderStyle: 'dotted',
+        height: 35,
+        borderLeftWidth: 2,
+        borderColor: Colors.secondaryColor_dark.background,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+export default DottedLine;
+//# sourceMappingURL=DottedLine.js.map

package/lib/components/atoms/DottedLine/DottedLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DottedLine.js","sourceRoot":"","sources":["../../../../src/components/atoms/DottedLine/DottedLine.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAM1D,SAAS,UAAU,CAAC,EAAC,KAAK,EAAkB;IAC1C,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,EAAG,CAAC;AACrD,CAAC;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CACzB,UAAU,CAAC,MAAM,CAAC;IAChB,UAAU,EAAE;QACV,WAAW,EAAE,QAAQ;QACrB,MAAM,EAAE,EAAE;QACV,eAAe,EAAE,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC,mBAAmB,CAAC,UAAU;QAClD,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC;AAEL,eAAe,UAAU,CAAC"}

package/lib/components/atoms/HorizontalRule/HorizontalRule.d.ts

@@ -0,0 +1,5 @@
+interface HorizontalRuleProps {
+    style?: any;
+}
+declare const HorizontalRule: ({ style }: HorizontalRuleProps) => JSX.Element;
+export default HorizontalRule;

package/lib/components/atoms/HorizontalRule/HorizontalRule.js

@@ -0,0 +1,35 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useThemeColor } from '../../../theme/ThemeContext';
+const HorizontalRule = ({ style }) => {
+    const Colors = useThemeColor();
+    const styles = useMemo(() => {
+        return getStyles(Colors);
+    }, [Colors]);
+    return <View style={[styles.line, style]}/>;
+};
+const getStyles = Colors => StyleSheet.create({
+    line: {
+        borderBottomColor: Colors.secondaryColor.background,
+        borderBottomWidth: 1,
+    },
+});
+export default HorizontalRule;
+//# sourceMappingURL=HorizontalRule.js.map

package/lib/components/atoms/HorizontalRule/HorizontalRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalRule.js","sourceRoot":"","sources":["../../../../src/components/atoms/HorizontalRule/HorizontalRule.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAM1D,MAAM,cAAc,GAAG,CAAC,EAAC,KAAK,EAAsB,EAAE,EAAE;IACtD,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAG,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CACzB,UAAU,CAAC,MAAM,CAAC;IAChB,IAAI,EAAE;QACJ,iBAAiB,EAAE,MAAM,CAAC,cAAc,CAAC,UAAU;QACnD,iBAAiB,EAAE,CAAC;KACrB;CACF,CAAC,CAAC;AAEL,eAAe,cAAc,CAAC"}

package/lib/components/atoms/HtmlInput/HtmlInput.d.ts

@@ -0,0 +1,9 @@
+interface HtmlInputProps {
+    style?: any;
+    styleToolbar?: any;
+    title?: string;
+    onChange?: (value: string) => void;
+    defaultInput?: string;
+}
+declare const HtmlInput: ({ style, styleToolbar, title, onChange, defaultInput, }: HtmlInputProps) => JSX.Element;
+export default HtmlInput;

package/lib/components/atoms/HtmlInput/HtmlInput.js

@@ -0,0 +1,50 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useRef } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useThemeColor } from '../../../theme/ThemeContext';
+import { actions, RichEditor, RichToolbar } from 'react-native-pell-rich-editor';
+import Text from '../Text/Text';
+const HtmlInput = ({ style, styleToolbar, title = '', onChange = () => { }, defaultInput = '', }) => {
+    const Colors = useThemeColor();
+    const richText = useRef();
+    return (<ScrollView>
+      <ScrollView style={[style]}>
+        <View>
+          <Text>{title}</Text>
+          <RichEditor ref={richText} androidHardwareAccelerationDisabled={true} initialContentHTML={defaultInput} onChange={onChange}/>
+        </View>
+      </ScrollView>
+      <RichToolbar style={styleToolbar} editor={richText} selectedIconTint={Colors.primaryColor.background} iconTint={Colors.primaryColor.foreground} actions={[
+            actions.setBold,
+            actions.setItalic,
+            actions.insertBulletsList,
+            actions.insertOrderedList,
+            actions.insertLink,
+            actions.setStrikethrough,
+            actions.setUnderline,
+            actions.checkboxList,
+            actions.undo,
+            actions.redo,
+        ]} iconMap={{
+            [actions.heading1]: ({ tintColor }) => (<Text style={[{ color: tintColor }]}>H1</Text>),
+        }}/>
+    </ScrollView>);
+};
+export default HtmlInput;
+//# sourceMappingURL=HtmlInput.js.map

package/lib/components/atoms/HtmlInput/HtmlInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlInput.js","sourceRoot":"","sources":["../../../../src/components/atoms/HtmlInput/HtmlInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,MAAM,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,+BAA+B,CAAC;AAC/E,OAAO,IAAI,MAAM,cAAc,CAAC;AAYhC,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,YAAY,GAAG,EAAE,GACF,EAAE,EAAE;IACnB,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAE1B,OAAO,CACL,CAAC,UAAU,CACT;MAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACzB;QAAA,CAAC,IAAI,CACH;UAAA,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CACnB;UAAA,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,mCAAmC,CAAC,CAAC,IAAI,CAAC,CAC1C,kBAAkB,CAAC,CAAC,YAAY,CAAC,CACjC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAEvB;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,gBAAgB,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CACjD,QAAQ,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CACzC,OAAO,CAAC,CAAC;YACP,OAAO,CAAC,OAAO;YACf,OAAO,CAAC,SAAS;YACjB,OAAO,CAAC,iBAAiB;YACzB,OAAO,CAAC,iBAAiB;YACzB,OAAO,CAAC,UAAU;YAClB,OAAO,CAAC,gBAAgB;YACxB,OAAO,CAAC,YAAY;YACpB,OAAO,CAAC,YAAY;YACpB,OAAO,CAAC,IAAI;YACZ,OAAO,CAAC,IAAI;SACb,CAAC,CACF,OAAO,CAAC,CAAC;YACP,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAC,SAAS,EAAC,EAAE,EAAE,CAAC,CACnC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,CAC7C;SACF,CAAC,EAEN;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/atoms/Icon/Icon.d.ts

@@ -0,0 +1,13 @@
+interface IconProps {
+    style?: any;
+    name: string;
+    FontAwesome5?: boolean;
+    color?: string;
+    size?: number;
+    touchable?: boolean;
+    visible?: boolean;
+    onPress?: () => void;
+    disabled?: boolean;
+}
+declare const Icon: ({ style, name, FontAwesome5, color, size, touchable, visible, onPress, disabled, }: IconProps) => JSX.Element;
+export default Icon;

package/lib/components/atoms/Icon/Icon.js

@@ -0,0 +1,49 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon5 from 'react-native-vector-icons/FontAwesome5';
+import Icon4 from 'react-native-vector-icons/FontAwesome';
+import { useThemeColor } from '../../../theme/ThemeContext';
+const Icon = ({ style, name, FontAwesome5 = true, color, size = 18, touchable = false, visible = true, onPress = () => { }, disabled = false, }) => {
+    const Colors = useThemeColor();
+    const styles = useMemo(() => {
+        return getStyles(Colors, color == null ? Colors.secondaryColor_dark.background : color, touchable ? disabled : false, size);
+    }, [Colors, color, disabled, size, touchable]);
+    if (!visible) {
+        return null;
+    }
+    return (<View style={[styles.container, style]}>
+      <TouchableOpacity onPress={onPress} disabled={!touchable || disabled}>
+        {FontAwesome5 ? (<Icon5 name={name} style={styles.icon}/>) : (<Icon4 name={name} style={styles.icon}/>)}
+      </TouchableOpacity>
+    </View>);
+};
+const getStyles = (Colors, color, disabled, size) => StyleSheet.create({
+    icon: {
+        color: disabled ? Colors.secondaryColor.background_light : color,
+        fontSize: size,
+    },
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+export default Icon;
+//# sourceMappingURL=Icon.js.map

package/lib/components/atoms/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,KAAK,MAAM,uCAAuC,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAc1D,MAAM,IAAI,GAAG,CAAC,EACZ,KAAK,EACL,IAAI,EACJ,YAAY,GAAG,IAAI,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,QAAQ,GAAG,KAAK,GACN,EAAE,EAAE;IACd,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,OAAO,SAAS,CACd,MAAM,EACN,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAC7D,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC5B,IAAI,CACL,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,QAAQ,CAAC,CACnE;QAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAC1C,CAAC,CAAC,CAAC,CACF,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAC1C,CACH;MAAA,EAAE,gBAAgB,CACpB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAClD,UAAU,CAAC,MAAM,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK;QAChE,QAAQ,EAAE,IAAI;KACf;IACD,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC;AAEL,eAAe,IAAI,CAAC"}

package/lib/components/atoms/Input/Input.d.ts

@@ -0,0 +1,18 @@
+import { KeyboardTypeOptions } from 'react-native';
+interface InputProps {
+    style: any;
+    value: string;
+    onChange: (any: any) => void;
+    placeholder?: string;
+    secureTextEntry?: boolean;
+    readOnly?: boolean;
+    onSelection?: () => void;
+    multiline?: boolean;
+    numberOfLines?: number;
+    keyboardType?: KeyboardTypeOptions;
+    onEndFocus?: () => void;
+    isFocus?: boolean;
+    writingType?: 'title' | 'subtitle' | 'important' | 'details' | undefined;
+}
+declare const Input: ({ style, value, onChange, placeholder, secureTextEntry, readOnly, onSelection, multiline, numberOfLines, keyboardType, onEndFocus, isFocus, writingType, }: InputProps) => JSX.Element;
+export default Input;

package/lib/components/atoms/Input/Input.js

@@ -0,0 +1,37 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2023 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { TextInput } from 'react-native';
+import { useThemeColor } from '../../../theme/ThemeContext';
+import { useWritingType } from '../../../theme/writingTheme';
+import { useConfig } from '../../../config/ConfigContext';
+const Input = ({ style, value, onChange, placeholder, secureTextEntry = false, readOnly = false, onSelection, multiline = false, numberOfLines = 1, keyboardType, onEndFocus = () => { }, isFocus = false, writingType = null, }) => {
+    const Colors = useThemeColor();
+    const { hideVirtualKeyboard } = useConfig();
+    const writingStyle = useWritingType(writingType);
+    const defaultStyle = useMemo(() => {
+        return {
+            ...writingStyle,
+            color: Colors.text,
+            fontSize: 15,
+        };
+    }, [Colors.text, writingStyle]);
+    return (<TextInput style={[defaultStyle, style]} value={value} onChangeText={onChange} placeholder={placeholder} secureTextEntry={secureTextEntry} autoCapitalize="none" editable={!readOnly} onFocus={onSelection} placeholderTextColor={Colors.placeholderTextColor} keyboardType={keyboardType} multiline={multiline} numberOfLines={numberOfLines} onBlur={onEndFocus} showSoftInputOnFocus={hideVirtualKeyboard ? false : true} autoFocus={isFocus}/>);
+};
+export default Input;
+//# sourceMappingURL=Input.js.map

package/lib/components/atoms/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAsB,SAAS,EAAY,MAAM,cAAc,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAC,SAAS,EAAC,MAAM,+BAA+B,CAAC;AAkBxD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,eAAe,GAAG,KAAK,EACvB,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,CAAC,EACjB,YAAY,EACZ,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,EACrB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,IAAI,GACP,EAAE,EAAE;IACf,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,EAAC,mBAAmB,EAAC,GAAG,SAAS,EAAE,CAAC;IAC1C,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAc,OAAO,CAAC,GAAG,EAAE;QAC3C,OAAO;YACL,GAAG,YAAY;YACf,KAAK,EAAE,MAAM,CAAC,IAAI;YAClB,QAAQ,EAAE,EAAE;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAC7B,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,QAAQ,CAAC,CACvB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,cAAc,CAAC,MAAM,CACrB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CACpB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,oBAAoB,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAClD,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,oBAAoB,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CACzD,SAAS,CAAC,CAAC,OAAO,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/atoms/RenderHtml/RenderHtml.d.ts

@@ -0,0 +1,6 @@
+interface RenderHtmlProps {
+    data: string;
+    widthNotes: number;
+}
+declare const RenderHtml: ({ data, widthNotes }: RenderHtmlProps) => JSX.Element;
+export default RenderHtml;