@open-xamu-co/ui-common-types 1.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2023 @xamu-co
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Xamu UI, types

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@open-xamu-co/ui-common-types",
+  "version": "1.0.0",
+  "description": "Xamu shared types",
+  "author": "@xamu-co",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "type": "module",
+  "files": [
+    "src/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xamu-co/ui.git"
+  },
+  "keywords": [
+    "ts",
+    "js",
+    "types"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xamu-co/ui/issues"
+  },
+  "homepage": "https://github.com/xamu-co/ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node -e \"console.log('Build step not required')\"",
+    "build:legacy": "rimraf dist && tsc --outDir dist --declaration --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@open-xamu-co/ui-common-enums": "^1.0.0"
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-common-types": "^6.4.0",
+    "sweetalert2": "^11.7.5"
+  },
+  "engines": {
+    "node": ">=16.19.0",
+    "yarn": ">=1.22.4"
+  },
+  "browserslist": [
+    "defaults"
+  ]
+}

package/src/fetch.ts

@@ -0,0 +1,48 @@
+export type tOrderBy = [string, ("desc" | "asc")?];
+
+export interface iPageEdge<T, C extends string | number = string> {
+	cursor: C;
+	node: T;
+}
+
+export interface iPage<T, C extends string | number = string> {
+	edges: iPageEdge<T, C>[];
+	pageInfo: {
+		nextCursor?: C;
+		previousCursor?: C;
+		hasNextPage: boolean;
+		hasPreviousPage: boolean;
+		path?: string;
+	};
+	totalCount: number;
+}
+
+export interface iPagination {
+	/**
+	 * Identificador del elemento donde empieza la paginacion
+	 *
+	 * starts at 0
+	 */
+	at?: string | number;
+	/**
+	 * Cantidad de elementos (limite)
+	 */
+	first?: number;
+	/**
+	 * JSON string
+	 * aplica a cualquiera columna
+	 * ej: ["id", "asc" ], order ascendente de id
+	 * ej: ["id", "desc" ], order descendente de id
+	 */
+	orderBy?: tOrderBy;
+}
+
+/**
+ * Hydrate fetch ref (no refresh)
+ */
+export type tHydrate<T> = (c: T, e?: unknown) => void;
+
+export type iGetPage<T, C extends string | number = string> = (
+	hydrate: tHydrate<iPage<T, C> | null>,
+	params?: iPagination
+) => Promise<iPage<T, C>>;

package/src/files.ts

@@ -0,0 +1,5 @@
+export interface iMime {
+	mime: string;
+	pattern: number[];
+	mask: number[];
+}

package/src/form.ts

@@ -0,0 +1,148 @@
+import type { IconName } from "@fortawesome/fontawesome-common-types";
+
+import { eFormTypeComplex, eFormTypeSimple } from "@open-xamu-co/ui-common-enums";
+
+export interface iSelectOption {
+	value: string | number;
+	alias?: string;
+	selected?: boolean;
+	/**
+	 * Font awesome icon
+	 */
+	icon?: IconName;
+	/**
+	 * Color or image url
+	 */
+	pattern?: string;
+	placeholder?: string;
+}
+
+export interface iIndicative extends iSelectOption {
+	code: string;
+	number: number;
+}
+
+export interface iInvalidInput {
+	name: string;
+	invalidValue: unknown[];
+}
+
+/**
+ * Form Values to be send
+ */
+export interface iFormResults<T = Record<string, unknown>> {
+	values: T;
+	invalidInputs: iInvalidInput[];
+}
+
+export type tTextInputType = "text" | "email" | "password" | "search" | "url" | "number" | "tel";
+
+export type tFormAutocomplete =
+	| "off"
+	| "on"
+	| "name"
+	| "honorific-prefix"
+	| "given-name"
+	| "additional-name"
+	| "family-name"
+	| "honorific-suffix"
+	| "nickname"
+	| "email"
+	| "username"
+	| "new-password"
+	| "current-password"
+	| "one-time-code"
+	| "organization-title"
+	| "organization"
+	| "street-address"
+	| "address-line1"
+	| "address-line2"
+	| "address-line3"
+	| "address-level4"
+	| "address-level3"
+	| "address-level2"
+	| "address-level1"
+	| "country"
+	| "country-name"
+	| "postal-code"
+	| "cc-name"
+	| "cc-given-name"
+	| "cc-additional-name"
+	| "cc-family-name"
+	| "cc-number"
+	| "cc-exp"
+	| "cc-exp-month"
+	| "cc-exp-year"
+	| "cc-csc"
+	| "cc-type"
+	| "transaction-currency"
+	| "transaction-amount"
+	| "language"
+	| "bday"
+	| "bday-day"
+	| "bday-month"
+	| "bday-year"
+	| "sex"
+	| "tel"
+	| "tel-country-code"
+	| "tel-national"
+	| "tel-area-code"
+	| "tel-local"
+	| "tel-extension"
+	| "impp"
+	| "url";
+
+export type iFormIconProps = { brand?: boolean; regular?: boolean };
+
+export type tFormIcon = [IconName | undefined, iFormIconProps];
+
+export type iFormValue = string | number | boolean | File;
+
+/**
+ * Simple input
+ */
+export interface iFormInputDefault<T extends eFormTypeSimple | eFormTypeComplex = eFormTypeSimple> {
+	required?: boolean;
+	type?: T;
+	options?: (string | number | iSelectOption)[];
+	/**
+	 * String without the dots
+	 */
+	placeholder?: string;
+	icon?: IconName | tFormIcon;
+	autocomplete?: tFormAutocomplete;
+	/**
+	 * if muliple is set to true this optional value would be the required minimun amount of values
+	 */
+	min?: number;
+	/**
+	 * if multiple is set to true this optional value would be the mandatory maximun amount of values
+	 */
+	max?: number;
+}
+
+/**
+ * Complex input, sub input support
+ */
+export interface iFormInput<V extends iFormValue = iFormValue>
+	extends iFormInputDefault<eFormTypeSimple | eFormTypeComplex> {
+	name: string;
+	/**
+	 * An array of values to simplify validation
+	 *
+	 * @old value
+	 */
+	values?: (V | V[])[];
+	defaults?: [iFormInputDefault, iFormInputDefault, ...iFormInputDefault[]];
+	/**
+	 * Visible over the field, should describe it
+	 */
+	title?: string;
+	/**
+	 * input is of type array
+	 * to require a range or a fixed amount use alongside min & max
+	 *
+	 * Ex: { multiple: true, min:3, max:3 } would make 3 values a requirement
+	 */
+	multiple?: boolean;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./files.js";
+export * from "./form.js";
+export * from "./transform.js";
+export * from "./styles.js";
+export * from "./props.js";
+export * from "./locale.js";
+export * from "./plugin.js";
+export * from "./fetch.js";

package/src/locale.ts

@@ -0,0 +1,296 @@
+/**
+ * Base locale
+ *
+ * @localeType
+ */
+export interface iLocaleBase {
+	/** @example "Yes" */
+	yes: string;
+	/** @example "No" */
+	no: string;
+	/** @example "Increase" */
+	increase: string;
+	/** @example "Decrease" */
+	decrease: string;
+	/** @example "Couldn't get the data" */
+	could_not_get_data: string;
+	/** @example "Nothing to show" */
+	nothing_to_show: string;
+	/** @example "Loading..." */
+	loading: string;
+	/** @example "Close" */
+	close: string;
+	/** @example "Ok" */
+	ok: string;
+	/** @example "See value" */
+	see_value: string;
+	/** @example "See: \"{name}\"" */
+	see_name: string;
+	/** @example "Add" */
+	add: string;
+	/** @example "Clear" */
+	clear: string;
+	/** @example "* Required. The information provided will be verified." */
+	required_verification: string;
+	/** @example "Previous" */
+	previous: string;
+	/** @example "Next" */
+	next: string;
+	/** @example "Send" */
+	send: string;
+	/** @example "Select to delete | Delete | Delete {count}" */
+	delete: string;
+	/** @example "Delete all" */
+	delete_all: string;
+	/** @example "Pick" */
+	pick: string;
+	/** @example "Refresh" */
+	refresh: string;
+	swal: {
+		/** @example "Cancel" */
+		cancel: string;
+		/** @example "Continue" */
+		continue: string;
+		/** @example "¡Connection error!" */
+		connection_error: string;
+		/** @example "The server is not responding. Please check your network or try again later" */
+		connection_error_message: string;
+		/** @example "Retry" */
+		connection_error_confirm: string;
+		/** @example "Incomplete data" */
+		incomplete_data: string;
+		/** @example "Fill the data acorddinly" */
+		incomplete_data_message: string;
+		/** @example "Don't close this window while we finish the task" */
+		dont_close_window: string;
+	};
+}
+
+/**
+ * Input locale
+ *
+ * @localeType
+ */
+export interface iLocaleInput {
+	/** @example "--SELECT--" */
+	select_placeholder: string;
+	/** @example "Restablish field" */
+	select_restablish_field: string;
+	/** @example "Type or Double click for options" */
+	select_filter_options: string;
+	/** @example "{count} of {amount}" */
+	file_one_of_amount: string;
+	/** @example "Delete file | Delete files" */
+	file_delete_files: string;
+	/** @example "Thumbnail" */
+	file_thumb: string;
+	/** @example "Choose a file | Choose files" */
+	file_choose_file: string;
+	/** @example "Or drop it here | Or drop them here" */
+	file_or_drop_files_here: string;
+	/** @example "maximum {size}MB per file" */
+	file_max_file_size_mb: string;
+	/** @example "Drop file here | Drop files here" */
+	file_drop_files_here: string;
+	/** @example "Completed" */
+	file_completed: string;
+	/** @example "Loading file... | Loading files..." */
+	file_loading_files: string;
+	swal: {
+		/** @example "File limit" */
+		file_limit: string;
+		/** @example "This field only allows {amount} file | This field only allows {amount} files" */
+		file_limit_text: string;
+		/** @example "Wrong format" */
+		file_wrong_format_image: string;
+		/** @example "This field only allows image files" */
+		file_wrong_format_image_text: string;
+		/** @example "File too big" */
+		file_too_big: string;
+		/** @example "The file exceeds the allowed size" */
+		file_too_big_text: string;
+		/** @example "Something went wrong" */
+		file_unknown_error: string;
+		/** @example "There was an error uploding the files, try again later" */
+		file_unknown_error_text: string;
+	};
+}
+
+/**
+ * Modal locale
+ *
+ * @localeType
+ */
+export interface iLocaleModal {
+	/** @example "Taking too long?" */
+	modal_taking_too_long: string;
+	swal: {
+		/** @example "Unauthorized" */
+		modal_unauthorized: string;
+		/** @example "You are not allowed to perform this action" */
+		modal_unauthorized_text: string;
+	};
+}
+
+/**
+ * Form locale
+ *
+ * @localeType
+ */
+export interface iLocaleForm {
+	/** @example "Options are required" */
+	form_required_options: string;
+	/** @example "No values are required | A value is required | {count} values are required" */
+	form_requires_n_values: string;
+	/** @example "Look for country" */
+	form_country: string;
+	/** @example "Look for state" */
+	form_state: string;
+	/** @example "Look for city" */
+	form_city: string;
+	/** @example "Desired password" */
+	form_desired_password: string;
+	/** @example "Confirm password" */
+	form_confirm_password: string;
+	/** @example "Check password" */
+	form_check_password: string;
+	/** @example "Password" */
+	form_password: string;
+	/** @example "E-mail address" */
+	form_email: string;
+	/** @example "Phone line" */
+	form_phone_line: string;
+	/** @example "Cellphone number" */
+	form_cellphone: string;
+	/** @example "ID number" */
+	form_id_number: string;
+	/** @example "Complete the field" */
+	form_complete_the_field: string;
+	/** @example "Location" */
+	form_location: string;
+	/** @example "This field is required" */
+	form_required_field: string;
+	/** @example "You should use a valid E-mail address" */
+	form_use_valid_email: string;
+	/** @example "Too short. Use a valid phone number" */
+	form_use_valid_phone: string;
+	/** @example "You should use a valid cellphone number" */
+	form_use_valid_cellphone: string;
+	/** @example "The passwords are unmatching" */
+	form_unmatching_passwords: string;
+	/** @example "Invalid data" */
+	form_invalid_data: string;
+	// swal: {};
+}
+
+/**
+ * Table locale
+ *
+ * @localeType
+ */
+export interface iLocaleTable {
+	/** @example "See {name}" */
+	table_see_values: string;
+	/** @example "See: \"{name}\"" */
+	table_see_name: string;
+	/** @example "Create new" */
+	table_create_new: string;
+	/** @example "Quantity: {count} */
+	table_quantity: string;
+	/** @example "Modify" */
+	table_modify: string;
+	/** @example "Select" */
+	table_select: string;
+	/** @example "Select all" */
+	table_select_all: string;
+	/** @example "Update" */
+	table_update: string;
+	/** @example "Update: \"{name}\"" */
+	table_update_name: string;
+	/** @example "Delete" */
+	table_delete: string;
+	/** @example "Delete: \"{name}\"" */
+	table_delete_name: string;
+	/** @example "Showing: \"{name}\"" */
+	table_showing_name: string;
+	/** @example "Sort by: \"{name}\"" */
+	table_sort_by_name: string;
+	/** @example "Duplicate" */
+	table_duplicate: string;
+	/** @example "Options" */
+	table_options: string;
+	/** @example "Open URL" */
+	table_open_url: string;
+	swal: {
+		/** @example "Are you sure you want to delete this element?" */
+		table_delete_node_title: string;
+		/** @example "Remember that you wont be able to recover this element data and you will lost all of your work" */
+		table_delete_node_disclaimer: string;
+		/** @example "Successfull deletion" */
+		table_deleted: string;
+		/** @example "Are you sure you want to delete this element? | Are you sure you want to delete these {count} elements?" */
+		table_delete_nodes_title: string;
+		/** @example "Remember that you wont be able to recover these elements data and you will lost all of your work" */
+		table_delete_nodes_disclaimer: string;
+		/** @example "The item may not have been deleted | The items may not have been deleted" */
+		table_possibly_not_deleted: string;
+		/** @example "Successfull update" */
+		table_updated: string;
+		/** @example "The item may not have been updated | The items may not have been updated" */
+		table_possibly_not_updated: string;
+		/** @example "Successfull cloning" */
+		table_cloned: string;
+		/** @example "The item may not have been cloned | The items may not have been cloned" */
+		table_possibly_not_cloned: string;
+	};
+}
+
+/**
+ * Pagination locale
+ *
+ * @localeType
+ */
+export interface iLocalePagination {
+	/** @example "No items | Single item | {count} items" */
+	pagination_items: string;
+	/** @example "No pages | Single page | {count} pages" */
+	pagination_pages: string;
+	/** @example "Order: relevance" */
+	pagination_order_relevance: string;
+	/** @example "Order: more recent" */
+	pagination_order_recent: string;
+	/** @example "Order: more older" */
+	pagination_order_older: string;
+	/** @example "Order: lower price" */
+	pagination_order_expensive: string;
+	/** @example "Order: high price" */
+	pagination_order_cheaper: string;
+	/** @example "Order: alphabetically (Asc.)" */
+	pagination_order_az: string;
+	/** @example "Order: alphabetically (Desc.)" */
+	pagination_order_za: string;
+	/** @example "Filter by:" */
+	pagination_filter_by: string;
+	// swal: {};
+}
+
+/**
+ * Plugin locale
+ *
+ * @localeType
+ */
+export type tPluginLocale = iLocaleBase &
+	iLocaleInput &
+	iLocaleModal &
+	iLocaleForm &
+	iLocaleTable &
+	iLocalePagination;
+
+/**
+ * Plugin locale key union
+ *
+ * @localeType
+ */
+export type tPluginLocaleKey =
+	| Exclude<keyof tPluginLocale, "swal">
+	| `swal.${keyof Required<tPluginLocale>["swal"]}`;

package/src/plugin.ts

@@ -0,0 +1,118 @@
+import { componentNames } from "@open-xamu-co/ui-common-enums";
+
+import type { tPluginLocale } from "./locale.js";
+import type { SweetAlertOptions } from "sweetalert2";
+
+export type tComponent = (typeof componentNames)[number];
+
+export type tSupportedLangs =
+	| "kr"
+	| "pt"
+	| "nl"
+	| "hr"
+	| "fa"
+	| "de"
+	| "es"
+	| "en"
+	| "fr"
+	| "ja"
+	| "it"
+	| "cn"
+	| "tr";
+
+export interface iPluginOptions<ComponentType = unknown> {
+	/**
+	 * Use web components
+	 */
+	webComponents?: boolean;
+	/**
+	 * Register all or specific components globally
+	 *
+	 * @default true
+	 */
+	globalComponents?: boolean | tComponent[];
+	/**
+	 * Components prefix
+	 *
+	 * @default "xamu"
+	 * @example xamu-component-name or XamuComponentName
+	 */
+	componentPrefix?: string;
+	/**
+	 * Router component
+	 * If a router is used this component is required for buttons to work
+	 */
+	routerComponent?: ComponentType | string;
+	/**
+	 * Image component
+	 * Optional image optimization component
+	 */
+	imageComponent?: ComponentType | string;
+	/**
+	 * Host that contain images
+	 * Treat the url within them as images
+	 *
+	 * @example ["lh3.googleusercontent.com"]
+	 * */
+	imageHosts?: string[];
+	/**
+	 * Locales language code
+	 * @default en - English locale
+	 *
+	 * Used to localize external data
+	 */
+	lang?: tSupportedLangs;
+	/**
+	 * Global locale values
+	 * @default en - English locale
+	 *
+	 * You can implement your own or find more locale at "@open-xamu-co/ui-common-helpers/locale"
+	 */
+	locale?: tPluginLocale;
+	mediaQueryPixels?: {
+		/**
+		 * Laptop media query limit (max-width) in px
+		 *
+		 * @default 1080
+		 * @mediaQuery
+		 */
+		laptop?: number;
+		/**
+		 * Tablet media query limit (max-width) in px
+		 *
+		 * @default 768
+		 * @mediaQuery
+		 */
+		tablet?: number;
+		/**
+		 * Mobile media query limit (max-width) in px
+		 *
+		 * @default 576
+		 * @mediaQuery
+		 */
+		mobile?: number;
+	};
+	swal?: {
+		overrides?: SweetAlertOptions;
+		preventOverrides?: SweetAlertOptions;
+		loaderOverrides?: SweetAlertOptions;
+	};
+	/**
+	 * Iso2 code for the default country
+	 *
+	 * When a country is provided forms will omit that field
+	 */
+	country?: string;
+	/**
+	 * Disable automatic animations
+	 */
+	disableAutoAnimate?: boolean;
+	/**
+	 * Use pro Font Awesome icons (regular, light)
+	 */
+	fontAwesomePro?: boolean;
+	/**
+	 * Default pagination limit
+	 */
+	first?: number;
+}

package/src/props.ts

@@ -0,0 +1,3 @@
+export type tProp<T extends string = string> = T | Record<T, boolean>;
+export type tProps<T extends string = string> = tProp<T> | tProp<T>[];
+export type tPropsModifier<T extends string = string> = boolean | tProps<T>;

package/src/styles.ts

@@ -0,0 +1,8 @@
+import { eColors } from "@open-xamu-co/ui-common-enums";
+
+/**
+ * Union of supported colors.
+ * @colors
+ */
+export type tThemeModifier = (typeof eColors)[keyof typeof eColors]; // to union
+export type tThemeTuple = [tThemeModifier, tThemeModifier?];

package/src/transform.ts

@@ -0,0 +1,12 @@
+/**
+ * Allows prefixing & suffixing of object properties
+ *
+ * @see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#key-remapping-in-mapped-types
+ */
+export type tPropertyMapping<
+	T extends Record<string, unknown>,
+	Prefix extends string = "",
+	Suffix extends string = "",
+> = {
+	[K in keyof T as `${Prefix}${Capitalize<string & K>}${Capitalize<string & Suffix>}`]: T[K];
+};