From 4f54d49367160ab34f09083650e7c2cc0129d538 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 10:51:39 +0100 Subject: [PATCH 01/10] move filters across --- .../src/lib/components/ButtonTab.svelte | 6 +-- .../components/charts/ChartTimeFilters.svelte | 38 +++++++++++++++++++ .../charts/ChartTimeFilters.test.svelte | 8 ++++ .../charts/ChartTimeFilters.test.ts | 0 packages/ui-components/src/lib/index.ts | 3 +- .../components/charts/ChartTimeFilters.svelte | 38 ------------------- .../charts/ChartTimeFilters.test.svelte | 8 ---- .../components/charts/LightweightChart.svelte | 2 +- .../components/charts/TableTimeFilters.svelte | 2 +- 9 files changed, 53 insertions(+), 52 deletions(-) rename {tauri-app => packages/ui-components}/src/lib/components/ButtonTab.svelte (51%) create mode 100644 packages/ui-components/src/lib/components/charts/ChartTimeFilters.svelte create mode 100644 packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte rename {tauri-app => packages/ui-components}/src/lib/components/charts/ChartTimeFilters.test.ts (100%) delete mode 100644 tauri-app/src/lib/components/charts/ChartTimeFilters.svelte delete mode 100644 tauri-app/src/lib/components/charts/ChartTimeFilters.test.svelte diff --git a/tauri-app/src/lib/components/ButtonTab.svelte b/packages/ui-components/src/lib/components/ButtonTab.svelte similarity index 51% rename from tauri-app/src/lib/components/ButtonTab.svelte rename to packages/ui-components/src/lib/components/ButtonTab.svelte index 023b2bc32..7b45e11b1 100644 --- a/tauri-app/src/lib/components/ButtonTab.svelte +++ b/packages/ui-components/src/lib/components/ButtonTab.svelte @@ -1,9 +1,9 @@ diff --git a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.svelte b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.svelte new file mode 100644 index 000000000..16346b545 --- /dev/null +++ b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.svelte @@ -0,0 +1,38 @@ + + + + (timeDelta = TIME_DELTA_1_YEAR)} + active={timeDelta === TIME_DELTA_1_YEAR} + size="xs" + class="px-2 py-1">1 Year + (timeDelta = TIME_DELTA_30_DAYS)} + active={timeDelta === TIME_DELTA_30_DAYS} + size="xs" + class="px-2 py-1">30 Days + (timeDelta = TIME_DELTA_7_DAYS)} + active={timeDelta === TIME_DELTA_7_DAYS} + size="xs" + class="px-2 py-1">7 Days + (timeDelta = TIME_DELTA_24_HOURS)} + active={timeDelta === TIME_DELTA_24_HOURS} + size="xs" + class="px-2 py-1">24 Hours + diff --git a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte new file mode 100644 index 000000000..ae4d07f66 --- /dev/null +++ b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte @@ -0,0 +1,8 @@ + + + diff --git a/tauri-app/src/lib/components/charts/ChartTimeFilters.test.ts b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts similarity index 100% rename from tauri-app/src/lib/components/charts/ChartTimeFilters.test.ts rename to packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts index b7b30ad10..b6f9829b6 100644 --- a/packages/ui-components/src/lib/index.ts +++ b/packages/ui-components/src/lib/index.ts @@ -17,7 +17,8 @@ export { default as VaultsListTable } from './components/tables/VaultsListTable. export { default as PageHeader } from './components/PageHeader.svelte'; export { default as BadgeActive } from './components/BadgeActive.svelte'; export { default as ButtonVaultLink } from './components/ButtonVaultLink.svelte'; - +export { default as ButtonTab } from './components/ButtonTab.svelte'; +export { default as ChartTimeFilters } from './components/charts/ChartTimeFilters.svelte'; //Types export type { AppStoresInterface } from './types/appStores.ts'; export type { ConfigSource, OrderbookConfigSource, OrderbookRef } from './typeshare/config'; diff --git a/tauri-app/src/lib/components/charts/ChartTimeFilters.svelte b/tauri-app/src/lib/components/charts/ChartTimeFilters.svelte deleted file mode 100644 index bf111800c..000000000 --- a/tauri-app/src/lib/components/charts/ChartTimeFilters.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - - - (timeDelta = TIME_DELTA_1_YEAR)} - active={timeDelta === TIME_DELTA_1_YEAR} - size="xs" - class="px-2 py-1">1 Year - (timeDelta = TIME_DELTA_30_DAYS)} - active={timeDelta === TIME_DELTA_30_DAYS} - size="xs" - class="px-2 py-1">30 Days - (timeDelta = TIME_DELTA_7_DAYS)} - active={timeDelta === TIME_DELTA_7_DAYS} - size="xs" - class="px-2 py-1">7 Days - (timeDelta = TIME_DELTA_24_HOURS)} - active={timeDelta === TIME_DELTA_24_HOURS} - size="xs" - class="px-2 py-1">24 Hours - diff --git a/tauri-app/src/lib/components/charts/ChartTimeFilters.test.svelte b/tauri-app/src/lib/components/charts/ChartTimeFilters.test.svelte deleted file mode 100644 index 7536aeb75..000000000 --- a/tauri-app/src/lib/components/charts/ChartTimeFilters.test.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/tauri-app/src/lib/components/charts/LightweightChart.svelte b/tauri-app/src/lib/components/charts/LightweightChart.svelte index a2082bf63..b6341bc5d 100644 --- a/tauri-app/src/lib/components/charts/LightweightChart.svelte +++ b/tauri-app/src/lib/components/charts/LightweightChart.svelte @@ -28,7 +28,7 @@ type SeriesOptionsMap, } from 'lightweight-charts'; import { onDestroy, onMount } from 'svelte'; - import ChartTimeFilters from './ChartTimeFilters.svelte'; + import { ChartTimeFilters } from '@rainlanguage/ui-components'; export let data: { value: number; time: UTCTimestamp; color?: string }[] = []; export let loading = false; diff --git a/tauri-app/src/lib/components/charts/TableTimeFilters.svelte b/tauri-app/src/lib/components/charts/TableTimeFilters.svelte index 8439f7355..3b8ff5fcb 100644 --- a/tauri-app/src/lib/components/charts/TableTimeFilters.svelte +++ b/tauri-app/src/lib/components/charts/TableTimeFilters.svelte @@ -1,5 +1,5 @@ diff --git a/packages/ui-components/src/lib/__mocks__/MockComponent.ts b/packages/ui-components/src/lib/__mocks__/MockComponent.ts new file mode 100644 index 000000000..eb2e74c0d --- /dev/null +++ b/packages/ui-components/src/lib/__mocks__/MockComponent.ts @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export const props = writable(); diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte new file mode 100644 index 000000000..fe651f73e --- /dev/null +++ b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte @@ -0,0 +1,137 @@ + + +
+
+
+ {#if title !== undefined} +
{title}
+ {/if} +
+ +
+ {#if loading} + + {/if} + {#if data.length > 0} + + {/if} +
+
+
+ {#if data.length === 0 && !loading} +
+ {emptyMessage} +
+ {:else} +
+ {/if} +
+
diff --git a/tauri-app/src/lib/components/charts/LightweightChart.test.ts b/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts similarity index 98% rename from tauri-app/src/lib/components/charts/LightweightChart.test.ts rename to packages/ui-components/src/lib/components/charts/LightweightChart.test.ts index 035fa6a44..b7ca6705a 100644 --- a/tauri-app/src/lib/components/charts/LightweightChart.test.ts +++ b/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts @@ -1,6 +1,6 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/svelte'; import { test, vi } from 'vitest'; -import { expect } from '$lib/test/matchers'; +import { expect } from '../../test/matchers'; import LightweightChart from './LightweightChart.svelte'; import { type IChartApi, type UTCTimestamp } from 'lightweight-charts'; @@ -23,7 +23,7 @@ vi.mock('lightweight-charts', async (importOriginal) => ({ })), })); -vi.mock('$lib/stores/darkMode', async (importOriginal) => { +vi.mock('../../stores/darkMode', async (importOriginal) => { const { readable } = await import('svelte/store'); return { ...((await importOriginal()) as object), diff --git a/tauri-app/src/lib/components/charts/TanstackLightweightChartLine.svelte b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte similarity index 93% rename from tauri-app/src/lib/components/charts/TanstackLightweightChartLine.svelte rename to packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte index bfe735804..8e15e0168 100644 --- a/tauri-app/src/lib/components/charts/TanstackLightweightChartLine.svelte +++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte @@ -1,5 +1,5 @@ - -
-
-
- {#if title !== undefined} -
{title}
- {/if} -
- -
- {#if loading} - - {/if} - {#if data.length > 0} - - {/if} -
-
-
- {#if data.length === 0 && !loading} -
- {emptyMessage} -
- {:else} -
- {/if} -
-
diff --git a/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte b/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte index 84c318f2d..40c2848cf 100644 --- a/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte +++ b/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte @@ -1,5 +1,5 @@ chart.addHistogramSeries()} {...$$props} /> diff --git a/tauri-app/src/lib/components/charts/LightweightChartLine.svelte b/tauri-app/src/lib/components/charts/LightweightChartLine.svelte index 312030f6f..928df179d 100644 --- a/tauri-app/src/lib/components/charts/LightweightChartLine.svelte +++ b/tauri-app/src/lib/components/charts/LightweightChartLine.svelte @@ -1,5 +1,5 @@ chart.addLineSeries({ lineWidth: 1 })} {...$$props} /> diff --git a/tauri-app/src/lib/components/charts/OrderTradesChart.svelte b/tauri-app/src/lib/components/charts/OrderTradesChart.svelte index e55dd7cc9..fa3f37d66 100644 --- a/tauri-app/src/lib/components/charts/OrderTradesChart.svelte +++ b/tauri-app/src/lib/components/charts/OrderTradesChart.svelte @@ -3,7 +3,7 @@ import { QKEY_ORDER_TRADES_LIST } from '@rainlanguage/ui-components'; import { createQuery } from '@tanstack/svelte-query'; import { subgraphUrl } from '$lib/stores/settings'; - import TanstackLightweightChartLine from './TanstackLightweightChartLine.svelte'; + import { TanstackLightweightChartLine } from '@rainlanguage/ui-components'; export let id: string; diff --git a/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte b/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte index 6ccbb1900..4ad737743 100644 --- a/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte +++ b/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte @@ -5,7 +5,7 @@ import { createQuery } from '@tanstack/svelte-query'; import { vaultBalanceChangesList } from '$lib/queries/vaultBalanceChangesList'; import { subgraphUrl } from '$lib/stores/settings'; - import TanstackLightweightChartLine from './TanstackLightweightChartLine.svelte'; + import { TanstackLightweightChartLine } from '@rainlanguage/ui-components'; import { QKEY_VAULT_CHANGES } from '@rainlanguage/ui-components'; export let vault: Vault; From 3dda2e95d2e9b68730de66518d3811e4da4a0cdd Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 12:41:58 +0100 Subject: [PATCH 03/10] fix formatting --- .../charts/ChartTimeFilters.test.ts | 58 +-- .../charts/LightweightChart.test.ts | 466 +++++++++--------- .../TanstackLightweightChartLine.svelte | 40 +- .../TanstackLightweightChartLine.test.ts | 179 +++---- 4 files changed, 372 insertions(+), 371 deletions(-) diff --git a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts index 9efecbe92..b3babec7c 100644 --- a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts +++ b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts @@ -9,59 +9,59 @@ const TIME_DELTA_30_DAYS = TIME_DELTA_24_HOURS * 30; const TIME_DELTA_1_YEAR = TIME_DELTA_24_HOURS * 365; test('initial timeDelta is set to 1 year', async () => { - const timeDeltaStore = writable(TIME_DELTA_1_YEAR); + const timeDeltaStore = writable(TIME_DELTA_1_YEAR); - render(ChartTimeFiltersTest, { timeDeltaStore }); + render(ChartTimeFiltersTest, { timeDeltaStore }); - const yearButton = screen.getByText('1 Year'); - expect(yearButton).toBeDisabled(); - expect(get(timeDeltaStore)).toBe(TIME_DELTA_1_YEAR); + const yearButton = screen.getByText('1 Year'); + expect(yearButton).toBeDisabled(); + expect(get(timeDeltaStore)).toBe(TIME_DELTA_1_YEAR); }); test('clicking 30 Days button updates timeDelta', async () => { - const timeDeltaStore = writable(TIME_DELTA_1_YEAR); + const timeDeltaStore = writable(TIME_DELTA_1_YEAR); - render(ChartTimeFiltersTest, { timeDeltaStore }); + render(ChartTimeFiltersTest, { timeDeltaStore }); - const thirtyDaysButton = screen.getByText('30 Days'); - await fireEvent.click(thirtyDaysButton); + const thirtyDaysButton = screen.getByText('30 Days'); + await fireEvent.click(thirtyDaysButton); - expect(thirtyDaysButton).toBeDisabled(); - expect(get(timeDeltaStore)).toBe(TIME_DELTA_30_DAYS); + expect(thirtyDaysButton).toBeDisabled(); + expect(get(timeDeltaStore)).toBe(TIME_DELTA_30_DAYS); }); test('clicking 7 Days button updates timeDelta', async () => { - const timeDeltaStore = writable(TIME_DELTA_1_YEAR); + const timeDeltaStore = writable(TIME_DELTA_1_YEAR); - render(ChartTimeFiltersTest, { timeDeltaStore }); + render(ChartTimeFiltersTest, { timeDeltaStore }); - const sevenDaysButton = screen.getByText('7 Days'); - await fireEvent.click(sevenDaysButton); + const sevenDaysButton = screen.getByText('7 Days'); + await fireEvent.click(sevenDaysButton); - expect(sevenDaysButton).toBeDisabled(); - expect(get(timeDeltaStore)).toBe(TIME_DELTA_7_DAYS); + expect(sevenDaysButton).toBeDisabled(); + expect(get(timeDeltaStore)).toBe(TIME_DELTA_7_DAYS); }); test('clicking 24 Hours button updates timeDelta', async () => { - const timeDeltaStore = writable(TIME_DELTA_1_YEAR); + const timeDeltaStore = writable(TIME_DELTA_1_YEAR); - render(ChartTimeFiltersTest, { timeDeltaStore }); + render(ChartTimeFiltersTest, { timeDeltaStore }); - const twentyFourHoursButton = screen.getByText('24 Hours'); - await fireEvent.click(twentyFourHoursButton); + const twentyFourHoursButton = screen.getByText('24 Hours'); + await fireEvent.click(twentyFourHoursButton); - expect(twentyFourHoursButton).toBeDisabled(); - expect(get(timeDeltaStore)).toBe(TIME_DELTA_24_HOURS); + expect(twentyFourHoursButton).toBeDisabled(); + expect(get(timeDeltaStore)).toBe(TIME_DELTA_24_HOURS); }); test('clicking 1 Year button updates timeDelta', async () => { - const timeDeltaStore = writable(TIME_DELTA_30_DAYS); + const timeDeltaStore = writable(TIME_DELTA_30_DAYS); - render(ChartTimeFiltersTest, { timeDeltaStore }); + render(ChartTimeFiltersTest, { timeDeltaStore }); - const yearButton = screen.getByText('1 Year'); - await fireEvent.click(yearButton); + const yearButton = screen.getByText('1 Year'); + await fireEvent.click(yearButton); - expect(yearButton).toBeDisabled(); - expect(get(timeDeltaStore)).toBe(TIME_DELTA_1_YEAR); + expect(yearButton).toBeDisabled(); + expect(get(timeDeltaStore)).toBe(TIME_DELTA_1_YEAR); }); diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts b/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts index b7ca6705a..9c9f0a2f0 100644 --- a/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts +++ b/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts @@ -10,261 +10,261 @@ const setVisibleRangeMock = vi.fn(); const removeMock = vi.fn(); vi.mock('lightweight-charts', async (importOriginal) => ({ - ...((await importOriginal()) as object), - createChart: vi.fn(() => ({ - addLineSeries: vi.fn(() => ({ - setData: setDataMock, - })), - remove: removeMock, - applyOptions: applyOptionsMock, - timeScale: vi.fn(() => ({ - setVisibleRange: setVisibleRangeMock, - })), - })), + ...((await importOriginal()) as object), + createChart: vi.fn(() => ({ + addLineSeries: vi.fn(() => ({ + setData: setDataMock + })), + remove: removeMock, + applyOptions: applyOptionsMock, + timeScale: vi.fn(() => ({ + setVisibleRange: setVisibleRangeMock + })) + })) })); vi.mock('../../stores/darkMode', async (importOriginal) => { - const { readable } = await import('svelte/store'); - return { - ...((await importOriginal()) as object), - lightweightChartsTheme: readable({ test: 'test' }), - }; + const { readable } = await import('svelte/store'); + return { + ...((await importOriginal()) as object), + lightweightChartsTheme: readable({ test: 'test' }) + }; }); test('renders without data correctly', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - let loading = true; - const priceSymbol = '$'; - const createSeries = (chart: IChartApi) => chart.addLineSeries(); - - const { component } = render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries, - }); - - await waitFor(() => { - expect(screen.getByTestId('lightweightChartTitle')).toHaveTextContent(title); - expect(screen.getByTestId('lightweightChartSpinner')).toBeInTheDocument(); - }); - - loading = false; - - await act(() => component.$set({ loading: false })); - - await waitFor(() => { - expect(screen.getByTestId('lightweightChartEmptyMessage')).toHaveTextContent(emptyMessage); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + let loading = true; + const priceSymbol = '$'; + const createSeries = (chart: IChartApi) => chart.addLineSeries(); + + const { component } = render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries + }); + + await waitFor(() => { + expect(screen.getByTestId('lightweightChartTitle')).toHaveTextContent(title); + expect(screen.getByTestId('lightweightChartSpinner')).toBeInTheDocument(); + }); + + loading = false; + + await act(() => component.$set({ loading: false })); + + await waitFor(() => { + expect(screen.getByTestId('lightweightChartEmptyMessage')).toHaveTextContent(emptyMessage); + }); }); test('renders with data correctly', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - const loading = true; - const priceSymbol = '$'; - - const createSeries = (chart: IChartApi) => chart.addLineSeries(); - - const data: { value: number; time: UTCTimestamp; color?: string }[] = [ - { - value: 10, - time: 1529899200 as UTCTimestamp, - }, - { - value: 20, - time: 1529899300 as UTCTimestamp, - }, - { - value: 5, - time: 1529899500 as UTCTimestamp, - }, - ]; - - render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries, - data, - }); - - await waitFor(() => { - expect(screen.getByTestId('lightweightChartTitle')).toHaveTextContent(title); - expect(screen.getByTestId('lightweightChartSpinner')).toBeInTheDocument(); - expect(screen.getByTestId('lightweightChartElement')).toBeInTheDocument(); - expect(screen.queryByTestId('lightweightChartYearButtons')).toBeInTheDocument(); - - expect(setDataMock).toHaveBeenCalledWith(data); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + const loading = true; + const priceSymbol = '$'; + + const createSeries = (chart: IChartApi) => chart.addLineSeries(); + + const data: { value: number; time: UTCTimestamp; color?: string }[] = [ + { + value: 10, + time: 1529899200 as UTCTimestamp + }, + { + value: 20, + time: 1529899300 as UTCTimestamp + }, + { + value: 5, + time: 1529899500 as UTCTimestamp + } + ]; + + render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries, + data + }); + + await waitFor(() => { + expect(screen.getByTestId('lightweightChartTitle')).toHaveTextContent(title); + expect(screen.getByTestId('lightweightChartSpinner')).toBeInTheDocument(); + expect(screen.getByTestId('lightweightChartElement')).toBeInTheDocument(); + expect(screen.queryByTestId('lightweightChartYearButtons')).toBeInTheDocument(); + + expect(setDataMock).toHaveBeenCalledWith(data); + }); }); test('updates data correctly when props change', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - const loading = false; - const priceSymbol = '$'; - const createSeries = (chart: IChartApi) => chart.addLineSeries(); - - const initialData: { value: number; time: UTCTimestamp; color?: string }[] = [ - { value: 10, time: 1529899200 as UTCTimestamp }, - { value: 20, time: 1529899300 as UTCTimestamp }, - ]; - - const newData: { value: number; time: UTCTimestamp; color?: string }[] = [ - { value: 15, time: 1529900000 as UTCTimestamp }, - { value: 25, time: 1529900300 as UTCTimestamp }, - ]; - - const { component } = render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries, - data: initialData, - }); - - await waitFor(() => { - expect(setDataMock).toHaveBeenCalledWith(initialData); - }); - - // Update data prop - await act(() => component.$set({ data: newData })); - - await waitFor(() => { - expect(setDataMock).toHaveBeenCalledWith(newData); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + const loading = false; + const priceSymbol = '$'; + const createSeries = (chart: IChartApi) => chart.addLineSeries(); + + const initialData: { value: number; time: UTCTimestamp; color?: string }[] = [ + { value: 10, time: 1529899200 as UTCTimestamp }, + { value: 20, time: 1529899300 as UTCTimestamp } + ]; + + const newData: { value: number; time: UTCTimestamp; color?: string }[] = [ + { value: 15, time: 1529900000 as UTCTimestamp }, + { value: 25, time: 1529900300 as UTCTimestamp } + ]; + + const { component } = render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries, + data: initialData + }); + + await waitFor(() => { + expect(setDataMock).toHaveBeenCalledWith(initialData); + }); + + // Update data prop + await act(() => component.$set({ data: newData })); + + await waitFor(() => { + expect(setDataMock).toHaveBeenCalledWith(newData); + }); }); test('setOptions is called correctly', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - const loading = false; - const priceSymbol = '$'; - - render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries: (chart: IChartApi) => chart.addLineSeries(), - }); - - await waitFor(() => { - expect(applyOptionsMock).toHaveBeenCalled(); - - const callArgs = applyOptionsMock.mock.calls[0][0]; - expect(callArgs).toMatchObject({ - test: 'test', - }); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + const loading = false; + const priceSymbol = '$'; + + render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries: (chart: IChartApi) => chart.addLineSeries() + }); + + await waitFor(() => { + expect(applyOptionsMock).toHaveBeenCalled(); + + const callArgs = applyOptionsMock.mock.calls[0][0]; + expect(callArgs).toMatchObject({ + test: 'test' + }); + }); }); test('setTimeScale is called correctly', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - const loading = false; - const priceSymbol = '$'; - - const data: { value: number; time: UTCTimestamp; color?: string }[] = [ - { - value: 10, - time: 1529899200 as UTCTimestamp, - }, - { - value: 20, - time: 1529899300 as UTCTimestamp, - }, - { - value: 5, - time: 1529899500 as UTCTimestamp, - }, - ]; - - render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries: (chart: IChartApi) => chart.addLineSeries(), - data, - }); - - // Simulate clicking the "30 Days" button to change the timeDelta - await waitFor(async () => { - const timeDeltaButton = screen.getByText('30 Days'); - await act(() => fireEvent.click(timeDeltaButton)); - }); - - const timeDelta = 60 * 60 * 24 * 30; // 30 days in seconds - const timeTo = Math.floor(new Date().getTime() / 1000) as UTCTimestamp; - const timeFrom = (timeTo - timeDelta) as UTCTimestamp; - - await waitFor(() => { - expect(setVisibleRangeMock).toHaveBeenCalledWith({ - from: timeFrom, - to: timeTo, - }); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + const loading = false; + const priceSymbol = '$'; + + const data: { value: number; time: UTCTimestamp; color?: string }[] = [ + { + value: 10, + time: 1529899200 as UTCTimestamp + }, + { + value: 20, + time: 1529899300 as UTCTimestamp + }, + { + value: 5, + time: 1529899500 as UTCTimestamp + } + ]; + + render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries: (chart: IChartApi) => chart.addLineSeries(), + data + }); + + // Simulate clicking the "30 Days" button to change the timeDelta + await waitFor(async () => { + const timeDeltaButton = screen.getByText('30 Days'); + await act(() => fireEvent.click(timeDeltaButton)); + }); + + const timeDelta = 60 * 60 * 24 * 30; // 30 days in seconds + const timeTo = Math.floor(new Date().getTime() / 1000) as UTCTimestamp; + const timeFrom = (timeTo - timeDelta) as UTCTimestamp; + + await waitFor(() => { + expect(setVisibleRangeMock).toHaveBeenCalledWith({ + from: timeFrom, + to: timeTo + }); + }); }); test('setupChart is called correctly', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - const loading = false; - const priceSymbol = '$'; - - const data: { value: number; time: UTCTimestamp; color?: string }[] = [ - { - value: 10, - time: 1529899200 as UTCTimestamp, - }, - { - value: 20, - time: 1529899300 as UTCTimestamp, - }, - { - value: 5, - time: 1529899500 as UTCTimestamp, - }, - ]; - - render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries: (chart: IChartApi) => chart.addLineSeries(), - data, - }); - - await waitFor(() => { - expect(screen.getByTestId('lightweightChartElement')).toBeInTheDocument(); - expect(setDataMock).toHaveBeenCalledWith(data); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + const loading = false; + const priceSymbol = '$'; + + const data: { value: number; time: UTCTimestamp; color?: string }[] = [ + { + value: 10, + time: 1529899200 as UTCTimestamp + }, + { + value: 20, + time: 1529899300 as UTCTimestamp + }, + { + value: 5, + time: 1529899500 as UTCTimestamp + } + ]; + + render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries: (chart: IChartApi) => chart.addLineSeries(), + data + }); + + await waitFor(() => { + expect(screen.getByTestId('lightweightChartElement')).toBeInTheDocument(); + expect(setDataMock).toHaveBeenCalledWith(data); + }); }); test('destroyChart is called correctly', async () => { - const title = 'test title'; - const emptyMessage = 'empty message'; - const loading = false; - const priceSymbol = '$'; - - const { component } = render(LightweightChart, { - title, - emptyMessage, - loading, - priceSymbol, - createSeries: (chart: IChartApi) => chart.addLineSeries(), - }); - - component.$destroy(); - - await waitFor(() => { - expect(removeMock).toHaveBeenCalled(); - }); + const title = 'test title'; + const emptyMessage = 'empty message'; + const loading = false; + const priceSymbol = '$'; + + const { component } = render(LightweightChart, { + title, + emptyMessage, + loading, + priceSymbol, + createSeries: (chart: IChartApi) => chart.addLineSeries() + }); + + component.$destroy(); + + await waitFor(() => { + expect(removeMock).toHaveBeenCalled(); + }); }); diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte index 8e15e0168..c25c43fe1 100644 --- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte +++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte @@ -1,29 +1,29 @@ diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts index 4cbc66ff4..4f86dc8d8 100644 --- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts +++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts @@ -8,104 +8,105 @@ import { get } from 'svelte/store'; // Mock the LightweightChart component vi.mock('@rainlanguage/ui-components', async (importOriginal) => { - const MockLightweightChart = (await import('../../__mocks__/MockComponent.svelte')).default; - return { - ...(await importOriginal>()), - LightweightChart: MockLightweightChart -}}); + const MockLightweightChart = (await import('../../__mocks__/MockComponent.svelte')).default; + return { + ...(await importOriginal>()), + LightweightChart: MockLightweightChart + }; +}); type MockData = { - value: number; - time: number; + value: number; + time: number; }; test('renders the loading state correctly', async () => { - const mockData: MockData[] = [ - { value: 10, time: 1629899200 }, - { value: 20, time: 1629899300 }, - ]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value, - }, - }); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.loading).toBe(true); - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.loading).toBe(false); - expect(_props.data).toEqual(mockData); - }); + const mockData: MockData[] = [ + { value: 10, time: 1629899200 }, + { value: 20, time: 1629899300 } + ]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value + } + }); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.loading).toBe(true); + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.loading).toBe(false); + expect(_props.data).toEqual(mockData); + }); }); test('sorts the data correctly according to time', async () => { - const mockData: MockData[] = [ - { value: 20, time: 1629899300 }, - { value: 10, time: 1629899200 }, - { value: 40, time: 1629899500 }, - { value: 30, time: 1629899400 }, - ]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value, - }, - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.data).toEqual([ - { value: 10, time: 1629899200 }, - { value: 20, time: 1629899300 }, - { value: 30, time: 1629899400 }, - { value: 40, time: 1629899500 }, - ]); - }); + const mockData: MockData[] = [ + { value: 20, time: 1629899300 }, + { value: 10, time: 1629899200 }, + { value: 40, time: 1629899500 }, + { value: 30, time: 1629899400 } + ]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value + } + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.data).toEqual([ + { value: 10, time: 1629899200 }, + { value: 20, time: 1629899300 }, + { value: 30, time: 1629899400 }, + { value: 40, time: 1629899500 } + ]); + }); }); test('that a line series is added to the chart', async () => { - const mockData: MockData[] = [{ value: 20, time: 1629899300 }]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value, - }, - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - // Assert that the createSeries function matches the expected implementation - expect(_props.createSeries.toString()).toEqual( - 'chart => chart.addLineSeries({ lineWidth: 1 })', - ); - }); + const mockData: MockData[] = [{ value: 20, time: 1629899300 }]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value + } + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + // Assert that the createSeries function matches the expected implementation + expect(_props.createSeries.toString()).toEqual( + 'chart => chart.addLineSeries({ lineWidth: 1 })' + ); + }); }); From 06fec91f5a28935d833e417a89596f08122043c3 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 15:11:39 +0100 Subject: [PATCH 04/10] darkmode codemirror theme and move tests --- .../ChartTimeFilters.test.ts | 2 +- .../LightweightChart.test.ts | 6 +- .../TanstackLightweightChartLine.test.ts | 115 ++++++++++++++++++ .../TanstackLightweightChartLine.test.ts | 3 + .../ui-components/src/lib/stores/darkMode.ts | 26 ++++ .../src/lib/utils/codeMirrorThemes.ts | 88 ++++++++++++++ .../src/lib/utils/lightweightChartsThemes.ts | 23 ++++ 7 files changed, 259 insertions(+), 4 deletions(-) rename packages/ui-components/src/{lib/components/charts => __tests__}/ChartTimeFilters.test.ts (96%) rename packages/ui-components/src/{lib/components/charts => __tests__}/LightweightChart.test.ts (97%) create mode 100644 packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts create mode 100644 packages/ui-components/src/lib/stores/darkMode.ts create mode 100644 packages/ui-components/src/lib/utils/codeMirrorThemes.ts create mode 100644 packages/ui-components/src/lib/utils/lightweightChartsThemes.ts diff --git a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts b/packages/ui-components/src/__tests__/ChartTimeFilters.test.ts similarity index 96% rename from packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts rename to packages/ui-components/src/__tests__/ChartTimeFilters.test.ts index b3babec7c..2e7aa45b5 100644 --- a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.ts +++ b/packages/ui-components/src/__tests__/ChartTimeFilters.test.ts @@ -1,7 +1,7 @@ import { render, fireEvent, screen } from '@testing-library/svelte'; import { get, writable } from 'svelte/store'; import { test, expect } from 'vitest'; -import ChartTimeFiltersTest from './ChartTimeFilters.test.svelte'; +import ChartTimeFiltersTest from '../lib/components/charts/ChartTimeFilters.svelte'; const TIME_DELTA_24_HOURS = 60 * 60 * 24; const TIME_DELTA_7_DAYS = TIME_DELTA_24_HOURS * 7; diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts b/packages/ui-components/src/__tests__/LightweightChart.test.ts similarity index 97% rename from packages/ui-components/src/lib/components/charts/LightweightChart.test.ts rename to packages/ui-components/src/__tests__/LightweightChart.test.ts index 9c9f0a2f0..88ae59c85 100644 --- a/packages/ui-components/src/lib/components/charts/LightweightChart.test.ts +++ b/packages/ui-components/src/__tests__/LightweightChart.test.ts @@ -1,7 +1,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/svelte'; import { test, vi } from 'vitest'; -import { expect } from '../../test/matchers'; -import LightweightChart from './LightweightChart.svelte'; +import { expect } from '../lib/test/matchers'; +import LightweightChart from '../lib/components/charts/LightweightChart.svelte'; import { type IChartApi, type UTCTimestamp } from 'lightweight-charts'; const setDataMock = vi.fn(); @@ -23,7 +23,7 @@ vi.mock('lightweight-charts', async (importOriginal) => ({ })) })); -vi.mock('../../stores/darkMode', async (importOriginal) => { +vi.mock('../lib/stores/darkMode', async (importOriginal) => { const { readable } = await import('svelte/store'); return { ...((await importOriginal()) as object), diff --git a/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts b/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts new file mode 100644 index 000000000..a1ea397e3 --- /dev/null +++ b/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts @@ -0,0 +1,115 @@ +import { render, waitFor } from '@testing-library/svelte'; +import { test, expect, vi } from 'vitest'; +import TanstackLightweightChartLine from '../lib/components/charts/TanstackLightweightChartLine.svelte'; +import { props } from '../lib/__mocks__/MockComponent'; +import { createResolvableQuery } from '../lib/__mocks__/queries'; +import type { UTCTimestamp } from 'lightweight-charts'; +import { get } from 'svelte/store'; + +// Mock the LightweightChart component +vi.mock('@rainlanguage/ui-components', async (importOriginal) => { + const MockLightweightChart = (await import('../lib/__mocks__/MockComponent.svelte')).default; + return { + ...(await importOriginal>()), + LightweightChart: MockLightweightChart + }; +}); + +type MockData = { + value: number; + time: number; +}; + +test('renders the loading state correctly', async () => { + const mockData: MockData[] = [ + { value: 10, time: 1629899200 }, + { value: 20, time: 1629899300 } + ]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value + } + }); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.loading).toBe(true); + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.loading).toBe(false); + expect(_props.data).toEqual(mockData); + }); +}); + +test('sorts the data correctly according to time', async () => { + const mockData: MockData[] = [ + { value: 20, time: 1629899300 }, + { value: 10, time: 1629899200 }, + { value: 40, time: 1629899500 }, + { value: 30, time: 1629899400 } + ]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value + } + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.data).toEqual([ + { value: 10, time: 1629899200 }, + { value: 20, time: 1629899300 }, + { value: 30, time: 1629899400 }, + { value: 40, time: 1629899500 } + ]); + }); +}); + +test('that a line series is added to the chart', async () => { + const mockData: MockData[] = [{ value: 20, time: 1629899300 }]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value + } + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + // Assert that the createSeries function matches the expected implementation + expect(_props.createSeries.toString()).toEqual( + 'chart => chart.addLineSeries({ lineWidth: 1 })' + ); + }); +}); diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts index 4f86dc8d8..32316ff9f 100644 --- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts +++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts @@ -28,6 +28,7 @@ test('renders the loading state correctly', async () => { const { query, resolve } = createResolvableQuery(() => mockData); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { component: _component } = render(TanstackLightweightChartLine, { props: { query, @@ -62,6 +63,7 @@ test('sorts the data correctly according to time', async () => { const { query, resolve } = createResolvableQuery(() => mockData); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { component: _component } = render(TanstackLightweightChartLine, { props: { query, @@ -90,6 +92,7 @@ test('that a line series is added to the chart', async () => { const { query, resolve } = createResolvableQuery(() => mockData); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { component: _component } = render(TanstackLightweightChartLine, { props: { query, diff --git a/packages/ui-components/src/lib/stores/darkMode.ts b/packages/ui-components/src/lib/stores/darkMode.ts new file mode 100644 index 000000000..d434f33e6 --- /dev/null +++ b/packages/ui-components/src/lib/stores/darkMode.ts @@ -0,0 +1,26 @@ +import { darkCodeMirrorTheme, lightCodeMirrorTheme } from '$lib/utils/codeMirrorThemes'; +import { darkChartTheme, lightChartTheme } from '$lib/utils/lightweightChartsThemes'; +import { derived, writable } from 'svelte/store'; + +function readColorTheme(): 'dark' | 'light' { + const saved = localStorage.getItem('color-theme'); + if (saved) { + return saved as 'dark' | 'light'; + } else if (document.body.classList.contains('dark')) { + return 'dark'; + } else { + return 'light'; + } +} + +export const colorTheme = writable(readColorTheme()); + +colorTheme.subscribe((val: string) => localStorage.setItem('color-theme', val)); + +export const codeMirrorTheme = derived(colorTheme, ($colorTheme) => + $colorTheme === 'dark' ? darkCodeMirrorTheme : lightCodeMirrorTheme +); + +export const lightweightChartsTheme = derived(colorTheme, ($colorTheme) => + $colorTheme === 'dark' ? darkChartTheme : lightChartTheme +); diff --git a/packages/ui-components/src/lib/utils/codeMirrorThemes.ts b/packages/ui-components/src/lib/utils/codeMirrorThemes.ts new file mode 100644 index 000000000..ed99c3cd6 --- /dev/null +++ b/packages/ui-components/src/lib/utils/codeMirrorThemes.ts @@ -0,0 +1,88 @@ +import { createTheme } from 'thememirror'; +import { tags } from '@lezer/highlight'; + +// configured to resemble vscode default light theme +export const lightCodeMirrorTheme = createTheme({ + variant: 'light', + settings: { + background: '#ffffff', + foreground: '#001080', + caret: '#000000', + selection: '#add6ff', + lineHighlight: '#77777740', + gutterBackground: '#eeeeee', + gutterForeground: '#237893' + }, + styles: [ + { tag: tags.comment, color: '#008001' }, + { tag: tags.variableName, color: '#0070c1' }, + { tag: [tags.string, tags.special(tags.brace)], color: '#b55b00' }, + { tag: tags.number, color: '#00b97b' }, + { tag: tags.bool, color: '#0000ff' }, + { tag: tags.null, color: '#0000ff' }, + { tag: tags.unit, color: '#0000ff' }, + { tag: tags.keyword, color: '#af01db' }, + { tag: tags.operator, color: '#000000' }, + { tag: tags.className, color: '#257f99' }, + { tag: tags.meta, color: '#0950a9' }, + { tag: tags.definition(tags.typeName), color: '#257f99' }, + { tag: tags.angleBracket, color: '#213CF1' }, + { tag: tags.brace, color: '#213CF1' }, + { tag: tags.bracket, color: '#213CF1' }, + { tag: tags.squareBracket, color: '#213CF1' }, + { tag: tags.paren, color: '#213CF1' }, + { tag: tags.punctuation, color: '#464646' }, + { tag: tags.separator, color: '#464646' }, + { tag: tags.typeName, color: '#257f99' }, + { tag: tags.tagName, color: '#800000' }, + { tag: tags.attributeName, color: '#eb3d36' }, + { tag: tags.attributeValue, color: '#444444' }, + { tag: tags.content, color: '#b55b00' }, + { tag: [tags.propertyName, tags.definition(tags.propertyName)], color: '#0469ff' }, + { tag: tags.labelName, color: '#4fc4ff' }, + { tag: tags.deleted, color: '#cc0000' } + ] +}); + +// configured to resemble vscode default dark theme +export const darkCodeMirrorTheme = createTheme({ + variant: 'dark', + settings: { + background: '#1e1e1e', + foreground: '#d4d4d4', + caret: '#d4d4d4', + selection: '#ffffff', + lineHighlight: '#99999940', + gutterBackground: '#282828', + gutterForeground: '#858585' + }, + styles: [ + { tag: [tags.comment, tags.lineComment], color: '#6c9e57' }, + { tag: tags.variableName, color: '#9cdcfe' }, + { tag: [tags.string, tags.special(tags.brace)], color: '#ce9178' }, + { tag: tags.number, color: '#B6CFA9' }, + { tag: tags.bool, color: '#4fc4ff' }, + { tag: tags.null, color: '#4fc4ff' }, + { tag: tags.unit, color: '#608FC2' }, + { tag: tags.keyword, color: '#d18dcc' }, + { tag: tags.operator, color: '#d4d4d4' }, + { tag: tags.className, color: '#4dcab1' }, + { tag: tags.meta, color: '#608FC2' }, + { tag: tags.definition(tags.typeName), color: '#4fcfb5' }, + { tag: tags.angleBracket, color: '#F9D849' }, + { tag: tags.brace, color: '#F9D849' }, + { tag: tags.bracket, color: '#F9D849' }, + { tag: tags.squareBracket, color: '#F9D849' }, + { tag: tags.paren, color: '#F9D849' }, + { tag: tags.punctuation, color: '#d4d4d4' }, + { tag: tags.separator, color: '#d4d4d4' }, + { tag: tags.typeName, color: '#4ecdb4' }, + { tag: tags.tagName, color: '#59a3df' }, + { tag: tags.attributeName, color: '#ffffff' }, + { tag: tags.attributeValue, color: '#ffffff' }, + { tag: tags.content, color: '#ce9178' }, + { tag: [tags.propertyName, tags.definition(tags.propertyName)], color: '#608FC2' }, + { tag: tags.labelName, color: '#4fc4ff' }, + { tag: tags.deleted, color: '#c86464' } + ] +}); diff --git a/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts b/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts new file mode 100644 index 000000000..c42a08511 --- /dev/null +++ b/packages/ui-components/src/lib/utils/lightweightChartsThemes.ts @@ -0,0 +1,23 @@ +import { ColorType } from 'lightweight-charts'; + +export const darkChartTheme = { + layout: { + textColor: 'white', + background: { type: ColorType.Solid, color: 'transparent' } + }, + grid: { + vertLines: { color: '#484848' }, + horzLines: { color: '#484848' } + } +}; + +export const lightChartTheme = { + layout: { + textColor: 'black', + background: { type: ColorType.Solid, color: 'transparent' } + }, + grid: { + vertLines: { color: '#ECECEC' }, + horzLines: { color: '#ECECEC' } + } +}; From 26c0cce74ba79070ad987557bed9b3e2adf50ce3 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 16:13:46 +0100 Subject: [PATCH 05/10] reinstatte chart time filter --- .../src/__tests__/ChartTimeFilters.test.svelte | 8 ++++++++ .../ui-components/src/__tests__/ChartTimeFilters.test.ts | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 packages/ui-components/src/__tests__/ChartTimeFilters.test.svelte diff --git a/packages/ui-components/src/__tests__/ChartTimeFilters.test.svelte b/packages/ui-components/src/__tests__/ChartTimeFilters.test.svelte new file mode 100644 index 000000000..94ca4703f --- /dev/null +++ b/packages/ui-components/src/__tests__/ChartTimeFilters.test.svelte @@ -0,0 +1,8 @@ + + + diff --git a/packages/ui-components/src/__tests__/ChartTimeFilters.test.ts b/packages/ui-components/src/__tests__/ChartTimeFilters.test.ts index 2e7aa45b5..b3babec7c 100644 --- a/packages/ui-components/src/__tests__/ChartTimeFilters.test.ts +++ b/packages/ui-components/src/__tests__/ChartTimeFilters.test.ts @@ -1,7 +1,7 @@ import { render, fireEvent, screen } from '@testing-library/svelte'; import { get, writable } from 'svelte/store'; import { test, expect } from 'vitest'; -import ChartTimeFiltersTest from '../lib/components/charts/ChartTimeFilters.svelte'; +import ChartTimeFiltersTest from './ChartTimeFilters.test.svelte'; const TIME_DELTA_24_HOURS = 60 * 60 * 24; const TIME_DELTA_7_DAYS = TIME_DELTA_24_HOURS * 7; From ce8c672bd94a50215ab2426fd953afd66c332715 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 16:43:06 +0100 Subject: [PATCH 06/10] remove dupes --- .../charts/ChartTimeFilters.test.svelte | 8 -- .../TanstackLightweightChartLine.test.ts | 115 ------------------ 2 files changed, 123 deletions(-) delete mode 100644 packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte delete mode 100644 packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts diff --git a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte b/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte deleted file mode 100644 index ae4d07f66..000000000 --- a/packages/ui-components/src/lib/components/charts/ChartTimeFilters.test.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts deleted file mode 100644 index 32316ff9f..000000000 --- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.test.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { render, waitFor } from '@testing-library/svelte'; -import { test, expect, vi } from 'vitest'; -import TanstackLightweightChartLine from './TanstackLightweightChartLine.svelte'; -import { props } from '../../__mocks__/MockComponent'; -import { createResolvableQuery } from '../../__mocks__/queries'; -import type { UTCTimestamp } from 'lightweight-charts'; -import { get } from 'svelte/store'; - -// Mock the LightweightChart component -vi.mock('@rainlanguage/ui-components', async (importOriginal) => { - const MockLightweightChart = (await import('../../__mocks__/MockComponent.svelte')).default; - return { - ...(await importOriginal>()), - LightweightChart: MockLightweightChart - }; -}); - -type MockData = { - value: number; - time: number; -}; - -test('renders the loading state correctly', async () => { - const mockData: MockData[] = [ - { value: 10, time: 1629899200 }, - { value: 20, time: 1629899300 } - ]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value - } - }); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.loading).toBe(true); - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.loading).toBe(false); - expect(_props.data).toEqual(mockData); - }); -}); - -test('sorts the data correctly according to time', async () => { - const mockData: MockData[] = [ - { value: 20, time: 1629899300 }, - { value: 10, time: 1629899200 }, - { value: 40, time: 1629899500 }, - { value: 30, time: 1629899400 } - ]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value - } - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.data).toEqual([ - { value: 10, time: 1629899200 }, - { value: 20, time: 1629899300 }, - { value: 30, time: 1629899400 }, - { value: 40, time: 1629899500 } - ]); - }); -}); - -test('that a line series is added to the chart', async () => { - const mockData: MockData[] = [{ value: 20, time: 1629899300 }]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value - } - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - // Assert that the createSeries function matches the expected implementation - expect(_props.createSeries.toString()).toEqual( - 'chart => chart.addLineSeries({ lineWidth: 1 })' - ); - }); -}); From e322f14eadccdb59742d442244688dc89b92803f Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 16:43:38 +0100 Subject: [PATCH 07/10] fix tests --- .../TanstackLightweightChartLine.test.ts | 184 +++++++++--------- .../components/charts/LightweightChart.svelte | 2 +- .../TanstackLightweightChartLine.svelte | 2 +- 3 files changed, 91 insertions(+), 97 deletions(-) diff --git a/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts b/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts index a1ea397e3..04506a9ff 100644 --- a/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts +++ b/packages/ui-components/src/__tests__/TanstackLightweightChartLine.test.ts @@ -2,114 +2,108 @@ import { render, waitFor } from '@testing-library/svelte'; import { test, expect, vi } from 'vitest'; import TanstackLightweightChartLine from '../lib/components/charts/TanstackLightweightChartLine.svelte'; import { props } from '../lib/__mocks__/MockComponent'; -import { createResolvableQuery } from '../lib/__mocks__/queries'; +import { createResolvableQuery } from '@rainlanguage/ui-components'; import type { UTCTimestamp } from 'lightweight-charts'; import { get } from 'svelte/store'; // Mock the LightweightChart component -vi.mock('@rainlanguage/ui-components', async (importOriginal) => { - const MockLightweightChart = (await import('../lib/__mocks__/MockComponent.svelte')).default; - return { - ...(await importOriginal>()), - LightweightChart: MockLightweightChart - }; +vi.mock('../lib/components/charts/LightweightChart.svelte', async () => { + const MockLightweightChart = (await import('../lib/__mocks__/MockComponent.svelte')).default; + return { default: MockLightweightChart }; }); type MockData = { - value: number; - time: number; + value: number; + time: number; }; test('renders the loading state correctly', async () => { - const mockData: MockData[] = [ - { value: 10, time: 1629899200 }, - { value: 20, time: 1629899300 } - ]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value - } - }); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.loading).toBe(true); - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.loading).toBe(false); - expect(_props.data).toEqual(mockData); - }); + const mockData: MockData[] = [ + { value: 10, time: 1629899200 }, + { value: 20, time: 1629899300 }, + ]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value, + }, + }); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.loading).toBe(true); + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.loading).toBe(false); + expect(_props.data).toEqual(mockData); + }); }); test('sorts the data correctly according to time', async () => { - const mockData: MockData[] = [ - { value: 20, time: 1629899300 }, - { value: 10, time: 1629899200 }, - { value: 40, time: 1629899500 }, - { value: 30, time: 1629899400 } - ]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value - } - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - expect(_props.data).toEqual([ - { value: 10, time: 1629899200 }, - { value: 20, time: 1629899300 }, - { value: 30, time: 1629899400 }, - { value: 40, time: 1629899500 } - ]); - }); + const mockData: MockData[] = [ + { value: 20, time: 1629899300 }, + { value: 10, time: 1629899200 }, + { value: 40, time: 1629899500 }, + { value: 30, time: 1629899400 }, + ]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value, + }, + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + expect(_props.data).toEqual([ + { value: 10, time: 1629899200 }, + { value: 20, time: 1629899300 }, + { value: 30, time: 1629899400 }, + { value: 40, time: 1629899500 }, + ]); + }); }); test('that a line series is added to the chart', async () => { - const mockData: MockData[] = [{ value: 20, time: 1629899300 }]; - - const { query, resolve } = createResolvableQuery(() => mockData); - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { component: _component } = render(TanstackLightweightChartLine, { - props: { - query, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - timeTransform: (d: any) => d.time as UTCTimestamp, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - valueTransform: (d: any) => d.value - } - }); - - await resolve(); - - await waitFor(() => { - const _props = get(props) as (typeof _component)['$$props']; - // Assert that the createSeries function matches the expected implementation - expect(_props.createSeries.toString()).toEqual( - 'chart => chart.addLineSeries({ lineWidth: 1 })' - ); - }); -}); + const mockData: MockData[] = [{ value: 20, time: 1629899300 }]; + + const { query, resolve } = createResolvableQuery(() => mockData); + + const { component: _component } = render(TanstackLightweightChartLine, { + props: { + query, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + timeTransform: (d: any) => d.time as UTCTimestamp, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + valueTransform: (d: any) => d.value, + }, + }); + + await resolve(); + + await waitFor(() => { + const _props = get(props) as (typeof _component)['$$props']; + // Assert that the createSeries function matches the expected implementation + expect(_props.createSeries.toString()).toEqual( + 'chart => chart.addLineSeries({ lineWidth: 1 })', + ); + }); +}); \ No newline at end of file diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte index fe651f73e..7bd107edd 100644 --- a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte +++ b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte @@ -28,7 +28,7 @@ type SeriesOptionsMap } from 'lightweight-charts'; import { onDestroy, onMount } from 'svelte'; - import { ChartTimeFilters } from '@rainlanguage/ui-components'; + import ChartTimeFilters from './ChartTimeFilters.svelte'; export let data: { value: number; time: UTCTimestamp; color?: string }[] = []; export let loading = false; diff --git a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte index c25c43fe1..58c461fc5 100644 --- a/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte +++ b/packages/ui-components/src/lib/components/charts/TanstackLightweightChartLine.svelte @@ -1,5 +1,5 @@ - + diff --git a/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte b/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte index 40c2848cf..96e21b07f 100644 --- a/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte +++ b/tauri-app/src/lib/components/charts/LightweightChartHistogram.svelte @@ -1,5 +1,10 @@ - chart.addHistogramSeries()} {...$$props} /> + chart.addHistogramSeries()} + {...$$props} + {lightweightChartsTheme} +/> diff --git a/tauri-app/src/lib/components/charts/LightweightChartLine.svelte b/tauri-app/src/lib/components/charts/LightweightChartLine.svelte index 928df179d..759ad08ff 100644 --- a/tauri-app/src/lib/components/charts/LightweightChartLine.svelte +++ b/tauri-app/src/lib/components/charts/LightweightChartLine.svelte @@ -1,5 +1,10 @@ - chart.addLineSeries({ lineWidth: 1 })} {...$$props} /> + chart.addLineSeries({ lineWidth: 1 })} + {...$$props} + {lightweightChartsTheme} +/> diff --git a/tauri-app/src/lib/components/charts/OrderTradesChart.svelte b/tauri-app/src/lib/components/charts/OrderTradesChart.svelte index fa3f37d66..03247ffcf 100644 --- a/tauri-app/src/lib/components/charts/OrderTradesChart.svelte +++ b/tauri-app/src/lib/components/charts/OrderTradesChart.svelte @@ -4,7 +4,7 @@ import { createQuery } from '@tanstack/svelte-query'; import { subgraphUrl } from '$lib/stores/settings'; import { TanstackLightweightChartLine } from '@rainlanguage/ui-components'; - + import { lightweightChartsTheme } from '$lib/stores/darkMode'; export let id: string; $: query = createQuery({ @@ -22,4 +22,5 @@ timeTransform={(d) => d.time} valueTransform={(d) => d.value} emptyMessage="No trades found" + {lightweightChartsTheme} /> diff --git a/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte b/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte index 4ad737743..cd970fe1f 100644 --- a/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte +++ b/tauri-app/src/lib/components/charts/VaultBalanceChart.svelte @@ -7,7 +7,7 @@ import { subgraphUrl } from '$lib/stores/settings'; import { TanstackLightweightChartLine } from '@rainlanguage/ui-components'; import { QKEY_VAULT_CHANGES } from '@rainlanguage/ui-components'; - + import { lightweightChartsTheme } from '$lib/stores/darkMode'; export let vault: Vault; $: query = createQuery({ @@ -28,5 +28,6 @@ valueTransform={(d) => bigintToFloat(BigInt(d.newVaultBalance), Number(vault.token.decimals ?? 0))} emptyMessage="No deposits or withdrawals found" + {lightweightChartsTheme} /> {/if} From 793b9abbfc7d62e6314a76844649e3b314c3f206 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Wed, 27 Nov 2024 16:16:14 +0100 Subject: [PATCH 09/10] move themes --- packages/ui-components/src/lib/index.ts | 2 + .../ui-components/src/lib/stores/darkMode.ts | 4 +- tauri-app/src/lib/stores/darkMode.ts | 7 +- tauri-app/src/lib/utils/codeMirrorThemes.ts | 252 ------------------ .../src/lib/utils/lightweightChartsThemes.ts | 24 -- 5 files changed, 7 insertions(+), 282 deletions(-) delete mode 100644 tauri-app/src/lib/utils/codeMirrorThemes.ts delete mode 100644 tauri-app/src/lib/utils/lightweightChartsThemes.ts diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts index 62920613a..1279084b0 100644 --- a/packages/ui-components/src/lib/index.ts +++ b/packages/ui-components/src/lib/index.ts @@ -50,6 +50,8 @@ export { QKEY_ORDER_QUOTE, QKEY_VAULTS_VOL_LIST } from './queries/keys'; +export { darkChartTheme, lightChartTheme } from './utils/lightweightChartsThemes'; +export { lightCodeMirrorTheme, darkCodeMirrorTheme } from './utils/codeMirrorThemes'; // Stores export { mockConfigSource } from './__mocks__/settings'; diff --git a/packages/ui-components/src/lib/stores/darkMode.ts b/packages/ui-components/src/lib/stores/darkMode.ts index d434f33e6..cc9a1288d 100644 --- a/packages/ui-components/src/lib/stores/darkMode.ts +++ b/packages/ui-components/src/lib/stores/darkMode.ts @@ -1,5 +1,5 @@ -import { darkCodeMirrorTheme, lightCodeMirrorTheme } from '$lib/utils/codeMirrorThemes'; -import { darkChartTheme, lightChartTheme } from '$lib/utils/lightweightChartsThemes'; +import { darkCodeMirrorTheme, lightCodeMirrorTheme } from '../utils/codeMirrorThemes'; +import { darkChartTheme, lightChartTheme } from '../utils/lightweightChartsThemes'; import { derived, writable } from 'svelte/store'; function readColorTheme(): 'dark' | 'light' { diff --git a/tauri-app/src/lib/stores/darkMode.ts b/tauri-app/src/lib/stores/darkMode.ts index 590f7ed5c..2257dce3b 100644 --- a/tauri-app/src/lib/stores/darkMode.ts +++ b/tauri-app/src/lib/stores/darkMode.ts @@ -1,5 +1,4 @@ -import { themes as codeMirrorThemes } from '$lib/utils/codeMirrorThemes'; -import { themes as lightweightChartsThemes } from '$lib/utils/lightweightChartsThemes'; +import { darkCodeMirrorTheme, lightCodeMirrorTheme, lightChartTheme, darkChartTheme } from '@rainlanguage/ui-components'; import { derived, writable } from 'svelte/store'; function readColorTheme(): 'dark' | 'light' { @@ -18,9 +17,9 @@ export const colorTheme = writable(readColorTheme()); colorTheme.subscribe((val: string) => localStorage.setItem('color-theme', val)); export const codeMirrorTheme = derived(colorTheme, ($colorTheme) => - $colorTheme === 'dark' ? codeMirrorThemes.dark : codeMirrorThemes.light, + $colorTheme === 'dark' ? darkCodeMirrorTheme : lightCodeMirrorTheme, ); export const lightweightChartsTheme = derived(colorTheme, ($colorTheme) => - $colorTheme === 'dark' ? lightweightChartsThemes.dark : lightweightChartsThemes.light, + $colorTheme === 'dark' ? darkChartTheme : lightChartTheme, ); diff --git a/tauri-app/src/lib/utils/codeMirrorThemes.ts b/tauri-app/src/lib/utils/codeMirrorThemes.ts deleted file mode 100644 index d737f2be2..000000000 --- a/tauri-app/src/lib/utils/codeMirrorThemes.ts +++ /dev/null @@ -1,252 +0,0 @@ -import { createTheme } from 'thememirror'; -import { tags } from '@lezer/highlight'; - -export const themes = { - // configured to resemble vscode default light theme - light: createTheme({ - variant: 'light', - settings: { - background: '#ffffff', - foreground: '#001080', - caret: '#000000', - selection: '#add6ff', - lineHighlight: '#77777740', - gutterBackground: '#eeeeee', - gutterForeground: '#237893', - }, - styles: [ - { - tag: tags.comment, - color: '#008001', - }, - { - tag: tags.variableName, - color: '#0070c1', - }, - { - tag: [tags.string, tags.special(tags.brace)], - color: '#b55b00', - }, - { - tag: tags.number, - color: '#00b97b', - }, - { - tag: tags.bool, - color: '#0000ff', - }, - { - tag: tags.null, - color: '#0000ff', - }, - { - tag: tags.unit, - color: '#0000ff', - }, - { - tag: tags.keyword, - color: '#af01db', - }, - { - tag: tags.operator, - color: '#000000', - }, - { - tag: tags.className, - color: '#257f99', - }, - { - tag: tags.meta, - color: '#0950a9', - }, - { - tag: tags.definition(tags.typeName), - color: '#257f99', - }, - { - tag: tags.angleBracket, - color: '#213CF1', - }, - { - tag: tags.brace, - color: '#213CF1', - }, - { - tag: tags.bracket, - color: '#213CF1', - }, - { - tag: tags.squareBracket, - color: '#213CF1', - }, - { - tag: tags.paren, - color: '#213CF1', - }, - { - tag: tags.punctuation, - color: '#464646', - }, - { - tag: tags.separator, - color: '#464646', - }, - { - tag: tags.typeName, - color: '#257f99', - }, - { - tag: tags.tagName, - color: '#800000', - }, - { - tag: tags.attributeName, - color: '#eb3d36', - }, - { - tag: tags.attributeValue, - color: '#444444', - }, - { - tag: tags.content, - color: '#b55b00', - }, - { - tag: [tags.propertyName, tags.definition(tags.propertyName)], - color: '#0469ff', - }, - { - tag: tags.labelName, - color: '#4fc4ff', - }, - { - tag: tags.deleted, - color: '#cc0000', - }, - ], - }), - - // configured to resemble vscode default dark theme - dark: createTheme({ - variant: 'dark', - settings: { - background: '#1e1e1e', - foreground: '#d4d4d4', - caret: '#d4d4d4', - selection: '#ffffff', - lineHighlight: '#99999940', - gutterBackground: '#282828', - gutterForeground: '#858585', - }, - styles: [ - { - tag: [tags.comment, tags.lineComment], - color: '#6c9e57', - }, - { - tag: tags.variableName, - color: '#9cdcfe', - }, - { - tag: [tags.string, tags.special(tags.brace)], - color: '#ce9178', - }, - { - tag: tags.number, - color: '#B6CFA9', - }, - { - tag: tags.bool, - color: '#4fc4ff', - }, - { - tag: tags.null, - color: '#4fc4ff', - }, - { - tag: tags.unit, - color: '#608FC2', - }, - { - tag: tags.keyword, - color: '#d18dcc', - }, - { - tag: tags.operator, - color: '#d4d4d4', - }, - { - tag: tags.className, - color: '#4dcab1', - }, - { - tag: tags.meta, - color: '#608FC2', - }, - { - tag: tags.definition(tags.typeName), - color: '#4fcfb5', - }, - { - tag: tags.angleBracket, - color: '#F9D849', - }, - { - tag: tags.brace, - color: '#F9D849', - }, - { - tag: tags.bracket, - color: '#F9D849', - }, - { - tag: tags.squareBracket, - color: '#F9D849', - }, - { - tag: tags.paren, - color: '#F9D849', - }, - { - tag: tags.punctuation, - color: '#d4d4d4', - }, - { - tag: tags.separator, - color: '#d4d4d4', - }, - { - tag: tags.typeName, - color: '#4ecdb4', - }, - { - tag: tags.tagName, - color: '#59a3df', - }, - { - tag: tags.attributeName, - color: '#ffffff', - }, - { - tag: tags.attributeValue, - color: '#ffffff', - }, - { - tag: tags.content, - color: '#ce9178', - }, - { - tag: [tags.propertyName, tags.definition(tags.propertyName)], - color: '#608FC2', - }, - { - tag: tags.labelName, - color: '#4fc4ff', - }, - { - tag: tags.deleted, - color: '#c86464', - }, - ], - }), -}; diff --git a/tauri-app/src/lib/utils/lightweightChartsThemes.ts b/tauri-app/src/lib/utils/lightweightChartsThemes.ts deleted file mode 100644 index fdf10e547..000000000 --- a/tauri-app/src/lib/utils/lightweightChartsThemes.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ColorType } from 'lightweight-charts'; - -export const themes = { - dark: { - layout: { - textColor: 'white', - background: { type: ColorType.Solid, color: 'transparent' }, - }, - grid: { - vertLines: { color: '#484848' }, - horzLines: { color: '#484848' }, - }, - }, - light: { - layout: { - textColor: 'black', - background: { type: ColorType.Solid, color: 'transparent' }, - }, - grid: { - vertLines: { color: '#ECECEC' }, - horzLines: { color: '#ECECEC' }, - }, - }, -}; From ef1d44e16c02209c750066b8e48190a1ee5917d2 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Wed, 27 Nov 2024 20:22:20 +0100 Subject: [PATCH 10/10] move --- tauri-app/src/lib/stores/darkMode.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tauri-app/src/lib/stores/darkMode.ts b/tauri-app/src/lib/stores/darkMode.ts index 2257dce3b..48d25f995 100644 --- a/tauri-app/src/lib/stores/darkMode.ts +++ b/tauri-app/src/lib/stores/darkMode.ts @@ -1,4 +1,9 @@ -import { darkCodeMirrorTheme, lightCodeMirrorTheme, lightChartTheme, darkChartTheme } from '@rainlanguage/ui-components'; +import { + darkCodeMirrorTheme, + lightCodeMirrorTheme, + lightChartTheme, + darkChartTheme, +} from '@rainlanguage/ui-components'; import { derived, writable } from 'svelte/store'; function readColorTheme(): 'dark' | 'light' {