@tecsinapse/react-native-kit 2.2.1 → 3.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 # TecSinapse Design System
 
-[![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/build-deploy.yml/badge.svg)
+[![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/ci.yml/badge.svg)
 
 
 [TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System. 
@@ -23,11 +23,12 @@ Here are a few helpful links for getting started:
 
 ## Packages
 
-| Package                                                         | Content                                              | Version                                     |
-| --------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------- |
-| **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core) |
-| **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit) |
+| Package                                                         | Content                                              | Version                                                                                                                                    |
+|-----------------------------------------------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core)             |
+| **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit)       |
 | **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | the React native component library focused on mobile | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
+| **[@tecsinapse/react-charts](./packages/react-charts)**         | Charts for React based on SVG                        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts)         |
 
 ## Code of conduct
 
@@ -35,11 +36,36 @@ We want to foster an inclusive and friendly community around our Open Source eff
 
 If you feel another member of the community violated our code or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers.
 
+## How to make local changes available for other projects?
+
+At times, it may be necessary to test changes directly in a product, and not in the design system, and for this to work in a less laborious way, we can follow the steps below:
+
+3 terminal tabs should open:
+- In one run the JS code watch:
+```
+yarn build:watch
+```
+- In another run the watch of the TS code watch
+```
+yarn build:declarations:watch
+```
+- On another run yalc push (this script updates linked local projects)
+```
+yarn yalc:push
+```
+
+With that, all changes will be in yalc locally.
+
+To access in your application, see this [example](https://github.com/tecsinapse/vendas-web-poc-playground#tools) in topic "**Yalc link Design System:**"
+
+
 ### Maintainers
 
+- [Beatriz Silva](mailto:beatriz.silva@tecsinapse.com.br)
 - [Denner Vidal](mailto:denner.vidal@tecsinapse.com.br)
-- [Nilson Altonio](mailto:nilson.antonio@tecsinapse.com.br)
-- [Agnaldo Citadin](mailto:agnaldo.citadin@tecsinapse.com.br)
+- [Gabriel Sanches](mailto:gabriel.sanches@tecsinapse.com.br)
+- [Lucas Ramos](mailto:lucas.ramos@tecsinapse.com.br)
+- [Nilson Antonio](mailto:nilson.antonio@tecsinapse.com.br)
 - [Ryan Correa](mailto:ryan.correa@tecsinapse.com.br)
 
 ## Contributing

package/dist/cjs/components/atoms/Avatar/Avatar.js

@@ -9,4 +9,3 @@ const Avatar = (props) => {
 };
 
 module.exports = Avatar;
-//# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/atoms/Badge/Badge.js

@@ -21,4 +21,3 @@ const Badge = ({
 };
 
 module.exports = Badge;
-//# sourceMappingURL=Badge.js.map

package/dist/cjs/components/atoms/BottomNavigator/BottomNavigator.js

@@ -49,4 +49,3 @@ function BottomNavigator({
 BottomNavigator.Item = Item;
 
 module.exports = BottomNavigator;
-//# sourceMappingURL=BottomNavigator.js.map

package/dist/cjs/components/atoms/BottomNavigator/Item.js

@@ -39,4 +39,3 @@ function Item({
 }
 
 module.exports = Item;
-//# sourceMappingURL=Item.js.map

package/dist/cjs/components/atoms/BottomNavigator/styled.js

@@ -33,4 +33,3 @@ exports.CustomTabContent = CustomTabContent;
 exports.StyledView = StyledView;
 exports.TabContainer = TabContainer;
 exports.TabContent = TabContent;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Button/Button.js

@@ -20,4 +20,3 @@ const Button = ({
 };
 
 exports.Button = Button;
-//# sourceMappingURL=Button.js.map

package/dist/cjs/components/atoms/Button/States/Error.js

@@ -9,4 +9,3 @@ const Error = (props) => {
 };
 
 module.exports = Error;
-//# sourceMappingURL=Error.js.map

package/dist/cjs/components/atoms/Button/States/Loading.js

@@ -9,4 +9,3 @@ const Loading = (props) => {
 };
 
 module.exports = Loading;
-//# sourceMappingURL=Loading.js.map

package/dist/cjs/components/atoms/Button/States/Success.js

@@ -9,4 +9,3 @@ const Success = (props) => {
 };
 
 module.exports = Success;
-//# sourceMappingURL=Success.js.map

package/dist/cjs/components/atoms/GroupButton/GroupButtonOption.js

@@ -9,4 +9,3 @@ const GroupButtonOption = (props) => {
 };
 
 module.exports = GroupButtonOption;
-//# sourceMappingURL=GroupButtonOption.js.map

package/dist/cjs/components/atoms/Header/Header.js

@@ -44,4 +44,3 @@ const Header = ({
 };
 
 module.exports = Header;
-//# sourceMappingURL=Header.js.map

package/dist/cjs/components/atoms/Header/styled.js

@@ -21,4 +21,3 @@ const Dummy = styled(FloatingButton)`
 exports.Dummy = Dummy;
 exports.FloatingButton = FloatingButton;
 exports.StyledView = StyledView;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Input/Input.js

@@ -83,4 +83,3 @@ const Input = React.forwardRef(
 Input.displayName = "Input";
 
 module.exports = Input;
-//# sourceMappingURL=Input.js.map

package/dist/cjs/components/atoms/Input/styled.js

@@ -12,4 +12,3 @@ const StyledNativeInputBase = styled(reactCore.InputElement)`
 const StyledNativeInput = styled(StyledNativeInputBase)(styled$1.fontStyles);
 
 exports.StyledNativeInput = StyledNativeInput;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/InputMask/InputMask.js

@@ -80,4 +80,3 @@ const InputMask = React.forwardRef(
 InputMask.displayName = "InputMask";
 
 module.exports = InputMask;
-//# sourceMappingURL=InputMask.js.map

package/dist/cjs/components/atoms/InputMask/styled.js

@@ -16,4 +16,3 @@ const StyledNativeInputMask = styled(StyledNativeInputMaskBase)(styled$1.fontSty
 
 exports.StyledInputContainer = StyledInputContainer;
 exports.StyledNativeInputMask = StyledNativeInputMask;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Modal/ModalGroupManager.js

@@ -24,4 +24,3 @@ const ModalGroupManager = ({ children, ...others }) => {
 
 exports.ModalGroupManager = ModalGroupManager;
 exports.modalLifecycle = modalLifecycle;
-//# sourceMappingURL=ModalGroupManager.js.map

package/dist/cjs/components/atoms/Modal/ModalLifecycleHandler.js

@@ -128,4 +128,3 @@ const createModalLifecycleHandler = () => {
 
 exports.ModalLifecycleHandler = ModalLifecycleHandler;
 exports.createModalLifecycleHandler = createModalLifecycleHandler;
-//# sourceMappingURL=ModalLifecycleHandler.js.map

package/dist/cjs/components/atoms/Modal/ui/BaseModalView.js

@@ -147,4 +147,3 @@ const ModalView = ({
 };
 
 exports.ModalView = ModalView;
-//# sourceMappingURL=BaseModalView.js.map

package/dist/cjs/components/atoms/Modal/ui/styled.js

@@ -25,4 +25,3 @@ const CloseBar = styled.View`
 exports.BackDropView = BackDropView;
 exports.CloseBar = CloseBar;
 exports.StyledPressableBackDrop = StyledPressableBackDrop;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Modal/useLazyModalManager.js

@@ -32,4 +32,3 @@ const useLazyModalManager = (modalId) => {
 };
 
 exports.useLazyModalManager = useLazyModalManager;
-//# sourceMappingURL=useLazyModalManager.js.map

package/dist/cjs/components/atoms/Modal/useModalManager.js

@@ -23,4 +23,3 @@ const useModalManager = (modal, modalId) => {
 };
 
 exports.useModalManager = useModalManager;
-//# sourceMappingURL=useModalManager.js.map

package/dist/cjs/components/atoms/Modal/useModalRemoteControl.js

@@ -17,4 +17,3 @@ const useModalRemoteControl = (modalId) => {
 };
 
 exports.useModalRemoteControl = useModalRemoteControl;
-//# sourceMappingURL=useModalRemoteControl.js.map

package/dist/cjs/components/atoms/Skeleton/Pulse.js

@@ -33,4 +33,3 @@ const Pulse = ({
 };
 
 exports.Pulse = Pulse;
-//# sourceMappingURL=Pulse.js.map

package/dist/cjs/components/atoms/Skeleton/Skeleton.js

@@ -57,4 +57,3 @@ const Skeleton = ({
 };
 
 module.exports = Skeleton;
-//# sourceMappingURL=Skeleton.js.map

package/dist/cjs/components/atoms/Skeleton/Wave.js

@@ -72,4 +72,3 @@ const Wave = ({
 };
 
 exports.Wave = Wave;
-//# sourceMappingURL=Wave.js.map

package/dist/cjs/components/atoms/Skeleton/animation.js

@@ -45,4 +45,3 @@ const pulseAnimation = (active, animatedValue) => {
 
 exports.pulseAnimation = pulseAnimation;
 exports.waveAnimation = waveAnimation;
-//# sourceMappingURL=animation.js.map

package/dist/cjs/components/atoms/Skeleton/styled.js

@@ -12,4 +12,3 @@ const Wrapper = styled.View`
 `;
 
 exports.Wrapper = Wrapper;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/SnappingSlider/SnappingSlider.js

@@ -73,4 +73,3 @@ const SnappingSlider = ({
 };
 
 module.exports = SnappingSlider;
-//# sourceMappingURL=SnappingSlider.js.map

package/dist/cjs/components/atoms/Tag/Tag.js

@@ -25,4 +25,3 @@ const Tag = ({ value, ...rest }) => {
 };
 
 module.exports = Tag;
-//# sourceMappingURL=Tag.js.map

package/dist/cjs/components/atoms/Text/Text.js

@@ -8,4 +8,3 @@ const Text = ({ children, ...rest }) => {
 };
 
 module.exports = Text;
-//# sourceMappingURL=Text.js.map

package/dist/cjs/components/atoms/Text/styled.js

@@ -20,4 +20,3 @@ const StyledNativeText = styled(reactCore.Text)(fontStyles);
 
 exports.StyledNativeText = StyledNativeText;
 exports.fontStyles = fontStyles;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/TextArea/TextArea.js

@@ -81,4 +81,3 @@ const TextArea = ({
 };
 
 module.exports = TextArea;
-//# sourceMappingURL=TextArea.js.map

package/dist/cjs/components/atoms/TextArea/styled.js

@@ -7,4 +7,3 @@ var styled$1 = require('../Text/styled.js');
 const StyledNativeInput = styled(reactCore.TextAreaInputBase)(styled$1.fontStyles);
 
 exports.StyledNativeInput = StyledNativeInput;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/Calendar/Calendar.js

@@ -20,4 +20,3 @@ const Calendar = ({
 };
 
 exports.Calendar = Calendar;
-//# sourceMappingURL=Calendar.js.map

package/dist/cjs/components/molecules/DatePicker/DatePicker.js

@@ -13,17 +13,45 @@ var styled = require('./styled.js');
 const DatePicker = ({
   locale,
   onChange,
+  value,
+  type,
   ...rest
 }) => {
   const modal = useLazyModalManager.useLazyModalManager();
-  const handleChange = (value) => {
-    onChange?.(value);
+  const handleChange = (value2) => {
+    onChange?.(value2);
     modal.requestUpdate();
   };
+  const getYear = React.useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getFullYear();
+      } else {
+        return new Date(value).getFullYear();
+      }
+    }
+    return void 0;
+  }, [value]);
+  const getMonth = React.useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getMonth();
+      } else {
+        return new Date(value).getMonth();
+      }
+    }
+    return void 0;
+  }, [value]);
   return /* @__PURE__ */ React.createElement(
     reactCore.DatePicker,
     {
       ...rest,
+      value,
+      month: getMonth,
+      year: getYear,
+      type,
       TextComponent: Text,
       CalendarComponent: Calendar.Calendar,
       locale: locale ?? date.getLocale(),
@@ -39,4 +67,3 @@ const NativeModal = ({ children, ...others }) => {
 };
 
 exports.DatePicker = DatePicker;
-//# sourceMappingURL=DatePicker.js.map

package/dist/cjs/components/molecules/DatePicker/styled.js

@@ -8,4 +8,3 @@ const CalendarBoxContent = styled(reactCore.BoxContent)`
 `;
 
 exports.CalendarBoxContent = CalendarBoxContent;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js

@@ -7,7 +7,7 @@ require('react-native');
 var BaseModalView = require('../../atoms/Modal/ui/BaseModalView.js');
 var useLazyModalManager = require('../../atoms/Modal/useLazyModalManager.js');
 var Text = require('../../atoms/Text/Text.js');
-var DateTimeSelector = require('../DateTimeSelector/DateTimeSelector.js');
+var DateTimePickerSelector = require('../DateTimePickerSelector/DateTimePickerSelector.js');
 
 const DateTimePicker = ({
   locale,
@@ -19,10 +19,16 @@ const DateTimePicker = ({
     {
       ...rest,
       TextComponent: Text,
-      DateTimeSelectorComponent: DateTimeSelector.DateTimeSelector,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React.createElement(
+        reactCore.ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       locale: locale ?? date.getLocale(),
-      requestShowSelector: () => modal.show(),
-      requestCloseSelector: () => modal.close(),
+      requestShowSelector: modal.show,
+      requestCloseSelector: modal.close,
       renderSelector: (selector, blur) => modal.sync(/* @__PURE__ */ React.createElement(NativeModal, { onClose: blur }, selector))
     }
   );
@@ -32,4 +38,3 @@ const NativeModal = ({ children, ...others }) => {
 };
 
 exports.DateTimePicker = DateTimePicker;
-//# sourceMappingURL=DateTimePicker.js.map

package/dist/cjs/components/molecules/DateTimePickerSelector/DateTimePickerSelector.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var React = require('react');
+var Button = require('../../atoms/Button/Button.js');
+var reactCore = require('@tecsinapse/react-core');
+var Text = require('../../atoms/Text/Text.js');
+var ScrollableSelector = require('../ScrollableSelector/ScrollableSelector.js');
+var Calendar = require('../Calendar/Calendar.js');
+var styled = require('./styled.js');
+var date = require('../../../utils/date.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DateTimePickerSelector = ({
+  TextComponent = Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date: date$1,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__namespace.createElement(styled.Root, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.Header, null, currentMode === 1 && /* @__PURE__ */ React__namespace.createElement(styled.BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React__namespace.createElement(
+    reactCore.Icon,
+    {
+      type: "material-community",
+      name: "chevron-left",
+      size: "mega",
+      colorVariant: "secondary"
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React__namespace.createElement(
+    Calendar.Calendar,
+    {
+      type: "day",
+      value: date$1,
+      onChange: handleCalendarChange,
+      year: date$1.getFullYear(),
+      month: date$1.getMonth()
+    }
+  ) : isMonth ? /* @__PURE__ */ React__namespace.createElement(styled.Content, null, /* @__PURE__ */ React__namespace.createElement(
+    ScrollableSelector,
+    {
+      onChange: setDate,
+      value: date$1,
+      yearLabel,
+      monthLabel,
+      format: "MM-yyyy",
+      locale: locale ?? date.getLocale()
+    }
+  )) : /* @__PURE__ */ React__namespace.createElement(styled.Content, null, /* @__PURE__ */ React__namespace.createElement(
+    ScrollableSelector,
+    {
+      onChange: setDate,
+      value: date$1,
+      hourLabel,
+      minuteLabel,
+      format: "HH-mm",
+      locale: locale ?? date.getLocale()
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(Button.Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React__namespace.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+module.exports = DateTimePickerSelector;

package/dist/cjs/components/molecules/DateTimePickerSelector/styled.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactCore = require('@tecsinapse/react-core');
+
+const Root = styled.View`
+  position: relative;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+const Content = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: ${({ theme }) => theme.spacing.deca};
+  margin-bottom: ${({ theme }) => theme.spacing.deca};
+`;
+const BackButton = styled(reactCore.PressableSurface)`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+  aspect-ratio: 1;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+exports.BackButton = BackButton;
+exports.Content = Content;
+exports.Header = Header;
+exports.Root = Root;

package/dist/cjs/components/molecules/Grid/Grid.js

@@ -64,4 +64,3 @@ const Grid = ({
 };
 
 module.exports = Grid;
-//# sourceMappingURL=Grid.js.map

package/dist/cjs/components/molecules/Grid/Item/Item.js

@@ -55,4 +55,3 @@ const GridItem = ({
 };
 
 module.exports = GridItem;
-//# sourceMappingURL=Item.js.map

package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js

@@ -42,4 +42,3 @@ const IconTextButton = ({
 };
 
 module.exports = IconTextButton;
-//# sourceMappingURL=IconTextButton.js.map

package/dist/cjs/components/molecules/IconTextButton/TextComponent.js

@@ -27,4 +27,3 @@ const TextComponent = ({
 var TextComponent$1 = React.memo(TextComponent);
 
 module.exports = TextComponent$1;
-//# sourceMappingURL=TextComponent.js.map

package/dist/cjs/components/molecules/IconTextButton/styled.js

@@ -28,4 +28,3 @@ const StyledText = styled(Text)`
 
 exports.StyledIconTextButton = StyledIconTextButton;
 exports.StyledText = StyledText;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/InputPassword/InputPassword.js

@@ -28,4 +28,3 @@ const InputPassword = React.forwardRef(
 InputPassword.displayName = "InputPassword";
 
 module.exports = InputPassword;
-//# sourceMappingURL=InputPassword.js.map

package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js

@@ -28,4 +28,3 @@ const LabelComponent = ({
 var LabelComponent$1 = React.memo(LabelComponent);
 
 module.exports = LabelComponent$1;
-//# sourceMappingURL=LabelComponent.js.map

package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js

@@ -49,4 +49,3 @@ const LabeledSwitch = ({
 };
 
 module.exports = LabeledSwitch;
-//# sourceMappingURL=LabeledSwitch.js.map

package/dist/cjs/components/molecules/LabeledSwitch/styled.js

@@ -24,4 +24,3 @@ const StyledLabel = styled(Text)`
 
 exports.StyledLabel = StyledLabel;
 exports.StyledView = StyledView;
-//# sourceMappingURL=styled.js.map