button]:rounded-none [&>button]:font-normal [&>button]:px-3 [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md', {
13 | '[&>*:not(:last-child)]:border-r-0': variant === 'outline',
14 | }, className)}
15 | />
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/cell/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Question as QuestionIcon } from '@phosphor-icons/react'
3 | import clsx from 'clsx'
4 | import type { MdnLinkKey } from '@/utils/links'
5 | import mdnLinks from '@/utils/links'
6 | import { Button } from '@/components/ui/button'
7 | import {
8 | Tooltip,
9 | TooltipContent,
10 | TooltipProvider,
11 | TooltipTrigger,
12 | } from '@/components/ui/tooltip'
13 |
14 | type ItemProps = {
15 | label: string
16 | children: React.ReactNode
17 | }
18 | function CellItem({ label, children }: ItemProps) {
19 | return (
20 |
21 |
{label}
22 | {children}
23 |
24 | )
25 | }
26 |
27 | type Props = {
28 | className?: string
29 | label: string
30 | mdnLinkKey?: MdnLinkKey
31 | rightIcon?: React.ReactNode
32 | rightTooltip?: string
33 | onRightIconClick?: () => void
34 | children: React.ReactNode
35 | }
36 | function Cell({
37 | className,
38 | label,
39 | mdnLinkKey,
40 | children,
41 | rightIcon,
42 | rightTooltip,
43 | onRightIconClick,
44 | }: Props) {
45 | return (
46 |
47 |
48 |
{label}
49 | {mdnLinkKey && (
50 |
51 |
52 |
53 | )}
54 | {rightIcon && (
55 |
56 |
57 |
58 |
61 |
62 |
63 | {rightTooltip}
64 |
65 |
66 |
67 | )}
68 |
69 |
{children}
70 |
71 | )
72 | }
73 |
74 | Cell.Item = CellItem
75 | export default Cell
76 |
--------------------------------------------------------------------------------
/src/components/header/index.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react'
2 | import { Link, NavLink } from 'react-router-dom'
3 | import clsx from 'clsx'
4 | import { useTranslation } from 'react-i18next'
5 | import { GitHubLogoIcon } from '@radix-ui/react-icons'
6 | import { LanguageSelect } from '@/components/language-select'
7 | import { ModeToggle } from '@/components/mode-toggle'
8 | import { Logo } from '@/components/logo'
9 |
10 | function navLinkClassName({ isActive }: { isActive: boolean }) {
11 | return clsx('transition-colors hover:text-foreground/80 text-sm', isActive ? 'text-foreground' : 'text-foreground/60')
12 | }
13 |
14 | const Header = memo(() => {
15 | const { t } = useTranslation()
16 | return (
17 |
18 |
19 |
20 |
21 |
22 | Regex Vis
23 |
24 |
25 |
29 | {t('Home')}
30 |
31 |
35 | {t('Samples')}
36 |
37 |
52 | )
53 | })
54 |
55 | export default Header
56 |
--------------------------------------------------------------------------------
/src/components/language-select/index.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next'
2 | import {
3 | Select,
4 | SelectContent,
5 | SelectGroup,
6 | SelectItem,
7 | SelectTrigger,
8 | SelectValue,
9 | } from '@/components/ui/select'
10 |
11 | export function LanguageSelect() {
12 | const { i18n } = useTranslation()
13 | const language = i18n.language
14 |
15 | return (
16 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/legend-item/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 |
4 | type Props = {
5 | name: string
6 | infos: {
7 | desc: string
8 | Icon: React.ReactNode
9 | }[]
10 | }
11 | const LegendItem: React.FC
= ({ name, infos }) => {
12 | const { t } = useTranslation()
13 | return (
14 |
15 |
16 | {t(name)}
17 | :
18 |
19 | {infos.map(({ Icon, desc }) => (
20 |
21 | {Icon}
22 | {t(desc)}
23 |
24 | ))}
25 |
26 | )
27 | }
28 |
29 | export default LegendItem
30 |
--------------------------------------------------------------------------------
/src/components/logo/index.tsx:
--------------------------------------------------------------------------------
1 | type Props = React.ComponentProps<'svg'>
2 |
3 | export function Logo(props: Props) {
4 | return (
5 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/mode-toggle/index.tsx:
--------------------------------------------------------------------------------
1 | import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
2 | import { useTheme } from '@/components/theme-provider'
3 |
4 | export function ModeToggle() {
5 | const { theme, setTheme } = useTheme()
6 |
7 | const onClick = () => {
8 | setTheme(theme === 'dark' ? 'light' : 'dark')
9 | }
10 |
11 | return (
12 |
13 | {theme === 'dark' ? : }
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/range-input/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Trash as TrashIcon } from '@phosphor-icons/react'
3 | import clsx from 'clsx'
4 | import { Input } from '@/components/ui/input'
5 | import { useFocus } from '@/utils/hooks/use-focus'
6 | import { useHover } from '@/utils/hooks/use-hover'
7 |
8 | export type Range = {
9 | start: string
10 | end: string
11 | }
12 |
13 | type Prop = {
14 | className?: string
15 | value: Range
16 | startPlaceholder?: string
17 | endPlaceholder?: string
18 | removable?: boolean
19 | onChange: (value: Range) => void
20 | onRemove?: () => void
21 | }
22 | export const RangeInput: React.FC = ({
23 | className,
24 | value,
25 | startPlaceholder = '',
26 | endPlaceholder = '',
27 | removable = true,
28 | onChange,
29 | onRemove,
30 | }) => {
31 | const { hovered, hoverProps } = useHover()
32 | const { focused, focusProps } = useFocus()
33 | const removeBtnVisible = hovered || focused
34 |
35 | const onStartChange = (start: string) => {
36 | onChange({ start, end: value.end })
37 | }
38 | const onEndChange = (end: string) => {
39 | onChange({ start: value.start, end })
40 | }
41 |
42 | return (
43 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/show-more/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useLocalStorage } from 'react-use'
3 | import { useTranslation } from 'react-i18next'
4 | import { CaretDown as CaretDownIcon } from '@phosphor-icons/react'
5 | import clsx from 'clsx'
6 |
7 | type Props = {
8 | id: string
9 | children: React.ReactNode
10 | }
11 | function ShowMore({ id, children }: Props) {
12 | const { t } = useTranslation()
13 | const [expanded, setExpanded] = useLocalStorage(id, false)
14 | const handleClick = () => setExpanded(!expanded)
15 | return (
16 | <>
17 | {expanded && children}
18 |
19 |
20 | {expanded ? t('show less') : t('show more')}
21 |
22 |
23 |
21 |
27 |
28 | {isPass ? : }
29 |
30 |
31 |
20 | {title && {title}}
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
27 |
28 | )
29 | })}
30 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as TogglePrimitive from '@radix-ui/react-toggle'
3 | import { type VariantProps, cva } from 'class-variance-authority'
4 |
5 | import { cn } from '@/utils'
6 |
7 | const toggleVariants = cva(
8 | 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-transparent',
13 | outline:
14 | 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
15 | },
16 | size: {
17 | default: 'h-9 px-3',
18 | sm: 'h-8 px-2',
19 | lg: 'h-10 px-3',
20 | },
21 | },
22 | defaultVariants: {
23 | variant: 'default',
24 | size: 'default',
25 | },
26 | },
27 | )
28 |
29 | const Toggle = React.forwardRef<
30 | React.ElementRef,
31 | React.ComponentPropsWithoutRef &
32 | VariantProps
33 | >(({ className, variant, size, ...props }, ref) => (
34 |
39 | ))
40 |
41 | Toggle.displayName = TogglePrimitive.Root.displayName
42 |
43 | export { Toggle, toggleVariants }
44 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
3 |
4 | import { cn } from '@/utils'
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider
7 |
8 | const Tooltip = TooltipPrimitive.Root
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |
25 | ))
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
27 |
28 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
29 |
--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | // Inspired by react-hot-toast library
2 | import * as React from 'react'
3 |
4 | import type {
5 | ToastActionElement,
6 | ToastProps,
7 | } from '@/components/ui/toast'
8 |
9 | const TOAST_LIMIT = 1
10 | const TOAST_REMOVE_DELAY = 1000000
11 |
12 | type ToasterToast = ToastProps & {
13 | id: string
14 | title?: React.ReactNode
15 | description?: React.ReactNode
16 | action?: ToastActionElement
17 | }
18 |
19 | const _actionTypes = {
20 | ADD_TOAST: 'ADD_TOAST',
21 | UPDATE_TOAST: 'UPDATE_TOAST',
22 | DISMISS_TOAST: 'DISMISS_TOAST',
23 | REMOVE_TOAST: 'REMOVE_TOAST',
24 | } as const
25 |
26 | let count = 0
27 |
28 | function genId() {
29 | count = (count + 1) % Number.MAX_SAFE_INTEGER
30 | return count.toString()
31 | }
32 |
33 | type ActionType = typeof _actionTypes
34 |
35 | type Action =
36 | | {
37 | type: ActionType['ADD_TOAST']
38 | toast: ToasterToast
39 | }
40 | | {
41 | type: ActionType['UPDATE_TOAST']
42 | toast: Partial
43 | }
44 | | {
45 | type: ActionType['DISMISS_TOAST']
46 | toastId?: ToasterToast['id']
47 | }
48 | | {
49 | type: ActionType['REMOVE_TOAST']
50 | toastId?: ToasterToast['id']
51 | }
52 |
53 | type State = {
54 | toasts: ToasterToast[]
55 | }
56 |
57 | const toastTimeouts = new Map>()
58 |
59 | function addToRemoveQueue(toastId: string) {
60 | if (toastTimeouts.has(toastId)) {
61 | return
62 | }
63 |
64 | const timeout = setTimeout(() => {
65 | toastTimeouts.delete(toastId)
66 | dispatch({
67 | type: 'REMOVE_TOAST',
68 | toastId,
69 | })
70 | }, TOAST_REMOVE_DELAY)
71 |
72 | toastTimeouts.set(toastId, timeout)
73 | }
74 |
75 | export function reducer(state: State, action: Action): State {
76 | switch (action.type) {
77 | case 'ADD_TOAST':
78 | return {
79 | ...state,
80 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
81 | }
82 |
83 | case 'UPDATE_TOAST':
84 | return {
85 | ...state,
86 | toasts: state.toasts.map(t =>
87 | t.id === action.toast.id ? { ...t, ...action.toast } : t,
88 | ),
89 | }
90 |
91 | case 'DISMISS_TOAST': {
92 | const { toastId } = action
93 |
94 | // ! Side effects ! - This could be extracted into a dismissToast() action,
95 | // but I'll keep it here for simplicity
96 | if (toastId) {
97 | addToRemoveQueue(toastId)
98 | } else {
99 | state.toasts.forEach((toast) => {
100 | addToRemoveQueue(toast.id)
101 | })
102 | }
103 |
104 | return {
105 | ...state,
106 | toasts: state.toasts.map(t =>
107 | t.id === toastId || toastId === undefined
108 | ? {
109 | ...t,
110 | open: false,
111 | }
112 | : t,
113 | ),
114 | }
115 | }
116 | case 'REMOVE_TOAST':
117 | if (action.toastId === undefined) {
118 | return {
119 | ...state,
120 | toasts: [],
121 | }
122 | }
123 | return {
124 | ...state,
125 | toasts: state.toasts.filter(t => t.id !== action.toastId),
126 | }
127 | }
128 | }
129 |
130 | const listeners: Array<(state: State) => void> = []
131 |
132 | let memoryState: State = { toasts: [] }
133 |
134 | function dispatch(action: Action) {
135 | memoryState = reducer(memoryState, action)
136 | listeners.forEach((listener) => {
137 | listener(memoryState)
138 | })
139 | }
140 |
141 | type Toast = Omit
142 |
143 | function toast({ ...props }: Toast) {
144 | const id = genId()
145 |
146 | const update = (props: ToasterToast) =>
147 | dispatch({
148 | type: 'UPDATE_TOAST',
149 | toast: { ...props, id },
150 | })
151 | const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
152 |
153 | dispatch({
154 | type: 'ADD_TOAST',
155 | toast: {
156 | ...props,
157 | id,
158 | open: true,
159 | onOpenChange: (open) => {
160 | if (!open)
161 | dismiss()
162 | },
163 | },
164 | })
165 |
166 | return {
167 | id,
168 | dismiss,
169 | update,
170 | }
171 | }
172 |
173 | function useToast() {
174 | const [state, setState] = React.useState(memoryState)
175 |
176 | React.useEffect(() => {
177 | listeners.push(setState)
178 | return () => {
179 | const index = listeners.indexOf(setState)
180 | if (index > -1) {
181 | listeners.splice(index, 1)
182 | }
183 | }
184 | }, [state])
185 |
186 | return {
187 | ...state,
188 | toast,
189 | dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
190 | }
191 | }
192 |
193 | export { useToast, toast }
194 |
--------------------------------------------------------------------------------
/src/components/validation/index.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, memo, useCallback, useMemo, useState } from 'react'
2 | import type { ZodIssue, ZodType, z } from 'zod'
3 | import { useTranslation } from 'react-i18next'
4 |
5 | export const ValidationContext = createContext<(string | number)[]>([])
6 |
7 | type Props = {
8 | className?: string
9 | children: (value: T, onChange: (value: T) => void) => React.ReactNode
10 | defaultValue: T
11 | onChange: (value: O) => void
12 | schema: ZodType
13 | }
14 |
15 | function InnerValidation(props: Props) {
16 | const {
17 | className,
18 | children,
19 | defaultValue,
20 | onChange,
21 | schema,
22 | } = props
23 | const [innerValue, setInnerValue] = useState(() => defaultValue)
24 | const [errors, setErrors] = useState([])
25 | const { t } = useTranslation()
26 |
27 | const onValueChange = useCallback((value: T) => {
28 | setInnerValue(value)
29 | const result = schema.safeParse(value)
30 | setErrors(result.error?.errors ?? [])
31 | if (result.success) {
32 | onChange(result.data)
33 | }
34 | }, [setInnerValue, onChange, schema])
35 |
36 | const message = useMemo(() => errors.length > 0 ? errors[0].message : '', [errors])
37 |
38 | const errorPaths = useMemo(() => {
39 | const paths: (string | number)[] = []
40 | errors.forEach((error) => {
41 | if (error.path.length === 0) {
42 | paths.push('')
43 | } else {
44 | paths.push(...error.path)
45 | }
46 | })
47 | return paths
48 | }, [errors])
49 |
50 | return (
51 |
52 |
53 | {children(innerValue, onValueChange)}
54 | {message &&
{t(message)}
}
55 |
48 |
49 |
50 | {content && (
51 |
52 | )}
53 | {group && }
54 | {hasQuantifier && }
55 | {lookAround && (
56 |
57 | )}
58 |
59 | )
60 | }
61 |
62 | export default EditTab
63 |
--------------------------------------------------------------------------------
/src/modules/editor/features/content/back-ref.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 | import { useAtomValue, useSetAtom } from 'jotai'
3 | import { useTranslation } from 'react-i18next'
4 | import Cell from '@/components/cell'
5 | import { groupNamesAtom, updateContentAtom } from '@/atom'
6 | import {
7 | Select,
8 | SelectContent,
9 | SelectGroup,
10 | SelectItem,
11 | SelectTrigger,
12 | SelectValue,
13 | } from '@/components/ui/select'
14 |
15 | type Props = {
16 | reference: string
17 | }
18 | const BackRef: React.FC = ({ reference }) => {
19 | const { t } = useTranslation()
20 | const groupNames = useAtomValue(groupNamesAtom)
21 | const updateContent = useSetAtom(updateContentAtom)
22 |
23 | const options = useMemo(() => {
24 | if (groupNames.includes(reference)) {
25 | return groupNames
26 | }
27 | return [reference, ...groupNames]
28 | }, [groupNames, reference])
29 |
30 | const onChange = (value: string | string[]) =>
31 | updateContent({ kind: 'backReference', ref: value as string })
32 |
33 | return (
34 |
35 |
55 |
56 | )
57 | }
58 |
59 | export default BackRef
60 |
--------------------------------------------------------------------------------
/src/modules/editor/features/content/class-character.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 | import { useSetAtom } from 'jotai'
3 | import { useTranslation } from 'react-i18next'
4 | import { z } from 'zod'
5 | import { Input } from '@/components/ui/input'
6 | import Cell from '@/components/cell'
7 | import type { CharacterClassKey } from '@/parser'
8 | import { characterClassTextMap } from '@/parser'
9 | import { updateContentAtom } from '@/atom'
10 | import {
11 | Select,
12 | SelectContent,
13 | SelectGroup,
14 | SelectItem,
15 | SelectTrigger,
16 | SelectValue,
17 | } from '@/components/ui/select'
18 | import { Validation } from '@/components/validation'
19 |
20 | const classOptions: { value: CharacterClassKey, text: string }[] = []
21 | for (const key in characterClassTextMap) {
22 | classOptions.push({
23 | value: key as CharacterClassKey,
24 | text: characterClassTextMap[key as CharacterClassKey],
25 | })
26 | }
27 |
28 | const xhhSchema = z.string().regex(/^\\x[0-9a-fA-F]{2}$/)
29 | const uhhhhSchema = z.string().regex(/^\\u[0-9a-fA-F]{4}$/)
30 |
31 | type Props = {
32 | value: string
33 | }
34 | const ClassCharacter: React.FC = ({ value }) => {
35 | const { t } = useTranslation()
36 | const updateContent = useSetAtom(updateContentAtom)
37 |
38 | const classKind = useMemo(() => {
39 | if (xhhSchema.safeParse(value).success) {
40 | return '\\xhh'
41 | } else if (uhhhhSchema.safeParse(value).success) {
42 | return '\\uhhhh'
43 | }
44 | return value
45 | }, [value])
46 |
47 | const handleSelectChange = (value: string) => {
48 | value = value as string
49 | if (value === '\\xhh') {
50 | value = '\\x00'
51 | } else if (value === '\\uhhhh') {
52 | value = '\\u0000'
53 | }
54 | updateContent({
55 | kind: 'class',
56 | value,
57 | })
58 | }
59 |
60 | const onInputChange = (value: string) =>
61 | updateContent({
62 | kind: 'class',
63 | value,
64 | })
65 |
66 | return (
67 |
68 |
69 |
87 | {classKind === '\\xhh' && (
88 |
89 | {(value: string, onChange: (value: string) => void) => (
90 |
95 | )}
96 |
97 | )}
98 | {classKind === '\\uhhhh' && (
99 |
100 | {(value: string, onChange: (value: string) => void) => (
101 |
106 | )}
107 |
108 | )}
109 |
110 |
111 | )
112 | }
113 |
114 | export default ClassCharacter
115 |
--------------------------------------------------------------------------------
/src/modules/editor/features/content/helper.ts:
--------------------------------------------------------------------------------
1 | import type { CharacterClassKey } from '@/parser'
2 | import { characterClassTextMap } from '@/parser'
3 |
4 | export const characterOptions = [
5 | {
6 | label: 'Simple string',
7 | value: 'string',
8 | },
9 | {
10 | label: 'Character class',
11 | value: 'class',
12 | },
13 | {
14 | label: 'Character range',
15 | value: 'ranges',
16 | },
17 | ]
18 | export const backRefOption = {
19 | label: 'Back reference',
20 | value: 'backReference',
21 | }
22 |
23 | export const beginningAssertionOption = {
24 | label: 'Beginning Assertion',
25 | value: 'beginningAssertion',
26 | }
27 |
28 | export const endAssertionOption = {
29 | label: 'End Assertion',
30 | value: 'endAssertion',
31 | }
32 |
33 | export const wordBoundaryAssertionOption = {
34 | label: 'Word Boundary Assertion',
35 | value: 'wordBoundaryAssertion',
36 | }
37 |
38 | const classOptions: { value: CharacterClassKey, text: string }[] = []
39 | for (const key in characterClassTextMap) {
40 | classOptions.push({
41 | value: key as CharacterClassKey,
42 | text: characterClassTextMap[key as CharacterClassKey],
43 | })
44 | }
45 |
46 | export { classOptions }
47 |
--------------------------------------------------------------------------------
/src/modules/editor/features/content/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { Question as QuestionIcon } from '@phosphor-icons/react'
4 | import { useAtomValue, useSetAtom } from 'jotai'
5 | import { nanoid } from 'nanoid'
6 | import SimpleString from './simple-string'
7 | import ClassCharacter from './class-character'
8 | import BackRef from './back-ref'
9 | import WordBoundary from './word-boundary'
10 | import {
11 | backRefOption,
12 | beginningAssertionOption,
13 | characterOptions,
14 | endAssertionOption,
15 | wordBoundaryAssertionOption,
16 | } from './helper'
17 | import Ranges from './ranges'
18 | import { astAtom, groupNamesAtom, updateContentAtom } from '@/atom'
19 | import mdnLinks, { isMdnLinkKey } from '@/utils/links'
20 | import type { AST } from '@/parser'
21 | import Cell from '@/components/cell'
22 | import {
23 | Select,
24 | SelectContent,
25 | SelectGroup,
26 | SelectItem,
27 | SelectTrigger,
28 | SelectValue,
29 | } from '@/components/ui/select'
30 |
31 | type Prop = {
32 | content: AST.Content
33 | id: string
34 | quantifier: AST.Quantifier | null
35 | }
36 | const ContentEditor: React.FC = ({ content, id, quantifier }) => {
37 | const { t } = useTranslation()
38 | const groupNames = useAtomValue(groupNamesAtom)
39 | const ast = useAtomValue(astAtom)
40 | const updateContent = useSetAtom(updateContentAtom)
41 | const { kind } = content
42 |
43 | const options = useMemo(() => {
44 | const options = [...characterOptions, wordBoundaryAssertionOption]
45 | if (groupNames.length !== 0 || kind === 'backReference') {
46 | options.push(backRefOption)
47 | }
48 | if (
49 | (ast.body.length > 0 && ast.body[0].id === id)
50 | || kind === 'beginningAssertion'
51 | ) {
52 | options.push(beginningAssertionOption)
53 | }
54 | if (
55 | (ast.body.length > 0 && ast.body[ast.body.length - 1].id === id)
56 | || kind === 'endAssertion'
57 | ) {
58 | options.push(endAssertionOption)
59 | }
60 | return options
61 | }, [groupNames, kind, ast, id])
62 |
63 | const onTypeChange = (type: string | string[]) => {
64 | let payload: AST.Content
65 | switch (type) {
66 | case 'string':
67 | payload = { kind: 'string', value: '' }
68 | break
69 | case 'class':
70 | payload = { kind: 'class', value: '' }
71 | break
72 | case 'ranges':
73 | payload = {
74 | kind: 'ranges',
75 | ranges: [{ id: nanoid(), from: '', to: '' }],
76 | negate: false,
77 | }
78 | break
79 | case 'backReference':
80 | payload = { kind: 'backReference', ref: '1' }
81 | break
82 | case 'beginningAssertion':
83 | case 'endAssertion':
84 | payload = { kind: type }
85 | break
86 | case 'wordBoundaryAssertion':
87 | payload = { kind: 'wordBoundaryAssertion', negate: false }
88 | break
89 | default:
90 | return
91 | }
92 | updateContent(payload)
93 | }
94 |
95 | return (
96 |
97 |
98 |
99 |
113 | {isMdnLinkKey(content.kind) && (
114 |
115 |
116 |
117 | )}
118 | |
135 | )
136 | }
137 |
138 | export default ContentEditor
139 |
--------------------------------------------------------------------------------
/src/modules/editor/features/content/simple-string.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { useSetAtom } from 'jotai'
4 | import { RocketIcon } from '@radix-ui/react-icons'
5 | import { Input } from '@/components/ui/input'
6 | import Cell from '@/components/cell'
7 | import type { AST } from '@/parser'
8 | import { updateContentAtom } from '@/atom'
9 | import { useToast } from '@/components/ui/use-toast'
10 | import { Alert, AlertDescription } from '@/components/ui/alert'
11 |
12 | type Props = {
13 | value: string
14 | quantifier: AST.Quantifier | null
15 | }
16 | const SimpleString: React.FC = ({ value, quantifier }) => {
17 | const { t } = useTranslation()
18 | const updateContent = useSetAtom(updateContentAtom)
19 | const { toast } = useToast()
20 |
21 | const handleChange = (value: string) => {
22 | if (value.length > 1 && quantifier) {
23 | toast({ description: 'Group selection automatically' })
24 | }
25 | updateContent({
26 | kind: 'string',
27 | value,
28 | })
29 | }
30 |
31 | return (
32 |
33 |
34 |
35 |
36 |
37 | {t('The input will be escaped automatically.')}
38 |
39 |
40 |
41 |
14 |
15 | {regex.slice(0, startIndex)}
16 | {regex.slice(startIndex, endIndex)}
17 | {regex.slice(endIndex)}
18 |
19 | |
20 | )
21 | }
22 |
23 | export default Expression
24 |
--------------------------------------------------------------------------------
/src/modules/editor/features/group/index.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next'
2 | import { useSetAtom } from 'jotai'
3 | import { SelectionSlash } from '@phosphor-icons/react'
4 | import { Input } from '@/components/ui/input'
5 | import type { AST } from '@/parser'
6 | import Cell from '@/components/cell'
7 | import { updateGroupAtom } from '@/atom'
8 | import {
9 | Select,
10 | SelectContent,
11 | SelectGroup,
12 | SelectItem,
13 | SelectTrigger,
14 | SelectValue,
15 | } from '@/components/ui/select'
16 |
17 | type GroupSelectProps = {
18 | group: AST.Group
19 | }
20 | export const groupOptions = [
21 | {
22 | value: 'capturing',
23 | label: 'Capturing group',
24 | },
25 | {
26 | value: 'nonCapturing',
27 | label: 'Non-capturing group',
28 | },
29 | {
30 | value: 'namedCapturing',
31 | label: 'Named capturing group',
32 | },
33 | ]
34 |
35 | function GroupSelect({ group }: GroupSelectProps) {
36 | const { t } = useTranslation()
37 | const updateGroup = useSetAtom(updateGroupAtom)
38 | const { kind } = group
39 |
40 | const handleGroupChange = (kind: AST.GroupKind, name = '') => {
41 | let payload: AST.Group
42 | switch (kind) {
43 | case 'capturing':
44 | payload = { kind, name: '', index: 0 }
45 | break
46 | case 'namedCapturing':
47 | if (!name) {
48 | name = 'name'
49 | }
50 | payload = { kind, name, index: 0 }
51 | break
52 | case 'nonCapturing':
53 | payload = { kind: 'nonCapturing' }
54 | break
55 | }
56 | updateGroup(payload)
57 | }
58 |
59 | const handleGroupNameChange = (value: string) =>
60 | handleGroupChange(kind, value)
61 |
62 | const onSelectChange = (value: string) =>
63 | handleGroupChange(value as AST.GroupKind)
64 |
65 | const unGroup = () => updateGroup(null)
66 |
67 | return (
68 | |
72 | )}
73 | rightTooltip={t('UnGroup')}
74 | onRightIconClick={unGroup}
75 | className="space-y-2"
76 | >
77 |
91 | {group.kind === 'namedCapturing' && (
92 |
93 | {t('Group\'s name')}
94 |
99 |
100 | )}
101 |
102 | )
103 | }
104 |
105 | export default GroupSelect
106 |
--------------------------------------------------------------------------------
/src/modules/editor/features/look-around/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { useSetAtom } from 'jotai'
4 | import { SelectionSlash } from '@phosphor-icons/react'
5 | import Cell from '@/components/cell'
6 | import { updateLookAroundAtom } from '@/atom'
7 | import {
8 | Select,
9 | SelectContent,
10 | SelectGroup,
11 | SelectItem,
12 | SelectTrigger,
13 | SelectValue,
14 | } from '@/components/ui/select'
15 | import { Checkbox } from '@/components/ui/checkbox'
16 |
17 | type Props = {
18 | kind: 'lookahead' | 'lookbehind'
19 | negate: boolean
20 | }
21 | const LookAround: React.FC = ({ kind, negate }) => {
22 | const { t } = useTranslation()
23 | const updateLookAround = useSetAtom(updateLookAroundAtom)
24 | const onKindChange = (value: string) =>
25 | updateLookAround({
26 | kind: value as 'lookahead' | 'lookbehind',
27 | negate,
28 | })
29 | const onNegateChange = (negate: boolean) => {
30 | updateLookAround({
31 | kind,
32 | negate,
33 | })
34 | }
35 | const unLookAround = () => updateLookAround(null)
36 |
37 | return (
38 | |
42 | )}
43 | rightTooltip={t('Cancel assertion')}
44 | onRightIconClick={unLookAround}
45 | >
46 |
47 |
65 |
66 |
74 |
75 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | {t('You have to select nodes first')}
121 |
122 |
123 |
124 |
125 | )
126 | }
127 |
128 | export default Editor
129 |
--------------------------------------------------------------------------------
/src/modules/editor/legend-tab.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next'
2 | import legends from './legends'
3 |
4 | function Legend() {
5 | const { t } = useTranslation()
6 | return (
7 |
8 | {/* TODO move the tip to the graph */}
9 | {/*
10 |
11 | {t('You can select nodes by dragging or clicking')}
12 |
*/}
13 | {legends.map(({ name, infos }) => (
14 |
15 |
{t(name)}
16 |
17 | {infos.map(({ Icon, desc }) => (
18 |
19 | {Icon}
20 | {t(desc)}
21 |
22 | ))}
23 |
24 |
25 | ))}
26 |
79 |
80 | {cases!.map(({ value, id }, index) => (
81 |
82 | handleChange(value, index)}
86 | onRemove={() => handleRemove(index)}
87 | />
88 |
89 | ))}
90 |
91 |
92 |
95 |
98 |
99 |
27 | {errorMsg
28 | ? (
29 |
30 |
31 | Error
32 |
33 | {errorMsg}
34 |
35 |
36 | )
37 | : (
38 | <>
39 | {ast.body.length > 0 &&
}
40 | {Selection}
41 |
42 | )}
43 |
{name}
56 |
57 | )}
58 | {quantifier && (
59 |
66 |
67 |
68 | )}
69 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/modules/graph/nodes.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import React, { useEffect, useMemo } from 'react'
3 | import { useAtomValue } from 'jotai'
4 | import ChoiceNode from './choice'
5 | import SimpleNode from './simple-node'
6 | import GroupLikeNode from './group-like'
7 | import MidConnect from './mid-connect'
8 | import { DEFAULT_SIZE } from './measure'
9 | import { useSize } from './utils'
10 | import {
11 | isPrimaryGraphAtom,
12 | nodesBoxMap,
13 | selectedIdsAtom,
14 | sizeMapAtom,
15 | } from '@/atom'
16 | import { GRAPH_NODE_MARGIN_HORIZONTAL } from '@/constants'
17 | import type * as AST from '@/parser/ast'
18 |
19 | type Props = {
20 | id: string
21 | index: number
22 | x: number
23 | y: number
24 | nodes: AST.Node[]
25 | }
26 |
27 | const Nodes = React.memo(({ id, index, x, y, nodes }: Props) => {
28 | const sizeMap = useAtomValue(sizeMapAtom)
29 | const selectedIds = useAtomValue(selectedIdsAtom)
30 | const isPrimaryGraph = useAtomValue(isPrimaryGraphAtom)
31 | const [, boxHeight] = useSize(nodes, sizeMap).box
32 |
33 | const boxes = useMemo(() => {
34 | let curX = x
35 | return nodes.map((node) => {
36 | const [nodeWidth, nodeHeight] = (sizeMap.get(node) || DEFAULT_SIZE).box
37 | const nodeX = curX
38 | const nodeY = y + (boxHeight - nodeHeight) / 2
39 | curX += nodeWidth + GRAPH_NODE_MARGIN_HORIZONTAL
40 | return {
41 | x1: nodeX,
42 | y1: nodeY,
43 | x2: nodeX + nodeWidth,
44 | y2: nodeY + nodeHeight,
45 | }
46 | })
47 | }, [boxHeight, x, y, nodes, sizeMap])
48 |
49 | const contentBoxes = useMemo(() => {
50 | let curX = x
51 | return nodes.map((node) => {
52 | const { box: boxSize, content: contentSize }
53 | = sizeMap.get(node) || DEFAULT_SIZE
54 | const nodeX = curX + (boxSize[0] - contentSize[0]) / 2
55 | const nodeY = y + (boxHeight - contentSize[1]) / 2
56 | curX += boxSize[0] + GRAPH_NODE_MARGIN_HORIZONTAL
57 | return {
58 | x1: nodeX,
59 | y1: nodeY,
60 | x2: nodeX + contentSize[0],
61 | y2: nodeY + contentSize[1],
62 | }
63 | })
64 | }, [boxHeight, x, y, nodes, sizeMap])
65 |
66 | useEffect(() => {
67 | if (isPrimaryGraph) {
68 | nodesBoxMap.set(`${id}-${index}`, contentBoxes)
69 | }
70 | return () => {
71 | nodesBoxMap.delete(`${id}-${index}`)
72 | }
73 | }, [index, id, contentBoxes, isPrimaryGraph])
74 |
75 | const startSelectedIndex = useMemo(
76 | () => nodes.findIndex(node => node.id === selectedIds[0]),
77 | [selectedIds, nodes],
78 | )
79 |
80 | const connectY = y + boxHeight / 2
81 |
82 | return (
83 | <>
84 | {nodes.map((node, index) => {
85 | const { id } = node
86 | const box = boxes[index]
87 | const selected
88 | = startSelectedIndex >= 0
89 | && index >= startSelectedIndex
90 | && index < startSelectedIndex + selectedIds.length
91 | let Node: ReactNode = null
92 | switch (node.type) {
93 | case 'choice':
94 | Node = (
95 |
101 | )
102 | break
103 | case 'group':
104 | case 'lookAroundAssertion':
105 | Node = (
106 |
112 | )
113 | break
114 | case 'root':
115 | Node = null
116 | break
117 | default:
118 | Node = (
119 |
125 | )
126 | }
127 | const Connect = index >= 1 && (
128 |
132 | )
133 | return (
134 |
135 | {Connect}
136 | {Node}
137 |
138 | )
139 | })}
140 |
141 | )
142 | })
143 | Nodes.displayName = 'Nodes'
144 |
145 | export default Nodes
146 |
--------------------------------------------------------------------------------
/src/modules/graph/quantifier.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Infinity as InfinityIcon } from '@phosphor-icons/react'
3 | import { getQuantifierText } from './utils'
4 | import type { AST } from '@/parser'
5 | import { GRAPH_ICON_SIZE } from '@/constants'
6 |
7 | type Props = {
8 | quantifier: AST.Quantifier
9 | }
10 |
11 | const QuantifierNode = React.memo((props: Props) => {
12 | const { quantifier } = props
13 |
14 | const hasInfinity = quantifier.max === Infinity
15 | const text = getQuantifierText(quantifier)
16 |
17 | return (
18 |
19 |
38 |
{text}
39 | {hasInfinity &&
}
40 |
60 |
61 |
62 |
70 | {flagShow &&
{flagStr}}
71 |
72 |
73 |
74 |
81 |
82 |
83 | {t('Copy permalink')}
84 |
85 |
86 |
87 |
88 | {regex !== '' && (
89 |
90 |
91 |
95 | {FLAGS.map(({ value, label }) => {
96 | return (
97 |
106 | )
107 | })}
108 |
109 |
110 | )}
111 |
112 |
41 |
42 | {samples.map(({ desc, label, regex }) => {
43 | const linkTo = `/?r=${encodeURIComponent(`/${regex}/`)}`
44 | return (
45 |
46 |
47 | {t(desc)}
48 | :
49 | {label}
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | )
59 | })}
60 |
61 |
= [
35 | S,
36 | Dispatch>,
37 | MutableRefObject,
38 | ]
39 |
40 | export const useCurrentState = (
41 | initialState: S | (() => S),
42 | ): CurrentStateType => {
43 | const [state, setState] = useState(() => {
44 | return typeof initialState === 'function'
45 | ? (initialState as () => S)()
46 | : initialState
47 | })
48 | const ref = useRef(initialState as S)
49 |
50 | useEffect(() => {
51 | ref.current = state
52 | }, [state])
53 |
54 | const setValue = useCallback((val: SetStateAction) => {
55 | const result
56 | = typeof val === 'function'
57 | ? (val as (prevState: S) => S)(ref.current)
58 | : val
59 | ref.current = result
60 | setState(result)
61 | }, [])
62 |
63 | return [state, setValue, ref]
64 | }
65 |
--------------------------------------------------------------------------------
/src/utils/hooks/use-debounce-change.ts:
--------------------------------------------------------------------------------
1 | import type { ChangeEvent } from 'react'
2 | import { useState } from 'react'
3 | import { useDebounceCallback } from 'usehooks-ts'
4 |
5 | export function useDebounceChange(debounced: boolean, value: string, onChange: (value: string) => void) {
6 | const [text, setText] = useState(value)
7 |
8 | const debouncedOnChange = useDebounceCallback(onChange, 300)
9 |
10 | const handleChange = (e: ChangeEvent) => {
11 | const value = e.target.value
12 | if (debounced) {
13 | setText(value)
14 | debouncedOnChange(value)
15 | } else {
16 | onChange(value)
17 | }
18 | }
19 | return {
20 | value: debounced ? text : value,
21 | onChange: handleChange,
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/hooks/use-drag-select.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import { useRef, useState } from 'react'
3 | import { useEvent } from 'react-use'
4 |
5 | function captureClick(e: MouseEvent) {
6 | e.stopPropagation()
7 | window.removeEventListener('click', captureClick, true)
8 | }
9 |
10 | type Options = {
11 | disabled?: boolean
12 | className?: string
13 | onSelect: (box: { x1: number, y1: number, x2: number, y2: number }) => void
14 | }
15 | export function useDragSelect({
16 | disabled = false,
17 | className = '',
18 | onSelect,
19 | }: Options) {
20 | const dragging = useRef(false)
21 | const moving = useRef(false)
22 | const start = useRef<[number, number]>([0, 0])
23 | const [rect, setRect] = useState({ x: 0, y: 0, width: 0, height: 0 })
24 |
25 | const handleMouseUp = () => {
26 | if (!dragging.current) {
27 | return
28 | }
29 | // should fire onMouseMove at least once
30 | if (!moving.current) {
31 | dragging.current = false
32 | return
33 | }
34 | const { x, y, width, height } = rect
35 | if (width > 5 && height > 5) {
36 | // prevent click event on node
37 | window.addEventListener('click', captureClick, true)
38 | onSelect({ x1: x, y1: y, x2: x + width, y2: y + height })
39 | }
40 | dragging.current = false
41 | moving.current = false
42 | setRect({ x: 0, y: 0, width: 0, height: 0 })
43 | }
44 |
45 | useEvent('mouseup', handleMouseUp)
46 |
47 | const bindings = {
48 | onMouseDown: (e: React.MouseEvent) => {
49 | if (disabled) {
50 | return
51 | }
52 | const { offsetX, offsetY } = e.nativeEvent
53 | dragging.current = true
54 | start.current = [offsetX, offsetY]
55 | },
56 | onMouseMove: (e: React.MouseEvent) => {
57 | if (!dragging.current) {
58 | return
59 | }
60 | moving.current = true
61 | const { offsetX, offsetY } = e.nativeEvent
62 | const x = offsetX > start.current[0] ? start.current[0] : offsetX
63 | const y = offsetY > start.current[1] ? start.current[1] : offsetY
64 | const width = Math.abs(offsetX - start.current[0])
65 | const height = Math.abs(offsetY - start.current[1])
66 | setRect({ x, y, width, height })
67 | },
68 | }
69 | const { x, y, width, height } = rect
70 | const Selection = width > 0 && height > 0 && (
71 |
80 |
81 | )
82 | return [bindings, Selection]
83 | }
84 |
--------------------------------------------------------------------------------
/src/utils/hooks/use-focus.ts:
--------------------------------------------------------------------------------
1 | import { type FocusEvent, useState } from 'react'
2 |
3 | type FocusOptions = {
4 | onFocus?: (e: FocusEvent) => void
5 | onBlur?: (e: FocusEvent) => void
6 | }
7 | export function useFocus(options: FocusOptions = {}) {
8 | const { onFocus, onBlur } = options
9 | const [focused, setFocused] = useState(false)
10 |
11 | return {
12 | focusProps: {
13 | onFocus: (e: FocusEvent) => {
14 | setFocused(true)
15 | onFocus?.(e)
16 | },
17 | onBlur: (e: FocusEvent) => {
18 | setFocused(false)
19 | onBlur?.(e)
20 | },
21 | },
22 | focused,
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/utils/hooks/use-hover.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | export function useHover() {
4 | const [hovered, setHovered] = useState(false)
5 | return {
6 | hoverProps: {
7 | onMouseEnter: () => setHovered(true),
8 | onMouseLeave: () => setHovered(false),
9 | },
10 | hovered,
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/hooks/use-latest.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react'
2 |
3 | export const useLatest = (value: T) => {
4 | const ref = useRef(value)
5 | ref.current = value
6 | return ref
7 | }
8 |
--------------------------------------------------------------------------------
/src/utils/links/index.tsx:
--------------------------------------------------------------------------------
1 | const mdnLinks = {
2 | group:
3 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges',
4 | lookAround:
5 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions#other_assertions',
6 | ranges:
7 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges',
8 | class:
9 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes',
10 | backReference:
11 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#types',
12 | wordBoundaryAssertion:
13 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions#boundary-type_assertions',
14 | quantifier:
15 | 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers',
16 | }
17 | export type MdnLinkKey = keyof typeof mdnLinks
18 |
19 | export function isMdnLinkKey(key: string): key is MdnLinkKey {
20 | return [
21 | 'group',
22 | 'lookAround',
23 | 'ranges',
24 | 'class',
25 | 'backReference',
26 | 'wordBoundaryAssertion',
27 | 'quantifier',
28 | ].includes(key)
29 | }
30 | export default mdnLinks
31 |
--------------------------------------------------------------------------------
/src/vite-envd.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss'
2 | import tailwindcssAnimatePlugin from 'tailwindcss-animate'
3 |
4 | export default {
5 | darkMode: ['class'],
6 | content: [
7 | './pages/**/*.{ts,tsx}',
8 | './components/**/*.{ts,tsx}',
9 | './app/**/*.{ts,tsx}',
10 | './src/**/*.{ts,tsx}',
11 | ],
12 | prefix: '',
13 | theme: {
14 | container: {
15 | center: true,
16 | padding: '2rem',
17 | screens: {
18 | '2xl': '1400px',
19 | },
20 | },
21 | extend: {
22 | colors: {
23 | 'border': 'hsl(var(--border))',
24 | 'input': 'hsl(var(--input))',
25 | 'ring': 'hsl(var(--ring))',
26 | 'background': 'hsl(var(--background))',
27 | 'foreground': 'hsl(var(--foreground))',
28 | 'primary': {
29 | DEFAULT: 'hsl(var(--primary))',
30 | foreground: 'hsl(var(--primary-foreground))',
31 | },
32 | 'secondary': {
33 | DEFAULT: 'hsl(var(--secondary))',
34 | foreground: 'hsl(var(--secondary-foreground))',
35 | },
36 | 'destructive': {
37 | DEFAULT: 'hsl(var(--destructive))',
38 | foreground: 'hsl(var(--destructive-foreground))',
39 | },
40 | 'muted': {
41 | DEFAULT: 'hsl(var(--muted))',
42 | foreground: 'hsl(var(--muted-foreground))',
43 | },
44 | 'accent': {
45 | DEFAULT: 'hsl(var(--accent))',
46 | foreground: 'hsl(var(--accent-foreground))',
47 | },
48 | 'popover': {
49 | DEFAULT: 'hsl(var(--popover))',
50 | foreground: 'hsl(var(--popover-foreground))',
51 | },
52 | 'card': {
53 | DEFAULT: 'hsl(var(--card))',
54 | foreground: 'hsl(var(--card-foreground))',
55 | },
56 | 'graph': 'var(--graph)',
57 | 'graph-group': 'var(--graph-group)',
58 | 'graph-bg': 'var(--graph-bg)',
59 | },
60 | borderRadius: {
61 | lg: 'var(--radius)',
62 | md: 'calc(var(--radius) - 2px)',
63 | sm: 'calc(var(--radius) - 4px)',
64 | },
65 | keyframes: {
66 | 'accordion-down': {
67 | from: { height: '0' },
68 | to: { height: 'var(--radix-accordion-content-height)' },
69 | },
70 | 'accordion-up': {
71 | from: { height: 'var(--radix-accordion-content-height)' },
72 | to: { height: '0' },
73 | },
74 | },
75 | animation: {
76 | 'accordion-down': 'accordion-down 0.2s ease-out',
77 | 'accordion-up': 'accordion-up 0.2s ease-out',
78 | },
79 | transitionProperty: {
80 | width: 'width',
81 | },
82 | },
83 | },
84 | plugins: [tailwindcssAnimatePlugin],
85 | } satisfies Config
86 |
--------------------------------------------------------------------------------
/tests/__mocks__/analytics.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | Analytics: () => null,
3 | }
4 |
--------------------------------------------------------------------------------
/tests/__mocks__/css.js:
--------------------------------------------------------------------------------
1 | module.exports = {}
2 |
--------------------------------------------------------------------------------
/tests/__mocks__/react-i18next.js:
--------------------------------------------------------------------------------
1 | const React = require("react")
2 | const reactI18next = require("react-i18next")
3 |
4 | const hasChildren = (node) =>
5 | node && (node.children || (node.props && node.props.children))
6 |
7 | const getChildren = (node) =>
8 | node && node.children ? node.children : node.props && node.props.children
9 |
10 | const renderNodes = (reactNodes) => {
11 | if (typeof reactNodes === "string") {
12 | return reactNodes
13 | }
14 |
15 | return Object.keys(reactNodes).map((key, i) => {
16 | const child = reactNodes[key]
17 | const isElement = React.isValidElement(child)
18 |
19 | if (typeof child === "string") {
20 | return child
21 | }
22 | if (hasChildren(child)) {
23 | const inner = renderNodes(getChildren(child))
24 | return React.cloneElement(child, { ...child.props, key: i }, inner)
25 | }
26 | if (typeof child === "object" && !isElement) {
27 | return Object.keys(child).reduce(
28 | (str, childKey) => `${str}${child[childKey]}`,
29 | ""
30 | )
31 | }
32 |
33 | return child
34 | })
35 | }
36 |
37 | const useMock = [(k) => k, {}]
38 | useMock.t = (k) => k
39 | useMock.i18n = {}
40 |
41 | module.exports = {
42 | // this mock makes sure any components using the translate HoC receive the t function as a prop
43 | withTranslation: () => (Component) => (props) =>
44 | k} {...props} />,
45 | Trans: ({ children }) =>
46 | Array.isArray(children) ? renderNodes(children) : renderNodes([children]),
47 | Translation: ({ children }) => children((k) => k, { i18n: {} }),
48 | useTranslation: () => useMock,
49 |
50 | // mock if needed
51 | I18nextProvider: reactI18next.I18nextProvider,
52 | initReactI18next: reactI18next.initReactI18next,
53 | setDefaults: reactI18next.setDefaults,
54 | getDefaults: reactI18next.getDefaults,
55 | setI18n: reactI18next.setI18n,
56 | getI18n: reactI18next.getI18n,
57 | }
58 |
--------------------------------------------------------------------------------
/tests/__mocks__/svgrMock.js:
--------------------------------------------------------------------------------
1 | module.exports = { ReactComponent: "icon-mock" }
2 |
--------------------------------------------------------------------------------
/tests/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { fireEvent, getByText, render, screen } from '@testing-library/react'
2 | import { act } from 'react'
3 | import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
4 | import '@testing-library/dom'
5 | import App from '../src/App'
6 |
7 | describe('app', () => {
8 | beforeEach(() => {
9 | vi.useFakeTimers()
10 | })
11 | afterEach(() => {
12 | vi.restoreAllMocks()
13 | })
14 |
15 | it('renders graph after inputting', async () => {
16 | render()
17 | expect(screen.getAllByTestId('graph').length).toBe(13)
18 |
19 | await act(async () => {
20 | const input = screen.getAllByTestId('regex-input')[0]
21 | fireEvent.change(input, { target: { value: 'abc' } })
22 | vi.advanceTimersByTime(500)
23 | })
24 |
25 | expect(screen.getAllByTestId('graph').length).toBe(14)
26 | })
27 |
28 | it('updates graph after editing', async () => {
29 | render()
30 |
31 | await act(async () => {
32 | const input = screen.getByTestId('regex-input')
33 | fireEvent.change(input, { target: { value: 'abc' } })
34 | vi.advanceTimersByTime(500)
35 |
36 | fireEvent.click(getByText(screen.getAllByTestId('graph')[0], 'abc'), {
37 | bubbles: true,
38 | })
39 | })
40 |
41 | await act(async () => {
42 | const input = screen
43 | .getByTestId('edit-tab')
44 | .querySelector('input[type=\'text\']')
45 | fireEvent.change(input!, { target: { value: 'abcd' } })
46 | vi.advanceTimersByTime(500)
47 | })
48 |
49 | expect((screen.getByTestId('regex-input') as HTMLInputElement).value).toBe(
50 | 'abcd',
51 | )
52 | expect(
53 | getByText(screen.getAllByTestId('graph')[0], 'abcd'),
54 | ).toBeInTheDocument()
55 | })
56 | })
57 |
--------------------------------------------------------------------------------
/tests/setup.ts:
--------------------------------------------------------------------------------
1 | import { afterEach } from 'vitest'
2 | import { cleanup } from '@testing-library/react'
3 | import '@testing-library/jest-dom/vitest'
4 | import 'vitest-canvas-mock'
5 |
6 | afterEach(() => {
7 | cleanup()
8 | })
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "jsx": "react-jsx",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "baseUrl": ".",
7 | "module": "esnext",
8 | "moduleResolution": "node",
9 | "paths": {
10 | "@/*": ["./src/*"],
11 | "tests/*": ["../tests/*"]
12 | },
13 | "resolveJsonModule": true,
14 | "types": ["vite/client"],
15 | "allowJs": true,
16 | "strict": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "noEmit": true,
19 | "allowSyntheticDefaultImports": true,
20 | "esModuleInterop": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "isolatedModules": true,
23 | "skipLibCheck": true
24 | },
25 | "include": ["src", "tests", "tailwind.config.ts"]
26 | }
27 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "rewrites": [{ "source": "/(.*)", "destination": "/" }]
3 | }
4 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import path from 'node:path'
3 | import { defineConfig } from 'vite'
4 | import react from '@vitejs/plugin-react-swc'
5 | import tsconfigPaths from 'vite-tsconfig-paths'
6 | import { ViteEjsPlugin } from 'vite-plugin-ejs'
7 |
8 | export default defineConfig({
9 | base: '/',
10 | plugins: [react(), tsconfigPaths(), ViteEjsPlugin()],
11 | define: {
12 | // eslint-disable-next-line node/prefer-global/process
13 | SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
14 | },
15 | resolve: {
16 | alias: {
17 | 'tailwind.config': path.resolve(__dirname, 'tailwind.config.ts'),
18 | },
19 | },
20 | optimizeDeps: {
21 | include: [
22 | 'tailwind.config.ts',
23 | ],
24 | },
25 | test: {
26 | environment: 'jsdom',
27 | globals: true,
28 | setupFiles: './tests/setup.ts',
29 | },
30 | })
31 |
--------------------------------------------------------------------------------