feat(components): add react support

GenSpectrum · Sep 25, 2024 · 32bf97d · 32bf97d
1 parent 6677533
commit 32bf97d
Show file tree

Hide file tree

Showing 14 changed files with 136 additions and 6 deletions.
diff --git a/components/src/web-components/app.ts b/components/src/web-components/app.ts
@@ -2,6 +2,7 @@ import { provide } from '@lit/context';
 import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
@@ -74,3 +75,12 @@ declare global {
         'gs-app': App;
     }
 }
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
diff --git a/components/src/web-components/input/gs-date-range-selector.tsx b/components/src/web-components/input/gs-date-range-selector.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -126,6 +127,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type CustomSelectOptionsMatches = Expect<
     Equals<

diff --git a/components/src/web-components/input/gs-lineage-filter.tsx b/components/src/web-components/input/gs-lineage-filter.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -79,6 +80,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type InitialValueMatches = Expect<
     Equals<typeof LineageFilterComponent.prototype.initialValue, LineageFilterProps['initialValue']>

diff --git a/components/src/web-components/input/gs-location-filter.tsx b/components/src/web-components/input/gs-location-filter.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -88,6 +89,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type InitialValueMatches = Expect<
     Equals<typeof LocationFilterComponent.prototype.initialValue, LocationFilterProps['initialValue']>

diff --git a/components/src/web-components/input/gs-mutation-filter.tsx b/components/src/web-components/input/gs-mutation-filter.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import {
@@ -111,6 +112,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type InitialValueMatches = Expect<
     Equals<typeof MutationFilterComponent.prototype.initialValue, MutationFilterProps['initialValue']>

diff --git a/components/src/web-components/input/gs-text-input.tsx b/components/src/web-components/input/gs-text-input.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -73,6 +74,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-text-input-changed': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type InitialValueMatches = Expect<
     Equals<typeof TextInputComponent.prototype.initialValue, TextInputProps['initialValue']>

diff --git a/components/src/web-components/visualization/gs-aggregate.tsx b/components/src/web-components/visualization/gs-aggregate.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Aggregate, type AggregateProps, type View } from '../../preact/aggregatedData/aggregate';
 import { type LapisFilter } from '../../types';
@@ -104,6 +105,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type FieldsMatches = Expect<Equals<typeof AggregateComponent.prototype.fields, AggregateProps['fields']>>;
 type ViewsMatches = Expect<Equals<typeof AggregateComponent.prototype.views, AggregateProps['views']>>;

diff --git a/components/src/web-components/visualization/gs-mutation-comparison.tsx b/components/src/web-components/visualization/gs-mutation-comparison.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -102,6 +103,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type LapisFiltersMatches = Expect<
     Equals<typeof MutationComparisonComponent.prototype.lapisFilters, MutationComparisonProps['lapisFilters']>

diff --git a/components/src/web-components/visualization/gs-mutations-over-time.tsx b/components/src/web-components/visualization/gs-mutations-over-time.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { MutationsOverTime, type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -104,6 +105,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutations-over-time-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type LapisFilterMatches = Expect<
     Equals<typeof MutationsOverTimeComponent.prototype.lapisFilter, MutationsOverTimeProps['lapisFilter']>

diff --git a/components/src/web-components/visualization/gs-mutations.tsx b/components/src/web-components/visualization/gs-mutations.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { Mutations, type MutationsProps } from '../../preact/mutations/mutations';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -96,6 +97,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type LapisFilterMatches = Expect<
     Equals<typeof MutationsComponent.prototype.lapisFilter, MutationsProps['lapisFilter']>

diff --git a/components/src/web-components/visualization/gs-number-sequences-over-time.tsx b/components/src/web-components/visualization/gs-number-sequences-over-time.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import {
     NumberSequencesOverTime,
@@ -124,6 +125,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type LapisFilterMatches = Expect<
     Equals<typeof NumberSequencesOverTimeComponent.prototype.lapisFilter, NumberSequencesOverTimeProps['lapisFilter']>

diff --git a/components/src/web-components/visualization/gs-prevalence-over-time.tsx b/components/src/web-components/visualization/gs-prevalence-over-time.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -187,6 +188,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
     Equals<typeof PrevalenceOverTimeComponent.prototype.numeratorFilter, PrevalenceOverTimeProps['numeratorFilter']>

diff --git a/components/src/web-components/visualization/gs-relative-growth-advantage.tsx b/components/src/web-components/visualization/gs-relative-growth-advantage.tsx
@@ -1,4 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import {
     RelativeGrowthAdvantage,
@@ -143,6 +144,15 @@ declare global {
     }
 }
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
     Equals<

diff --git a/examples/React/src/App.tsx b/examples/React/src/App.tsx
@@ -61,9 +61,9 @@ function App() {
                 fields='["region", "country", "division", "location"]'
             ></gs-location-filter>
             <gs-date-range-selector initialValue='last6Months'></gs-date-range-selector>
-            <div style={{display: 'flex', flexDirection: 'row'}}>
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
                 <div>
-                    <h1 className="text-xl bold">Prevalence over time</h1>
+                    <h1 className='text-xl bold'>Prevalence over time</h1>
                     <gs-prevalence-over-time
                         numeratorFilter={JSON.stringify(numerator)}
                         denominatorFilter={JSON.stringify(denominator)}
@@ -74,8 +74,8 @@ function App() {
                         height='300px'
                     ></gs-prevalence-over-time>
                 </div>
-                <div style={{height: '300px', width: '1000px'}}>
-                    <h1 className="text-xl bold">Prevalence over time</h1>
+                <div style={{ height: '300px', width: '1000px' }}>
+                    <h1 className='text-xl bold'>Prevalence over time</h1>
                     <gs-prevalence-over-time
                         numeratorFilter={JSON.stringify(numerator)}
                         denominatorFilter={JSON.stringify(denominator)}
@@ -87,7 +87,7 @@ function App() {
                     ></gs-prevalence-over-time>
                 </div>
             </div>
-            <h1 className="text-xl bold">Prevalence over time</h1>
+            <h1 className='text-xl bold'>Prevalence over time</h1>
             <div>
                 <gs-prevalence-over-time
                     numeratorFilter={JSON.stringify(numerator)}
@@ -97,7 +97,7 @@ function App() {
                     views='["line", "table"]'
                 ></gs-prevalence-over-time>
             </div>
-            <h1 className="text-xl bold">Relative Growth Advantage</h1>
+            <h1 className='text-xl bold'>Relative Growth Advantage</h1>
             <gs-relative-growth-advantage
                 numeratorFilter='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateFrom": "2020-12-01" }'
                 denominatorFilter='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'