feat(date-range-picker): add samples

[adrianptrv]

Closes: #881

igniteui-react - 19.1.0 and igniteui-webcomponents - 6.1.2 are needed to run the samples. PR #890 updates the project packages.

[ddaribo]

This is indeed the recommended "React way" to reference components instead of the querySelector. Let's stick to this approach in all samples.

[ddaribo]

Most samples in the repo seem to invoke the registerIconFromText from within useEffect.

[ddaribo]

useEffect is rather an overhead for simply binding static properties.
customRanges can be declared in the function scope and bound. A ref to the DRP would not even be needed.

<IgrDateRangePicker 
        mode="dialog" 
        usePredefinedRanges
        customRanges={nextWeek}
        label="Custom Ranges">
</IgrDateRangePicker>

Also, usePredefinedRanges is already set as a property on the component.

[ddaribo]

As mentioned, useEffect can be avoided in the DRP samples and the static properties can be bound.
If some interactivity is required, the useState hook can be used:

const [range, setRange] = useState(initialRange);

[ddaribo]

This sample can be reworked by the other suggestions - use useRef, useState, etc.

[ddaribo]

Probably no need to dynamically recreate the Dialog each time. It can be defined in the template, and only its content be updated. For example:

  const dialog = useRef<IgrDialog>(null);

 <IgrDialog ref={dialog}>
        <pre>
          <b>Start</b>: {range?.start?.toString() ?? ''} <br />
          <b>End</b>: {range?.end?.toString() ?? ''}
        </pre>
      </IgrDialog>

const showDialog = (event: React.FormEvent<HTMLFormElement>) => {
     if (dialog.current) {
       event.preventDefault();
       dialog.current.show();
     }
  }

[ddaribo]

Better to handle it on the form directly

      <form id="DateForm" onSubmit={showDialog}>

const showDialog = (event: React.FormEvent<HTMLFormElement>) => {
     if (dialog.current) {
       event.preventDefault();
       dialog.current.show();
     }
  }

[ddaribo]

To reflect the dynamic value, useState can be applied:

  const [range, setRange] = useState({start: null, end: null});

  <IgrDateRangePicker
        onChange={handleDateRangeChange}
  ></IgrDateRangePicker>

 const handleDateRangeChange = (event: CustomEvent) => {
    const newRange = {
      start: event.detail?.start || null,
      end: event.detail?.end || null
    };
    setRange(newRange);
  };