feat: add datetime transforms

src/Editor/index.tsx

@@ -16,7 +16,7 @@ export const Editor: FC = () => {
         loading={<></>}
         value={value}
         language="yaml"
-        onChange={(v) => setValue(v?.trim() ?? '')}
+        onChange={(v) => setValue(v ?? '')}
         options={{
           automaticLayout: true,
           lineNumbersMinChars: 3,

src/TransformGridItem/index.tsx

@@ -7,11 +7,9 @@ import clsx from "clsx";
 import { useRecoilState } from "recoil";
 import { EditorValueState } from "../GlobalStates/EditorValueState";
 import {
-  isTransformCheckboxOption,
-  isTransformIntboxOption,
-  isTransformTextboxOption,
   TransformCheckboxOption,
   TransformIntboxOption,
+  TransformRadioOption,
   TransformTextboxOption,
   WrappedTransform,
   WrappedTransformResult
@@ -71,6 +69,18 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
 
     setOptions(new Map(options))
   }
+  
+  const onRadioOptionChanged =
+    (option: TransformRadioOption) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+    
+    options.set(option.key, {
+      ...option,
+      value: event.target.value
+    })
+
+    setOptions(new Map(options))
+  }
 
   const onForwardButtonPressed = () => {
     if (result.error)
@@ -90,7 +100,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         
         <div className={style.options}>
           {[...options.values()]
-            ?.filter(isTransformCheckboxOption)
+            ?.filter((v) => v.type === 'CHECKBOX')
             .map((option, i) => (
               <label key={i} className={style.optionItem}>
                 <p>{option.label ?? option.key}:</p>
@@ -102,7 +112,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
               </label>))}
           
           {[...options.values()]
-            ?.filter(isTransformTextboxOption)
+            ?.filter((v) => v.type === 'TEXTBOX')
             .map((option, i) => (
               <label key={i} className={style.optionItem}>
                 <p>{option.label ?? option.key}:</p>
@@ -115,7 +125,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
 
               
           {[...options.values()]
-            ?.filter(isTransformIntboxOption)
+            ?.filter((v) => v.type === 'INTBOX')
             .map((option, i) => (
               <label key={i} className={style.optionItem}>
                 <p>{option.label ?? option.key}:</p>
@@ -126,6 +136,31 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                   onChange={onIntboxOptionChanged(option)}
                   type="number" />
               </label>))}
+
+              
+          {[...options.values()]
+            ?.filter((v) => v.type === 'RADIO')
+            .map((option, i) => (
+              <div
+                key={i}
+                onChange={onRadioOptionChanged(option)}
+                className={style.optionItem}>
+                <p>{option.label ?? option.key}:</p>
+
+                {option.radios.map((radio, i2) => (
+                  <label key={i2}>
+                    <p>{radio.label ?? radio.value}:</p>
+
+                    <Input
+                      min={1}
+                      name={option.key}
+                      defaultChecked={radio.value === option.value}
+                      value={radio.value}
+                      type="radio" />
+                  </label>
+                ))}
+
+              </div>))}
         </div>
       </div>
 

src/TransformGridItem/style.module.scss

@@ -30,7 +30,7 @@
       scrollbar-color: gray #323232;
       align-items: center;
 
-      .optionItem {
+      * {
         display: flex;
         gap: 6px;
       }

src/Transforms/DatetimeTransforms.ts

@@ -0,0 +1,50 @@
+import { Transform } from "./Transform";
+import { strptime } from 'strtime'
+import moment from "moment";
+
+export const DatetimeTransform: Transform = {
+  name: 'datetime',
+
+  fn: async (v, o) => {
+    const [expression, samples] = v.split('\n\n')
+    const format = o.get('f')?.value
+
+    const parsedSamples = samples
+      .split('\n')
+      .map((sample) => {
+        if (format === 'c')
+          return strptime(sample, expression.replace(/'/g, ''))
+
+        if (format === 'java')
+          return moment(sample, expression.replace(/'/g, '')).toDate()
+        
+        throw new Error('Unknown Format')
+      })
+      .map((date) => JSON.stringify({
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        date: date.getDate(),
+        hour: date.getHours(),
+        minute: date.getMinutes(),
+        second: date.getSeconds(),
+        milli: date.getMilliseconds()
+      }))
+      .join('\n')
+
+    return [
+      expression,
+      samples,
+      parsedSamples
+    ].join('\n\n')
+  },
+
+  options: [{
+    type: 'RADIO',
+    key: 'f',
+    value: 'c',
+    radios: [
+      { value: 'c' },
+      { value: 'java' }
+    ]
+  }]
+}

src/Transforms/Transform.ts

@@ -1,4 +1,5 @@
 import { Base64DecodeTransform, Base64EncodeTransform } from "./Base64Transforms"
+import { DatetimeTransform } from "./DatetimeTransforms"
 import { GzipDecompressTransform } from "./GzipTransform"
 import { JSONBeautifyTransform, JSONEscapeTransform, JSONSimplifyTransform, JSONUnescapeTransform } from "./JSONTransforms"
 import { RegexpTransform } from "./RegexpTransform"
@@ -27,17 +28,20 @@ export interface TransformIntboxOption {
   value?: number
 }
 
+export interface TransformRadioOption {
+  type: 'RADIO',
+  key: string,
+  label?: string,
+  value?: string,
+  radios: {
+    label?: string
+    value: string
+  }[]
+}
+
 export type TransformOption = 
-  TransformCheckboxOption | TransformTextboxOption | TransformIntboxOption
-
-export const isTransformCheckboxOption = (object: any): object is TransformCheckboxOption =>
-  object.type === 'CHECKBOX'
-
-export const isTransformTextboxOption = (object: any): object is TransformTextboxOption =>
-  object.type === 'TEXTBOX'
-
-export const isTransformIntboxOption = (object: any): object is TransformIntboxOption =>
-  object.type === 'INTBOX'
+  TransformCheckboxOption | TransformTextboxOption |
+  TransformIntboxOption | TransformRadioOption
 
 export interface Transform {
   name: string
@@ -77,7 +81,7 @@ export const wrapTransform = (transform: Transform): WrappedTransform => ({
 
 export const transforms: Transform[] = [
   RegexpTransform,
-  GzipDecompressTransform,
+  DatetimeTransform,
   Base64DecodeTransform,
   Base64EncodeTransform,
   URIDecodeTransform,
@@ -87,5 +91,6 @@ export const transforms: Transform[] = [
   JSONEscapeTransform,
   JSONUnescapeTransform,
   JSON2YAMLTransform,
-  YAML2JSONTransform
+  YAML2JSONTransform,
+  GzipDecompressTransform
 ]

src/vite-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="vite/client" />
+
+module 'strtime' {
+  function strptime (string, string): Date
+}