@symply.io/basic-components 1.0.0-alpha.2 → 1.0.0-alpha.5

package/PhoneNumberInput/index.d.ts

@@ -7,5 +7,6 @@ export interface PhoneInputProps {
     endAdornment?: InputProps["endAdornment"];
     onChange: (val: string) => void;
 }
+export declare function phoneFormat(str: string): string;
 declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
 export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -26,19 +26,34 @@ import Typography from "@mui/material/Typography";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
+export function phoneFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 3) {
+            return "".concat(prev, ") ").concat(curr);
+        }
+        else if (index === 6) {
+            return "".concat(prev, "-").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "(");
+}
 function PhoneInput(props) {
     var value = props.value, endAdornment = props.endAdornment, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "onChange"]);
-    var _a = useInteractions({ value: value }), addMask = _a.addMask, phoneFormat = _a.phoneFormat;
+    var addMask = useInteractions({ value: value }).addMask;
     var rifm = useRifm({
         mask: true,
         value: String(value),
         onChange: onChange,
         replace: addMask,
-        format: phoneFormat,
+        format: phoneFormat
     });
     return (_jsx(TextField, __assign({ value: rifm.value, InputProps: {
             startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
-            endAdornment: endAdornment,
+            endAdornment: endAdornment
         }, onChange: rifm.onChange }, rest), void 0));
 }
 export default PhoneInput;

package/PhoneNumberInput/useInteractions.d.ts

@@ -4,6 +4,5 @@ interface InteractionProps {
 declare function useInteractions(props: InteractionProps): {
     valLength: number;
     addMask: (str: string) => string;
-    phoneFormat: (str: string) => string;
 };
 export default useInteractions;

package/PhoneNumberInput/useInteractions.js

@@ -1,19 +1,6 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value;
-    var phoneFormat = useCallback(function (str) {
-        var digits = (str.match(/\d+/g) || []).join("");
-        var chars = digits.split("");
-        return chars.reduce(function (prev, curr, index) {
-            if (index === 3) {
-                return "".concat(prev, ") ").concat(curr);
-            }
-            if (index === 6) {
-                return "".concat(prev, "-").concat(curr);
-            }
-            return "".concat(prev).concat(curr);
-        }, "(");
-    }, []);
     var addMask = useCallback(function (str) {
         var digits = (str.match(/\d+/g) || []).join("");
         var areaCode = digits.slice(0, 3).padEnd(3, "_");
@@ -25,6 +12,6 @@ function useInteractions(props) {
         var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask, phoneFormat: phoneFormat };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/README.md

@@ -23,6 +23,7 @@
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
   - [TabGroup](#tabgroup)
+  - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
 - [Changelog](#changelog)
@@ -33,7 +34,7 @@
 
 It is available as an [npm package](https://www.npmjs.com/package/@symply.io/basic-components).
 
-```bash
+```shell
 // with npm
 npm install @symply.io/basic-components
 
@@ -58,9 +59,9 @@ Diglog component for alerts or confirmations.
 <h5>Import</h5>
 
 ```typescript
-import { AlertDialog } from '@symply.io/symply-basic-components';
+import { AlertDialog } from '@symply.io/basic-components/';
 // or 
-import AlertDialog from '@symply.io/symply-basic-components/AlertDialog'; 
+import AlertDialog from '@symply.io/basic-components/AlertDialog'; 
 ```
 
 <h5>Props</h5>
@@ -83,9 +84,9 @@ Reusable modal component.
 <h5>Import</h5>
 
 ```typescript
-import { BasicModal } from '@symply.io/symply-basic-components';
+import { BasicModal } from '@symply.io/basic-components/';
 // or 
-import BasicModal from '@symply.io/symply-basic-components/BasicModal'; 
+import BasicModal from '@symply.io/basic-components/BasicModal'; 
 ```
 
 <h5>Props</h5>
@@ -119,9 +120,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { DigitInput } from '@symply.io/symply-basic-components';
+import { DigitInput } from '@symply.io/basic-components/';
 // or 
-import DigitInput from '@symply.io/symply-basic-components/DigitInput'; 
+import DigitInput from '@symply.io/basic-components/DigitInput'; 
 ```
 
 <h5>Props</h5>
@@ -144,9 +145,9 @@ Radio Group allow the user to select one option from a set.
 <h5>Import</h5>
 
 ```typescript
-import { FormRadioGroup } from '@symply.io/symply-basic-components';
+import { FormRadioGroup } from '@symply.io/basic-components/';
 // or 
-import FormRadioGroup from '@symply.io/symply-basic-components/FormRadioGroup'; 
+import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup'; 
 ```
 
 <h5>Radio Option Props</h5>
@@ -179,9 +180,9 @@ Selector components are used for collecting user provided information from a lis
 
 ```typescript
 // Simple Selector
-import { SimpleSelector } from '@symply.io/symply-basic-components/FormSelector';
+import { SimpleSelector } from '@symply.io/basic-components/FormSelector';
 // Multiple Selector 
-import { MultipleSelector } from '@symply.io/symply-basic-components/FormRadioGroup'; 
+import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup'; 
 ```
 
 <h5>Selector Option Props</h5>
@@ -230,9 +231,9 @@ You can use it to add a hint/help paragraph.
 <h5>Import</h5>
 
 ```typescript
-import { HelpCaption } from '@symply.io/symply-basic-components';
+import { HelpCaption } from '@symply.io/basic-components/';
 // or 
-import HelpCaption from '@symply.io/symply-basic-components/HelpCaption';
+import HelpCaption from '@symply.io/basic-components/HelpCaption';
 ```
 
 <h5>Props</h5>
@@ -254,9 +255,9 @@ A modal for loading.
 <h5>Import</h5>
 
 ```typescript
-import { LoadingModal } from '@symply.io/symply-basic-components';
+import { LoadingModal } from '@symply.io/basic-components/';
 // or 
-import LoadingModal from '@symply.io/symply-basic-components/LoadingModal';
+import LoadingModal from '@symply.io/basic-components/LoadingModal';
 ```
 
 <h5>Props</h5>
@@ -278,9 +279,9 @@ A button with menu options.
 <h5>Import</h5>
 
 ```typescript
-import { MenuButtonGroup } from '@symply.io/symply-basic-components';
+import { MenuButtonGroup } from '@symply.io/basic-components/';
 // or 
-import MenuButtonGroup from '@symply.io/symply-basic-components/MenuButtonGroup';
+import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
 ```
 
 <h5>Menu Button Props</h5>
@@ -315,9 +316,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { NumberInput } from '@symply.io/symply-basic-components';
+import { NumberInput } from '@symply.io/basic-components/';
 // or 
-import NumberInput from '@symply.io/symply-basic-components/NumberInput'; 
+import NumberInput from '@symply.io/basic-components/NumberInput'; 
 ```
 
 <h5>Props</h5>
@@ -343,9 +344,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 
 ```typescript
 // Password
-import { Password } from '@symply.io/symply-basic-components/PasswordInput';
+import { Password } from '@symply.io/basic-components/PasswordInput';
 // Confirm Password 
-import { ConfirmPassword } from '@symply.io/symply-basic-components/PasswordInput'; 
+import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput'; 
 ```
 
 <h5>Password Props</h5>
@@ -377,9 +378,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { PhoneNumberInput } from '@symply.io/symply-basic-components';
+import { PhoneNumberInput } from '@symply.io/basic-components/';
 // or 
-import PhoneNumberInput from '@symply.io/symply-basic-components/PhoneNumberInput'; 
+import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput'; 
 ```
 
 <h5>Props</h5>
@@ -399,9 +400,9 @@ Tabs group.
 <h5>Import</h5>
 
 ```typescript
-import { TabGroup } from '@symply.io/symply-basic-components';
+import { TabGroup } from '@symply.io/basic-components/';
 // or 
-import TabGroup from '@symply.io/symply-basic-components/TabGroup'; 
+import TabGroup from '@symply.io/basic-components/TabGroup'; 
 ```
 
 <h5>Props</h5>
@@ -425,9 +426,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { TextInput } from '@symply.io/symply-basic-components';
+import { TextInput } from '@symply.io/basic-components/';
 // or 
-import TextInput from '@symply.io/symply-basic-components/TextInput'; 
+import TextInput from '@symply.io/basic-components/TextInput'; 
 ```
 
 <h5>Props</h5>
@@ -449,7 +450,7 @@ Global prompt component.
 <h5>Import</h5>
 
 ```typescript
-import { usePrompt } from '@symply.io/symply-basic-components';
+import { usePrompt } from '@symply.io/basic-components';
 ```
 
 <h5>Usage</h5>
@@ -474,9 +475,9 @@ A modal for playing videos.
 <h5>Import</h5>
 
 ```typescript
-import { VideoPlayerModal } from '@symply.io/symply-basic-components';
+import { VideoPlayerModal } from '@symply.io/basic-components/';
 // or
-import VideoPlayerModal from '@symply.io/symply-basic-components/VideoPlayerModal';
+import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
 ```
 
 <h5>Props</h5>
@@ -495,5 +496,5 @@ import VideoPlayerModal from '@symply.io/symply-basic-components/VideoPlayerModa
 
 <h2>Changelog</h2>
 
-If you have recently updated, please read the [changelog](https://github.com/rinxun/symply-basic-components/releases) for details of what has changed.
+If you have recently updated, please read the [changelog](https://github.com/baseline-software/symply-basic-components/releases) for details of what has changed.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.5",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",