@innovaccer/design-system 2.13.2 → 2.13.4-1

package/core/components/organisms/timePicker/__stories__/TimeIntervals.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const TimeIntervals = () => {
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format (1 hour Interval)</Label>
+        <TimePicker withSearch={true} interval={60} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format (1 hour Interval)</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} interval={60} id="24-hour" />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format (1 hour Interval)</Label>
+        <TimePicker withSearch={true} interval={60} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format (1 hour Interval)</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} interval={60} id="24-hour" />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/Time Intervals',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/disabledOption.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const disabledOption = () => {
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker withSearch={true} disabledSlotList={['12:45 AM', '01:00 AM']} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} disabledSlotList={['00:45', '01:00']} id="24-hour" />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker withSearch={true} disabledSlotList={['12:45 AM', '01:00 AM']} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} disabledSlotList={['00:45', '01:00']} id="24-hour" />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/Disabled Option',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/fromTo.story.jsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { TimePicker, Label } from '@/index';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+
+// CSF format story
+export const FromTo = () => {
+  const [startTime, setStartTime] = React.useState('00:00');
+
+  const onFromChangeHandler = (props) => {
+    setStartTime(props);
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="w-25 mr-5">
+        <Label withInput={true}>From</Label>
+        <TimePicker
+          withSearch={true}
+          startTime="00:15 AM"
+          endTime="11:45 PM"
+          onChange={onFromChangeHandler}
+          id="From"
+        />
+      </div>
+
+      <div className="w-25">
+        <Label withInput={true}>To</Label>
+        <TimePicker withSearch={true} startTime={startTime} endTime="11:45 PM" showDuration={true} id="To" />
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+
+  const [startTime, setStartTime] = React.useState('00:00');
+
+  const onFromChangeHandler = (props) => {
+    setStartTime(props);
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="w-25 mr-5">
+        <Label withInput={true}>From</Label>
+        <TimePicker withSearch={true} startTime="00:15 AM" endTime="11:45 PM" onChange={onFromChangeHandler} id="From" />
+      </div>
+
+      <div className="w-25">
+        <Label withInput={true}>To</Label>
+        <TimePicker withSearch={true} startTime={startTime} endTime="11:45 PM" showDuration={true} id="To" />
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/From To',
+  component: TimePicker,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+        props: {
+          components: { TimePickerWithInput, TimePickerWithSearch },
+        },
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/showDuration.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const timeDuration = () => {
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker startTime="05:00" withSearch={true} showDuration={true} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker startTime="05:00" timeFormat="24-Hour" withSearch={true} showDuration={true} id="24-hour" />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker startTime="05:00" withSearch={true} showDuration={true} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker startTime="05:00" timeFormat="24-Hour" withSearch={true} showDuration={true} id="24-hour" />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/Time Duration',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/withDatePicker.story.jsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { TimePicker, DatePicker, Row, Label } from '@/index';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+
+// CSF format story
+export const withDatePicker = () => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleDateChange = (date) => {
+    if (date) {
+      setOpen(false);
+      window.setTimeout(() => {
+        setOpen(true);
+      }, 0);
+    }
+  };
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>Date</Label>
+        <DatePicker
+          firstDayOfWeek="saturday"
+          onDateChange={handleDateChange}
+          outputFormat="yyyy/mm/dd"
+          withInput={true}
+          inputOptions={{
+            required: true,
+          }}
+        />
+      </div>
+      <div className="w-25 ml-7">
+        <Label>Time</Label>
+        <TimePicker withSearch={true} open={open} />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleDateChange = (date) => {
+    if(date) {
+      setOpen(false);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
+    }
+  };
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>Date</Label>
+        <DatePicker
+          firstDayOfWeek="saturday"
+          onDateChange={handleDateChange}
+          outputFormat="yyyy/mm/dd"
+          withInput={true}
+          inputOptions={{
+            required: true,
+          }}
+        />
+      </div>
+      <div className="w-25 ml-7">
+        <Label>Time</Label>
+        <TimePicker withSearch={true} open={open} />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/With Date Picker',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/{index.story.jsx → withInput.story.jsx}

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { TimePicker } from '@/index';
 import { action } from '@/utils/action';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
 
 // CSF format story
-export const all = () => {
+export const withInput = () => {
   const inputFormat = 'hh:mm AM';
 
   const outputFormat = 'hh:mm';
@@ -41,8 +43,9 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/TimePicker/All',
-  component: TimePicker,
+  title: 'Components/TimePicker/With Input',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
   parameters: {
     docs: {
       docPage: {

package/core/components/organisms/timePicker/__stories__/withSearch.story.jsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { action } from '@/utils/action';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const withSearch = () => {
+  const onChangeHandler = (props) => {
+    return action(`updated time: ${props}`)();
+  };
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker
+          withSearch={true}
+          startTime="00:00 AM"
+          endTime="11:59 PM"
+          onChange={onChangeHandler}
+          noResultMessage="Invalid Time"
+          id="12-hour"
+        />
+      </div>
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker
+          withSearch={true}
+          startTime="00:00 AM"
+          endTime="11:59 PM"
+          timeFormat="24-Hour"
+          onChange={onChangeHandler}
+          noResultMessage="Invalid Time"
+          id="24-hour"
+        />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  const onChangeHandler = (props) => {
+    console.log(props);
+  };
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker 
+          withSearch={true} 
+          startTime="00:00 AM" 
+          endTime="11:59 PM" 
+          onChange={onChangeHandler} 
+          noResultMessage="Invalid Time"
+          id="12-hour"
+        />
+      </div>
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker
+          withSearch={true}
+          startTime="00:00 AM"
+          endTime="11:59 PM"
+          timeFormat="24-Hour"
+          onChange={onChangeHandler}
+          noResultMessage="Invalid Time"
+          id="24-hour"
+        />
+      </div>
+  </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/With Search',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};