Feature/2824 date input #2864

kwongz · 2024-11-28T21:36:54Z

Description

Created DateInput component that builds off the DateRange structure. Redirects /components/date-range/ --> /components/date-input/

Allows users to access a single date or ranged date input calendar

Checklist

For UI or styling changes, I have added a screenshot or gif showing before & after
I have added a changeset
I have added to the docs where applicable
I have added to the VS Code extension where applicable

kwongz · 2024-11-29T15:49:32Z

fixes #2824

archiewood · 2024-11-29T16:10:34Z

sites/docs/pages/components/date-input/index.md

+    data={orders_by_day}
+    dates=day
+    title="Select a Date Input"
+    range


this example uses a range, but is in the wrong section? remove?

Suggested change

range

archiewood · 2024-11-29T16:13:35Z

sites/docs/pages/components/date-input/index.md

+select 
+    *
+from ${orders_by_day}
+where day = '${inputs.range_filtering_a_query.value}'


This example chart looks odd, A barchart with a single day is rarely used.

I think you'd be using this as a one sided filter.

Suggested change

where day = '${inputs.range_filtering_a_query.value}'

where day > '${inputs.range_filtering_a_query.value}'

oh nice yeah, i like this better

archiewood · 2024-11-29T16:15:38Z

sites/docs/pages/components/date-input/index.md

+/>
+<PropListing 
+    name="title"
+    options="string"


I think it looks odd to just have a floating number in a button. not obvious what to do without a title?

Maybe we can make this title a default?

I know @mcrascal has an different view so happy to discuss

yeah it's definitely missing something, and easily overlooked on its own

archiewood · 2024-11-29T16:16:24Z

sites/docs/pages/components/date-input/index.md

@@ -0,0 +1,302 @@
+---
+title: Date Input
+sidebar_position: 1


minor point, we should have a description: - we should be doing this for all components going forward

archiewood · 2024-11-29T16:19:23Z

sites/docs/pages/components/date-input/index.md

+- orders_by_day.sql
+---
+
+Creates a date picker that can be used to filter a query.


Suggested change

Creates a date picker that can be used to filter a query.

A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.

This can be the description also

kwongz · 2024-11-29T19:01:38Z

@archiewood @mcrascal

Date Input w/ calendar (@steeze-ui/svelte-icon)

Date Input w/ inline title

Date Input w/ range + title (no calendar icon)

kwongz · 2024-12-02T14:43:40Z

Added more margin between icon and text (m1 --> m2).

Date range for reference

archiewood · 2024-12-02T14:55:32Z

calendar icon is improved

The separating bar between the Date Input and Jan 1, 1970 looks different to that used in the Dropdown to me (too heavy, does not extend high or low enough)

Can we match the styling

kwongz · 2024-12-02T21:19:56Z

lowered the stroke and change text coloring

kwongz · 2024-12-04T21:14:11Z

Here are some options we can fix with custom stroke width, and perhaps exploring other icons. I think

I'm noticing we can fix some pixelation with a lower stroke width when the text is black.

Calendar stroke-[1.8px] text-black

stroke-[2px]

stroke-[2.1px]

stroke-[2.2px]

Calendar Down stroke-[2px]

Calendar Event stroke-[2px]

archiewood · 2024-12-04T22:29:30Z

I think maybe stroke-[1.8px] text-gray-700 with Calendar Event might look good?

archiewood · 2024-12-04T22:30:41Z

although I actually like what is currently in the deploy preview

kwongz · 2024-12-05T14:17:13Z

@archiewood
I just uploaded a preview of the calendar event, i think they both look good, I'm leaning towards Calendar Event now haha

archiewood · 2024-12-05T15:16:25Z

Calendar event looks great!

archiewood

This also needs engineering code review from as the changes are quite surgical.

packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte

kwongz · 2024-12-05T20:32:25Z

@ItsMeBrianD

Moved some functions used both in DateRange and DateInput, into a helper.js
Removed _DateRange (not being used)

I tried moving some of the query-building logic/ input store, but it felt like my changes were making the code more complicated, so I left them in the respective components.

csjh · 2024-12-11T20:32:25Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

+	export let data;
+	/** @type {string | undefined} */
+	export let dates;
+	/** @type {[]string | undefined} */


Suggested change

/** @type {[]string | undefined} */

/** @type {string[] | undefined} */

csjh · 2024-12-11T20:33:06Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

+	/** @type {string} */
+	export let name;
+	/** @type {string | undefined} */
+	export let title;


optional props like these should have a default value of undefined, otherwise a bunch of warnings pop up in dev

csjh · 2024-12-11T20:35:33Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

+		if (range) {
+			$inputs[name] = { value: undefined, start: startString, end: endString };
+		} else {
+			$inputs[name] = { value: startString, start: startString, end: undefined };


Should we set start here? Seems more like it should just be start/end for range vs. value for non-range

Also I'd prefer to omit the undefined props rather than giving them the value of undefined

This was my suggestion

My initial thought was start is probably worth keeping start as someone might change from <DateInput range=true to range=false, and then it break the rest of their code.

honestly, probably should remove start from DateInput range=false

now I think about it you are likely going to have to change the SQL anyway from between to =

csjh · 2024-12-11T20:38:31Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte

 		selectedPreset = targetPreset;
+		if (range) {
+			selectedDateInput = targetPreset.range ?? targetPreset.value;


I could be wrong, but the targetPreset.value seems like dead code - doesn't seem like we allow .value in elements of presets

csjh · 2024-12-11T20:58:04Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte

+					{:else if selectedDateInput && !range}
+						{#if title}
+							{title}
+							<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />


Suggested change

<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />

<Separator orientation="vertical" class="mx-2 h-4 w-[1px]" />

csjh · 2024-12-11T21:01:53Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

+
+	$: range = toBoolean(range);
+
+	const exec = getQueryFunction();


@ItsMeBrianD is there an alternative we should prefer to direct Query.create/getQueryFunction here

zachstence · 2024-12-12T19:50:31Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte

+
+	// Mock "today"
+	import MockDate from 'mockdate';
+	MockDate.set('2024-12-30');


Does this persist after you switch to another story?

Would probably be good to reset it

Suggested change

MockDate.set('2024-12-30');

MockDate.set('2024-12-30');

onMount(() => () => MockDate.reset());

zachstence · 2024-12-12T19:53:14Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

+		}
+	}
+
+	let currentDate = dateToYYYYMMDD(new Date(Date.now()));


Suggested change

let currentDate = dateToYYYYMMDD(new Date(Date.now()));

let currentDate = dateToYYYYMMDD(new Date());

new Date() will create a date with the current date/time, no need for Date.now()

zachstence · 2024-12-12T19:59:23Z

packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte

@@ -39,6 +36,9 @@
 	/** @type {string | undefined} */
 	export let defaultValue;

+	/** @type {boolean} */
+	let range = true;


Why do we need a range prop on DateRange? DateRange should always be a range in my opinion

archiewood · 2024-12-12T20:33:51Z

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

+	/** @type {string | undefined} */
+	export let defaultValue;
+	/** @type {boolean} */
+	export let range = false;


any user facing boolean should accept a string also

<DateInput range=true />

as well as

<DateInput range={true} />

kwongz added 5 commits November 28, 2024 11:27

updating date input

5f76b11

removed dateInput dropdown

e31bbd4

removed docwrapper

46dd252

fixed preset select

959a449

chore: ling + changeset

a9edd33

vercel bot deployed to Preview – docs November 28, 2024 21:51 View deployment

vercel bot deployed to Preview – next-docs November 28, 2024 21:52 View deployment

kwongz and others added 3 commits November 29, 2024 10:23

added redirect

9da5eb0

added package manager, linted

49c1bac

Merge branch 'next' into feature/2824-date-input

923a5f2

vercel bot deployed to Preview – next-docs November 29, 2024 15:36 View deployment

vercel bot deployed to Preview – docs November 29, 2024 15:36 View deployment

kwongz requested a review from archiewood November 29, 2024 15:49

archiewood requested changes Nov 29, 2024

View reviewed changes

archiewood reviewed Nov 29, 2024

View reviewed changes

kwongz added 2 commits November 29, 2024 11:58

updated docs changes, added default title

af36798

removed y2 from barcharts

4be852e

vercel bot deployed to Preview – next-docs November 29, 2024 17:06 View deployment

vercel bot deployed to Preview – docs November 29, 2024 17:06 View deployment

updated date input ui

0527feb

vercel bot deployed to Preview – docs November 29, 2024 19:05 View deployment

vercel bot deployed to Preview – next-docs November 29, 2024 19:05 View deployment

added margin, lighten color calendar icon

95667bf

vercel bot deployed to Preview – docs December 2, 2024 14:44 View deployment

vercel bot deployed to Preview – next-docs December 2, 2024 14:44 View deployment

stroke-1 text-black

175be7f

vercel bot deployed to Preview – docs December 2, 2024 21:23 View deployment

vercel bot deployed to Preview – next-docs December 2, 2024 21:23 View deployment

changed calendar icon

3150c62

vercel bot had a problem deploying to Preview – docs December 4, 2024 21:25 Failure

vercel bot had a problem deploying to Preview – next-docs December 4, 2024 21:25 Failure

linted

9505d54

vercel bot deployed to Preview – next-docs December 4, 2024 21:30 View deployment

vercel bot deployed to Preview – docs December 4, 2024 21:30 View deployment

add icon to smaller screen width version

d3c9818

archiewood approved these changes Dec 5, 2024

View reviewed changes

packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte Show resolved Hide resolved

kwongz requested a review from ItsMeBrianD December 5, 2024 16:22

added toBoolean check for range prop, removed commented out code

a51230d

vercel bot deployed to Preview – next-docs December 5, 2024 16:52 View deployment

vercel bot deployed to Preview – docs December 5, 2024 16:52 View deployment

refactored reused functions into helper.js - DateInput & DateRange

849bef5

vercel bot deployed to Preview – docs December 5, 2024 20:23 View deployment

vercel bot deployed to Preview – next-docs December 5, 2024 20:24 View deployment

csjh self-requested a review December 11, 2024 19:44

csjh reviewed Dec 11, 2024

View reviewed changes

csjh mentioned this pull request Dec 12, 2024

Fix prerendering of DateRange with defaultValue #2906

Draft

1 task

zachstence requested changes Dec 12, 2024

View reviewed changes

archiewood reviewed Dec 12, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/2824 date input #2864

Feature/2824 date input #2864

kwongz commented Nov 28, 2024 •

edited

Loading

kwongz commented Nov 29, 2024

archiewood Nov 29, 2024

archiewood Nov 29, 2024

kwongz Nov 29, 2024

archiewood Nov 29, 2024

kwongz Nov 29, 2024

archiewood Nov 29, 2024 •

edited

Loading

archiewood Nov 29, 2024

archiewood Nov 29, 2024

kwongz commented Nov 29, 2024 •

edited

Loading

kwongz commented Dec 2, 2024

archiewood commented Dec 2, 2024 •

edited

Loading

kwongz commented Dec 2, 2024

kwongz commented Dec 4, 2024

archiewood commented Dec 4, 2024

archiewood commented Dec 4, 2024

kwongz commented Dec 5, 2024

archiewood commented Dec 5, 2024

archiewood left a comment •

edited

Loading

kwongz commented Dec 5, 2024

csjh Dec 11, 2024

csjh Dec 11, 2024

csjh Dec 11, 2024

csjh Dec 11, 2024

archiewood Dec 12, 2024 •

edited

Loading

csjh Dec 11, 2024

csjh Dec 11, 2024

csjh Dec 11, 2024

zachstence Dec 12, 2024

zachstence Dec 12, 2024

zachstence Dec 12, 2024

archiewood Dec 12, 2024 •

edited

Loading

	where day = '${inputs.range_filtering_a_query.value}'
	where day > '${inputs.range_filtering_a_query.value}'

	Creates a date picker that can be used to filter a query.
	A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.

	/** @type {[]string \| undefined} */
	/** @type {string[] \| undefined} */

	<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
	<Separator orientation="vertical" class="mx-2 h-4 w-[1px]" />


		$: range = toBoolean(range);

		const exec = getQueryFunction();

	MockDate.set('2024-12-30');
	MockDate.set('2024-12-30');
	onMount(() => () => MockDate.reset());

	let currentDate = dateToYYYYMMDD(new Date(Date.now()));
	let currentDate = dateToYYYYMMDD(new Date());

Feature/2824 date input #2864

Are you sure you want to change the base?

Feature/2824 date input #2864

Conversation

kwongz commented Nov 28, 2024 • edited Loading

Description

Checklist

kwongz commented Nov 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archiewood Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwongz commented Nov 29, 2024 • edited Loading

kwongz commented Dec 2, 2024

archiewood commented Dec 2, 2024 • edited Loading

kwongz commented Dec 2, 2024

kwongz commented Dec 4, 2024

archiewood commented Dec 4, 2024

archiewood commented Dec 4, 2024

kwongz commented Dec 5, 2024

archiewood commented Dec 5, 2024

archiewood left a comment • edited Loading

Choose a reason for hiding this comment

kwongz commented Dec 5, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archiewood Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archiewood Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

kwongz commented Nov 28, 2024 •

edited

Loading

archiewood Nov 29, 2024 •

edited

Loading

kwongz commented Nov 29, 2024 •

edited

Loading

archiewood commented Dec 2, 2024 •

edited

Loading

archiewood left a comment •

edited

Loading

archiewood Dec 12, 2024 •

edited

Loading

archiewood Dec 12, 2024 •

edited

Loading