102 |
103 |
104 |
105 | -
95 | {options.map((opts, index) => (
96 |
-
97 |
103 | {opts.label} 104 | 105 |
106 | ))}
107 |
14 | {children}
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/src/components/Container/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Container';
2 |
--------------------------------------------------------------------------------
/src/components/Dialog/Dialog.stories.tsx:
--------------------------------------------------------------------------------
1 | import { action } from '@storybook/addon-actions';
2 | import type { Meta, StoryObj } from '@storybook/react';
3 | import React, { useState } from 'react';
4 | import { Dialog } from './';
5 |
6 | type Component = typeof Dialog;
7 | type Story = StoryObj
48 |
49 |
50 |
56 |
57 |
58 |
49 |
50 | {title}
54 |
55 |
56 |
59 | {current} / {max}
60 |
61 |
62 |
63 |
64 |
66 |
67 |
76 |
68 |
75 | - {children}
-
17 |
-
64 |
-
87 |
12 | {header == null ? null :
15 | );
16 |
17 | List.Item = Item;
18 | List.Expandable = Expandable;
19 |
--------------------------------------------------------------------------------
/src/components/List/index.ts:
--------------------------------------------------------------------------------
1 | export * from './List';
2 |
--------------------------------------------------------------------------------
/src/components/Logo/Logo.css.ts:
--------------------------------------------------------------------------------
1 | import { style } from '@vanilla-extract/css';
2 |
3 | export const wrapper = style({
4 | display: 'inline-block',
5 | fontSize: 0,
6 | verticalAlign: 'bottom',
7 | });
8 |
--------------------------------------------------------------------------------
/src/components/Logo/Logo.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import React from 'react';
3 | import { Logo } from './';
4 |
5 | type Component = typeof Logo;
6 | type Story = StoryObj{header}
}
13 | - {children}
64 | {title} 65 |
66 |REPORT DETAIL
92 | 93 | {isFiltering && entity.allItems.length === 0 ? ( 94 | <> 95 |Not found
96 |
97 | No items found that match the text entered.
98 |
99 | Try filtering with different keywords :)
100 |
23 |
38 |
49 |
50 |
51 |
65 |
66 | );
67 | },
68 | };
69 |
70 | export const WithLongContent: Story = {
71 | render: () => (
72 |
77 | ),
78 | };
79 |
--------------------------------------------------------------------------------
/src/components/Menu/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Menu';
2 |
--------------------------------------------------------------------------------
/src/components/Notification/Notification.css.ts:
--------------------------------------------------------------------------------
1 | import { style } from '@vanilla-extract/css';
2 | import { BreakPoint, Space, tokens } from '../../styles/variables.css';
3 |
4 | export const wrapper = style({
5 | position: 'fixed',
6 | right: Space * 2,
7 | bottom: Space * 2,
8 | left: Space * 2,
9 | zIndex: tokens.depth.notification,
10 | '@media': {
11 | [`(min-width: ${BreakPoint.SMALL}px)`]: {
12 | left: '50%',
13 | right: 'auto',
14 | minWidth: 230,
15 | transform: 'translateX(-50%)',
16 | },
17 | },
18 | });
19 |
20 | export const inner = style({
21 | transitionProperty: 'opacity, transform',
22 | transitionTimingFunction: tokens.easing.standard,
23 | selectors: {
24 | '&.notification-enter': {
25 | transform: 'translateY(5px)',
26 | opacity: 0,
27 | },
28 | '&.notification-enter-active': {
29 | transitionDuration: tokens.duration.fadeIn,
30 | transform: 'translateY(0)',
31 | opacity: 1,
32 | },
33 | '&.notification-exit': {
34 | transform: 'translateY(0)',
35 | opacity: 1,
36 | },
37 | '&.notification-exit-active': {
38 | transitionDuration: tokens.duration.fadeOut,
39 | transform: 'translateY(2px)',
40 | opacity: 0,
41 | },
42 | },
43 | });
44 |
--------------------------------------------------------------------------------
/src/components/Notification/Notification.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import React, { useEffect, useState } from 'react';
3 | import { Notification } from './Notification';
4 |
5 | type Component = typeof Notification;
6 | type Story = StoryObj
18 |
35 |
19 |
20 |
28 |
32 |
33 |
34 |
29 | {show && {message} }
30 |
31 |
13 |
16 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/SearchBox/index.ts:
--------------------------------------------------------------------------------
1 | export * from './SearchBox';
2 |
--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useMedia } from '../../hooks/useMedia';
3 | import { BreakPoint } from '../../styles/variables.css';
4 | import { usePrevious } from '../../hooks/usePrevious';
5 | import { useSidebarMutators } from '../../states/sidebar';
6 | import { Desktop } from './internal/Desktop';
7 | import { Mobile } from './internal/Mobile';
8 | import type { Props } from './types';
9 |
10 | export type { Props };
11 |
12 | export const Sidebar = (props: Props) => {
13 | const { open, close } = useSidebarMutators();
14 | const isDesktop = useMedia(`(min-width: ${BreakPoint.MEDIUM}px)`);
15 | const prevIsDesktop = usePrevious(isDesktop);
16 |
17 | useEffect(() => {
18 | if (isDesktop !== prevIsDesktop) {
19 | if (isDesktop) {
20 | open();
21 | } else {
22 | close();
23 | }
24 | }
25 | }, [open, close, isDesktop, prevIsDesktop]);
26 |
27 | return isDesktop ?
88 |
98 |
89 |
91 |
97 |
8 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/Snackbar/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Snackbar';
2 |
--------------------------------------------------------------------------------
/src/components/Spacer/Spacer.css.ts:
--------------------------------------------------------------------------------
1 | import { style, styleVariants } from '@vanilla-extract/css';
2 | import { Space } from '../../styles/variables.css';
3 |
4 | const wrapperBase = style({
5 | display: 'block',
6 | });
7 |
8 | export const wrapper = styleVariants({
9 | margin: [
10 | wrapperBase,
11 | {
12 | marginTop: `calc(${Space}px * var(--spacer-x))`,
13 | },
14 | ],
15 | padding: [
16 | wrapperBase,
17 | {
18 | paddingTop: `calc(${Space}px * var(--spacer-x))`,
19 | },
20 | ],
21 | });
22 |
--------------------------------------------------------------------------------
/src/components/Spacer/Spacer.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import React from 'react';
3 | import { Spacer } from './';
4 |
5 | const Bar = () => ;
6 |
7 | type Component = typeof Spacer;
8 | type Story = StoryObj{children}
9 |
23 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/src/components/Viewer/internal/ComparisonView/ComparisonView.css.ts:
--------------------------------------------------------------------------------
1 | import { style } from '@vanilla-extract/css';
2 | import { BreakPoint, Space, tokens } from '../../../../styles/variables.css';
3 | import { OPEN_DELAY } from '../../constants';
4 |
5 | export const wrapper = style({
6 | position: 'absolute',
7 | top: 0,
8 | right: 0,
9 | bottom: 0,
10 | left: 0,
11 | zIndex: 5,
12 | });
13 |
14 | export const comparisonImage = style({
15 | position: 'absolute',
16 | top: 0,
17 | right: 0,
18 | bottom: 0,
19 | left: 0,
20 | zIndex: 1,
21 | display: 'flex',
22 | justifyContent: 'center',
23 | alignItems: 'center',
24 | overflowX: 'hidden',
25 | overflowY: 'auto',
26 | WebkitOverflowScrolling: 'touch',
27 | });
28 |
29 | export const comparisonImageInnerV = style({
30 | margin: `auto ${Space * 1}px`,
31 | width: '100%',
32 | '@media': {
33 | [`(min-width: ${BreakPoint.MEDIUM}px)`]: {
34 | marginRight: Space * 5,
35 | marginLeft: Space * 5,
36 | },
37 | },
38 | });
39 |
40 | export const comparisonImageInnerH = style({
41 | position: 'relative',
42 | margin: `${Space * 3}px auto ${Space * 17}px`,
43 | });
44 |
45 | export const comparisonMode = style({
46 | position: 'absolute',
47 | bottom: Space * 1,
48 | left: '50%',
49 | zIndex: 10,
50 | maxWidth: '100%',
51 | width: 480,
52 | padding: `0 ${Space * 1}px`,
53 | transform: 'translate(-50%, 0)',
54 | transitionProperty: 'opacity, transform',
55 | transitionTimingFunction: tokens.easing.standard,
56 | '@media': {
57 | [`(min-width: ${BreakPoint.MEDIUM}px)`]: {
58 | bottom: Space * 5,
59 | },
60 | },
61 | selectors: {
62 | '.viewer-enter &': {
63 | opacity: 0,
64 | transform: 'translate(-50%, 3px)',
65 | },
66 | '.viewer-enter-active &': {
67 | transitionDuration: tokens.duration.largeIn,
68 | transitionDelay: `${OPEN_DELAY}ms`,
69 | opacity: 1,
70 | transform: 'translate(-50%, 0)',
71 | },
72 | },
73 | });
74 |
75 | export const controlWrapper = style({
76 | position: 'absolute',
77 | right: 0,
78 | bottom: '100%',
79 | left: 0,
80 | padding: `0 ${Space * 1}px ${Space * 2}px`,
81 | });
82 |
83 | export const control = style({
84 | display: 'flex',
85 | justifyContent: 'center',
86 | alignItems: 'center',
87 | height: 40,
88 | padding: `${Space * 1}px ${Space * 4}px`,
89 | borderRadius: 20,
90 | background: tokens.color.white,
91 | boxShadow: tokens.shadow.lv2,
92 | transitionProperty: 'opacity, transform',
93 | transitionTimingFunction: tokens.easing.standard,
94 | selectors: {
95 | '.control-enter &': {
96 | opacity: 0,
97 | transform: 'translateY(3px)',
98 | },
99 | '.control-enter-active &': {
100 | transitionDuration: tokens.duration.fadeIn,
101 | opacity: 1,
102 | transform: 'translateY(0)',
103 | },
104 | '.control-exit &': {
105 | opacity: 1,
106 | transform: 'translateY(0)',
107 | },
108 | '.control-exit-active &': {
109 | transitionDuration: tokens.duration.fadeOut,
110 | opacity: 0,
111 | transform: 'translateY(1px)',
112 | },
113 | },
114 | });
115 |
116 | export const controlSlider = style({
117 | flex: '1 0 auto',
118 | padding: `0 ${Space * 2}px`,
119 | });
120 |
--------------------------------------------------------------------------------
/src/components/Viewer/internal/ComparisonView/ComparisonView.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { createRegEntity } from '../../../../mocks';
3 | import { ComparisonView } from './ComparisonView';
4 |
5 | const defaultEntity = createRegEntity({
6 | id: 'id',
7 | variant: 'changed',
8 | name: 'filename.png',
9 | diff: 'https://via.placeholder.com/700x400?text=diff',
10 | before: 'https://via.placeholder.com/700x400/FF0000/FFFFFF?text=before',
11 | after: 'https://via.placeholder.com/800x700?text=after',
12 | });
13 |
14 | const largeAfterEntity = createRegEntity({
15 | id: 'id',
16 | variant: 'changed',
17 | name: 'filename.png',
18 | diff: 'https://via.placeholder.com/700x400?text=diff',
19 | before: 'https://via.placeholder.com/800x700/FF0000/FFFFFF?text=before',
20 | after: 'https://via.placeholder.com/700x400?text=after',
21 | });
22 |
23 | type Component = typeof ComparisonView;
24 | type Story = StoryObj
24 |
55 |
31 |
38 |
39 |
47 |
54 |
23 |
57 | );
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/Viewer/internal/ComparisonView/TwoUp.css.ts:
--------------------------------------------------------------------------------
1 | import { style } from '@vanilla-extract/css';
2 | import { BreakPoint, Space } from '../../../../styles/variables.css';
3 |
4 | export const wrapper = style({
5 | display: 'grid',
6 | gridTemplateColumns: 'repeat(2, 1fr)',
7 | gridGap: Space * 1,
8 | justifyContent: 'center',
9 | alignItems: 'start',
10 | '@media': {
11 | [`(min-width: ${BreakPoint.MEDIUM}px)`]: {
12 | gridGap: Space * 3,
13 | },
14 | },
15 | });
16 |
17 | export const view = style({
18 | position: 'relative',
19 | });
20 |
--------------------------------------------------------------------------------
/src/components/Viewer/internal/ComparisonView/TwoUp.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { Matching } from '../../../../types/reg';
3 | import { Image } from '../../../Image';
4 | import { Markers } from './Markers';
5 | import * as styles from './TwoUp.css';
6 |
7 | export type Props = {
8 | before: string;
9 | after: string;
10 | matching: Matching | null;
11 | };
12 |
13 | export const TwoUp = ({ before, after, matching }: Props) => {
14 | return (
15 |
24 |
56 |
32 |
39 |
40 |
48 |
55 |
16 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/Viewer/internal/ComparisonView/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ComparisonView';
2 |
--------------------------------------------------------------------------------
/src/components/Viewer/internal/ComparisonView/useComparisonImage.ts:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useCallback, useEffect } from 'react';
2 | import debounce from 'debounce';
3 | import { Space, BreakPoint } from '../../../../styles/variables.css';
4 | import { useMedia } from '../../../../hooks/useMedia';
5 |
6 | const RESIZE_DEBOUNCE_MS = 32;
7 |
8 | const safe = (n: number) => (Number.isNaN(n) ? 0 : n);
9 |
10 | export const useComparisonImage = (before: string, after: string) => {
11 | const isDesktop = useMedia(`(min-width: ${BreakPoint.MEDIUM}px)`);
12 |
13 | // canvas
14 | const [width, setWidth] = useState(0);
15 |
16 | useEffect(() => {
17 | const updateWidth = debounce(() => {
18 | setWidth(window.innerWidth - (isDesktop ? Space * 5 : Space * 1) * 2);
19 | }, RESIZE_DEBOUNCE_MS);
20 |
21 | updateWidth();
22 |
23 | window.addEventListener('resize', updateWidth, false);
24 |
25 | return () => {
26 | window.removeEventListener('resize', updateWidth, false);
27 | };
28 | }, [isDesktop]);
29 |
30 | // images
31 | const [bLoaded, setBLoaded] = useState(false);
32 | const [aLoaded, setALoaded] = useState(false);
33 | const [bSize, setBSize] = useState({ width: 0, height: 0 });
34 | const [aSize, setASize] = useState({ width: 0, height: 0 });
35 |
36 | const bRef = useRef
17 |
20 |
21 |
22 |
25 |
8 | {children}
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/VisuallyHidden/index.ts:
--------------------------------------------------------------------------------
1 | export * from './VisuallyHidden';
2 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowDownIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const ArrowDownIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowLeftIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const ArrowLeftIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowRightIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const ArrowRightIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowUpIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const ArrowUpIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/CloseIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const CloseIcon = ({ fill, ...rest }: Props) => (
6 |
18 | );
19 |
--------------------------------------------------------------------------------
/src/components/icons/HelpIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const HelpIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/MoreIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const MoreIcon = ({ fill, ...rest }: Props) => (
6 |
11 | );
12 |
--------------------------------------------------------------------------------
/src/components/icons/SearchIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const SearchIcon = ({ fill, ...rest }: Props) => (
6 |
18 | );
19 |
--------------------------------------------------------------------------------
/src/components/icons/SignChangedIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const SignChangedIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/SignDeletedIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const SignDeletedIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/SignNewIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const SignNewIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/icons/SignPassedIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type Props = React.ComponentProps<'svg'>;
4 |
5 | export const SignPassedIcon = ({ fill, ...rest }: Props) => (
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/components/internal/BaseButton/BaseButton.css.ts:
--------------------------------------------------------------------------------
1 | import { style } from '@vanilla-extract/css';
2 | import { tokens } from '../../../styles/variables.css';
3 |
4 | export const wrapper = style({
5 | margin: 0,
6 | padding: 0,
7 | textDecoration: 'none',
8 | fontFamily: 'inherit',
9 | lineHeight: 'inherit',
10 | letterSpacing: 'inherit',
11 | transitionProperty: 'color, background, border, opacity',
12 | transitionDuration: tokens.duration.smallOut,
13 | transitionTimingFunction: tokens.easing.standard,
14 | cursor: 'pointer',
15 | ':disabled': {
16 | cursor: 'default',
17 | pointerEvents: 'none',
18 | },
19 | ':focus': {
20 | outline: 'none',
21 | },
22 | ':focus-visible': {
23 | boxShadow: tokens.state.focus,
24 | },
25 | });
26 |
--------------------------------------------------------------------------------
/src/components/internal/BaseButton/BaseButton.tsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx';
2 | import React, { forwardRef } from 'react';
3 | import type { Modify } from '../../../utils/types';
4 | import { Link } from '../../Link';
5 | import * as styles from './BaseButton.css';
6 |
7 | export type Props = Modify<
8 | React.ComponentPropsWithoutRef<'button'>,
9 | {
10 | download?: any;
11 | href?: string;
12 | hrefLang?: string;
13 | media?: string;
14 | ping?: string;
15 | rel?: string;
16 | target?: string;
17 | type?: string;
18 | referrerPolicy?: string;
19 | }
20 | >;
21 |
22 | export const BaseButton = forwardRef<
23 | HTMLButtonElement | HTMLAnchorElement,
24 | Props
25 | >(({ className, type = 'button', href, children, ...rest }, ref) => {
26 | const linkable = href != null;
27 | const Component = linkable ? Link : 'button';
28 | const props = linkable ? ({ href, ...rest } as any) : { type, ...rest };
29 |
30 | return (
31 |
20 |
46 | ),
47 | },
48 | } satisfies Meta21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel 22 | tristique risus. Aenean efficitur condimentum auctor. Mauris 23 | consectetur magna neque, sollicitudin viverra lorem semper eget. Lorem 24 | ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus 25 | convallis ante, ac interdum urna ultricies at. Nulla facilisi. Sed id 26 | turpis mi. Nulla semper imperdiet suscipit. Mauris quis malesuada 27 | risus, a efficitur justo. 28 |
29 |30 | Mauris accumsan nunc vel purus convallis luctus. Donec bibendum nulla 31 | lacus, vitae accumsan justo accumsan a. Duis ut nisi posuere, 32 | scelerisque sem nec, sagittis arcu. Sed vulputate imperdiet maximus. 33 | Praesent felis libero, consectetur non odio ac, ornare elementum 34 | lorem. Integer malesuada odio at efficitur volutpat. Sed sed volutpat 35 | ipsum. Sed eget lectus vitae risus sodales gravida vel vitae ante. 36 | Praesent semper nulla non elit mattis consectetur. Nullam pulvinar, 37 | neque vehicula malesuada ornare, enim orci posuere urna, a rutrum urna 38 | lorem eget lorem. Cras posuere faucibus turpis in fringilla. Etiam 39 | iaculis dolor ex. Morbi sollicitudin, purus vel vehicula dignissim, 40 | lectus urna euismod orci, sed porta tortor erat non ligula. Aenean ex 41 | risus, tempus facilisis sollicitudin eu, porta vitae justo. Nam 42 | tincidunt felis arcu, consectetur efficitur sapien euismod quis. 43 | Integer consequat erat id nibh maximus malesuada. 44 |
45 |
77 |
81 |
78 |
80 | {children}
79 | Outside Portal
16 | ;
70 | };
71 | }[keyof WorkerEventDataPayloadMap];
72 |
--------------------------------------------------------------------------------
/src/types/reg.ts:
--------------------------------------------------------------------------------
1 | export type RegVariant = 'passed' | 'new' | 'changed' | 'deleted';
2 |
3 | export type XIMGDiffConfig = {
4 | enabled: boolean;
5 | workerUrl?: string;
6 | };
7 |
8 | export type RegItem = {
9 | raw: string;
10 | encoded: string;
11 | };
12 |
13 | export type RegLink = {
14 | href: string;
15 | label: string;
16 | };
17 |
18 | export type RegData = {
19 | type: 'success' | 'danger';
20 | actualDir: string;
21 | expectedDir: string;
22 | diffDir: string;
23 | hasNew: boolean;
24 | hadPassed: boolean;
25 | hasFailed: boolean;
26 | hasDeleted: boolean;
27 | newItems: RegItem[];
28 | passedItems: RegItem[];
29 | failedItems: RegItem[];
30 | deletedItems: RegItem[];
31 | ximgdiffConfig?: XIMGDiffConfig;
32 | links?: RegLink[];
33 | diffImageExtension?: 'webp' | 'png';
34 | };
35 |
36 | export type RegEntity = {
37 | id: string;
38 | variant: RegVariant;
39 | name: string;
40 | diff: string;
41 | before: string;
42 | after: string;
43 | };
44 |
45 | export type RegStructualItem = {
46 | id: string;
47 | path: string;
48 | name: string;
49 | children: RegStructualItem[];
50 | };
51 |
52 | export type Rect = {
53 | width: number;
54 | height: number;
55 | x: number;
56 | y: number;
57 | };
58 |
59 | export type Size = {
60 | width: number;
61 | height: number;
62 | };
63 |
64 | export type DetectMatch = {
65 | bounding: Rect;
66 | center: Rect;
67 | diffMarkers: Rect[];
68 | };
69 |
70 | export type Matching = {
71 | images: Size[];
72 | matches: DetectMatch[][];
73 | strayingRects: Rect[][];
74 | };
75 |
--------------------------------------------------------------------------------
/src/types/store.ts:
--------------------------------------------------------------------------------
1 | import type { createStore } from 'jotai';
2 |
3 | export type Store = ReturnType