feat: expose built-in type

Author: pionxzh

docs/pages/full/index.tsx

@@ -1,3 +1,4 @@
+import type { SvgIconProps } from '@mui/material'
 import {
   AppBar,
   Box,
@@ -6,22 +7,25 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  Switch,
+  SvgIcon, Switch,
   TextField,
   Toolbar,
   Typography
 } from '@mui/material'
 import type {
+  DataType,
   JsonViewerKeyRenderer,
   JsonViewerOnChange,
   JsonViewerTheme
 } from '@textea/json-viewer'
 import {
   applyValue,
   createDataType,
-  JsonViewer
+  JsonViewer,
+  stringType
 } from '@textea/json-viewer'
 import Image from 'next/image'
+import Link from 'next/link'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -99,6 +103,7 @@ const example = {
   },
   string_number: '1234',
   timer: 0,
+  link: 'http://example.com',
   avatar,
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
   bigint: 123456789087654321n
@@ -111,6 +116,61 @@ const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
 }
 KeyRenderer.when = (props) => props.value === 114.514
 
+const imageDataType = createDataType<string>(
+  (value) => {
+    if (typeof value === 'string') {
+      try {
+        const url = new URL(value)
+        return allowedDomains.includes(url.host) && url.pathname.endsWith('.jpg')
+      } catch (_) {
+        return false
+      }
+    }
+    return false
+  },
+  (props) => {
+    return (
+      <Image
+        height={50}
+        width={50}
+        src={props.value}
+        alt={props.value}
+      />
+    )
+  }
+)
+
+const LinkIcon = (props: SvgIconProps) => (
+  // <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' strokeWidth='2' stroke='currentColor' fill='none' strokeLinecap='round' strokeLinejoin='round'>
+  <SvgIcon {...props}>
+    <path stroke='none' d='M0 0h24v24H0z' fill='none'></path>
+    <path stroke='currentcolor' d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' fill='none'></path>
+    <path stroke='currentcolor' d='M10 14l10 -10'></path>
+    <path stroke='currentcolor' d='M15 4l5 0l0 5' fill='none'></path>
+  </SvgIcon>
+)
+
+const linkType: DataType<string> = {
+  ...stringType,
+  is (value) {
+    return typeof value === 'string' && value.startsWith('http')
+  },
+  PostComponent: (props) => (
+    <Box sx={{
+      display: 'inline-block',
+      marginLeft: 1,
+      color: 'primary.main',
+      textDecoration: 'underline'
+    }}
+    >
+      <Link href={props.value}>
+        Open
+        <LinkIcon sx={{ strokeWidth: 2 }} />
+      </Link>
+    </Box>
+  )
+}
+
 const IndexPage: FC = () => {
   const [indent, setIndent] = useState(3)
   const [groupArraysAfterLength, setGroupArraysAfterLength] = useState(100)
@@ -257,29 +317,8 @@ const IndexPage: FC = () => {
         groupArraysAfterLength={groupArraysAfterLength}
         keyRenderer={KeyRenderer}
         valueTypes={[
-          createDataType(
-            (value) => {
-              if (typeof value === 'string') {
-                try {
-                  const url = new URL(value)
-                  return allowedDomains.includes(url.host) && url.pathname.endsWith('.jpg')
-                } catch (_) {
-                  return false
-                }
-              }
-              return false
-            },
-            (props) => {
-              return (
-                <Image
-                  height={50}
-                  width={50}
-                  src={props.value}
-                  alt={props.value}
-                />
-              )
-            }
-          )
+          linkType,
+          imageDataType
         ]}
         onChange={
           useCallback<JsonViewerOnChange>(

src/components/DataTypes/Boolean.tsx

@@ -0,0 +1,15 @@
+
+import type { DataType } from '../../type'
+import { createEasyType } from './createEasyType'
+
+export const booleanType: DataType<boolean> = {
+  is: (value) => typeof value === 'boolean',
+  ...createEasyType(
+    'bool',
+    ({ value }) => <>{value ? 'true' : 'false'}</>,
+    {
+      colorKey: 'base0E',
+      fromString: value => Boolean(value)
+    }
+  )
+}

src/components/DataTypes/Date.tsx

@@ -0,0 +1,23 @@
+
+import type { DataType } from '../../type'
+import { createEasyType } from './createEasyType'
+
+const displayOptions: Intl.DateTimeFormatOptions = {
+  weekday: 'short',
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+}
+
+export const dateType: DataType<Date> = {
+  is: (value) => value instanceof Date,
+  ...createEasyType(
+    'date',
+    ({ value }) => <>{value.toLocaleTimeString('en-us', displayOptions)}</>,
+    {
+      colorKey: 'base0D'
+    }
+  )
+}

src/components/DataTypes/Function.tsx

@@ -6,7 +6,7 @@ import { Box, NoSsr } from '@mui/material'
 import type { FC } from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
-import type { DataItemProps } from '../../type'
+import type { DataItemProps, DataType } from '../../type'
 import { DataTypeLabel } from '../DataTypeLabel'
 
 const functionBody = (func: Function) => {
@@ -41,7 +41,7 @@ const functionName = (func: Function) => {
 const lb = '{'
 const rb = '}'
 
-export const PreFunctionType: FC<DataItemProps<Function>> = (props) => {
+const PreFunctionType: FC<DataItemProps<Function>> = (props) => {
   return (
     <NoSsr>
       <DataTypeLabel dataType='function' />
@@ -59,7 +59,7 @@ export const PreFunctionType: FC<DataItemProps<Function>> = (props) => {
   )
 }
 
-export const PostFunctionType: FC<DataItemProps<Function>> = () => {
+const PostFunctionType: FC<DataItemProps<Function>> = () => {
   return (
     <NoSsr>
       <Box component='span' className='data-function-end'>
@@ -69,7 +69,7 @@ export const PostFunctionType: FC<DataItemProps<Function>> = () => {
   )
 }
 
-export const FunctionType: FC<DataItemProps<Function>> = (props) => {
+const FunctionType: FC<DataItemProps<Function>> = (props) => {
   const functionColor = useJsonViewerStore(store => store.colorspace.base05)
   return (
     <NoSsr>
@@ -100,3 +100,10 @@ export const FunctionType: FC<DataItemProps<Function>> = (props) => {
     </NoSsr>
   )
 }
+
+export const functionType: DataType<Function> = {
+  is: (value) => typeof value === 'function',
+  Component: FunctionType,
+  PreComponent: PreFunctionType,
+  PostComponent: PostFunctionType
+}

src/components/DataTypes/Null.tsx

@@ -0,0 +1,32 @@
+import { Box } from '@mui/material'
+
+import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import type { DataType } from '../../type'
+import { createEasyType } from './createEasyType'
+
+export const nullType: DataType<null> = {
+  is: (value) => value === null,
+  ...createEasyType(
+    'null',
+    () => {
+      const backgroundColor = useJsonViewerStore(store => store.colorspace.base02)
+      return (
+        <Box
+          sx={{
+            fontSize: '0.8rem',
+            backgroundColor,
+            fontWeight: 'bold',
+            borderRadius: '3px',
+            padding: '0.5px 2px'
+          }}
+        >
+          NULL
+        </Box>
+      )
+    },
+    {
+      colorKey: 'base08',
+      displayTypeLabel: false
+    }
+  )
+}

src/components/DataTypes/Number.tsx

@@ -0,0 +1,69 @@
+import { Box } from '@mui/material'
+
+import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import type { DataType } from '../../type'
+import { createEasyType } from './createEasyType'
+
+const isInt = (n: number) => n % 1 === 0
+
+export const nanType: DataType<number> = {
+  is: (value) => typeof value === 'number' && isNaN(value),
+  ...createEasyType(
+    'NaN',
+    () => {
+      const backgroundColor = useJsonViewerStore(store => store.colorspace.base02)
+      return (
+        <Box
+          sx={{
+            backgroundColor,
+            fontSize: '0.8rem',
+            fontWeight: 'bold',
+            borderRadius: '3px'
+          }}
+        >
+          NaN
+        </Box>
+      )
+    },
+    {
+      colorKey: 'base08',
+      displayTypeLabel: false
+    }
+  )
+}
+
+export const floatType: DataType<number> = {
+  is: (value) => typeof value === 'number' && !isInt(value),
+  ...createEasyType(
+    'float',
+    ({ value }) => <>{value}</>,
+    {
+      colorKey: 'base0B',
+      fromString: value => parseFloat(value)
+    }
+  )
+}
+
+export const intType: DataType<number> = {
+  is: (value) => typeof value === 'number' && isInt(value),
+  ...createEasyType(
+    'int',
+    ({ value }) => <>{value}</>,
+    {
+      colorKey: 'base0F',
+      fromString: value => parseInt(value)
+    }
+  )
+}
+
+export const bigIntType: DataType<bigint> = {
+  is: (value) => typeof value === 'bigint',
+  ...createEasyType(
+    'bigint',
+    ({ value }) => <>{`${value}n`}</>,
+    {
+      colorKey: 'base0F',
+      fromString: value => BigInt(value.replace(/\D/g, ''))
+    }
+  )
+}

src/components/DataTypes/Object.tsx

@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react'
 import { useTextColor } from '../../hooks/useColor'
 import { useIsCycleReference } from '../../hooks/useIsCycleReference'
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
-import type { DataItemProps } from '../../type'
+import type { DataItemProps, DataType } from '../../type'
 import { getValueSize, segmentArray } from '../../utils'
 import { DataKeyPair } from '../DataKeyPair'
 import { CircularArrowsIcon } from '../Icons'
@@ -29,7 +29,7 @@ function inspectMetadata (value: object) {
   return `${length} Items${name ? ` (${name})` : ''}`
 }
 
-export const PreObjectType: FC<DataItemProps<object>> = (props) => {
+const PreObjectType: FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
   const textColor = useTextColor()
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
@@ -77,7 +77,7 @@ export const PreObjectType: FC<DataItemProps<object>> = (props) => {
   )
 }
 
-export const PostObjectType: FC<DataItemProps<object>> = (props) => {
+const PostObjectType: FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
   const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
@@ -110,7 +110,7 @@ function getIterator (value: any): value is Iterable<unknown> {
   return typeof value?.[Symbol.iterator] === 'function'
 }
 
-export const ObjectType: FC<DataItemProps<object>> = (props) => {
+const ObjectType: FC<DataItemProps<object>> = (props) => {
   const keyColor = useTextColor()
   const borderColor = useJsonViewerStore(store => store.colorspace.base02)
   const groupArraysAfterLength = useJsonViewerStore(store => store.groupArraysAfterLength)
@@ -296,3 +296,10 @@ export const ObjectType: FC<DataItemProps<object>> = (props) => {
     </Box>
   )
 }
+
+export const objectType: DataType<object> = {
+  is: (value) => typeof value === 'object',
+  Component: ObjectType,
+  PreComponent: PreObjectType,
+  PostComponent: PostObjectType
+}