@heliosgraphics/ui 2.0.0-alpha.62

package/types/scale.ts

@@ -0,0 +1,28 @@
+export type HeliosScaleType =
+	| "px"
+	| 0
+	| 1
+	| 2
+	| 4
+	| 6
+	| 8
+	| 10
+	| 12
+	| 14
+	| 16
+	| 18
+	| 20
+	| 22
+	| 24
+	| 26
+	| 28
+	| 30
+	| 32
+	| 48
+	| 64
+	| 80
+	| 96
+
+export type HeliosRadiusType = "none" | "small" | "normal" | "large"
+
+export type HeliosSizeType = "normal" | "small" | "tiny"

package/types/scope.ts

@@ -0,0 +1,71 @@
+import type {
+	BreadcrumbItem,
+	ButtonGroupProps,
+	DonutSizeType,
+	HeliosColorType,
+	HeliosEmphasisType,
+	HeliosIconType,
+	HeliosIntentionType,
+	HeliosPositionType,
+	HeliosScaleType,
+	HeliosSizeType,
+	PieItem,
+	ResultItem,
+	SelectItem,
+} from ".."
+
+export interface Scope {
+	APPEARANCE: "light" | "dark"
+	BREADCRUMB_ITEMS: Array<BreadcrumbItem>
+	BUTTONGROUP_ALIGN: ButtonGroupProps["align"]
+	CHECKBOX_LABEL: string
+	CHILDREN: string
+	COLOR: HeliosColorType
+	COLOR_ACCENT: HeliosColorType
+	DATE: string
+	DATE_FORMAT: string
+	DONUT_SIZE: DonutSizeType
+	EMPHASIS: HeliosEmphasisType
+	FUNCTION: () => void
+	GAP: HeliosScaleType
+	HELPER_TEXT: string
+	ICON: HeliosIconType
+	ICON_ACCENT: HeliosIconType
+	INPUT_LABEL: string
+	INTENT: HeliosIntentionType
+	INTENT_PARAGRAPH: string
+	INTENT_TITLE: string
+	IS_ACTIVE: boolean
+	IS_CENTERED: boolean
+	IS_CHECKED: boolean
+	IS_COLUMN: boolean
+	IS_DISABLED: boolean
+	IS_LOADING: boolean
+	IS_NARROW: boolean
+	IS_OPEN: boolean
+	IS_ROUND: boolean
+	IS_ROUNDED: boolean
+	MARKDOWN: string
+	ON_RADIO_CHANGE: () => void
+	ON_SELECT_ITEM: (item: SelectItem) => void
+	ON_TEXTAREA_CHANGE: () => void
+	ON_TEXT_CHANGE: () => void
+	ON_TOGGLE_OPEN: () => void
+	PERCENTAGE: number
+	PIE_ITEMS: Array<PieItem>
+	PILL_LABEL: string
+	POSITION: HeliosPositionType
+	RADIO: string
+	RADIO_LABEL: string
+	RESULT_LIST_ITEMS: Array<ResultItem>
+	SCALE: HeliosScaleType
+	SELECT_ITEMS: Array<SelectItem>
+	SIZE: HeliosSizeType
+	TAB_ITEMS: Array<string>
+	TAB_SECTIONS: Array<unknown>
+	TEXTAREA: string
+	TEXTAREA_LABEL: string
+	TEXTAREA_PLACEHOLDER: string
+	TEXT_LABEL: string
+	TEXT_VALUE: string
+}

package/types/themes.ts

@@ -0,0 +1 @@
+export type HeliosThemeType = "dark" | "light" | "system"

package/types/typography.ts

@@ -0,0 +1 @@
+export type HeliosFontFamilyType = "sans" | "serif" | "mono"

package/utils/colors.ts

@@ -0,0 +1,11 @@
+import { COLORS } from ".."
+import type { HeliosAppearanceType, HeliosColorType } from ".."
+
+export const getColorClasses = (
+	consideredColor: HeliosColorType,
+	consideredAppearance: HeliosAppearanceType,
+): Array<string> => {
+	const suffix: string = consideredAppearance === "light" ? "-soft" : ""
+
+	return COLORS.filter((color) => color === consideredColor).map((color) => `ui-${color}${suffix}`)
+}

package/utils/dayjs.ts

@@ -0,0 +1,21 @@
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+
+dayjs.extend(relativeTime)
+
+export const formatDate = (date?: string | null, format?: string): string => {
+	if (!date || !format) return ""
+
+	const formatted: string = dayjs(date).format(format)
+
+	return formatted
+}
+
+export const getIsValid = (date?: string | null): boolean => {
+	const parseDate = dayjs(date)
+	const isValid: boolean = parseDate.isValid()
+
+	return isValid
+}
+
+export const getFromNow = (date?: string | null): string => dayjs(date).fromNow()