update

Bowen7 · Aug 5, 2024 · 1141227 · 1141227
1 parent ef32d7b
commit 1141227
Show file tree

Hide file tree

Showing 15 changed files with 341 additions and 365 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -2,5 +2,6 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu({ react: true, rules: {
   'react-refresh/only-export-components': 'off',
-  'style/brace-style': ["error", "1tbs"],
+  'style/brace-style': ['error', '1tbs'],
+  'antfu/top-level-function': 'off',
 } })
diff --git a/src/components/cell/index.tsx b/src/components/cell/index.tsx
@@ -3,6 +3,7 @@ import { Question as QuestionIcon } from '@phosphor-icons/react'
 import clsx from 'clsx'
 import type { MdnLinkKey } from '@/utils/links'
 import mdnLinks from '@/utils/links'
+import { Button } from '@/components/ui/button'
 
 interface ItemProps {
   label: string
@@ -43,9 +44,9 @@ function Cell({
           </a>
         )}
         {rightLabel && (
-          <span className="text-foreground/50 cursor-pointer text-xs" onClick={onRightLabelClick}>
+          <Button onClick={onRightLabelClick} variant="outline" size="sm" className="px-2 h-7">
             {rightLabel}
-          </span>
+          </Button>
         )}
       </div>
       <div className={className}>{children}</div>

diff --git a/src/components/language-select/index.tsx b/src/components/language-select/index.tsx
@@ -15,7 +15,7 @@ export function LanguageSelect() {
   return (
     <Select value={language} onValueChange={i18n.changeLanguage}>
       <SelectTrigger className="w-[100px] px-2 text-xs h-8">
-        <SelectValue placeholder="Select a language" className="" />
+        <SelectValue placeholder="Select a language" />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>

diff --git a/src/components/validation/index.tsx b/src/components/validation/index.tsx
@@ -1,52 +1,44 @@
 import { memo, useCallback, useState } from 'react'
-
-export type ValidatorResult = {
-  ok: true
-} | {
-  ok: false
-  error: { type: string, message: string }
-}
+import type { ZodIssue, ZodType, z } from 'zod'
 
 export type Transformer<I, O> = (value: I) => O
 
-const defaultTransformers = [(value: any) => value, (value: any) => value]
-
-interface Props<I, O = I> {
-  className?: (result: ValidatorResult) => string
+interface Props<I, O> {
+  className?: (errors: ZodIssue[]) => string
+  transformer: Transformer<I, O>
+  errorFormatter: (errors: ZodIssue[]) => string
   children: (value: O, onChange: (value: O) => void) => React.ReactNode
   value: I
   onChange: (value: I) => void
-  transformers?: [(value: I) => O, (value: O) => I]
-  validator: (value: O) => ValidatorResult
+  schema: ZodType<I, z.ZodTypeDef, O>
 }
 
 function InnerValidation<I, O>(props: Props<I, O>) {
   const {
     className,
+    transformer,
     children,
     value,
     onChange,
-    validator,
-    transformers = defaultTransformers,
+    schema,
+    errorFormatter,
   } = props
-  const [innerValue, setInnerValue] = useState(() => transformers[0](value))
-  const [result, setResult] = useState<ValidatorResult>({ ok: true })
+  const [innerValue, setInnerValue] = useState(() => transformer(value))
+  const [errors, setErrors] = useState<ZodIssue[]>([])
 
   const onValueChange = useCallback((value: O) => {
     setInnerValue(value)
-    const result = validator(value)
-    setResult(result)
-    if (result.ok) {
-      onChange(transformers[1](value))
-    } else {
-      console.error(result.error)
+    const result = schema.safeParse(value)
+    setErrors(result.error?.errors ?? [])
+    if (result.success) {
+      onChange(result.data)
     }
-  }, [setInnerValue, onChange, validator, transformers])
+  }, [setInnerValue, onChange, schema])
 
   return (
-    <div className={className ? className(result) : ''}>
+    <div className={className ? className(errors) : ''}>
       {children(innerValue as O, onValueChange)}
-      {result.ok ? null : <div className="text-red-500 text-xs">{result.error.message}</div>}
+      {errors.length > 0 ? <div className="text-red-500 text-xs">{errorFormatter(errors)}</div> : null }
     </div>
   )
 }

diff --git a/src/modules/editor/edit-tab.tsx b/src/modules/editor/edit-tab.tsx
@@ -44,64 +44,18 @@ function EditTab() {
   }, [ast, nodes])
 
   return (
-    <>
-      <div data-testid="edit-tab" className="space-y-6">
-        <Insert nodes={nodes} />
-        <Expression regex={regex} startIndex={startIndex} endIndex={endIndex} />
-        {content && (
-          <ContentEditor content={content} id={id} quantifier={quantifier} />
-        )}
-        {group && <Group group={group} />}
-        {hasQuantifier && <Quantifier quantifier={quantifier} />}
-        {lookAround && (
-          <LookAround kind={lookAround.kind} negate={lookAround.negate} />
-        )}
-      </div>
-      {/* <style jsx>
-        {`
-        .container {
-          padding: 12px;
-        }
-        .button {
-          text-align: center;
-        }
-
-        .container :global(h3) {
-          font-size: 1.15rem;
-        }
-
-        .container :global(input) {
-          font-size: 0.75rem;
-        }
-
-        .container :global(.btn-group) {
-          margin: 0;
-        }
-        .container :global(.btn-group .btn) {
-          width: 80px;
-          padding: 0;
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .container :global(.btn-group .tooltip) {
-          line-height: 0;
-        }
-
-        .container :global(.btn-dropdown button) {
-          height: calc(1.687 * 16pt);
-        }
-
-        .container :global(details) {
-          border-radius: 0 ${layout.radius} ${layout.radius} 0;
-        }
-
-        .container :global(summary) {
-          height: calc(1.687 * 16pt);
-        }
-      `}
-      </style> */}
-    </>
+    <div data-testid="edit-tab" className="space-y-6">
+      <Insert nodes={nodes} />
+      <Expression regex={regex} startIndex={startIndex} endIndex={endIndex} />
+      {content && (
+        <ContentEditor content={content} id={id} quantifier={quantifier} />
+      )}
+      {group && <Group group={group} />}
+      {hasQuantifier && <Quantifier quantifier={quantifier} />}
+      {lookAround && (
+        <LookAround kind={lookAround.kind} negate={lookAround.negate} />
+      )}
+    </div>
   )
 }
 

diff --git a/src/modules/editor/features/content/back-ref.tsx b/src/modules/editor/features/content/back-ref.tsx
@@ -3,6 +3,14 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import Cell from '@/components/cell'
 import { groupNamesAtom, updateContentAtom } from '@/atom'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 
 interface Props {
   reference: string
@@ -19,27 +27,31 @@ const BackRef: React.FC<Props> = ({ reference }) => {
     return [reference, ...groupNames]
   }, [groupNames, reference])
 
-  const handleChange = (value: string | string[]) =>
+  const onChange = (value: string | string[]) =>
     updateContent({ kind: 'backReference', ref: value as string })
+
   return (
     <Cell.Item label={t('Back Reference')}>
-      <></>
-      {/* <Select
-        placeholder={t('Choose one')}
+      <Select
         value={reference}
-        onChange={handleChange}
-        getPopupContainer={() => document.getElementById('editor-content')}
-        disableMatchWidth
+        onValueChange={onChange}
       >
-        {options.map(option => (
-          <Select.Option value={option} key={option}>
-            {t('Group')}
-            {' '}
-            #
-            {option}
-          </Select.Option>
-        ))}
-      </Select> */}
+        <SelectTrigger className="w-52">
+          <SelectValue placeholder={t('Choose one')} className="" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {options.map(option => (
+              <SelectItem value={option} key={option}>
+                {t('Group')}
+                {' '}
+                #
+                {option}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
     </Cell.Item>
   )
 }

diff --git a/src/modules/editor/features/content/index.tsx b/src/modules/editor/features/content/index.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Question as QuestionIcon } from '@phosphor-icons/react'
 import { useAtomValue, useSetAtom } from 'jotai'
+import { nanoid } from 'nanoid'
 import SimpleString from './simple-string'
 import ClassCharacter from './class-character'
 import BackRef from './back-ref'
@@ -71,7 +72,7 @@ const ContentEditor: React.FC<Prop> = ({ content, id, quantifier }) => {
       case 'ranges':
         payload = {
           kind: 'ranges',
-          ranges: [{ from: '', to: '' }],
+          ranges: [{ id: nanoid(), from: '', to: '' }],
           negate: false,
         }
         break