@squiz/resource-browser 1.32.1-alpha.12

package/src/SourceList/sample-sources.json

@@ -0,0 +1,110 @@
+[
+  {
+    "id": "1",
+    "name": "Acme corporate system",
+    "nodes": [
+      {
+        "id": {
+          "id": "1",
+          "source": "1"
+        },
+        "type": "site",
+        "selected": true,
+        "label": "HandyHomes Website",
+        "childCount": 21
+      },
+      {
+        "id": {
+          "id": "2",
+          "source": "1"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "Another Website very long title to make it wrap to multiple lines",
+        "childCount": 135877
+      }
+    ]
+  },
+  {
+    "id": "2",
+    "name": "Acme internal system",
+    "nodes": [
+      {
+        "id": {
+          "id": "1",
+          "source": "2"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "Intranet Website",
+        "childCount": 15
+      },
+      {
+        "id": {
+          "id": "2",
+          "source": "2"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "Social Website",
+        "childCount": 10
+      }
+    ]
+  },
+  {
+    "id": "3",
+    "name": "Other system",
+    "nodes": [
+      {
+        "id": {
+          "id": "1",
+          "source": "3"
+        },
+        "type": "folder",
+        "selected": false,
+        "label": "Digital asset manager",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "2",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "3",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "4",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "5",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      }
+    ]
+  }
+]

package/src/Spinner/Spinner.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+
+import Spinner from './Spinner';
+
+describe('Spinner', () => {
+  it('Should render the spinner', async () => {
+    render(<Spinner />);
+
+    expect(screen.getByLabelText('Loading')).toBeInTheDocument();
+  });
+
+  it('Should render the loading spinner with the custom aria label', async () => {
+    render(<Spinner label="Loading sources" />);
+
+    expect(screen.getByLabelText('Loading sources')).toBeInTheDocument();
+  });
+});

package/src/Spinner/Spinner.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import Spinner, { SpinnerProps } from './Spinner';
+
+export default {
+  title: 'Global/Spinner',
+  component: Spinner,
+} as Meta<typeof Spinner>;
+
+const Template: StoryFn<SpinnerProps> = (args: SpinnerProps) => <Spinner {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Large = Template.bind({});
+Large.args = {
+  ...Default.args,
+  size: 'lg',
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+  ...Default.args,
+  className: 'text-blue-300',
+};

package/src/Spinner/Spinner.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+
+export type SpinnerProps = {
+  size?: 'md' | 'lg';
+  className?: string;
+  label?: string;
+};
+
+const Spinner = ({ size = 'md', className, label = 'Loading' }: SpinnerProps): ReactElement => {
+  return (
+    <div className="spinner__wrapper" aria-label={label}>
+      <div className={clsx(`spinner`, size && `spinner--${size}`, className)} role="status" />
+    </div>
+  );
+};
+
+export default Spinner;

package/src/Spinner/_spinner.scss

@@ -0,0 +1,11 @@
+.spinner {
+  @apply inline-block rounded-full h-8 w-8;
+  @apply border-4 border-solid border-current border-r-transparent;
+  @apply animate-spin align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
+  &__wrapper {
+    @apply flex items-center justify-center m-3 text-gray-300;
+  }
+  &--lg {
+    @apply h-12 w-12;
+  }
+}

package/src/__mocks__/JestHelpers.ts

@@ -0,0 +1,65 @@
+import fs from 'fs';
+import path from 'path';
+import sass from 'sass';
+import postcss, { Root, AcceptedPlugin, Processor } from 'postcss';
+import { fileURLToPath } from 'url';
+
+const removeLayerDirectivePlugin = {
+  postcssPlugin: 'remove-layer-directive',
+  OnceExit(root: Root) {
+    // Remove the @layer directive while keeping the contents
+    root.walkAtRules('layer', (rule) => {
+      rule.replaceWith(rule.nodes);
+    });
+  },
+} as AcceptedPlugin;
+
+function removeLayerDirective(scss: string) {
+  const { css } = postcss({
+    plugins: [removeLayerDirectivePlugin],
+  } as Processor).process(scss, {
+    from: undefined,
+  });
+
+  return css;
+}
+
+function readAndParseScss({ relativePath, dirname }: { relativePath: string; dirname: string }) {
+  const cssFileContents = fs.readFileSync(path.resolve(dirname, relativePath), 'utf8');
+  const compiledCSS = sass.compileString(cssFileContents, {
+    importers: [
+      {
+        canonicalize(url) {
+          // This function converts the relative path to an absolute path
+          const filePath = path.resolve(dirname, url);
+
+          return new URL(`file://${filePath}`);
+        },
+        load(canonicalUrl) {
+          // This function loads the returns the file in the expected format
+          return {
+            contents: fs.readFileSync(fileURLToPath(`${canonicalUrl}.scss`), 'utf8'),
+            syntax: 'scss',
+          };
+        },
+      },
+    ],
+  }).css;
+
+  return removeLayerDirective(compiledCSS);
+}
+
+function loadCss({ container, cssFileContents }: { container: HTMLElement; cssFileContents: string }) {
+  const style = window.document.createElement('style');
+  style.type = 'text/css';
+  style.innerHTML = cssFileContents;
+  container.append(style);
+}
+
+const resizeWindow = (x: number, y: number) => {
+  window.innerWidth = x;
+  window.innerHeight = y;
+  window.dispatchEvent(new Event('resize'));
+};
+
+export { readAndParseScss, loadCss, resizeWindow };

package/src/__mocks__/jestHelpers.spec.ts

@@ -0,0 +1,38 @@
+import { loadCss, resizeWindow } from './JestHelpers';
+
+describe('loadCss', () => {
+  it('should load the css', () => {
+    const container = document.createElement('div');
+    container.setAttribute('id', 'test');
+
+    const cssFileContents = `
+            .test {
+                color: red;
+            }
+        `;
+
+    loadCss({ container, cssFileContents });
+
+    // Expect that the css is loaded into the container as a style tag
+    expect(container.innerHTML).toBe(`<style type="text/css">${cssFileContents}</style>`);
+  });
+});
+
+describe('resizeWindow', () => {
+  it('should resize the window', () => {
+    resizeWindow(100, 100);
+
+    // Expect that the window has been resized
+    expect(window.innerWidth).toBe(100);
+    expect(window.innerHeight).toBe(100);
+  });
+
+  it('should dispatch a resize event', () => {
+    const resizeSpy = jest.spyOn(window, 'dispatchEvent');
+
+    resizeWindow(100, 100);
+
+    // Expect that the window has been resized
+    expect(resizeSpy).toHaveBeenCalled();
+  });
+});

package/src/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

package/src/index.scss

@@ -0,0 +1,7 @@
+/* Tailwind base styles, but scoped to the editor */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+// Components
+@import './Spinner/spinner';

package/src/index.stories.tsx

@@ -0,0 +1,70 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import RelatedAssetPicker, { NodeIdentifier } from './index';
+import sampleSources from './SourceList/sample-sources.json';
+import sampleResources from './ResourceList/sample-resources.json';
+
+export default {
+  title: 'RelatedAssetPicker',
+  component: RelatedAssetPicker,
+} as Meta<typeof RelatedAssetPicker>;
+
+const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
+  const { sourceIsLoading, resourceIsLoading, detailsIsLoading } = props;
+  return (
+    <RelatedAssetPicker
+      {...props}
+      onRequestSources={() => {
+        return new Promise((resolve) => {
+          if (!sourceIsLoading) {
+            setTimeout(resolve, 500, sampleSources);
+          }
+        });
+      }}
+      onRequestChildren={() => {
+        return new Promise((resolve) => {
+          if (!resourceIsLoading) {
+            setTimeout(resolve, 500, sampleResources);
+          }
+        });
+      }}
+      onRequestResource={() => {
+        return new Promise((resolve) => {
+          if (!detailsIsLoading) {
+            setTimeout(resolve, 500, {
+              type: 'page',
+              name: 'Products',
+              properties: new Map([
+                ['assetId', '12345'],
+                ['status', 'UnderConstruction'],
+              ]),
+            });
+          }
+        });
+      }}
+      onChange={(nodeId: NodeIdentifier) => {
+        alert(`Resource Browser has selected ${nodeId.source} ${nodeId.id}`);
+      }}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  showButtonLabel: false,
+  buttonLabel: 'Open related asset picker',
+  buttonIcon: (
+    <svg width="30" height="30" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M29.1 48C24.3 47.75 20.25 45.9 16.95 42.45C13.65 39 12 34.85 12 30C12 25 13.75 20.75 17.25 17.25C20.75 13.75 25 12 30 12C34.85 12 39 13.65 42.45 16.95C45.9 20.25 47.75 24.3 48 29.1L41.7 27.225C41.05 24.525 39.65 22.3125 37.5 20.5875C35.35 18.8625 32.85 18 30 18C26.7 18 23.875 19.175 21.525 21.525C19.175 23.875 18 26.7 18 30C18 32.85 18.8625 35.35 20.5875 37.5C22.3125 39.65 24.525 41.05 27.225 41.7L29.1 48ZM30 60C25.85 60 21.95 59.2125 18.3 57.6375C14.65 56.0625 11.475 53.925 8.775 51.225C6.075 48.525 3.9375 45.35 2.3625 41.7C0.7875 38.05 0 34.15 0 30C0 25.85 0.7875 21.95 2.3625 18.3C3.9375 14.65 6.075 11.475 8.775 8.775C11.475 6.075 14.65 3.9375 18.3 2.3625C21.95 0.7875 25.85 0 30 0C34.15 0 38.05 0.7875 41.7 2.3625C45.35 3.9375 48.525 6.075 51.225 8.775C53.925 11.475 56.0625 14.65 57.6375 18.3C59.2125 21.95 60 25.85 60 30V31.35C60 31.8 59.95 32.25 59.85 32.7L54 30.9V30C54 23.3 51.675 17.625 47.025 12.975C42.375 8.325 36.7 6 30 6C23.3 6 17.625 8.325 12.975 12.975C8.325 17.625 6 23.3 6 30C6 36.7 8.325 42.375 12.975 47.025C17.625 51.675 23.3 54 30 54H30.9L32.7 59.85C32.25 59.95 31.8 60 31.35 60H30ZM54.525 60.45L42.75 48.675L40.5 55.5C40.25 56.2 39.775 56.5375 39.075 56.5125C38.375 56.4875 37.9 56.125 37.65 55.425L30.825 32.7C30.625 32.15 30.75 31.65 31.2 31.2C31.65 30.75 32.15 30.625 32.7 30.825L55.425 37.65C56.125 37.9 56.4875 38.375 56.5125 39.075C56.5375 39.775 56.2 40.25 55.5 40.5L48.675 42.75L60.45 54.525C60.75 54.825 60.9 55.175 60.9 55.575C60.9 55.975 60.75 56.325 60.45 56.625L56.625 60.45C56.325 60.75 55.975 60.9 55.575 60.9C55.175 60.9 54.825 60.75 54.525 60.45Z"
+        fill="#BABABA"
+      />
+    </svg>
+  ),
+  modalTitle: 'Asset Picker',
+  sourceIsLoading: false,
+  resourceIsLoading: false,
+  detailsIsLoading: false,
+  allowedTypes: ['site', 'image'],
+};

package/src/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+// import { ResourceBrowserInternalContext } from './InternalContext/InternalContext';
+import ModalTrigger from './Modal/ModalTrigger';
+import ResourcePickerContainer from './ResourcePickerContainer/ResourcePickerContainer';
+
+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;
+}) {
+  const showLabel = showButtonLabel || false;
+
+  return (
+    <div className="squiz-rb-scope">
+      <ModalTrigger showLabel={showLabel} label={buttonLabel} icon={buttonIcon}>
+        {(onClose, titleProps) => (
+          <ResourcePickerContainer
+            title={modalTitle}
+            titleAriaProps={titleProps}
+            allowedTypes={allowedTypes}
+            onClose={onClose}
+            onRequestSources={onRequestSources}
+            onRequestChildren={onRequestChildren}
+            onRequestResource={onRequestResource}
+            onChange={onChange}
+          />
+        )}
+      </ModalTrigger>
+    </div>
+  );
+}

package/src/uuid.ts

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

package/tailwind.config.cjs

@@ -0,0 +1,84 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
+  theme: {
+    extend: {
+      borderRadius: {
+        DEFAULT: '4px',
+        md: '6px',
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+      },
+      fontSize: {
+        xlg: '1.125rem',
+        lg: '1rem',
+        md: '0.875rem',
+        sm: '0.8125rem',
+        base: '1rem',
+        'heading-1': ['1.625rem', '2rem'],
+        'heading-2': ['1.25rem', '1.5rem'],
+        'heading-3': ['1.125rem', '1.375rem'],
+        'heading-4': ['1rem', '1.25rem'],
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      boxShadow: {
+        outline: '0 0 0 1px rgba(0,0,0,0.10)',
+        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        none: 'none',
+      },
+      width: {
+        'modal-sm': '25rem',
+        'modal-md': '37.5rem',
+        'modal-lg': '50rem',
+        'modal-xl': '62.5rem',
+      },
+      spacing: {
+        1: '0.25rem', // 4px
+        2: '0.5rem', // 8px
+        3: '0.75rem', // 12px
+        4: '1rem', // 16px
+        5: '1.25rem', // 20px
+        6: '1.5rem', // 24px
+        7: '1.75rem', // 28px
+        8: '2rem', // 32px
+        169: '169px', // 169px
+      },
+      colors: {
+        gray: {
+          50: '#F7F7F7',
+          100: '#F5F5F5',
+          200: '#ededed',
+          300: '#e0e0e0',
+          400: '#BABABA',
+          500: '#949494',
+          600: '#707070',
+          700: '#4F4F4F',
+          800: '#3D3D3D',
+          900: '#2B2B2B',
+        },
+        blue: {
+          100: '#e6f1fa',
+          200: '#8FC0EB',
+          300: '#0774d2',
+          400: '#044985',
+        },
+        red: {
+          300: '#d72321',
+        },
+      },
+    },
+  },
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "./lib"
+  },
+  "files": ["./src/index.tsx"]
+}