@mirai/ui 1.0.152 → 1.0.153

package/README.md

@@ -113,6 +113,7 @@ This primitive returns an element that displays with relative position to other
 - `timestamp:number` if you want to force render to recalculate the position of content, assign this property with a number (`Date.now()`).
 - `top:bool` if you want open the content above the reference component.
 - `visible:boolean` showing or hiding the layer
+- `onPosition:boolean` called when the position of the layer is calculated or updated. It receives `orientation` argument, which is an object containing information about the layer's position with `top` and `left` properties
 
 The position of the layer is based on the position of the element to be displayed. If the layer can show on right or left because have a gap in this direction, the layer will be shown on the right or left of the element to be displayed. If the layer can open on top or bottom because have a gap in this direction, the layer will be shown on the top or bottom of the element to be displayed
 
@@ -219,7 +220,7 @@ This primitive is used to make vertically scrollable views and receives the foll
 - `snap:bool` if you want use the CSS feature `scroll-snap`
 - `tag:string` html tag of resulting element
 - `width:number` width value
-- `onscroll:function` executed when user scrolls over the element
+- `onScroll:function` executed when user scrolls over the element
 
 ```jsx
 import { ScrollView, View } from '@mirai/ui';
@@ -234,7 +235,35 @@ const MyComponent = ({ isDesktop }) => (
 
 ### Select
 
-> @TODO
+This primitive returns a select element and receives the following props:
+- `disabled:boolean` applying 'disabled' attribute
+- `emptyOption:string` label for the empty default value (e.g. 'Select an option')
+- `options:string[]` select options text and values
+- `value:string` current value
+- `onChange:function` executed when input value changes
+- `onEnter` executed when select is focused
+- `onError` executed when an error occurs
+- `onLeave` executed when select loses
+
+```jsx
+import { Select } from '@mirai/ui';
+
+const Example = (props) => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (next, ...others) => {
+    setValue(next);
+  };
+
+    return <Select 
+      emptyOption='Select one option...'
+      name='Select'
+      options={['foo', 'bar']}
+      value={value} 
+      onChange={handleChange}
+       />;
+};
+```
 
 ### Switch
 
@@ -283,6 +312,7 @@ A primitive for displaying text. It receives the following props:
 - `tag:string` html tag of resulting element
 - `underline:boolean` use an underline text decoration
 - `upperCase:boolean` switching text to upper case
+- `wide:boolean` specifies whether the component should have more width or not
 
 ```jsx
 import { Text, View } from '@mirai/ui';
@@ -422,6 +452,7 @@ const MyComponent = (props) => {
 
 A calendar component that receives the following props:
 
+- `autoScroll:boolean` specifies whether the calendar should automatically scroll to the selected date or the focused month
 - `captions:object` captions to be placed into calendar cells
 - `disabledDates:[string]` dates to be shown as unavailable and can't be selected
 - `disabledPast:boolean` past dates to be shown as unavailable and can't be selected
@@ -489,11 +520,119 @@ const MyComponent = props => {
 
 ### Form
 
-> @TODO
+Component that unites various inputs of different types into a single form. It receives the following props:
+
+- `children:node` elements to be rendered within the form
+- `debounce:number` the delay before triggering the onChange callback after the form values have changed (0 by default)
+- `schema:object` defines validation schema for the form fields. Maps field names to their respective validation rules
+- `showErrors:boolean` indicates whether to display the validation errors for the form fields
+- `tag:string` HTML tag name to be used for rendering the form element ('form' by default)
+- `validateOnMount:boolean` indicates whether to perform validation on form mount
+- `onBlur:function` executed when a form field loses focus
+- `onChange:function` executed when any field value changes
+- `onError:function` executed when one or more fields have errors
+- `onFocus:function` when a form field gets focus
+- `onSubmit:function` executed when the form is submitted
+
+```jsx
+import { Button, Form, InputDate, InputText } from '@mirai/ui';
+
+const Example = (props) => {
+  const [condition, setCondition] = useState(false);
+  const [form, setForm] = useState({
+    email: 'javi@mirai.com',
+    dateOfBirth: '04/10/1980',
+  });
+  const [error, setError] = useState({});
+
+  const handleBlur = (...others) => console.log('<Form>::onBlur', ...others);
+
+  const handleChange = (next, ...others) => {
+    setForm(next);
+  };
+
+  const handleError = (next, ...others) => {
+    setError(next);
+  };
+
+  const handleFocus = (...others) => console.log('<Form>::onFocus', ...others);
+
+  const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);
+
+  return (
+      <Form
+        {...props}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        onError={handleError}
+        onFocus={handleFocus}
+        onSubmit={handleSubmit}
+      >
+        <InputText
+          name="email"
+          error={!!error.email}
+          test={(value) => value.includes('@mirai.com')}
+          label="Email"
+          hint="Should contains @mirai.com"
+          required
+          type="email"
+          value={form.email}
+        />
+        <InputDate
+          name="dateOfBirth"
+          error={!!error.dateOfBirth}
+          label="Your birthdate"
+          max="31/12/2022"
+          min="10/04/1980"
+          required
+          type="inputDate"
+          value={form.dateOfBirth}
+        />
+
+        <Button disabled={Object.keys(error).length !== 0} type="submit" wide>
+          Submit
+        </Button>
+      </Form>
+  );
+};
+```
 
 ### InputDate
 
-> @TODO
+Input date component that receives the following props:
+
+- `format:string` date format to be applied ('DD/MM/YYYY' by default)
+- `max:string` maximum date value allowed
+- `min:string` minimum date value allowed
+- `placeholder:bool` indicated whether to show placeholder with format or not
+- `value:string` current value
+- `onChange:function` executed when the value is changed
+- `onError:function` executed when there's an error
+
+```jsx
+import { InputDate } from '@mirai/ui';
+
+const Example = ({ value: propValue, ...props }) => {
+  const [value, setValue] = useState(propValue);
+
+  const handleChange = (next, ...others) => {
+    setValue(next);
+  };
+
+  const handleError = (...others) => console.log('<InputDate>::onError', ...others);
+
+  return (
+    <InputDate
+      format='MM/DD/YYYY'
+      min='03/20/2023'
+      max='03/20/2028'
+      value={value}
+      onChange={handleChange}
+      onError={handleError}
+    />
+  );
+};
+```
 
 ### InputNumber
 
@@ -593,11 +732,97 @@ const MyComponent = () => {
 
 ### InputPhone
 
-> @TODO
+Input element for phone numbers that receives the following props:
+
+- `disabled:boolean` applying 'disabled' attribute
+- `error:boolean` indicating whether there is an error in the input
+- `hint:string` text with additional info to be displayed below the input
+- `icon:function` icon component to be displayed before the input
+- `label:string` label text for the phone number part
+- `labelPrefix:string` label text for the country code part
+- `name:string` - required prop, input name
+- `prefixes:string[]` available country codes
+- `showRequired:boolean` indicating whether the "required" indicator should be shown
+- `showState:boolean` indicating whether to show the state icons for errors, success, and warning
+- `success:boolean` indicating whether the input has a success state
+- `value:string` current value
+- `warning:boolean` indicating whether the input has a warning state
+- `onChange:function` executed when input value changes
+- `onEnter:function` executed when input gets focus
+- `onError:function` executed when there are validation errors in the input
+- `onLeave:function` executed when input loses focus
+
+```jsx
+import { InputPhone } from '@mirai/ui';
+
+export const Story = (props) => {
+  const [value, setValue] = useState('+34 123456789');
+
+  const handleChange = (next, ...others) => {
+    setValue(next);
+  };
+
+  const handleError = (...others) => console.log('<InputSelect>::onError', ...others);
+
+  return (
+    <InputPhone
+      hint='hint'
+      label='Phone Number'
+      labelPrefix='Code'
+      name='name'
+      prefixes={['+34', '+44', '+001', '+999', '+39', '+56']}
+      required
+      value={value}
+      onChange={handleChange}
+      onError={handleError}
+    />
+  );
+};
+```
 
 ### InputSelect
 
-> @TODO
+A select input component that receives the following props:
+
+- `disabled:boolean` applying 'disabled' attribute
+- `error:boolean` indicating whether there is an error in the input
+- `hint:string` text with additional info to be displayed below the input
+- `label:string` label text 
+- `name:string` - required prop, input name
+- `showRequired:boolean` indicating whether the "required" indicator should be shown
+- `showState:boolean` indicating whether to show the state icons for errors, success, and warning
+- `success:boolean` indicating whether the input has a success state
+- `warning:boolean` indicating whether the input has a warning state
+- `onChange:function` executed when input value changes
+- `onEnter:function` executed when input gets focus
+- `onError:function` executed when there are validation errors in the input
+- `onLeave:function` executed when input loses focus
+
+```jsx
+import { InputSelect } from '@mirai/ui';
+
+const Example = (props) => {
+  const [value, setValue] = useState('two');
+
+  const handleChange = (next, ...others) => {
+    setValue(next);
+  };
+
+  const handleEnter = (...others) => console.log('<InputSelect>::onEnter', ...others);
+  const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);
+
+  return (<InputSelect 
+            hint='hint'
+            label='label'
+            name='name'
+            options={['one', 'two', 'three', 'four', 'five']}
+            value={value} 
+            onChange={handleChange} 
+            onEnter={handleEnter} 
+            onLeave={handleLeave} 
+            />);
+};
+```
 
 ### InputText
 
@@ -751,7 +976,34 @@ const MyComponent = (props) => {
 
 ### Notification
 
-> @TODO
+A component that displays a notification message with optional icons and close button and receives the following props:
+
+- `children: node` required prop, the content of the notification (any valid React node)
+- `error:bool` indicating whether the notification represents an error message with corresponding styles
+- `info:bool` indicating whether the notification represents an informational message
+- `inline:bool` indicating whether the notification should be displayed inline
+- `large:bool` indicating whether the notification should be displayed in a large size
+- `small:bool` indicating whether the notification should be displayed in a small size
+- `success:bool` indicating whether the notification represents a success message with corresponding styles
+- `warning:bool` indicating whether the notification represents a warning message with corresponding styles
+- `wide:bool` indicating whether the notification should be displayed in a wide format
+- `onClose:function` executed when the close button is clicked
+
+```jsx
+import { Notification } from '@mirai/ui';
+
+const Example = (props) => (
+  <Notification
+    error
+    large
+    wide
+    onClose={() => console.log('Closing...')}
+  >
+    Something went wrong...
+  </Notification>
+)
+  ;
+```
 
 ### Progress
 
@@ -784,7 +1036,9 @@ const MyComponent = (props) => {
 
 This component helps you to create a pure html table receiving the following props:
 
-- `dataSource:arrayOf(shape)` The datasource of your model data schema
+- `dataSource:arrayOf(shape)` datasource of your model data schema
+- `filter:object[]` array of filter items that are applied to the table data. Each filter item represents a specific filter configuration.
+- `inline:shape` specifies whether the table should be displayed inline
 - `schema:shape` the model data schema
 - `search:string` the query string you want use for filter the datasource
 - `selected:arrayOf(dataSource.row)` if you want pre-select some rows in 1st render
@@ -859,9 +1113,12 @@ const MyComponent = () => {
 This component helps you to create a tooltip over a determinate component receiving the following props:
 
 - `children:node` The element which we will use as reference for display the menu.
+- `left:bool` positioning of the tooltip relative to its parent element
 - `pressable:bool` Change event dispatcher to `onPress` instead of ` onEnter`.
+- `right:bool` positioning of the tooltip relative to its parent element
 - `Template:node` if you don't want use the default scaffold.
 - `text:string` text it will appears when hover on `children`.
+- `timestamp:number` value used to force render to recalculate the position of the tooltip
 - `top:bool` Change the position to the top of reference element.
 - `visible:boolean` the default state of visibility of the instance.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.152",
+  "version": "1.0.153",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",