@griddo/ax 12.3.0-beta.0 → 12.4.0

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/TimezoneStep/TimezoneStep.test.tsx

@@ -8,7 +8,7 @@ import globalTheme from "@ax/themes/theme.json";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
 
-// react-timezone-map-select is mocked globally via jest.config.ts moduleNameMapper
+// react-timezone-map-select is mocked globally via the alias in vitest.config.ts
 
 const defaultForm: IUserFormState = {
 	name: "John Doe",
@@ -23,9 +23,9 @@ const renderTimezoneStep = (props = {}) =>
 		<ThemeProvider theme={parseTheme(globalTheme)}>
 			<TimezoneStep
 				form={defaultForm}
-				setForm={jest.fn()}
-				onClickNext={jest.fn()}
-				onClickBack={jest.fn()}
+				setForm={vi.fn()}
+				onClickNext={vi.fn()}
+				onClickBack={vi.fn()}
 				isSaving={false}
 				{...props}
 			/>
@@ -71,21 +71,21 @@ describe("TimezoneStep rendering", () => {
 
 describe("TimezoneStep events", () => {
 	it("should call onClickBack when Back button is clicked", () => {
-		const onClickBack = jest.fn();
+		const onClickBack = vi.fn();
 		renderTimezoneStep({ onClickBack });
 		fireEvent.click(screen.getByText("Back"));
 		expect(onClickBack).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onClickNext when Save profile button is clicked", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderTimezoneStep({ onClickNext });
 		fireEvent.click(screen.getByText("Save profile"));
 		expect(onClickNext).toHaveBeenCalledTimes(1);
 	});
 
 	it("should not call onClickNext when isSaving is true", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderTimezoneStep({ onClickNext, isSaving: true });
 		const saveButton = screen.getByText("Saving...").closest("button");
 		saveButton && fireEvent.click(saveButton);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/WelcomeModal.test.tsx

@@ -25,7 +25,7 @@ const renderWelcomeModal = (props = {}, storeData = initialStore) => {
 	return render(
 		<Provider store={store}>
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<WelcomeModal isOpen={true} toggleModal={jest.fn()} {...props} />
+				<WelcomeModal isOpen={true} toggleModal={vi.fn()} {...props} />
 			</ThemeProvider>
 		</Provider>,
 	);

package/src/__tests__/modules/Sites/SitesList/WelcomeModal/WelcomeStep/WelcomeStep.test.tsx

@@ -10,7 +10,7 @@ afterEach(cleanup);
 const renderWelcomeStep = (props = {}) =>
 	render(
 		<ThemeProvider theme={parseTheme(globalTheme)}>
-			<WelcomeStep onSkip={jest.fn()} onClickNext={jest.fn()} {...props} />
+			<WelcomeStep onSkip={vi.fn()} onClickNext={vi.fn()} {...props} />
 		</ThemeProvider>,
 	);
 
@@ -24,14 +24,14 @@ describe("WelcomeStep rendering", () => {
 
 describe("WelcomeStep events", () => {
 	it("should call onSkip when skip button is clicked", () => {
-		const onSkip = jest.fn();
+		const onSkip = vi.fn();
 		renderWelcomeStep({ onSkip });
 		fireEvent.click(screen.getByText("Skip, I\u2019ll do it later"));
 		expect(onSkip).toHaveBeenCalledTimes(1);
 	});
 
 	it("should call onClickNext when complete profile button is clicked", () => {
-		const onClickNext = jest.fn();
+		const onClickNext = vi.fn();
 		renderWelcomeStep({ onClickNext });
 		fireEvent.click(screen.getByText("Complete profile"));
 		expect(onClickNext).toHaveBeenCalledTimes(1);

package/src/__tests__/modules/Users/Roles/BulkHeader/BulkHeader.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, screen, cleanup, act, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 
 import { parseTheme } from "@ax/helpers";
 
@@ -117,7 +117,7 @@ describe("BulkHeader module events", () => {
 		defaultProps.showBulk = true;
 		defaultProps.isSiteView = false;
 		defaultProps.checkState.isAllSelected = true;
-		const activateRolesMock = jest.fn();
+		const activateRolesMock = vi.fn();
 
 		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
 			((active: boolean) => void);
@@ -138,7 +138,7 @@ describe("BulkHeader module events", () => {
 	it("should call activate role on click option", async () => {
 		defaultProps.showBulk = true;
 		defaultProps.checkState.isAllSelected = true;
-		const activateRolesMock = jest.fn();
+		const activateRolesMock = vi.fn();
 
 		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
 			((active: boolean) => void);

package/src/__tests__/modules/Users/Roles/Roles.test.tsx

@@ -1,9 +1,10 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios from "axios";
 
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
-import { CalledWithMock, mock } from "jest-mock-extended";
+import { CalledWithMock, mock } from "vitest-mock-extended";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { Router } from "react-router-dom";
@@ -13,20 +14,20 @@ import { history } from "@ax/routes";
 import globalTheme from "@ax/themes/theme.json";
 import Roles, { IRolesProps } from "@ax/modules/Users/Roles";
 
-import { render, cleanup, screen, act, fireEvent } from "./../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act, fireEvent } from "./../../../../../config/tests/test-utils";
 import { rolesDataMock, usersDataMock } from "./../../../../__mocks__/store/Roles";
 import { rolesDataResponse } from "./../../../../__mocks__/axios/Roles";
 
 afterEach(cleanup);
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 const defaultProps = mock<IRolesProps>();
 
 describe("Roles module rendering", () => {
 	it("should render component", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -60,7 +61,7 @@ describe("Roles module rendering", () => {
 
 	it("should render role items", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -92,7 +93,7 @@ describe("Roles module rendering", () => {
 
 	it("should render tag colors", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -426,9 +427,9 @@ describe("Roles module events", () => {
 
 	it("should render FullArrowDown icon if is filtered by descending name", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
-		const getRolesMock = jest.fn();
-		const activateRolesMock = jest.fn();
+		window.HTMLElement.prototype.scrollIntoView = vi.fn();
+		const getRolesMock = vi.fn();
+		const activateRolesMock = vi.fn();
 		defaultProps.getRoles = getRolesMock as CalledWithMock<Promise<void>, [params?: IGetRoles | undefined]>;
 		defaultProps.activateRoles = activateRolesMock as CalledWithMock<Promise<boolean>, [params: IActivateRole]> &
 			((params: IActivateRole) => Promise<boolean>);

package/src/__tests__/modules/Users/UserCreate/SiteItem/RolesModal/RoleItem/RoleItem.test.tsx

@@ -7,8 +7,8 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import RoleItem, { IRoleItemProps } from "./../../../../../../../modules/Users/UserCreate/SiteItem/RolesModal/RoleItem";
 
-const onClickMock = jest.fn();
-const onChangeMock = jest.fn();
+const onClickMock = vi.fn();
+const onChangeMock = vi.fn();
 const defaultProps: IRoleItemProps = {
 	role: {
 		id: 1,
@@ -25,7 +25,7 @@ const defaultProps: IRoleItemProps = {
 };
 
 afterEach(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	cleanup();
 });
 

package/src/__tests__/modules/Users/UserCreate/SiteItem/RolesModal/RolesModal.test.tsx

@@ -7,8 +7,8 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import RolesModal, { IRolesModalProps } from "./../../../../../../modules/Users/UserCreate/SiteItem/RolesModal";
 
-const addRolesMock = jest.fn();
-const toggleModalMock = jest.fn();
+const addRolesMock = vi.fn();
+const toggleModalMock = vi.fn();
 const defaultProps: IRolesModalProps = {
 	roles: [
 		{
@@ -47,7 +47,7 @@ const defaultProps: IRolesModalProps = {
 };
 
 afterEach(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	cleanup();
 });
 

package/src/__tests__/modules/Users/UserCreate/SiteItem/SiteItem.test.tsx

@@ -7,8 +7,8 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import SiteItem, { ISiteItemProps } from "./../../../../../modules/Users/UserCreate/SiteItem";
 
-const itemOnChangeMock = jest.fn();
-const addRolesMock = jest.fn();
+const itemOnChangeMock = vi.fn();
+const addRolesMock = vi.fn();
 const defaultProps: ISiteItemProps = {
 	item: { id: 1, name: "Site 1", onChange: itemOnChangeMock },
 	sites: [1, 2, 3],
@@ -38,7 +38,7 @@ const defaultProps: ISiteItemProps = {
 };
 
 afterEach(() => {
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	cleanup();
 });
 

package/src/__tests__/modules/Users/UserCreate/UserCreate.test.tsx

@@ -1,12 +1,13 @@
+import type { MockedFunction } from "vitest";
 import React from "react";
 import axios, { AxiosResponse } from "axios";
 import { ThemeProvider } from "styled-components";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { Router } from "react-router-dom";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import "@testing-library/jest-dom";
-import { render, cleanup, screen, act } from "./../../../../../config/jest/test-utils";
+import { render, cleanup, screen, act } from "./../../../../../config/tests/test-utils";
 import userEvent from "@testing-library/user-event";
 import { createMemoryHistory } from "history";
 
@@ -21,8 +22,8 @@ import {
 	appStoreMock,
 } from "../../../../__mocks__/store/UsersCreate";
 
-jest.mock("axios");
-const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+vi.mock("axios");
+const mockedAxios = axios as MockedFunction<typeof axios>;
 
 const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
@@ -35,7 +36,7 @@ const history = createMemoryHistory();
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 describe("UserCreate module rendering", () => {

package/src/__tests__/modules/Users/UserList/UserItem/UserItem.test.tsx

@@ -14,7 +14,7 @@ import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, render, screen, waitFor } from "./../../../../../../config/jest/test-utils";
+import { act, cleanup, render, screen, waitFor } from "./../../../../../../config/tests/test-utils";
 import { defaultStore } from "./../../../../../__mocks__/store/GenericStore";
 import {
 	appStoreMock,
@@ -33,13 +33,13 @@ const history = createMemoryHistory();
 
 let mockedAxios: MockAdapter;
 
-const onChangeMock = jest.fn();
-const onClickMock = jest.fn();
-const deleteUserMock = jest.fn();
-const resendInvitationMock = jest.fn();
-const getUsersMock = jest.fn();
-const removeUserFromSiteMock = jest.fn();
-const toggleDeleteToastMock = jest.fn();
+const onChangeMock = vi.fn();
+const onClickMock = vi.fn();
+const deleteUserMock = vi.fn();
+const resendInvitationMock = vi.fn();
+const getUsersMock = vi.fn();
+const removeUserFromSiteMock = vi.fn();
+const toggleDeleteToastMock = vi.fn();
 const defaultProps: IUserItemProps = {
 	user: {
 		id: 171,
@@ -186,7 +186,7 @@ beforeAll(() => {
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 });
 
 describe("UserItem module rendering", () => {

package/src/__tests__/modules/Users/UserList/UserList.test.tsx

@@ -9,13 +9,13 @@ import userEvent from "@testing-library/user-event";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { createMemoryHistory } from "history";
-import { mock } from "jest-mock-extended";
+import { mock } from "vitest-mock-extended";
 import type { Middleware } from "redux";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, fireEvent, render, screen } from "./../../../../../config/jest/test-utils";
+import { act, cleanup, fireEvent, render, screen } from "./../../../../../config/tests/test-utils";
 import {
 	deletedUserResponse,
 	removeUserSiteResponse,
@@ -46,12 +46,12 @@ let mockedAxios: MockAdapter;
 
 beforeAll(() => {
 	mockedAxios = new MockAdapter(axios);
-	window.HTMLElement.prototype.scrollIntoView = jest.fn();
+	window.HTMLElement.prototype.scrollIntoView = vi.fn();
 });
 
 afterEach(() => {
 	cleanup();
-	jest.clearAllMocks();
+	vi.clearAllMocks();
 	mockedAxios.reset();
 });
 

package/src/components/Flag/components/index.ts

@@ -0,0 +1,30 @@
+import type { ComponentType } from "react";
+
+import Ca_ES from "./Ca_ES";
+import De_DE from "./De_DE";
+import En_GB from "./En_GB";
+import Es_ES from "./Es_ES";
+import Eu_ES from "./Eu_ES";
+import Fr_FR from "./Fr_FR";
+import It_IT from "./It_IT";
+import Pt_PT from "./Pt_PT";
+
+/**
+ * Static registry of every flag. Replaces the dynamic `require()` this
+ * component used to do: a template-literal require only resolves through
+ * webpack's CommonJS context modules, so it breaks under ESM.
+ *
+ * When adding a flag, import it above and register it here.
+ */
+const flags: Record<string, ComponentType<any>> = {
+	Ca_ES,
+	De_DE,
+	En_GB,
+	Es_ES,
+	Eu_ES,
+	Fr_FR,
+	It_IT,
+	Pt_PT,
+};
+
+export default flags;

package/src/components/Flag/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import flags from "./components";
+
 const getImage = (name: string) => {
 	const simpleIcons: any = {
 		es: "Es_ES",
@@ -11,11 +13,7 @@ const getImage = (name: string) => {
 	};
 	const filename = simpleIcons[name?.toLowerCase()] || name;
 
-	try {
-		return require(`./components/${filename}`).default;
-	} catch (err) {
-		return null;
-	}
+	return flags[filename] ?? null;
 };
 const Flag = (props: IProps) => {
 	const name = props.name.charAt(0).toUpperCase() + props.name.slice(1);

package/src/components/Icon/components/index.ts

@@ -0,0 +1,229 @@
+import type { ComponentType } from "react";
+
+import Active from "./Active";
+import Add from "./Add";
+import AddCircle from "./AddCircle";
+import Alert from "./Alert";
+import AlignLeft from "./AlignLeft";
+import Back from "./Back";
+import BulletList from "./BulletList";
+import Button from "./Button";
+import Calendar from "./Calendar";
+import CancelEvent from "./CancelEvent";
+import Category from "./Category";
+import Change from "./Change";
+import Close from "./Close";
+import ClosePanel from "./ClosePanel";
+import CodeBody from "./CodeBody";
+import CodeHead from "./CodeHead";
+import CodeHeadBody from "./CodeHeadBody";
+import Collapsed from "./Collapsed";
+import ColorPicker from "./ColorPicker";
+import Compose from "./Compose";
+import Copy from "./Copy";
+import Copy2 from "./Copy2";
+import Data from "./Data";
+import DataAdd from "./DataAdd";
+import Deactivate from "./Deactivate";
+import Delete from "./Delete";
+import Desktop from "./Desktop";
+import Disabled from "./Disabled";
+import Done from "./Done";
+import DownArrow from "./DownArrow";
+import Download from "./Download";
+import Drag from "./Drag";
+import Duplicate from "./Duplicate";
+import Edit from "./Edit";
+import Empty from "./Empty";
+import EmptyCheck from "./EmptyCheck";
+import Extend from "./Extend";
+import File from "./File";
+import Filter from "./Filter";
+import Form from "./Form";
+import FullArrowDown from "./FullArrowDown";
+import FullArrowLeft from "./FullArrowLeft";
+import FullArrowRight from "./FullArrowRight";
+import FullArrowUp from "./FullArrowUp";
+import Grid from "./Grid";
+import Grid2 from "./Grid2";
+import GriddoLogo from "./GriddoLogo";
+import HeroCard from "./HeroCard";
+import Hide from "./Hide";
+import History from "./History";
+import Home from "./Home";
+import Ia from "./Ia";
+import Image from "./Image";
+import Info from "./Info";
+import Laptop from "./Laptop";
+import LeftArrow from "./LeftArrow";
+import Link from "./Link";
+import Lock from "./Lock";
+import Log from "./Log";
+// Aliased: a binding named `Map` would shadow the global.
+import MapIcon from "./Map";
+import Menu from "./Menu";
+import Microsoft from "./Microsoft";
+import Modified from "./Modified";
+import Modules from "./Modules";
+import More from "./More";
+import NewFolder from "./NewFolder";
+import Offline from "./Offline";
+import OfflinePending from "./OfflinePending";
+import OpenOutside from "./OpenOutside";
+import OpenPanel from "./OpenPanel";
+import OutOfSection from "./OutOfSection";
+import Page from "./Page";
+import Party from "./Party";
+import Paste from "./Paste";
+import Phone from "./Phone";
+import PhotoLibrary from "./PhotoLibrary";
+import Power from "./Power";
+import Preview from "./Preview";
+import Project from "./Project";
+import QrCode from "./QrCode";
+import Question from "./Question";
+import Refresh from "./Refresh";
+import Republish from "./Republish";
+import RightArrow from "./RightArrow";
+import Scheduled from "./Scheduled";
+import Search from "./Search";
+import SendEmail from "./SendEmail";
+import Settings from "./Settings";
+import Share from "./Share";
+import Subsection from "./Subsection";
+import Success from "./Success";
+import SuccessSolid from "./SuccessSolid";
+import Sync from "./Sync";
+import Tablet from "./Tablet";
+import Translate from "./Translate";
+import Unlink from "./Unlink";
+import UpArrow from "./UpArrow";
+import UploadFile from "./UploadFile";
+import UploadPending from "./UploadPending";
+import UrlLink from "./UrlLink";
+import User from "./User";
+import Users from "./Users";
+import Video from "./Video";
+import View from "./View";
+import Warning from "./Warning";
+import Web from "./Web";
+import Working from "./Working";
+
+/**
+ * Static registry of every icon. Replaces the dynamic `require()` this
+ * component used to do: a template-literal require only resolves through
+ * webpack's CommonJS context modules, so it breaks under ESM.
+ *
+ * When adding an icon, import it above and register it here.
+ */
+const icons: Record<string, ComponentType<any>> = {
+	Active,
+	Add,
+	AddCircle,
+	Alert,
+	AlignLeft,
+	Back,
+	BulletList,
+	Button,
+	Calendar,
+	CancelEvent,
+	Category,
+	Change,
+	Close,
+	ClosePanel,
+	CodeBody,
+	CodeHead,
+	CodeHeadBody,
+	Collapsed,
+	ColorPicker,
+	Compose,
+	Copy,
+	Copy2,
+	Data,
+	DataAdd,
+	Deactivate,
+	Delete,
+	Desktop,
+	Disabled,
+	Done,
+	DownArrow,
+	Download,
+	Drag,
+	Duplicate,
+	Edit,
+	Empty,
+	EmptyCheck,
+	Extend,
+	File,
+	Filter,
+	Form,
+	FullArrowDown,
+	FullArrowLeft,
+	FullArrowRight,
+	FullArrowUp,
+	Grid,
+	Grid2,
+	GriddoLogo,
+	HeroCard,
+	Hide,
+	History,
+	Home,
+	Ia,
+	Image,
+	Info,
+	Laptop,
+	LeftArrow,
+	Link,
+	Lock,
+	Log,
+	Map: MapIcon,
+	Menu,
+	Microsoft,
+	Modified,
+	Modules,
+	More,
+	NewFolder,
+	Offline,
+	OfflinePending,
+	OpenOutside,
+	OpenPanel,
+	OutOfSection,
+	Page,
+	Party,
+	Paste,
+	Phone,
+	PhotoLibrary,
+	Power,
+	Preview,
+	Project,
+	QrCode,
+	Question,
+	Refresh,
+	Republish,
+	RightArrow,
+	Scheduled,
+	Search,
+	SendEmail,
+	Settings,
+	Share,
+	Subsection,
+	Success,
+	SuccessSolid,
+	Sync,
+	Tablet,
+	Translate,
+	Unlink,
+	UpArrow,
+	UploadFile,
+	UploadPending,
+	UrlLink,
+	User,
+	Users,
+	Video,
+	View,
+	Warning,
+	Web,
+	Working,
+};
+
+export default icons;

package/src/components/Icon/index.tsx

@@ -1,10 +1,6 @@
-const getImage = (name: string) => {
-	try {
-		return require(`./components/${name}`).default;
-	} catch (_err) {
-		return null;
-	}
-};
+import icons from "./components";
+
+const getImage = (name: string) => icons[name] ?? null;
 
 const Icon = (props: IProps) => {
 	const name = props.name

package/src/constants/index.ts

@@ -25,7 +25,7 @@ const itemLabel = {
 type ItemLabel = ValueOf<typeof itemLabel>;
 
 const VALID_IMAGE_FORMATS = ["jpeg", "jpg", "png", "svg", "gif", "webp"];
-const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt"];
+const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt", "md"];
 const VALID_VIDEO_FORMATS = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
 const VALID_FILE_FORMATS = [...VALID_DOCUMENT_FORMATS, ...VALID_VIDEO_FORMATS];
 

package/src/helpers/files.tsx

@@ -27,6 +27,8 @@ const getFileIcon = (type: string) => {
 			return "iconVideo.svg";
 		case "txt":
 			return "txt.svg";
+		case "md":
+			return "markdown.svg";
 		default:
 			return "iconFile.svg";
 	}