diff --git a/.storybook/main.ts b/.storybook/main.ts index 6a12a7a..af611de 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,12 @@ import type { StorybookConfig } from "@storybook/react-vite"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], - addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"], + addons: [ + "@storybook/addon-links", + { name: "@storybook/addon-essentials", options: { backgrounds: false } }, + "@storybook/addon-interactions", + "@storybook/addon-themes", + ], framework: { name: "@storybook/react-vite", options: {}, diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000..2060878 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 9941fa0..e82ad4b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,24 +1,27 @@ -import type { Preview } from "@storybook/react"; +import type { DecoratorFn, Preview } from "@storybook/react"; import { ThemeProvider } from "styled-components"; -import { dark } from "../src/theme"; +import { dark, light } from "../src/theme"; +import { withThemeFromJSXProvider } from "@storybook/addon-themes"; + +const CustomProvider = (props) => { + window.document.body.style.background = props.theme.background; + return {props.children}; +}; const preview: Preview = { parameters: { actions: { argTypesRegex: "^on[A-Z].*" }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, }, decorators: [ - (Story) => ( - - - - ), + withThemeFromJSXProvider({ + themes: { + dark, + light, + }, + defaultTheme: "dark", + Provider: CustomProvider, + }) as DecoratorFn, ], }; diff --git a/package.json b/package.json index 0ff30f1..57d9818 100644 --- a/package.json +++ b/package.json @@ -21,38 +21,43 @@ "@storybook/react": "^7.0.12", "@storybook/react-vite": "^7.0.12", "@storybook/testing-library": "^0.0.14-next.2", + "@testing-library/jest-dom": "^5.11.6", + "@testing-library/react": "^12.1.3", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@types/react-router-dom": "^5.1.7", + "@types/rebass": "^4.0.7", "@types/styled-components": "^5.1.25", - "prop-types": "^15.8.1", - "react-dom": "^18.2.0", - "storybook": "^7.0.12", - "typescript": "^5.0.4", - "vite": "^4.3.8", - "vitest": "^0.27.2", - "@testing-library/react": "^12.1.3", "@vanilla-extract/vite-plugin": "^3.8.0", "@vitejs/plugin-react": "4.0.0", - "@testing-library/jest-dom": "^5.11.6", "jest-environment-jsdom": "^29.3.1", "jest-styled-components": "^7.0.8", - "@types/react-router-dom": "^5.1.7", + "polished": "^3.3.2", + "prop-types": "^15.8.1", + "react-dom": "^18.2.0", "react-router-dom": "^5.2.0", + "storybook": "^7.0.12", "themeprovider-storybook": "^1.7.2", - "polished": "^3.3.2", - "@types/rebass": "^4.0.7" + "typescript": "^5.2.2", + "vite": "^4.3.8", + "vitest": "^0.27.2" }, "dependencies": { + "@popperjs/core": "^2.11.8", + "@reach/portal": "^0.18.0", + "@real-wagmi/sdk": "^1.1.6", + "@storybook/addon-themes": "^7.5.3", "@types/node": "^13.13.5", "@types/styled-system": "^5.1.15", "framer-motion": "10.11.2", "react": "^18.2.0", + "react-feather": "^2.0.8", + "react-popper": "^2.3.0", + "rebass": "^4.0.7", "styled-components": "^5.3.5", "styled-system": "^5.1.5", "tslint": "^6.1.3", - "tslint-config-prettier": "^1.18.0", - "rebass": "^4.0.7", - "react-feather": "^2.0.8" + "tslint-config-prettier": "^1.18.0" }, "repository": "https://github.com/RealWagmi/uikit.git", "files": [ diff --git a/src/components/AppBtn/index.stories.tsx b/src/components/AppBtn/index.stories.tsx new file mode 100644 index 0000000..852535f --- /dev/null +++ b/src/components/AppBtn/index.stories.tsx @@ -0,0 +1,176 @@ +import React, { useEffect, useState } from "react"; +import AppBtnComponent from "./index"; +import { BrowserRouter } from "react-router-dom"; +import { Box, Grid } from "../Box"; +import Text from "../Text"; +import { InfoIcon, QuestionIcon } from "../Svg"; +import Tooltip from "../Tooltip"; + +export default { + title: "Components/Buttons", + component: AppBtnComponent, + argTypes: {}, +}; + +export const Buttons = () => { + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (loading) { + setTimeout(() => { + setLoading(false); + }, 1500); + } + }, [loading]); + + return ( + + + Default + + + Primary + Outlined + Text + + Button + + + Button + + + Button + + + Button + + + + Button + + + + + Button + + + + + Small + + + Primary + Outlined + Text + + Button + + + + Button + + + + + Button + + + + + Button + + + + + Button + + + + + Button + + + + + Error Button + + + + Button + + + + Button + + + + + Button + + + + + Link Button + + + + Button + + + + With Start/End components + + + }>Button + } variant={"outlined"}> + Button + + + + + } + endIcon={ + + Simple Text +
+ Simple Text +
+ Simple Text +
+ Simple Text +
+ + } + > + + + } + > + With Tooltips + + + + + With Loader + + + { + setLoading(true); + }} + loading={loading} + variant={"outlined"} + > + Click here + + + ); +}; diff --git a/src/components/AppBtn/index.tsx b/src/components/AppBtn/index.tsx new file mode 100644 index 0000000..251b4c4 --- /dev/null +++ b/src/components/AppBtn/index.tsx @@ -0,0 +1,73 @@ +import styled from "styled-components"; +import { variant } from "styled-system"; +import { variantVariants, scaleVariants } from "./theme"; +import { AppBtnProps } from "./types"; +import LoadingSpinner from "../Loaders/LoadingSpinner"; + +const AppBtnWrap = styled.button` + ${({ theme, color }) => + variant({ + prop: "variant", + variants: variantVariants(theme, color), + })} + ${variant({ + prop: "scale", + variants: scaleVariants, + })} + + position: relative; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border: none; + cursor: pointer; + text-decoration: none; + width: ${({ width }) => width || "100%"}; + + &:disabled { + cursor: default; + opacity: 0.5; + } +`; + +const AppBtnContainer = styled.span<{ isLoading?: boolean }>` + display: flex; + align-items: center; + justify-content: center; + opacity: ${({ isLoading }) => (isLoading ? 0.3 : 1)}; + transition: opacity 0.15s; +`; +const AppBtnLoader = styled.span<{ isLoading?: boolean }>` + position: absolute; + display: flex; + opacity: ${({ isLoading }) => (isLoading ? 1 : 0)}; + pointer-events: none; + transition: opacity 0.15s; +`; + +const AppBtnContent = styled.span` + margin: 0 8px; +`; + +AppBtnWrap.defaultProps = { + variant: "default", + scale: "default", + color: "primary", + as: "button", +}; + +export default function AppBtn({ loading, ...props }: AppBtnProps & { loading?: boolean }) { + return ( + + + {props.startIcon} + {props.children} + {props.endIcon} + + + + + + ); +} diff --git a/src/components/AppBtn/theme.ts b/src/components/AppBtn/theme.ts new file mode 100644 index 0000000..bce18c2 --- /dev/null +++ b/src/components/AppBtn/theme.ts @@ -0,0 +1,73 @@ +import { AppBtnColor, scales, variants } from "./types"; +import { DefaultTheme } from "styled-components"; +import { rgba } from "polished"; +export const variantVariants = (theme: DefaultTheme, color: AppBtnColor = "primary") => { + const colors = theme.buttons[color]; + const hoverGrad0 = colors.hoverGrad0 || colors.grad0; + const hoverGrad1 = colors.hoverGrad1 || colors.grad1; + return { + [variants.DEFAULT]: { + background: `linear-gradient(90deg, ${colors.grad0} 3.46%, ${colors.grad1} 100%)`, + outline: "none", + color: theme.colors.light, + boxShadow: `0 5px 13px -4px ${rgba(theme.colors.shadowLight, 0.08)}`, + "&:hover:not(&:disabled), &:focus": { + background: `linear-gradient(90deg, ${hoverGrad0} 3.46%, ${hoverGrad1} 100%)`, + }, + "& svg": { + fill: theme.colors.light, + stroke: theme.colors.light, + }, + "&:disabled": { + boxShadow: `none`, + }, + }, + [variants.OUTLINED]: { + background: rgba(theme.colors.strokeGray, 0.08), + outline: `2px ${colors.text} solid`, + outlineOffset: "-2px", + color: colors.text, + "&:hover:not(&:disabled), &:focus": { + background: rgba(theme.colors.strokeGray, 0.2), + outlineColor: colors.text, + }, + "& svg": { + fill: colors.text, + stroke: colors.text, + }, + }, + [variants.TEXT]: { + background: rgba(theme.colors.strokeGray, 0.08), + outline: "none", + color: colors.text, + "&:hover:not(&:disabled), &:focus": { + background: rgba(theme.colors.strokeGray, 0.2), + }, + "& svg": { + fill: theme.colors.light, + stroke: theme.colors.light, + }, + "&:not(&:disabled) svg": { + fill: colors.text, + stroke: colors.text, + }, + "&:disabled": { + background: "transparent", + color: theme.colors.light, + }, + }, + }; +}; + +export const scaleVariants = { + [scales.DEFAULT]: { + padding: "12px 16px", + fontSize: "16px", + borderRadius: "16px", + }, + [scales.SMALL]: { + padding: "8px", + fontSize: "14px", + borderRadius: "12px", + }, +}; diff --git a/src/components/AppBtn/types.ts b/src/components/AppBtn/types.ts new file mode 100644 index 0000000..b5ed201 --- /dev/null +++ b/src/components/AppBtn/types.ts @@ -0,0 +1,33 @@ +import { LayoutProps, SpaceProps } from "styled-system"; +import { ElementType, HTMLAttributeAnchorTarget, ReactNode } from "react"; + +export const colors = { + PRIMARY: "primary", + ERROR: "error", +} as const; + +export const variants = { + DEFAULT: "default", + OUTLINED: "outlined", + TEXT: "text", +} as const; + +export const scales = { + DEFAULT: "default", + SMALL: "small", +} as const; + +export type AppBtnColor = (typeof colors)[keyof typeof colors]; +export interface AppBtnProps extends LayoutProps, SpaceProps { + as?: "a" | "button" | ElementType; + variant?: (typeof variants)[keyof typeof variants]; + scale?: (typeof scales)[keyof typeof scales]; + color?: AppBtnColor; + disabled?: boolean; + to?: string; + target?: HTMLAttributeAnchorTarget; + children?: ReactNode; + startIcon?: ReactNode; + endIcon?: ReactNode; + onClick?: () => void; +} diff --git a/src/components/Box/index.stories.tsx b/src/components/Box/index.stories.tsx index bf2e678..e7d427f 100644 --- a/src/components/Box/index.stories.tsx +++ b/src/components/Box/index.stories.tsx @@ -11,7 +11,7 @@ export default { export const Box: React.FC = () => { return ( -
+
Contains background, border, layout, position, and space from{" "} @@ -24,7 +24,7 @@ export const Box: React.FC = () => { export const Flex: React.FC = () => { return ( -
+
Based on the Box component. You can apply any flexbox properties on the Flex component. List of applicable props diff --git a/src/components/Breadcrumbs/index.stories.tsx b/src/components/Breadcrumbs/index.stories.tsx index 212224e..27775c1 100644 --- a/src/components/Breadcrumbs/index.stories.tsx +++ b/src/components/Breadcrumbs/index.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import BreadcrumbsComponent from "./index"; -import {BrowserRouter} from "react-router-dom"; +import { BrowserRouter } from "react-router-dom"; export default { title: "Components/Breadcrumbs", @@ -8,11 +8,10 @@ export default { argTypes: {}, }; -export const Breadcrumbs: React.FC = () => { +export const Breadcrumbs = () => { return ( - + ); }; - diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx index 1bf60a3..afe6baf 100644 --- a/src/components/Breadcrumbs/index.tsx +++ b/src/components/Breadcrumbs/index.tsx @@ -1,36 +1,36 @@ -import { ArrowLeftGray } from "../Svg"; import { createContext, ElementType, useContext } from "react"; -export const MenuContext = createContext<{ linkComponent: ElementType }>({ linkComponent: "a" }); - -import { ArrowWrapper, Divider, LinkText, Text, Wrapper } from "./styles"; import { Flex } from "../Box"; -import { useTheme } from "styled-components"; - -interface ILink { - lable: string; - link: string; -} +import styled from "styled-components"; +import { rgba } from "polished"; +import { ArrowLeftIcon } from "../Svg"; +import Text from "../Text"; +export const MenuContext = createContext<{ linkComponent: ElementType }>({ linkComponent: "a" }); interface IProps { - links: ILink[]; + label: string; + to: string; } -export default function Breadcrumbs({ links }: IProps) { +const BreadcrumbsWrap = styled(Flex)` + display: inline-flex; + justify-content: center; + align-items: center; + padding: 2px 16px; + border-radius: 12px; + min-width: 89px; + text-decoration: none; + border: 0.5px solid ${({ theme }) => rgba(theme.colors.strokeGray, 0.2)}; + background: ${({ theme }) => rgba(theme.colors.strokeGray, 0.08)}; +`; + +export default function Breadcrumbs({ label, to }: IProps) { const { linkComponent } = useContext(MenuContext); - const theme = useTheme(); return ( - - - - - {links.map(({ lable, link }, index) => ( - - - {lable} - - {index !== links.length - 1 && /} - - ))} - + + + + {label} + + ); } diff --git a/src/components/Breadcrumbs/styles.ts b/src/components/Breadcrumbs/styles.ts deleted file mode 100644 index 5695c30..0000000 --- a/src/components/Breadcrumbs/styles.ts +++ /dev/null @@ -1,36 +0,0 @@ -import styled from "styled-components"; -import { rgba } from "polished"; -import { Box, Flex } from "../Box"; - -export const Wrapper = styled(Flex)` - align-items: center; - background: ${({ theme }) => rgba(theme.breadcrumbs.background, 0.08)}; - border: 0.5px solid ${({ theme }) => rgba(theme.breadcrumbs.border, 0.2)}; - border-radius: 12px; - padding: 2px 16px; - width: fit-content; -`; - -export const ArrowWrapper = styled(Box)` - margin-right: 8px; - height: 20px; -`; - -export const Text = styled.p` - //font-family: 'Lexend Deca'; - font-style: normal; - font-weight: 300; - font-size: 14px; - line-height: 18px; - letter-spacing: 0.25px; - color: ${({ theme }) => theme.breadcrumbs.color}; - margin: 0; -`; - -export const Divider = styled(Text)` - margin: 0 10px; -`; - -export const LinkText = styled.button` - text-decoration: none; -`; diff --git a/src/components/Breadcrumbs/theme.ts b/src/components/Breadcrumbs/theme.ts deleted file mode 100644 index 8b68356..0000000 --- a/src/components/Breadcrumbs/theme.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { BreadcrumbsTheme } from "./types"; -import { colors } from "../../theme/colors"; - -export const dark: BreadcrumbsTheme = { - background: colors.dimGray, - border: colors.dimGray, - color: colors.gray, -}; - -export const light: BreadcrumbsTheme = { - background: colors.dimGray, - border: colors.dimGray, - color: colors.gray, -}; diff --git a/src/components/Breadcrumbs/types.ts b/src/components/Breadcrumbs/types.ts deleted file mode 100644 index 2d7d3e2..0000000 --- a/src/components/Breadcrumbs/types.ts +++ /dev/null @@ -1,6 +0,0 @@ - -export type BreadcrumbsTheme = { - color: string; - background: string; - border: string; -}; \ No newline at end of file diff --git a/src/components/Button/BaseButton/index.tsx b/src/components/Button/BaseButton/index.tsx deleted file mode 100644 index 9a0ae04..0000000 --- a/src/components/Button/BaseButton/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components' -import styled from 'styled-components' -import { Box } from "../../Box"; - -const Row = styled(Box)<{ - width?: string - align?: string - justify?: string - padding?: string - border?: string - borderRadius?: string - gap?: string -}>` - width: ${({ width }) => width ?? '100%'}; - display: flex; - align-items: ${({ align }) => align ?? 'center'}; - justify-content: ${({ justify }) => justify ?? 'flex-start'}; - padding: ${({ padding }) => padding}; - border: ${({ border }) => border}; - border-radius: ${({ borderRadius }) => borderRadius}; - gap: ${({ gap }) => gap}; -` - -export const RowBetween = styled(Row)` - justify-content: space-between; -` - -type ButtonProps = Omit - -export const ButtonOverlay = styled.div` - background-color: transparent; - bottom: 0; - border-radius: inherit; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: 150ms ease background-color; - width: 100%; -` - -export type BaseButtonProps = { - padding?: string - width?: string - $borderRadius?: string - altDisabledStyle?: boolean -} & ButtonProps - -export const BaseButton = styled(RebassButton)` - padding: ${({ padding }) => padding ?? '16px'}; - width: ${({ width }) => width ?? '100%'}; - font-weight: 700; - text-align: center; - border-radius: 16px; - outline: none; - - color: ${({ theme }) => theme.baseButton.color}; - text-decoration: none; - display: flex; - justify-content: center; - flex-wrap: nowrap; - align-items: center; - cursor: pointer; - position: relative; - z-index: 1; - font-family: 'Lexend Deca', sans-serif; - - &:disabled { - opacity: 50%; - cursor: auto; - pointer-events: none; - } - - will-change: transform; - transition: transform 450ms ease; - transform: perspective(1px) translateZ(0); - - > * { - user-select: none; - } - - > a { - text-decoration: none; - } -` -export enum ButtonSize { - small, - medium, - large, -} -export enum ButtonEmphasis { - high, - promotional, - highSoft, - medium, - low, - warning, - destructive, -} - diff --git a/src/components/Button/BaseButton/theme.ts b/src/components/Button/BaseButton/theme.ts deleted file mode 100644 index 33b39f8..0000000 --- a/src/components/Button/BaseButton/theme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { BaseButtonTheme } from "./types"; -import { colors } from "../../../theme/colors"; - -export const dark: BaseButtonTheme = { - color: colors.white, -}; - -export const light: BaseButtonTheme = { - color: colors.dimGray, -}; diff --git a/src/components/Button/BaseButton/types.ts b/src/components/Button/BaseButton/types.ts deleted file mode 100644 index 3b46b60..0000000 --- a/src/components/Button/BaseButton/types.ts +++ /dev/null @@ -1,4 +0,0 @@ - -export type BaseButtonTheme = { - color: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonConfirmed/index.tsx b/src/components/Button/ButtonConfirmed/index.tsx deleted file mode 100644 index a13da6e..0000000 --- a/src/components/Button/ButtonConfirmed/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; -import { ButtonProps } from "rebass"; -import ButtonPrimary from "../ButtonPrimary"; - -const ButtonConfirmedStyle = styled(BaseButton)` - background-color: ${({ theme }) => theme.buttonConfirmed.background}; - color: ${({ theme }) => theme.buttonConfirmed.color}; - - &:disabled { - opacity: 50%; - background-color: ${({ theme }) => theme.buttonConfirmed.backgroundDisabled}; - color: ${({ theme }) => theme.buttonConfirmed.colorDisabled}; - cursor: auto; - } -`; - -export default function ButtonConfirmed({ - confirmed, - altDisabledStyle, - ...rest -}: { confirmed?: boolean; altDisabledStyle?: boolean } & ButtonProps) { - if (confirmed) { - return ; - } else { - return ; - } -} diff --git a/src/components/Button/ButtonConfirmed/theme.ts b/src/components/Button/ButtonConfirmed/theme.ts deleted file mode 100644 index cadd10c..0000000 --- a/src/components/Button/ButtonConfirmed/theme.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ButtonConfirmedTheme } from "./types"; -import { colors } from "../../../theme/colors"; - -export const dark: ButtonConfirmedTheme = { - background: colors.policeBlue, - color: colors.white, - backgroundDisabled: colors.chineseBlack, - colorDisabled: colors.dimGray, -}; - -export const light: ButtonConfirmedTheme = { - background: colors.lightSteelBlue, - color: colors.dimGray, - backgroundDisabled: colors.lavender, - colorDisabled: colors.dimGray, -}; diff --git a/src/components/Button/ButtonConfirmed/types.ts b/src/components/Button/ButtonConfirmed/types.ts deleted file mode 100644 index dbfce89..0000000 --- a/src/components/Button/ButtonConfirmed/types.ts +++ /dev/null @@ -1,7 +0,0 @@ - -export type ButtonConfirmedTheme = { - background: string; - color: string; - backgroundDisabled: string; - colorDisabled: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonDropdown/index.tsx b/src/components/Button/ButtonDropdown/index.tsx deleted file mode 100644 index 1bca74b..0000000 --- a/src/components/Button/ButtonDropdown/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ChevronDown } from "react-feather"; -import { RowBetween } from "../BaseButton"; -import { ButtonProps } from "rebass"; -import ButtonPrimary from "../ButtonPrimary"; - -export default function ButtonDropdown({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) { - return ( - - -
{children}
- - - - ); -} diff --git a/src/components/Button/ButtonDropdownLight/index.tsx b/src/components/Button/ButtonDropdownLight/index.tsx deleted file mode 100644 index ecc3508..0000000 --- a/src/components/Button/ButtonDropdownLight/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { ChevronDown } from "react-feather"; -import { RowBetween } from "../BaseButton"; -import { ButtonProps } from "rebass"; -import ButtonOutlined from "../ButtonOutlined"; - -export default function ButtonDropdownLight({ - disabled = false, - children, - ...rest -}: { disabled?: boolean } & ButtonProps) { - return ( - - -
{children}
- - - - ); -} diff --git a/src/components/Button/ButtonEmpty/index.tsx b/src/components/Button/ButtonEmpty/index.tsx deleted file mode 100644 index 7c6e159..0000000 --- a/src/components/Button/ButtonEmpty/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; - -const ButtonEmpty = styled(BaseButton)` - background-color: transparent; - color: ${({ theme }) => theme.buttonEmpty.color}; - display: flex; - justify-content: center; - align-items: center; - - &:focus { - text-decoration: underline; - } - &:hover { - text-decoration: none; - } - &:active { - text-decoration: none; - } - &:disabled { - opacity: 50%; - cursor: auto; - } -`; - -export default ButtonEmpty; diff --git a/src/components/Button/ButtonEmpty/theme.ts b/src/components/Button/ButtonEmpty/theme.ts deleted file mode 100644 index 274340e..0000000 --- a/src/components/Button/ButtonEmpty/theme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { ButtonEmptyTheme } from "./types"; -import { colors } from "../../../theme/colors"; - -export const dark: ButtonEmptyTheme = { - color: colors.lightFrenchBeige -}; - -export const light: ButtonEmptyTheme = { - color: colors.dimGray -}; \ No newline at end of file diff --git a/src/components/Button/ButtonEmpty/types.ts b/src/components/Button/ButtonEmpty/types.ts deleted file mode 100644 index c27bf35..0000000 --- a/src/components/Button/ButtonEmpty/types.ts +++ /dev/null @@ -1,4 +0,0 @@ - -export type ButtonEmptyTheme = { - color: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonError/index.tsx b/src/components/Button/ButtonError/index.tsx deleted file mode 100644 index e362188..0000000 --- a/src/components/Button/ButtonError/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ButtonProps } from "rebass"; -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; -import ButtonPrimary from "../ButtonPrimary"; - -const ButtonErrorStyle = styled(BaseButton)` - background-color: ${({ theme }) => theme.buttonError.color}; - border: 1px solid ${({ theme }) => theme.buttonError.color}; - - &:focus { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.buttonError.focusColor}; - background-color: ${({ theme }) => theme.buttonError.focusColor}; - } - &:hover { - background-color: ${({ theme }) => theme.buttonError.focusColor}; - } - &:active { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.buttonError.activeColor}; - background-color: ${({ theme }) => theme.buttonError.activeColor}; - } - &:disabled { - opacity: 50%; - cursor: auto; - box-shadow: none; - background-color: ${({ theme }) => theme.buttonError.color}; - border: 1px solid ${({ theme }) => theme.buttonError.color}; - } -`; - -export default function ButtonError({ error, ...rest }: { error?: boolean } & ButtonProps) { - if (error) { - return ; - } else { - return ; - } -} diff --git a/src/components/Button/ButtonError/theme.ts b/src/components/Button/ButtonError/theme.ts deleted file mode 100644 index f28c78c..0000000 --- a/src/components/Button/ButtonError/theme.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ButtonErrorTheme } from "./types"; -import { colors } from "../../../theme/colors"; -import { darken } from "polished"; - -export const dark: ButtonErrorTheme = { - color: colors.coralReef, - focusColor: darken(0.05, colors.coralReef), - activeColor: darken(0.1, colors.coralReef), -}; - -export const light: ButtonErrorTheme = { - color: colors.deepCarminePink, - focusColor: darken(0.05, colors.deepCarminePink), - activeColor: darken(0.1, colors.deepCarminePink), -}; diff --git a/src/components/Button/ButtonError/types.ts b/src/components/Button/ButtonError/types.ts deleted file mode 100644 index a7b3fe7..0000000 --- a/src/components/Button/ButtonError/types.ts +++ /dev/null @@ -1,6 +0,0 @@ - -export type ButtonErrorTheme = { - color: string; - focusColor: string; - activeColor: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonGray/index.tsx b/src/components/Button/ButtonGray/index.tsx deleted file mode 100644 index 6d528cd..0000000 --- a/src/components/Button/ButtonGray/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; - -const ButtonGray = styled(BaseButton)` - background-color: ${({ theme }) => theme.buttonGray.background}; - color: #c2a676; - border: 2px solid #dcb97e; - font-size: 16px; - font-weight: 500; - border-radius: 16px; - - &:active { - background-color: ${({ theme, disabled }) => !disabled && theme.buttonGray.backgroundActive}; - } -`; - -export default ButtonGray; diff --git a/src/components/Button/ButtonGray/theme.ts b/src/components/Button/ButtonGray/theme.ts deleted file mode 100644 index 583aa01..0000000 --- a/src/components/Button/ButtonGray/theme.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ButtonGrayTheme } from "./types"; -import { colors } from "../../../theme/colors"; -import { darken, rgba } from "polished"; - -export const dark: ButtonGrayTheme = { - background: rgba(colors.dimGray, 0.2), - backgroundActive: darken(0.1, colors.chineseBlack) -}; - -export const light: ButtonGrayTheme = { - background: rgba(colors.dimGray, 0.08), - backgroundActive: darken(0.1, colors.lavender) -}; diff --git a/src/components/Button/ButtonGray/types.ts b/src/components/Button/ButtonGray/types.ts deleted file mode 100644 index c6e11da..0000000 --- a/src/components/Button/ButtonGray/types.ts +++ /dev/null @@ -1,5 +0,0 @@ - -export type ButtonGrayTheme = { - background: string; - backgroundActive: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonLight/index.tsx b/src/components/Button/ButtonLight/index.tsx deleted file mode 100644 index 697e770..0000000 --- a/src/components/Button/ButtonLight/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import styled from "styled-components"; -import { BaseButton, BaseButtonProps, ButtonOverlay } from "../BaseButton"; - -const BaseButtonLight = styled(BaseButton)` - background: linear-gradient(90.52deg, #DDC194 0%, #9A7D49 100%);; - color: ${({ theme }) => theme.buttonLight.color}; - font-size: 16px; - font-weight: 600; - - &:focus { - box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.buttonLight.focusColor}; - background-color: ${({ theme, disabled }) => !disabled && theme.buttonLight.focusColor}; - } - &:hover { - background-color: ${({ theme, disabled }) => !disabled && theme.buttonLight.focusColor}; - } - &:active { - box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.buttonLight.focusColor}; - background-color: ${({ theme, disabled }) => !disabled && theme.buttonLight.focusColor}; - } - - :hover { - ${ButtonOverlay} { - background-color: ${({ theme }) => theme.buttonLight.hoverOverlayColor}; - } - } - - :active { - ${ButtonOverlay} { - background-color: ${({ theme }) => theme.buttonLight.activeOverlayColor}; - } - } - - :disabled { - opacity: 0.4; - :hover { - cursor: auto; - background-color: transparent; - box-shadow: none; - border: 1px solid transparent; - outline: none; - } - } -`; - -const ButtonLight = ({ children, ...rest }: BaseButtonProps) => { - return ( - - - {children} - - ); -}; - -export default ButtonLight; diff --git a/src/components/Button/ButtonLight/theme.ts b/src/components/Button/ButtonLight/theme.ts deleted file mode 100644 index 33eb153..0000000 --- a/src/components/Button/ButtonLight/theme.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ButtonLightTheme } from "./types"; -import { colors } from "../../../theme/colors"; -import { rgba } from "polished"; - -export const dark: ButtonLightTheme = { - color: colors.richBlack, - focusColor: rgba(colors.lightFrenchBeige, 0.24), - hoverOverlayColor: rgba(colors.ceil, 0.08), - activeOverlayColor: rgba(colors.lightSteelBlue, 0.24), -}; - -export const light: ButtonLightTheme = { - color: colors.richBlack, - focusColor: rgba(colors.deepPink, 0.12), - hoverOverlayColor: rgba(colors.ceil, 0.08), - activeOverlayColor: rgba(colors.lightSteelBlue, 0.24), -}; diff --git a/src/components/Button/ButtonLight/types.ts b/src/components/Button/ButtonLight/types.ts deleted file mode 100644 index b017f0c..0000000 --- a/src/components/Button/ButtonLight/types.ts +++ /dev/null @@ -1,7 +0,0 @@ - -export type ButtonLightTheme = { - color: string; - focusColor: string; - hoverOverlayColor: string; - activeOverlayColor: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonOutlined/index.tsx b/src/components/Button/ButtonOutlined/index.tsx deleted file mode 100644 index 8380a9e..0000000 --- a/src/components/Button/ButtonOutlined/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; - -const ButtonOutlined = styled(BaseButton)` - border: 1px solid ${({ theme }) => theme.buttonOutlined.border}; - background-color: transparent; - color: ${({ theme }) => theme.buttonOutlined.color}; - &:focus { - box-shadow: 0 0 0 1px ${({ theme }) => theme.buttonOutlined.focusColor}; - } - &:hover { - box-shadow: 0 0 0 1px ${({ theme }) => theme.buttonOutlined.hoverColor}; - } - &:active { - box-shadow: 0 0 0 1px ${({ theme }) => theme.buttonOutlined.focusColor}; - } - &:disabled { - opacity: 50%; - cursor: auto; - } -`; - -export default ButtonOutlined; diff --git a/src/components/Button/ButtonOutlined/theme.ts b/src/components/Button/ButtonOutlined/theme.ts deleted file mode 100644 index 62ddd76..0000000 --- a/src/components/Button/ButtonOutlined/theme.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ButtonOutlinedTheme } from "./types"; -import { colors } from "../../../theme/colors"; -import { rgba } from "polished"; - -export const dark: ButtonOutlinedTheme = { - border: rgba(colors.dimGray, 0.2), - color: colors.white, - hoverColor: colors.white, - focusColor: colors.darkElectricBlue -}; - -export const light: ButtonOutlinedTheme = { - border: colors.soap, - color: colors.dimGray, - hoverColor: colors.white, - focusColor: colors.ceil -}; diff --git a/src/components/Button/ButtonOutlined/types.ts b/src/components/Button/ButtonOutlined/types.ts deleted file mode 100644 index 7ad0e1e..0000000 --- a/src/components/Button/ButtonOutlined/types.ts +++ /dev/null @@ -1,7 +0,0 @@ - -export type ButtonOutlinedTheme = { - border: string, - color: string, - hoverColor: string, - focusColor: string, -}; \ No newline at end of file diff --git a/src/components/Button/ButtonPrimary/index.tsx b/src/components/Button/ButtonPrimary/index.tsx deleted file mode 100644 index 9727596..0000000 --- a/src/components/Button/ButtonPrimary/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; - -const ButtonPrimary = styled(BaseButton)` - background: ${({ theme }) => theme.buttonPrimary.color}; - font-size: 16px; - font-weight: 600; - padding: 16px; - color: ${({ theme }) => theme.buttonPrimary.textColor}; - &:focus { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.buttonPrimary.focusColor}; - background: ${({ theme }) => theme.buttonPrimary.focusColor}; - } - &:hover { - background: ${({ theme }) => theme.buttonPrimary.focusColor}; - } - &:active { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.buttonPrimary.activeColor}; - background: ${({ theme }) => theme.buttonPrimary.activeColor}; - } - &:disabled { - cursor: auto; - box-shadow: none; - border: 1px solid transparent; - outline: none; - } -`; - -export default ButtonPrimary; diff --git a/src/components/Button/ButtonPrimary/theme.ts b/src/components/Button/ButtonPrimary/theme.ts deleted file mode 100644 index d88ad90..0000000 --- a/src/components/Button/ButtonPrimary/theme.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ButtonPrimaryTheme } from "./types"; -import { colors } from "../../../theme/colors"; -import { darken } from "polished"; - -export const dark: ButtonPrimaryTheme = { - color: colors.lightFrenchBeige, - textColor: colors.ghostWhite, - focusColor: darken(0.05, colors.lightFrenchBeige), - activeColor: darken(0.1, colors.lightFrenchBeige), -}; - -export const light: ButtonPrimaryTheme = { - color: colors.dimGray, - textColor: colors.ghostWhite, - focusColor: darken(0.05, colors.dimGray), - activeColor: darken(0.1, colors.dimGray), -}; diff --git a/src/components/Button/ButtonPrimary/types.ts b/src/components/Button/ButtonPrimary/types.ts deleted file mode 100644 index 615582e..0000000 --- a/src/components/Button/ButtonPrimary/types.ts +++ /dev/null @@ -1,7 +0,0 @@ - -export type ButtonPrimaryTheme = { - color: string; - textColor: string; - focusColor: string; - activeColor: string; -}; \ No newline at end of file diff --git a/src/components/Button/ButtonRadioChecked/index.tsx b/src/components/Button/ButtonRadioChecked/index.tsx deleted file mode 100644 index 65a3e78..0000000 --- a/src/components/Button/ButtonRadioChecked/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import styled, { useTheme } from "styled-components"; -import { RowBetween } from "../BaseButton"; -import ButtonOutlined from "../ButtonOutlined"; -import { ButtonProps } from "rebass"; -import { Check } from "react-feather"; - -export const ActiveOutlined = styled(ButtonOutlined)` - border: 1px solid; - border-color: ${({ theme }) => theme.buttonRadioChecked.color}; -`; - -const Circle = styled.div` - height: 17px; - width: 17px; - border-radius: 50%; - background-color: ${({ theme }) => theme.buttonRadioChecked.color}; - display: flex; - align-items: center; - justify-content: center; -`; - -const ResponsiveCheck = styled(Check)` - size: 13px; -`; - -const CheckboxWrapper = styled.div` - width: 20px; - padding: 0 10px; - position: absolute; - top: 11px; - right: 15px; -`; - -export default function ButtonRadioChecked({ active = false, children, ...rest }: { active?: boolean } & ButtonProps) { - const theme = useTheme(); - - if (!active) { - return ( - - {children} - - ); - } else { - return ( - - - {children} - - - - - - - - ); - } -} diff --git a/src/components/Button/ButtonRadioChecked/theme.ts b/src/components/Button/ButtonRadioChecked/theme.ts deleted file mode 100644 index 626e01b..0000000 --- a/src/components/Button/ButtonRadioChecked/theme.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ButtonRadioCheckedTheme } from "./types"; -import { colors } from "../../../theme/colors"; - -export const dark: ButtonRadioCheckedTheme = { - color: colors.lightFrenchBeige, - checkColor: colors.white -}; - -export const light: ButtonRadioCheckedTheme = { - color: colors.dimGray, - checkColor: colors.white -}; diff --git a/src/components/Button/ButtonRadioChecked/types.ts b/src/components/Button/ButtonRadioChecked/types.ts deleted file mode 100644 index 444de79..0000000 --- a/src/components/Button/ButtonRadioChecked/types.ts +++ /dev/null @@ -1,5 +0,0 @@ - -export type ButtonRadioCheckedTheme = { - color: string, - checkColor: string -}; \ No newline at end of file diff --git a/src/components/Button/ButtonSecondary/index.tsx b/src/components/Button/ButtonSecondary/index.tsx deleted file mode 100644 index f78f46a..0000000 --- a/src/components/Button/ButtonSecondary/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import styled from "styled-components"; -import { BaseButton } from "../BaseButton"; - -const ButtonSecondary = styled(BaseButton)` - border: 1px solid ${({ theme }) => theme.buttonSecondary.primaryColor}; - color: ${({ theme }) => theme.buttonSecondary.color}; - background-color: transparent; - font-size: 16px; - border-radius: 12px; - padding: ${({ padding }) => (padding ? padding : "10px")}; - - &:focus { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.buttonSecondary.primaryColor}; - border: 1px solid ${({ theme }) => theme.buttonSecondary.secondaryColor}; - } - &:hover { - border: 1px solid ${({ theme }) => theme.buttonSecondary.secondaryColor}; - } - &:active { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.buttonSecondary.primaryColor}; - border: 1px solid ${({ theme }) => theme.buttonSecondary.secondaryColor}; - } - &:disabled { - opacity: 50%; - cursor: auto; - } - a:hover { - text-decoration: none; - } -`; - -export default ButtonSecondary; diff --git a/src/components/Button/ButtonSecondary/theme.ts b/src/components/Button/ButtonSecondary/theme.ts deleted file mode 100644 index 5c38098..0000000 --- a/src/components/Button/ButtonSecondary/theme.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ButtonSecondaryTheme } from "./types"; -import { colors } from "../../../theme/colors"; - -export const dark: ButtonSecondaryTheme = { - color: colors.lightFrenchBeige, - primaryColor: colors.lapisLazuli, - secondaryColor: colors.frenchSkyBlue -}; - -export const light: ButtonSecondaryTheme = { - color: colors.dimGray, - primaryColor: colors.piggyPink, - secondaryColor: colors.carnationPink -}; diff --git a/src/components/Button/ButtonSecondary/types.ts b/src/components/Button/ButtonSecondary/types.ts deleted file mode 100644 index 4ff7799..0000000 --- a/src/components/Button/ButtonSecondary/types.ts +++ /dev/null @@ -1,6 +0,0 @@ - -export type ButtonSecondaryTheme = { - color: string, - primaryColor: string, - secondaryColor: string -}; \ No newline at end of file diff --git a/src/components/Button/LoadingButtonSpinner.tsx b/src/components/Button/LoadingButtonSpinner.tsx deleted file mode 100644 index e62f17c..0000000 --- a/src/components/Button/LoadingButtonSpinner.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { SpinnerSVG } from "../Svg/Svg"; - -const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => ( - - - - -) - -export default ButtonLoadingSpinner diff --git a/src/components/Button/SmallButtonPrimary/index.tsx b/src/components/Button/SmallButtonPrimary/index.tsx deleted file mode 100644 index 66bb268..0000000 --- a/src/components/Button/SmallButtonPrimary/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import ButtonPrimary from "../ButtonPrimary"; -import styled from "styled-components"; - -const SmallButtonPrimary = styled(ButtonPrimary)` - width: auto; - font-size: 16px; - padding: ${({ padding }) => padding ?? "8px 12px"}; - - background: linear-gradient(90.52deg, #ddc194 0%, #9a7d49 100%); - box-shadow: 0 5px 13px -4px rgba(168, 115, 20, 0.2); - border-radius: 16px; -`; - -export default SmallButtonPrimary; diff --git a/src/components/Button/ThemeButton/index.tsx b/src/components/Button/ThemeButton/index.tsx deleted file mode 100644 index 4f9541c..0000000 --- a/src/components/Button/ThemeButton/index.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import { ButtonEmphasis, ButtonOverlay, ButtonSize } from "../BaseButton"; -import styled, { DefaultTheme } from "styled-components"; - -interface BaseThemeButtonProps { - size: ButtonSize; - emphasis: ButtonEmphasis; -} - -interface ThemeButtonProps extends React.ComponentPropsWithoutRef<"button">, BaseThemeButtonProps {} - -function pickThemeButtonBackgroundColor({ theme, emphasis }: { theme: DefaultTheme; emphasis: ButtonEmphasis }) { - switch (emphasis) { - case ButtonEmphasis.high: - return theme.themeButton.highBackground; - case ButtonEmphasis.promotional: - return theme.themeButton.promotionalBackground; - case ButtonEmphasis.highSoft: - return theme.themeButton.highSoftBackground; - case ButtonEmphasis.low: - return "transparent"; - case ButtonEmphasis.warning: - return theme.themeButton.warningBackground; - case ButtonEmphasis.destructive: - return theme.themeButton.destructiveBackground; - case ButtonEmphasis.medium: - default: - return theme.themeButton.defaultBackground; - } -} -function pickThemeButtonFontSize({ size }: { size: ButtonSize }) { - switch (size) { - case ButtonSize.large: - return "20px"; - case ButtonSize.medium: - return "16px"; - case ButtonSize.small: - return "14px"; - default: - return "16px"; - } -} -function pickThemeButtonLineHeight({ size }: { size: ButtonSize }) { - switch (size) { - case ButtonSize.large: - return "24px"; - case ButtonSize.medium: - return "20px"; - case ButtonSize.small: - return "16px"; - default: - return "20px"; - } -} -function pickThemeButtonPadding({ size }: { size: ButtonSize }) { - switch (size) { - case ButtonSize.large: - return "16px"; - case ButtonSize.medium: - return "10px 12px"; - case ButtonSize.small: - return "8px"; - default: - return "10px 12px"; - } -} -function pickThemeButtonTextColor({ theme, emphasis }: { theme: DefaultTheme; emphasis: ButtonEmphasis }) { - switch (emphasis) { - case ButtonEmphasis.high: - case ButtonEmphasis.promotional: - return theme.themeButton.promotional; - case ButtonEmphasis.highSoft: - return theme.themeButton.highSoft; - case ButtonEmphasis.low: - return theme.themeButton.low; - case ButtonEmphasis.warning: - return theme.themeButton.warning; - case ButtonEmphasis.destructive: - return theme.themeButton.destructive; - case ButtonEmphasis.medium: - default: - return theme.themeButton.default; - } -} - -const BaseThemeButton = styled.button` - align-items: center; - background-color: ${pickThemeButtonBackgroundColor}; - border-radius: 16px; - border: 0; - color: ${pickThemeButtonTextColor}; - cursor: pointer; - display: flex; - flex-direction: row; - font-size: ${pickThemeButtonFontSize}; - font-weight: 600; - gap: 12px; - justify-content: center; - line-height: ${pickThemeButtonLineHeight}; - padding: ${pickThemeButtonPadding}; - position: relative; - transition: 150ms ease opacity; - user-select: none; - - :active { - ${ButtonOverlay} { - background-color: ${({ theme }) => theme.themeButton.activeColor}; - } - } - :focus { - ${ButtonOverlay} { - background-color: ${({ theme }) => theme.themeButton.activeColor}; - } - } - :hover { - ${ButtonOverlay} { - background-color: ${({ theme }) => theme.themeButton.hoverColor}; - } - } - :disabled { - cursor: default; - opacity: 0.6; - } - :disabled:active, - :disabled:focus, - :disabled:hover { - ${ButtonOverlay} { - background-color: transparent; - } - } -`; -const ThemeButton = ({ children, ...rest }: ThemeButtonProps) => { - return ( - - - {children} - - ); -}; - -export default ThemeButton; diff --git a/src/components/Button/ThemeButton/theme.ts b/src/components/Button/ThemeButton/theme.ts deleted file mode 100644 index ea183d9..0000000 --- a/src/components/Button/ThemeButton/theme.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { ThemeButtonTheme } from "./types"; -import { colors } from "../../../theme/colors"; -import { rgba } from "polished"; - -export const dark: ThemeButtonTheme = { - highBackground: colors.dimGray, - promotionalBackground: rgba(colors.lightFrenchBeige, 0.24), - highSoftBackground: rgba(colors.lightFrenchBeige, 0.24), - warningBackground: rgba(colors.spanishYellow, 0.24), - destructiveBackground: colors.coralReef, - defaultBackground: colors.chineseBlack, - - promotional: colors.dimGray, - highSoft: colors.dimGray, - low: colors.dimGray, - warning: colors.spanishYellow, - destructive: rgba(colors.vulcan, 0.8), - default: colors.white, - - activeColor: rgba(colors.lightSteelBlue, 0.24), - hoverColor: rgba(colors.ceil, 0.08), -}; - -export const light: ThemeButtonTheme = { - highBackground: colors.lightFrenchBeige, - promotionalBackground: rgba(colors.deepPink, 0.12), - highSoftBackground: rgba(colors.deepPink, 0.12), - warningBackground: rgba(colors.philippineGold, 0.24), - destructiveBackground: colors.deepCarminePink, - defaultBackground: colors.lavender, - - promotional: colors.lightFrenchBeige, - highSoft: colors.lightFrenchBeige, - low: colors.dimGray, - warning: colors.philippineGold, - destructive: rgba(colors.vulcan, 0.8), - default: colors.dimGray, - - activeColor: rgba(colors.lightSteelBlue, 0.24), - hoverColor: rgba(colors.ceil, 0.08), -}; diff --git a/src/components/Button/ThemeButton/types.ts b/src/components/Button/ThemeButton/types.ts deleted file mode 100644 index aebcf04..0000000 --- a/src/components/Button/ThemeButton/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -export type ThemeButtonTheme = { - highBackground: string, - promotionalBackground: string, - highSoftBackground: string, - warningBackground: string, - destructiveBackground: string, - defaultBackground: string, - - promotional: string, - highSoft: string, - low: string, - warning: string, - destructive: string, - default: string, - - activeColor: string, - hoverColor: string, -}; \ No newline at end of file diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx deleted file mode 100644 index 6e1228b..0000000 --- a/src/components/Button/index.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from "react"; -import ButtonLightComponent from "./ButtonLight"; -import ButtonConfirmedComponent from "./ButtonConfirmed"; -import ButtonDropdownComponent from "./ButtonDropdown"; -import ButtonDropdownLightComponent from "./ButtonDropdownLight"; -import ButtonEmptyComponent from "./ButtonEmpty"; -import ButtonErrorComponent from "./ButtonError"; -import ButtonGrayComponent from "./ButtonGray"; -import ButtonOutlinedComponent from "./ButtonOutlined"; -import ButtonPrimaryComponent from "./ButtonPrimary"; -import ButtonRadioCheckedComponent from "./ButtonRadioChecked"; -import ButtonSecondaryComponent from "./ButtonSecondary"; -import SmallButtonPrimaryComponent from "./SmallButtonPrimary"; -import ThemeButtonComponent from "./ThemeButton"; - -export default { - title: "Components/Button", - component: ButtonLightComponent, - argTypes: {}, -}; - -export const ButtonLight: React.FC = () => { - return Button Light; -}; - -export const ButtonConfirmed: React.FC = () => { - return Button Confirmed; -}; - -export const ButtonDropdown: React.FC = () => { - return Button Dropdown; -}; - -export const ButtonDropdownLight: React.FC = () => { - return Button Dropdown Light; -}; - -export const ButtonEmpty: React.FC = () => { - return Button Empty; -}; - -export const ButtonError: React.FC = () => { - return Button Error; -}; - -export const ButtonGray: React.FC = () => { - return Button Gray; -}; - -export const ButtonOutlined: React.FC = () => { - return Button Outlined; -}; - -export const ButtonPrimary: React.FC = () => { - return Button Primary; -}; - -export const ButtonRadioChecked: React.FC = () => { - return Button Radio Checked; -}; - -export const ButtonSecondary: React.FC = () => { - return Button Secondary; -}; - -export const SmallButtonPrimary: React.FC = () => { - return Small Button Primary; -}; - -export const ThemeButton: React.FC = () => { - return Theme Button; -}; diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx deleted file mode 100644 index 639ec26..0000000 --- a/src/components/Button/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export { default as ButtonConfirmed } from "./ButtonConfirmed" -export { default as ButtonDropdown } from "./ButtonDropdown" -export { default as ButtonDropdownLight } from "./ButtonDropdownLight" -export { default as ButtonEmpty } from "./ButtonEmpty" -export { default as ButtonError } from "./ButtonError" -export { default as ButtonGray } from "./ButtonGray" -export { default as ButtonLight } from "./ButtonLight" -export { default as ButtonOutlined } from "./ButtonOutlined" -export { default as ButtonPrimary } from "./ButtonPrimary" -export { default as ButtonRadioChecked } from "./ButtonRadioChecked" -export { default as ButtonSecondary } from "./ButtonSecondary" -export { default as SmallButtonPrimary } from "./SmallButtonPrimary" -export { default as ThemeButton } from "./ThemeButton" \ No newline at end of file diff --git a/src/components/Card/index.stories.tsx b/src/components/Card/index.stories.tsx deleted file mode 100644 index d54a72e..0000000 --- a/src/components/Card/index.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import CardComponent from "./index"; - -export default { - title: "Components/Cards", - component: CardComponent, - argTypes: {}, -}; - -export const Card: React.FC = () => { - return Some Content; -}; - -export const BlueCard: React.FC = () => { - return Blue Card; -}; - -export const DarkGrayCard: React.FC = () => { - return DarkGray Card; -}; - -export const GrayCard: React.FC = () => { - return Gray Card; -}; - -export const LightCard: React.FC = () => { - return Light Card; -}; - -export const OutlineCard: React.FC = () => { - return Outline Card; -}; - -export const YellowCard: React.FC = () => { - return Yellow Card; -}; diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx deleted file mode 100644 index a514904..0000000 --- a/src/components/Card/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Box } from "../Box"; -import styled from "styled-components"; -import { variant } from "styled-system"; - -type CardVariantProp = "blue" | "dark-gray" | "gray" | "light" | "outline" | "yellow"; - -const Card = styled(Box)<{ - width?: string; - padding?: string; - border?: string; - $borderRadius?: string; - variant?: CardVariantProp; -}>` - width: ${({ width }) => width ?? "100%"}; - padding: ${({ padding }) => padding ?? "1rem"}; - border-radius: ${({ $borderRadius }) => $borderRadius ?? "16px"}; - border: ${({ border }) => border}; - - ${({ theme }) => - variant({ - prop: "variant", - variants: { - blue: { - backgroundColor: theme.card.blueBackground, - color: theme.card.blueColor, - borderRadius: "12px", - }, - "dark-gray": { - backgroundColor: theme.card.darkGrayBackground, - }, - gray: { - backgroundColor: theme.card.grayBackground, - }, - light: { - border: `1px solid ${theme.card.lightBorder}`, - backgroundColor: theme.card.lightBackground, - }, - outline: { - border: `1px solid ${theme.card.outlineBorder}`, - }, - yellow: { - backgroundColor: theme.card.yellowBackground, - color: theme.card.yellowColor, - fontWeight: 500, - }, - }, - })} -`; -export default Card; diff --git a/src/components/Card/theme.ts b/src/components/Card/theme.ts deleted file mode 100644 index 0bb4798..0000000 --- a/src/components/Card/theme.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { CardTheme } from "./types"; -import { colors } from "../../theme/colors"; -import { rgba } from "polished"; - -export const dark: CardTheme = { - blueBackground: rgba(colors.indigo, 0.7), - blueColor: colors.white, - darkGrayBackground: colors.chineseBlack, - grayBackground: colors.policeBlue, - lightBorder: colors.darkJungleGreen, - lightBackground: colors.chineseBlack, - outlineBorder: colors.policeBlue, - yellowColor: colors.violinBrown, - yellowBackground: rgba(colors.princetonOrange, 0.05), -}; - -export const light: CardTheme = { - blueBackground: rgba(colors.indigo, 0.7), - blueColor: colors.white, - darkGrayBackground: colors.chineseBlack, - grayBackground: colors.policeBlue, - lightBorder: colors.darkJungleGreen, - lightBackground: colors.chineseBlack, - outlineBorder: colors.policeBlue, - yellowColor: colors.violinBrown, - yellowBackground: rgba(colors.princetonOrange, 0.05), -}; diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts deleted file mode 100644 index 8e123f6..0000000 --- a/src/components/Card/types.ts +++ /dev/null @@ -1,12 +0,0 @@ - -export type CardTheme = { - blueBackground: string; - blueColor: string; - darkGrayBackground: string; - grayBackground: string; - lightBackground: string; - lightBorder: string; - outlineBorder: string; - yellowBackground: string; - yellowColor: string; -}; \ No newline at end of file diff --git a/src/components/Charts/Terminal/constants.ts b/src/components/Charts/Terminal/constants.ts new file mode 100644 index 0000000..3d79fea --- /dev/null +++ b/src/components/Charts/Terminal/constants.ts @@ -0,0 +1,7 @@ +import { ChainId } from "@real-wagmi/sdk"; +import { TerminalChainId } from "./types"; + +export const URLS: { [key in TerminalChainId]: (a: string) => string } = { + [ChainId.ZKSYNC]: (address: string) => `https://www.geckoterminal.com/zksync/pools/${address}?embed=1&info=0&swaps=0`, + [ChainId.FANTOM]: (address: string) => `https://www.geckoterminal.com/ftm/pools/${address}?embed=1&info=0&swaps=0`, +}; diff --git a/src/components/Charts/Terminal/index.tsx b/src/components/Charts/Terminal/index.tsx new file mode 100644 index 0000000..dff6949 --- /dev/null +++ b/src/components/Charts/Terminal/index.tsx @@ -0,0 +1,19 @@ +import { useMemo } from "react"; +import { URLS } from "./constants"; +import { ChartWrapper } from "./styles"; +import { TerminalChainId } from "./types"; + +interface IProps { + poolAddress: string; + chainId: TerminalChainId; +} + +export function TerminalChart({ poolAddress, chainId }: IProps) { + const url = useMemo(() => URLS[chainId](poolAddress), [chainId]); + + return ( + +