@mxenabled/mxui 1.0.0-alpha.bb1

package/README.md

@@ -0,0 +1,32 @@
+## Getting started
+In order to run the project you will need to make sure that you have yarn installed. It must be higher than 1.22 in order to do that you must have corepack enabled. Do not just run "npm i" to install dependencies, all packages must be installed with yarn.
+
+1. Install [yarn](https://yarnpkg.com/getting-started/install)
+1. From the project root dir, run `yarn` or `yarn install` to install dependencies
+1. To start the project run `yarn dev` (the project should automatically run in the browser)
+
+## Contributing
+
+If your MR includes any changes outside of documentation, you will need to incrememnt the version correctly and publish that new version.
+
+1. Ensure you update the CHANGELOG.md as part of your MR
+1. Update the version in the package.json file as part of your MR
+
+## Merging and Publishing
+
+Pre-requisites to publishing: you'll need to get an ower to add you to the "mxenabled" organization in npm. If you do not have an npm account already, create one with your mx email at https://www.npmjs.com/, then send a message to Bill Bridegroom on Slack to get added to the org. Once this is done, you'll need to run `npm adduser` in your terminal to authenticate.
+
+1. After your MR is approved, type `shipit` in the comments. Wait for shipit to merge your branch (it will comment on your MR when it has finished doing its thing.)
+1. After your changes have been merged to master, switch to the master branch and pull down the new changes.
+1. Run `npm publish --dry-run`.
+1. If the dry run works, go ahead and run `npm publish`. Look for something like '@mxenabled/mxui@1.4.2' in the terminal output. Copy it and paste it to the end of `git tag` ex: `git tag @kyper/mui@2.4.2`in the terminal. After that, run `git push origin --tags` and you're done.
+
+
+## Using this Library
+
+The QA storybook containing the latest changes is [accessible here](https://mxui.kube.qa.internal.mx/?path=/docs/introduction--docs).
+
+Follow the setup instructions found in 
+
+Teams are currently adding components as needed, so the list in storybook right now is what has been built so far.
+

package/dist/components/categoryicon/CategoryIcon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface CategoryIconProps {
+    categoryGuid?: string;
+    icon_ratio?: number;
+    size?: number;
+    sx?: SxProps;
+    variant?: 'basic' | 'filled' | 'transparent' | 'twotone';
+}
+export declare const CategoryIcon: React.FC<CategoryIconProps>;
+export {};

package/dist/components/categoryicon/Constants.d.ts

@@ -0,0 +1,29 @@
+export declare enum CategoryGuids {
+    AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874",
+    BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8",
+    BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f",
+    Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0",
+    Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73",
+    FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a",
+    Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf",
+    FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a",
+    GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0",
+    HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f",
+    Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac",
+    Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3",
+    Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c",
+    Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a",
+    PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f",
+    Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78",
+    Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f",
+    Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954",
+    Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83",
+    Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae",
+    Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4"
+}
+export declare enum CategoryIconVariants {
+    Basic = "basic",
+    Filled = "filled",
+    Transparent = "transparent",
+    TwoTone = "two-tone"
+}

package/dist/components/categoryicon/IconList.d.ts

@@ -0,0 +1,8 @@
+type CategoryIconType = {
+    guid: string;
+    colorName: string;
+    icon: string;
+};
+export declare const UncategorizedCategoryIcon: CategoryIconType;
+export declare const IconList: CategoryIconType[];
+export {};

package/dist/components/categoryicon/index.d.ts

@@ -0,0 +1,2 @@
+export { CategoryIcon } from './CategoryIcon';
+export { CategoryGuids, CategoryIconVariants } from './Constants';

package/dist/components/daterangepicker/DatePickerShortcuts.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { DateRange, PickersShortcutsProps } from '@mui/x-date-pickers-pro';
+interface DatePickerShortcutProps extends PickersShortcutsProps<DateRange<Date>> {
+    selected?: string;
+}
+declare const DatePickerShortcuts: React.FC<DatePickerShortcutProps>;
+export default DatePickerShortcuts;

package/dist/components/daterangepicker/DateRangePicker.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material/styles';
+import { DateRange } from '@mui/x-date-pickers-pro';
+export type DateRangePickerCopy = {
+    dateRangeFrom: string;
+    dateRangeTo: string;
+    dateRangeCustom: string;
+    dateRangeSelectARange: string;
+    dateRangeThisMonth: string;
+    dateRangeLastMonth: string;
+    dateRangeLast30Days: string;
+    dateRangeLast90Days: string;
+    dateRangeYTD: string;
+    dateRangeLastYear: string;
+    dateRangeSelect: string;
+    dateRangeToolbarTitle: string;
+};
+export interface DateRangePickerProps {
+    copy: DateRangePickerCopy;
+    dateRange: DateRange<Date>;
+    onRangeChanged?: (dateRange: DateRange<Date>, shortcut: string) => void;
+    selectedShortcut?: string;
+    sx?: SxProps;
+}
+declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export default DateRangePicker;

package/dist/components/daterangepicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerCopy } from './DateRangePicker';

package/dist/components/dialog/BottomSheetTransition.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { TransitionProps } from '@mui/material/transitions';
+declare const BottomSheetTransition: React.ForwardRefExoticComponent<TransitionProps & {
+    children: React.ReactElement<any, any>;
+} & React.RefAttributes<unknown>>;
+export default BottomSheetTransition;

package/dist/components/dialog/Header.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ToolbarProps } from '@mui/material/Toolbar';
+export type CopyObject = {
+    close_aria?: string;
+    title: string;
+};
+type DialogHeaderProps = {
+    copy: CopyObject;
+    onClose: () => void;
+} & ToolbarProps;
+declare const DialogHeader: React.FC<DialogHeaderProps>;
+export default DialogHeader;

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BottomSheetTransition } from './BottomSheetTransition';
+export { default as DialogFooter } from '../drawer/Footer';
+export { default as DialogHeader } from './Header';

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
+interface DrawerProps extends MuiDrawerProps {
+    children: React.ReactNode;
+    className?: string;
+    disableSave?: boolean;
+    id?: string;
+    isOpen: boolean;
+    onClose: () => void;
+    onSave?: () => void;
+    primaryText?: string;
+    secondaryText?: string;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/components/drawer/Footer.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ToolbarProps } from '@mui/material/Toolbar';
+type FooterProps = {
+    isPrimaryDisabled?: boolean;
+    onPrimaryAction?: (formData: any) => void;
+    onSecondaryAction: () => void;
+    primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    primaryText?: string;
+    secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    secondaryText?: string;
+} & ToolbarProps;
+declare const Footer: React.FC<FooterProps>;
+export default Footer;

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Drawer } from './Drawer';
+export { default as Footer } from './Footer';

package/dist/components/icon/BaseIcon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface BaseIconProps {
+    height?: number;
+    size?: number;
+    viewBox?: string;
+    width?: number;
+}
+export interface IconProps extends BaseIconProps {
+    color?: string;
+}
+export declare const BaseIcon: React.FC<React.PropsWithChildren<BaseIconProps>>;

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { IconProps as MuiIconProps } from '@mui/material/Icon';
+export declare enum IconWeight {
+    Lighter = 100,
+    Light = 200,
+    Normal = 300,
+    Dark = 400,
+    Darker = 500
+}
+export interface IconProps extends MuiIconProps {
+    fill?: boolean;
+    name: string;
+    size?: number;
+    weight?: IconWeight;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/components/icon/icons/AccountsFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const AccountsFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/AccountsIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const AccountsIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const ArrowLeftIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/AttentionFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const AttentionFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const CalendarIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/CheckmarkFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const CheckmarkFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/ChevronDownIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const ChevronDownIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/ChevronLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const ChevronLeftIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const ChevronRightIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const CloseIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/EditIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const EditIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/FilterIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const FilterIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/HeartIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const HeartIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/MXLogoCopyrightIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const MXLogoCopyrightIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/MXLogoFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const MXLogoFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/MXLogoIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const MXLogoIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/MXLogoOutlineIcon.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconProps } from '../BaseIcon';
+export declare const MXLogoOutlineIcon: React.FC<React.PropsWithChildren<IconProps>>;

package/dist/components/icon/icons/index.d.ts

@@ -0,0 +1,17 @@
+export { AccountsFilledIcon } from './AccountsFilledIcon';
+export { AccountsIcon } from './AccountsIcon';
+export { ArrowLeftIcon } from './ArrowLeftIcon';
+export { AttentionFilledIcon } from './AttentionFilledIcon';
+export { CalendarIcon } from './CalendarIcon';
+export { CheckmarkFilledIcon } from './CheckmarkFilledIcon';
+export { ChevronDownIcon } from './ChevronDownIcon';
+export { ChevronLeftIcon } from './ChevronLeftIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
+export { CloseIcon } from './CloseIcon';
+export { EditIcon } from './EditIcon';
+export { FilterIcon } from './FilterIcon';
+export { HeartIcon } from './HeartIcon';
+export { MXLogoIcon } from './MXLogoIcon';
+export { MXLogoCopyrightIcon } from './MXLogoCopyrightIcon';
+export { MXLogoFilledIcon } from './MXLogoFilledIcon';
+export { MXLogoOutlineIcon } from './MXLogoOutlineIcon';

package/dist/components/icon/index.d.ts

@@ -0,0 +1,3 @@
+export { BaseIcon } from './BaseIcon';
+export { Icon, IconWeight } from './Icon';
+export * from './icons';

package/dist/components/institutionlogo/InstitutionLogo.d.ts

@@ -0,0 +1,8 @@
+import { default as React, ImgHTMLAttributes } from 'react';
+export interface InstitutionLogoProps extends ImgHTMLAttributes<HTMLImageElement> {
+    alt: string;
+    institutionGuid: string;
+    logoUrl?: string;
+    size?: number;
+}
+export declare const InstitutionLogo: React.FC<InstitutionLogoProps>;

package/dist/components/institutionlogo/index.d.ts

@@ -0,0 +1 @@
+export { InstitutionLogo } from './InstitutionLogo';

package/dist/components/merchantlogo/MerchantLogo.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material/Box';
+export interface MerchantLogoProps extends BoxProps {
+    alt?: string;
+    categoryGuid: string;
+    merchantGuid: string;
+    size?: number;
+}
+export declare const MerchantLogo: React.FC<MerchantLogoProps>;

package/dist/components/merchantlogo/index.d.ts

@@ -0,0 +1 @@
+export { MerchantLogo } from './MerchantLogo';

package/dist/components/text/Text.d.ts

@@ -0,0 +1,20 @@
+import { SxProps } from '@mui/material/styles';
+import { default as React } from 'react';
+import { TypographyProps, TypographyTypeMap } from '@mui/material/Typography';
+interface TextType extends TypographyProps {
+    bold?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    component?: any;
+    color?: string;
+    sx?: SxProps;
+    truncate?: boolean;
+    variant?: TypographyTypeMap['props']['variant'];
+    uppercase?: boolean;
+}
+export declare const Text: ({ bold, className, children, color, sx, truncate, uppercase, ...rest }: TextType) => import("react/jsx-runtime").JSX.Element;
+export declare const H1: ({ className, children, ...rest }: TextType) => import("react/jsx-runtime").JSX.Element;
+export declare const H2: ({ className, children, ...rest }: TextType) => import("react/jsx-runtime").JSX.Element;
+export declare const H3: ({ className, children, ...rest }: TextType) => import("react/jsx-runtime").JSX.Element;
+export declare const P: ({ className, children, truncate, ...rest }: TextType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text/index.d.ts

@@ -0,0 +1 @@
+export { H1, H2, H3, P, Text } from './Text';

package/dist/components/textfield/TextField.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
+type TextFieldProps = {
+    disabled?: boolean;
+    label?: React.ReactNode;
+    shrink?: boolean;
+    variant?: 'filled' | 'outlined' | 'standard';
+} & MuiTextFieldProps;
+declare const TextField: React.FC<TextFieldProps>;
+export default TextField;

package/dist/components/textfield/index.d.ts

@@ -0,0 +1 @@
+export { default as TextField } from './TextField';

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SlideProps } from '@mui/material/Slide';
+import { SxProps, Theme } from '@mui/material/styles';
+export declare function SlideTransition(props: SlideProps): import("react/jsx-runtime").JSX.Element;
+interface ToastProps {
+    open: boolean;
+    handleClose: () => void;
+    message: string;
+    autoHideDuration?: number;
+    severity?: 'success' | 'error' | 'warning' | 'info';
+    snackbarSx?: SxProps<Theme>;
+    showAction?: boolean;
+    showClose?: boolean;
+    actionText?: string;
+    onActionClick?: () => void;
+    multiLine?: boolean;
+}
+export declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/dist/components/toast/index.d.ts

@@ -0,0 +1 @@
+export { Toast } from './Toast';

package/dist/components/tokenprovider/Constants.d.ts

@@ -0,0 +1,9 @@
+export declare const TARGETS: {
+    REACT: string;
+    REACT_NATIVE: string;
+    NATIVE: string;
+};
+export declare const THEMES: {
+    LIGHT: string;
+    DARK: string;
+};

package/dist/components/tokenprovider/Hooks.d.ts

@@ -0,0 +1 @@
+export declare const useTokens: (target?: string, tokenOverrides?: {}) => import('@mxenabled/design-tokens').TokenTypes;

package/dist/components/tokenprovider/TokenProvider.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export declare const TokenContext: React.Context<import('@mxenabled/design-tokens').TokenTypes>;
+export declare const ReactNativeTokenContext: React.Context<import('@mxenabled/design-tokens').TokenTypes>;
+interface TokenProviderProps {
+    children: React.ReactNode;
+    target?: string;
+    theme?: string;
+    tokenOverrides?: any;
+}
+export declare const TokenProvider: React.FC<TokenProviderProps>;
+export {};

package/dist/components/tokenprovider/index.d.ts

@@ -0,0 +1,3 @@
+export { TokenProvider } from './TokenProvider';
+export { useTokens } from './Hooks';
+export { TARGETS, THEMES } from './Constants';

package/dist/constants/Logo.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_LOGO_SIZE = 32;
+export declare const ASSETS_URL = "https://content.moneydesktop.com/storage/MD_Assets";

package/dist/constants/Theme.d.ts

@@ -0,0 +1,4 @@
+export declare const MODE: {
+    LIGHT: string;
+    DARK: string;
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from './components/categoryicon';
+export * from './components/daterangepicker';
+export * from './components/dialog';
+export * from './components/drawer';
+export * from './components/icon';
+export * from './components/institutionlogo';
+export * from './components/merchantlogo';
+export * from './components/text';
+export * from './components/textfield';
+export * from './components/toast';
+export * from './components/tokenprovider';
+export * from './themes';