@iota/apps-ui-kit 0.3.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @iota/apps-ui-kit
 
+## 0.5.1
+
+### Patch Changes
+
+-   0524b61: add Tooltip to Badge in Account component
+-   a6d0c82: Add eslint config. Resolve eslint errors/warnings.
+-   a756bbc: add copy button to DisplayStats component
+-   9d01a25: Fix dialog to prevent closing popup when closing a toast
+-   0edfd4e: Update dependencies.
+-   be15d98: Update imports to avoid cycle dependencies
+
+## 0.5.0
+
+### Minor Changes
+
+-   a4b46bc: add more badge types
+
+### Patch Changes
+
+-   6d274df: make renderSuggestion prop optional in Search component
+-   976e7f8: Add heightFull configuration props to Table component
+-   bb45cb5: Add new type for CardImage component
+-   Updated dependencies [a4b46bc]
+    -   @iota/apps-ui-icons@0.3.0
+
+## 0.4.0
+
+### Minor Changes
+
+-   a3f08da: add toggle component
+
+### Patch Changes
+
+-   1ad39f9: Update dependencies
+-   4e4f710: replace supportingText from string to ReactNode in InfoBox component
+-   d0cb92e: manage unreachable images by displaying a placeholder instead in VisualAssetCard
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,16 @@
+# `@iota/apps-ui-kit`
+
+## Usage
+
+Installation:
+
+```bash
+# Replace with npm, yarn, bun, etc.
+pnpm install @iota/apps-ui-kit
+```
+
+Importing:
+
+```typescript
+import { Button } from '@iota/apps-ui-kit';
+```

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+import { BadgeType as BadgeType_2 } from '../../../../components/atoms';
+import { ButtonProps as ButtonProps_2 } from '../../../../components/atoms';
+import { ButtonSegmentType as ButtonSegmentType_2 } from '../../../../components/atoms';
+import { ButtonType as ButtonType_2 } from '../../../../components/atoms/button';
 import { ComponentProps } from 'react';
 import { Config } from 'tailwindcss';
 import { ForwardRefExoticComponent } from 'react';
@@ -9,7 +13,8 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-import { SearchBarType as SearchBarType_2 } from '../../../../components';
+import { TooltipPosition as TooltipPosition_2 } from '../../../../components/atoms';
+import { TooltipPosition as TooltipPosition_3 } from '../../../../components/atoms/tooltip';
 
 export declare function Accordion({ children, hideBorder, }: {
     children: React.ReactNode;
@@ -50,7 +55,7 @@ export declare interface AccordionHeaderProps {
     hideBorder?: boolean;
 }
 
-export declare function Account({ title, subtitle, badgeType, badgeText, isLocked, avatarContent, onOptionsClick, onLockAccountClick, onUnlockAccountClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, }: AccountProps): React.JSX.Element;
+export declare function Account({ title, subtitle, badgeType, badgeText, isLocked, avatarContent, onOptionsClick, onLockAccountClick, onUnlockAccountClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, badgeTooltipText, badgeTooltipPosition, }: AccountProps): React.JSX.Element;
 
 declare interface AccountProps {
     /**
@@ -118,11 +123,19 @@ declare interface AccountProps {
     /**
      * The type of the badge.
      */
-    badgeType?: BadgeType;
+    badgeType?: BadgeType_2;
     /**
      * The text of the badge.
      */
     badgeText?: string;
+    /**
+     * The tooltip text of the badge.
+     */
+    badgeTooltipText?: string;
+    /**
+     * The tooltip position of the badge.
+     */
+    badgeTooltipPosition?: TooltipPosition_2;
 }
 
 export declare function Address({ text, isCopyable, isExternal, externalLink, copyText, onCopySuccess, onCopyError, onOpen, }: AddressProps): React.JSX.Element;
@@ -178,7 +191,10 @@ declare interface BadgeProps {
 export declare enum BadgeType {
     Neutral = "neutral",
     PrimarySolid = "primary-solid",
-    PrimarySoft = "primary-fill"
+    PrimarySoft = "primary-fill",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
 }
 
 export declare interface BaseInputProps extends InputWrapperProps {
@@ -343,7 +359,7 @@ export declare type CardActionProps = {
     onClick?: () => void;
     icon?: React.ReactNode;
     iconAfterText?: boolean;
-    buttonType?: ButtonType;
+    buttonType?: ButtonType_2;
     buttonDisabled?: boolean;
 };
 
@@ -353,7 +369,7 @@ export declare enum CardActionType {
     Button = "button"
 }
 
-export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, }: CardBodyProps): JSX_2.Element;
+export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, tooltipText, tooltipPosition, }: CardBodyProps): JSX_2.Element;
 
 export declare type CardBodyProps = {
     title: string;
@@ -361,6 +377,8 @@ export declare type CardBodyProps = {
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
     isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition_3;
 };
 
 export declare function CardImage({ type, shape, url, children, }: CardImageProps): JSX_2.Element;
@@ -480,7 +498,7 @@ declare interface ChipProps {
     disabled?: boolean;
 }
 
-export declare const Dialog: React_2.FC<RadixDialog.DialogProps>;
+export declare const Dialog: ({ open, onOpenChange, children, ...props }: React_2.ComponentPropsWithoutRef<typeof RadixDialog.Root>) => JSX_2.Element;
 
 export declare const DialogBody: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -502,7 +520,7 @@ export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<RadixDi
 
 export declare const DialogTrigger: React_2.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare function DisplayStats({ label, tooltipPosition, tooltipText, value, supportingLabel, type, size, icon, }: DisplayStatsProps): React.JSX.Element;
+export declare function DisplayStats({ label, tooltipPosition, tooltipText, value, supportingLabel, type, size, icon, copyText, onCopySuccess, onCopyError, }: DisplayStatsProps): React.JSX.Element;
 
 declare interface DisplayStatsProps {
     /**
@@ -512,7 +530,7 @@ declare interface DisplayStatsProps {
     /**
      * The tooltip position.
      */
-    tooltipPosition?: TooltipPosition;
+    tooltipPosition?: TooltipPosition_2;
     /**
      * The tooltip text.
      */
@@ -537,6 +555,18 @@ declare interface DisplayStatsProps {
      * Add icon to the right of the label.
      */
     icon?: React.ReactNode;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the KeyValue  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the KeyValue  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
 }
 
 export declare enum DisplayStatsSize {
@@ -620,6 +650,7 @@ export declare enum ImageShape {
 export declare enum ImageType {
     Placeholder = "placeholder",
     BgSolid = "bg-solid",
+    BgWhite = "bg-white",
     BgTransparent = "bg-transparent"
 }
 
@@ -637,7 +668,7 @@ export declare interface InfoBoxProps {
     /**
      * The supporting text of the info box (optional).
      */
-    supportingText?: string;
+    supportingText?: React.ReactNode;
     /**
      * The type of the info box.
      */
@@ -781,6 +812,7 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
     warning: {
         '10': string;
         '20': string;
+        '60': string;
         '90': string;
     };
 };
@@ -1080,7 +1112,7 @@ export declare enum ScreenSize {
     Xl = "xl"
 }
 
-export declare function Search({ searchValue, suggestions, onSearchValueChange, onSuggestionClick, placeholder, isLoading, onKeyDown, type, renderSuggestion, }: SearchProps): React.JSX.Element;
+export declare function Search({ searchValue, suggestions, onSearchValueChange, onSuggestionClick, placeholder, isLoading, type, renderSuggestion, }: SearchProps): React.JSX.Element;
 
 export declare enum SearchBarType {
     Outlined = "outlined",
@@ -1112,18 +1144,14 @@ export declare interface SearchProps {
      * Are the suggestions loading.
      */
     isLoading: boolean;
-    /**
-     * Callback when a key is pressed.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * The type of the search bar. Can be 'outlined' or 'filled'.
      */
-    type?: SearchBarType_2;
+    type?: SearchBarType;
     /**
      * Render suggestion.
      */
-    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
 export declare function SegmentedButton({ type, children, shape, }: PropsWithChildren<SegmentedButtonProps>): React.JSX.Element;
@@ -1136,7 +1164,7 @@ declare interface SegmentedButtonProps {
     /**
      * The shape of the button
      */
-    shape?: ButtonSegmentType;
+    shape?: ButtonSegmentType_2;
 }
 
 export declare enum SegmentedButtonType {
@@ -1322,9 +1350,9 @@ export declare interface Suggestion {
     type?: string;
 }
 
-export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, }: PropsWithChildren<TableProps>): JSX.Element;
+export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, heightFull, }: PropsWithChildren<TableProps>): JSX.Element;
 
-export declare function TableActionButton(props: PropsWithChildren<ButtonProps>): JSX_2.Element;
+export declare function TableActionButton(props: PropsWithChildren<ButtonProps_2>): JSX_2.Element;
 
 export declare function TableBody({ children }: PropsWithChildren): JSX.Element;
 
@@ -1479,6 +1507,10 @@ export declare type TableProps = {
      * The page size selector component.
      */
     pageSizeSelector?: ReactNode;
+    /**
+     * If the table should take the full height of the parent.
+     */
+    heightFull?: boolean;
 };
 
 export declare function TableRow({ children, leading, }: PropsWithChildren<{
@@ -1527,7 +1559,7 @@ declare interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
     isResizeEnabled?: boolean;
 }
 
-export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, }: TitleProps): JSX_2.Element;
+export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, testId, }: TitleProps): JSX_2.Element;
 
 declare interface TitleProps {
     /**
@@ -1545,7 +1577,7 @@ declare interface TitleProps {
     /**
      * The tooltip position.
      */
-    tooltipPosition?: TooltipPosition;
+    tooltipPosition?: TooltipPosition_2;
     /**
      * The tooltip text.
      */
@@ -1558,6 +1590,10 @@ declare interface TitleProps {
      * The size of the component
      */
     size?: TitleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export declare enum TitleSize {
@@ -1565,6 +1601,53 @@ export declare enum TitleSize {
     Medium = "medium"
 }
 
+export declare const Toggle: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLInputElement>>;
+
+export declare enum ToggleLabelPosition {
+    Left = "left",
+    Right = "right"
+}
+
+declare interface ToggleProps {
+    /**
+     * The label for the toggle.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the toggle (on or off).
+     */
+    isToggled: boolean;
+    /**
+     * Whether the label should be placed before the toggle.
+     */
+    labelPosition?: ToggleLabelPosition;
+    /**
+     * If true, the toggle will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the toggle state changes.
+     */
+    onChange?: (isToggled: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name and id of the toggle input.
+     */
+    name?: string;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export declare enum ToggleSize {
+    Small = "small",
+    Default = "default"
+}
+
 export declare function Tooltip({ text, position, maxWidth, children, }: PropsWithChildren<TooltipProps>): React.JSX.Element;
 
 export declare enum TooltipPosition {