midashand-uikit 0.0.1

package/README.md

@@ -0,0 +1,76 @@
+# midashand UIkit
+
+midashand UIkit is a set of React components and hooks used to build pages on midashand's apps. It also contains a theme file for dark and light mode.
+
+## Install
+
+`npm i midashand-uikit`
+
+
+## Deployment Guide
+
+### 1. Edit ONG token address 
+first go to `src/widgets/Menu/components/CakePrice.tsx`, find `PriceLink` tag and change the ONG token address to current mainnet address.
+
+then go to `package.json` and increase version.
+
+then run 
+```
+npm run build
+npm login
+npm publish
+```
+
+
+## Setup
+
+### Theme
+
+Before using midashand UIkit, you need to provide the theme file to styled-component.
+
+```
+import { ThemeProvider } from 'styled-components'
+import { light, dark } from 'midashand-uikit'
+...
+<ThemeProvider theme={isDark}>...</ThemeProvider>
+```
+
+### Reset
+
+A reset CSS is available as a global styled component.
+
+```
+import { ResetCSS } from 'midashand-uikit'
+...
+<ResetCSS />
+```
+
+### Types
+
+This project is built with Typescript and export all the relevant types.
+
+## How to use the UIkit
+
+If you want to use components from the UIkit, check the [Storybook documentation](https://midashand.github.io/pancake-uikit/)
+
+## How to Customize UIkit
+
+First clone this repo to local and then start editing the components, theme, etc.
+
+When is finished the Customization of the UIkit build it using:
+
+`npm run build`
+
+Commit everything to the git repo and if you are using a diferent repo just change it in package.json.
+
+If you have a commit error due to husky you can try:
+
+`git commit -am 'commit' --no-verify`
+
+That should solve the problem, then push to remote repo.
+
+After this you need to [publish the npm packege](https://zellwk.com/blog/publish-to-npm/)
+
+Be aware of the versions, If you make an update change the version in package.json so when you publish this's not gonna throw you an error.
+
+Go to the npm package you create an you are ready to use it.

package/dist/ResetCSS.d.ts

@@ -0,0 +1,2 @@
+declare const ResetCSS: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default ResetCSS;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AlertProps } from "./types";
+declare const Alert: React.FC<AlertProps>;
+export default Alert;

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

@@ -0,0 +1,3 @@
+export { default as Alert } from "./Alert";
+export { variants as alertVariants } from "./types";
+export type { AlertProps, Variants as AlertVariants } from "./types";

package/dist/components/Alert/theme.d.ts

@@ -0,0 +1,3 @@
+import { AlertTheme } from "./types";
+export declare const light: AlertTheme;
+export declare const dark: AlertTheme;

package/dist/components/Alert/types.d.ts

@@ -0,0 +1,17 @@
+import { MouseEvent, ReactNode } from "react";
+export type AlertTheme = {
+    background: string;
+};
+export declare const variants: {
+    readonly INFO: "info";
+    readonly DANGER: "danger";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+};
+export type Variants = typeof variants[keyof typeof variants];
+export interface AlertProps {
+    variant?: Variants;
+    title: string;
+    children?: ReactNode;
+    onClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from "./types";
+declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps, never>;
+export default Box;

package/dist/components/Box/Flex.d.ts

@@ -0,0 +1,3 @@
+import { FlexProps } from "./types";
+declare const Flex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("./types").BoxProps & FlexProps, never>;
+export default Flex;

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

@@ -0,0 +1,3 @@
+export { default as Box } from "./Box";
+export { default as Flex } from "./Flex";
+export type { BoxProps, FlexProps } from "./types";

package/dist/components/Box/types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { BackgroundProps, BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps } from "styled-system";
+export interface BoxProps extends BackgroundProps, BorderProps, LayoutProps, PositionProps, SpaceProps, HTMLAttributes<HTMLDivElement> {
+}
+export interface FlexProps extends BoxProps, FlexboxProps {
+}

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BreadcrumbsProps } from "./types";
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export default Breadcrumbs;

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

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbsProps } from "./types";

package/dist/components/Breadcrumbs/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SpaceProps } from "styled-system";
+export interface BreadcrumbsProps extends SpaceProps {
+    separator?: React.ReactNode;
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ButtonProps } from "./types";
+declare const Button: {
+    <E extends React.ElementType<any> = "button">(props: ButtonProps<E>): JSX.Element;
+    defaultProps: {
+        isLoading: boolean;
+        external: boolean;
+        variant: "primary";
+        scale: "md";
+        disabled: boolean;
+    };
+};
+export default Button;

package/dist/components/Button/IconButton.d.ts

@@ -0,0 +1,3 @@
+import { BaseButtonProps, PolymorphicComponent } from "./types";
+declare const IconButton: PolymorphicComponent<BaseButtonProps, "button">;
+export default IconButton;

package/dist/components/Button/StyledButton.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTheme } from "styled-components";
+import { BaseButtonProps } from "./types";
+declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, BaseButtonProps, never>;
+export default StyledButton;

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

@@ -0,0 +1,3 @@
+export { default as Button } from "./Button";
+export { default as IconButton } from "./IconButton";
+export type { ButtonProps, BaseButtonProps, Scale as ButtonScale, Variant as ButtonVariant } from "./types";

package/dist/components/Button/theme.d.ts

@@ -0,0 +1,77 @@
+export declare const scaleVariants: {
+    md: {
+        height: string;
+        padding: string;
+    };
+    sm: {
+        height: string;
+        padding: string;
+    };
+    xs: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+};
+export declare const styleVariants: {
+    primary: {
+        background: string;
+        color: string;
+        ":disabled": {
+            background: string;
+            backgroundColor: string;
+        };
+    };
+    secondary: {
+        backgroundColor: string;
+        border: string;
+        borderColor: string;
+        boxShadow: string;
+        color: string;
+        ":disabled": {
+            backgroundColor: string;
+        };
+    };
+    tertiary: {
+        backgroundColor: string;
+        boxShadow: string;
+        color: string;
+    };
+    subtle: {
+        backgroundColor: string;
+        color: string;
+    };
+    danger: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    text: {
+        backgroundColor: string;
+        color: string;
+        boxShadow: string;
+    };
+    switch: {
+        backgroundColor: string;
+        color: string;
+        boxShadow: string;
+    };
+    tradeprimary: {
+        backgroundColor: string;
+        color: string;
+        boxShadow: string;
+    };
+    tradesecondary: {
+        backgroundColor: string;
+        border: string;
+        borderColor: string;
+        boxShadow: string;
+        color: string;
+        ":disabled": {
+            backgroundColor: string;
+        };
+    };
+};

package/dist/components/Button/types.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, ElementType, ReactElement, ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { LayoutProps, SpaceProps } from "styled-system";
+export declare const scales: {
+    readonly MD: "md";
+    readonly SM: "sm";
+    readonly XS: "xs";
+};
+export declare const variants: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly TERTIARY: "tertiary";
+    readonly TEXT: "text";
+    readonly DANGER: "danger";
+    readonly SUBTLE: "subtle";
+    readonly SUCCESS: "success";
+    readonly SWITCH: "switch";
+    readonly TRADEPRIMARY: "tradeprimary";
+    readonly TRADESECONDARY: "tradesecondary";
+};
+export type Scale = typeof scales[keyof typeof scales];
+export type Variant = typeof variants[keyof typeof variants];
+/**
+ * @see https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+ */
+export type AsProps<E extends ElementType = ElementType> = {
+    as?: E;
+};
+export type MergeProps<E extends ElementType> = AsProps<E> & Omit<ComponentProps<E>, keyof AsProps>;
+export type PolymorphicComponentProps<E extends ElementType, P> = P & MergeProps<E>;
+export type PolymorphicComponent<P, D extends ElementType = "button"> = <E extends ElementType = D>(props: PolymorphicComponentProps<E, P>) => ReactElement | null;
+export interface BaseButtonProps extends LayoutProps, SpaceProps {
+    as?: "a" | "button" | typeof Link;
+    external?: boolean;
+    isLoading?: boolean;
+    scale?: Scale;
+    variant?: Variant;
+    disabled?: boolean;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+export type ButtonProps<P extends ElementType = "button"> = PolymorphicComponentProps<P, BaseButtonProps>;

package/dist/components/ButtonMenu/ButtonMenu.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonMenuProps } from "./types";
+declare const ButtonMenu: React.FC<ButtonMenuProps>;
+export default ButtonMenu;

package/dist/components/ButtonMenu/ButtonMenuItem.d.ts

@@ -0,0 +1,4 @@
+import { PolymorphicComponent } from "../Button/types";
+import { ButtonMenuItemProps } from "./types";
+declare const ButtonMenuItem: PolymorphicComponent<ButtonMenuItemProps, "button">;
+export default ButtonMenuItem;

package/dist/components/ButtonMenu/StyledButtonMenu.d.ts

@@ -0,0 +1,6 @@
+import { DefaultTheme } from "styled-components";
+import { Variant } from "../Button/types";
+declare const StyledButtonMenu: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    variant: Variant;
+}, never>;
+export default StyledButtonMenu;

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

@@ -0,0 +1,3 @@
+export { default as ButtonMenu } from "./ButtonMenu";
+export { default as ButtonMenuItem } from "./ButtonMenuItem";
+export type { ButtonMenuProps, ButtonMenuItemProps } from "./types";

package/dist/components/ButtonMenu/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseButtonProps, Scale, variants } from "../Button/types";
+export interface ButtonMenuItemProps extends BaseButtonProps {
+    isActive?: boolean;
+}
+export interface ButtonMenuProps {
+    variant?: typeof variants.PRIMARY | typeof variants.SUBTLE;
+    activeIndex?: number;
+    onItemClick?: (index: number) => void;
+    scale?: Scale;
+    children: React.ReactElement[];
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CardProps } from "./types";
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/components/Card/CardBody.d.ts

@@ -0,0 +1,4 @@
+import { SpaceProps } from "styled-system";
+export type CardBodyProps = SpaceProps;
+declare const CardBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CardBodyProps, never>;
+export default CardBody;

package/dist/components/Card/CardFooter.d.ts

@@ -0,0 +1,4 @@
+import { SpaceProps } from "styled-system";
+export type CardFooterProps = SpaceProps;
+declare const CardFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CardFooterProps, never>;
+export default CardFooter;

package/dist/components/Card/CardHeader.d.ts

@@ -0,0 +1,4 @@
+import { SpaceProps } from "styled-system";
+export type CardHeaderProps = SpaceProps;
+declare const CardHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CardHeaderProps, never>;
+export default CardHeader;

package/dist/components/Card/CardRibbon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CardRibbonProps } from "./types";
+declare const CardRibbon: React.FC<CardRibbonProps>;
+export default CardRibbon;

package/dist/components/Card/StyledCard.d.ts

@@ -0,0 +1,7 @@
+import { DefaultTheme } from "styled-components";
+import { CardProps } from "./types";
+interface StyledCardProps extends CardProps {
+    theme: DefaultTheme;
+}
+declare const StyledCard: import("styled-components").StyledComponent<"div", DefaultTheme, StyledCardProps, never>;
+export default StyledCard;

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

@@ -0,0 +1,6 @@
+export { default as Card } from "./Card";
+export { default as CardBody } from "./CardBody";
+export { default as CardHeader } from "./CardHeader";
+export { default as CardFooter } from "./CardFooter";
+export { default as CardRibbon } from "./CardRibbon";
+export type { CardProps, CardRibbonProps } from "./types";

package/dist/components/Card/theme.d.ts

@@ -0,0 +1,3 @@
+import { CardTheme } from "./types";
+export declare const light: CardTheme;
+export declare const dark: CardTheme;

package/dist/components/Card/types.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from "react";
+import { SpaceProps } from "styled-system";
+import { Colors } from "../../theme/types";
+export interface CardRibbonProps {
+    variantColor?: keyof Colors;
+    text: string;
+}
+export type CardTheme = {
+    background: string;
+    boxShadow: string;
+    boxShadowActive: string;
+    boxShadowSuccess: string;
+    boxShadowWarning: string;
+    cardHeaderBackground: string;
+    dropShadow: string;
+};
+export interface CardProps extends SpaceProps, HTMLAttributes<HTMLDivElement> {
+    isActive?: boolean;
+    isSuccess?: boolean;
+    isWarning?: boolean;
+    isDisabled?: boolean;
+    ribbon?: React.ReactNode;
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxProps } from "./types";
+declare const Checkbox: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    type: "checkbox";
+} & CheckboxProps, "type">;
+export default Checkbox;

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

@@ -0,0 +1,2 @@
+export { default as Checkbox } from "./Checkbox";
+export type { CheckboxProps, Scales as CheckboxScales } from "./types";

package/dist/components/Checkbox/types.d.ts

@@ -0,0 +1,8 @@
+export declare const scales: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type Scales = typeof scales[keyof typeof scales];
+export interface CheckboxProps {
+    scale?: Scales;
+}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownProps } from "./types";
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

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

@@ -0,0 +1,2 @@
+export { default as Dropdown } from "./Dropdown";
+export type { DropdownProps } from "./types";

package/dist/components/Dropdown/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type Position = "top" | "top-right" | "bottom";
+export interface PositionProps {
+    position?: Position;
+}
+export interface DropdownProps extends PositionProps {
+    target: React.ReactElement;
+}

package/dist/components/FallingBunnies/FallingBunnies.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FallingBunniesProps } from "./types";
+declare const FallingBunnies: React.FC<FallingBunniesProps>;
+export default FallingBunnies;

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

@@ -0,0 +1,2 @@
+export { default as FallingBunnies } from "./FallingBunnies";
+export type { FallingBunniesProps } from "./types";

package/dist/components/FallingBunnies/types.d.ts

@@ -0,0 +1,11 @@
+export interface BunnyProps {
+    position: number;
+    iterations: number;
+    duration: number;
+}
+export interface FallingBunniesProps {
+    size?: number;
+    count?: number;
+    iterations?: number;
+    duration?: number;
+}

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,5 @@
+import { HeadingProps } from "./types";
+declare const Heading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Text").TextProps & {
+    bold: boolean;
+} & HeadingProps, "bold">;
+export default Heading;

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

@@ -0,0 +1,2 @@
+export { default as Heading } from "./Heading";
+export type { HeadingProps, Sizes as HeadingSizes, Tags as HeadingTags } from "./types";

package/dist/components/Heading/types.d.ts

@@ -0,0 +1,20 @@
+export declare const tags: {
+    H1: string;
+    H2: string;
+    H3: string;
+    H4: string;
+    H5: string;
+    H6: string;
+};
+export declare const sizes: {
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+};
+export type Tags = typeof tags[keyof typeof tags];
+export type Sizes = typeof sizes[keyof typeof sizes];
+export interface HeadingProps {
+    as?: Tags;
+    size?: Sizes;
+}

package/dist/components/Image/BackgroundImage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ImageProps } from "./types";
+declare const BackgroundImage: React.FC<ImageProps>;
+export default BackgroundImage;

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ImageProps } from "./types";
+declare const Image: React.FC<ImageProps>;
+export default Image;

package/dist/components/Image/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { ContainerProps } from "./types";
+declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
+export default Wrapper;

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

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

package/dist/components/Image/options.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    root: null;
+    rootMargin: string;
+    threshold: number;
+};
+export default _default;

package/dist/components/Image/types.d.ts

@@ -0,0 +1,10 @@
+import { SpaceProps } from "styled-system";
+export interface ContainerProps {
+    width: number;
+    height: number;
+    responsive?: boolean;
+}
+export interface ImageProps extends ContainerProps, SpaceProps {
+    src: string;
+    alt?: string;
+}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTheme } from "styled-components";
+import { InputProps } from "./types";
+declare const Input: import("styled-components").StyledComponent<"input", DefaultTheme, InputProps, never>;
+export default Input;

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

@@ -0,0 +1,2 @@
+export { default as Input } from "./Input";
+export type { InputProps, Scales as InputScales } from "./types";

package/dist/components/Input/types.d.ts

@@ -0,0 +1,12 @@
+import { SpaceProps } from "styled-system";
+export declare const scales: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type Scales = typeof scales[keyof typeof scales];
+export interface InputProps extends SpaceProps {
+    scale?: Scales;
+    isSuccess?: boolean;
+    isWarning?: boolean;
+}

package/dist/components/Layouts/BaseLayout.d.ts

@@ -0,0 +1,2 @@
+declare const GridLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default GridLayout;

package/dist/components/Layouts/CardsLayout.d.ts

@@ -0,0 +1,2 @@
+declare const GridLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default GridLayout;

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

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LinkProps } from "./types";
+declare const Link: React.FC<LinkProps>;
+export default Link;

package/dist/components/Link/LinkExternal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LinkProps } from "./types";
+declare const LinkExternal: React.FC<LinkProps>;
+export default LinkExternal;

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

@@ -0,0 +1,3 @@
+export { default as Link } from "./Link";
+export { default as LinkExternal } from "./LinkExternal";
+export type { LinkProps } from "./types";

package/dist/components/Link/types.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes } from "react";
+import { TextProps } from "../Text";
+export interface LinkProps extends TextProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+}

package/dist/components/NotificationDot/NotificationDot.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { NotificationDotProps } from "./types";
+declare const NotificationDot: React.FC<NotificationDotProps>;
+export default NotificationDot;

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

@@ -0,0 +1,2 @@
+export { default as NotificationDot } from "./NotificationDot";
+export type { NotificationDotProps, DotProps } from "./types";