@squiz/resource-browser 1.32.1-alpha.12

package/lib/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export type NodeIdentifier = {
+    source: string | null;
+    id: string;
+};
+export type ResourceDetail = {
+    type: string;
+    name: string;
+    properties: Map<string, any>;
+};
+export type Resource = {
+    id: NodeIdentifier;
+    type: string;
+    selected: boolean;
+    label: string;
+    childCount: number;
+};
+export type Source = {
+    id: string;
+    name: string;
+    nodes: Array<Resource>;
+};
+export type Hierarchy = {
+    id: NodeIdentifier;
+    label: string;
+};
+export default function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, }: {
+    showButtonLabel?: boolean;
+    buttonLabel: string;
+    buttonIcon: React.ReactNode;
+    modalTitle: string;
+    allowedTypes: string[] | undefined;
+    onRequestSources: () => Promise<Source[]>;
+    onRequestChildren(id: NodeIdentifier): Promise<Resource[]>;
+    onRequestResource(id: NodeIdentifier): Promise<ResourceDetail | null>;
+    onChange(resource: NodeIdentifier | null): void;
+}): JSX.Element;

package/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+// import { ResourceBrowserInternalContext } from './InternalContext/InternalContext';
+const ModalTrigger_1 = __importDefault(require("./Modal/ModalTrigger"));
+const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
+function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onRequestResource, onChange, }) {
+    const showLabel = showButtonLabel || false;
+    return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
+        react_1.default.createElement(ModalTrigger_1.default, { showLabel: showLabel, label: buttonLabel, icon: buttonIcon }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onRequestResource: onRequestResource, onChange: onChange })))));
+}
+exports.default = ComponentEditorContentBrowser;

package/lib/uuid.d.ts

@@ -0,0 +1 @@
+export default function uuid(): string;

package/lib/uuid.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+function uuid() {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
+}
+exports.default = uuid;

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@squiz/resource-browser",
+  "version": "1.32.1-alpha.12",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "compile": "npm run clean && npm run compile:styles && npm run compile:code",
+    "compile:code": "tsc",
+    "compile:styles": "node build.js",
+    "dev": "vite compile",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "clean": "rimraf ./lib"
+  },
+  "dependencies": {
+    "react-aria": "3.23.1",
+    "react-responsive": "9.0.2",
+    "react-stately": "3.21.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "7.0.0-rc.4",
+    "@storybook/addon-interactions": "7.0.0-rc.4",
+    "@storybook/addon-links": "7.0.0-rc.4",
+    "@storybook/addon-styling": "1.0.1",
+    "@storybook/blocks": "7.0.0-rc.4",
+    "@storybook/react": "7.0.0-rc.4",
+    "@storybook/react-vite": "7.0.0-rc.4",
+    "@storybook/testing-library": "0.0.14-next.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/postcss-js": "4.0.0",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@vitejs/plugin-react-swc": "3.0.0",
+    "autoprefixer": "10.4.14",
+    "esbuild": "0.17.17",
+    "esbuild-sass-plugin": "2.8.0",
+    "jest": "29.4.1",
+    "jest-environment-jsdom": "29.4.1",
+    "postcss": "8.4.21",
+    "postcss-loader": "7.2.4",
+    "postcss-nested": "6.0.1",
+    "postcss-prefix-selector": "1.16.0",
+    "prop-types": "15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "4.1.2",
+    "storybook": "7.0.0-rc.4",
+    "tailwindcss": "3.3.1",
+    "ts-jest": "29.0.5",
+    "typescript": "4.9.3",
+    "vite": "4.2.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.14.0 || ^17 || ^18",
+    "@types/react-dom": "^16.9.0 || ^17 || ^18",
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "volta": {
+    "node": "18.15.0"
+  },
+  "gitHead": "57657552ede0a737aa1a6dc98641c4de71c1566c"
+}

package/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-nested'),
+    require('postcss-prefix-selector')({
+      prefix: '.squiz-rb-scope',
+      includeFiles: ['./src/index.scss'],
+    }),
+  ],
+};

package/src/Icons/Generics/ArrowDown.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * Renders the ArrowDown icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowDown component
+ * @returns {JSX.Element} - The ArrowDown component
+ * @example
+ * <ArrowDown />
+ * @example
+ * <ArrowDown height={24} width={24} />
+ * @example
+ * <ArrowDown className="custom-class" />
+ */
+export default function ArrowDown({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.12508 8.99999L12.0051 12.88L15.8851 8.99999C16.2751 8.60999 16.9051 8.60999 17.2951 8.99999C17.6851 9.38999 17.6851 10.02 17.2951 10.41L12.7051 15C12.3151 15.39 11.6851 15.39 11.2951 15L6.70508 10.41C6.51783 10.2232 6.4126 9.96951 6.4126 9.70499C6.4126 9.44047 6.51783 9.18682 6.70508 8.99999C7.09508 8.61999 7.73508 8.60999 8.12508 8.99999Z"
+        fill="#707070"
+      />
+      {!isDecorative && <title>arrow down icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/ArrowRight.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * Renders the ArrowRight icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowRight component
+ * @returns {JSX.Element} - The ArrowRight component
+ * @example
+ * <ArrowRight />
+ * @example
+ * <ArrowRight height={24} width={24} />
+ * @example
+ * <ArrowRight className="custom-class" />
+ */
+export default function ArrowRight({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.00001 15.875L12.88 11.995L9.00001 8.11501C8.81275 7.92817 8.70752 7.67452 8.70752 7.41001C8.70752 7.14549 8.81275 6.89184 9.00001 6.70501C9.39001 6.31501 10.02 6.31501 10.41 6.70501L15 11.295C15.39 11.685 15.39 12.315 15 12.705L10.41 17.295C10.02 17.685 9.39001 17.685 9.00001 17.295C8.62001 16.905 8.61001 16.265 9.00001 15.875Z"
+        fill="#707070"
+      />
+      {!isDecorative && <title>arrow right icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/Close.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * Renders the Close icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Close component
+ * @returns {JSX.Element} - The Close component
+ * @example
+ * <Close />
+ * @example
+ * <Close height={24} width={24} />
+ * @example
+ * <Close className="custom-class" />
+ */
+export default function Close({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 12C2 6.47 6.47 2 12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12ZM14.89 16.3C15.28 16.69 15.91 16.69 16.3 16.3C16.68 15.91 16.68 15.27 16.3 14.89L13.41 12L16.3 9.11C16.69 8.72 16.69 8.09 16.3 7.7C15.91 7.31 15.28 7.31 14.89 7.7L12 10.59L9.11 7.7C8.72 7.31 8.09 7.31 7.7 7.7C7.51275 7.88683 7.40751 8.14048 7.40751 8.405C7.40751 8.66952 7.51275 8.92317 7.7 9.11L10.59 12L7.7 14.89C7.51275 15.0768 7.40751 15.3305 7.40751 15.595C7.40751 15.8595 7.51275 16.1132 7.7 16.3C8.09 16.69 8.72 16.69 9.11 16.3L12 13.41L14.89 16.3Z"
+        fill="#949494"
+      />
+      {!isDecorative && <title>close icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/GenericIconMap.ts

@@ -0,0 +1,14 @@
+import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close } from '.';
+
+// Define our map of matrix types to icons
+const GenericIconMap = {
+  'arrow-right': ArrowRight,
+  'arrow-down': ArrowDown,
+  'resource-select': ResourceSelect,
+  selected: Selected,
+  root: Root,
+  close: Close,
+};
+
+// Export our map
+export default GenericIconMap;

package/src/Icons/Generics/ResourceSelect.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+/**
+ * Renders the ResourceSelected icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the ResourceSelected component
+ * @returns {JSX.Element} - The ResourceSelected component
+ * @example
+ * <ResourceSelected />
+ * @example
+ * <ResourceSelected height={24} width={24} />
+ * @example
+ * <ResourceSelected className="custom-class" />
+ */
+export default function ResourceSelected({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <mask
+        id="mask0_1232_8208"
+        // style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="72"
+        height="72"
+      >
+        <rect width="72" height="72" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1232_8208)">
+        <path
+          d="M35.1 53.9999C30.3 53.7499 26.25 51.8999 22.95 48.4499C19.65 44.9999 18 40.8499 18 35.9999C18 30.9999 19.75 26.7499 23.25 23.2499C26.75 19.7499 31 17.9999 36 17.9999C40.85 17.9999 45 19.6499 48.45 22.9499C51.9 26.2499 53.75 30.2999 54 35.0999L47.7 33.2249C47.05 30.5249 45.65 28.3124 43.5 26.5874C41.35 24.8624 38.85 23.9999 36 23.9999C32.7 23.9999 29.875 25.1749 27.525 27.5249C25.175 29.8749 24 32.6999 24 35.9999C24 38.8499 24.8625 41.3499 26.5875 43.4999C28.3125 45.6499 30.525 47.0499 33.225 47.6999L35.1 53.9999ZM36 65.9999C31.85 65.9999 27.95 65.2124 24.3 63.6374C20.65 62.0624 17.475 59.9249 14.775 57.2249C12.075 54.5249 9.9375 51.3499 8.3625 47.6999C6.7875 44.0499 6 40.1499 6 35.9999C6 31.8499 6.7875 27.9499 8.3625 24.2999C9.9375 20.6499 12.075 17.4749 14.775 14.7749C17.475 12.0749 20.65 9.93741 24.3 8.36241C27.95 6.78741 31.85 5.99991 36 5.99991C40.15 5.99991 44.05 6.78741 47.7 8.36241C51.35 9.93741 54.525 12.0749 57.225 14.7749C59.925 17.4749 62.0625 20.6499 63.6375 24.2999C65.2125 27.9499 66 31.8499 66 35.9999V37.3499C66 37.7999 65.95 38.2499 65.85 38.6999L60 36.8999V35.9999C60 29.2999 57.675 23.6249 53.025 18.9749C48.375 14.3249 42.7 11.9999 36 11.9999C29.3 11.9999 23.625 14.3249 18.975 18.9749C14.325 23.6249 12 29.2999 12 35.9999C12 42.6999 14.325 48.3749 18.975 53.0249C23.625 57.6749 29.3 59.9999 36 59.9999H36.9L38.7 65.8499C38.25 65.9499 37.8 65.9999 37.35 65.9999H36ZM60.525 66.4499L48.75 54.6749L46.5 61.4999C46.25 62.1999 45.775 62.5374 45.075 62.5124C44.375 62.4874 43.9 62.1249 43.65 61.4249L36.825 38.6999C36.625 38.1499 36.75 37.6499 37.2 37.1999C37.65 36.7499 38.15 36.6249 38.7 36.8249L61.425 43.6499C62.125 43.8999 62.4875 44.3749 62.5125 45.0749C62.5375 45.7749 62.2 46.2499 61.5 46.4999L54.675 48.7499L66.45 60.5249C66.75 60.8249 66.9 61.1749 66.9 61.5749C66.9 61.9749 66.75 62.3249 66.45 62.6249L62.625 66.4499C62.325 66.7499 61.975 66.8999 61.575 66.8999C61.175 66.8999 60.825 66.7499 60.525 66.4499Z"
+          fill="#BABABA"
+        />
+      </g>
+      {!isDecorative && <title>resource select icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/Root.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+/**
+ * Renders the Root icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Root component
+ * @returns {JSX.Element} - The Root component
+ * @example
+ * <Root />
+ * @example
+ * <Root height={24} width={24} />
+ * @example
+ * <Root className="custom-class" />
+ */
+export default function Root({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M4.20374 18H15.2037C15.7537 18 16.2037 17.55 16.2037 17C16.2037 16.45 15.7537 16 15.2037 16H4.20374C3.65374 16 3.20374 16.45 3.20374 17C3.20374 17.55 3.65374 18 4.20374 18ZM4.20374 13H12.2037C12.7537 13 13.2037 12.55 13.2037 12C13.2037 11.45 12.7537 11 12.2037 11H4.20374C3.65374 11 3.20374 11.45 3.20374 12C3.20374 12.55 3.65374 13 4.20374 13ZM3.20374 7C3.20374 7.55 3.65374 8 4.20374 8H15.2037C15.7537 8 16.2037 7.55 16.2037 7C16.2037 6.45 15.7537 6 15.2037 6H4.20374C3.65374 6 3.20374 6.45 3.20374 7ZM20.5037 14.88L17.6237 12L20.5037 9.12C20.8937 8.73 20.8937 8.1 20.5037 7.71C20.1137 7.32 19.4837 7.32 19.0937 7.71L15.5037 11.3C15.1137 11.69 15.1137 12.32 15.5037 12.71L19.0937 16.3C19.4837 16.69 20.1137 16.69 20.5037 16.3C20.8837 15.91 20.8937 15.27 20.5037 14.88Z"
+        fill="#707070"
+      />
+      {!isDecorative && <title>root icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/Selected.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * Renders the Selected icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Selected component
+ * @returns {JSX.Element} - The Selected component
+ * @example
+ * <Selected />
+ * @example
+ * <Selected height={24} width={24} />
+ * @example
+ * <Selected className="custom-class" />
+ */
+export default function Selected({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M5.80004 10.78L2.30004 7.28002C1.91004 6.89002 1.29004 6.89002 0.900044 7.28002C0.510044 7.67002 0.510044 8.29002 0.900044 8.68002L5.09004 12.87C5.48004 13.26 6.11004 13.26 6.50004 12.87L17.1 2.28002C17.49 1.89002 17.49 1.27002 17.1 0.880024C16.71 0.490024 16.09 0.490024 15.7 0.880024L5.80004 10.78Z"
+        fill="#044985"
+      />
+      {!isDecorative && <title>selected icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/index.tsx

@@ -0,0 +1,7 @@
+// Exports all icons from the Generics folder
+export { default as ArrowRight } from './ArrowRight';
+export { default as ArrowDown } from './ArrowDown';
+export { default as Selected } from './Selected';
+export { default as Root } from './Root';
+export { default as ResourceSelect } from './ResourceSelect';
+export { default as Close } from './Close';

package/src/Icons/Icon.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { screen, render, cleanup } from '@testing-library/react';
+
+import Icon, { iconSources } from './Icon';
+
+// before each test, clear the rendered icon
+beforeEach(() => {
+  cleanup();
+});
+
+describe('Icon', () => {
+  // Icon should render a default icon when no icon is provided
+  it('should render a default icon when no icon is provided', async () => {
+    render(<Icon isDecorative={false} />);
+
+    // Expect that there is an svg on the page with the title "generic file icon" (the default icon)
+    expect(screen.getByTitle('generic file icon')).toBeInTheDocument();
+  });
+
+  // Icon should pass through props to the rendered icon
+  it('should pass through props to the rendered icon', async () => {
+    render(<Icon className="test-class" data-testid="test-icon" />);
+
+    // Expect that there is an svg on the page with the class "test-class"
+    expect(screen.getByTestId('test-icon')).toHaveClass('test-class');
+  });
+
+  // Icon should pass through svg props to the rendered icon
+  it('should pass through svg props to the rendered icon', async () => {
+    render(<Icon height={24} width={24} data-testid="test-icon" />);
+
+    // Expect that there is an svg on the page with the height and width of 24
+    expect(screen.getByTestId('test-icon')).toHaveAttribute('height', '24');
+    expect(screen.getByTestId('test-icon')).toHaveAttribute('width', '24');
+  });
+
+  // Icon should render the correct icon when a resource source and icon are provided
+  it('should render the correct icon when a resource source and icon are provided', async () => {
+    // Get the sources from the icon sources
+    const sources = Object.keys(iconSources) as (keyof typeof iconSources)[];
+
+    // Loop through the sources
+    for (const source of sources) {
+      // Get the icons from the current source
+      const icons = Object.keys(iconSources[source]);
+
+      // Loop through the icons
+      for (const icon of icons) {
+        const resourceSource = source as keyof typeof iconSources;
+        const iconOption = icon as keyof (typeof iconSources)[keyof typeof iconSources];
+
+        render(<Icon resourceSource={resourceSource} icon={iconOption} isDecorative={false} />);
+
+        // Expect that there is an svg on the page with the title of the current icon (converting _ or - to spaces and adding "icon" to the end)
+        expect(screen.getByTitle(`${icon.replace(/[_-]/g, ' ')} icon`)).toBeInTheDocument();
+
+        // Clear the rendered icon
+        cleanup();
+      }
+    }
+  });
+});

package/src/Icons/Icon.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import Icon from './Icon';
+
+export default {
+  title: 'Icons/Icon',
+  component: Icon,
+} as Meta<typeof Icon>;
+
+const Template: StoryFn<typeof Icon> = (props) => <Icon {...props} />;
+
+export const ArrowRight = Template.bind({});
+ArrowRight.args = {
+  icon: 'arrow-right',
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  icon: 'selected',
+};
+
+export const Root = Template.bind({});
+Root.args = {
+  icon: 'root',
+};
+
+export const Audio = Template.bind({});
+Audio.args = {
+  icon: 'audio',
+  resourceSource: 'matrix',
+};
+
+export const Excel = Template.bind({});
+Excel.args = {
+  icon: 'excel',
+  resourceSource: 'matrix',
+};
+
+export const Folder = Template.bind({});
+Folder.args = {
+  icon: 'folder',
+  resourceSource: 'matrix',
+};
+
+export const GenericFile = Template.bind({});
+GenericFile.args = {
+  icon: 'generic_file',
+  resourceSource: 'matrix',
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  icon: 'image',
+  resourceSource: 'matrix',
+};
+
+export const Page = Template.bind({});
+Page.args = {
+  icon: 'page',
+  resourceSource: 'matrix',
+};
+
+export const Pdf = Template.bind({});
+Pdf.args = {
+  icon: 'pdf',
+  resourceSource: 'matrix',
+};
+
+export const Powerpoint = Template.bind({});
+Powerpoint.args = {
+  icon: 'powerpoint',
+  resourceSource: 'matrix',
+};
+
+export const Site = Template.bind({});
+Site.args = {
+  icon: 'site',
+  resourceSource: 'matrix',
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  icon: 'video',
+  resourceSource: 'matrix',
+};
+
+export const Word = Template.bind({});
+Word.args = {
+  icon: 'word',
+  resourceSource: 'matrix',
+};
+
+export const LargeIcon = Template.bind({});
+LargeIcon.args = {
+  className: 'w-36 h-36',
+};
+
+export const SmallIcon = Template.bind({});
+SmallIcon.args = {
+  className: 'w-4 h-4',
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/Icons/Icon.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import GenericIconMap from './Generics/GenericIconMap';
+import MatrixResourceMap from './MatrixResources/MatrixResourceMap';
+
+export const iconSources = {
+  generic: GenericIconMap,
+  matrix: MatrixResourceMap,
+};
+
+// The resource sources options
+export type ResourceSources = keyof typeof iconSources;
+
+// Get the list of possible icons from the icon sources
+export type IconOptions = keyof (typeof iconSources)[ResourceSources];
+
+/**
+ * Renders an icon based on the resource source and the icon name
+ * @param {{resourceSource?: ResourceSources; icon?: IconOptions; props: React.HTMLAttributes<HTMLOrSVGElement>}} props - The props for the Icon component
+ * @returns {React.FunctionComponent} - The icon component
+ * @example
+ * <Icon />
+ * @example
+ * <Icon resourceSource="generic" icon="generic_file" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" height={24} width={24} />
+ * @example
+ * <Icon resourceSource="matrix" icon="page" className="custom-class" />
+ */
+function Icon({
+  resourceSource = 'generic',
+  icon,
+  isDecorative = true,
+  ...props
+}: {
+  icon?: IconOptions;
+  resourceSource?: ResourceSources;
+  isDecorative?: boolean;
+} & React.HTMLAttributes<HTMLElement> &
+  React.SVGAttributes<SVGElement>) {
+  // Loop through the resource sources
+  for (const source in iconSources) {
+    // If the resource source is the current source and the icon is in the current source map, render the icon
+    if (resourceSource === source && icon && icon in iconSources[source]) {
+      // Get the icon from the current source map
+      const Icon = iconSources[source][icon] as React.FunctionComponent<
+        { isDecorative: boolean } & React.SVGProps<SVGSVGElement>
+      >;
+
+      // Render the icon
+      return <Icon isDecorative={isDecorative} {...props} />;
+    }
+  }
+
+  // If the icon is not defined, render the default icon
+  const DefaultIcon = MatrixResourceMap['generic_file'];
+  return <DefaultIcon isDecorative={isDecorative} {...props} />;
+}
+
+export default Icon;

package/src/Icons/MatrixResources/Audio.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/**
+ * Renders the Audio icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Audio component
+ * @returns {JSX.Element} - The Audio component
+ * @example
+ * <Audio />
+ * @example
+ * <Audio height={24} width={24} />
+ * @example
+ * <Audio className="custom-class" />
+ */
+export default function Audio({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect fill="#cce9ed" height="19" rx="1.5" stroke="#73c0cb" width="19" x="2.5" y="2.5" />
+      <path
+        d="m9.5 7.4798c0-.23683.16616-.44118.39802-.48949l5.99998-1.25c.3105-.06468.602.17234.602.48949v1.2904c0 .23683-.1662.44118-.398.48949l-6 1.25c-.31051.06468-.602-.17234-.602-.48949z"
+        fill="#73c0cb"
+        stroke="#057e91"
+      />
+      <path d="m9 8c0-.55228.44772-1 1-1v9.5c0 .2761-.22386.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
+      <circle cx="7.5" cy="16.5" fill="#73c0cb" r="2" stroke="#057e91" />
+      <path d="m16 7 1 .32v7.18c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
+      <circle cx="14.5" cy="14.5" fill="#73c0cb" r="2" stroke="#057e91" />
+      {!isDecorative && <title>audio icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Excel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Renders the Excel icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Excel component
+ * @returns {JSX.Element} - The Excel component
+ * @example
+ * <Excel />
+ * @example
+ * <Excel height={24} width={24} />
+ * @example
+ * <Excel className="custom-class" />
+ */
+export default function Excel({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14.1716 2.5H6C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H18C18.8284 21.5 19.5 20.8284 19.5 20V7.82843C19.5 7.16539 19.2366 6.5295 18.7678 6.06066L15.9393 3.23223C15.4705 2.76339 14.8346 2.5 14.1716 2.5Z"
+        fill="#E7E7E7"
+        stroke="#BCBCBC"
+      />
+      <path d="M14.5 3V6.5C14.5 7.05228 14.9477 7.5 15.5 7.5H19" stroke="#BCBCBC" />
+      <rect y="8" width="12" height="12" rx="2" fill="#4FAD6F" />
+      <path d="M3.5 11.5L8.5 16.5" stroke="white" strokeLinecap="round" />
+      <path d="M8.5 11.5L3.5 16.5" stroke="white" strokeLinecap="round" />
+      {!isDecorative && <title>excel icon</title>}
+    </svg>
+  );
+}