@genspectrum/dashboard-components 0.6.19 → 0.7.1

package/custom-elements.json

@@ -272,17 +272,17 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
+            "text": "Meta<Required<DateRangeSelectorProps>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [ PRESET_VALUE_CUSTOM, PRESET_VALUE_ALL_TIMES, PRESET_VALUE_LAST_2_WEEKS, PRESET_VALUE_LAST_MONTH, PRESET_VALUE_LAST_2_MONTHS, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS, 'CustomDateRange', ], }, dateColumn: { control: { type: 'text' } }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, dateColumn: 'aDateColumn', width: '100%', initialDateFrom: '', initialDateTo: '', }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'], }, dateColumn: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }, ], earliestDate: '1970-01-01', initialValue: dateRangeOptionPresets.lastMonth.label, dateColumn: 'aDateColumn', width: '100%', initialDateFrom: '', initialDateTo: '', }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "DateRangeSelectorStory",
           "type": {
-            "text": "StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
+            "text": "StoryObj<Required<DateRangeSelectorProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .customSelectOptions=${args.customSelectOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .initialDateFrom=${args.initialDateFrom} .initialDateTo=${args.initialDateTo} .width=${args.width} .dateColumn=${args.dateColumn} ></gs-date-range-selector> </div> </gs-app>`, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const dateTo = () => canvas.getByPlaceholderText('Date to'); await step('Expect last 6 months to be selected', async () => { await expect(canvas.getByRole('combobox')).toHaveValue('last6Months'); await waitFor(() => { expect(dateTo()).toHaveValue(toYYYYMMDD(new Date())); }); }); // Due to the limitations of storybook testing which does not fire an event, // when selecting a value from the dropdown we can't test the fired event here. // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .initialDateFrom=${args.initialDateFrom} .initialDateTo=${args.initialDateTo} .width=${args.width} .dateColumn=${args.dateColumn} ></gs-date-range-selector> </div> </gs-app>`, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const dateTo = () => canvas.getByPlaceholderText('Date to'); await step('Expect last 6 months to be selected', async () => { await expect(canvas.getByRole('combobox')).toHaveValue('Last month'); await waitFor(() => { expect(dateTo()).toHaveValue(toYYYYMMDD(new Date())); }); }); // Due to the limitations of storybook testing which does not fire an event, // when selecting a value from the dropdown we can't test the fired event here. // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts }, }"
         }
       ],
       "exports": [
@@ -315,13 +315,13 @@
           "members": [
             {
               "kind": "field",
-              "name": "customSelectOptions",
+              "name": "dateRangeOptions",
               "type": {
-                "text": "{ label: string; dateFrom: string; dateTo: string }[]"
+                "text": "{ label: string; dateFrom?: string; dateTo?: string }[]"
               },
               "default": "[]",
-              "description": "An array of custom options that the select field should provide,\nin addition to the predefined options.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.",
-              "attribute": "customSelectOptions"
+              "description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.",
+              "attribute": "dateRangeOptions"
             },
             {
               "kind": "field",
@@ -337,10 +337,10 @@
               "kind": "field",
               "name": "initialValue",
               "type": {
-                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string"
+                "text": "string | undefined"
               },
-              "default": "'last6Months'",
-              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.",
+              "default": "undefined",
+              "description": "The initial value to use for this date range selector.\nMust be a valid label from the `dateRangeOptions`.\n\nIf the value is not set, the component will default to the range `earliestDate` until today.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
               "attribute": "initialValue"
             },
             {
@@ -395,13 +395,13 @@
           ],
           "attributes": [
             {
-              "name": "customSelectOptions",
+              "name": "dateRangeOptions",
               "type": {
-                "text": "{ label: string; dateFrom: string; dateTo: string }[]"
+                "text": "{ label: string; dateFrom?: string; dateTo?: string }[]"
               },
               "default": "[]",
-              "description": "An array of custom options that the select field should provide,\nin addition to the predefined options.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.",
-              "fieldName": "customSelectOptions"
+              "description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.",
+              "fieldName": "dateRangeOptions"
             },
             {
               "name": "earliestDate",
@@ -415,10 +415,10 @@
             {
               "name": "initialValue",
               "type": {
-                "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string"
+                "text": "string | undefined"
               },
-              "default": "'last6Months'",
-              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.",
+              "default": "undefined",
+              "description": "The initial value to use for this date range selector.\nMust be a valid label from the `dateRangeOptions`.\n\nIf the value is not set, the component will default to the range `earliestDate` until today.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
               "fieldName": "initialValue"
             },
             {