Custom component library -- initial setup (#191)

* Scaffolding for component library
* Handle Date values
* Improve types
* Couple more components
* Add post-publish install script
* Error handling
* Start README

Author: CarlosNZ

.gitignore

@@ -46,8 +46,9 @@ temp.js
 .vscode/settings.json
 demo/src/firebaseConfig.json
 
-# Built package in demo
+# Built package in demo/custom library
 demo/src/package
+custom-component-library/components/package
 .original-readme.md
 .npm-readme.md
 demo/src/imports/import.ts

custom-component-library/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

custom-component-library/README.md

@@ -0,0 +1,35 @@
+A collection of [Custom Components](https://github.com/CarlosNZ/json-edit-react#custom-nodes) for **json-edit-react**. 
+
+A work in progress.
+
+Contains a [Vite](https://vite.dev/) web-app for previewing and developing components.
+
+The individual components are in the `/components` folder, along with demo data (in `data.ts`).
+
+## Components
+
+These are the ones I'm planning for now:
+
+- [x] Hyperlink/URL
+- [x] Undefined
+- [x] Date Object
+- [ ] Date Picker (with ISO string)
+- [ ] `NaN`
+- [ ] BigInt
+
+## Development
+
+From within this folder: `/custom-component-library`:
+
+Install dependencies:
+
+```js
+yarn install
+```
+
+Launch app:
+
+```js
+yarn dev
+```
+

custom-component-library/components/DateObject/component.tsx

@@ -0,0 +1,38 @@
+import React, { useRef } from 'react'
+import { StringDisplay, toPathString, StringEdit, type CustomNodeProps } from 'json-edit-react'
+
+export const DateObjectCustomComponent: React.FC<CustomNodeProps<unknown>> = (props) => {
+  const { nodeData, isEditing, setValue, getStyles, canEdit, value, handleEdit, onError } = props
+  const lastValidDate = useRef(value)
+
+  if (value instanceof Date) lastValidDate.current = value
+
+  return isEditing ? (
+    <StringEdit
+      styles={getStyles('input', nodeData)}
+      pathString={toPathString(nodeData.path)}
+      {...props}
+      value={value instanceof Date ? value.toISOString() : (value as string)}
+      setValue={setValue as React.Dispatch<React.SetStateAction<string>>}
+      handleEdit={() => {
+        const newDate = new Date(value as string)
+        try {
+          // Check if date is valid by trying to convert to ISO
+          newDate.toISOString()
+          handleEdit(newDate)
+        } catch {
+          handleEdit(lastValidDate.current)
+          onError({ code: 'UPDATE_ERROR', message: 'Invalid Date' }, value)
+        }
+      }}
+    />
+  ) : (
+    <StringDisplay
+      {...props}
+      styles={getStyles('string', nodeData)}
+      canEdit={canEdit}
+      pathString={toPathString(nodeData.path)}
+      value={nodeData.value.toLocaleString()}
+    />
+  )
+}

custom-component-library/components/DateObject/definition.ts

@@ -0,0 +1,12 @@
+import { DateObjectCustomComponent } from './component'
+import { type CustomNodeDefinition } from 'json-edit-react'
+
+export const DateObjectDefinition: CustomNodeDefinition = {
+  condition: (nodeData) => nodeData.value instanceof Date,
+  element: DateObjectCustomComponent,
+  showEditTools: true,
+  showOnEdit: true,
+  name: 'Date Object', // shown in the Type selector menu
+  showInTypesSelector: true,
+  defaultValue: new Date(),
+}

custom-component-library/components/DateObject/index.ts

@@ -0,0 +1 @@
+export * from './definition'

custom-component-library/components/Hyperlink/component.tsx

@@ -0,0 +1,46 @@
+/**
+ * An URL display Custom Component
+ *
+ * A simple custom node which detects urls in data and makes them active
+ * hyperlinks.
+ */
+
+import React from 'react'
+import { toPathString, type CustomNodeProps, StringDisplay } from 'json-edit-react'
+
+export const LinkCustomComponent: React.FC<
+  CustomNodeProps<{ linkStyles?: React.CSSProperties; stringTruncate?: number }>
+> = (props) => {
+  const { setIsEditing, getStyles, nodeData, customNodeProps = {} } = props
+  const styles = getStyles('string', nodeData)
+  const { linkStyles = { fontWeight: 'bold', textDecoration: 'underline' }, stringTruncate = 60 } =
+    customNodeProps
+  return (
+    <div
+      onClick={(e) => {
+        if (e.getModifierState('Control') || e.getModifierState('Meta')) setIsEditing(true)
+      }}
+      style={styles}
+    >
+      <StringDisplay
+        {...props}
+        pathString={toPathString(nodeData.path)}
+        styles={{ ...styles }}
+        value={nodeData.value as string}
+        stringTruncate={stringTruncate}
+        TextWrapper={({ children }) => {
+          return (
+            <a
+              href={nodeData.value as string}
+              target="_blank"
+              rel="noreferrer"
+              style={{ ...styles, ...linkStyles, cursor: 'pointer' }}
+            >
+              {children}
+            </a>
+          )
+        }}
+      />
+    </div>
+  )
+}

custom-component-library/components/Hyperlink/definition.ts

@@ -0,0 +1,14 @@
+import { type CustomNodeDefinition } from 'json-edit-react'
+import { LinkCustomComponent } from './component'
+
+export const LinkCustomNodeDefinition: CustomNodeDefinition<{
+  linkStyles?: React.CSSProperties
+  stringTruncate?: number
+}> = {
+  // Condition is a regex to match url strings
+  condition: ({ value }) => typeof value === 'string' && /^https?:\/\/.+\..+$/.test(value),
+  element: LinkCustomComponent,
+  // customNodeProps: { stringTruncate: 80 },
+  showOnView: true,
+  showOnEdit: false,
+}

custom-component-library/components/Hyperlink/index.ts

@@ -0,0 +1 @@
+export * from './definition'

custom-component-library/components/Undefined/component.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { type CustomNodeProps } from 'json-edit-react'
+
+export const UndefinedCustomComponent: React.FC<CustomNodeProps<unknown>> = () => (
+  <div style={{ fontStyle: 'italic', color: '#9b9b9b' }}>undefined</div>
+)