@vonq/hapi-elements-types 1.4.0 → 1.5.0

package/src/theming/functions.types.ts

@@ -0,0 +1,13 @@
+import { HapiFontOptions, HapiTheme, HapiThemingThemeProvider } from "./types"
+
+export type ThemeStoreSetThemeProviderHandler = (
+    provider: HapiThemingThemeProvider,
+) => void
+
+export type ThemeStoreSetThemeHandler = (theme: HapiTheme) => void
+export type ThemeStoreSetFontOptionsHandler = (options: HapiFontOptions) => void
+
+export type ThemeStoreFunctions = {
+    setTheme: ThemeStoreSetThemeHandler
+    setFontOptions: ThemeStoreSetFontOptionsHandler
+}

package/src/theming/index.ts

@@ -0,0 +1,11 @@
+// created from 'create-ts-index'
+
+export * from './consts';
+export * from './functions.types';
+export * from './qa.types';
+export * from './state.initial';
+export * from './state.types';
+export * from './state.validations';
+export * from './types';
+export * from './utils';
+export * from './validations.types';

package/src/theming/qa.types.ts

@@ -0,0 +1,11 @@
+import { HapiFontOptions, HapiTheme } from "./types"
+import { ModuleWithConstructorArgs } from "../types"
+import { WindowHapiQA } from "../_window/qa.types"
+
+export type WindowHapiQATheming = ModuleWithConstructorArgs<
+    {
+        setTheme: (updatedTheme: Partial<HapiTheme>) => HapiTheme
+        setFontOptions: (fontOptions: HapiFontOptions) => HapiFontOptions
+    },
+    { readonly qa: WindowHapiQA }
+>

package/src/theming/state.initial.ts

@@ -0,0 +1,16 @@
+import { ThemeStoreState } from "./state.types"
+import { THEME_LIGHT } from "./consts"
+
+export const initialThemeStoreState: ThemeStoreState = {
+    fontOptions: {
+        fontFamily: "Poppins, Roboto, sans-serif",
+        fontFaces: [
+            {
+                src: "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700",
+                rel: "stylesheet",
+                fontFamily: "Poppins",
+            },
+        ],
+    },
+    theme: THEME_LIGHT,
+}

package/src/theming/state.types.ts

@@ -0,0 +1,6 @@
+import { HapiFontOptions, HapiTheme } from "./types"
+
+export type ThemeStoreState = {
+    theme: Partial<HapiTheme>
+    fontOptions: HapiFontOptions
+}

package/src/theming/state.validations.ts

@@ -0,0 +1,8 @@
+import { ThemeStoreState } from "./state.types"
+import { StateValidations } from "../_window/state.types"
+
+export const themeStoreStoreStateValidations: StateValidations<ThemeStoreState> =
+    {
+        theme: "theming.theme",
+        fontOptions: "theming.fontOptions",
+    }

package/src/theming/types.ts

@@ -0,0 +1,123 @@
+import { Theming } from "theming"
+
+export type ThemeGlobalStyles = {
+    borderRadius: string
+
+    primaryBackgroundColor: string
+    primaryTextColor: string
+
+    secondaryBackgroundColor: string
+    secondaryTextColor: string
+
+    successBackgroundColor: string
+    successTextColor: string
+    successSecondaryBackgroundColor: string
+
+    dangerBackgroundColor: string
+    dangerTextColor: string
+    dangerSecondaryBackgroundColor: string
+
+    warningBackgroundColor: string
+    warningTextColor: string
+    warningSecondaryBackgroundColor: string
+
+    infoBackgroundColor: string
+    infoTextColor: string
+    infoSecondaryBackgroundColor: string
+
+    fadedBackgroundColor: string
+    fadedTextColor: string
+
+    accentBackgroundColor: string
+    accentTextColor: string
+}
+
+export type HapiThemingThemeProvider = Theming<HapiTheme>["ThemeProvider"]
+export type HapiThemingUseTheme = Theming<HapiTheme>["useTheme"]
+
+export type HapiThemeRule =
+    | "global"
+    | "link"
+    | "modal"
+    | "modalBackdrop"
+    | "loadingSpinner"
+    | "userJourneyBar"
+    | "card"
+    | "tabHeaders"
+    | "tabHeader"
+    | "tabPanels"
+    | "tabPanel"
+    | "buttonBase"
+    | "buttonPrimary"
+    | "buttonSecondary"
+    | "buttonDanger"
+    | "buttonDangerSecondary"
+    | "buttonInfo"
+    | "buttonInfoSecondary"
+    | "buttonSuccess"
+    | "buttonSuccessSecondary"
+    | "buttonWarning"
+    | "buttonWarningSecondary"
+    | "buttonFaded"
+    | "buttonAccent"
+    | "badgeBase"
+    | "formFieldBase"
+    | "inputSelectBase"
+    | "input"
+    | "inputRange"
+    | "inputHtml"
+    | "inputTags"
+    | "textarea"
+    | "select"
+    | "checkbox"
+    | "radio"
+    | "accordionButton"
+    | "accordionArrow"
+    | "accordionPanel"
+    | "accordionTitle"
+    | "headingBase"
+    | "headingOne"
+    | "headingTwo"
+    | "headingThree"
+    | "headingFour"
+    | "headingFive"
+    | "headingSix"
+    | "alert"
+
+export type HapiThemeComponentVariant =
+    | "primary"
+    | "secondary"
+    | "danger"
+    | "dangerSecondary"
+    | "warning"
+    | "warningSecondary"
+    | "info"
+    | "infoSecondary"
+    | "success"
+    | "successSecondary"
+    | "faded"
+    | "accent"
+
+export type CSSPropertiesInJS = {
+    [key: string]: string | undefined | any[] | (() => any) | any
+}
+
+export type HapiTheme = {
+    [key in HapiThemeRule]: key extends "global"
+        ? Partial<ThemeGlobalStyles>
+        : CSSPropertiesInJS
+}
+
+export type HapiFontOptions = {
+    fontFaces?: ThemeFontFaceOption[]
+    fontFamily: string
+}
+
+export type ThemeFontFaceOption = {
+    fontFamily: string
+    src: string
+    fontWeight?: string
+    fontStyle?: string
+    fontSize?: string
+    rel?: "stylesheet"
+}