@0xsquid/ui - npm Package Compare versions

Comparing version 0.2.0-beta.0 to 0.2.0

dist/cjs/types/components/index.d.ts

@@ -0,1 +1,6 @@
+export * from './badges';
 export * from './buttons';
+export * from './controls';
+export * from './layout';
+export * from './lists';
+export * from './typography';

dist/cjs/types/index.d.ts

 export * from './components';
+export * from './providers';

dist/cjs/types/providers/SquidConfigProvider.d.ts

 /// <reference types="react" />
 import { ConfigTheme } from '../types/config';
-export declare function useSquidConfig(): ConfigTheme;
 export declare function SquidConfigProvider({ theme, children, }: {
@@ -5,0 +4,0 @@ theme?: ConfigTheme;

dist/esm/types/components/index.d.ts

@@ -0,1 +1,6 @@
+export * from './badges';
 export * from './buttons';
+export * from './controls';
+export * from './layout';
+export * from './lists';
+export * from './typography';

dist/esm/types/index.d.ts

 export * from './components';
+export * from './providers';

dist/esm/types/providers/SquidConfigProvider.d.ts

 /// <reference types="react" />
 import { ConfigTheme } from '../types/config';
-export declare function useSquidConfig(): ConfigTheme;
 export declare function SquidConfigProvider({ theme, children, }: {
@@ -5,0 +4,0 @@ theme?: ConfigTheme;

dist/index.d.ts

 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
 
+interface BadgeImageProps {
+    imageUrl?: string;
+    badgeUrl?: string;
+    size?: BadgeSize;
+    extraMarginForBadge?: boolean;
+    rounded?: boolean;
+}
+type BadgeSize = 'sm' | 'md';
+declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
+
+interface UsdAmountProps {
+    usdAmount: number;
+}
+declare function UsdAmount({ usdAmount }: UsdAmountProps): react_jsx_runtime.JSX.Element;
+
 interface AddressButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -18,5 +34,14 @@ label: string;
 
+type TextSize = 'small' | 'medium' | 'large';
+type SwitchSize = 'small' | 'large';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonSize = 'md' | 'lg';
+type SwapDirection = 'from' | 'to';
 type BoostMode = 'normal' | 'boost';
+declare enum DetailsToolbarState {
+    FULL = 0,
+    LOADING = 1,
+    EMPTY = 2,
+    ERROR = 3
+}
 
@@ -55,2 +80,193 @@ interface BoostButtonProps {
 
-export { AddressButton, ArrowButton, BoostButton, Button, Chip, Dropdown, FeeButton };
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    placeholder?: string;
+    showIcon?: boolean;
+    showPasteButton?: boolean;
+    icon?: React.ReactNode;
+}
+declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    size: SwitchSize;
+}
+declare function Switch({ checked, onChange, size }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+type TooltipWidth = 'max' | 'container';
+type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+interface TooltipProps {
+    children: React$1.ReactNode;
+    tooltipContent: React$1.ReactNode;
+    threshold?: TooltipThreshold;
+    tooltipWidth?: TooltipWidth;
+    className?: string;
+}
+declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+declare function Boost(): react_jsx_runtime.JSX.Element;
+
+interface DetailsToolbarProps {
+    state?: DetailsToolbarState;
+    errorMessage: string;
+}
+declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface MenuProps extends React$1.ComponentProps<'div'> {
+    menuClassName?: string;
+    contentClassName?: string;
+}
+declare function Menu({ children, menuClassName, contentClassName, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    children: React.ReactNode;
+}
+declare function Modal({ children }: ModalProps): react_jsx_runtime.JSX.Element;
+
+interface NavigationBarProps {
+    title?: string;
+    displayBackButton?: boolean;
+    logoUrl?: string;
+}
+declare function NavigationBar({ title, displayBackButton, logoUrl, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+
+interface ProductCardProps {
+    children?: React.ReactNode;
+}
+declare function ProductCard({ children }: ProductCardProps): react_jsx_runtime.JSX.Element;
+
+interface SwapConfigurationProps {
+    direction: SwapDirection;
+    priceImpactPercentage?: number;
+    amount?: number;
+    swapAmountUsd?: number;
+    balance?: string;
+    isFetching?: boolean;
+    chain?: {
+        iconUrl: string;
+    };
+    token?: {
+        iconUrl: string;
+        symbol: string;
+    };
+}
+declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+
+interface WalletAddressProps {
+    ens?: string;
+    address?: string;
+}
+declare function WalletAddress({ address, ens }: WalletAddressProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownMenuItemProps {
+    label: string;
+    imageUrl?: string;
+    icon?: React.ReactNode;
+}
+declare function DropdownMenuItem({ label, imageUrl, icon, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+
+interface HistoryItemProps {
+    firstImageUrl: string;
+    secondImageUrl: string;
+    isPending?: boolean;
+    fromLabel: string;
+    toLabel: string;
+    pendingLabel?: string;
+    dateCompleted: string;
+    fromAmount: string;
+    toAmount: string;
+}
+declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+
+interface ListItemProps {
+    title: string | React.ReactNode;
+    mainImageUrl?: string;
+    secondaryImageUrl?: string;
+    subtitle?: string;
+    detail?: string;
+    icon?: React.ReactNode;
+    size?: ListItemSize;
+    mainIcon?: React.ReactNode;
+    className?: string;
+}
+type ListItemSize = 'small' | 'large';
+declare function ListItem({ title, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, }: ListItemProps): react_jsx_runtime.JSX.Element;
+
+interface MenuItemProps {
+    label: string;
+    imageUrl?: string;
+    icon?: React.ReactNode;
+}
+declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
+
+interface SectionTitleProps {
+    title: string;
+    icon?: React.ReactNode;
+    accessory?: string | null;
+    actionIcon?: React.ReactNode;
+    className?: string;
+}
+declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+
+interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: string | undefined;
+    size: TextSize;
+    bold?: boolean;
+}
+declare function BodyText({ size, children, bold, ...props }: BodyTextProps): react_jsx_runtime.JSX.Element;
+
+interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: string;
+    bold?: boolean;
+}
+declare function CaptionText({ children, bold, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
+
+interface HeadingTextProps {
+    children: string;
+    size: TextSize;
+    bold?: boolean;
+}
+declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
+
+interface ConfigTheme {
+    'grey-100': string;
+    'grey-200': string;
+    'grey-300': string;
+    'grey-400': string;
+    'grey-500': string;
+    'grey-600': string;
+    'grey-700': string;
+    'grey-800': string;
+    'grey-900': string;
+    'royal-100': string;
+    'royal-200': string;
+    'royal-300': string;
+    'royal-400': string;
+    'royal-500': string;
+    'royal-600': string;
+    'royal-700': string;
+    'royal-800': string;
+    'status-positive': string;
+    'status-negative': string;
+    'material-light-thin': string;
+    'material-light-average': string;
+    'material-light-thick': string;
+    'material-dark-thin': string;
+    'material-dark-average': string;
+    'material-dark-thick': string;
+    'volt-300': string;
+    'volt-400': string;
+    'volt-600': string;
+    'volt-700': string;
+    'volt-800': string;
+    'volt-900': string;
+    'accent-salmon': string;
+    'accent-gold': string;
+}
+
+declare function SquidConfigProvider({ theme, children, }: {
+    theme?: ConfigTheme;
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { AddressButton, ArrowButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, Dropdown, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SquidConfigProvider, SwapConfiguration, Switch, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress };

package.json

@@ -8,3 +8,3 @@ {
   "description": "Squid's UI components",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.0",
   "author": "",
@@ -29,4 +29,2 @@ "license": "MIT",
     "color": "4.2.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "tailwind-merge": "2.3.0"
@@ -78,2 +76,3 @@ },
     "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^8.0.1",
@@ -106,3 +105,7 @@ "tailwindcss": "3.4.1",
     }
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

README.md

@@ -5,4 +5,33 @@ # Squid UI
 
-## Getting Started
+## Package installation and usage
 
+Install the package:
+
+```bash
+yarn add @0xsquid/ui
+```
+
+Import styles in your entry point:
+
+```jsx
+// src/main.tsx | src/pages/_app.tsx | etc...
+import '@0xsquid/ui/dist/index.css'
+```
+
+Wrap your app with our theme provider `<SquidConfigProvider />` and specify your theme:
+
+```jsx
+import { SquidConfigProvider, Button } from '@0xsquid/ui'
+
+function App() {
+  return (
+    <SquidConfigProvider theme={yourTheme}>
+      <Button label="Hello world" variant="primary" size="md" />
+    </SquidConfigProvider>
+  )
+}
+```
+
+## Development
+
 ### Install dependencies
@@ -19,1 +48,27 @@
 ```
+
+### Build package
+
+To build the package using Rollup, run:
+
+```bash
+yarn build
+```
+
+This command will:
+
+1. compile Tailwind CSS classes into `src/styles/compiled-tailwind.css`
+2. bundle source code, along with its type declarations, into the `dist/` folder
+3. copy `src/styles/compiled-tailwind.css` to `dist/index.css`
+
+### Lint and format
+
+To format and lint the code, run:
+
+```bash
+yarn format:fix
+```
+
+```bash
+yarn lint:fix
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

206

increased by6.19%

Number of lines in readme file

73

increased by305.56%

Worsened metrics

Total package byte prevSize

354546

decreased by-38.55%

Dev dependency count

39

increased by2.63%

Lines of code

9902

decreased by-37.38%

Dependency changes

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• - Removedreact@18.2.0

• - Removedreact-dom@18.2.0

• - Removedreact@18.2.0(transitive)

• - Removedreact-dom@18.2.0(transitive)