@mycause/ui 0.0.0-c7035342 → 0.0.0-c72d90f4

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.
@@ -174,6 +191,15 @@ To manually publish the package locally, use the following command:
 npm publish --access public
 ```
 
+---
+
+Using git commands
+
+```
+git tag <version>
+git push origin <version>
+```
+
 ### Publishing an unstable version
 
 Use the following commands to publish an unstable version. These versions are tagged with the version number `0.0.0-cHASH` where `HASH` is the abbreviated git commit hash. These should only be used for internal development purposes.

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { ListProps } from "../list/list";
+import { ElevationProps } from "../elevation/elevation";
+import { ButtonProps } from "../button/button";
+export interface ButtonSelectProps {
+    children: React.ReactNode;
+    button: Omit<ButtonProps, "onClick">;
+    list: ListProps;
+    elevation: Omit<ElevationProps, "children">;
+}
+declare const ButtonSelect: ({ children, button, list, elevation, }: ButtonSelectProps) => JSX.Element;
+export default ButtonSelect;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+};
+export default _default;
+export declare const ButtonSelectStories: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/button-select/index.d.ts

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface CampaignCardProps {
+    className?: string;
+    imageURL?: string;
+    title?: string;
+    description?: string;
+}
+declare const CampaignCard: ({ className, imageURL, title, description, }: CampaignCardProps) => JSX.Element;
+export default CampaignCard;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+    component: ({ className, imageURL, title, description, }: import("./campaign-card").CampaignCardProps) => JSX.Element;
+};
+export default _default;
+export declare const campaincard: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/campaign-card/index.d.ts

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

package/dist/components/campaign-of-month/campaign-of-month.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface CampaignOfMonthProps {
+    className?: string;
+    title?: string;
+    text?: string;
+    imageUrl?: string;
+    rised?: number;
+    donation?: number;
+    goal?: number;
+    btnText?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    idBtn?: string;
+}
+declare const CampaignOfMonth: ({ className, title, text, imageUrl, rised, donation, goal, btnText, onClick, idBtn, }: CampaignOfMonthProps) => JSX.Element;
+export default CampaignOfMonth;

package/dist/components/campaign-of-month/campaign-of-month.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+    component: ({ className, title, text, imageUrl, rised, donation, goal, btnText, onClick, idBtn, }: import("./campaign-of-month").CampaignOfMonthProps) => JSX.Element;
+};
+export default _default;
+export declare const campaignofmonth: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/campaign-of-month/index.d.ts

@@ -0,0 +1 @@
+export { default as CampaignOfMonth } from "./campaign-of-month";

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface CharityCardProps {
+    className?: string;
+    title?: string;
+}
+declare const CharityCard: ({ className, title }: CharityCardProps) => JSX.Element;
+export default CharityCard;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+    component: ({ className, title }: import("./charity-card").CharityCardProps) => JSX.Element;
+};
+export default _default;
+export declare const charitycard: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/charity-card/index.d.ts

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

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

@@ -3,6 +3,9 @@ interface ComboFieldProps {
     children: Array<React.ReactElement>;
     className?: string;
     large?: boolean;
+    buttonBorder?: boolean;
+    buttonFullWidth?: boolean;
+    align?: string;
 }
 /**
  * Combines several input controls to into one visually continuous
@@ -14,5 +17,5 @@ interface ComboFieldProps {
  * - Button
  * - IconButtonGroup
  */
-declare function ComboField({ children, className, large, ...rest }: ComboFieldProps): JSX.Element;
+declare function ComboField({ children, className, large, buttonBorder, buttonFullWidth, align, ...rest }: ComboFieldProps): JSX.Element;
 export default ComboField;

package/dist/components/comment-section/comment-section-v2/comment-section-v2.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { SubCommentsV2Props } from "./sub-comments-v2";
+export declare type CommentTypeV2 = {
+    amount?: number | string;
+    claps?: 0 | 1;
+    comment?: string | null;
+    donationDate?: string | number;
+    firstName?: string;
+    id?: number;
+    isAnonymous?: boolean;
+    kisses?: 0 | 1;
+    lastName?: string;
+    likes?: 0 | 1;
+    message?: string;
+    prays?: 1 | 0;
+    profileImage?: string | null;
+    tears?: 0 | 1;
+    thumbs?: 0 | 1;
+    userId?: number | string | null;
+    campaignCreator?: string;
+    subComment?: Array<SubCommentsV2Props>;
+};
+export declare const checkLastElement: (key: number, itemLength: number) => boolean;
+interface ComboFieldProps {
+    comments: Array<CommentTypeV2 & {
+        subComment?: Array<CommentTypeV2>;
+    }>;
+    showMore?: () => void;
+}
+declare const CommentSectionV2: ({ comments, showMore }: ComboFieldProps) => JSX.Element;
+export default CommentSectionV2;

package/dist/components/comment-section/comment-section-v2/sub-comments-v2.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type SubCommentsV2Props = {
+    profileImage: string;
+    firstName?: string;
+    lastName?: string;
+    comment: string;
+};
+declare const SubCommentsV2: ({ comments, }: {
+    comments: SubCommentsV2Props[];
+}) => JSX.Element;
+export default SubCommentsV2;

package/dist/components/comment-section/comment-section.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export declare type CommentType = {
+    profileImage: string;
+    username: string;
+    comment?: string;
+    liked: boolean;
+    userId: string | number;
+    donation?: number | string;
+    date?: string;
+};
+export declare const checkLastElement: (key: number, itemLength: number) => boolean;
+interface ComboFieldProps {
+    comments: Array<CommentType & {
+        subComment?: Array<CommentType>;
+    }>;
+    title: React.ReactNode | string;
+    maxWidth?: string;
+    dissableCount?: boolean;
+    showMore?: () => void;
+    likeCall?: (e: CommentType) => void;
+    dp?: number;
+}
+declare const CommentSection: ({ comments, maxWidth, title, dissableCount, showMore, likeCall, dp, }: ComboFieldProps) => JSX.Element;
+export default CommentSection;

package/dist/components/comment-section/comment-section.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+};
+export default _default;
+export declare const CommentSectionStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CommentSectionStoryV2: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/comment-section/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CommentSection } from "./comment-section";
+export { default as CommentSectionV2, } from "./comment-section-v2/comment-section-v2";

package/dist/components/comment-section/sub-comments.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CommentType } from "./comment-section";
+declare const SubComments: ({ comments }: {
+    comments: CommentType[];
+}) => JSX.Element;
+export default SubComments;

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/{phone-number-field/phone-number-field.stories.d.ts → credit-card-form/credit-card.stories.d.ts}

@@ -4,7 +4,7 @@ declare const _default: {
     decorators: ((...args: any) => any)[];
 };
 export default _default;
-export declare const PhoneNumberFieldStory: {
+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/cropper/cropper.d.ts

@@ -5,7 +5,7 @@ export interface CropperProps {
     cropImage: (arg: string) => void;
     style?: React.CSSProperties;
     dragMode?: "none" | "move" | "crop" | undefined;
-    viewMode?: 0 | 2 | 1 | 3 | undefined;
+    viewMode?: 0 | 1 | 2 | 3 | undefined;
     minCropBoxWidth?: number;
     minCropBoxHeight?: number;
     wheelZoomRatio?: number;
@@ -14,8 +14,9 @@ export interface CropperProps {
     cropBoxResizable?: boolean;
     zoomOnWheel?: boolean;
     guides?: boolean;
-    exportType?: string;
-    setCropBoxData?: any;
+    autoCropArea?: number;
+    quality?: number;
+    imageType?: string;
 }
-declare const Cropper: ({ image, exportType, aspectRatio, cropImage, ...res }: CropperProps) => JSX.Element;
+declare const Cropper: ({ image, aspectRatio, cropImage, autoCropArea, quality, imageType, ...res }: CropperProps) => JSX.Element;
 export default Cropper;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: (typeof CenterDecorator)[];
+    decorators: ((...args: any) => any)[];
 };
 export default _default;
 export declare const CropperStory: {

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)[];
@@ -30,3 +31,9 @@ export declare const SingleDatePickerStory: {
         name: string;
     };
 };
+export declare const SingleDatePickerCustomHeaderStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -1,2 +1,3 @@
 export { default as DatePicker } from "./date-picker";
 export { default as SingleDatePicker } from "./single-date-picker";
+export { default as CustomHeaderSingleDatePicker, } from "./single-date-picker-custom-header";

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Moment } from "moment";
+export interface DatePickerProps {
+    id: string;
+    date: Moment | null;
+    onDateChange: (date: Moment | null) => void;
+    onFocusChange: (arg: boolean | null) => void;
+    focused: boolean | null;
+    placeholder?: string;
+    disabled?: boolean;
+    color?: string;
+    required?: boolean;
+    numberOfMonths?: number;
+    inputIconPosition?: "before" | "after";
+    orientation?: "horizontal" | "vertical";
+    customInputIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+    customCloseIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+    displayFormat?: string;
+    error?: boolean;
+    label?: string;
+    width?: string;
+    isOutsideRange?: (day: any) => boolean;
+    renderCalendarInfo?: () => string | JSX.Element;
+    calendarInfoPosition?: "before" | "after" | "top" | "bottom";
+    navPrev?: string | JSX.Element;
+    navNext?: string | JSX.Element;
+    showDefaultInputIcon?: boolean;
+    startYear?: number;
+    endYear?: number;
+}
+declare const CustomHeaderSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, startYear, endYear, ...rest }: DatePickerProps) => JSX.Element;
+export default CustomHeaderSingleDatePicker;

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

@@ -5,7 +5,7 @@ export interface DatePickerProps {
     date: moment.Moment | null;
     onDateChange: (date: moment.Moment | null) => void;
     onFocusChange: (arg: boolean | null) => void;
-    focused: boolean;
+    focused: boolean | null;
     placeholder?: string;
     disabled?: boolean;
     color?: string;
@@ -19,6 +19,8 @@ export interface DatePickerProps {
     error?: boolean;
     label?: string;
     width?: string;
+    isOutsideRange?: (day: any) => boolean;
+    showDefaultInputIcon?: boolean;
 }
-declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, ...rest }: DatePickerProps) => JSX.Element;
+declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, ...rest }: DatePickerProps) => JSX.Element;
 export default CustomSingleDatePicker;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface DonateCardProps {
+    className?: string;
+    title?: string;
+    description?: string;
+}
+declare const DonateCard: ({ className, title, description, }: DonateCardProps) => JSX.Element;
+export default DonateCard;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+    component: ({ className, title, description, }: import("./donate-card").DonateCardProps) => JSX.Element;
+};
+export default _default;
+export declare const donatecard: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/donate-card/index.d.ts

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

package/dist/components/donation-form/donation-details.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ColorSpecifier } from "../../theme/theme";
+import { FormDataProps, ErrorProps } from "./donation-form";
+export interface DonationDetails {
+    formData: FormDataProps;
+    setFormData: (e: FormDataProps | React.SetStateAction<FormDataProps>) => void;
+    getFormData: (e: FormDataProps) => void;
+    error: ErrorProps;
+    color?: ColorSpecifier;
+}
+declare const DonationDetails: ({ formData, setFormData, getFormData, error, color, }: DonationDetails) => JSX.Element;
+export default DonationDetails;

package/dist/components/donation-form/donation-form-v2/donation-form-v2.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DonationOptionsProps } from "../donation-form";
+export interface DonationCampaignFormProps {
+    id?: string;
+    donationOption: Array<DonationOptionsProps>;
+    rised: number;
+    donation: number;
+    target: number;
+    clickOnShare: () => void;
+    clickOnDonation: () => void;
+}
+declare const DonationFormV2: ({ donationOption, rised, donation, target, clickOnShare, clickOnDonation, }: DonationCampaignFormProps) => JSX.Element;
+export default DonationFormV2;

package/dist/components/donation-form/donation-form.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { ColorSpecifier } from "../../theme/theme";
+export interface PhoneProps {
+    number: string;
+    countryCallingCode: string;
+    country: string;
+}
+export interface FormDataProps {
+    firstName?: string;
+    lastName?: string;
+    address?: string;
+    cvv?: string;
+    email?: string;
+    card?: string;
+    expiry?: string;
+    phone?: PhoneProps;
+}
+export interface ErrorProps {
+    firstName?: string;
+    lastName?: string;
+    address?: string;
+    cvv?: string;
+    email?: string;
+    card?: string;
+    expiry?: string;
+    phone?: string;
+}
+interface SubmitProps extends FormDataProps {
+    mode: string;
+    amount: string | undefined;
+    inHonor: string | undefined;
+    addFee: boolean;
+    fees: string | number | undefined;
+}
+export interface DonationOptionsProps {
+    label: string | number;
+    value?: string;
+    noprefix?: boolean;
+    nocurrency?: boolean;
+    active?: boolean;
+}
+export interface DonationFormProps {
+    currency: string;
+    prefix: string;
+    getOption: (e: string | undefined) => void;
+    getDonation: (e: string | undefined) => void;
+    getInHonor: (e: string | undefined) => void;
+    getFormData: (e: FormDataProps) => void;
+    submit: (e: SubmitProps) => void;
+    formDefault: FormDataProps;
+    donationOption: Array<DonationOptionsProps>;
+    hasCard?: boolean;
+    error?: ErrorProps;
+    color?: ColorSpecifier;
+    buttonDonationColor?: ColorSpecifier;
+    buttonNextColor?: ColorSpecifier;
+    width?: string;
+    isLoading?: boolean;
+    noContianer?: boolean;
+    disableControl?: boolean;
+    fees?: string | number;
+}
+declare const DonationForm: ({ isLoading, noContianer, currency, prefix, getOption, getDonation, getInHonor, getFormData, formDefault, hasCard, donationOption, submit, error, color, buttonDonationColor, buttonNextColor, width, disableControl, fees, }: DonationFormProps) => JSX.Element;
+export default DonationForm;

package/dist/components/donation-form/donation-form.stories.d.ts

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

package/dist/components/donation-form/donation-payment.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ColorSpecifier } from "../../theme/theme";
+import { FormDataProps, ErrorProps } from "./donation-form";
+export interface DonationPaymentProps {
+    formData: FormDataProps;
+    setFormData: (e: FormDataProps) => void;
+    getFormData: (e: FormDataProps) => void;
+    error: ErrorProps;
+    color?: ColorSpecifier;
+    hasCard?: boolean;
+}
+declare const DonationPayment: ({ formData, setFormData, getFormData, error, color, hasCard, }: DonationPaymentProps) => JSX.Element;
+export default DonationPayment;

package/dist/components/donation-form/donation-select.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ColorSpecifier } from "../../theme/theme";
+import { DonationOptionsProps } from "./donation-form";
+interface DonationFormProps {
+    color: ColorSpecifier;
+    items: Array<DonationOptionsProps>;
+    click: (e: string | undefined) => void;
+    currency: string;
+    prefix: string;
+    mode: string;
+}
+declare const DonationSelect: ({ color, items, click, currency, prefix, mode, }: DonationFormProps) => JSX.Element;
+export default DonationSelect;

package/dist/components/donation-form/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DonationForm } from "./donation-form";
+export { default as DonationFormV2 } from "./donation-form-v2/donation-form-v2";

package/dist/components/elevation/elevation.d.ts

@@ -2,11 +2,12 @@ import React from "react";
 import { BoxProps } from "../layout/box";
 export interface ElevationProps extends BoxProps {
     dp?: number;
+    id?: string;
     style?: object;
     radius?: string;
     className?: string;
     transition?: boolean;
     children: React.ReactNode;
 }
-declare const Elevation: ({ dp, radius, children, className, transition, ...res }: ElevationProps) => JSX.Element;
+declare const Elevation: ({ dp, id, radius, children, className, transition, ...res }: ElevationProps) => JSX.Element;
 export default Elevation;