@vanilla-bean/components 1.0.0

package/components/Calendar/Calendar.lld.md

@@ -0,0 +1,22 @@
+# Calendar
+
+> ./Calendar.js
+
+Multi-view calendar that renders the same event data differently depending on scale. The key design decision: `view` is an option like any other; changing it triggers a full re-render with the same events laid out for the new context. No view-specific state accumulates.
+
+## Switching view re-renders layout without carrying forward view-specific state
+
+- day, week, and month views have structurally different DOM; changing `view` produces a fresh render so residual state from the previous layout cannot persist
+  - does switching from month to day view reflect the events in the new layout?
+
+## Day view resolves overlap so simultaneous events don't hide each other
+
+- when events occupy the same time slot they share the horizontal space proportionally; events are never stacked invisibly
+  - do two events at the same time render side by side rather than overlapping?
+
+## Date navigation handles year boundaries correctly
+
+**method:** `navigateBackFromJanuary`
+
+- navigating backward from January produces December of the prior year; the calendar does not produce invalid dates at month boundaries
+  - navigateBackFromJanuary() captures result → result.month === 11

package/components/Calendar/CalendarEvent.js

@@ -0,0 +1,102 @@
+import { Component } from '../../Component';
+import { Elem } from '../../Elem';
+import { styled } from '../../styled';
+import { formatDuration, formatTime } from './utils';
+
+const StyledEvent = styled(
+	Component,
+	({ colors }) => `
+		cursor: pointer;
+		color: ${colors.black};
+		background-color: ${colors.yellow};
+
+		& div {
+			pointer-events: none;
+		}
+	`,
+);
+
+export default class CalendarEvent {
+	constructor(data) {
+		if (typeof data !== 'object') throw new TypeError('CalendarEvent requires an object argument');
+
+		this.options = data;
+
+		this.at = new Date(data.at);
+
+		if (Number.isNaN(this.at.getTime())) throw new TypeError('CalendarEvent requires a valid date (options.at)');
+
+		this.label = data.label;
+		this.notes = data.notes;
+		this.color = data.color;
+		this.duration = data.duration;
+		this.recurring = data.recurring;
+		this.daily = data.daily;
+		this.whitelist = data.whitelist;
+		this.blacklist = data.blacklist;
+		this.weekdays = data.weekdays;
+		this.year = this.at.getFullYear();
+		this.month = this.at.getMonth() + 1;
+		this.day = this.at.getDate();
+		this.hour = this.at.getHours();
+		this.minute = this.at.getMinutes();
+		this.fullDate = `${this.month}/${this.day}/${this.year}`;
+	}
+
+	render(type, container, calendar) {
+		const formattedTime = formatTime(this.at);
+
+		const handleSelectEvent = target => {
+			calendar.emit('selectEvent', { target, index: this.options.index });
+		};
+
+		this.eventElem = new StyledEvent({
+			data: { at: this.at },
+			className: 'event',
+			role: 'button',
+			tabindex: '0',
+			'aria-label': `${this.label}, ${formattedTime}${this.duration ? formatDuration(this.duration, ', ') : ''}`,
+			style: { backgroundColor: this.color },
+			append: [
+				new Elem({
+					className: 'time',
+					textContent: `${formattedTime}${this.duration ? formatDuration(this.duration, ', ') : ''}`,
+				}),
+				new Elem({ className: 'label', textContent: this.label }),
+			],
+			appendTo: container,
+			onPointerPress: ({ target }) => handleSelectEvent(target),
+		});
+
+		this.eventElem.on({
+			targetEvent: 'keydown',
+			callback: e => {
+				if (e.key === ' ') e.preventDefault();
+			},
+		});
+
+		this.eventElem.on({
+			targetEvent: 'keyup',
+			callback: e => {
+				if (e.key === ' ' || e.key === 'Enter') handleSelectEvent(e.target);
+			},
+		});
+
+		if (type === 'day') {
+			const gapPosition = this.at.getHours() * 2 + this.at.getMinutes() / 30;
+			const gapHeight = `${(this.duration ? Math.ceil(this.duration / 1000 / 60 / 30) : 1) * 3}em`;
+			const gapTop = `${gapPosition * 3}em`;
+
+			this.eventElem.elem.style.height = gapHeight;
+			this.eventElem.elem.style.top = gapTop;
+			this.eventElem.elem.style.left = '0';
+			this.eventElem.elem.style.zIndex = Math.floor(gapPosition);
+
+			if (this.duration) {
+				this.eventElem.elem.children[0].textContent = formattedTime + formatDuration(this.duration, ', ');
+			}
+		}
+
+		return this.eventElem.elem;
+	}
+}

package/components/Calendar/Toolbar.js

@@ -0,0 +1,78 @@
+import { capitalize } from '../../utils';
+import { styled } from '../../styled';
+import { Component } from '../../Component';
+import { Button } from '../Button';
+
+const Title = styled(
+	Component,
+	() => `
+		text-align: center;
+	`,
+);
+const Left = styled(
+	Component,
+	() => `
+		margin-left: 6px;
+	`,
+);
+const Right = styled(
+	Component,
+	() => `
+		margin-right: 6px;
+	`,
+);
+
+const VIEWS = ['day', 'week', 'month'];
+
+class Toolbar extends Component {
+	constructor({ calendar, view, ...options } = {}, ...children) {
+		super(
+			{
+				...options,
+				style: {
+					display: 'flex',
+					justifyContent: 'space-between',
+					...options.style,
+				},
+			},
+			...children,
+		);
+
+		this.calendar = calendar;
+		this._currentView = view;
+	}
+
+	build() {
+		new Left({
+			appendTo: this,
+			append: ['previous', 'today', 'next'].map(
+				action =>
+					new Button({
+						textContent: { next: '>', today: 'Today', previous: '<' }[action],
+						'aria-label': action,
+						onPointerPress: () => {
+							this.calendar[action]();
+						},
+					}),
+			),
+		});
+
+		this.title = new Title({ appendTo: this });
+
+		new Right({
+			appendTo: this,
+			append: (this.options.views || VIEWS).map(
+				view =>
+					new Button({
+						addClass: [`set-${view}`, ...(view === this._currentView ? ['pressed'] : [])],
+						textContent: capitalize(view),
+						onPointerPress: () => {
+							this.calendar.setView(view);
+						},
+					}),
+			),
+		});
+	}
+}
+
+export default Toolbar;

package/components/Calendar/index.js

@@ -0,0 +1,2 @@
+export { default as Calendar, DAYS, MONTHS } from './Calendar';
+export * from './utils';

package/components/Calendar/utils.js

@@ -0,0 +1,56 @@
+export const getDaysInMonth = (year, month) => {
+	const isLeap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+
+	return {
+		numberOfDays: [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month],
+		firstDay: new Date(year, month).getDay(),
+	};
+};
+
+export const to12hour = hour => {
+	hour = hour < 12 ? hour : hour % 12;
+
+	if (hour === 0) hour = 12;
+
+	return hour;
+};
+
+// eslint-disable-next-line spellcheck/spell-checker
+const nth = ['th', 'st', 'nd', 'rd'];
+export const toNth = number => {
+	if (number > 3 && number < 21) return nth[0];
+
+	return nth[number.toString().slice(-1)] || nth[0];
+};
+
+export const formatTime = (date, options = {}) => {
+	let hours = date.getHours();
+	const minutes = date.getMinutes();
+	const seconds = date.getSeconds();
+
+	let am_pm = '';
+
+	if (!options.display24h) {
+		am_pm = hours < 12 ? 'AM' : 'PM';
+		hours = to12hour(hours);
+	}
+
+	return (
+		hours +
+		(minutes < 10 ? ':0' : ':') +
+		minutes +
+		(seconds && options.displaySeconds ? (seconds < 10 ? ':0' : ':') + seconds : '') +
+		am_pm
+	);
+};
+
+export const formatDuration = (duration, append = '', prepend = '') => {
+	if (!duration) return '';
+
+	duration = Math.floor(duration / 1000 / 60);
+
+	const hours = Math.floor(duration / 60);
+	const minutes = duration % 60;
+
+	return append + (hours ? hours + 'h ' : '') + (minutes ? minutes + 'm' : '') + prepend;
+};

package/components/Code/Code.js

@@ -0,0 +1,84 @@
+import { copyToClipboard } from '../../utils';
+import { Elem } from '../../Elem';
+import { Component } from '../../Component';
+import { Button } from '../Button';
+import { Notify } from '../Notify';
+
+const defaultOptions = { tag: 'code', language: 'javascript', multiline: 'auto' };
+
+/**
+ * Code display component with syntax highlighting and optional copy functionality.
+ *
+ * Renders code blocks with language-specific styling and automatic multiline detection.
+ * Supports inline code spans and multiline code blocks with optional copy-to-clipboard button.
+ * @param {object} [options={}] - Code component configuration options
+ * @param {string} [options.tag='code'] - HTML tag, automatically set to 'pre' for multiline code
+ * @param {string} [options.language='javascript'] - Programming language for syntax highlighting class
+ * @param {string|boolean} [options.multiline='auto'] - Whether to render as multiline block ('auto' detects newlines)
+ * @param {string} [options.code] - Code content to display
+ * @param {boolean} [options.copyButton] - Whether to show copy-to-clipboard button
+ * @param {...(Component|HTMLElement|string)} children - Child elements to append
+ * @returns {Code} Code component instance
+ */
+class Code extends Component {
+	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
+
+	constructor(options = {}, ...children) {
+		if ((options.multiline || defaultOptions.multiline) === 'auto') {
+			options.multiline = (options.code || '').includes('\n');
+		}
+
+		super(
+			{
+				...defaultOptions,
+				...options,
+				...(options.multiline ? { tag: 'pre' } : { tag: 'code' }),
+			},
+			...children,
+		);
+	}
+
+	build() {
+		if (this.options.multiline) {
+			this._code = new Elem({
+				tag: 'code',
+				textContent: this.options.code,
+				appendTo: this.elem,
+			});
+		}
+
+		if (this.options.copyButton)
+			this.append(
+				new Button({
+					icon: 'copy',
+					tooltip: 'Copy to clipboard',
+					onPointerPress: () => {
+						const clipboardWriteSuccess = copyToClipboard(this.options.code);
+
+						if (clipboardWriteSuccess) {
+							const { right: x, top: y } = this.elem.getBoundingClientRect();
+
+							new Notify({ content: 'Copied text to clipboard!', timeout: 1000, x, y });
+						}
+					},
+				}),
+			);
+	}
+
+	static handlers = {
+		language(value) {
+			if (this.options.multiline && this._code) {
+				this._code.removeClass(/\blanguage-\S+\b/g);
+				this._code.addClass(`language-${value}`);
+			}
+
+			this.removeClass(/\blanguage-\S+\b/g);
+			this.addClass(`language-${value}`);
+		},
+		code(value) {
+			(this.options.multiline && this._code ? this._code : this).elem.textContent = value;
+		},
+	};
+}
+
+export default Code;

package/components/Code/Code.lld.md

@@ -0,0 +1,21 @@
+# Code
+
+> ./Code.js
+
+Code display that automatically promotes from inline to block when the content spans multiple lines. The decision: callers pass code and the component determines the appropriate element; callers never choose between `code` and `pre>code` themselves.
+
+## Multiline content renders as a block element without the caller specifying it
+
+- the component detects newlines at render time and promotes accordingly
+  - does code with newlines render as a block (pre) rather than an inline element?
+  - does single-line code render inline?
+
+## Language class enables syntax highlighting libraries to identify the element
+
+- the `language` option adds a `language-{name}` class; highlighting libraries target this class by convention
+  - does the language option add an identifiable class to the code element?
+
+## Copy confirms success visually — clipboard writes can fail silently
+
+- the copy button shows a notification on success so the user knows the copy worked rather than discovering it failed on paste
+  - does a successful copy show the user a confirmation?

package/components/Code/index.js

@@ -0,0 +1 @@
+export { default as Code } from './Code';