apphouse/dist/index.ts

Component library for React that uses observable state management and theme-able components.

// components
import { Accordion } from './templates/Accordion';
import { AiVoiceSelector } from './components/media/AiVoiceSelector';
import { AnimatedText } from './templates/AnimatedText';
import { ApphouseCopyright } from './app/ApphouseCopyright';
import { ApphouseFormV2 } from './components/Form/ApphouseFormV2';
import { ApphouseLogo } from './app/ApphouseLogo';
import { AudioPlayer } from './components/media/AudioPlayer';
import { Breadcrumbs } from './components/Breadcrumbs';
import { Button } from './components/Button';
import { ButtonClose } from './components/buttons/ButtonClose';
import { ButtonCopyToClipboard } from './components/buttons/ButtonCopyToClipboard';
import { ButtonDownload } from './components/buttons/ButtonDownload';
import { ButtonGetFile } from './components/fileDropper/ButtonGetFile';
import { ButtonLogin } from './components/buttons/ButtonLogin';
import { ButtonSaveAs } from './components/buttons/ButtonSaveAs';
import { ButtonSelect } from './components/ButtonSelect';
import { ButtonToggle } from './components/checkbox/ButtonToggle';
import { ButtonTogglePopup } from './components/buttons/ButtonTogglePopup';
import { Card } from './templates/Card';
import { ChatBubble } from './components/chat/ChatBubble';
import { Checkbox } from './components/checkbox/Checkbox';
import { DatePicker } from './components/datePicker/DatePicker';
import { Draggable } from './components/dragNdrop/Draggable';
import { DraggableWidget } from './components/dragNdrop/DraggableWidget';
import { Drawer } from './components/Drawer';
import { Droppable } from './components/dragNdrop/Droppable';
import { Feedback } from './components/common/feedback/Feedback';
import { FileDropper } from './components/fileDropper/FileDropper';
import { Form } from './components/Form/Form';
import { GradientBackground } from './components/GradientBackground';
import { Hint } from './components/common/hint/Hint';
import { Input } from './components/input/Input';
import { InputCheckbox } from './components/InputCheckbox';
import { InputColor } from './components/input/InputColor';
import { InputSelect } from './components/InputSelect';
import { LoaderTyping } from './components/loaders/LoaderTyping';
import { Loading } from './components/Loading';
import { LoadingGradient } from './templates/LoadingGradient';
import { MediaButton } from './components/media/MediaButton';
import { MicrophoneSelector } from './components/media/MicrophoneSelector';
import { NavigationList } from './components/NavigationList';
import { Page } from './components/page/Page';
import { PagePagination } from './components/PagePagination';
import { PageWithPagination } from './templates/PageWithPagination';
import { Pagination } from './components/Pagination';
import { Panel } from './components/panel/Panel';
import { Paper } from './components/Paper';
import { PlanSelectionCard } from './templates/PlanSelectionCard';
import { PlayPauseButton } from './components/media/PlayPauseButton';
import { PlayPauseButton as SpeechSynthesisPlayPauseButton } from './components/speechToText/PlayPauseButton';
import { Popup } from './components/popup/Popup';
import { PopupBody } from './components/popup/PopupBody';
import { PopupFooter } from './components/popup/PopupFooter';
import { PopupHeader } from './components/popup/PopupHeader';
import { Recorder } from './components/media/Recorder';
import { ResizableInput } from './components/input/ResizableInput';
import { Select } from './components/Select';
import { SignInForm } from './components/Form/SignInForm';
import { SignUpForm } from './components/Form/SignUpForm';
import { SmartInput } from './components/smartInput/SmartInput';
import { SpeechSynthesisPlayer } from './components/speechToText/SpeechSynthesisPlayer';
import { StackView } from './components/StackView';
import { TabView } from './components/TabView';
import { Tag } from './components/Tag';
import { Text } from './components/Text';
import { TextCode } from './components/decorators/TextCode';
import { TextHighlighter } from './components/TextHighlighter';
import { TextToVoice } from './components/media/TextToVoice';
import { Timeline } from './components/Timeline';
import { ToggleThemeButton } from './components/ToggleThemeButton';
import { Toolbar } from './components/Toolbar';
import { Tooltip } from './components/Tooltip';
import { View } from './components/View';
import { VoiceSelector } from './components/speechToText/VoiceSelector';
import { VoiceSpeedSelector } from './components/speechToText/VoiceSpeedSelector';

// authentication related components and models
import { RequiresFirebaseAuthentication } from './authentication/RequiresFirebaseAuthentication';
import { AppStoreWithUser } from './authentication/AppStoreWithUser';
import { Chat } from './models/Chat';

// models
import { Feedback as FeedbackModel } from './models/Feedback';
import { FormV2 as FormModel } from './models/Form/FormV2';
import { Forms as FormsModel } from './models/Form/Forms';
import { List } from './models/List';
import { SpeechToText } from './models/SpeechToText';
import { TextToSpeech } from './models/TextToSpeech';
import { User } from './authentication/User';
import { UserProfile } from './authentication/UserProfile';
import { NetworkStatus } from './models/NetworkStatus';
import { LocalStorage } from './models/LocalStorage';
import { ApphouseFirestore } from './models/ApphouseFirestore';

// templates
import { SignInPopup } from './templates/SignInPopup';
import { SignUpPopup } from './templates/SignUpPopup';
import { CookieBanner } from './templates/CookieBanner';
import { PopupWithPagination } from './templates/PopupWithPagination';
import { PlanSelectionPage } from './templates/PlanSelectionPage';
import { ChatBox } from './templates/ChatBox';
import { ChatInput } from './templates/ChatInput';
import { FullPageSplitView } from './templates/layouts/FullPageSplitView';
import { ValueWithLabel } from './templates/ValueWithLabel';
// context
import {
  ApphouseProvider,
  ApphouseThemeProvider
} from './context/ApphouseProvider';

// hooks
import { useApphouse } from './context/useApphouse';
import { ApphouseStore } from './context/ApphouseStore';

// utils
import { makeTitle } from './utils/string/makeTitle';
import { debounce } from './utils/debounce';
import { downloadJson } from './utils/file/downloadJson';
import { fromArray } from './utils/obj/fromArray';
import { get } from './utils/obj/get';
import { getBestFitPosition } from './utils/dom/getBestFitPosition';
import { getErrorMessage } from './utils/string/getErrorMessage';
import { getShadesOfColor } from './utils/color/getShades';
import { inRange } from './utils/number/inRange';
import { isEmpty } from './utils/obj/isEmpty';
import { isObject } from './utils/obj/isObject';
import { isValidEmail } from './utils/string/isValidEmail';
import { keys } from './utils/obj/keys';
import { merge } from './utils/obj/merge';
import { mergeStyles } from './styles/mergeStyles';
import { omit } from './utils/obj/omit';
import { reduce } from './utils/reduce';
import { saveContentAs } from './utils/file/saveContentAs';
import { scrollToView } from './utils/dom/scrollToView';
import { values } from './utils/obj/values';
import { TextSelection } from './utils/string/TextSelection';
import { replaceUndefinedValuesWithNull } from './utils/obj/replaceUndefinedValuesWithNull';
import { makeId } from './utils/string/makeId';
import { isValidDate } from './utils/string/isValidDate';
import { fetchMe } from './utils/network/fetchMe';
import { compareKeys } from './utils/obj/compareKeys';
import { addXrayTooltips } from './utils/dom/xRayTooltips';
import { removeXrayTooltips } from './utils/dom/xRayTooltips';

// themes and theme utils
import {
  extendApphouseDarkTheme,
  extendApphouseLightTheme,
  extendTheme
} from './styles/extendTheme';
import { THEMES } from './themes/presets';
import { isRgbColor } from './utils/color/isRgbColor';
import { isRgbaColor } from './utils/color/isRgbaColor';
import { isHexColor } from './utils/color/isHexColor';
import { isHslaColor } from './utils/color/isHslaColor';
import { isHslColor } from './utils/color/isHslColor';

const DarkTheme = THEMES.APPHOUSE_DARK as ApphouseTheme;
const LightTheme = THEMES.APPHOUSE_LIGHT as ApphouseTheme;
// import observer from mobx react and export as an Apphouse decorator
import { observer as ApphouseComponent } from 'mobx-react';
import { initApphouse } from './app/initApphouse';
import { ApphouseApp } from './context/ApphouseProvider';
import { ApphouseTheme } from './styles/defaults/themes.interface';
import { OpenAi } from './models/OpenAi';

// exports
export {
  // components
  Accordion,
  AiVoiceSelector,
  AnimatedText,
  ApphouseCopyright,
  ApphouseFormV2,
  ApphouseLogo,
  AudioPlayer,
  Breadcrumbs,
  Button,
  ButtonClose,
  ButtonCopyToClipboard,
  ButtonDownload,
  ButtonGetFile,
  ButtonLogin,
  ButtonSaveAs,
  ButtonSelect,
  ButtonToggle,
  ButtonTogglePopup,
  Card,
  ChatBubble,
  Checkbox,
  DatePicker,
  Draggable,
  DraggableWidget,
  Drawer,
  Droppable,
  Feedback,
  FileDropper,
  Form,
  GradientBackground,
  Hint,
  Input,
  InputCheckbox,
  InputColor,
  InputSelect,
  LoaderTyping,
  Loading,
  LoadingGradient,
  MediaButton,
  MicrophoneSelector,
  NavigationList,
  Page,
  PagePagination,
  PageWithPagination,
  Pagination,
  Panel,
  Paper,
  PlanSelectionCard,
  PlanSelectionPage,
  PlayPauseButton,
  Popup,
  PopupBody,
  PopupFooter,
  PopupHeader,
  Recorder,
  ResizableInput,
  Select,
  SmartInput,
  SpeechSynthesisPlayer,
  SpeechSynthesisPlayPauseButton,
  StackView,
  TabView,
  Tag,
  Text,
  TextCode,
  TextHighlighter,
  TextToVoice,
  Timeline,
  ToggleThemeButton,
  Toolbar,
  Tooltip,
  View,
  VoiceSelector,
  VoiceSpeedSelector,
  // authentication related components and models
  AppStoreWithUser,
  RequiresFirebaseAuthentication,

  // templates
  ChatBox,
  ChatInput,
  CookieBanner,
  FullPageSplitView,
  PopupWithPagination,
  SignInForm,
  SignInPopup,
  SignUpForm,
  SignUpPopup,
  ValueWithLabel,

  // context
  ApphouseProvider,
  ApphouseStore,
  ApphouseThemeProvider,

  // hooks
  useApphouse,

  // utils
  downloadJson,
  getBestFitPosition,
  saveContentAs,
  scrollToView,
  addXrayTooltips,
  removeXrayTooltips,
  isHexColor,
  isRgbColor,
  isRgbaColor,
  isHslaColor,
  isHslColor,

  // utils (object helpers)
  compareKeys,
  debounce,
  fromArray,
  get,
  inRange,
  isEmpty,
  isObject,
  keys,
  makeId,
  merge,
  omit,
  reduce,
  replaceUndefinedValuesWithNull,
  values,

  // themes and theme utils
  makeTitle,
  DarkTheme,
  extendApphouseDarkTheme,
  extendApphouseLightTheme,
  extendTheme,
  getErrorMessage,
  getShadesOfColor,
  isValidEmail,
  LightTheme,
  mergeStyles,
  isValidDate,
  fetchMe,
  // models
  ApphouseFirestore,
  FeedbackModel,
  FormModel,
  FormsModel,
  List,
  LocalStorage,
  NetworkStatus,
  SpeechToText,
  TextSelection,
  TextToSpeech,
  User,
  UserProfile,
  OpenAi,
  Chat,

  //router
  initApphouse,
  ApphouseApp,

  //mobx decorator
  ApphouseComponent
};