logo-icon
STW UI

Types

CarouselSlide

Used in conjunction with the Carousel and Post components.

typescript
interface Slide {
	id: string;
	src: string;
	alt?: string;
}

DatePickerAction

Used in conjunction with the DatePicker components.

typescript
interface DatePickerAction {
	label: string;
	action: () => void;
}

DropResult

Used in conjunction with the FilePicker utility.

typescript
interface DropResult {
	accepted: File[];
	rejected: File[];
}

FormatNumber

Used in conjunction with the formatNumber utility.

typescript
interface FormatNumber {
	notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
	maximumFractionDigits?: number;
	minimumFractionDigits?: number;
	style?: 'decimal' | 'currency' | 'percent' | 'unit';
}

IconData

Used in conjunction with any Icon components. IconData is just an svg element as a string. The interal icons for this package utilize icons from https://materialdesignicons.com/ but you can use any library that provides the raw svg element.

typescript
export const menu = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>';
export const account = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /></svg>';

LightboxAction

Used in conjunction with the Post.Images component.

typescript
interface LightboxAction {
	data: string (IconData);
	action: () => void;
}

Locale

Used in conjunction with the DatePicker component.

typescript
type Locale = {
	weekdays?: string[];
	months?: string[];
	weekStartsOn?: number;
}

const localDefault = {
	weekdays: [
		dayjs().day(0).format('dd'), // Sunday
		dayjs().day(1).format('dd'), // Monday
		dayjs().day(2).format('dd'), // Tuesday
		dayjs().day(3).format('dd'), // Wednesday
		dayjs().day(4).format('dd'), // Thursday
		dayjs().day(5).format('dd'), // Friday
		dayjs().day(6).format('dd')  // Saturday
	],
	months: [
		dayjs().month(0).format('MMMM'),  // January
		dayjs().month(1).format('MMMM'),  // February
		dayjs().month(2).format('MMMM'),  // March
		dayjs().month(3).format('MMMM'),  // April
		dayjs().month(4).format('MMMM'),  // May
		dayjs().month(5).format('MMMM'),  // June
		dayjs().month(6).format('MMMM'),  // July
		dayjs().month(7).format('MMMM'),  // August
		dayjs().month(8).format('MMMM'),  // September
		dayjs().month(9).format('MMMM'),  // October
		dayjs().month(10).format('MMMM'), // November
		dayjs().month(11).format('MMMM')  // December
	],
	weekStartsOn: 0
};

SelectOption

Used in conjunction with the Select component.

typescript
interface SelectOption {
	[key: string]: any;
	value: string;
}

TableColumn

Used in conjunction with the Table component.

typescript
interface TableColumn {
	label: string;
	column: string;
	placement: 'left' | 'center' | 'right';
	class: string;
}

TimelineItem

Used in conjunction with the Timeline component.

typescript
interface TimelineItem {
	type?: 'comment';
	avatar?: string;
	creator: string;
	created: Date;
	description: string;
	icon?: string (IconData);
}

TooltipConfig

Used in conjunction with the tooltip action. STWUI utilizes tippy.js for its tooltips. Refer to their website for official documentation.

typescript
interface TooltipConfig {
	allowHTML?: boolean;
	animation?: 'scale';
	appendTo?: Element;
	arrow?: boolean | string | SVGElement;
	disabled?: boolean;
	content?: string | Element;
	delay?: number | [number, number];
	duration?: number | [number, number];
	hideOnClick?: boolean | 'toggle';
	ignoreAttributes?: boolean;
	inertia?: boolean;
	interactive?: boolean;
	maxWidth?: number | 'none';
	moveTransition?: string;
	offset?: [number, number];
	placement?:
		| 'top'
		| 'top-end'
		| 'right'
		| 'right-start'
		| 'right-end'
		| 'bottom'
		| 'bottom-start'
		| 'bottom-end'
		| 'left'
		| 'left-start'
		| 'left-end'
		| 'auto'
		| 'auto-start'
		| 'auto-end';
	theme?: string;
	trigger?: string;
	triggerTarget?: Element | Element[];
	zIndex?: number;
}

TwSizes

Used in conjunction with the Row component. TwSizes is an interface of all TailwindCSS sizes. These can be referenced on the TailwindCSS website here: https://tailwindcss.com/docs/height

typescript
type TwSizes =
	| '0'
	| '0.5'
	| '1'
	| '1.5'
	| '2'
	| '2.5'
	| '3'
	| '3.5'
	| '4'
	| '5'
	| '6'
	| '7'
	| '8'
	| '9'
	| '10'
	| '11'
	| '12'
	| '14'
	| '16'
	| '20'
	| '24'
	| '28'
	| '32'
	| '36'
	| '40'
	| '44'
	| '48'
	| '52'
	| '56'
	| '60'
	| '64'
	| '72'
	| '80'
	| '96';