@mycause/ui 0.0.0-cd65c25d → 0.0.0-cd924884

package/README.md

@@ -5,6 +5,11 @@ Design system and UI components for mycause.
 - [Documentation](https://mycause.atlassian.net/wiki/spaces/MU/overview)
 - [Storybook](https://ui-test.mycause.com.au)
 
+## Prerequisites
+
+- Node.js (>= 22.x)
+- Yarn (>= 1.22.22)
+
 ## Setup
 
 Install the package:
@@ -50,6 +55,18 @@ Ensure you include these in your app, for example using the Google Fonts CDN:
 />
 ```
 
+## Applying Patches with `patch-package`
+
+This project uses `patch-package` to apply fixes to certain dependencies. This is necessary to address issues such as the `punycode` deprecation warning. Below are the steps to apply and manage these patches.
+
+The following patches are applied:
+
+- normalize-url: Replaced require('punycode') with require('punycode/')
+- psl: Replaced require('punycode') with require('punycode/')
+- unicode-length: Replaced require('punycode') with require('punycode/')
+- url: Replaced require('punycode') with require('punycode/')
+- tough-cookie: Replaced require('punycode') with require('punycode/')
+
 ## Local development
 
 This project uses [Yarn](https://yarnpkg.com) for development dependencies.

package/dist/components/credit-card-form/CreditCardForm.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type FormValuesProps = {
+    number: string;
+    name: string;
+    expiry: string;
+    cvc: string;
+};
+declare type CreditCardFormProps = {
+    formValues: FormValuesProps;
+    setFormValues: (values: FormValuesProps) => void;
+};
+declare function CreditCardForm({ formValues, setFormValues }: CreditCardFormProps): JSX.Element;
+export default CreditCardForm;

package/dist/components/credit-card-form/Icons.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Icons: {
+    close: (props: any) => JSX.Element;
+    error: (props: any) => JSX.Element;
+    warning: () => JSX.Element;
+};
+export default Icons;

package/dist/components/credit-card-form/credit-card.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const SwitchDefault: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/credit-card-form/index.d.ts

@@ -0,0 +1 @@
+export { default as CreditCardForm } from "./CreditCardForm";

package/dist/components/credit-card-form/toast.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const SwitchDefault: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import "react-dates/initialize";
 import CenterDecorator from "../../utils/center-decorator";
+import "moment-timezone";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];

package/dist/components/date-picker/single-date-picker-custom-header.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import moment from "moment";
+import { Moment } from "moment";
 export interface DatePickerProps {
     id: string;
-    date: moment.Moment | null;
-    onDateChange: (date: moment.Moment | null) => void;
+    date: Moment | null;
+    onDateChange: (date: Moment | null) => void;
     onFocusChange: (arg: boolean | null) => void;
     focused: boolean | null;
     placeholder?: string;
@@ -19,7 +19,7 @@ export interface DatePickerProps {
     error?: boolean;
     label?: string;
     width?: string;
-    isOutsideRange?: () => boolean;
+    isOutsideRange?: (day: any) => boolean;
     renderCalendarInfo?: () => string | JSX.Element;
     calendarInfoPosition?: "before" | "after" | "top" | "bottom";
     navPrev?: string | JSX.Element;

package/dist/components/date-picker/single-date-picker.d.ts

@@ -19,7 +19,8 @@ export interface DatePickerProps {
     error?: boolean;
     label?: string;
     width?: string;
-    isOutsideRange?: () => boolean;
+    isOutsideRange?: (day: any) => boolean;
+    showDefaultInputIcon?: boolean;
 }
 declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, ...rest }: DatePickerProps) => JSX.Element;
 export default CustomSingleDatePicker;

package/dist/components/index.d.ts

@@ -58,3 +58,4 @@ export * from "./input";
 export * from "./my-account-frp-closed";
 export * from "./transaction-card";
 export * from "./toast";
+export * from "./input-social";

package/dist/components/input-social/Icons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Icons: {
+    facebook: (props: any) => JSX.Element;
+};
+export default Icons;

package/dist/components/input-social/InputSocial.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface InputSocialProps {
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    value?: string | Array<string> | number;
+    error?: string | null | boolean;
+    disable?: boolean;
+    name?: string;
+    icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+}
+declare const InputSocial: ({ placeholder, value, onChange, error, disable, name, icon, }: InputSocialProps) => JSX.Element;
+export default InputSocial;

package/dist/components/input-social/index.d.ts

@@ -0,0 +1 @@
+export { default as InputSocial } from "./InputSocial";

package/dist/components/input-social/input-social.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const InputExample: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/my-account-sidebar/my-account-sidebar.d.ts

@@ -2,10 +2,11 @@
 export interface MyAccountSidebarProps {
     listMenu: Array<ItemMenu>;
     dashboard: ItemMenu;
-    account?: ItemMenu;
+    account: ItemMenu;
     contract?: ItemMenu;
     handleSetOverlay: (value: boolean) => void;
     activeMenu: ItemMenu;
+    pathnameActive?: string;
 }
 declare type ItemMenu = {
     id: string;
@@ -14,5 +15,5 @@ declare type ItemMenu = {
     href?: string;
     items?: Array<ItemMenu>;
 };
-declare const MyAccountSidebar: ({ listMenu, dashboard, account, contract, handleSetOverlay, activeMenu, }: MyAccountSidebarProps) => JSX.Element;
+declare const MyAccountSidebar: ({ listMenu, dashboard, account, contract, handleSetOverlay, activeMenu, pathnameActive, }: MyAccountSidebarProps) => JSX.Element;
 export default MyAccountSidebar;

package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.d.ts

@@ -3,9 +3,11 @@ export interface MyAccountStartFundraiseCardProps {
     className?: string;
     title?: string;
     description?: string;
-    buttonText?: string;
-    onClick?: () => void;
+    buttonText1?: string;
+    buttonText2?: string;
+    onClickButton1?: () => void;
+    onClickButton2?: () => void;
     width: string;
 }
-declare const MyAccountStartFundraiseCard: ({ className, title, buttonText, onClick, width, }: MyAccountStartFundraiseCardProps) => JSX.Element;
+declare const MyAccountStartFundraiseCard: ({ className, title, buttonText1, buttonText2, onClickButton1, onClickButton2, width, }: MyAccountStartFundraiseCardProps) => JSX.Element;
 export default MyAccountStartFundraiseCard;

package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.stories.d.ts

@@ -3,7 +3,7 @@ import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, title, buttonText, onClick, width, }: import("./my-account-start-fundraise-card").MyAccountStartFundraiseCardProps) => JSX.Element;
+    component: ({ className, title, buttonText1, buttonText2, onClickButton1, onClickButton2, width, }: import("./my-account-start-fundraise-card").MyAccountStartFundraiseCardProps) => JSX.Element;
 };
 export default _default;
 export declare const startFundraiseStory: {
@@ -12,3 +12,9 @@ export declare const startFundraiseStory: {
         name: string;
     };
 };
+export declare const startFundraiseStoryV2: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/phone-number-input/phone-number-input-v1.d.ts

@@ -20,6 +20,7 @@ declare type PhoneNumberInputProps = {
     defaultCountry?: CountryCode;
     placeholder?: string;
     color?: string;
+    isDisableCountries?: boolean;
 };
-declare function PhoneNumberInputV1({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, placeholder, color, }: PhoneNumberInputProps): JSX.Element;
+declare function PhoneNumberInputV1({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, placeholder, color, isDisableCountries, }: PhoneNumberInputProps): JSX.Element;
 export default PhoneNumberInputV1;

package/dist/components/phone-number-input/phone-number-input.d.ts

@@ -20,6 +20,7 @@ declare type PhoneNumberInputProps = {
     defaultCountry?: CountryCode;
     placeholder?: string;
     color?: string;
+    disabled?: boolean;
 };
-declare function PhoneNumberInput({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, placeholder, color, }: PhoneNumberInputProps): JSX.Element;
+declare function PhoneNumberInput({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, placeholder, color, disabled, }: PhoneNumberInputProps): JSX.Element;
 export default PhoneNumberInput;

package/dist/components/phone-number-input/phone-number-input.stories.d.ts

@@ -11,6 +11,12 @@ export declare const PhoneNumberInputStory: {
         name: string;
     };
 };
+export declare const PhoneNumberInputDisableStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
 export declare const PhoneInputStory: {
     (): JSX.Element;
     story: {
@@ -29,3 +35,9 @@ export declare const PhoneNumberInputStoryV1: {
         name: string;
     };
 };
+export declare const PhoneNumberInputIsDisableCountriesStoryV1: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/select/select-enhanced.d.ts

@@ -18,6 +18,7 @@ export interface SelectProps extends Omit<MDCSelectProps, "onEnhancedChange" | "
     noArrow?: boolean;
     color?: string;
     error?: boolean | string;
+    outlined?: boolean;
 }
-declare const SelectV2: ({ label, value, onChange, helperText, isHelperTextPersistent, externalLabel, id, className, options, large, required, leadingIcon, noArrow, error, color, ...rest }: SelectProps) => JSX.Element;
+declare const SelectV2: ({ label, value, onChange, helperText, isHelperTextPersistent, externalLabel, id, className, options, large, required, leadingIcon, noArrow, error, color, outlined, ...rest }: SelectProps) => JSX.Element;
 export default SelectV2;

package/dist/components/select/select-v2.d.ts

@@ -21,6 +21,7 @@ export interface SelectProps {
     error?: boolean | string;
     trailingIcon?: React.ReactElement;
     bgColor?: string;
+    colorError?: string;
 }
-declare const SelectV2: ({ options, value, onChange, color, itemHoverColor, noArrow, trailingIcon, bgColor, }: SelectProps) => JSX.Element;
+declare const SelectV2: ({ options, value, onChange, color, itemHoverColor, noArrow, trailingIcon, bgColor, error, colorError, }: SelectProps) => JSX.Element;
 export default SelectV2;

package/dist/components/select/select.stories.d.ts

@@ -10,13 +10,13 @@ export declare const SelectStory: {
         name: string;
     };
 };
-export declare const SelectEnhancedStory: {
+export declare const SelectStoryV2: {
     (): JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const SelectStoryV2: {
+export declare const SelectEnhancedStory: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/components/spinner/spinner.d.ts

@@ -3,6 +3,7 @@ export interface SpinnerProps {
     id?: string;
     className?: string;
     style?: any;
+    type?: "default" | "orange";
 }
-declare const Spinner: ({ id, className, style, ...rest }: SpinnerProps) => JSX.Element;
+declare const Spinner: ({ id, className, style, type, ...rest }: SpinnerProps) => JSX.Element;
 export default Spinner;

package/dist/components/spinner/spinner.stories.d.ts

@@ -11,3 +11,9 @@ export declare const SpinnerStoriesDefault: {
         name: string;
     };
 };
+export declare const SpinnerOrangeStories: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -1 +1,2 @@
 export { default as Switch } from "./switch";
+export { default as SwitchV2 } from "./switch-v2";

package/dist/components/switch/switch-v2.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SwitchV2Props {
+    checked?: boolean;
+    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+    color?: string;
+}
+declare const SwitchV2: ({ checked, onChange, color }: SwitchV2Props) => JSX.Element;
+export default SwitchV2;

package/dist/components/switch/switch.stories.d.ts

@@ -23,3 +23,9 @@ export declare const SwitchDisabled: {
         name: string;
     };
 };
+export declare const SwitchV2Story: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/table/partner-monthly-table.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare type ColumnTableProps = {
     key: string;
-    label: string;
+    label: string | React.ReactNode;
     align: "center" | "left" | "right";
     rowPrefixIcon?: string;
     renderCell: (item: any) => React.ReactNode;
@@ -12,6 +12,8 @@ export interface PartnerMonthlyTableProps {
     title?: string;
     tooltip?: string;
     customBottomRow?: React.ReactNode;
+    onClickRow?: (item: any, rowIndex: number) => void;
+    getBackgroundRow?: (item: any, rowIndex: number) => string;
 }
-declare const PartnerMonthlyTable: ({ columns, data, title, tooltip, customBottomRow, }: PartnerMonthlyTableProps) => JSX.Element;
+declare const PartnerMonthlyTable: ({ columns, data, title, tooltip, customBottomRow, onClickRow, getBackgroundRow, }: PartnerMonthlyTableProps) => JSX.Element;
 export default PartnerMonthlyTable;

package/dist/components/text-field/text-field-search.d.ts

@@ -4,6 +4,7 @@ interface TextFieldSearchProps {
     onChange: (value: string) => void;
     onSubmit: () => void;
     placeholder?: string;
+    isFocus?: boolean;
 }
-declare function TextFieldSearch({ value, onChange, onSubmit, placeholder, }: TextFieldSearchProps): JSX.Element;
+declare function TextFieldSearch({ value, onChange, onSubmit, placeholder, isFocus, }: TextFieldSearchProps): JSX.Element;
 export default TextFieldSearch;

package/dist/components/text-field/text-field.d.ts

@@ -20,6 +20,7 @@ export interface TextFieldProps extends Omit<React.HTMLProps<HTMLInputElement>,
     className?: string;
     required?: boolean;
     color?: string;
+    outlined?: boolean;
     onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/transaction-card/transaction-card.d.ts

@@ -1,14 +1,16 @@
 import React from "react";
 export interface TransactionCardProps {
     className?: string;
-    amount?: string;
-    recipient?: string;
-    receiptNo?: string;
-    details?: string;
-    tax?: string;
-    date?: string;
-    action?: React.ReactNode;
+    amount?: React.ReactNode | string;
+    recipient?: React.ReactNode | string;
+    receiptNo?: React.ReactNode | string;
+    details?: React.ReactNode | string;
+    tax?: React.ReactNode | string;
+    date?: React.ReactNode | string;
+    statusAsText?: React.ReactNode | string;
+    action?: React.ReactNode | string;
     onClick?: () => void;
+    notShowIcon?: boolean;
 }
-declare const TransactionCard: ({ className, amount, recipient, receiptNo, details, tax, date, action, onClick, }: TransactionCardProps) => JSX.Element;
+declare const TransactionCard: ({ className, amount, recipient, receiptNo, details, tax, date, statusAsText, action, onClick, notShowIcon, }: TransactionCardProps) => JSX.Element;
 export default TransactionCard;

package/dist/components/transaction-card/transaction-card.stories.d.ts

@@ -3,7 +3,7 @@ import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, amount, recipient, receiptNo, details, tax, date, action, onClick, }: import("./transaction-card").TransactionCardProps) => JSX.Element;
+    component: ({ className, amount, recipient, receiptNo, details, tax, date, statusAsText, action, onClick, notShowIcon, }: import("./transaction-card").TransactionCardProps) => JSX.Element;
 };
 export default _default;
 export declare const TransactionCardStory: {
@@ -12,3 +12,9 @@ export declare const TransactionCardStory: {
         name: string;
     };
 };
+export declare const RegistrationCard: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/uploader/Icons.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Icons: {
+    upload: (props?: {}) => JSX.Element;
+    remove: (props?: {}) => JSX.Element;
+};
+export default Icons;

package/dist/components/uploader/uploadAndCropper.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface UploadAndCropperProps {
+    imageDefault: string;
+    width?: number;
+    border?: number;
+    borderRadius?: number;
+    color?: Array<number> | undefined;
+    handleOnRemove?: () => void;
+    imagePreview?: string;
+    setImagePreview?: (e: any) => void;
+}
+declare const UploadAndCropper: ({ width, border, borderRadius, color, handleOnRemove, imagePreview, setImagePreview, }: UploadAndCropperProps) => JSX.Element;
+export default UploadAndCropper;