Uuid Control widget for Static CMS

config.ts

import type { Config, WidgetControlProps } from "@staticcms/core";

interface UuidField {
  name: 'uuid';
  widget: 'uuid';
  label: string;
}

const config: Config<UuidField> = {
  backend: { name: "git-gateway", branch: "main" },
  media_folder: "public/images",
  public_folder: "/images",
  collections: [
    {
      name: "config",
      label: "Configurações do site",
      delete: false,
      icon: "screwdriver-wrench",
      editor: { preview: false },
      files: [
        {
          name: "general-site-config",
          label: "Configurações gerais do site",
          file: "data/meta/site-config.json",
          description: "General site settings",
          fields: [
            { label: "uuid test", name: "uuid", widget: "uuid" },
          ],
        },
        .....

index.tsx

import CMS from '@staticcms/core';

import UuidControl from './UuidControl.ts';

const CMSPage = () => {
  useEffect(() => {
    CMS.registerWidget('uuid', UuidControl);
    CMS.init({ config: CmsConfig });
  }, []);
 return (
    <div>
      <style jsx global>{`
        html,
        body {
          height: 100%;
        }
        #__next {
          display: none;
        }
        img {
          height: 140px;
        }
      `}</style>
    </div>
  );
};

UuidControl.tsx

// reference https://github.com/antondb/netlify-cms-widget-uuid
import React from 'react';
import type { WidgetControlProps } from '@staticcms/core';

interface UuidField {
  name: 'uuid';
  widget: 'uuid';
}

const createUuid = (options = { size: 8, url: 'int8rdomaluesbj012345679cfghkpqvwxyzZ' }) => {
  let { size, url } = options;
  let id = '';
  while (0 < size--) {
    id += url[(Math.random() * 37) | 0];
  }
  return id;
};
//
const UuidControl = ({ label, value, path, field, onChange }: WidgetControlProps<string, UuidField>) => {
  // const [internalValue, setInternalValue] = useState(value ?? '');
  // console.log(label, value, path, field, onChange);
  if (!value) {
    value = createUuid().trim();
    onChange(value);
  }
  return (
    <div style={{ display: 'flex' }}>
      <input type='hidden' id={path} key='uuid-input' value={value} />
      <div>
        {label} : {value}
      </div>
    </div>
  );
};

export default UuidControl;