@mystaline/mysta-lib 1.0.0-alpha.10

package/build-entry.d.ts

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from './context';
+export * from './hooks';
+export * from './components';

package/components/button/Button.d.ts

@@ -0,0 +1,119 @@
+import { FC } from 'react';
+import { Severities } from '../../utils';
+import { Icons } from '../icon/Icon.d';
+
+/**
+ * Props for the PrimaryButton component.
+ *
+ * @description Defines the props for the PrimaryButton, including visual customization, loading state, icon support, and click handling.
+ */
+export interface ButtonProps {
+  /**
+   * Height of the button (e.g., px, rem, %, etc.)
+   * Can be specified as a number (pixels) or string (e.g., '50px', '10rem').
+   *
+   * @default '26px'
+   */
+  height?: number | string;
+
+  /**
+   * Width of the button (e.g., px, rem, %, etc.)
+   * Can be specified as a number (pixels) or string (e.g., '100px', '50%').
+   *
+   * @default 'max-content'
+   */
+  width?: number | string;
+
+  /**
+   * Severity level for styling the button (e.g., "error", "warning", "success").
+   * Determines the color and style applied to the button.
+   *
+   * @default 'primary'
+   */
+  severity?: Severities;
+
+  /**
+   * If true, displays a loading spinner instead of the icon or label.
+   * Useful when the button is performing an asynchronous operation.
+   *
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * If true, applies an outlined style (typically a button with just a border).
+   *
+   * @default false
+   */
+  outlined?: boolean;
+
+  /**
+   * If true, applies a text-only style (no background, only text).
+   *
+   * @default false
+   */
+  text?: boolean;
+
+  /**
+   * If true, disables the button, preventing user interaction.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * If true, adds a shadow to indicate elevation (e.g., raised effect).
+   *
+   * @default false
+   */
+  raised?: boolean | undefined;
+
+  /**
+   * If true, applies a circular border radius to the button.
+   *
+   * @default false
+   */
+  rounded?: boolean | undefined;
+
+  /**
+   * Icon to display inside the button.
+   * Should be a valid `Icons` value from the icon library.
+   *
+   * @default undefined
+   */
+  icon?: Icons;
+
+  /**
+   * Text label to display inside the button.
+   * Can be used alongside or instead of the icon.
+   *
+   * @default undefined
+   */
+  label?: string;
+
+  /**
+   * Click handler for the button.
+   * Called when the button is clicked.
+   *
+   * @default undefined
+   */
+  onClick?: () => void;
+
+  /**
+   * Specifies the type of the button.
+   * - 'button': A generic button that does not submit a form.
+   * - 'submit': A button that submits the form.
+   * - 'reset': A button that resets the form fields.
+   *
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+/**
+ * Primary button component with loading, severity, and preset support.
+ *
+ * @component
+ * @description Renders a customizable button with support for loading states, severity levels, icons, and text.
+ */
+export const Button: FC<ButtonProps>;

package/components/card/Card.d.ts

@@ -0,0 +1,127 @@
+import { Severities } from '../../utils';
+import { FC, HTMLAttributes, DragEvent } from 'react';
+import { SeparatorProps } from '../separator/Separator.d';
+import { Icons } from '../icon/Icon.d';
+
+export interface KanbanDropEvent {
+  originalEvent: DragEvent<HTMLDivElement>;
+  destinationId?: string;
+  destinationGroupId?: string;
+}
+
+export interface KanbanDragStartEvent {
+  originalEvent: DragEvent<HTMLDivElement>;
+  draggedId?: string;
+  draggedGroupId?: string;
+}
+
+export interface CardData {
+  originalEvent: MouseEvent;
+  cardId?: string;
+  groupId?: string;
+}
+
+/**
+ * A single entry in a card's context menu, rendered in a popover.
+ */
+export interface CardPopoverMenu extends HTMLAttributes<HTMLSpanElement> {
+  /** Identifier of the icon to display for this menu item */
+  icon: Icons;
+  /** Visual severity level (affects icon color/style) */
+  severity?: Severities;
+  /** Action on click */
+  command?: (e: CardData) => void;
+}
+
+/**
+ * Base props shared by all Card modes.
+ */
+interface BaseCardProps
+  extends Omit<
+      HTMLAttributes<HTMLDivElement>,
+      'content' | 'children' | 'onDrop' | 'onDragStart'
+    >,
+    CardSeparatorProps {
+  /** Optional header text displayed at the top */
+  header?: string;
+  /** Main body text of the card */
+  content?: string;
+  /** Optional footer text displayed at the bottom */
+  footer?: string;
+
+  /**
+   * Unique identifier for the card element.
+   *
+   * If not provided, a UUID v4 will be generated internally. This can also be
+   * set to your own unique ID or an existing ID from backend data (e.g. a database ObjectID) to
+   * maintain consistency between server and client.
+   */
+  id?: string;
+  clickable?: boolean;
+
+  severity?: Severities;
+
+  /**
+   * @default true
+   */
+  useSeparator?: boolean;
+
+  slots?: Record<keyof CardSlots, JSX.Element>;
+
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | 'full';
+}
+
+interface CardKanbanProps extends BaseCardProps {
+  onDrop?: (e: KanbanDropEvent) => void;
+  onDragStart?: (e: KanbanDragStartEvent) => void;
+
+  mode?: 'kanban';
+  menus?: CardPopoverMenu[];
+
+  /**
+   * Identifier used to associate this card with a specific group or column.
+   *
+   * This is particularly useful in Kanban-style layouts where cards are categorized
+   * into different columns or swimlanes. The `groupId` helps distinguish the logical
+   * grouping and can be used to sort, filter, or control drag-and-drop behavior.
+   *
+   * Example values might include a column ID like 'todo', 'in-progress', or 'done'.
+   */
+  groupId?: string;
+}
+
+interface CardContainerProps extends BaseCardProps {
+  mode?: 'container';
+}
+
+export type CardProps = CardKanbanProps | CardContainerProps;
+
+export interface CardSlots {
+  header?: JSX.Element;
+  content?: JSX.Element;
+  footer?: JSX.Element;
+}
+
+export interface CardSeparatorProps {
+  orientation?: SeparatorProps['orientation'];
+  decorative?: SeparatorProps['decorative'];
+}
+
+/**
+ * Card component for custom section.
+ *
+ * @component
+ */
+export const Card: FC<CardProps>;

package/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,81 @@
+import { FC } from 'react';
+
+export type CheckboxValue =
+  | (string | number | Record<string, unknown>)[]
+  | boolean
+  | null;
+
+/**
+ * Props for the Checkbox component.
+ *
+ * @description This defines the props for the Checkbox component including its field name, label, and event handlers.
+ */
+export interface CheckboxProps extends CheckboxEvent, FieldValidation {
+  /** The name of the field used for form submission */
+  fieldName?: string;
+
+  /** The label text to display above the input */
+  label?: string;
+
+  /** Whether the input is disabled */
+  disabled?: boolean;
+
+  /** The value for this checkbox, switch mode to value to use this props */
+  optionValue?: string | number | Record<string, unknown>;
+
+  mode?: 'value' | 'binary' | 'tristate';
+
+  value?: CheckboxValue;
+
+  /** Additional information to display beside the input, typically as a tooltip */
+  info?: string;
+
+  /**
+   * To hide mark asterisk to required field
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+
+  /**
+   * Input role
+   *
+   * @default checkbox
+   */
+  role?: 'toggleswitch' | 'checkbox';
+}
+
+/**
+ * Validation rules for an input field.
+ *
+ * @description Defines various validation rules for the  field, including required fields, min/max length, and custom validation.
+ */
+export interface FieldValidation {
+  /** Whether the input is required */
+  required?: boolean;
+
+  /** Custom validation function to validate the input value */
+  customValidation?: (
+    e: (string | number | Record<string, unknown>)[] | boolean | null,
+  ) => boolean;
+
+  customMessage?: string;
+}
+
+/**
+ * Event handlers for the Checkbox component.
+ *
+ * @description Defines event handler functions related to changes and input in the Checkbox component.
+ */
+export interface CheckboxEvent {
+  /** Called when the input value changes */
+  onChange?: (value: CheckboxValue) => void;
+}
+
+/**
+ * Checkbox component for form input with built-in validation and custom event handling.
+ *
+ * @component
+ * @description Renders an input field with support for labels, validation, dynamic event handling, and optional styling.
+ */
+export const Checkbox: FC<CheckboxProps>;

package/components/dialog/Dialog.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+export interface DialogProps {
+  /**
+   * Dialog children
+   */
+  children?: ReactNode;
+
+  visible?: boolean;
+
+  useCloseIcon?: boolean;
+  closeOnEscape?: boolean;
+  closeOnBlur?: boolean;
+
+  defaultVisibility?: boolean;
+
+  header: string;
+
+  modal?: boolean;
+
+  slots?: Record<keyof DialogSlots, JSX.Element>;
+
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | 'full';
+
+  containerClass?: string;
+  headerClass?: string;
+  contentClass?: string;
+
+  onVisibleChange?: (e: boolean) => void;
+}
+
+export interface DialogSlots {
+  header?: JSX.Element;
+  content?: JSX.Element;
+  footer?: JSX.Element;
+}
+
+export declare const Dialog: (props: DialogProps) => JSX.Element;

package/components/dialogform/DialogForm.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { DialogProps } from '../dialog/Dialog.d';
+import { FormProps } from '../form/Form.d';
+import {
+  UseFormGetValues,
+  UseFormReset,
+  UseFormResetField,
+} from 'react-hook-form';
+
+export interface DialogFormProps<T extends Record<string, any>>
+  extends Omit<DialogProps, 'slots'>,
+    Omit<FormProps<T>, 'slots'> {
+  closeOnSubmit?: boolean;
+  slots?: Record<keyof DialogFormSlots, JSX.Element>;
+}
+
+export interface DialogFormSlots {
+  header?: JSX.Element;
+  content?: JSX.Element;
+  footer?: JSX.Element;
+  formFooter?: JSX.Element;
+}
+
+export declare const DialogForm: <T extends Record<string, any> = any>(
+  props: DialogFormProps<T>,
+) => JSX.Element;

package/components/fieldwrapper/FieldWrapper.d.ts

@@ -0,0 +1,53 @@
+// FieldWrapper.d.ts
+
+import { ReactNode, FC } from 'react';
+import { FieldErrors } from 'react-hook-form';
+
+export interface FieldWrapperProps extends FieldWrapperEvent {
+  errors: FieldErrors<any>;
+
+  /** The name of the field used for form submission */
+  fieldName?: string;
+
+  /**
+   * FieldWrapper children
+   */
+  children?: ReactNode;
+
+  className?: string;
+
+  context?: Partial<
+    Record<'invalid' | 'disabled' | 'containerless' | 'borderless', boolean>
+  >;
+
+  /** The label text to display above the input */
+  label?: string;
+
+  /** Additional information to display beside the input, typically as a tooltip */
+  info?: string;
+
+  /** Whether the input is required */
+  required?: boolean;
+
+  /**
+   * To hide mark asterisk to required field
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+}
+
+/**
+ * Event handlers for the FieldWrapper component.
+ *
+ * @description Defines event handler functions related to DOM interaction in the FieldWrapper component.
+ */
+export interface FieldWrapperEvent {
+  /** Called when the input value changes */
+  onClick?: () => void;
+}
+
+/**
+ * FieldWrapper component.
+ */
+export const FieldWrapper: FC<FieldWrapperProps>;

package/components/form/Form.d.ts

@@ -0,0 +1,98 @@
+import { Severities } from 'lib/utils';
+import { ReactNode, Ref } from 'react';
+import {
+  DeepMap,
+  DeepPartial,
+  FieldErrors,
+  SubmitErrorHandler,
+  SubmitHandler,
+  UseFormClearErrors,
+  UseFormGetValues,
+  UseFormReset,
+  UseFormResetField,
+  UseFormSetError,
+  UseFormSetValue,
+  UseFormWatch,
+} from 'react-hook-form';
+
+export type ButtonConfig = {
+  type: 'back' | 'reset' | 'submit-raw' | 'submit';
+  label?: string;
+  severity?: Severities;
+  style?: 'outlined' | 'text' | 'fill';
+};
+
+export interface FormProps<T extends Record<string, any>> {
+  ref?: Ref<FormHandle<T>>;
+
+  /**
+   * Array of buttons configuration to tell form what button that should be rendered on form footer
+   * Order of array's value take effect to the rendered button order
+   *
+   * No need to write all configurations for each type, each type has its default value that will be used unless you give your custom value
+   * @default - type submit = {type: 'submit', label: 'Submit', severity: 'success', style: 'fill'}
+   * @default - type submit-raw = {type: 'submit-raw', label: 'Save', severity: 'success', style: 'outlined'}
+   * @default - type reset = {type: 'reset', label: 'Clear', severity: 'primary', style: 'text'}
+   * @default - type back = {type: 'back', label: 'Cancel', severity: 'secondary', style: 'text'}
+   *
+   * Only types that exist in the given array that will be rendered
+   * @example - render only button submit and back will need this array
+   *    [
+   *      { type: 'back', label: 'a' },
+   *      { type: 'submit', label: 'b' },
+   *    ]
+   */
+  buttonsConfig: ButtonConfig[];
+
+  /**
+   * Form children
+   */
+  children?: ReactNode;
+
+  slots?: Record<keyof FormSlots, JSX.Element>;
+
+  /**
+   * Determine whether form should be reset to default on submit or not
+   *
+   * @default true
+   */
+  resetOnSubmit?: boolean;
+
+  /**
+   * To gives default value to form
+   *
+   * @default {}
+   */
+  defaultValues?: Record<string, any>;
+
+  /**
+   * Submit emit
+   */
+  onSubmit?: SubmitHandler<T>;
+
+  /**
+   * Error emit
+   */
+  onError?: SubmitErrorHandler<T>;
+}
+
+export interface FormSlots {
+  footer?: JSX.Element;
+}
+
+export interface FormHandle<T extends Record<string, any>> {
+  resetField: UseFormResetField<T>;
+  reset: UseFormReset<T>;
+  getValues: UseFormGetValues<T>;
+  errors: FieldErrors<T>;
+  watch: UseFormWatch<T>;
+  setValue: UseFormSetValue<T>;
+  setError: UseFormSetError<T>;
+  clearErrors: UseFormClearErrors<T>;
+  isDirty: boolean;
+  dirtyFields: Partial<Readonly<DeepMap<DeepPartial<T>, boolean>>>;
+}
+
+export declare const Form: <T extends Record<string, any> = any>(
+  props: FormProps<T>,
+) => JSX.Element;

package/components/icon/Icon.d.ts

@@ -0,0 +1,52 @@
+// types/components.d.ts (or you can name it types/icon.d.ts if it's specific)
+
+import { Severities } from 'lib/utils';
+import React from 'react';
+
+export type Icons =
+  | 'plus'
+  | 'minus'
+  | 'minus-4'
+  | 'info'
+  | 'eye-on'
+  | 'eye-off'
+  | 'check'
+  | 'check-4'
+  | 'x'
+  | 'circle'
+  | 'circle-fill'
+  | 'edit'
+  | 'edit-2'
+  | 'edit-3'
+  | 'trash'
+  | 'trash-2'
+  | 'settings'
+  | 'settings-2'
+  | 'user-circle'
+  | 'sort-asc'
+  | 'sort-desc';
+
+export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Icon class like 'plus', 'minus', etc.
+   * Should be defined with a `--svg` mask in CSS.
+   */
+  name: Icons;
+
+  /**
+   * Additional Tailwind/utility classes
+   */
+  className?: string;
+
+  /**
+   * Tooltip text
+   */
+  tooltip?: string;
+
+  /**
+   * Tooltip position
+   */
+  tooltipPos?: 'right' | 'top' | 'bottom' | 'left';
+
+  severity?: Severities;
+}

package/components/index.d.ts

@@ -0,0 +1,36 @@
+export { Button } from './button/Button';
+export { Card } from './card/Card';
+export { Checkbox } from './checkbox/Checkbox';
+export { Dialog } from './dialog/Dialog';
+export { DialogForm } from './dialogform/DialogForm';
+export { Form } from './form/Form';
+export { KanbanBoard } from './kanbanboard/KanbanBoard';
+export { KanbanColumn } from './kanbancolumn/KanbanColumn';
+export { Icon } from './icon/Icon';
+export { InputEmail } from './inputemail/InputEmail';
+export { InputNumber } from './inputnumber/InputNumber';
+export { InputPassword } from './inputpassword/InputPassword';
+export { InputText } from './inputtext/InputText';
+export { Popover } from './popover/Popover';
+export { RadioButton } from './radiobutton/RadioButton';
+export { Slot } from './slot/Slot';
+export { ToggleSwitch } from './toggleswitch/ToggleSwitch';
+export { Tooltip } from './tooltip/Tooltip';
+export { Button } from './button/Button';
+export { Card } from './card/Card';
+export { Checkbox } from './checkbox/Checkbox';
+export { Dialog } from './dialog/Dialog';
+export { DialogForm } from './dialogform/DialogForm';
+export { Form } from './form/Form';
+export { KanbanBoard } from './kanbanboard/KanbanBoard';
+export { KanbanColumn } from './kanbancolumn/KanbanColumn';
+export { Icon } from './icon/Icon';
+export { InputEmail } from './inputemail/InputEmail';
+export { InputNumber } from './inputnumber/InputNumber';
+export { InputPassword } from './inputpassword/InputPassword';
+export { InputText } from './inputtext/InputText';
+export { Popover } from './popover/Popover';
+export { RadioButton } from './radiobutton/RadioButton';
+export { Slot } from './slot/Slot';
+export { ToggleSwitch } from './toggleswitch/ToggleSwitch';
+export { Tooltip } from './tooltip/Tooltip';

package/components/inputemail/InputEmail.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { BaseInputProps } from '../private/BaseInput.d';
+
+/**
+ * Props for the InputEmail component.
+ *
+ * @description This defines the props for the InputEmail component including its field name, label, and event handlers.
+ */
+export interface InputEmailProps extends Omit<BaseInputProps<string>, 'type'> {}
+
+/**
+ * InputEmail component for form input with built-in validation and custom event handling.
+ *
+ * @component
+ * @description Renders an input field with support for labels, validation, dynamic event handling, and optional styling.
+ */
+export const InputEmail: FC<InputEmailProps>;

package/components/inputnumber/InputNumber.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { BaseInputProps } from '../private/BaseInput.d';
+
+/**
+ * Props for the InputNumber component.
+ *
+ * @description This defines the props for the InputNumber component including its field name, label, and event handlers.
+ */
+export interface InputNumberProps
+  extends Omit<BaseInputProps<number>, 'type'> {}
+
+/**
+ * InputNumber component for form input with built-in validation and custom event handling.
+ *
+ * @component
+ * @description Renders an input field with support for labels, validation, dynamic event handling, and optional styling.
+ */
+export const InputNumber: FC<InputNumberProps>;