Feature/website overhaul (#49)

* Reorganize repo
* Overhaul website design and rewrite in NextJS and Typescript
* Delete website-publish.yml

core/src/widgets/image/ImagePreview.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+
+import WidgetPreviewContainer from '../../components/UI/WidgetPreviewContainer';
+
+import type { FileOrImageField, WidgetPreviewProps, GetAssetFunction } from '../../interface';
+
+interface StyledImageProps {
+  src: string;
+}
+
+const StyledImage = styled(({ src }: StyledImageProps) => (
+  <img src={src || ''} role="presentation" />
+))`
+  display: block;
+  max-width: 100%;
+  height: auto;
+`;
+
+interface StyledImageAsset {
+  getAsset: GetAssetFunction;
+  value: string;
+  field: FileOrImageField;
+}
+
+function StyledImageAsset({ getAsset, value, field }: StyledImageAsset) {
+  return <StyledImage src={getAsset(value, field).toString()} />;
+}
+
+function ImagePreviewContent({
+  value,
+  getAsset,
+  field,
+}: WidgetPreviewProps<string | string[], FileOrImageField>) {
+  if (!value) {
+    return null;
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <>
+        {value.map(val => (
+          <StyledImageAsset key={val} value={val} getAsset={getAsset} field={field} />
+        ))}
+      </>
+    );
+  }
+
+  return <StyledImageAsset value={value} getAsset={getAsset} field={field} />;
+}
+
+function ImagePreview(props: WidgetPreviewProps<string | string[], FileOrImageField>) {
+  return (
+    <WidgetPreviewContainer>
+      {props.value ? <ImagePreviewContent {...props} /> : null}
+    </WidgetPreviewContainer>
+  );
+}
+
+export default ImagePreview;

core/src/widgets/image/index.ts

@@ -0,0 +1,21 @@
+import withFileControl, { getValidValue } from '../file/withFileControl';
+import previewComponent from './ImagePreview';
+import schema from './schema';
+
+import type { FileOrImageField, WidgetParam } from '../../interface';
+
+const controlComponent = withFileControl({ forImage: true });
+
+function ImageWidget(): WidgetParam<string | string[], FileOrImageField> {
+  return {
+    name: 'image',
+    controlComponent,
+    previewComponent,
+    options: {
+      schema,
+      getValidValue,
+    },
+  };
+}
+
+export default ImageWidget;

core/src/widgets/image/schema.ts

@@ -0,0 +1,5 @@
+export default {
+  properties: {
+    allow_multiple: { type: 'boolean' },
+  },
+};