Add DateTimePicker (#2391)

DES-6573 feat(odyssey-react-mui): adding DateTimePicker
chore(odyssey-react-mui): abstracting more logic to hook
chore(odyssey-react-mui): uodate story label
chore(odyssey-react-mui): fix failing test
refactor(odyssey-react-mui): move inputchange to hook
refactor(odyssey-react-mui): use our icons for tabs
feat(odyssey-react-mui): calendar styling updates
refactor(odyssey-react-mui): adding tests
feat(odyssey-react-mui): update padding
feat(odyssey-react-mui): add some more basic tests
fix(odyssey-react-mui): fix broken Button imports
fix(odyssey-react-mui): remove commented code
fix(odyssey-react-mui): remove commented code and fix clock style
fix(odyssey-react-mui): remove forced use of mobile picker left in error
chore(odyssey-react-mui): test commit
fix(odyssey-react-mui): fix Ignored unknown option --loglevel=warn error
fix(odyssey-react-mui): fix lint warnings
fix(odyssey-react-mui): run prettier

package.json

@@ -19,8 +19,8 @@
     "lerna-version": "lerna version --no-git-tag-version --include-merged-tags --conventional-commits --no-push --force-publish",
     "lint": "yarn eslint && yarn stylelint && yarn prettier-check",
     "postinstall": "yarn build && [ -z ${CI:-} ] && husky install || exit 0",
-    "prettier-check": "prettier --ignore-unknown --loglevel warn --check .",
-    "prettier-write": "prettier --ignore-unknown --loglevel warn --write .",
+    "prettier-check": "prettier --ignore-unknown --log-level warn --check .",
+    "prettier-write": "prettier --ignore-unknown --log-level warn --write .",
     "start:mui": "yarn workspace @okta/odyssey-react-mui dev",
     "start:storybook": "yarn workspace @okta/odyssey-storybook start",
     "start": "yarn install && yarn build && yarn concurrently npm:dev:source npm:start:mui npm:start:storybook",

packages/odyssey-lint-staged/src/index.js

@@ -11,7 +11,7 @@
  */
 
 module.exports = {
-  "*": "prettier --ignore-unknown --loglevel warn --write",
+  "*": "prettier --ignore-unknown --log-level warn --write",
   "*.scss": "stylelint",
   "*.{js,jsx,ts,tsx}": "eslint",
 };

packages/odyssey-react-mui/src/labs/DataTable.tsx

@@ -427,20 +427,27 @@ const DataTable = <TData extends MRT_RowData>({
   const rowVirtualizerInstanceRef =
     useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
 
-  const setHoveredRow = (table: TableType<TData>, id: TData["id"]) => {
+  const setHoveredRow = useCallback<
+    (table: TableType<TData>, id: TData["id"]) => void
+  >((table, id) => {
     if (id) {
       const nextRow = table.getRow(id) as MRT_Row<TData>;
 
       if (nextRow) {
         table.setHoveredRow(nextRow);
       }
     }
-  };
+  }, []);
 
-  const resetDraggingAndHoveredRow = (table: TableType<TData>) => {
-    setDraggingRow(null);
-    table.setHoveredRow(null);
-  };
+  const resetDraggingAndHoveredRow = useCallback<
+    (table: TableType<TData>) => void
+  >(
+    (table) => {
+      setDraggingRow(null);
+      table.setHoveredRow(null);
+    },
+    [setDraggingRow],
+  );
 
   type HandleDragHandleKeyDownArgs = {
     table: TableType<TData>;

packages/odyssey-react-mui/src/labs/DateField.tsx → packages/odyssey-react-mui/src/labs/DatePickers/DateField.tsx

@@ -28,8 +28,8 @@ import {
 import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 
-import { Field, RenderFieldComponentProps } from "../Field";
-import { TextFieldProps } from "../TextField";
+import { Field, RenderFieldComponentProps } from "../../Field";
+import { TextFieldProps } from "../../TextField";
 
 export type DateFieldProps = {
   onChange?: (value: string) => void;

packages/odyssey-react-mui/src/labs/DatePickers/DateFieldActionBar.tsx

@@ -0,0 +1,65 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { PickersActionBarProps } from "@mui/x-date-pickers";
+import styled from "@emotion/styled";
+
+import { Button } from "../../Buttons";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../../OdysseyDesignTokensContext";
+
+const ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(
+  ({ odysseyDesignTokens }) => ({
+    display: "flex",
+    justifyContent: "flex-end",
+    paddingInline: odysseyDesignTokens.Spacing4,
+    paddingBlockEnd: odysseyDesignTokens.Spacing4,
+  }),
+);
+
+const DateFieldActionBar = ({
+  actions,
+  onAccept,
+  onCancel,
+}: PickersActionBarProps) => {
+  const { t } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  // actions will be [] or ["accept", "cancel"]
+  if (actions && actions.length > 0) {
+    return (
+      <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <Button
+          label={t("picker.labels.action.cancel")}
+          onClick={onCancel}
+          variant="floating"
+        />
+        <Button
+          label={t("picker.labels.action.apply")}
+          onClick={onAccept}
+          variant="primary"
+        />
+      </ActionContainer>
+    );
+  }
+
+  return null;
+};
+
+const MemoizedDateFieldActionBar = memo(DateFieldActionBar);
+MemoizedDateFieldActionBar.displayName = "DateFieldActionBar";
+
+export { MemoizedDateFieldActionBar as DateFieldActionBar };

packages/odyssey-react-mui/src/labs/DatePickers/DateFieldLocalizationProvider.tsx

@@ -0,0 +1,46 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, PropsWithChildren } from "react";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+
+import { DateFieldsTranslations } from "./useDateFieldsTranslations";
+
+type DateFieldLocalizationProviderProps = {
+  localeText: DateFieldsTranslations;
+  defaultedLanguageCode: string;
+};
+
+const DateFieldLocalizationProvider = ({
+  children,
+  defaultedLanguageCode,
+  localeText,
+}: PropsWithChildren<DateFieldLocalizationProviderProps>) => {
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterLuxon}
+      adapterLocale={defaultedLanguageCode}
+      localeText={localeText}
+    >
+      {children}
+    </LocalizationProvider>
+  );
+};
+
+const MemoizedDateFieldLocalizationProvider = memo(
+  DateFieldLocalizationProvider,
+);
+MemoizedDateFieldLocalizationProvider.displayName =
+  "DateFieldLocalizationProvider";
+
+export { MemoizedDateFieldLocalizationProvider as DateFieldLocalizationProvider };