update samples and fix minor bugs

Author: javadbat

README.md

@@ -32,6 +32,7 @@ this component is a simple react component that use [jb-date-input](https://gith
 Demo & Sample    
 in github: <https://javadbat.github.io/jb-date-input-react/>    
 in codepen: <https://codepen.io/javadbat/pen/qBRyYKY>    
+in codeSandBox: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-date-input) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBDateInput.tsx) if you want to see and play with code
 
 ## instructions
 
@@ -59,8 +60,8 @@ import {JBDateInput} from 'jb-date-input-react';
 
 ## format
 
-defualt format of date input is 'YYYY-MM-DDTHH:mm:ss.SSS[Z]' that compatible and exact format of `new Date().toISOString()`
-you can change it however you need and `[Z]` mean the exact Z charecter that used in ISO standard format `YYYY-MM-DDTHH:mm:ss.SSSZ[Z]` => `2012-06-21T00:00:00.000+3:30Z`
+default format of date input is 'YYYY-MM-DDTHH:mm:ss.SSS[Z]' that compatible and exact format of `new Date().toISOString()`
+you can change it however you need and `[Z]` mean the exact Z character that used in ISO standard format `YYYY-MM-DDTHH:mm:ss.SSSZ[Z]` => `2012-06-21T00:00:00.000+3:30Z`
 you can change format by format attribute:
 
 ```jsx
@@ -186,9 +187,9 @@ when date input value is empty we show today year and month in opened calendar b
 <JBDateInput inputType="JALALI" calendarDefaultDateView={{year:1350, month:3}}></JBDateInput>
 ```
 ## show persian number
-if you want to show persian number instead of English number char you just have to set `usePersianNumber` prop like this:
+if you want to show persian number instead of English number char you just have to set `showPersianNumber` prop like this:
 ```jsx
-<JBDateInput usePersianNumber={true}></JBDateInput>
+<JBDateInput showPersianNumber={true}></JBDateInput>
 ```
 ## customize calendar button trigger
 
@@ -297,4 +298,12 @@ in jb-input you can put icon or any other custom html DOM in input box. to doing
     <div slot="end-section">after</div>
     <div slot="start-section">before</div>
 </JBDateInput>
-```
+```
+
+## Other Related Docs:
+
+- see [jb-date-input](https://github.com/javadbat/jb-date-input) if you want to use this component as a web-component
+
+- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components
+
+- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.

docs/package-lock.json

@@ -16,7 +16,7 @@
     "eslint-config-next": "13.2.3",
     "jb-calendar": "^4.0.3",
     "jb-date-input": "^3.13.0",
-    "jb-date-input-react": "^2.6.1",
+    "jb-date-input-react": "^5.0.0",
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

docs/package.json

@@ -1,25 +1,25 @@
 import React, { useEffect } from 'react';
 import { FormalTheme, RTLJBDateInput, SamplesSectionWrapper, SamplesTitle, SamplesWrapper } from './styled';
 import dynamic from 'next/dynamic';
-import { JBDateInputValueObject } from 'jb-date-input-react';
+import { JBDateInputValueObject, ValidationItem, ValidationValue } from 'jb-date-input-react';
 enum InputTypes {
   jalali = 'JALALI',
   gregorian = 'GREGORIAN'
 }
 const JBDateInput = dynamic(() => import('jb-date-input-react').then(module => module.JBDateInput), {
   ssr: false,
 });
-const validationList = [
+const validationList:ValidationItem<ValidationValue>[] = [
   {
     validator: /^13.*$/g,
     message: 'تاریخ باید تنها در قرن 13 شمسی باشد'
   },
   {
-    validator: (inputedText: string, valueObject: JBDateInputValueObject, valueText: string) => {
-      //you can use raw inputed text or formatted text in expected value in argumants
+    validator: ({text,inputObject,valueObject,valueText}) => {
+      //you can use raw inputted text or formatted text in expected value in arguments
       //you have access to both jalali and gregorian date object here in valueObject
       // remember valueObject and valueText are both empty and null when date is incomplete
-      //if you want to validate incomplete date you can use inputedText
+      //if you want to validate incomplete date you can use inputtedText
       return valueObject.jalali.day == 15;
     },
     message: 'باید تاریخ حتما  15 ماه انتخاب شود'
@@ -33,8 +33,8 @@ function Samples() {
       </SamplesTitle>
       <SamplesWrapper>
         <JBDateInput label="simple date:">{ }</JBDateInput>
-        <JBDateInput label="with persian number" usePersianNumber={true}>{ }</JBDateInput>
-        <RTLJBDateInput label="راست به چپ" usePersianNumber={true}>{ }</RTLJBDateInput>
+        <JBDateInput label="with persian number" showPersianNumber={true}>{ }</JBDateInput>
+        <RTLJBDateInput label="راست به چپ" showPersianNumber={true}>{ }</RTLJBDateInput>
         <JBDateInput label="with default value:" value="2020-08-10T08:51:23.176Z">{ }</JBDateInput>
         <JBDateInput label="with min and max value:" value="2020-08-10T08:51:23.176Z" min="2020-08-05T08:51:23.176Z" max="2020-08-15T08:51:23.176Z">{ }</JBDateInput>
         <JBDateInput label="with validation" validationList={validationList}>{ }</JBDateInput>
@@ -62,10 +62,10 @@ function Samples() {
           </div>
         </JBDateInput>
         <JBDateInput label="with inner-box section">
-            <div slot="end-section">a</div>
-            <div slot="start-section">b</div>
+          <div slot="end-section">a</div>
+          <div slot="start-section">b</div>
         </JBDateInput>
-        <JBDateInput label='with custom month name' jalaliMonthList={["حَمَل","ثَور","جَوزا","سَرَطان","اَسَد","سُنبُله","میزان","عَقرَب","قَوس","جَدْی","دَلو","حوت"]}></JBDateInput>
+        <JBDateInput label='with custom month name' jalaliMonthList={["حَمَل", "ثَور", "جَوزا", "سَرَطان", "اَسَد", "سُنبُله", "میزان", "عَقرَب", "قَوس", "جَدْی", "دَلو", "حوت"]}></JBDateInput>
         <FormalTheme label="more formal look">{ }</FormalTheme>
       </SamplesWrapper>
 

docs/src/components/samples/Samples.tsx

@@ -24,17 +24,17 @@ export const SamplesWrapper = styled.div`
   }
 `;
 export const FormalTheme = styled(JBDateInput)`
-  --jb-date-input-border-radius:0;
-  --jb-date-input-border-color:#888;
-  --jb-date-input-border-color-focus:#000;
-  --jb-date-input-bgcolor:#fff;
-  --jb-date-input-message-box-color:blue;
-  --jb-date-input-border-bottom-width:1px;
-  --jb-date-input-label-font-size	:1.3em;
-  --jb-date-input-value-color:#434343;
-  --jb-date-input-value-font-size:1.3em;
-  --jb-date-input-calender-wrapper-bg-color:#fefefe;
-  --jb-date-input-calender-wrapper-border-radius:0;
+  --jb-input-border-radius:0;
+  --jb-input-border-color:#888;
+  --jb-input-border-color-focus:#000;
+  --jb-input-bgcolor:#fff;
+  --jb-input-message-box-color:blue;
+  --jb-input-border-bottom-width:1px;
+  --jb-input-label-font-size	:1.3em;
+  --jb-input-value-color:#434343;
+  --jb-input-value-font-size:1.3em;
+  --jb-input-calender-wrapper-bg-color:#fefefe;
+  --jb-input-calender-wrapper-border-radius:0;
   --jb-calendar-arrow-button-border-radius:0;
 `;
 export const RTLJBDateInput = styled(JBDateInput)`

docs/src/components/samples/styled.ts

@@ -1,19 +1,19 @@
-import React, { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useImperativeHandle, useCallback, MutableRefObject, RefObject, ReactNode, forwardRef, DetailedHTMLProps, HTMLAttributes } from 'react';
 import 'jb-date-input';
 // eslint-disable-next-line no-duplicate-imports
 import { JBDateInputWebComponent, type JBDateInputInputTypes, } from 'jb-date-input';
 import { type ValidationItem } from 'jb-validation/types';
 import { useEvent } from '../../../common/hooks/use-event';
-import { type ValidationValue, type JBDateInputValueObject } from 'jb-date-input/types';
-
-export { type JBDateInputInputTypes, type JBDateInputValueObject };
+import { type ValidationValue, type JBDateInputValueObject, type InputType } from 'jb-date-input/types';
+// re-export imported types for easier use for user
+export { type JBDateInputInputTypes, type JBDateInputValueObject, type ValidationItem, type ValidationValue };
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
       'jb-date-input': JBDateInputType;
     }
-    interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
+    interface JBDateInputType extends DetailedHTMLProps<HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
       class?: string,
       label?: string,
       name?: string,
@@ -32,6 +32,7 @@ export type JBDateInputProps = {
   name?: string,
   min?: string | null | undefined | Date,
   max?: string | null | undefined | Date,
+  message?: string | null | undefined,
   format?: string,
   className?: string,
   onKeyup?: (e: JBDateInputEventType<KeyboardEvent>) => void,
@@ -43,17 +44,17 @@ export type JBDateInputProps = {
   value?: string | Date | null | undefined,
   validationList?: ValidationItem<ValidationValue>[],
   required?: boolean,
-  calendarDefaultDateView?: { year: number, month: number, dateType: JBDateInputInputTypes },
-  usePersianNumber?: boolean,
+  calendarDefaultDateView?: { year: number, month: number, dateType?: InputType },
+  showPersianNumber?: boolean,
   placeholder?: string | null | undefined,
   jalaliMonthList?: string[] | null | undefined,
   gregorianMonthList?: string[] | null | undefined,
   overflowHandler?:"NONE" | "SLIDE",
-  overflowRef?:React.RefObject<HTMLElement> | null,
-  children?: React.ReactNode | React.ReactNode[],
+  overflowRef?:RefObject<HTMLElement> | null | MutableRefObject<HTMLElement | undefined>,
+  children?: ReactNode | ReactNode[],
 }
 
-export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
+export const JBDateInput = forwardRef((props: JBDateInputProps, ref) => {
   const element = useRef<JBDateInputWebComponent>(null);
   const [refChangeCount, refChangeCountSetter] = useState(0);
   const onFormatChangeCallBackQueueRef = useRef<(() => void)[]>([]);
@@ -125,6 +126,11 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
       element.current.value = props.value;
     }
   }, [props.value]);
+  useEffect(() => {
+    if (element.current) {
+      element.current.setAttribute("message",props.message || "");
+    }
+  }, [props.message]);
   useEffect(() => {
     if (element.current && Array.isArray(props.jalaliMonthList)) {
       element.current.setMonthList("JALALI", props.jalaliMonthList);
@@ -183,12 +189,12 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
     }
   }, [props.calendarDefaultDateView]);
   useEffect(() => {
-    if (props.usePersianNumber) {
-      element.current?.setAttribute('use-persian-number', 'true');
+    if (props.showPersianNumber) {
+      element.current?.setAttribute('show-persian-number', 'true');
     } else {
-      element.current?.removeAttribute('use-persian-number');
+      element.current?.removeAttribute('show-persian-number');
     }
-  }, [props.usePersianNumber]);
+  }, [props.showPersianNumber]);
   return (
     <jb-date-input class={props.className ? props.className : ""} name={props.name} label={props.label} value-type={props.valueType ? props.valueType : 'GREGORIAN'} ref={element} input-type={props.inputType ? props.inputType : 'JALALI'}>
       {props.children}

lib/JBDateInput.tsx

@@ -19,7 +19,7 @@
     "react component",
     "react"
   ],
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0",
   "bugs": "https://github.com/javadbat/jb-date-input-react/issues",
   "license": "MIT",
   "files": [
@@ -31,12 +31,12 @@
   "main": "index.js",
   "module": "index.js",
   "homepage": "https://github.com/javadbat/jb-date-input-react",
-  "types": "./dist/jb-date-input/lib/JBDateInput.d.ts",
+  "types": "./dist/react-component/jb-date-input/lib/JBDateInput.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/javadbat/jb-date-input-react"
   },
   "dependencies": {
-    "jb-date-input": ">=5.0.0-beta.0"
+    "jb-date-input": ">=5.0.0"
   }
 }