@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/ChatInputs/__snapshots__/ChatInputs.test.tsx.snap

@@ -89,7 +89,7 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
       </span>
     </button>
     <button
-      class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
       title="write_and_speak.micButtonPopover"
     >
       <span
@@ -199,7 +199,7 @@ exports[`renders ChatInputs listening unchanged 1`] = `
       </span>
     </button>
     <button
-      class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
       title="write_and_speak.micButtonPopoverListening"
     >
       <span
@@ -338,7 +338,7 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
       </span>
     </button>
     <button
-      class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
       title="write_and_speak.micButtonPopover"
     >
       <span
@@ -447,7 +447,7 @@ exports[`renders ChatInputs unchanged 1`] = `
       </span>
     </button>
     <button
-      class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
       title="write_and_speak.micButtonPopover"
     >
       <span
@@ -557,7 +557,7 @@ exports[`renders ChatInputs with user message unchanged 1`] = `
       </span>
     </button>
     <button
-      class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
       title="write_and_speak.micButtonPopover"
     >
       <span

package/src/components/DateSelector/DateSelector.css

@@ -0,0 +1,135 @@
+.memori--date-selector {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.memori--date-selector__select {
+    width: 30%;
+    max-width: 100%;
+    margin: 1.5rem 1.5% 0;
+}
+
+.memori--date-selector__select-button {
+    position: relative;
+    width: 100%;
+    padding-top: .5rem;
+    padding-right: 2.5rem;
+    padding-bottom: .5rem;
+    padding-left: .75rem;
+    border: 1px solid #e5e7eb;
+    border-radius: .5rem;
+    background: #fff;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
+    cursor: pointer;
+    text-align: left;
+}
+
+.memori--date-selector__select-button:focus {
+    border-color: #cbd5e0;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori--date-selector__select-button:focus-visible {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori--date-selector__select-button:hover {
+    border-color: #e2e8f0;
+}
+
+.memori--date-selector__select-button:active {
+    border-color: #e2e8f0;
+}
+
+.memori--date-selector__select-button:disabled {
+    border-color: #e2e8f0;
+    background-color: #f7fafc;
+    color: #a0aec0;
+    cursor: not-allowed;
+}
+
+@media (min-width: 640px) {
+    .memori--date-selector__select-button {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+.memori--date-selector__select-label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+}
+
+.memori--date-selector__select--value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori--date-selector__select--icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding-right: .5rem;
+    pointer-events: none;
+}
+
+.memori--date-selector__select--icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: rgb(156 163 175/1);
+}
+
+ul.memori--date-selector__select-options {
+    position: absolute;
+    z-index: 1;
+    overflow: auto;
+    width: 100%;
+    max-width: min(18rem, 30%);
+    max-height: 15rem;
+    padding-top: .25rem;
+    padding-right: 0;
+    padding-bottom: .25rem;
+    padding-left: 0;
+    border-radius: .375rem;
+    margin-top: .25rem;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    background: #fff;
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+    list-style: none;
+}
+
+@media (min-width: 640px) {
+    .memori--date-selector__select-options {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+li.memori--date-selector__select-option {
+    position: relative;
+    padding-top: .5rem;
+    padding-right: 1rem;
+    padding-bottom: .5rem;
+    padding-left: 1rem;
+    color: rgb(17 24 39/1);
+    cursor: pointer;
+    user-select: none;
+}
+
+li.memori--date-selector__select-option:hover,
+li.memori--date-selector__select-option:focus {
+    background-color: #f7fafc;
+}
+
+li.memori--date-selector__select-option:focus {
+    outline: 2px solid #63b3ed;
+    outline-offset: 2px;
+}

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import DateSelector, { Props } from './DateSelector';
+
+import './DateSelector.css';
+
+const meta: Meta = {
+  title: 'DateSelector',
+  component: DateSelector,
+  parameters: {
+    controls: { expanded: true },
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <DateSelector {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  defaultDate: new Date(Date.now()),
+  onChange: () => {},
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  defaultDate: new Date(Date.now()),
+  onChange: () => {},
+  disabled: false,
+};

package/src/components/DateSelector/DateSelector.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import DateSelector from './DateSelector';
+import moment from 'moment';
+
+const dateMock = new Date(Date.UTC(2022, 8, 24, 0, 0, 0, 0));
+
+jest.setSystemTime(dateMock);
+Date.now = jest.fn(() => dateMock.valueOf());
+
+jest.spyOn(Date, 'now').mockImplementation(() => dateMock.valueOf());
+
+it('renders DateSelector unchanged', () => {
+  const { container } = render(
+    <DateSelector defaultDate={new Date(Date.now())} onChange={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders DateSelector with default value unchanged', () => {
+  const { container } = render(
+    <DateSelector
+      defaultDate={moment(`2022-08-24 00:00:00Z`)}
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders DateSelector disabled unchanged', () => {
+  const { container } = render(
+    <DateSelector
+      disabled
+      defaultDate={moment(`2022-08-24 00:00:00Z`)}
+      onChange={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/DateSelector/DateSelector.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState, memo, Fragment } from 'react';
+import { Listbox, Transition } from '@headlessui/react';
+import moment from 'moment';
+import { useTranslation } from 'react-i18next';
+import SelectIcon from '../icons/SelectIcon';
+
+export interface Props {
+  defaultDate?: moment.Moment | string | Date;
+  disabled?: boolean;
+  onChange: (date: moment.Moment) => void;
+}
+
+const months = {
+  en: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  it: [
+    'Gennaio',
+    'Febbraio',
+    'Marzo',
+    'Aprile',
+    'Maggio',
+    'Giugno',
+    'Luglio',
+    'Agosto',
+    'Settembre',
+    'Ottobre',
+    'Novembre',
+    'Dicembre',
+  ],
+};
+
+const DateSelector = memo(
+  ({ defaultDate, onChange, disabled = false }: Props) => {
+    const { t, i18n } = useTranslation();
+
+    const [date, setDate] = useState(moment(defaultDate || Date.now()));
+    useEffect(() => {
+      onChange(date);
+    }, [date, onChange]);
+
+    moment.locale(i18n.language);
+
+    return (
+      <div className="memori--date-selector">
+        <div className="memori--date-selector__select">
+          <Listbox
+            value={date}
+            onChange={value => {
+              setDate(value);
+            }}
+            disabled={disabled}
+            name="day"
+          >
+            <Listbox.Label className="memori--date-selector__select-label">
+              {t('day')}:
+            </Listbox.Label>
+            <Listbox.Button
+              aria-label={t('day')}
+              className="memori--date-selector__select-button"
+            >
+              <span className="memori--date-selector__select--value">
+                {date.date()}
+              </span>
+              <span className="memori--date-selector__select--icon">
+                <SelectIcon />
+              </span>
+            </Listbox.Button>
+            <Transition
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options className="memori--date-selector__select-options">
+                {[...Array(31).keys()].map(day => (
+                  <Listbox.Option
+                    key={day}
+                    value={date.clone().date(day + 1)}
+                    className="memori--date-selector__select-option"
+                  >
+                    {day + 1}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+
+        <div className="memori--date-selector__select">
+          <Listbox
+            value={date}
+            onChange={value => {
+              setDate(value);
+            }}
+            disabled={disabled}
+            name="month"
+          >
+            <Listbox.Label className="memori--date-selector__select-label">
+              {t('month')}:
+            </Listbox.Label>
+            <Listbox.Button
+              aria-label={t('month')}
+              className="memori--date-selector__select-button"
+            >
+              <span className="memori--date-selector__select--value">
+                {months[i18n.language === 'it' ? 'it' : 'en'][date.month()]}
+              </span>
+              <span className="memori--date-selector__select--icon">
+                <SelectIcon />
+              </span>
+            </Listbox.Button>
+            <Transition
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options className="memori--date-selector__select-options">
+                {months[i18n.language === 'it' ? 'it' : 'en'].map(month => (
+                  <Listbox.Option
+                    key={month}
+                    className="memori--date-selector__select-option"
+                    value={date
+                      .clone()
+                      .month(
+                        months[i18n.language === 'it' ? 'it' : 'en'].findIndex(
+                          m => m === month
+                        )
+                      )}
+                  >
+                    {month}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+
+        <div className="memori--date-selector__select">
+          <Listbox
+            value={date}
+            onChange={value => {
+              setDate(value);
+            }}
+            disabled={disabled}
+            name="year"
+          >
+            <Listbox.Label className="memori--date-selector__select-label">
+              {t('year')}:
+            </Listbox.Label>
+            <Listbox.Button
+              aria-label={t('year')}
+              className="memori--date-selector__select-button"
+            >
+              <span className="memori--date-selector__select--value">
+                {date.year()}
+              </span>
+              <span className="memori--date-selector__select--icon">
+                <SelectIcon />
+              </span>
+            </Listbox.Button>
+            <Transition
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options className="memori--date-selector__select-options">
+                {[...Array(moment().year() - 1899).keys()]
+                  .sort((a, b) => b - a)
+                  .map(year => (
+                    <Listbox.Option
+                      key={year}
+                      value={date.clone().year(year + 1900)}
+                      className="memori--date-selector__select-option"
+                    >
+                      {year + 1900}
+                    </Listbox.Option>
+                  ))}
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+      </div>
+    );
+  }
+);
+
+DateSelector.displayName = 'DateSelector';
+
+export default DateSelector;