@mycause/ui 0.18.0 → 0.18.2

package/CHANGELOG.md

@@ -1,9 +1,31 @@
+## 0.18.1
+
+###### Mon, 22 Jan 2024
+
+- Add new components for My Account:
+  - Sidebar
+  - Stats blocks
+  - Progressbar
+  - FRP preview card
+  - FRP closed card
+  - Favorite charities card
+
+## 0.18.1
+
+###### Wed, 23 Aug 2023
+
+- Create modal show image
+
 ## 0.18.0
 
 ###### Wed, 23 Aug 2023
 
-- Nav 
-  - Add props for login button under "I'm A Charity" menu
+- Nav
+- Add props for login button under "I'm A Charity" menu
+
+## 0.17.9
+
+- Update UI component for new parter dashboard
 
 ## 0.17.8
 

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.Moment | null;
+    onDateChange: (date: moment.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?: () => 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/donate-card copy/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 copy/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 copy/index.d.ts

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

package/dist/components/field-helpers/field-label.d.ts

@@ -3,7 +3,6 @@ interface FieldLabelProps extends React.HTMLProps<HTMLLabelElement> {
     large?: boolean;
     children?: React.ReactNode;
     required?: boolean;
-    asteriskColor?: string;
 }
-declare function FieldLabel({ large, className, children, required, asteriskColor, ...rest }: FieldLabelProps): JSX.Element;
+declare function FieldLabel({ large, className, children, required, ...rest }: FieldLabelProps): JSX.Element;
 export default FieldLabel;

package/dist/components/index.d.ts

@@ -47,12 +47,6 @@ export * from "./partner-chart-stats";
 export * from "./this-month-card";
 export * from "./partner-toggle-button";
 export * from "./footerV2";
-export * from "./partner-monthly-donations";
-export * from "./partner-monthly-stats";
-export * from "./table";
-export * from "./partner-chart-stats";
-export * from "./this-month-card";
-export * from "./partner-toggle-button";
 export * from "./my-account-start-fundraise-card";
 export * from "./my-account-choose-charity-card";
 export * from "./favorite-charity-item";
@@ -60,5 +54,4 @@ export * from "./my-account-sidebar";
 export * from "./my-account-frp-preview";
 export * from "./my-account-stats-donated";
 export * from "./my-account-stats-raised";
-export * from "./input";
 export * from "./my-account-frp-closed";

package/dist/components/input/InputDefault.d.ts

@@ -1,11 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 interface InputDefaltProps {
-    lable?: string;
+    label?: string | React.ReactNode;
     required?: boolean;
     placeholder?: string;
-    onChange: (value: string) => void;
-    value: string;
+    onChange?: (value: string) => void;
+    value?: string | Array<string> | number;
     error?: string | null | boolean;
+    disable?: boolean;
+    name?: string;
 }
-declare const Input: ({ lable, required, placeholder, value, onChange, error, }: InputDefaltProps) => JSX.Element;
+declare const Input: ({ label, required, placeholder, value, onChange, error, disable, name, }: InputDefaltProps) => JSX.Element;
 export default Input;

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

@@ -16,3 +16,9 @@ export declare const InputV2: {
         name: string;
     };
 };
+export declare const InputV3: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -29,13 +29,13 @@ export declare const ModalStoriesMinimal: {
         name: string;
     };
 };
-export declare const ModalStoriesImage: {
+export declare const ModalConfirmation: {
     (): JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const ModalConfirmation: {
+export declare const ModalStoriesImage: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/components/my-account-frp-closed/frp-information.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 interface FrpInfomationProps {
     donations: number;
     amountRaised: number;
@@ -6,6 +6,8 @@ interface FrpInfomationProps {
     sqSize: number;
     strokeWidth: number;
     closedDate?: string | undefined;
+    customRow?: React.ReactNode;
+    manageLink?: string;
 }
-declare const FrpInfomation: ({ donations, amountRaised, amountGoal, sqSize, strokeWidth, closedDate, }: FrpInfomationProps) => JSX.Element;
+declare const FrpInfomation: ({ donations, amountRaised, amountGoal, sqSize, strokeWidth, closedDate, customRow, manageLink, }: FrpInfomationProps) => JSX.Element;
 export default FrpInfomation;

package/dist/components/my-account-frp-closed/my-account-frp-closed.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface MyAccountFrpClosedProps {
     img?: string;
     link?: string;
@@ -10,6 +10,8 @@ export interface MyAccountFrpClosedProps {
     strokeWidth: number;
     frpColor?: string;
     closedDate?: string;
+    customRow?: React.ReactNode;
+    manageLink?: string;
 }
-declare const MyAccountFrpClosed: ({ img, link, title, amountGoal, amountRaised, donations, sqSize, strokeWidth, frpColor, closedDate, }: MyAccountFrpClosedProps) => JSX.Element;
+declare const MyAccountFrpClosed: ({ img, link, title, amountGoal, amountRaised, donations, sqSize, strokeWidth, frpColor, closedDate, customRow, manageLink, }: MyAccountFrpClosedProps) => JSX.Element;
 export default MyAccountFrpClosed;

package/dist/components/my-account-stats-raised/my-account-stats-raised.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 export interface MyAccountStatsRaisedProps {
     amount: number;
-    donations: number;
     campaigns: number;
 }
-declare const MyAccountStatsRaised: ({ amount, donations, campaigns, }: MyAccountStatsRaisedProps) => JSX.Element;
+declare const MyAccountStatsRaised: ({ amount, campaigns, }: MyAccountStatsRaisedProps) => JSX.Element;
 export default MyAccountStatsRaised;

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

@@ -1,3 +1,2 @@
 export { default as PhoneNumberInput } from "./phone-number-input";
-export { default as PhoneInput } from "./phone-number-input-v2";
 export * from "./util";

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { CountryCode } from "libphonenumber-js";
+declare type PhoneNumberInputProps = {
+    values: {
+        number: string;
+        countryCallingCode: string;
+        country: string;
+    };
+    names?: {
+        number: string;
+        countryCallingCode: string;
+        country: string;
+    };
+    onChange: (value: string, name: string) => void;
+    label?: React.ReactNode;
+    error?: string | null;
+    onBlur?: (e: React.FocusEvent) => void;
+    helperText?: React.ReactNode;
+    required?: boolean;
+    defaultCountry?: CountryCode;
+    placeholder?: string;
+    color?: string;
+};
+declare function PhoneNumberInputV1({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, placeholder, color, }: PhoneNumberInputProps): JSX.Element;
+export default PhoneNumberInputV1;

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

@@ -13,6 +13,7 @@ declare type PhoneInputProps = {
     defaultCountry?: CountryCode;
     placeholder?: string;
     color?: string;
+    name?: string;
 };
-declare function PhoneInput({ values, onChange, defaultCountry, label, required, placeholder, error, }: PhoneInputProps): JSX.Element;
+declare function PhoneInput({ values, onChange, defaultCountry, label, required, placeholder, error, name, }: PhoneInputProps): JSX.Element;
 export default PhoneInput;

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

@@ -11,15 +11,3 @@ export declare const PhoneNumberInputStory: {
         name: string;
     };
 };
-export declare const PhoneInputStory: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const PhoneNumberInputV2: {
-    (): JSX.Element;
-    story: {
-        name: string;
-    };
-};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { SelectProps as MDCSelectProps, SelectHelperTextProps } from "@material/react-select";
+export declare type SelectOption = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+};
+export interface SelectProps extends Omit<MDCSelectProps, "onEnhancedChange" | "ref" | "children" | "options" | "outlined" | "helperText" | "dense"> {
+    label?: string;
+    value: string;
+    onChange: (value: any) => void;
+    externalLabel?: boolean;
+    large?: boolean;
+    options: Array<string> | Array<SelectOption>;
+    leadingIcon?: React.ReactElement;
+    helperText?: string | React.ReactElement<SelectHelperTextProps> | null;
+    isHelperTextPersistent?: boolean;
+    noArrow?: boolean;
+    color?: string;
+    error?: boolean | string;
+}
+declare const SelectV2: ({ label, value, onChange, helperText, isHelperTextPersistent, externalLabel, id, className, options, large, required, leadingIcon, noArrow, error, color, ...rest }: SelectProps) => JSX.Element;
+export default SelectV2;

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

@@ -0,0 +1,26 @@
+import React from "react";
+export declare type SelectOption = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+};
+export interface SelectProps {
+    label?: string;
+    value: string | number;
+    onChange: (value: string) => void;
+    externalLabel?: boolean;
+    large?: boolean;
+    options: Array<SelectOption>;
+    leadingIcon?: React.ReactElement;
+    helperText?: string | null;
+    isHelperTextPersistent?: boolean;
+    noArrow?: boolean;
+    color?: string;
+    asteriskColor?: string;
+    itemHoverColor?: string;
+    error?: boolean | string;
+    trailingIcon?: React.ReactElement;
+    bgColor?: string;
+}
+declare const SelectV2: ({ options, value, onChange, color, itemHoverColor, noArrow, trailingIcon, bgColor, }: SelectProps) => JSX.Element;
+export default SelectV2;

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

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

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

@@ -11,6 +11,7 @@ export interface PartnerMonthlyTableProps {
     data: Array<object>;
     title?: string;
     tooltip?: string;
+    customBottomRow?: React.ReactNode;
 }
-declare const PartnerMonthlyTable: ({ columns, data, title, tooltip, }: PartnerMonthlyTableProps) => JSX.Element;
+declare const PartnerMonthlyTable: ({ columns, data, title, tooltip, customBottomRow, }: PartnerMonthlyTableProps) => JSX.Element;
 export default PartnerMonthlyTable;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface DotProps {
+    color: string;
+}
+export declare function Dot(props: DotProps): JSX.Element;
+export {};

package/dist/components/transaction-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/transaction-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("./transaction-card").DonateCardProps) => JSX.Element;
+};
+export default _default;
+export declare const donatecard: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface TransactionCardProps {
+    className?: string;
+    amount?: string;
+    recipient?: string;
+    receiptNo?: string;
+    details?: string;
+    tax?: string;
+    date?: string;
+    action?: React.ReactNode;
+}
+declare const TransactionCard: ({ className, amount, recipient, receiptNo, details, tax, date, action, }: TransactionCardProps) => JSX.Element;
+export default TransactionCard;

package/dist/components/transaction-card/transaction-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, amount, recipient, receiptNo, details, tax, date, action, }: import("./transaction-card").TransactionCardProps) => JSX.Element;
+};
+export default _default;
+export declare const TransactionCardStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/transaction-card/transaction-cardstories.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("./transaction-card").DonateCardProps) => JSX.Element;
+};
+export default _default;
+export declare const donatecard: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};