diff --git a/web/src/routes/__tests__/Camera.test.jsx b/web/src/routes/__tests__/Camera.test.jsx
index 5840affef..26347a2bb 100644
--- a/web/src/routes/__tests__/Camera.test.jsx
+++ b/web/src/routes/__tests__/Camera.test.jsx
@@ -1,10 +1,10 @@
import { h } from 'preact';
import * as AutoUpdatingCameraImage from '../../components/AutoUpdatingCameraImage';
-import * as Api from '../../api';
import * as Context from '../../context';
+import * as Mqtt from '../../api/mqtt';
import Camera from '../Camera';
import * as JSMpegPlayer from '../../components/JSMpegPlayer';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen, waitForElementToBeRemoved } from 'testing-library';
describe('Camera Route', () => {
let mockUsePersistence, mockSetOptions;
@@ -12,16 +12,13 @@ describe('Camera Route', () => {
beforeEach(() => {
mockSetOptions = jest.fn();
mockUsePersistence = jest.spyOn(Context, 'usePersistence').mockImplementation(() => [{}, mockSetOptions]);
- jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
- data: { cameras: { front: { name: 'front', detect: {width: 1280, height: 720}, live: {height: 720}, objects: { track: ['taco', 'cat', 'dog'] } } } },
- }));
- jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
jest.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => {
return
{searchParams.toString()}
;
});
jest.spyOn(JSMpegPlayer, 'default').mockImplementation(() => {
return
;
});
+ jest.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
});
test('reads camera feed options from persistence', async () => {
@@ -39,6 +36,8 @@ describe('Camera Route', () => {
render(
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
+
fireEvent.click(screen.queryByText('Debug'));
fireEvent.click(screen.queryByText('Show Options'));
expect(screen.queryByTestId('mock-image')).toHaveTextContent(
@@ -48,6 +47,7 @@ describe('Camera Route', () => {
test('updates camera feed options to persistence', async () => {
mockUsePersistence
+ .mockReturnValueOnce([{}, mockSetOptions])
.mockReturnValueOnce([{}, mockSetOptions])
.mockReturnValueOnce([{}, mockSetOptions])
.mockReturnValueOnce([{ bbox: true }, mockSetOptions])
@@ -55,13 +55,15 @@ describe('Camera Route', () => {
render(
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
+
fireEvent.click(screen.queryByText('Debug'));
fireEvent.click(screen.queryByText('Show Options'));
fireEvent.change(screen.queryByTestId('bbox-input'), { target: { checked: true } });
fireEvent.change(screen.queryByTestId('timestamp-input'), { target: { checked: true } });
fireEvent.click(screen.queryByText('Hide Options'));
- expect(mockUsePersistence).toHaveBeenCalledTimes(4);
+ expect(mockUsePersistence).toHaveBeenCalledTimes(5);
expect(mockSetOptions).toHaveBeenCalledTimes(2);
expect(mockSetOptions).toHaveBeenCalledWith({ bbox: true, timestamp: true });
expect(screen.queryByTestId('mock-image')).toHaveTextContent('bbox=1×tamp=1');
diff --git a/web/src/routes/__tests__/Cameras.test.jsx b/web/src/routes/__tests__/Cameras.test.jsx
index cdb0c400d..1f49f7343 100644
--- a/web/src/routes/__tests__/Cameras.test.jsx
+++ b/web/src/routes/__tests__/Cameras.test.jsx
@@ -1,30 +1,16 @@
import { h } from 'preact';
-import * as Api from '../../api';
import * as CameraImage from '../../components/CameraImage';
import * as Mqtt from '../../api/mqtt';
import Cameras from '../Cameras';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen, waitForElementToBeRemoved } from 'testing-library';
describe('Cameras Route', () => {
- let useConfigMock;
-
beforeEach(() => {
- useConfigMock = jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
- data: {
- cameras: {
- front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] }, record: { enabled: true } },
- side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] }, record: { enabled: false } },
- },
- },
- status: 'loaded',
- }));
- jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
jest.spyOn(CameraImage, 'default').mockImplementation(() =>
);
jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
});
test('shows an ActivityIndicator if not yet loaded', async () => {
- useConfigMock.mockReturnValueOnce(() => ({ status: 'loading' }));
render(
);
expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
});
@@ -32,7 +18,7 @@ describe('Cameras Route', () => {
test('shows cameras', async () => {
render(
);
- expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
expect(screen.queryByText('front')).toBeInTheDocument();
expect(screen.queryByText('front').closest('a')).toHaveAttribute('href', '/cameras/front');
@@ -44,7 +30,7 @@ describe('Cameras Route', () => {
test('shows recordings link', async () => {
render(
);
- expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
expect(screen.queryAllByText('Recordings')).toHaveLength(2);
});
@@ -65,15 +51,17 @@ describe('Cameras Route', () => {
render(
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
+
fireEvent.click(screen.getAllByLabelText('Toggle detect off')[0]);
- expect(sendDetect).toHaveBeenCalledWith('OFF');
+ expect(sendDetect).toHaveBeenCalledWith('OFF', true);
expect(sendDetect).toHaveBeenCalledTimes(1);
fireEvent.click(screen.getAllByLabelText('Toggle snapshots off')[0]);
- expect(sendSnapshots).toHaveBeenCalledWith('OFF');
+ expect(sendSnapshots).toHaveBeenCalledWith('OFF', true);
fireEvent.click(screen.getAllByLabelText('Toggle recordings on')[0]);
- expect(sendRecordings).toHaveBeenCalledWith('ON');
+ expect(sendRecordings).toHaveBeenCalledWith('ON', true);
expect(sendDetect).toHaveBeenCalledTimes(1);
expect(sendSnapshots).toHaveBeenCalledTimes(1);
diff --git a/web/src/routes/__tests__/Debug.test.jsx b/web/src/routes/__tests__/Debug.test.jsx
index e28f033c1..212d3a291 100644
--- a/web/src/routes/__tests__/Debug.test.jsx
+++ b/web/src/routes/__tests__/Debug.test.jsx
@@ -1,41 +1,19 @@
import { h } from 'preact';
-import * as Api from '../../api';
-import * as Mqtt from '../../api/mqtt';
import Debug from '../Debug';
-import { render, screen } from '@testing-library/preact';
+import { render, screen, waitForElementToBeRemoved } from 'testing-library';
describe('Debug Route', () => {
- let useStatsMock, useMqttMock;
-
- beforeEach(() => {
- jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
- data: {
- service: {
- version: '0.8.3',
- },
- cameras: {
- front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] } },
- side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] } },
- },
- mqtt: {
- stats_interva: 60,
- },
- },
- status: 'loaded',
- }));
- useStatsMock = jest.spyOn(Api, 'useStats').mockImplementation(() => ({ data: statsMock }));
- useMqttMock = jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: null } }));
- });
+ beforeEach(() => {});
test('shows an ActivityIndicator if stats are null', async () => {
- useStatsMock.mockReturnValue({ data: null });
render(
);
expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
});
test('shows stats and config', async () => {
render(
);
- expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
+
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
expect(screen.queryByTestId('detectors')).toBeInTheDocument();
expect(screen.queryByText('coral')).toBeInTheDocument();
@@ -47,32 +25,4 @@ describe('Debug Route', () => {
expect(screen.queryByText('Config')).toBeInTheDocument();
expect(screen.queryByRole('button', { name: 'Copy to Clipboard' })).toBeInTheDocument();
});
-
- test('updates the stats from mqtt', async () => {
- const { rerender } = render(
);
- expect(useMqttMock).toHaveBeenCalledWith('stats');
- useMqttMock.mockReturnValue({
- value: {
- payload: { ...statsMock, detectors: { coral: { ...statsMock.detectors.coral, inference_speed: 42.4242 } } },
- },
- });
- rerender(
);
-
- expect(screen.queryByText('42.4242')).toBeInTheDocument();
- });
});
-
-const statsMock = {
- detection_fps: 0.0,
- detectors: { coral: { detection_start: 0.0, inference_speed: 8.94, pid: 52 } },
- front: { camera_fps: 5.0, capture_pid: 64, detection_fps: 0.0, pid: 54, process_fps: 0.0, skipped_fps: 0.0 },
- side: {
- camera_fps: 6.9,
- capture_pid: 71,
- detection_fps: 0.0,
- pid: 60,
- process_fps: 0.0,
- skipped_fps: 0.0,
- },
- service: { uptime: 34812, version: '0.8.1-d376f6b' },
-};
diff --git a/web/src/routes/__tests__/Event.test.jsx b/web/src/routes/__tests__/Event.test.jsx
deleted file mode 100644
index ada5b783c..000000000
--- a/web/src/routes/__tests__/Event.test.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { h } from 'preact';
-import * as Api from '../../api';
-import Event from '../Event';
-import { render, screen } from '@testing-library/preact';
-
-describe('Event Route', () => {
- let useEventMock;
-
- beforeEach(() => {
- useEventMock = jest.spyOn(Api, 'useEvent').mockImplementation(() => ({
- data: mockEvent,
- status: 'loaded',
- }));
- jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://localhost:5000');
- });
-
- test('shows an ActivityIndicator if not yet loaded', async () => {
- useEventMock.mockReturnValueOnce(() => ({ status: 'loading' }));
- render(
);
- expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
- });
-
- test('shows cameras', async () => {
- render(
);
-
- expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
-
- expect(screen.queryByText('Clip')).toBeInTheDocument();
- expect(screen.queryByLabelText('Video Player')).toBeInTheDocument();
- expect(screen.queryByText('Best Image')).not.toBeInTheDocument();
- expect(screen.queryByText('Thumbnail')).not.toBeInTheDocument();
- });
-
- test('does not render a video if there is no clip', async () => {
- useEventMock.mockReturnValue({ data: { ...mockEvent, has_clip: false }, status: 'loaded' });
- render(
);
-
- expect(screen.queryByText('Clip')).not.toBeInTheDocument();
- expect(screen.queryByLabelText('Video Player')).not.toBeInTheDocument();
- expect(screen.queryByText('Best Image')).toBeInTheDocument();
- expect(screen.queryByText('Thumbnail')).not.toBeInTheDocument();
- });
-
- test('shows the thumbnail if no snapshot available', async () => {
- useEventMock.mockReturnValue({ data: { ...mockEvent, has_clip: false, has_snapshot: false }, status: 'loaded' });
- render(
);
-
- expect(screen.queryByText('Best Image')).not.toBeInTheDocument();
- expect(screen.queryByText('Thumbnail')).toBeInTheDocument();
- expect(screen.queryByAltText('person at 82.0% confidence')).toHaveAttribute(
- 'src',
- 'data:image/jpeg;base64,/9j/4aa...'
- );
- });
-});
-
-const mockEvent = {
- camera: 'front',
- end_time: 1613257337.841237,
- has_clip: true,
- has_snapshot: true,
- id: '1613257326.237365-83cgl2',
- label: 'person',
- start_time: 1613257326.237365,
- top_score: 0.8203125,
- zones: ['front_patio'],
- thumbnail: '/9j/4aa...',
-};
diff --git a/web/src/routes/__tests__/Events.test.jsx b/web/src/routes/__tests__/Events.test.jsx
index 9f033859d..3fef6ed85 100644
--- a/web/src/routes/__tests__/Events.test.jsx
+++ b/web/src/routes/__tests__/Events.test.jsx
@@ -1,28 +1,9 @@
import { h } from 'preact';
-import * as Api from '../../api';
-import * as Hooks from '../../hooks';
import Events from '../Events';
-import { render, screen } from '@testing-library/preact';
+import { render, screen, waitForElementToBeRemoved } from 'testing-library';
describe('Events Route', () => {
- let useEventsMock, useIntersectionMock;
-
- beforeEach(() => {
- useEventsMock = jest.spyOn(Api, 'useEvents').mockImplementation(() => ({
- data: null,
- status: 'loading',
- }));
- jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
- data: {
- cameras: {
- front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] }, zones: [] },
- side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] }, zones: [] },
- },
- },
- }));
- jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://localhost:5000');
- useIntersectionMock = jest.spyOn(Hooks, 'useIntersectionObserver').mockImplementation(() => [null, jest.fn()]);
- });
+ beforeEach(() => {});
test('shows an ActivityIndicator if not yet loaded', async () => {
render(
);
@@ -30,53 +11,10 @@ describe('Events Route', () => {
});
test('does not show ActivityIndicator after loaded', async () => {
- useEventsMock.mockReturnValue({ data: mockEvents, status: 'loaded' });
render(
);
+
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
+
expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
});
-
- test('loads more when the intersectionObserver fires', async () => {
- const setIntersectionNode = jest.fn();
- useIntersectionMock.mockReturnValue([null, setIntersectionNode]);
- useEventsMock.mockImplementation((searchString) => {
- if (searchString.includes('before=')) {
- const params = new URLSearchParams(searchString);
- const before = parseFloat(params.get('before'));
- const index = mockEvents.findIndex((el) => el.start_time === before + 0.0001);
- return { data: mockEvents.slice(index, index + 5), status: 'loaded' };
- }
-
- return { data: mockEvents.slice(0, 5), status: 'loaded' };
- });
-
- const { rerender } = render(
);
- expect(setIntersectionNode).toHaveBeenCalled();
- expect(useEventsMock).toHaveBeenCalledWith('include_thumbnails=0&limit=5&');
- expect(screen.queryAllByTestId(/event-\d+/)).toHaveLength(5);
-
- useIntersectionMock.mockReturnValue([
- {
- isIntersecting: true,
- target: { dataset: { startTime: mockEvents[4].start_time } },
- },
- setIntersectionNode,
- ]);
- rerender(
);
- expect(useEventsMock).toHaveBeenCalledWith(
- `include_thumbnails=0&limit=5&before=${mockEvents[4].start_time - 0.0001}`
- );
- expect(screen.queryAllByTestId(/event-\d+/)).toHaveLength(10);
- });
});
-
-const mockEvents = new Array(12).fill(null).map((v, i) => ({
- end_time: 1613257337 + i,
- has_clip: true,
- has_snapshot: true,
- id: i,
- label: 'person',
- start_time: 1613257326 + i,
- top_score: Math.random(),
- zones: ['front_patio'],
- thumbnail: '/9j/4aa...',
-}));
diff --git a/web/src/routes/index.js b/web/src/routes/index.js
index d9b776d87..b10ce6edb 100644
--- a/web/src/routes/index.js
+++ b/web/src/routes/index.js
@@ -1,39 +1,39 @@
-export async function getCameraMap(url, cb, props) {
+export async function getCameraMap(_url, _cb, _props) {
const module = await import('./CameraMap.jsx');
return module.default;
}
-export async function getCamera(url, cb, props) {
+export async function getCamera(_url, _cb, _props) {
const module = await import('./Camera.jsx');
return module.default;
}
-export async function getEvent(url, cb, props) {
- const module = await import('./Event.jsx');
+export async function getCameraV2(_url, _cb, _props) {
+ const module = await import('./Camera_V2.jsx');
return module.default;
}
-export async function getBirdseye(url, cb, props) {
+export async function getBirdseye(_url, _cb, _props) {
const module = await import('./Birdseye.jsx');
return module.default;
}
-export async function getEvents(url, cb, props) {
- const module = await import('./Events');
+export async function getEvents(_url, _cb, _props) {
+ const module = await import('./Events.jsx');
return module.default;
}
-export async function getRecording(url, cb, props) {
+export async function getRecording(_url, _cb, _props) {
const module = await import('./Recording.jsx');
return module.default;
}
-export async function getDebug(url, cb, props) {
+export async function getDebug(_url, _cb, _props) {
const module = await import('./Debug.jsx');
return module.default;
}
-export async function getStyleGuide(url, cb, props) {
+export async function getStyleGuide(_url, _cb, _props) {
const module = await import('./StyleGuide.jsx');
return module.default;
}
diff --git a/web/src/utils/Timeline/timelineEventUtils.ts b/web/src/utils/Timeline/timelineEventUtils.ts
new file mode 100644
index 000000000..484afbd40
--- /dev/null
+++ b/web/src/utils/Timeline/timelineEventUtils.ts
@@ -0,0 +1,74 @@
+import type { TimelineEvent } from '../../components/Timeline/TimelineEvent';
+import type { TimelineEventBlock } from '../../components/Timeline/TimelineEventBlock';
+import { epochToLong, longToDate } from '../dateUtil';
+
+export const checkEventForOverlap = (firstEvent: TimelineEvent, secondEvent: TimelineEvent) => {
+ if (secondEvent.startTime < firstEvent.endTime && secondEvent.startTime > firstEvent.startTime) {
+ return true;
+ }
+ return false;
+};
+
+export const getTimelineEventBlocksFromTimelineEvents = (events: TimelineEvent[], xOffset: number): TimelineEventBlock[] => {
+ const firstEvent = events[0];
+ const firstEventTime = longToDate(firstEvent.start_time);
+ return events
+ .map((e, index) => {
+ const startTime = longToDate(e.start_time);
+ const endTime = e.end_time ? longToDate(e.end_time) : new Date();
+ const seconds = Math.round(Math.abs(endTime.getTime() - startTime.getTime()) / 1000);
+ const positionX = Math.round(Math.abs(startTime.getTime() - firstEventTime.getTime()) / 1000 + xOffset);
+ return {
+ ...e,
+ startTime,
+ endTime,
+ width: seconds,
+ positionX,
+ index,
+ } as TimelineEventBlock;
+ })
+ .reduce((rowMap, current) => {
+ for (let i = 0; i < rowMap.length; i++) {
+ const row = rowMap[i] ?? [];
+ const lastItem = row[row.length - 1];
+ if (lastItem) {
+ const isOverlap = checkEventForOverlap(lastItem, current);
+ if (isOverlap) {
+ continue;
+ }
+ }
+ rowMap[i] = [...row, current];
+ return rowMap;
+ }
+ rowMap.push([current]);
+ return rowMap;
+ }, [] as TimelineEventBlock[][])
+ .flatMap((rows, rowPosition) => {
+ rows.forEach((eventBlock) => {
+ const OFFSET_DISTANCE_IN_PIXELS = 10;
+ eventBlock.yOffset = OFFSET_DISTANCE_IN_PIXELS * rowPosition;
+ });
+ return rows;
+ })
+ .sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
+};
+
+export const findLargestYOffsetInBlocks = (blocks: TimelineEventBlock[]): number => {
+ return blocks.reduce((largestYOffset, current) => {
+ if (current.yOffset > largestYOffset) {
+ return current.yOffset;
+ }
+ return largestYOffset;
+ }, 0);
+};
+
+export const getTimelineWidthFromBlocks = (blocks: TimelineEventBlock[], offset: number): number => {
+ const firstBlock = blocks[0];
+ if (firstBlock) {
+ const startTimeEpoch = firstBlock.startTime.getTime();
+ const endTimeEpoch = Date.now();
+ const timelineDurationLong = epochToLong(endTimeEpoch - startTimeEpoch);
+ return timelineDurationLong + offset * 2;
+ }
+ return 0;
+};
diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts
new file mode 100644
index 000000000..336fd7825
--- /dev/null
+++ b/web/src/utils/dateUtil.ts
@@ -0,0 +1,16 @@
+export const longToDate = (long: number): Date => new Date(long * 1000);
+export const epochToLong = (date: number): number => date / 1000;
+export const dateToLong = (date: Date): number => epochToLong(date.getTime());
+
+const getDateTimeYesterday = (dateTime: Date): Date => {
+ const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
+ return new Date(dateTime.getTime() - twentyFourHoursInMilliseconds);
+};
+
+const getNowYesterday = (): Date => {
+ return getDateTimeYesterday(new Date());
+};
+
+export const getNowYesterdayInLong = (): number => {
+ return dateToLong(getNowYesterday());
+};
diff --git a/web/src/utils/objectUtils.ts b/web/src/utils/objectUtils.ts
new file mode 100644
index 000000000..01aab7839
--- /dev/null
+++ b/web/src/utils/objectUtils.ts
@@ -0,0 +1 @@
+export const isNullOrUndefined = (object?: unknown): boolean => object === null || object === undefined;
\ No newline at end of file
diff --git a/web/src/utils/tailwind/twTimelineEventUtil.ts b/web/src/utils/tailwind/twTimelineEventUtil.ts
new file mode 100644
index 000000000..1735c2bd2
--- /dev/null
+++ b/web/src/utils/tailwind/twTimelineEventUtil.ts
@@ -0,0 +1,15 @@
+import type { TimelineEvent } from '../../components/Timeline/TimelineEvent';
+
+export const getColorFromTimelineEvent = (event: TimelineEvent) => {
+ const { label } = event;
+ if (label === 'car') {
+ return 'bg-red-400';
+ } else if (label === 'person') {
+ return 'bg-blue-400';
+ } else if (label === 'dog') {
+ return 'bg-green-400';
+ }
+
+ // unknown label
+ return 'bg-gray-400';
+};
\ No newline at end of file
diff --git a/web/src/utils/windowUtils.ts b/web/src/utils/windowUtils.ts
new file mode 100644
index 000000000..96a2f3a8c
--- /dev/null
+++ b/web/src/utils/windowUtils.ts
@@ -0,0 +1,3 @@
+export const convertRemToPixels = (rem: number): number => {
+ return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 1a1775327..2134071c7 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,5 +1,5 @@
module.exports = {
- purge: ['./public/**/*.html', './src/**/*.jsx'],
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
@@ -20,8 +20,5 @@ module.exports = {
none: '',
},
},
- variants: {
- extend: {},
- },
- plugins: [],
+ plugins: [require('@tailwindcss/forms')],
};
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 000000000..0a24dec18
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "preserve",
+ "jsxFactory": "h",
+ "jsxFragmentFactory": "Fragment"
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 000000000..e993792cb
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "esnext",
+ "moduleResolution": "node"
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 000000000..29b326faf
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})