refactor(web): move all types into typings folder

web/src/typings/alert.ts

@@ -0,0 +1,12 @@
+export interface AlertProps {
+  header: string;
+  content: string;
+  centered?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  overflow?: boolean;
+  cancel?: boolean;
+  labels?: {
+    cancel?: string;
+    confirm?: string;
+  };
+}

web/src/typings/context.ts

@@ -0,0 +1,29 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface Option {
+  menu?: string;
+  title?: string;
+  description?: string;
+  arrow?: boolean;
+  image?: string;
+  icon?: IconProp;
+  iconColor?: string;
+  progress?: number;
+  colorScheme?: string;
+  metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[];
+  disabled?: boolean;
+  event?: string;
+  serverEvent?: string;
+  args?: any;
+}
+
+export interface Options {
+  [key: string]: Option;
+}
+
+export interface ContextMenuProps {
+  title: string;
+  menu?: string;
+  canClose?: boolean;
+  options: Options | Option[];
+}

web/src/typings/dialog.ts

@@ -0,0 +1,73 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface InputProps {
+  heading: string;
+  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput | ITextarea | ITimeInput>;
+  options?: {
+    allowCancel?: boolean;
+  };
+}
+
+type BaseField<T, U> = {
+  type: T;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  default?: U;
+  icon?: IconProp;
+  disabled?: boolean;
+  required?: boolean;
+};
+
+export interface IInput extends BaseField<'input', string> {
+  password?: boolean;
+}
+
+export interface ICheckbox {
+  type: 'checkbox';
+  label: string;
+  checked?: boolean;
+  disabled?: boolean;
+  description?: string;
+  required?: boolean;
+}
+
+export type OptionValue = { value: string; label?: string };
+export interface ISelect extends BaseField<'select' | 'multi-select', string | string[]> {
+  options: Array<OptionValue>;
+  clearable?: boolean;
+}
+
+export interface INumber extends BaseField<'number', number> {
+  min?: number;
+  max?: number;
+}
+
+export interface ISlider extends Omit<BaseField<'slider', number>, 'description' | 'placeholder'> {
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface IColorInput extends BaseField<'color', string> {
+  format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+}
+
+export interface IDateInput
+  extends Omit<BaseField<'date' | 'date-range', string | [string, string] | true>, 'placeholder'> {
+  format?: string;
+  clearable?: boolean;
+  min?: string;
+  max?: string;
+}
+
+export interface ITimeInput extends Omit<BaseField<'time', string>, 'placeholder'> {
+  format?: '12' | '24';
+  clearable?: boolean;
+}
+
+export interface ITextarea extends BaseField<'textarea', string> {
+  autosize?: boolean;
+  min?: number;
+  max?: number;
+}

web/src/typings/index.ts

@@ -0,0 +1,9 @@
+export * from './alert';
+export * from './context';
+export * from './dialog';
+export * from './menu';
+export * from './notifications';
+export * from './progress';
+export * from './radial';
+export * from './skillcheck';
+export * from './textui';

web/src/typings/menu.ts

@@ -0,0 +1,24 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export interface MenuItem {
+  label: string;
+  progress?: number;
+  colorScheme?: string;
+  checked?: boolean;
+  values?: Array<string | { label: string; description: string }>;
+  description?: string;
+  icon?: IconProp;
+  iconColor?: string;
+  defaultIndex?: number;
+  close?: boolean;
+}
+
+export interface MenuSettings {
+  position?: MenuPosition;
+  title: string;
+  canClose?: boolean;
+  items: Array<MenuItem>;
+  startItemIndex?: number;
+}

web/src/typings/notifications.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ToastPosition } from 'react-hot-toast';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface NotificationProps {
+  style?: React.CSSProperties;
+  description?: string;
+  title?: string;
+  duration?: number;
+  icon?: IconProp;
+  iconColor?: string;
+  position?: ToastPosition | 'top' | 'bottom';
+  id?: number | string;
+  type?: string;
+}

web/src/typings/progress.ts

@@ -0,0 +1,11 @@
+export interface CircleProgressbarProps {
+  label?: string;
+  duration: number;
+  position?: 'middle' | 'bottom';
+  percent?: boolean;
+}
+
+export interface ProgressbarProps {
+  label: string;
+  duration: number;
+}

web/src/typings/radial.ts

@@ -0,0 +1,6 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface RadialMenuItem {
+  icon: IconProp;
+  label: string;
+}

web/src/typings/skillcheck.ts

@@ -0,0 +1,13 @@
+interface CustomGameDifficulty {
+  areaSize: number;
+  speedMultiplier: number;
+}
+
+export type GameDifficulty = 'easy' | 'medium' | 'hard' | CustomGameDifficulty;
+
+export interface SkillCheckProps {
+  angle: number;
+  difficultyOffset: number;
+  difficulty: GameDifficulty;
+  key: string;
+}

web/src/typings/textui.ts

@@ -0,0 +1,12 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import React from 'react';
+
+export type TextUiPosition = 'right-center' | 'left-center' | 'top-center';
+
+export interface TextUiProps {
+  text: string;
+  position?: TextUiPosition;
+  icon?: IconProp;
+  iconColor?: string;
+  style?: React.CSSProperties;
+}