From b20156e7dad65fece2094bfeebee06661211ebbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Fri, 8 Mar 2024 16:51:27 +0000 Subject: [PATCH] feat: final --- .storybook/preview.tsx | 4 +- README.md | 4 +- packages/components/CHANGELOG.md | 2 +- packages/components/README.md | 4 +- packages/components/package.json | 2 +- .../src/Accordion/Accordion.style.tsx | 2 +- .../components/src/Accordion/Accordion.tsx | 2 +- .../src/Accordion/AccordionItem.tsx | 2 +- packages/components/src/Alert/Alert.style.tsx | 2 +- packages/components/src/Alert/Alert.tsx | 2 +- .../src/Breadcrumbs/BreadcrumbItem.tsx | 4 +- .../src/Breadcrumbs/Breadcrumbs.style.tsx | 5 +- .../components/src/Button/Button.style.tsx | 4 +- packages/components/src/Button/Button.tsx | 2 +- .../src/Button/__tests__/CTA.test.tsx | 10 +- packages/components/src/CTA/BaseCTA.tsx | 62 --------- packages/components/src/CTA/CTA.stories.tsx | 80 ----------- packages/components/src/CTA/CTA.style.tsx | 95 ------------- packages/components/src/CTA/CTA.tsx | 77 ----------- .../components/src/CTA/CTALink.stories.tsx | 65 --------- packages/components/src/CTA/CTALink.tsx | 59 -------- .../components/src/CTA/__tests__/CTA.test.tsx | 25 ---- packages/components/src/CTA/index.tsx | 6 - packages/components/src/Card/Card.style.tsx | 2 +- packages/components/src/Card/Card.tsx | 2 +- .../components/src/Dialog/Dialog.style.tsx | 10 +- packages/components/src/Dialog/Dialog.tsx | 2 +- packages/components/src/Dialog/DialogBody.tsx | 15 +- .../components/src/Dialog/DialogContext.tsx | 2 +- .../components/src/Dialog/DialogFooter.tsx | 5 +- .../components/src/Dialog/DialogHeader.tsx | 4 +- .../components/src/Divider/Divider.style.tsx | 2 +- packages/components/src/Divider/Divider.tsx | 2 +- .../components/src/Drawer/Drawer.stories.tsx | 4 +- packages/components/src/Field/Field.style.tsx | 18 ++- packages/components/src/Field/Field.tsx | 21 ++- packages/components/src/Flex/Flex.style.tsx | 2 +- packages/components/src/Flex/Flex.tsx | 2 +- packages/components/src/Grid/Grid.stories.tsx | 30 ---- packages/components/src/Grid/Grid.style.tsx | 12 -- packages/components/src/Grid/Grid.tsx | 13 -- .../components/src/Grid/GridItem.style.tsx | 17 --- packages/components/src/Grid/GridItem.tsx | 30 ---- .../src/Grid/__tests__/Grid.test.tsx | 17 --- packages/components/src/Grid/index.ts | 4 - packages/components/src/Input/BaseInput.tsx | 2 +- packages/components/src/Input/Input.style.tsx | 3 +- packages/components/src/List/List.style.tsx | 17 ++- packages/components/src/List/List.tsx | 13 +- packages/components/src/List/ListItem.tsx | 6 +- packages/components/src/Meter/Meter.tsx | 2 +- .../components/src/Modal/Modal.stories.tsx | 128 +++++++++++++++++- packages/components/src/Modal/Modal.style.tsx | 9 +- packages/components/src/Modal/Modal.tsx | 5 +- .../components/src/Modal/ModalWrapper.tsx | 13 +- .../src/Modal/__tests__/Modal.test.tsx | 5 +- .../src/Popover/Popover.stories.tsx | 6 +- .../src/Popover/PopoverContentWrapper.tsx | 2 +- .../components/src/Popover/PopoverHeader.tsx | 2 +- .../src/ProgressBar/ProgressBar.style.tsx | 2 +- .../src/ProgressBar/ProgressBar.tsx | 2 +- packages/components/src/Radio/Radio.style.tsx | 4 +- packages/components/src/Radio/RadioGroup.tsx | 2 +- .../components/src/Select/Select.stories.tsx | 6 +- .../components/src/Select/Select.style.tsx | 2 +- packages/components/src/Select/Select.tsx | 3 +- .../components/src/Select/SelectModal.tsx | 3 +- .../components/src/Select/SelectTrigger.tsx | 4 +- .../src/Spinner/Spinner.stories.tsx | 2 +- .../components/src/Spinner/Spinner.style.tsx | 2 +- packages/components/src/Spinner/Spinner.tsx | 2 +- .../components/src/Stack/Stack.stories.tsx | 4 +- .../components/src/Table/Table.stories.tsx | 8 +- packages/components/src/Tabs/Tab.tsx | 6 +- packages/components/src/Tabs/Tabs.style.tsx | 74 +++++----- packages/components/src/Tabs/Tabs.tsx | 10 +- packages/components/src/Text/Dl/Dl.style.tsx | 5 +- packages/components/src/Text/Dl/Dt.tsx | 4 +- packages/components/src/Text/style.tsx | 6 +- packages/components/src/Text/types.ts | 4 +- .../src/TextLink/TextLink.style.tsx | 16 +-- packages/components/src/TextLink/TextLink.tsx | 10 +- .../src/TokenInput/BaseTokenInput.style.tsx | 25 +++- .../src/TokenInput/BaseTokenInput.tsx | 42 +++--- .../src/TokenInput/SelectableTokenInput.tsx | 5 +- .../src/TokenInput/TokenAdornment.tsx | 2 +- .../src/TokenInput/TokenInput.style.tsx | 50 +++---- .../src/TokenInput/TokenListItem.tsx | 13 +- .../components/src/TokenInput/TokenSelect.tsx | 14 +- .../TokenInput/__tests__/TokenInput.test.tsx | 79 ++++++----- .../stories/SelectableTokenInput.stories.tsx | 19 +-- .../src/Tooltip/Tooltip.stories.tsx | 4 +- .../src/UnstyledButton/__tests__/CTA.test.tsx | 10 +- packages/components/src/index.ts | 4 - .../src/types/styled-components.d.ts | 2 +- packages/components/src/utils/margin.ts | 4 +- packages/components/src/utils/overlay.ts | 17 ++- .../components/src/utils/visually-hidden.ts | 4 +- packages/core/system/src/provider.tsx | 6 +- packages/core/theme/CHANGELOG.md | 2 +- packages/core/theme/package.json | 6 +- .../src/components/accordion.ts | 0 .../src/components/alert.ts | 0 .../src/components/button.ts | 0 .../{themeV2 => theme}/src/components/card.ts | 0 .../src/components/dialog.ts | 3 +- .../src/components/divider.ts | 0 .../src/components/drawer.ts | 0 .../src/components/index.ts | 2 + .../src/components/input.ts | 1 + .../{themeV2 => theme}/src/components/list.ts | 0 .../src/components/progress-bar.ts | 0 .../src/components/radio.ts | 0 .../src/components/spinner.ts | 0 .../src/components/switch.ts | 0 packages/core/theme/src/components/table.ts | 15 ++ packages/core/theme/src/components/tabs.ts | 22 +++ .../src/components/token-input.ts | 13 +- .../src/components/tooltip.ts | 0 .../core/theme/src/{ => core}/breakpoints.ts | 0 .../{themeV2 => theme}/src/core/colors.ts | 2 +- .../{themeV2 => theme}/src/core/font-size.ts | 0 .../src/core/font-weight.ts | 0 .../core/{themeV2 => theme}/src/core/icon.ts | 4 +- .../core/{themeV2 => theme}/src/core/index.ts | 0 .../src/core/line-height.ts | 0 .../{themeV2 => theme}/src/core/max-width.ts | 0 .../{themeV2 => theme}/src/core/rounded.ts | 0 .../core/{themeV2 => theme}/src/core/space.ts | 0 .../{themeV2 => theme}/src/core/transition.ts | 0 .../{themeV2 => theme}/src/core/typography.ts | 0 .../core/{themeV2 => theme}/src/define.ts | 6 +- packages/core/theme/src/index.ts | 50 ++++++- packages/core/theme/src/{ => temp}/base.ts | 0 .../core => theme/src/temp}/breakpoints.ts | 0 .../theme/src/{ => temp}/css/theme.base.css | 0 .../theme/src/{ => temp}/css/theme.bob.css | 0 .../src/{ => temp}/css/theme.interlay.css | 0 .../src/{ => temp}/css/theme.kintsugi.css | 0 packages/core/theme/src/temp/index.ts | 4 + packages/core/theme/src/temp/types.ts | 2 + .../src/themes/bob/accordion.ts | 0 .../src/themes/bob/alert.ts | 0 .../src/themes/bob/button.ts | 12 +- .../{themeV2 => theme}/src/themes/bob/card.ts | 0 .../src/themes/bob/colors.ts | 0 .../src/themes/bob/dialog.ts | 0 .../src/themes/bob/divider.ts | 0 .../src/themes/bob/drawer.ts | 0 .../src/themes/bob/index.ts | 6 +- .../src/themes/bob/input.ts | 5 +- .../{themeV2 => theme}/src/themes/bob/list.ts | 2 +- .../src/themes/bob/progress-bar.ts | 0 .../src/themes/bob/radio.ts | 0 .../src/themes/bob/spinner.ts | 0 .../src/themes/bob/switch.ts | 0 packages/core/theme/src/themes/bob/table.ts | 25 ++++ packages/core/theme/src/themes/bob/tabs.ts | 61 +++++++++ .../src/themes/bob/token-input.ts | 49 ++++--- .../src/themes/bob/tooltip.ts | 0 .../{themeV2 => theme}/src/themes/index.ts | 0 packages/core/theme/src/types.ts | 109 +-------------- packages/core/theme/src/utils.ts | 57 +++----- packages/core/theme/tsup.config.ts | 13 +- packages/core/themeV2/CHANGELOG.md | 44 ------ packages/core/themeV2/README.md | 21 --- .../core/themeV2/clean-package.config.json | 20 --- packages/core/themeV2/package.json | 55 -------- packages/core/themeV2/src/index.ts | 43 ------ packages/core/themeV2/src/types.ts | 5 - packages/core/themeV2/src/utils.ts | 13 -- packages/core/themeV2/tsconfig.json | 8 -- packages/core/themeV2/tsup.config.ts | 19 --- packages/hooks/package.json | 2 +- .../src/use-form/__tests__/use-form.test.tsx | 2 +- packages/hooks/src/use-style-props.tsx | 2 +- packages/icons/common/package.json | 2 +- packages/icons/common/src/core/Icon.style.tsx | 4 +- packages/icons/common/src/core/Icon.tsx | 4 +- .../common/src/types/styled-components.d.ts | 2 +- pnpm-lock.yaml | 71 ++++------ 181 files changed, 823 insertions(+), 1395 deletions(-) delete mode 100644 packages/components/src/CTA/BaseCTA.tsx delete mode 100644 packages/components/src/CTA/CTA.stories.tsx delete mode 100644 packages/components/src/CTA/CTA.style.tsx delete mode 100644 packages/components/src/CTA/CTA.tsx delete mode 100644 packages/components/src/CTA/CTALink.stories.tsx delete mode 100644 packages/components/src/CTA/CTALink.tsx delete mode 100644 packages/components/src/CTA/__tests__/CTA.test.tsx delete mode 100644 packages/components/src/CTA/index.tsx delete mode 100644 packages/components/src/Grid/Grid.stories.tsx delete mode 100644 packages/components/src/Grid/Grid.style.tsx delete mode 100644 packages/components/src/Grid/Grid.tsx delete mode 100644 packages/components/src/Grid/GridItem.style.tsx delete mode 100644 packages/components/src/Grid/GridItem.tsx delete mode 100644 packages/components/src/Grid/__tests__/Grid.test.tsx delete mode 100644 packages/components/src/Grid/index.ts rename packages/core/{themeV2 => theme}/src/components/accordion.ts (100%) rename packages/core/{themeV2 => theme}/src/components/alert.ts (100%) rename packages/core/{themeV2 => theme}/src/components/button.ts (100%) rename packages/core/{themeV2 => theme}/src/components/card.ts (100%) rename packages/core/{themeV2 => theme}/src/components/dialog.ts (89%) rename packages/core/{themeV2 => theme}/src/components/divider.ts (100%) rename packages/core/{themeV2 => theme}/src/components/drawer.ts (100%) rename packages/core/{themeV2 => theme}/src/components/index.ts (89%) rename packages/core/{themeV2 => theme}/src/components/input.ts (93%) rename packages/core/{themeV2 => theme}/src/components/list.ts (100%) rename packages/core/{themeV2 => theme}/src/components/progress-bar.ts (100%) rename packages/core/{themeV2 => theme}/src/components/radio.ts (100%) rename packages/core/{themeV2 => theme}/src/components/spinner.ts (100%) rename packages/core/{themeV2 => theme}/src/components/switch.ts (100%) create mode 100644 packages/core/theme/src/components/table.ts create mode 100644 packages/core/theme/src/components/tabs.ts rename packages/core/{themeV2 => theme}/src/components/token-input.ts (64%) rename packages/core/{themeV2 => theme}/src/components/tooltip.ts (100%) rename packages/core/theme/src/{ => core}/breakpoints.ts (100%) rename packages/core/{themeV2 => theme}/src/core/colors.ts (85%) rename packages/core/{themeV2 => theme}/src/core/font-size.ts (100%) rename packages/core/{themeV2 => theme}/src/core/font-weight.ts (100%) rename packages/core/{themeV2 => theme}/src/core/icon.ts (91%) rename packages/core/{themeV2 => theme}/src/core/index.ts (100%) rename packages/core/{themeV2 => theme}/src/core/line-height.ts (100%) rename packages/core/{themeV2 => theme}/src/core/max-width.ts (100%) rename packages/core/{themeV2 => theme}/src/core/rounded.ts (100%) rename packages/core/{themeV2 => theme}/src/core/space.ts (100%) rename packages/core/{themeV2 => theme}/src/core/transition.ts (100%) rename packages/core/{themeV2 => theme}/src/core/typography.ts (100%) rename packages/core/{themeV2 => theme}/src/define.ts (93%) rename packages/core/theme/src/{ => temp}/base.ts (100%) rename packages/core/{themeV2/src/core => theme/src/temp}/breakpoints.ts (100%) rename packages/core/theme/src/{ => temp}/css/theme.base.css (100%) rename packages/core/theme/src/{ => temp}/css/theme.bob.css (100%) rename packages/core/theme/src/{ => temp}/css/theme.interlay.css (100%) rename packages/core/theme/src/{ => temp}/css/theme.kintsugi.css (100%) create mode 100644 packages/core/theme/src/temp/index.ts create mode 100644 packages/core/theme/src/temp/types.ts rename packages/core/{themeV2 => theme}/src/themes/bob/accordion.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/alert.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/button.ts (91%) rename packages/core/{themeV2 => theme}/src/themes/bob/card.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/colors.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/dialog.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/divider.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/drawer.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/index.ts (89%) rename packages/core/{themeV2 => theme}/src/themes/bob/input.ts (94%) rename packages/core/{themeV2 => theme}/src/themes/bob/list.ts (89%) rename packages/core/{themeV2 => theme}/src/themes/bob/progress-bar.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/radio.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/spinner.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/bob/switch.ts (100%) create mode 100644 packages/core/theme/src/themes/bob/table.ts create mode 100644 packages/core/theme/src/themes/bob/tabs.ts rename packages/core/{themeV2 => theme}/src/themes/bob/token-input.ts (67%) rename packages/core/{themeV2 => theme}/src/themes/bob/tooltip.ts (100%) rename packages/core/{themeV2 => theme}/src/themes/index.ts (100%) delete mode 100644 packages/core/themeV2/CHANGELOG.md delete mode 100644 packages/core/themeV2/README.md delete mode 100644 packages/core/themeV2/clean-package.config.json delete mode 100644 packages/core/themeV2/package.json delete mode 100644 packages/core/themeV2/src/index.ts delete mode 100644 packages/core/themeV2/src/types.ts delete mode 100644 packages/core/themeV2/src/utils.ts delete mode 100644 packages/core/themeV2/tsconfig.json delete mode 100644 packages/core/themeV2/tsup.config.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index edb124dbb..dcdf21ff6 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { InterlayUIProvider } from '../packages/core/system/src'; import { CSSReset } from '../packages/components/src'; -import '../packages/core/theme/src/css/theme.interlay.css'; -import { bobTheme } from '../packages/core/themeV2/src'; +import '../packages/core/theme/src/temp/css/theme.interlay.css'; +import { bobTheme } from '../packages/core/theme/src'; import './style.css'; const preview: Preview = { diff --git a/README.md b/README.md index 5bb3efb40..c1c97c773 100644 --- a/README.md +++ b/README.md @@ -60,10 +60,10 @@ function App({ children }) { 2. Now you can start using components like so!: ```jsx -import { CTA } from '@interlay/ui'; +import { Button } from '@interlay/ui'; function Example() { - return I am using Interlay UI; + return ; } ``` diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index aa43fbb8e..dfc832a97 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -28,7 +28,7 @@ ### Patch Changes -- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA +- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and Button - [#46](https://github.com/interlay/ui/pull/46) [`95c75c1968cda23b75ff5f7aaaa13d5c4cbe6c0e`](https://github.com/interlay/ui/commit/95c75c1968cda23b75ff5f7aaaa13d5c4cbe6c0e) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(components): Radio and RadioGroup diff --git a/packages/components/README.md b/packages/components/README.md index 3c22d30b2..038466168 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -60,10 +60,10 @@ function App({ children }) { 2. Now you can start using components like so!: ```jsx -import { CTA } from '@interlay/ui'; +import { Button } from '@interlay/ui'; function Example() { - return I am using Interlay UI; + return ; } ``` diff --git a/packages/components/package.json b/packages/components/package.json index 6834a50ac..bfb9dd3f6 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -43,7 +43,7 @@ "@interlay/icons": "workspace:*", "@interlay/system": "workspace:*", "@interlay/theme": "workspace:*", - "@interlay/themev2": "workspace:*", + "@interlay/theme": "workspace:*", "@radix-ui/react-slot": "^1.0.2", "@react-aria/accordion": "3.0.0-alpha.20", "@react-aria/breadcrumbs": "^3.5.4", diff --git a/packages/components/src/Accordion/Accordion.style.tsx b/packages/components/src/Accordion/Accordion.style.tsx index ee1395f51..b9f81cce8 100644 --- a/packages/components/src/Accordion/Accordion.style.tsx +++ b/packages/components/src/Accordion/Accordion.style.tsx @@ -1,6 +1,6 @@ import styled, { css } from 'styled-components'; import { ChevronDown } from '@interlay/icons'; -import { AccordionVariants } from '@interlay/themev2'; +import { AccordionVariants } from '@interlay/theme'; import { H3, Span } from '../Text'; diff --git a/packages/components/src/Accordion/Accordion.tsx b/packages/components/src/Accordion/Accordion.tsx index 5472afbdf..ad39c7555 100644 --- a/packages/components/src/Accordion/Accordion.tsx +++ b/packages/components/src/Accordion/Accordion.tsx @@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils'; import { useTreeState } from '@react-stately/tree'; import { forwardRef, HTMLAttributes, Ref } from 'react'; import { useDOMRef } from '@interlay/hooks'; -import { AccordionVariants } from '@interlay/themev2'; +import { AccordionVariants } from '@interlay/theme'; import { AccordionItem } from './AccordionItem'; import { StyledAccordion } from './Accordion.style'; diff --git a/packages/components/src/Accordion/AccordionItem.tsx b/packages/components/src/Accordion/AccordionItem.tsx index 21a0877d4..9b338aa2c 100644 --- a/packages/components/src/Accordion/AccordionItem.tsx +++ b/packages/components/src/Accordion/AccordionItem.tsx @@ -4,7 +4,7 @@ import { mergeProps } from '@react-aria/utils'; import { TreeState } from '@react-stately/tree'; import { Node } from '@react-types/shared'; import { useRef } from 'react'; -import { AccordionVariants } from '@interlay/themev2'; +import { AccordionVariants } from '@interlay/theme'; import { StyledAccordionItemButton, diff --git a/packages/components/src/Alert/Alert.style.tsx b/packages/components/src/Alert/Alert.style.tsx index 13a69a02d..038c5469f 100644 --- a/packages/components/src/Alert/Alert.style.tsx +++ b/packages/components/src/Alert/Alert.style.tsx @@ -1,6 +1,6 @@ import { CheckCircle, InformationCircle, Warning } from '@interlay/icons'; import styled, { css } from 'styled-components'; -import { AlertStatus } from '@interlay/themev2'; +import { AlertStatus } from '@interlay/theme'; import { Flex } from '../Flex'; diff --git a/packages/components/src/Alert/Alert.tsx b/packages/components/src/Alert/Alert.tsx index 30185a57b..9f0675a33 100644 --- a/packages/components/src/Alert/Alert.tsx +++ b/packages/components/src/Alert/Alert.tsx @@ -1,4 +1,4 @@ -import { AlertStatus } from '@interlay/themev2'; +import { AlertStatus } from '@interlay/theme'; import { ForwardRefExoticComponent } from 'react'; import { FlexProps } from '../Flex'; diff --git a/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx b/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx index 6cde82b38..215ff8b88 100644 --- a/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx +++ b/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx @@ -32,7 +32,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre const commonProps: Pick = { size: 's', - color: isCurrent ? 'secondary' : 'tertiary' + color: isCurrent ? 'light' : 'green-300' }; return ( @@ -51,7 +51,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre {children} )} - {isCurrent === false && } + {isCurrent === false && } ); }; diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx b/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx index 8f945bc63..48bd1ff1b 100644 --- a/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx +++ b/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import { theme } from '@interlay/theme'; import { Span } from '../Text'; import { TextLink } from '../TextLink'; @@ -28,12 +27,12 @@ const StyledListItem = styled.li` `; const StyledSpanBreadcrumb = styled(Span)` - padding: 0 ${theme.spacing.spacing2}; + padding: 0 ${({ theme }) => theme.spacing('s')}; cursor: default; `; const StyledLinkBreadcrumb = styled(TextLink)` - padding: 0 ${theme.spacing.spacing2}; + padding: 0 ${({ theme }) => theme.spacing('s')}; text-decoration: none; `; diff --git a/packages/components/src/Button/Button.style.tsx b/packages/components/src/Button/Button.style.tsx index 049d6b49b..fde788348 100644 --- a/packages/components/src/Button/Button.style.tsx +++ b/packages/components/src/Button/Button.style.tsx @@ -1,5 +1,5 @@ -import { ButtonSizes, ButtonVariants } from '@interlay/themev2'; -import { ButtonColors } from '@interlay/themev2/src/components'; +import { ButtonSizes, ButtonVariants } from '@interlay/theme'; +import { ButtonColors } from '@interlay/theme/src/components'; import styled, { css } from 'styled-components'; import { UnstyledButton } from '../UnstyledButton'; diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx index 04564017c..e69ffa01e 100644 --- a/packages/components/src/Button/Button.tsx +++ b/packages/components/src/Button/Button.tsx @@ -3,7 +3,7 @@ import { useFocusRing } from '@react-aria/focus'; import { mergeProps } from '@react-aria/utils'; import { PressEvent } from '@react-types/shared'; import { ButtonHTMLAttributes, forwardRef } from 'react'; -import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/themev2'; +import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/theme'; import { Slottable } from '@radix-ui/react-slot'; import { Flex } from '../Flex'; diff --git a/packages/components/src/Button/__tests__/CTA.test.tsx b/packages/components/src/Button/__tests__/CTA.test.tsx index ac084b549..a83c0750a 100644 --- a/packages/components/src/Button/__tests__/CTA.test.tsx +++ b/packages/components/src/Button/__tests__/CTA.test.tsx @@ -2,11 +2,11 @@ import { render } from '@testing-library/react'; import { createRef } from 'react'; import { testA11y } from '@interlay/test-utils'; -import { CTA } from '..'; +import { Button } from '..'; -describe('CTA', () => { +describe('Button', () => { it('should render correctly', () => { - const wrapper = render(Button); + const wrapper = render(); expect(() => wrapper.unmount()).not.toThrow(); }); @@ -14,12 +14,12 @@ describe('CTA', () => { it('ref should be forwarded', () => { const ref = createRef(); - render(Button); + render(); expect(ref.current).not.toBeNull(); }); it('should pass a11y', async () => { - await testA11y(Button); + await testA11y(); }); }); diff --git a/packages/components/src/CTA/BaseCTA.tsx b/packages/components/src/CTA/BaseCTA.tsx deleted file mode 100644 index 566e7b5ef..000000000 --- a/packages/components/src/CTA/BaseCTA.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { forwardRef, HTMLAttributes } from 'react'; - -import { CTASizes, CTAVariants } from '../../../core/theme/src'; -import { ElementTypeProp } from '../utils/types'; - -import { OutlinedCTA, PrimaryCTA, SecondaryCTA, TextCTA } from './CTA.style'; - -const ctaElements = { - primary: PrimaryCTA, - secondary: SecondaryCTA, - outlined: OutlinedCTA, - text: TextCTA -}; - -type Props = { - variant?: CTAVariants; - fullWidth?: boolean; - size?: CTASizes; - disabled?: boolean; - isFocusVisible?: boolean; -}; - -type NativeAttrs = Omit, keyof Props>; - -type BaseCTAProps = Props & NativeAttrs & ElementTypeProp; - -const BaseCTA = forwardRef( - ( - { - variant = 'primary', - fullWidth = false, - size = 'medium', - children, - disabled, - elementType, - isFocusVisible, - ...props - }, - ref - ): JSX.Element => { - const StyledCTA = ctaElements[variant]; - - return ( - - {children} - - ); - } -); - -BaseCTA.displayName = 'BaseCTA'; - -export { BaseCTA }; -export type { BaseCTAProps }; diff --git a/packages/components/src/CTA/CTA.stories.tsx b/packages/components/src/CTA/CTA.stories.tsx deleted file mode 100644 index efa9babbf..000000000 --- a/packages/components/src/CTA/CTA.stories.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; - -import { Flex } from '..'; - -import { CTA, CTAProps } from '.'; - -export default { - title: 'Buttons/CTA', - component: CTA, - parameters: { - layout: 'centered' - }, - args: { - href: '#', - children: 'Button' - }, - render: (args) => ( - - - - - ) -} as Meta; - -export const Primary: StoryObj = { - args: { - variant: 'primary' - } -}; - -export const Secondary: StoryObj = { - args: { - variant: 'secondary' - } -}; - -export const Outlined: StoryObj = { - args: { - variant: 'outlined' - } -}; - -export const Text: StoryObj = { - args: { - variant: 'text' - } -}; - -export const XSmall: StoryObj = { - args: { - size: 'x-small' - } -}; - -export const Small: StoryObj = { - args: { - size: 'small' - } -}; - -export const Large: StoryObj = { - args: { - size: 'large' - } -}; - -export const Loading: StoryObj = { - render: (args) => ( - - - - - - - - ), - args: { - loading: true - } -}; diff --git a/packages/components/src/CTA/CTA.style.tsx b/packages/components/src/CTA/CTA.style.tsx deleted file mode 100644 index 598b72cf2..000000000 --- a/packages/components/src/CTA/CTA.style.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import styled from 'styled-components'; -import { ArrowTopRightOnSquare } from '@interlay/icons'; - -import { theme } from '../../../core/theme/src'; -import { CTASizes, CTAVariants } from '../../../core/theme/src'; -import { Spinner } from '../Spinner'; - -interface StyledCTAProps { - $fullWidth: boolean; - $size: CTASizes; - $isFocusVisible?: boolean; -} - -type StyledSpinnerProps = { - $variant: CTAVariants; -}; - -const BaseCTA = styled.button` - display: inline-flex; - align-items: center; - justify-content: center; - color: ${theme.cta.primary.text}; - border: none; - border-radius: ${theme.rounded.md}; - font-size: ${(props) => theme.cta[props.$size].text}; - font-weight: ${theme.fontWeight.medium}; - line-height: ${(props) => theme.cta[props.$size].lineHeight}; - padding: ${(props) => `0 ${theme.cta[props.$size].padding}`}; - height: ${({ $size }) => theme.cta[$size].height}; - text-decoration: none; - width: ${(props) => (props.$fullWidth ? '100%' : 'auto')}; - background: none; - // TODO: enforce outline - outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'}; - - &[aria-disabled='true'], - &[disabled] { - pointer-events: none; - cursor: not-allowed; - opacity: 50%; - } -`; - -const PrimaryCTA = styled(BaseCTA)` - background-color: ${theme.cta.primary.bg}; - - &:hover:not([disabled]) { - background-color: ${theme.cta.primary.bgHover}; - } -`; - -const SecondaryCTA = styled(BaseCTA)` - background-color: ${theme.cta.secondary.bg}; - color: ${theme.cta.secondary.text}; -`; - -const OutlinedCTA = styled(BaseCTA)` - color: ${theme.cta.outlined.text}; - border: ${theme.cta.outlined.border}; - - &:hover:not([disabled]) { - background-color: ${theme.cta.outlined.bgHover}; - } -`; - -const TextCTA = styled(BaseCTA)` - color: ${theme.cta.text.text}; - - &:hover:not([disabled]) { - background-color: ${theme.cta.text.bgHover}; - } -`; - -const LoadingWrapper = styled.span` - display: flex; - align-items: center; - margin-right: ${theme.spacing.spacing2}; -`; - -const StyledSpinner = styled(Spinner)` - border-top-color: ${({ $variant }) => theme.cta[$variant].text}; - border-right-color: ${({ $variant }) => theme.cta[$variant].text}; - border-bottom-color: ${({ $variant }) => theme.cta[$variant].text}; - border-left-color: transparent; -`; - -const StyledIcon = styled(ArrowTopRightOnSquare)` - margin-left: ${theme.spacing.spacing2}; - width: 1.2em; - height: 1.2em; - color: inherit; -`; - -export { LoadingWrapper, OutlinedCTA, PrimaryCTA, SecondaryCTA, StyledIcon, StyledSpinner, TextCTA }; -export type { StyledCTAProps }; diff --git a/packages/components/src/CTA/CTA.tsx b/packages/components/src/CTA/CTA.tsx deleted file mode 100644 index b93e1b288..000000000 --- a/packages/components/src/CTA/CTA.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useButton } from '@react-aria/button'; -import { useFocusRing } from '@react-aria/focus'; -import { mergeProps } from '@react-aria/utils'; -import { PressEvent } from '@react-types/shared'; -import { ButtonHTMLAttributes, forwardRef } from 'react'; -import { useDOMRef } from '@interlay/hooks'; - -import { CTASizes, IconSize } from '../../../core/theme/src'; - -import { BaseCTA, BaseCTAProps } from './BaseCTA'; -import { LoadingWrapper, StyledSpinner } from './CTA.style'; - -const loadingSizes: Record = { - 'x-small': 'xs', - small: 'xs', - medium: 's', - large: 's' -}; - -type Props = { - fullWidth?: boolean; - size?: CTASizes; - loading?: boolean; - onPress?: (e: PressEvent) => void; -}; - -type NativeAttrs = Omit, keyof Props>; - -type InheritAttrs = Omit; - -type CTAProps = Props & InheritAttrs & NativeAttrs; - -/** - * @deprecated use Button - */ -const CTA = forwardRef( - ( - { children, loading, disabled, variant = 'primary', fullWidth, size = 'medium', onPress, onClick, ...props }, - ref - ): JSX.Element => { - const domRef = useDOMRef(ref); - - const isDisabled = disabled || loading; - - const { buttonProps } = useButton({ isDisabled, onPress, ...props }, domRef); - const { focusProps, isFocusVisible } = useFocusRing(props); - - return ( - - {loading && ( - - - - )} - {children} - - ); - } -); - -CTA.displayName = 'CTA'; - -export { CTA }; -export type { CTAProps }; diff --git a/packages/components/src/CTA/CTALink.stories.tsx b/packages/components/src/CTA/CTALink.stories.tsx deleted file mode 100644 index b1fec9fa4..000000000 --- a/packages/components/src/CTA/CTALink.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; - -import { Flex } from '..'; - -import { CTALink, CTALinkProps } from '.'; - -export default { - title: 'Navigation/CTALink', - component: CTALink, - parameters: { - layout: 'centered' - }, - args: { - href: '#', - children: 'Button' - }, - render: (args) => ( - - - - - ) -} as Meta; - -export const Primary: StoryObj = { - args: { - variant: 'primary' - } -}; - -export const Secondary: StoryObj = { - args: { - variant: 'secondary' - } -}; - -export const Outlined: StoryObj = { - args: { - variant: 'outlined' - } -}; - -export const Text: StoryObj = { - args: { - variant: 'text' - } -}; - -export const XSmall: StoryObj = { - args: { - size: 'x-small' - } -}; - -export const Small: StoryObj = { - args: { - size: 'small' - } -}; - -export const Large: StoryObj = { - args: { - size: 'large' - } -}; diff --git a/packages/components/src/CTA/CTALink.tsx b/packages/components/src/CTA/CTALink.tsx deleted file mode 100644 index 17cbebbde..000000000 --- a/packages/components/src/CTA/CTALink.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { useFocusRing } from '@react-aria/focus'; -import { AriaLinkOptions, useLink } from '@react-aria/link'; -import { mergeProps } from '@react-aria/utils'; -import { AnchorHTMLAttributes, forwardRef } from 'react'; -import { useDOMRef } from '@interlay/hooks'; - -import { BaseCTA, BaseCTAProps } from './BaseCTA'; -import { StyledIcon } from './CTA.style'; - -type Props = { - external?: boolean; - disabled?: boolean; - icon?: boolean; -}; - -type AriaAttrs = Omit; - -type InheritAttrs = Omit; - -type NativeAttrs = Omit, keyof Props & AriaAttrs & InheritAttrs>; - -type CTALinkProps = Props & AriaAttrs & InheritAttrs & NativeAttrs; - -/** - * @deprecated use Button component with asChild prop - */ -const CTALink = forwardRef( - ({ disabled, external, children, icon, ...props }, ref): JSX.Element => { - const linkRef = useDOMRef(ref); - - const ariaProps = { - ...props, - isDisabled: disabled, - ...(external && { target: '_blank', rel: 'noreferrer' }) - }; - - const { linkProps } = useLink(ariaProps, linkRef); - const { focusProps, isFocusVisible } = useFocusRing(); - - return ( - - {children} - {icon && } - - ); - } -); - -CTALink.displayName = 'CTALink'; - -export { CTALink }; -export type { CTALinkProps }; diff --git a/packages/components/src/CTA/__tests__/CTA.test.tsx b/packages/components/src/CTA/__tests__/CTA.test.tsx deleted file mode 100644 index ac084b549..000000000 --- a/packages/components/src/CTA/__tests__/CTA.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { render } from '@testing-library/react'; -import { createRef } from 'react'; -import { testA11y } from '@interlay/test-utils'; - -import { CTA } from '..'; - -describe('CTA', () => { - it('should render correctly', () => { - const wrapper = render(Button); - - expect(() => wrapper.unmount()).not.toThrow(); - }); - - it('ref should be forwarded', () => { - const ref = createRef(); - - render(Button); - - expect(ref.current).not.toBeNull(); - }); - - it('should pass a11y', async () => { - await testA11y(Button); - }); -}); diff --git a/packages/components/src/CTA/index.tsx b/packages/components/src/CTA/index.tsx deleted file mode 100644 index 01bda90ce..000000000 --- a/packages/components/src/CTA/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -export type { BaseCTAProps } from './BaseCTA'; -export { BaseCTA } from './BaseCTA'; -export type { CTAProps } from './CTA'; -export { CTA } from './CTA'; -export type { CTALinkProps } from './CTALink'; -export { CTALink } from './CTALink'; diff --git a/packages/components/src/Card/Card.style.tsx b/packages/components/src/Card/Card.style.tsx index 61ff4a230..c8308921a 100644 --- a/packages/components/src/Card/Card.style.tsx +++ b/packages/components/src/Card/Card.style.tsx @@ -1,5 +1,5 @@ import styled, { css } from 'styled-components'; -import { Color, Rounded, Spacing } from '@interlay/themev2'; +import { Color, Rounded, Spacing } from '@interlay/theme'; import { Flex } from '../Flex'; diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx index efe3f1bb7..859072189 100644 --- a/packages/components/src/Card/Card.tsx +++ b/packages/components/src/Card/Card.tsx @@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils'; import { PressEvent } from '@react-types/shared'; import { forwardRef } from 'react'; import { useDOMRef } from '@interlay/hooks'; -import { Color, Rounded, Spacing } from '@interlay/themev2'; +import { Color, Rounded, Spacing } from '@interlay/theme'; import { FlexProps } from '../Flex'; diff --git a/packages/components/src/Dialog/Dialog.style.tsx b/packages/components/src/Dialog/Dialog.style.tsx index 94b701a69..9a6bc13a8 100644 --- a/packages/components/src/Dialog/Dialog.style.tsx +++ b/packages/components/src/Dialog/Dialog.style.tsx @@ -1,5 +1,5 @@ import styled, { css } from 'styled-components'; -import { DialogSize } from '@interlay/themev2'; +import { DialogSize, Spacing } from '@interlay/theme'; import { Flex } from '../Flex'; import { H3 } from '../Text'; @@ -9,11 +9,16 @@ type StyledDialogProps = { $size: DialogSize; }; +type StyledDialogBodyProps = { + $maxHeight?: Spacing; +}; + const StyledDialog = styled.section` display: flex; flex-direction: column; position: relative; outline: none; + overflow: hidden; width: 100%; ${({ theme, $size }) => css` @@ -36,8 +41,9 @@ const StyledDialogHeader = styled(H3)` flex-shrink: 0; `; -const StyledDialogBody = styled(Flex)` +const StyledDialogBody = styled(Flex)` ${({ theme }) => theme.dialog.body}; + max-height: ${({ theme, $maxHeight }) => $maxHeight && theme.spacing($maxHeight)}; flex: 1 1 auto; `; diff --git a/packages/components/src/Dialog/Dialog.tsx b/packages/components/src/Dialog/Dialog.tsx index e340288fc..da92d155f 100644 --- a/packages/components/src/Dialog/Dialog.tsx +++ b/packages/components/src/Dialog/Dialog.tsx @@ -4,7 +4,7 @@ import { PressEvent } from '@react-types/shared'; import { forwardRef, ReactNode } from 'react'; import { XMark } from '@interlay/icons'; import { useDOMRef } from '@interlay/hooks'; -import { DialogSize } from '@interlay/themev2'; +import { DialogSize } from '@interlay/theme'; import { ElementTypeProp } from '../utils/types'; diff --git a/packages/components/src/Dialog/DialogBody.tsx b/packages/components/src/Dialog/DialogBody.tsx index 91612834e..c81291c5d 100644 --- a/packages/components/src/Dialog/DialogBody.tsx +++ b/packages/components/src/Dialog/DialogBody.tsx @@ -1,14 +1,19 @@ +import { Spacing } from '@interlay/theme'; + import { FlexProps } from '../Flex'; import { StyledDialogBody } from './Dialog.style'; -import { useDialogContext } from './DialogContext'; -type DialogBodyProps = FlexProps; +type Props = { + maxHeight?: Spacing; +}; + +type InheritAttrs = Omit; -const DialogBody = ({ direction = 'column', ...props }: DialogBodyProps): JSX.Element => { - const { size } = useDialogContext(); +type DialogBodyProps = Props & InheritAttrs; - return ; +const DialogBody = ({ direction = 'column', maxHeight, ...props }: DialogBodyProps): JSX.Element => { + return ; }; export { DialogBody }; diff --git a/packages/components/src/Dialog/DialogContext.tsx b/packages/components/src/Dialog/DialogContext.tsx index e161f1a9c..f8b4897d7 100644 --- a/packages/components/src/Dialog/DialogContext.tsx +++ b/packages/components/src/Dialog/DialogContext.tsx @@ -1,6 +1,6 @@ import { DOMAttributes } from '@react-types/shared'; import React from 'react'; -import { DialogSize } from '@interlay/themev2'; +import { DialogSize } from '@interlay/theme'; interface DialogConfig { titleProps?: DOMAttributes; diff --git a/packages/components/src/Dialog/DialogFooter.tsx b/packages/components/src/Dialog/DialogFooter.tsx index 0702a39c9..a0347b019 100644 --- a/packages/components/src/Dialog/DialogFooter.tsx +++ b/packages/components/src/Dialog/DialogFooter.tsx @@ -1,16 +1,13 @@ import { FlexProps } from '../Flex'; import { StyledDialogFooter } from './Dialog.style'; -import { useDialogContext } from './DialogContext'; type InheritAttrs = FlexProps; type DialogFooterProps = InheritAttrs; const DialogFooter = (props: DialogFooterProps): JSX.Element => { - const { size } = useDialogContext(); - - return ; + return ; }; export { DialogFooter }; diff --git a/packages/components/src/Dialog/DialogHeader.tsx b/packages/components/src/Dialog/DialogHeader.tsx index b64ca315b..fc3a56c3f 100644 --- a/packages/components/src/Dialog/DialogHeader.tsx +++ b/packages/components/src/Dialog/DialogHeader.tsx @@ -15,10 +15,10 @@ type InheritAttrs = Omit; type DialogHeaderProps = Props & InheritAttrs; const DialogHeader = ({ elementType, children, align = 'start', ...props }: DialogHeaderProps): JSX.Element => { - const { titleProps, size } = useDialogContext(); + const { titleProps } = useDialogContext(); return ( - + {children} ); diff --git a/packages/components/src/Divider/Divider.style.tsx b/packages/components/src/Divider/Divider.style.tsx index 683c62e07..889d69b06 100644 --- a/packages/components/src/Divider/Divider.style.tsx +++ b/packages/components/src/Divider/Divider.style.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { StyledMarginProps } from '@interlay/hooks'; -import { Color, DividerSizes } from '@interlay/themev2'; +import { Color, DividerSizes } from '@interlay/theme'; import { Orientation } from '../../../core/theme/src'; import { marginCSS } from '../utils/margin'; diff --git a/packages/components/src/Divider/Divider.tsx b/packages/components/src/Divider/Divider.tsx index 89a07b7e9..e6972b635 100644 --- a/packages/components/src/Divider/Divider.tsx +++ b/packages/components/src/Divider/Divider.tsx @@ -2,7 +2,7 @@ import { useSeparator } from '@react-aria/separator'; import { mergeProps } from '@react-aria/utils'; import { forwardRef, HTMLAttributes } from 'react'; import { useStyleProps } from '@interlay/hooks'; -import { Color, DividerSizes } from '@interlay/themev2'; +import { Color, DividerSizes } from '@interlay/theme'; import { MarginProps, Orientation } from '../../../core/theme/src'; import { ElementTypeProp } from '../utils/types'; diff --git a/packages/components/src/Drawer/Drawer.stories.tsx b/packages/components/src/Drawer/Drawer.stories.tsx index bc31a0a2a..dba04eea5 100644 --- a/packages/components/src/Drawer/Drawer.stories.tsx +++ b/packages/components/src/Drawer/Drawer.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; -import { CTA } from '..'; +import { Button } from '..'; import { Drawer, DrawerProps } from '.'; @@ -18,7 +18,7 @@ const Render = () => { return ( <> - setOpen(true)}>Open + setOpen(false)}> Drawer diff --git a/packages/components/src/Field/Field.style.tsx b/packages/components/src/Field/Field.style.tsx index b56da511c..1dbe228fa 100644 --- a/packages/components/src/Field/Field.style.tsx +++ b/packages/components/src/Field/Field.style.tsx @@ -1,16 +1,22 @@ -import styled from 'styled-components'; -import { Spacing } from '@interlay/themev2'; +import styled, { CSSProperties } from 'styled-components'; + +import { Flex } from '../Flex'; type StyledFieldProps = { - $maxWidth?: Spacing; + $maxWidth?: CSSProperties['maxWidth']; + $fullWidth?: boolean; }; -const StyledField = styled.div` +const StyledFieldElWrapper = styled.div` position: relative; box-sizing: border-box; display: inline-flex; height: 100%; - max-width: ${({ $maxWidth, theme }) => $maxWidth && theme.spacing($maxWidth)}; `; -export { StyledField }; +const StyledField = styled(Flex)` + max-width: ${({ $maxWidth }) => $maxWidth}; + width: ${({ $fullWidth, $maxWidth }) => ($fullWidth || $maxWidth) && '100%'}; +`; + +export { StyledField, StyledFieldElWrapper }; diff --git a/packages/components/src/Field/Field.tsx b/packages/components/src/Field/Field.tsx index a668f4881..20a1a8b42 100644 --- a/packages/components/src/Field/Field.tsx +++ b/packages/components/src/Field/Field.tsx @@ -1,18 +1,20 @@ import { forwardRef, HTMLAttributes, ReactNode } from 'react'; -import { LabelPosition, Spacing } from '@interlay/themev2'; +import { LabelPosition } from '@interlay/theme'; +import { CSSProperties } from 'styled-components'; import { Flex, FlexProps } from '../Flex'; import { HelperText, HelperTextProps } from '../HelperText'; import { Label, LabelProps } from '../Label'; import { hasError } from '../utils/input'; -import { StyledField } from './Field.style'; +import { StyledField, StyledFieldElWrapper } from './Field.style'; type Props = { label?: ReactNode; labelPosition?: LabelPosition; labelProps?: LabelProps; - maxWidth?: Spacing; + maxWidth?: CSSProperties['maxWidth']; + fullWidth?: boolean; }; type NativeAttrs = Omit, keyof Props>; @@ -33,6 +35,7 @@ const Field = forwardRef( descriptionProps, children, maxWidth, + fullWidth, ...props }, ref @@ -42,7 +45,7 @@ const Field = forwardRef( const element = ( <> - {children} + {children} {hasHelpText && ( ( ); return ( - + {label && ( )} - + ); } ); diff --git a/packages/components/src/Flex/Flex.style.tsx b/packages/components/src/Flex/Flex.style.tsx index 2e79582e8..cec5757f1 100644 --- a/packages/components/src/Flex/Flex.style.tsx +++ b/packages/components/src/Flex/Flex.style.tsx @@ -1,4 +1,4 @@ -import type { AlignItems, AlignSelf, Direction, JustifyContent, Spacing, Wrap } from '@interlay/themev2'; +import type { AlignItems, AlignSelf, Direction, JustifyContent, Spacing, Wrap } from '@interlay/theme'; import { styled } from 'styled-components'; import { StyledMarginProps } from '@interlay/hooks'; diff --git a/packages/components/src/Flex/Flex.tsx b/packages/components/src/Flex/Flex.tsx index b931e07a7..ef3f58710 100644 --- a/packages/components/src/Flex/Flex.tsx +++ b/packages/components/src/Flex/Flex.tsx @@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import { useStyleProps } from '@interlay/hooks'; -import { AlignItems, AlignSelf, Direction, JustifyContent, MarginProps, Spacing, Wrap } from '@interlay/themev2'; +import { AlignItems, AlignSelf, Direction, JustifyContent, MarginProps, Spacing, Wrap } from '@interlay/theme'; import { ElementTypeProp } from '../utils/types'; diff --git a/packages/components/src/Grid/Grid.stories.tsx b/packages/components/src/Grid/Grid.stories.tsx deleted file mode 100644 index 6af771933..000000000 --- a/packages/components/src/Grid/Grid.stories.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta, StoryFn } from '@storybook/react'; - -import { Grid, GridItem, GridProps } from '.'; - -export default { - title: 'Layout/Grid', - component: Grid, - subcomponents: { GridItem } -} as Meta; - -export const Default: StoryFn = (args) => ( - - -

Grid content

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam minima non modi consequuntur corporis est - itaque, exercitationem amet, fugiat optio, facilis repellendus inventore vero perferendis. Possimus porro eaque - facere. -

- - -

Grid content

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam minima non modi consequuntur corporis est - itaque, exercitationem amet, fugiat optio, facilis repellendus inventore vero perferendis. Possimus porro eaque - facere. -

- - -); diff --git a/packages/components/src/Grid/Grid.style.tsx b/packages/components/src/Grid/Grid.style.tsx deleted file mode 100644 index b4775fb27..000000000 --- a/packages/components/src/Grid/Grid.style.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; -import { theme } from '@interlay/theme'; - -export const GridContainer = styled.div` - display: grid; - gap: ${theme.spacing.spacing5}; - grid-template-columns: repeat(4, 1fr); - - @media screen and (min-width: 48em) { - grid-template-columns: repeat(12, 1fr); - } -`; diff --git a/packages/components/src/Grid/Grid.tsx b/packages/components/src/Grid/Grid.tsx deleted file mode 100644 index c3ab5371e..000000000 --- a/packages/components/src/Grid/Grid.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { GridContainer } from './Grid.style'; - -interface GridProps { - children: React.ReactNode; - className?: string; -} - -const Grid = ({ className, children }: GridProps): JSX.Element => ( - {children} -); - -export { Grid }; -export type { GridProps }; diff --git a/packages/components/src/Grid/GridItem.style.tsx b/packages/components/src/Grid/GridItem.style.tsx deleted file mode 100644 index 44e438bf5..000000000 --- a/packages/components/src/Grid/GridItem.style.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components'; - -import { GridItemProps } from './GridItem'; - -export const GridItemContainer = styled.div` - grid-column: ${(props) => - props.mobile.start ? `${props.mobile.start} / span ${props.mobile.span}` : `span ${props.mobile.span}`}; - grid-row: ${(props) => props.mobile.row || 'auto'}; - justify-self: ${(props) => props.mobile.justify || 'auto'}; - - @media (min-width: 48em) { - grid-column: ${(props) => - props.desktop.start ? `${props.desktop.start} / span ${props.desktop.span}` : `span ${props.desktop.span}`}; - grid-row: ${(props) => props.desktop.row || 'auto'}; - justify-self: ${(props) => props.desktop.justify || 'auto'}; - } -`; diff --git a/packages/components/src/Grid/GridItem.tsx b/packages/components/src/Grid/GridItem.tsx deleted file mode 100644 index 3ecdfe568..000000000 --- a/packages/components/src/Grid/GridItem.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { GridItemContainer } from './GridItem.style'; - -type Justify = 'start' | 'center' | 'end'; - -type GridColumnsWide = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; -type GridColumnsNarrow = 1 | 2 | 3 | 4; - -interface GridItemProps extends React.HTMLAttributes { - mobile: { - span: GridColumnsNarrow; - start?: GridColumnsNarrow; - row?: number; - justify?: Justify; - }; - desktop: { - span: GridColumnsWide; - start?: GridColumnsWide; - row?: number; - justify?: Justify; - }; -} - -const GridItem = ({ mobile, desktop, className, children }: GridItemProps): JSX.Element => ( - - {children} - -); - -export { GridItem }; -export type { GridItemProps }; diff --git a/packages/components/src/Grid/__tests__/Grid.test.tsx b/packages/components/src/Grid/__tests__/Grid.test.tsx deleted file mode 100644 index ae83a76f5..000000000 --- a/packages/components/src/Grid/__tests__/Grid.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render } from '@testing-library/react'; - -import { Grid, GridItem } from '..'; - -describe('Grid', () => { - it('should render correctly', () => { - const wrapper = render( - - - item - - - ); - - expect(() => wrapper.unmount()).not.toThrow(); - }); -}); diff --git a/packages/components/src/Grid/index.ts b/packages/components/src/Grid/index.ts deleted file mode 100644 index 4de7077e0..000000000 --- a/packages/components/src/Grid/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type { GridProps } from './Grid'; -export { Grid } from './Grid'; -export type { GridItemProps } from './GridItem'; -export { GridItem } from './GridItem'; diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx index b57347883..f4370a9e7 100644 --- a/packages/components/src/Input/BaseInput.tsx +++ b/packages/components/src/Input/BaseInput.tsx @@ -1,4 +1,4 @@ -import { Spacing, InputSizes } from '@interlay/themev2'; +import { Spacing, InputSizes } from '@interlay/theme'; import { FocusEvent, forwardRef, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react'; import { Field, FieldProps, useFieldProps } from '../Field'; diff --git a/packages/components/src/Input/Input.style.tsx b/packages/components/src/Input/Input.style.tsx index 89d515409..200d7e5b8 100644 --- a/packages/components/src/Input/Input.style.tsx +++ b/packages/components/src/Input/Input.style.tsx @@ -1,4 +1,4 @@ -import { InputSizes, Spacing } from '@interlay/themev2'; +import { InputSizes, Spacing } from '@interlay/theme'; import styled, { css } from 'styled-components'; type BaseInputProps = { @@ -93,6 +93,7 @@ const StyledAdornment = styled.div` position: absolute; // to not allow adornment to take more than 50% of the input. We might want to reduce this in the future. max-width: 50%; + ${({ theme }) => theme.input.adornment}; `; const StyledAdornmentRight = styled(StyledAdornment)` diff --git a/packages/components/src/List/List.style.tsx b/packages/components/src/List/List.style.tsx index 8a2e2c324..65d0df300 100644 --- a/packages/components/src/List/List.style.tsx +++ b/packages/components/src/List/List.style.tsx @@ -1,23 +1,26 @@ -import styled, { css } from 'styled-components'; -import { theme } from '@interlay/theme'; +import styled, { CSSProperties, css } from 'styled-components'; import { Flex } from '../Flex'; -const StyledList = styled(Flex)``; +type StyledListProps = { + $maxHeight?: CSSProperties['maxHeight']; +}; + +const StyledList = styled(Flex)` + max-height: ${({ $maxHeight }) => $maxHeight}; +`; type StyledListItemProps = { $isDisabled: boolean; $isHovered: boolean; - $isInteractable: boolean; + $isInteraButtonble: boolean; $isFocusVisible: boolean; }; const StyledListItem = styled.div` flex: 1; align-self: stretch; - padding: ${theme.spacing.spacing3}; - color: ${theme.colors.textPrimary}; - cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'}; + cursor: ${({ $isInteraButtonble }) => $isInteraButtonble && 'pointer'}; outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'}; opacity: ${({ $isDisabled }) => $isDisabled && 0.5}; white-space: nowrap; diff --git a/packages/components/src/List/List.tsx b/packages/components/src/List/List.tsx index 91b69476c..c471d6d82 100644 --- a/packages/components/src/List/List.tsx +++ b/packages/components/src/List/List.tsx @@ -2,9 +2,9 @@ import { AriaGridListOptions, useGridList } from '@react-aria/gridlist'; import { mergeProps } from '@react-aria/utils'; import { ListProps as StatelyListProps, useListState } from '@react-stately/list'; import { forwardRef } from 'react'; -import { ListVariants } from '@interlay/theme'; import { Selection } from '@react-types/shared'; import { useDOMRef } from '@interlay/hooks'; +import { CSSProperties } from 'styled-components'; import { FlexProps } from '../Flex'; @@ -12,7 +12,7 @@ import { StyledList } from './List.style'; import { ListItem } from './ListItem'; type Props = { - variant?: ListVariants; + maxHeight?: CSSProperties['maxHeight']; }; type InheritAttrs = Omit< @@ -28,7 +28,7 @@ type ListProps = Props & NativeAttrs & InheritAttrs; const List = forwardRef( ( { - variant = 'primary', + maxHeight, direction = 'column', onSelectionChange, selectionMode, @@ -59,12 +59,7 @@ const List = forwardRef( const { gridProps } = useGridList(ariaProps, state, listRef); return ( - + {[...state.collection].map((item) => ( ))} diff --git a/packages/components/src/List/ListItem.tsx b/packages/components/src/List/ListItem.tsx index d7931ade3..386b394c4 100644 --- a/packages/components/src/List/ListItem.tsx +++ b/packages/components/src/List/ListItem.tsx @@ -23,9 +23,9 @@ const ListItem = ({ item, state }: InternalProps): JSX.Elem const ref = useRef(null); const { rowProps, gridCellProps, isDisabled } = useGridListItem({ node: item }, state, ref); - const isInteractable = state.selectionManager.selectionMode !== 'none' && !isDisabled; + const isInteraButtonble = state.selectionManager.selectionMode !== 'none' && !isDisabled; - const { isHovered, hoverProps } = useHover({ isDisabled: !isInteractable }); + const { isHovered, hoverProps } = useHover({ isDisabled: !isInteraButtonble }); const { focusProps, isFocusVisible } = useFocusRing(); const props = useMemo( @@ -40,7 +40,7 @@ const ListItem = ({ item, state }: InternalProps): JSX.Elem $isDisabled={isDisabled} $isFocusVisible={isFocusVisible} $isHovered={isHovered} - $isInteractable={isInteractable} + $isInteraButtonble={isInteraButtonble} > {item.rendered} diff --git a/packages/components/src/Meter/Meter.tsx b/packages/components/src/Meter/Meter.tsx index 7efc91839..06c7652c2 100644 --- a/packages/components/src/Meter/Meter.tsx +++ b/packages/components/src/Meter/Meter.tsx @@ -60,7 +60,7 @@ const Meter = ({ $variant={variant} alignItems='center' direction='column' - gap='spacing1' + gap='xs' justifyContent='center' > diff --git a/packages/components/src/Modal/Modal.stories.tsx b/packages/components/src/Modal/Modal.stories.tsx index 4c54b2a0d..b29b55501 100644 --- a/packages/components/src/Modal/Modal.stories.tsx +++ b/packages/components/src/Modal/Modal.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; -import { CTA } from '../CTA'; +import { Button } from '../Button'; import { Modal, ModalProps } from './Modal'; import { ModalHeader } from './ModalHeader'; @@ -15,7 +15,7 @@ const Render = ({ title, footer, children, ...args }: StoryProps) => { return ( <> - setState(true)}>Open Modal + setState(false)}> {title && ( <> @@ -25,7 +25,7 @@ const Render = ({ title, footer, children, ...args }: StoryProps) => { {children} {footer && ( - Procced + )} @@ -203,3 +203,125 @@ export const ScrollBehaviour: StoryObj = { ) } }; + +export const MaxHeight: StoryObj = { + args: { + title: 'Title', + footer: true, + maxHeight: '400px', + children: ( + <> + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque + nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. + Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + + ) + } +}; diff --git a/packages/components/src/Modal/Modal.style.tsx b/packages/components/src/Modal/Modal.style.tsx index 837df6536..86e658221 100644 --- a/packages/components/src/Modal/Modal.style.tsx +++ b/packages/components/src/Modal/Modal.style.tsx @@ -1,5 +1,5 @@ import styled, { CSSProperties } from 'styled-components'; -import { DialogSize } from '@interlay/themev2'; +import { DialogSize } from '@interlay/theme'; import { overlayCSS } from '../utils/overlay'; import { Dialog, DialogBody } from '../Dialog'; @@ -11,11 +11,11 @@ type StyledWrapperProps = { type StyledModalProps = { $isOpen?: boolean; $size: DialogSize; + $maxHeight?: CSSProperties['maxHeight']; }; type StyledDialogProps = { $isOpen?: boolean; - $maxHeight?: CSSProperties['maxHeight']; }; type StyledModalBodyProps = { @@ -36,6 +36,8 @@ const StyledWrapper = styled.div` align-items: ${({ $placement }) => ($placement === 'center' ? 'center' : 'flex-start')}; `; +//FIXME: on very small screen (height) the modal could overflow when max-heigh is set +// might not need the max-heigh property const StyledModal = styled.div` transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : `translateY(20px)`)}; ${({ $isOpen }) => overlayCSS(!!$isOpen)} @@ -54,11 +56,12 @@ const StyledModal = styled.div` margin: ${({ theme }) => `${theme.spacing('7xl')} ${theme.spacing('xl')}`}; max-width: ${({ theme, $size }) => theme.dialog.size[$size].maxWidth}; width: 100%; + max-height: ${({ theme, $maxHeight }) => $maxHeight || `calc(100dvh - ${theme.spacing('10xl')})`}; `; const StyledDialog = styled(Dialog)` pointer-events: ${({ $isOpen }) => !$isOpen && 'none'}; - max-height: ${({ theme, $maxHeight }) => $maxHeight || `calc(100dvh - ${theme.spacing('10xl')})`}; + max-height: inherit; `; const StyledDialogBody = styled(DialogBody)` diff --git a/packages/components/src/Modal/Modal.tsx b/packages/components/src/Modal/Modal.tsx index d4ce048ea..375e1b77c 100644 --- a/packages/components/src/Modal/Modal.tsx +++ b/packages/components/src/Modal/Modal.tsx @@ -1,6 +1,6 @@ import { forwardRef, useRef } from 'react'; import { useDOMRef } from '@interlay/hooks'; -import { DialogSize } from '@interlay/themev2'; +import { DialogSize } from '@interlay/theme'; import { CSSProperties } from 'styled-components'; import { DialogProps } from '../Dialog'; @@ -64,6 +64,7 @@ const Modal = forwardRef( isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} + maxHeight={maxHeight} placement={placement} shouldCloseOnBlur={shouldCloseOnBlur} shouldCloseOnInteractOutside={handleShouldCloseOnInteractOutside} @@ -71,7 +72,7 @@ const Modal = forwardRef( wrapperRef={wrapperRef} onClose={onClose} > - + {children} diff --git a/packages/components/src/Modal/ModalWrapper.tsx b/packages/components/src/Modal/ModalWrapper.tsx index 5331ed2fe..90a97c3fc 100644 --- a/packages/components/src/Modal/ModalWrapper.tsx +++ b/packages/components/src/Modal/ModalWrapper.tsx @@ -2,7 +2,8 @@ import { AriaModalOverlayProps, AriaOverlayProps, useModalOverlay } from '@react import { mergeProps } from '@react-aria/utils'; import { OverlayTriggerState } from '@react-stately/overlays'; import { forwardRef, ReactNode, RefObject } from 'react'; -import { DialogSize } from '@interlay/themev2'; +import { DialogSize } from '@interlay/theme'; +import { CSSProperties } from 'styled-components'; import { Underlay } from '../Overlay/Underlay'; @@ -15,6 +16,7 @@ type Props = { onClose: () => void; wrapperRef: RefObject; size: DialogSize; + maxHeight?: CSSProperties['maxHeight']; }; type InheritAttrs = Omit; @@ -34,6 +36,7 @@ const ModalWrapper = forwardRef( shouldCloseOnBlur, wrapperRef, size, + maxHeight, ...props }, ref @@ -57,7 +60,13 @@ const ModalWrapper = forwardRef(
- + {children} diff --git a/packages/components/src/Modal/__tests__/Modal.test.tsx b/packages/components/src/Modal/__tests__/Modal.test.tsx index 0ddb069f4..151005e0f 100644 --- a/packages/components/src/Modal/__tests__/Modal.test.tsx +++ b/packages/components/src/Modal/__tests__/Modal.test.tsx @@ -2,14 +2,13 @@ import { render } from '@testing-library/react'; import { createRef } from 'react'; import { testA11y } from '@interlay/test-utils'; -import { Modal, ModalBody, ModalDivider, ModalFooter, ModalHeader } from '..'; +import { Modal, ModalBody, ModalFooter, ModalHeader } from '..'; describe('Modal', () => { it('should render correctly', () => { const wrapper = render( title - body footer @@ -24,7 +23,6 @@ describe('Modal', () => { render( title - body footer @@ -37,7 +35,6 @@ describe('Modal', () => { await testA11y( title - body footer diff --git a/packages/components/src/Popover/Popover.stories.tsx b/packages/components/src/Popover/Popover.stories.tsx index 1ddd4f07c..6c0f19a8a 100644 --- a/packages/components/src/Popover/Popover.stories.tsx +++ b/packages/components/src/Popover/Popover.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { CTA } from '../CTA'; +import { Button } from '../Button'; import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverProps, PopoverTrigger } from '.'; @@ -11,14 +11,14 @@ const Render = ({ title, footer, children, placement = 'left', ...args }: StoryP <> - Open Popover + {title && Popover Header} {children} {footer && ( - Confirm + )} diff --git a/packages/components/src/Popover/PopoverContentWrapper.tsx b/packages/components/src/Popover/PopoverContentWrapper.tsx index 4c81dc2b5..79ec89969 100644 --- a/packages/components/src/Popover/PopoverContentWrapper.tsx +++ b/packages/components/src/Popover/PopoverContentWrapper.tsx @@ -59,7 +59,7 @@ const PopoverContentWrapper = forwardRef {!isNonModal && } - + {children} diff --git a/packages/components/src/Popover/PopoverHeader.tsx b/packages/components/src/Popover/PopoverHeader.tsx index 04ea84f09..c83d9094e 100644 --- a/packages/components/src/Popover/PopoverHeader.tsx +++ b/packages/components/src/Popover/PopoverHeader.tsx @@ -2,7 +2,7 @@ import { DialogHeader, DialogHeaderProps } from '../Dialog'; type PopoverHeaderProps = DialogHeaderProps; -const PopoverHeader = ({ size = 'base', weight = 'semibold', children, ...props }: PopoverHeaderProps): JSX.Element => ( +const PopoverHeader = ({ size = 'md', weight = 'semibold', children, ...props }: PopoverHeaderProps): JSX.Element => ( {children} diff --git a/packages/components/src/ProgressBar/ProgressBar.style.tsx b/packages/components/src/ProgressBar/ProgressBar.style.tsx index abb0a2801..070e54b60 100644 --- a/packages/components/src/ProgressBar/ProgressBar.style.tsx +++ b/packages/components/src/ProgressBar/ProgressBar.style.tsx @@ -1,6 +1,6 @@ import styled, { css } from 'styled-components'; import { theme } from '@interlay/theme'; -import { Color, ProgressBarSize } from '@interlay/themev2'; +import { Color, ProgressBarSize } from '@interlay/theme'; type StyledTrackProps = { $size: ProgressBarSize; diff --git a/packages/components/src/ProgressBar/ProgressBar.tsx b/packages/components/src/ProgressBar/ProgressBar.tsx index f26c12795..5edc5f969 100644 --- a/packages/components/src/ProgressBar/ProgressBar.tsx +++ b/packages/components/src/ProgressBar/ProgressBar.tsx @@ -1,6 +1,6 @@ import { AriaProgressBarProps, useProgressBar } from '@react-aria/progress'; import { CSSProperties } from 'react'; -import { Color, ProgressBarSize } from '@interlay/themev2'; +import { Color, ProgressBarSize } from '@interlay/theme'; import { Flex, FlexProps } from '../Flex'; import { Span } from '../Text'; diff --git a/packages/components/src/Radio/Radio.style.tsx b/packages/components/src/Radio/Radio.style.tsx index 8a1ab16f2..cdefb0892 100644 --- a/packages/components/src/Radio/Radio.style.tsx +++ b/packages/components/src/Radio/Radio.style.tsx @@ -24,8 +24,8 @@ const StyledRadioGroup = styled(Flex)` width: 100%; label { - margin-right: ${({ $orientation, $gap }) => $orientation === 'horizontal' && $gap && theme.spacing[$gap]}; - margin-bottom: ${({ $orientation, $gap }) => $orientation === 'vertical' && $gap && theme.spacing[$gap]}; + margin-right: ${({ $orientation, $gap, theme }) => $orientation === 'horizontal' && $gap && theme.spacing($gap)}; + margin-bottom: ${({ $orientation, $gap, theme }) => $orientation === 'vertical' && $gap && theme.spacing($gap)}; } `; diff --git a/packages/components/src/Radio/RadioGroup.tsx b/packages/components/src/Radio/RadioGroup.tsx index ac9a6a97b..2152d6afb 100644 --- a/packages/components/src/Radio/RadioGroup.tsx +++ b/packages/components/src/Radio/RadioGroup.tsx @@ -41,7 +41,7 @@ const RadioGroup = forwardRef( > ) => { return ( <> - setState(true)}>Open Modal + ); @@ -174,7 +174,7 @@ export const SideLabel: StoryObj = { export const MaxWidth: StoryObj = { args: { - maxWidth: 'spacing28' + maxWidth: '11xl' } }; diff --git a/packages/components/src/Select/Select.style.tsx b/packages/components/src/Select/Select.style.tsx index 877fb81e9..e9f091520 100644 --- a/packages/components/src/Select/Select.style.tsx +++ b/packages/components/src/Select/Select.style.tsx @@ -1,6 +1,6 @@ import styled, { css } from 'styled-components'; import { ChevronDown } from '@interlay/icons'; -import { InputSizes } from '@interlay/themev2'; +import { InputSizes } from '@interlay/theme'; import { List } from '../List'; import { Span } from '../Text'; diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx index 21d5ef6f5..c3acc0915 100644 --- a/packages/components/src/Select/Select.tsx +++ b/packages/components/src/Select/Select.tsx @@ -1,5 +1,5 @@ import { useDOMRef } from '@interlay/hooks'; -import { InputSizes } from '@interlay/themev2'; +import { InputSizes } from '@interlay/theme'; import { useSelect } from '@react-aria/select'; import { mergeProps, useId } from '@react-aria/utils'; import { VisuallyHidden } from '@react-aria/visually-hidden'; @@ -164,7 +164,6 @@ const Select = ( selectedKeys: state.selectedItem?.key ? [state.selectedItem?.key] : [], disabledKeys })} - maxHeight='650px' state={state} /> )} diff --git a/packages/components/src/Select/SelectModal.tsx b/packages/components/src/Select/SelectModal.tsx index cb05738a4..e25e66a9c 100644 --- a/packages/components/src/Select/SelectModal.tsx +++ b/packages/components/src/Select/SelectModal.tsx @@ -2,7 +2,7 @@ import { useId } from '@react-aria/utils'; import { SelectState } from '@react-stately/select'; import { forwardRef, ReactNode } from 'react'; -import { Modal, ModalBody, ModalHeader, ModalProps, P } from '..'; +import { Input, Modal, ModalBody, ModalHeader, ModalProps, P } from '..'; import { ListItem, ListProps } from '../List'; import { StyledList } from './Select.style'; @@ -43,6 +43,7 @@ const SelectModal = forwardRef( {title} + {hasItems ? ( ( -

Stack children

Stack children

CTA +

Stack children

Stack children

 ) } as Meta; diff --git a/packages/components/src/Table/Table.stories.tsx b/packages/components/src/Table/Table.stories.tsx index 793417da3..c1cd13b40 100644 --- a/packages/components/src/Table/Table.stories.tsx +++ b/packages/components/src/Table/Table.stories.tsx @@ -1,14 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; import { ChevronRight } from '@interlay/icons'; -import { CTA } from '../CTA'; +import { Button } from '../Button'; import { ColumnProps, RowProps, Table, TableProps } from '.'; const action = ( - alert('Pressed')}> + ); const columns: ColumnProps[] = [ { name: 'Coin', id: 'coin' }, @@ -42,7 +42,7 @@ export default { export const Default: StoryObj = {}; -export const SelectableRow: StoryObj = { +export const SeleButtonbleRow: StoryObj = { args: { onRowAction: (key) => alert(`Row ${key} selected`) } diff --git a/packages/components/src/Tabs/Tab.tsx b/packages/components/src/Tabs/Tab.tsx index b99540cd5..c6af96523 100644 --- a/packages/components/src/Tabs/Tab.tsx +++ b/packages/components/src/Tabs/Tab.tsx @@ -1,14 +1,14 @@ +import { TabsSize } from '@interlay/theme'; import { useTab } from '@react-aria/tabs'; import { TabListState } from '@react-stately/tabs'; import { AriaTabProps } from '@react-types/tabs'; import { ReactNode, useRef } from 'react'; -import { Sizes } from '@interlay/theme'; import { StyledTab } from './Tabs.style'; type Props = { fullWidth?: boolean; - size: Sizes; + size: TabsSize; }; type InheritProps = { @@ -23,7 +23,7 @@ const Tab = >({ item, state, fullWidth = false, - size = 'small' + size = 'md' }: TabProps): JSX.Element => { const ref = useRef(null); const { tabProps, isDisabled } = useTab(item, state, ref); diff --git a/packages/components/src/Tabs/Tabs.style.tsx b/packages/components/src/Tabs/Tabs.style.tsx index 79788fe90..cf9bffc0f 100644 --- a/packages/components/src/Tabs/Tabs.style.tsx +++ b/packages/components/src/Tabs/Tabs.style.tsx @@ -1,6 +1,6 @@ -import styled from 'styled-components'; -import { theme } from '@interlay/theme'; -import { AlignItems, Sizes } from '@interlay/theme'; +import styled, { css } from 'styled-components'; +import { TabsSize, theme } from '@interlay/theme'; +import { AlignItems } from '@interlay/theme'; import { hideScrollbar } from '../utils/visually-hidden'; @@ -12,7 +12,7 @@ const StyledTabs = styled.div` type TabListWrapperProps = { $fullWidth: boolean; - $size: Sizes; + $size: TabsSize; $align: AlignItems; }; @@ -20,14 +20,14 @@ const TabListWrapper = styled.div` display: ${({ $fullWidth }) => ($fullWidth ? 'flex' : 'inline-flex')}; align-self: ${({ $align, $fullWidth }) => !$fullWidth && $align}; position: relative; - background-color: ${theme.tabs.bg}; - padding: ${({ $size }) => theme.tabs[$size].wrapper.padding}; - border-radius: ${theme.rounded.md}; - border: ${theme.tabs.border}; z-index: 0; max-width: 100%; overflow-x: auto; + ${hideScrollbar()} + + ${({ theme }) => theme.tabs.base}; + ${({ $size, theme }) => theme.tabs.size[$size].base}; `; type TabListProps = { @@ -41,7 +41,7 @@ const TabList = styled.div` type StyledTabProps = { $fullWidth: boolean; - $size: Sizes; + $size: TabsSize; $isDisabled: boolean; }; @@ -50,39 +50,35 @@ const StyledTab = styled.div` display: flex; align-items: center; justify-content: center; - padding: ${({ $size }) => theme.tabs[$size].tab.padding}; - font-size: ${({ $size }) => theme.tabs[$size].tab.text}; - font-weight: ${({ $size }) => theme.tabs[$size].tab.fontWeight}; text-align: center; cursor: ${({ $isDisabled }) => !$isDisabled && 'pointer'}; user-select: none; outline: none; - border-radius: ${theme.rounded.rg}; - color: ${theme.tabs.color}; - // TODO: have this transition into theme - transition: color 150ms; opacity: ${({ $isDisabled }) => $isDisabled && '.5'}; overflow: hidden; - &[aria-selected='true'] { - color: ${theme.tabs.active.color}; - } + ${({ theme, $size }) => { + return css` + ${theme.tabs.item.base} + ${theme.tabs.size[$size].item} + `; + }}; `; type TabSelectionProps = { $isFocusVisible: boolean; $width: number; $transform: string; - $size: Sizes; + $size: TabsSize; }; const TabSelection = styled.div` position: absolute; - top: ${({ $size }) => theme.tabs[$size].selection.padding}; - bottom: ${({ $size }) => theme.tabs[$size].selection.padding}; + top: ${({ $size, theme }) => theme.tabs.size[$size].base.padding}; + bottom: ${({ $size, theme }) => theme.tabs.size[$size].base.padding}; left: 0; - border-radius: ${theme.rounded.rg}; - background-color: ${theme.tabs.active.bg}; + border-radius: ${({ theme }) => theme.tabs.item.base.borderRadius}; + background-color: ${({ theme }) => theme.tabs.item.base.backgroundColor}; will-change: transform, width; transition: transform ${theme.transition.duration.duration150}ms, @@ -92,19 +88,27 @@ const TabSelection = styled.div` width: ${(props) => props.$width}px; transform: ${(props) => props.$transform}; + ${({ theme }) => { + return css` + ${theme.tabs.item.selected} + `; + }}; + ${(props) => props.$isFocusVisible && - `&:after { - content: ''; - position: absolute; - top: -4px; - left: -4px; - right: -4px; - bottom: -4px; - border-radius: ${theme.rounded.md}; - border: 2px solid ${theme.tabs.active.bg}; - z-index: 3; - }`} + css` + &:after { + content: ''; + position: absolute; + top: -4px; + left: -4px; + right: -4px; + bottom: -4px; + border-radius: ${theme.rounded.md}; + border: 2px solid ${theme.tabs.active.bg}; + z-index: 3; + } + `} `; export { StyledTab, StyledTabs, TabList, TabListWrapper, TabSelection }; diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx index 8210552e6..e650daab6 100644 --- a/packages/components/src/Tabs/Tabs.tsx +++ b/packages/components/src/Tabs/Tabs.tsx @@ -1,11 +1,11 @@ +import { useDOMRef } from '@interlay/hooks'; +import { AlignItems, TabsSize } from '@interlay/theme'; import { useFocusRing } from '@react-aria/focus'; import { useTabList } from '@react-aria/tabs'; import { mergeProps } from '@react-aria/utils'; import { useTabListState } from '@react-stately/tabs'; import { CollectionChildren, Key } from '@react-types/shared'; -import { forwardRef, HTMLAttributes, useEffect, useState } from 'react'; -import { AlignItems, Sizes } from '@interlay/theme'; -import { useDOMRef } from '@interlay/hooks'; +import { HTMLAttributes, forwardRef, useEffect, useState } from 'react'; import { Tab } from './Tab'; import { TabPanel } from './TabPanel'; @@ -18,7 +18,7 @@ type Props = { disabledKeys?: Key[]; panel?: React.ReactNode; fullWidth?: boolean; - size?: Sizes; + size?: TabsSize; align?: AlignItems; }; @@ -28,7 +28,7 @@ type TabsProps = Props & NativeAttrs; const Tabs = forwardRef( ( - { children, className, style, panel, fullWidth = false, size = 'small', align = 'flex-start', ...props }, + { children, className, style, panel, fullWidth = false, size = 'md', align = 'flex-start', ...props }, ref ): JSX.Element => { const ariaProps = { children: children as CollectionChildren>, ...props }; diff --git a/packages/components/src/Text/Dl/Dl.style.tsx b/packages/components/src/Text/Dl/Dl.style.tsx index 3e226af2a..5a40075af 100644 --- a/packages/components/src/Text/Dl/Dl.style.tsx +++ b/packages/components/src/Text/Dl/Dl.style.tsx @@ -1,14 +1,13 @@ import styled from 'styled-components'; -import { resolveColor } from '@interlay/theme'; import { TextProps } from '../types'; const StyledDt = styled.dt` - color: ${({ color }) => resolveColor(color)}; + color: ${({ color, theme }) => color && theme.color(color)}; `; const StyledDd = styled.dd` - color: ${({ color }) => resolveColor(color)}; + color: ${({ color, theme }) => color && theme.color(color)}; `; export { StyledDd, StyledDt }; diff --git a/packages/components/src/Text/Dl/Dt.tsx b/packages/components/src/Text/Dl/Dt.tsx index 2f7c0c65f..d1f852d41 100644 --- a/packages/components/src/Text/Dl/Dt.tsx +++ b/packages/components/src/Text/Dl/Dt.tsx @@ -7,9 +7,7 @@ import { mapTextProps } from '../utils'; type DtProps = TextProps; const Dt = forwardRef( - ({ color = 'tertiary', ...props }, ref): JSX.Element => ( - - ) + ({ color = 'light', ...props }, ref): JSX.Element => ); Dt.displayName = 'Dt'; diff --git a/packages/components/src/Text/style.tsx b/packages/components/src/Text/style.tsx index cddd50e71..56a872c06 100644 --- a/packages/components/src/Text/style.tsx +++ b/packages/components/src/Text/style.tsx @@ -1,8 +1,8 @@ -import { Color, FontWeight, NormalAlignments, Typography } from '@interlay/themev2'; +import { Color, FontWeight, NormalAlignments, Typography } from '@interlay/theme'; import styled, { css } from 'styled-components'; type StyledTextProps = { - $color: Color; + $color: Color | 'inherit'; $size: Typography; $weight: FontWeight; $align?: NormalAlignments; @@ -12,7 +12,7 @@ type StyledTextProps = { const Text = styled.p` ${({ theme, $size }) => theme.typography($size)} - color: ${({ theme, $color }) => theme.color($color)}; + color: ${({ theme, $color }) => ($color === 'inherit' ? 'inherit' : theme.color($color))}; font-weight: ${({ theme, $weight }) => theme.fontWeight($weight)}; text-align: ${({ $align }) => $align}; white-space: ${({ $noWrap }) => $noWrap && 'nowrap'}; diff --git a/packages/components/src/Text/types.ts b/packages/components/src/Text/types.ts index 34b36b5de..245489dd5 100644 --- a/packages/components/src/Text/types.ts +++ b/packages/components/src/Text/types.ts @@ -1,10 +1,10 @@ import { HTMLAttributes } from 'react'; -import { Color, FontSize, FontWeight } from '@interlay/themev2'; +import { Color, FontSize, FontWeight } from '@interlay/theme'; import { NormalAlignments } from '../../../core/theme/src'; type Props = { - color?: Color; + color?: Color | 'inherit'; size?: FontSize; align?: NormalAlignments; weight?: FontWeight; diff --git a/packages/components/src/TextLink/TextLink.style.tsx b/packages/components/src/TextLink/TextLink.style.tsx index 601e16553..0eac3d312 100644 --- a/packages/components/src/TextLink/TextLink.style.tsx +++ b/packages/components/src/TextLink/TextLink.style.tsx @@ -1,22 +1,20 @@ import styled from 'styled-components'; import { ArrowTopRightOnSquare } from '@interlay/icons'; -import { theme, resolveColor, resolveHeight } from '@interlay/theme'; -import { Colors, FontSize, FontWeight } from '@interlay/theme'; +import { Color, FontWeight, Typography } from '@interlay/theme'; type BaseTextLinkProps = { - $color?: Colors; + $color: Color; $isQuiet?: boolean; - $size?: FontSize; + $size: Typography; $weight?: FontWeight; }; const BaseTextLink = styled.a` display: inline-flex; align-items: center; - color: ${({ $color }) => resolveColor($color)}; - font-size: ${({ $size }) => $size && theme.text[$size]}; - line-height: ${({ $size }) => resolveHeight($size)}; - font-weight: ${({ $weight }) => $weight && theme.fontWeight[$weight]}; + color: ${({ $color, theme }) => $color && theme.color($color)}; + ${({ $size, theme }) => $size && theme.typography($size)}; + font-weight: ${({ $weight, theme }) => $weight && theme.fontWeight($weight)}; text-decoration: ${(props) => (props.$isQuiet ? 'none' : 'underline')}; &:hover, @@ -26,7 +24,7 @@ const BaseTextLink = styled.a` `; const StyledIcon = styled(ArrowTopRightOnSquare)` - margin-left: ${theme.spacing.spacing2}; + margin-left: ${({ theme }) => theme.spacing('s')}; width: 1em; height: 1em; color: inherit; diff --git a/packages/components/src/TextLink/TextLink.tsx b/packages/components/src/TextLink/TextLink.tsx index 754caeeed..cc1ae78cd 100644 --- a/packages/components/src/TextLink/TextLink.tsx +++ b/packages/components/src/TextLink/TextLink.tsx @@ -1,16 +1,16 @@ import { AriaLinkOptions, useLink } from '@react-aria/link'; import { mergeProps } from '@react-aria/utils'; import { AnchorHTMLAttributes, forwardRef } from 'react'; -import { Colors, FontSize, FontWeight } from '@interlay/theme'; +import { Color, FontWeight, Typography } from '@interlay/theme'; import { useDOMRef } from '@interlay/hooks'; import { BaseTextLink, StyledIcon } from './TextLink.style'; type Props = { - color?: Colors; + color?: Color; external?: boolean; isQuiet?: boolean; - size?: FontSize; + size?: Typography; weight?: FontWeight; icon?: boolean; }; @@ -21,10 +21,10 @@ type NativeAttrs = Omit, keyof Props & AriaAttrs>; type TextLinkProps = Props & NativeAttrs & AriaAttrs; -// TODO: merge this with CTALink +// TODO: merge this with ButtonLink const TextLink = forwardRef( ( - { color = 'primary', external, isQuiet, size, weight, icon, children, href, className, ...props }, + { color = 'light', external, isQuiet, size = 'md', weight, icon, children, href, className, ...props }, ref ): JSX.Element => { const linkRef = useDOMRef(ref); diff --git a/packages/components/src/TokenInput/BaseTokenInput.style.tsx b/packages/components/src/TokenInput/BaseTokenInput.style.tsx index 09baed4b4..247c05c95 100644 --- a/packages/components/src/TokenInput/BaseTokenInput.style.tsx +++ b/packages/components/src/TokenInput/BaseTokenInput.style.tsx @@ -1,4 +1,4 @@ -import { InputSizes, TokenInputSize } from '@interlay/themev2'; +import { InputSizes, TokenInputSize } from '@interlay/theme'; import styled, { css } from 'styled-components'; import { Flex } from '../Flex'; @@ -40,6 +40,8 @@ const StyledBaseInput = styled.input` padding-left: ${paddingLeft}; padding-right: ${paddingRight}; + position: relative; + ${sizeCss} ${theme.input.base} ${$hasError && theme.input.error.base} @@ -52,7 +54,6 @@ const StyledBaseInput = styled.input` } &:focus:not(:disabled) { - z-index: 1; ${$hasError ? theme.input.error.focus : theme.input.focus} } @@ -74,7 +75,7 @@ const StyledUSDAdornment = styled.span` overflow: hidden; max-width: -webkit-fill-available; text-overflow: ellipsis; - ${({ theme, $size }) => theme.tokenInput.size[$size].addornment.bottom} + ${({ theme }) => theme.tokenInput.addorment.usd} `; type StyledAdornmentProps = { @@ -90,11 +91,23 @@ const StyledAdornment = styled.div` bottom: ${({ theme }) => theme.spacing('s')}; overflow: hidden; max-width: ${({ theme, $size }) => `calc(100% - (2 *${theme.input.size[$size].paddingLeft}))`}; - z-index: 2; + z-index: 1; + z-index: 5; + + pointer-events: none; +`; + +const StyledGroupInputWrapper = styled(Flex)` + input:focus, + button:focus, + input:hover, + button:hover { + z-index: 5; + } `; -const StyledInputWrapper = styled(Flex)` +const StyledNumberInputWrapper = styled.div` position: relative; `; -export { StyledBaseInput, StyledAdornment, StyledUSDAdornment, StyledInputWrapper }; +export { StyledBaseInput, StyledAdornment, StyledUSDAdornment, StyledNumberInputWrapper, StyledGroupInputWrapper }; diff --git a/packages/components/src/TokenInput/BaseTokenInput.tsx b/packages/components/src/TokenInput/BaseTokenInput.tsx index 11996077c..f65a2abe8 100644 --- a/packages/components/src/TokenInput/BaseTokenInput.tsx +++ b/packages/components/src/TokenInput/BaseTokenInput.tsx @@ -1,16 +1,22 @@ import { useCurrencyFormatter, useDOMRef } from '@interlay/hooks'; -import { Spacing, TokenInputSize } from '@interlay/themev2'; +import { Spacing, TokenInputSize } from '@interlay/theme'; import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield'; import { mergeProps } from '@react-aria/utils'; import { ChangeEventHandler, FocusEvent, forwardRef, ReactNode, useCallback, useEffect, useState } from 'react'; -import { HelperTextProps } from 'src/HelperText'; -import { LabelProps } from 'src/Label'; +import { HelperTextProps } from '../HelperText'; +import { LabelProps } from '../Label'; import { Field, FieldProps, useFieldProps } from '../Field'; import { Flex } from '../Flex'; import { hasError } from '../utils/input'; -import { StyledAdornment, StyledBaseInput, StyledInputWrapper, StyledUSDAdornment } from './BaseTokenInput.style'; +import { + StyledAdornment, + StyledBaseInput, + StyledGroupInputWrapper, + StyledNumberInputWrapper, + StyledUSDAdornment +} from './BaseTokenInput.style'; import { TokenInputLabel } from './TokenInputLabel'; const escapeRegExp = (string: string): string => { @@ -108,9 +114,9 @@ const BaseTokenInput = forwardRef( const hasLabel = !!label || !!balance; // FIXME: move this into Field - const { fieldProps: styleFieldProps } = useFieldProps({ ...props, descriptionProps, errorMessageProps }); + const { fieldProps: styleFieldProps } = useFieldProps({ ...props, descriptionProps, errorMessageProps } as any); - const error = hasError({ isInvalid, errorMessage: props.errorMessage }); + const error = hasError({ isInvalid, errorMessage: props.errorMessage } as any); const bottomAdornment = valueUSD !== undefined && ( @@ -126,18 +132,20 @@ const BaseTokenInput = forwardRef( {label} )} - - - {bottomAdornment} + + + + {bottomAdornment} + {endAdornment} - + {children} diff --git a/packages/components/src/TokenInput/SelectableTokenInput.tsx b/packages/components/src/TokenInput/SelectableTokenInput.tsx index 303f8853b..ac5d01c26 100644 --- a/packages/components/src/TokenInput/SelectableTokenInput.tsx +++ b/packages/components/src/TokenInput/SelectableTokenInput.tsx @@ -4,8 +4,8 @@ import { Key, ReactNode, forwardRef, useEffect, useState } from 'react'; import { HelperText } from '../HelperText'; import { BaseTokenInput, BaseTokenInputProps } from './BaseTokenInput'; -import { TokenSelect, TokenSelectProps } from './TokenSelect'; import { TokenInputBalance } from './TokenInputBalance'; +import { TokenSelect, TokenSelectProps } from './TokenSelect'; type Props = { balance?: string | number; @@ -32,6 +32,7 @@ const SelectableTokenInput = forwardRef diff --git a/packages/components/src/TokenInput/TokenAdornment.tsx b/packages/components/src/TokenInput/TokenAdornment.tsx index ab3b04a08..ff065e0ed 100644 --- a/packages/components/src/TokenInput/TokenAdornment.tsx +++ b/packages/components/src/TokenInput/TokenAdornment.tsx @@ -1,4 +1,4 @@ -import { TokenInputSize } from '@interlay/themev2'; +import { TokenInputSize } from '@interlay/theme'; import { FlexProps } from '../Flex'; diff --git a/packages/components/src/TokenInput/TokenInput.style.tsx b/packages/components/src/TokenInput/TokenInput.style.tsx index e5001ee72..7240be28c 100644 --- a/packages/components/src/TokenInput/TokenInput.style.tsx +++ b/packages/components/src/TokenInput/TokenInput.style.tsx @@ -1,11 +1,8 @@ -import styled from 'styled-components'; -import { ChevronDown } from '@interlay/icons'; -import { theme } from '@interlay/theme'; -import { TokenInputSize } from '@interlay/themev2'; +import styled, { css } from 'styled-components'; +import { TokenInputSize } from '@interlay/theme'; import { UnstyledButton } from '../UnstyledButton'; import { Flex } from '../Flex'; -import { List } from '../List'; import { StyledTrigger } from '../Select/Select.style'; import { Span } from '../Text'; @@ -24,12 +21,15 @@ const StyledTicker = styled.span` `; const StyledTokenAdornment = styled(Flex)` - ${({ theme, $size }) => theme.tokenInput.size[$size].addornment.token.base} + ${({ theme, $size }) => css` + ${theme.tokenInput.addorment.token.base} + ${theme.tokenInput.size[$size].addornment.token.base} + `} `; const StyledTokenImg = styled.img` ${({ theme, $size }) => theme.tokenInput.size[$size].addornment.token.img} - border-radius: ${theme.rounded.full}; + border-radius: ${({ theme }) => theme.rounded('full')}; `; const StyledTokenSelect = styled(StyledTrigger)` @@ -37,28 +37,30 @@ const StyledTokenSelect = styled(StyledTrigger)` border-bottom-left-radius: 0; overflow: hidden; margin-left: -1px; - max-width: 150px; - width: 100%; -`; - -const StyledChevronDown = styled(ChevronDown)` - margin-left: ${theme.spacing.spacing1}; `; const StyledListItemLabel = styled(Span)` - color: ${({ $isSelected }) => - $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text}; text-overflow: ellipsis; overflow: hidden; -`; -const StyledList = styled(List)` - overflow: auto; - padding: 0 ${theme.spacing.spacing4} ${theme.spacing.spacing2} ${theme.spacing.spacing4}; + ${({ theme, $isSelected }) => { + return css` + ${theme.tokenInput.list.item.ticker} + ${$isSelected && theme.tokenInput.list.item.selected.ticker} + `; + }} `; -const StyledListHeader = styled(Flex)` - padding: ${theme.spacing.spacing2} ${theme.spacing.spacing4}; +const StyledListItemUsd = styled(Span)` + text-overflow: ellipsis; + overflow: hidden; + + ${({ theme, $isSelected }) => { + return css` + ${theme.tokenInput.list.item.usd} + ${$isSelected && theme.tokenInput.list.item.selected.usd} + `; + }} `; const StyledListTokenWrapper = styled(Flex)` @@ -77,14 +79,12 @@ const StyledBalanceLabel = styled(Span)` export { StyledBalanceLabel, - StyledChevronDown, - StyledList, - StyledListHeader, StyledListItemLabel, StyledListTokenWrapper, StyledTicker, StyledBalanceButton, StyledTokenAdornment, StyledTokenSelect, - StyledTokenImg + StyledTokenImg, + StyledListItemUsd }; diff --git a/packages/components/src/TokenInput/TokenListItem.tsx b/packages/components/src/TokenInput/TokenListItem.tsx index 5f37cd968..cde246d24 100644 --- a/packages/components/src/TokenInput/TokenListItem.tsx +++ b/packages/components/src/TokenInput/TokenListItem.tsx @@ -2,9 +2,8 @@ import { useCurrencyFormatter } from '@interlay/hooks'; import { Flex } from '../Flex'; import { useSelectModalContext } from '../Select/SelectModalContext'; -import { Span } from '../Text'; -import { StyledListItemLabel, StyledListTokenWrapper, StyledTokenImg } from './TokenInput.style'; +import { StyledListItemLabel, StyledListItemUsd, StyledListTokenWrapper, StyledTokenImg } from './TokenInput.style'; import { TokenData } from './TokenSelect'; type TokenListItemProps = { isDisabled?: boolean } & TokenData; @@ -15,15 +14,15 @@ const TokenListItem = ({ balance, balanceUSD, ticker, logoUrl, isDisabled }: Tok return ( <> - - + + {ticker} - + {balance} - + {format(balanceUSD)} - + ); diff --git a/packages/components/src/TokenInput/TokenSelect.tsx b/packages/components/src/TokenInput/TokenSelect.tsx index 1db0f50bf..889d5d942 100644 --- a/packages/components/src/TokenInput/TokenSelect.tsx +++ b/packages/components/src/TokenInput/TokenSelect.tsx @@ -1,8 +1,8 @@ import { mergeProps } from '@react-aria/utils'; +import { Span } from '../Text'; import { Flex } from '../Flex'; import { Item, ModalSelectProps, Select } from '../Select'; -import { Span } from '../Text'; import { StyledTicker, StyledTokenImg, StyledTokenSelect } from './TokenInput.style'; import { TokenListItem } from './TokenListItem'; @@ -23,15 +23,21 @@ type TokenData = { type TokenSelectProps = Omit, 'children' | 'type'>; -const TokenSelect = ({ modalProps, ...props }: TokenSelectProps): JSX.Element => ( +const TokenSelect = ({ modalProps, value, ...props }: TokenSelectProps): JSX.Element => ( {...props} aria-label='select token' asSelectTrigger={StyledTokenSelect} - modalProps={mergeProps({ title: 'Select Token' }, modalProps)} - placeholder={Select Token} + maxWidth={value ? '6.75rem' : '7.5rem'} + modalProps={mergeProps({ title: 'Select Token', listProps: { maxHeight: '32rem' } }, modalProps)} + placeholder={ + + Select token + + } renderValue={(item) => } type='modal' + value={value} > {(data: TokenData) => ( diff --git a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx index 4b46bb8b6..5cbe7e42f 100644 --- a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx +++ b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx @@ -7,7 +7,7 @@ import { TokenInput } from '..'; describe('TokenInput', () => { it('should render correctly', () => { - const wrapper = render(); + const wrapper = render(); expect(() => wrapper.unmount()).not.toThrow(); }); @@ -15,28 +15,28 @@ describe('TokenInput', () => { it('ref should be forwarded', () => { const ref = createRef(); - render(); + render(); expect(ref.current).not.toBeNull(); }); it('should pass a11y', async () => { - await testA11y(); + await testA11y(); }); it('should render with placeholder', () => { - render(); + render(); expect(screen.getByPlaceholderText('0')).toBeInTheDocument(); }); it('should render with usd value', () => { - render(); + render(); expect(screen.getByText('$10.00')).toBeInTheDocument(); }); it('should render with default value', () => { - render(); + render(); expect(screen.getByRole('textbox', { name: /label/i })).toHaveValue('10'); }); @@ -47,7 +47,7 @@ describe('TokenInput', () => { const handleValueChange = (value?: string | number) => setValue(value?.toString() || ''); - return ; + return ; }; render(); @@ -64,20 +64,20 @@ describe('TokenInput', () => { }); it('should render description', () => { - render(); + render(); expect(screen.getByRole('textbox', { name: /label/i })).toHaveAccessibleDescription(/please select token$/i); }); describe('balance', () => { it('should render', () => { - render(); + render(); expect(screen.getByRole('definition')).toHaveTextContent('10'); }); it('should render human value', () => { - render(); + render(); expect(screen.getByRole('definition')).toHaveTextContent('11'); }); @@ -91,6 +91,7 @@ describe('TokenInput', () => { balance={10} humanBalance={11} label='label' + logoUrl='' ticker='BTC' onClickBalance={handleClickBalance} onValueChange={handleValueChange} @@ -114,7 +115,14 @@ describe('TokenInput', () => { const handleBlur = jest.fn(); render( - + ); userEvent.type(screen.getByRole('textbox', { name: /label/i }), '1'); @@ -140,7 +148,14 @@ describe('TokenInput', () => { const handleClickBalance = jest.fn(); render( - + ); expect(screen.getByRole('button', { name: /apply max balance/i })).toBeDisabled(); @@ -149,7 +164,9 @@ describe('TokenInput', () => { it('should have max btn disabled when input is disabled', async () => { const handleClickBalance = jest.fn(); - render(); + render( + + ); expect(screen.getByRole('button', { name: /apply max balance/i })).toBeDisabled(); }); @@ -157,44 +174,38 @@ describe('TokenInput', () => { describe('fixed type', () => { it('should render with ticker adornment', () => { - render(); + render(); expect(screen.getAllByText(/btc/i)).toHaveLength(2); }); it('should render with unknown ticker', () => { - render(); + render(); expect(screen.getAllByText(/abc/i)).toHaveLength(2); }); - - it('should render with multi ticker', () => { - render(); - - expect(screen.getAllByText(/custom/i)).toHaveLength(2); - }); }); - describe('selectable type', () => { + describe('seleButtonble type', () => { const items = [ - { balance: 1, value: 'BTC', balanceUSD: 10000 }, - { balance: 2, value: 'ETH', balanceUSD: 900 } + { balance: 1, ticker: 'BTC', balanceUSD: 10000, logoUrl: '' }, + { balance: 2, ticker: 'ETH', balanceUSD: 900, logoUrl: '' } ]; it('should render correctly', async () => { - const wrapper = render(); + const wrapper = render(); expect(() => wrapper.unmount()).not.toThrow(); }); it('should pass a11y', async () => { - await testA11y(); + await testA11y(); }); it('ref should be forwarded to the modal', async () => { const ref = createRef(); - render(); + render(); userEvent.click(screen.getByRole('button', { name: /select token/i })); @@ -206,13 +217,13 @@ describe('TokenInput', () => { }); it('should render empty value', () => { - render(); + render(); expect(screen.getByRole('button', { name: /select token/i })).toHaveTextContent(/select token$/i); }); it('should render default value', () => { - render(); + render(); expect(screen.getByRole('button', { name: /select token/i })).toHaveTextContent('BTC'); }); @@ -227,7 +238,7 @@ describe('TokenInput', () => { ); }; @@ -255,7 +266,7 @@ describe('TokenInput', () => { it('should render description', () => { render( - + ); expect(screen.getByRole('button', { name: /select token/i })).toHaveAccessibleDescription( @@ -265,7 +276,11 @@ describe('TokenInput', () => { it('should render select error message', () => { render( - + ); expect(screen.getByRole('button', { name: /select token/i })).toHaveAccessibleDescription( diff --git a/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx b/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx index 0e31db7e2..ed35775c2 100644 --- a/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx +++ b/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx @@ -26,7 +26,7 @@ export default { ticker: { control: 'select', options: Object.keys(coins) } }, args: { - type: 'selectable', + type: 'seleButtonble', label: 'Amount', selectProps: { items @@ -34,9 +34,9 @@ export default { } } as Meta; -export const Selectable: StoryObj = {}; +export const SeleButtonble: StoryObj = {}; -export const SelectableDefaultValue: StoryObj = { +export const SeleButtonbleDefaultValue: StoryObj = { args: { selectProps: { defaultValue: 'BTC', @@ -52,23 +52,24 @@ const ControlledSelectComponent = (args: any) => { ); }; -export const SelectableControlledValue: StoryObj = { +export const SeleButtonbleControlledValue: StoryObj = { render: ControlledSelectComponent }; -export const SelectableWithBalance: StoryObj = { +export const SeleButtonbleWithBalance: StoryObj = { args: { balance: '10', - valueUSD: '0' + valueUSD: 0, + size: 's' } }; -export const SelectableDescription: StoryObj = { +export const SeleButtonbleDescription: StoryObj = { args: { selectProps: { items, @@ -77,7 +78,7 @@ export const SelectableDescription: StoryObj = { } }; -export const SelectableErrorMessage: StoryObj = { +export const SeleButtonbleErrorMessage: StoryObj = { args: { selectProps: { items, diff --git a/packages/components/src/Tooltip/Tooltip.stories.tsx b/packages/components/src/Tooltip/Tooltip.stories.tsx index cc78cf00e..31c854db2 100644 --- a/packages/components/src/Tooltip/Tooltip.stories.tsx +++ b/packages/components/src/Tooltip/Tooltip.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; -import { CTA } from '../CTA'; +import { Button } from '../Button'; import { Tooltip, TooltipProps } from '.'; @@ -12,7 +12,7 @@ export default { }, render: (args) => ( - Hover Me + ), args: { diff --git a/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx b/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx index ac084b549..6b5bcbe66 100644 --- a/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx +++ b/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx @@ -2,11 +2,11 @@ import { render } from '@testing-library/react'; import { createRef } from 'react'; import { testA11y } from '@interlay/test-utils'; -import { CTA } from '..'; +import { UnstyledButton } from '..'; -describe('CTA', () => { +describe('UnstyledButton', () => { it('should render correctly', () => { - const wrapper = render(Button); + const wrapper = render(Button); expect(() => wrapper.unmount()).not.toThrow(); }); @@ -14,12 +14,12 @@ describe('CTA', () => { it('ref should be forwarded', () => { const ref = createRef(); - render(Button); + render(Button); expect(ref.current).not.toBeNull(); }); it('should pass a11y', async () => { - await testA11y(Button); + await testA11y(Button); }); }); diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 040431128..e64b57f02 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -6,8 +6,6 @@ export type { AlertProps } from './Alert'; export { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs'; export type { BreadcrumbItemProps, BreadcrumbsProps } from './Breadcrumbs'; export { CSSReset } from './CSSReset'; -export { CTA, CTALink } from './CTA'; -export type { CTALinkProps, CTAProps } from './CTA'; export { Card } from './Card'; export type { CardProps } from './Card'; export { Divider } from './Divider'; @@ -18,8 +16,6 @@ export { Field, useFieldProps } from './Field'; export type { FieldProps } from './Field'; export { Flex } from './Flex'; export type { FlexProps } from './Flex'; -export { Grid, GridItem } from './Grid'; -export type { GridItemProps, GridProps } from './Grid'; export { Input } from './Input'; export type { InputProps } from './Input'; export { Label } from './Label'; diff --git a/packages/components/src/types/styled-components.d.ts b/packages/components/src/types/styled-components.d.ts index b69c7ca19..532240058 100644 --- a/packages/components/src/types/styled-components.d.ts +++ b/packages/components/src/types/styled-components.d.ts @@ -1,4 +1,4 @@ -import { Theme } from '@interlay/themev2'; +import { Theme } from '@interlay/theme'; declare module 'styled-components' { export interface DefaultTheme extends Theme {} diff --git a/packages/components/src/utils/margin.ts b/packages/components/src/utils/margin.ts index d354bd99c..b3e052821 100644 --- a/packages/components/src/utils/margin.ts +++ b/packages/components/src/utils/margin.ts @@ -1,8 +1,6 @@ -import { StyledMarginProps } from '@interlay/hooks'; -import { Theme } from '@interlay/themev2'; import { css } from 'styled-components'; -const marginCSS = ({ theme, ...props }: StyledMarginProps & { theme: Theme }) => { +const marginCSS = ({ theme, ...props }: any) => { const marginTop = props.$marginTop || props.$marginY; const marginBottom = props.$marginBottom || props.$marginY; const marginLeft = props.$marginLeft || props.$marginX; diff --git a/packages/components/src/utils/overlay.ts b/packages/components/src/utils/overlay.ts index ed0a3e9e1..9663339d6 100644 --- a/packages/components/src/utils/overlay.ts +++ b/packages/components/src/utils/overlay.ts @@ -1,25 +1,24 @@ +import { Placement } from '@interlay/theme'; import { css } from 'styled-components'; -import { Placement, theme } from '../../../core/theme/src'; - const getOverlayPlacementCSS = (placement: Placement) => { switch (placement) { case 'bottom': return css` - transform: translateY(${theme.overlay.placement.transform}); + transform: translateY(6px); `; case 'right': return css` - transform: translateX(${theme.overlay.placement.transform}); + transform: translateX(6px); `; case 'left': return css` - transform: translateX(calc(${theme.overlay.placement.transform} * -1)); + transform: translateX(-6px); `; case 'top': default: return css` - transform: translateY(calc(${theme.overlay.placement.transform} * -1)); + transform: translateY(-6px); `; } }; @@ -29,9 +28,9 @@ const overlayCSS = (isOpen: boolean) => css` opacity: ${isOpen ? 1 : 0}; pointer-events: ${isOpen ? 'auto' : 'none'}; transition: - transform ${theme.transition.duration.duration100}ms ease-in-out, - opacity ${theme.transition.duration.duration100}ms ease-in-out, - visibility 0ms linear ${theme.transition.duration.duration100}ms; + transform 100ms ease-in-out, + opacity 100ms ease-in-out, + visibility 0ms linear 100ms; `; export { getOverlayPlacementCSS, overlayCSS }; diff --git a/packages/components/src/utils/visually-hidden.ts b/packages/components/src/utils/visually-hidden.ts index b36e7c274..d6b9d57d6 100644 --- a/packages/components/src/utils/visually-hidden.ts +++ b/packages/components/src/utils/visually-hidden.ts @@ -1,8 +1,6 @@ -import type { DefaultTheme, RuleSet } from 'styled-components'; - import { css } from 'styled-components'; -const hideScrollbar = (): RuleSet => css` +const hideScrollbar = () => css` &::-webkit-scrollbar { display: none; } diff --git a/packages/core/system/src/provider.tsx b/packages/core/system/src/provider.tsx index 3a0039ff3..460811674 100644 --- a/packages/core/system/src/provider.tsx +++ b/packages/core/system/src/provider.tsx @@ -18,13 +18,15 @@ interface InterlayUIProviderProps extends Omit { const InterlayUIProvider: React.FC = ({ children, locale = 'en-US', - theme = {}, + theme = {} as DefaultTheme, ...otherProps }) => { return ( - {children} + +
{children}
+ ); diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md index ae505434a..cffbd256a 100644 --- a/packages/core/theme/CHANGELOG.md +++ b/packages/core/theme/CHANGELOG.md @@ -4,7 +4,7 @@ ### Patch Changes -- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA +- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and Button ## 0.0.6 diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json index 0e035734f..c57a638d1 100644 --- a/packages/core/theme/package.json +++ b/packages/core/theme/package.json @@ -42,12 +42,14 @@ }, "peerDependencies": { "react": ">=18", - "react-dom": ">=18" + "react-dom": ">=18", + "styled-components": ">=6.0.0" }, "devDependencies": { "clean-package": "^2.2.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "styled-components": "^6.0.7" }, "clean-package": "./clean-package.config.json" } diff --git a/packages/core/themeV2/src/components/accordion.ts b/packages/core/theme/src/components/accordion.ts similarity index 100% rename from packages/core/themeV2/src/components/accordion.ts rename to packages/core/theme/src/components/accordion.ts diff --git a/packages/core/themeV2/src/components/alert.ts b/packages/core/theme/src/components/alert.ts similarity index 100% rename from packages/core/themeV2/src/components/alert.ts rename to packages/core/theme/src/components/alert.ts diff --git a/packages/core/themeV2/src/components/button.ts b/packages/core/theme/src/components/button.ts similarity index 100% rename from packages/core/themeV2/src/components/button.ts rename to packages/core/theme/src/components/button.ts diff --git a/packages/core/themeV2/src/components/card.ts b/packages/core/theme/src/components/card.ts similarity index 100% rename from packages/core/themeV2/src/components/card.ts rename to packages/core/theme/src/components/card.ts diff --git a/packages/core/themeV2/src/components/dialog.ts b/packages/core/theme/src/components/dialog.ts similarity index 89% rename from packages/core/themeV2/src/components/dialog.ts rename to packages/core/theme/src/components/dialog.ts index 7bd8c1b5e..7a1707778 100644 --- a/packages/core/themeV2/src/components/dialog.ts +++ b/packages/core/theme/src/components/dialog.ts @@ -1,6 +1,7 @@ -import { MaxWidth } from 'src/core'; import { StyledObject } from 'styled-components'; +import { MaxWidth } from '../core'; + type DialogSize = MaxWidth; type DialogTheme = { diff --git a/packages/core/themeV2/src/components/divider.ts b/packages/core/theme/src/components/divider.ts similarity index 100% rename from packages/core/themeV2/src/components/divider.ts rename to packages/core/theme/src/components/divider.ts diff --git a/packages/core/themeV2/src/components/drawer.ts b/packages/core/theme/src/components/drawer.ts similarity index 100% rename from packages/core/themeV2/src/components/drawer.ts rename to packages/core/theme/src/components/drawer.ts diff --git a/packages/core/themeV2/src/components/index.ts b/packages/core/theme/src/components/index.ts similarity index 89% rename from packages/core/themeV2/src/components/index.ts rename to packages/core/theme/src/components/index.ts index 3824890de..cd5c088c8 100644 --- a/packages/core/themeV2/src/components/index.ts +++ b/packages/core/theme/src/components/index.ts @@ -13,3 +13,5 @@ export * from './spinner'; export * from './progress-bar'; export * from './tooltip'; export * from './token-input'; +export * from './tabs'; +export * from './table'; diff --git a/packages/core/themeV2/src/components/input.ts b/packages/core/theme/src/components/input.ts similarity index 93% rename from packages/core/themeV2/src/components/input.ts rename to packages/core/theme/src/components/input.ts index 513b32238..a53903e07 100644 --- a/packages/core/themeV2/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -14,6 +14,7 @@ type InputTheme = { disabled: StyledObject; size: Record>; placeholder: StyledObject; + adornment: StyledObject; }; export type { InputSizes, InputTheme }; diff --git a/packages/core/themeV2/src/components/list.ts b/packages/core/theme/src/components/list.ts similarity index 100% rename from packages/core/themeV2/src/components/list.ts rename to packages/core/theme/src/components/list.ts diff --git a/packages/core/themeV2/src/components/progress-bar.ts b/packages/core/theme/src/components/progress-bar.ts similarity index 100% rename from packages/core/themeV2/src/components/progress-bar.ts rename to packages/core/theme/src/components/progress-bar.ts diff --git a/packages/core/themeV2/src/components/radio.ts b/packages/core/theme/src/components/radio.ts similarity index 100% rename from packages/core/themeV2/src/components/radio.ts rename to packages/core/theme/src/components/radio.ts diff --git a/packages/core/themeV2/src/components/spinner.ts b/packages/core/theme/src/components/spinner.ts similarity index 100% rename from packages/core/themeV2/src/components/spinner.ts rename to packages/core/theme/src/components/spinner.ts diff --git a/packages/core/themeV2/src/components/switch.ts b/packages/core/theme/src/components/switch.ts similarity index 100% rename from packages/core/themeV2/src/components/switch.ts rename to packages/core/theme/src/components/switch.ts diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts new file mode 100644 index 000000000..7694e173f --- /dev/null +++ b/packages/core/theme/src/components/table.ts @@ -0,0 +1,15 @@ +import { StyledObject } from 'styled-components'; + +type TableTheme = { + tab: { + base: StyledObject; + item: { + base: StyledObject; + hover: StyledObject; + focus: StyledObject; + selected: StyledObject; + }; + }; +}; + +export type { TableTheme }; diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts new file mode 100644 index 000000000..a90fff36e --- /dev/null +++ b/packages/core/theme/src/components/tabs.ts @@ -0,0 +1,22 @@ +import { StyledObject } from 'styled-components'; + +type TabsSize = 's' | 'md' | 'lg'; + +type TabsTheme = { + base: StyledObject; + item: { + base: StyledObject; + hover: StyledObject; + focus: StyledObject; + selected: StyledObject; + }; + size: Record< + TabsSize, + { + base: StyledObject; + item: StyledObject; + } + >; +}; + +export type { TabsSize, TabsTheme }; diff --git a/packages/core/themeV2/src/components/token-input.ts b/packages/core/theme/src/components/token-input.ts similarity index 64% rename from packages/core/themeV2/src/components/token-input.ts rename to packages/core/theme/src/components/token-input.ts index e876071cb..9cfd0f7ed 100644 --- a/packages/core/themeV2/src/components/token-input.ts +++ b/packages/core/theme/src/components/token-input.ts @@ -6,12 +6,21 @@ type TokenInputSize = InputSizes; type TokenInputTheme = { balance: StyledObject; - addorment: { token: { base: StyledObject; img?: StyledObject } }; + addorment: { token: { base: StyledObject; img?: StyledObject }; usd: StyledObject }; + list: { + item: { + ticker: StyledObject; + usd: StyledObject; + selected: { + ticker: StyledObject; + usd: StyledObject; + }; + }; + }; size: Record< TokenInputSize, { addornment: { - bottom: StyledObject; token: { base: StyledObject; img: StyledObject }; }; } diff --git a/packages/core/themeV2/src/components/tooltip.ts b/packages/core/theme/src/components/tooltip.ts similarity index 100% rename from packages/core/themeV2/src/components/tooltip.ts rename to packages/core/theme/src/components/tooltip.ts diff --git a/packages/core/theme/src/breakpoints.ts b/packages/core/theme/src/core/breakpoints.ts similarity index 100% rename from packages/core/theme/src/breakpoints.ts rename to packages/core/theme/src/core/breakpoints.ts diff --git a/packages/core/themeV2/src/core/colors.ts b/packages/core/theme/src/core/colors.ts similarity index 85% rename from packages/core/themeV2/src/core/colors.ts rename to packages/core/theme/src/core/colors.ts index c1494a27b..41157ba3a 100644 --- a/packages/core/themeV2/src/core/colors.ts +++ b/packages/core/theme/src/core/colors.ts @@ -21,7 +21,7 @@ type Palette = { type Color = keyof Palette; -const color = (colors: Palette) => (color: Color) => colors[color]; +const color = (colors: Palette) => (color: Color | 'inherit') => (color === 'inherit' ? color : colors[color]); export { color }; export type { Color, Palette, PrimaryColors, GreyColors, BlueColors, GreenColors, RedColors }; diff --git a/packages/core/themeV2/src/core/font-size.ts b/packages/core/theme/src/core/font-size.ts similarity index 100% rename from packages/core/themeV2/src/core/font-size.ts rename to packages/core/theme/src/core/font-size.ts diff --git a/packages/core/themeV2/src/core/font-weight.ts b/packages/core/theme/src/core/font-weight.ts similarity index 100% rename from packages/core/themeV2/src/core/font-weight.ts rename to packages/core/theme/src/core/font-weight.ts diff --git a/packages/core/themeV2/src/core/icon.ts b/packages/core/theme/src/core/icon.ts similarity index 91% rename from packages/core/themeV2/src/core/icon.ts rename to packages/core/theme/src/core/icon.ts index f819c4caa..5f0ec1208 100644 --- a/packages/core/themeV2/src/core/icon.ts +++ b/packages/core/theme/src/core/icon.ts @@ -44,9 +44,9 @@ const iconSizeBase: Record> = { const icon = (colors: Palette) => { const getColor = color(colors); - return (size: IconsSizes, color: Color = 'light') => css` + return (size: IconsSizes, color?: Color) => css` ${iconSizeBase[size]} - color: ${getColor(color)}; + color: ${color && getColor(color)}; `; }; diff --git a/packages/core/themeV2/src/core/index.ts b/packages/core/theme/src/core/index.ts similarity index 100% rename from packages/core/themeV2/src/core/index.ts rename to packages/core/theme/src/core/index.ts diff --git a/packages/core/themeV2/src/core/line-height.ts b/packages/core/theme/src/core/line-height.ts similarity index 100% rename from packages/core/themeV2/src/core/line-height.ts rename to packages/core/theme/src/core/line-height.ts diff --git a/packages/core/themeV2/src/core/max-width.ts b/packages/core/theme/src/core/max-width.ts similarity index 100% rename from packages/core/themeV2/src/core/max-width.ts rename to packages/core/theme/src/core/max-width.ts diff --git a/packages/core/themeV2/src/core/rounded.ts b/packages/core/theme/src/core/rounded.ts similarity index 100% rename from packages/core/themeV2/src/core/rounded.ts rename to packages/core/theme/src/core/rounded.ts diff --git a/packages/core/themeV2/src/core/space.ts b/packages/core/theme/src/core/space.ts similarity index 100% rename from packages/core/themeV2/src/core/space.ts rename to packages/core/theme/src/core/space.ts diff --git a/packages/core/themeV2/src/core/transition.ts b/packages/core/theme/src/core/transition.ts similarity index 100% rename from packages/core/themeV2/src/core/transition.ts rename to packages/core/theme/src/core/transition.ts diff --git a/packages/core/themeV2/src/core/typography.ts b/packages/core/theme/src/core/typography.ts similarity index 100% rename from packages/core/themeV2/src/core/typography.ts rename to packages/core/theme/src/core/typography.ts diff --git a/packages/core/themeV2/src/define.ts b/packages/core/theme/src/define.ts similarity index 93% rename from packages/core/themeV2/src/define.ts rename to packages/core/theme/src/define.ts index e84c8de2e..f13e0b1b8 100644 --- a/packages/core/themeV2/src/define.ts +++ b/packages/core/theme/src/define.ts @@ -28,7 +28,9 @@ import { SpinnerTheme, ProgressBarTheme, TooltipTheme, - TokenInputTheme + TokenInputTheme, + TableTheme, + TabsTheme } from './components'; const baseTheme = { @@ -60,6 +62,8 @@ type ThemeParams = { progressBar: ProgressBarTheme; tooltip: TooltipTheme; tokenInput: TokenInputTheme; + tabs: TabsTheme; + table: TableTheme; }; const defineTheme = ({ colors, ...theme }: ThemeParams) => ({ diff --git a/packages/core/theme/src/index.ts b/packages/core/theme/src/index.ts index 778db4c4f..2cee7a78c 100644 --- a/packages/core/theme/src/index.ts +++ b/packages/core/theme/src/index.ts @@ -1,5 +1,45 @@ -export type { ComponentLibraryTheme } from './base'; -export { default as theme } from './base'; -export * from './breakpoints'; -export type * from './types'; -export * from './utils'; +export type { + ButtonSizes, + ButtonVariants, + ButtonColors, + SpinnerColors, + SpinnerSizes, + InputSizes, + DividerSizes, + DialogSize, + AccordionVariants, + ProgressBarSize, + AlertStatus, + TokenInputSize, + TabsSize +} from './components'; +export type { + IconsSizes, + Color, + BreakPoints, + FontSize, + FontWeight, + LineHeight, + Rounded, + Spacing, + TransitionDuration, + TransitionProperty, + TransitionTimingFunction, + Typography, + NormalAlignments, + MaxWidth, + AlignItems, + AlignSelf, + Direction, + JustifyContent, + LabelPosition, + MarginProps, + Orientation, + Overflow, + Placement, + Status, + Wrap +} from './core'; +export { bobTheme } from './themes'; +export type { Theme } from './define'; +export * from './temp'; diff --git a/packages/core/theme/src/base.ts b/packages/core/theme/src/temp/base.ts similarity index 100% rename from packages/core/theme/src/base.ts rename to packages/core/theme/src/temp/base.ts diff --git a/packages/core/themeV2/src/core/breakpoints.ts b/packages/core/theme/src/temp/breakpoints.ts similarity index 100% rename from packages/core/themeV2/src/core/breakpoints.ts rename to packages/core/theme/src/temp/breakpoints.ts diff --git a/packages/core/theme/src/css/theme.base.css b/packages/core/theme/src/temp/css/theme.base.css similarity index 100% rename from packages/core/theme/src/css/theme.base.css rename to packages/core/theme/src/temp/css/theme.base.css diff --git a/packages/core/theme/src/css/theme.bob.css b/packages/core/theme/src/temp/css/theme.bob.css similarity index 100% rename from packages/core/theme/src/css/theme.bob.css rename to packages/core/theme/src/temp/css/theme.bob.css diff --git a/packages/core/theme/src/css/theme.interlay.css b/packages/core/theme/src/temp/css/theme.interlay.css similarity index 100% rename from packages/core/theme/src/css/theme.interlay.css rename to packages/core/theme/src/temp/css/theme.interlay.css diff --git a/packages/core/theme/src/css/theme.kintsugi.css b/packages/core/theme/src/temp/css/theme.kintsugi.css similarity index 100% rename from packages/core/theme/src/css/theme.kintsugi.css rename to packages/core/theme/src/temp/css/theme.kintsugi.css diff --git a/packages/core/theme/src/temp/index.ts b/packages/core/theme/src/temp/index.ts new file mode 100644 index 000000000..545650ab5 --- /dev/null +++ b/packages/core/theme/src/temp/index.ts @@ -0,0 +1,4 @@ +export type { ComponentLibraryTheme } from './base'; +export { default as theme } from './base'; +export * from './breakpoints'; +export * from './types'; diff --git a/packages/core/theme/src/temp/types.ts b/packages/core/theme/src/temp/types.ts new file mode 100644 index 000000000..baf80cd18 --- /dev/null +++ b/packages/core/theme/src/temp/types.ts @@ -0,0 +1,2 @@ +export type Variants = 'primary' | 'secondary' | 'tertiary'; +export type MeterVariants = Exclude; diff --git a/packages/core/themeV2/src/themes/bob/accordion.ts b/packages/core/theme/src/themes/bob/accordion.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/accordion.ts rename to packages/core/theme/src/themes/bob/accordion.ts diff --git a/packages/core/themeV2/src/themes/bob/alert.ts b/packages/core/theme/src/themes/bob/alert.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/alert.ts rename to packages/core/theme/src/themes/bob/alert.ts diff --git a/packages/core/themeV2/src/themes/bob/button.ts b/packages/core/theme/src/themes/bob/button.ts similarity index 91% rename from packages/core/themeV2/src/themes/bob/button.ts rename to packages/core/theme/src/themes/bob/button.ts index e5ece55f2..a32925d09 100644 --- a/packages/core/themeV2/src/themes/bob/button.ts +++ b/packages/core/theme/src/themes/bob/button.ts @@ -1,6 +1,6 @@ import { fontSize, fontWeight, lineHeight, rounded, spacing, transition } from '../../core'; import { ButtonTheme } from '../../components'; -import { rem } from '../../utils'; +import { hexToRgba, rem } from '../../utils'; import { color } from './colors'; @@ -130,10 +130,10 @@ const button: ButtonTheme = { color: color('light') }, hover: { - backgroundColor: color('grey-300') + backgroundColor: hexToRgba(color('grey-300'), 20) }, active: { - backgroundColor: color('grey-300') + backgroundColor: hexToRgba(color('grey-300'), 30) }, focusVisible: { boxShadow: '0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D' @@ -144,13 +144,13 @@ const button: ButtonTheme = { }, primary: { base: { - color: color('primary-300') + color: color('primary-500') }, hover: { - backgroundColor: color('grey-300') + backgroundColor: hexToRgba(color('primary-500'), 20) }, active: { - backgroundColor: color('grey-300') + backgroundColor: hexToRgba(color('primary-500'), 30) }, focusVisible: { boxShadow: '0px 0px 0px 4px #D92D2040, 0px 1px 2px 0px #1018280D' diff --git a/packages/core/themeV2/src/themes/bob/card.ts b/packages/core/theme/src/themes/bob/card.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/card.ts rename to packages/core/theme/src/themes/bob/card.ts diff --git a/packages/core/themeV2/src/themes/bob/colors.ts b/packages/core/theme/src/themes/bob/colors.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/colors.ts rename to packages/core/theme/src/themes/bob/colors.ts diff --git a/packages/core/themeV2/src/themes/bob/dialog.ts b/packages/core/theme/src/themes/bob/dialog.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/dialog.ts rename to packages/core/theme/src/themes/bob/dialog.ts diff --git a/packages/core/themeV2/src/themes/bob/divider.ts b/packages/core/theme/src/themes/bob/divider.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/divider.ts rename to packages/core/theme/src/themes/bob/divider.ts diff --git a/packages/core/themeV2/src/themes/bob/drawer.ts b/packages/core/theme/src/themes/bob/drawer.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/drawer.ts rename to packages/core/theme/src/themes/bob/drawer.ts diff --git a/packages/core/themeV2/src/themes/bob/index.ts b/packages/core/theme/src/themes/bob/index.ts similarity index 89% rename from packages/core/themeV2/src/themes/bob/index.ts rename to packages/core/theme/src/themes/bob/index.ts index 4f2e09eae..53ca5b688 100644 --- a/packages/core/themeV2/src/themes/bob/index.ts +++ b/packages/core/theme/src/themes/bob/index.ts @@ -16,6 +16,8 @@ import { _switch } from './switch'; import { progressBar } from './progress-bar'; import { tooltip } from './tooltip'; import { tokenInput } from './token-input'; +import { tabs } from './tabs'; +import { table } from './table'; const bobTheme = defineTheme({ colors, @@ -33,7 +35,9 @@ const bobTheme = defineTheme({ switch: _switch, progressBar, tooltip, - tokenInput + tokenInput, + table, + tabs }); export { bobTheme }; diff --git a/packages/core/themeV2/src/themes/bob/input.ts b/packages/core/theme/src/themes/bob/input.ts similarity index 94% rename from packages/core/themeV2/src/themes/bob/input.ts rename to packages/core/theme/src/themes/bob/input.ts index 63e3f8807..70dd4e0f4 100644 --- a/packages/core/themeV2/src/themes/bob/input.ts +++ b/packages/core/theme/src/themes/bob/input.ts @@ -6,7 +6,7 @@ import { color } from './colors'; const input: InputTheme = { base: { color: color('light'), - backgroundColor: color('grey-600'), + backgroundColor: color('grey-700'), border: `1px solid ${color('grey-400')}`, borderRadius: rounded('md'), ...transition('common', 'normal') @@ -60,6 +60,9 @@ const input: InputTheme = { focus: { boxShadow: `0 0 0 1px ${color('red-500')}` } + }, + adornment: { + color: color('grey-300') } }; diff --git a/packages/core/themeV2/src/themes/bob/list.ts b/packages/core/theme/src/themes/bob/list.ts similarity index 89% rename from packages/core/themeV2/src/themes/bob/list.ts rename to packages/core/theme/src/themes/bob/list.ts index 3aa96a313..0f672b7c2 100644 --- a/packages/core/themeV2/src/themes/bob/list.ts +++ b/packages/core/theme/src/themes/bob/list.ts @@ -8,7 +8,7 @@ const list: ListTheme = { base: { borderRadius: rounded('md'), color: color('light'), - padding: spacing('lg'), + padding: `${spacing('md')} ${spacing('lg')}`, ...typography('md') }, hover: { diff --git a/packages/core/themeV2/src/themes/bob/progress-bar.ts b/packages/core/theme/src/themes/bob/progress-bar.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/progress-bar.ts rename to packages/core/theme/src/themes/bob/progress-bar.ts diff --git a/packages/core/themeV2/src/themes/bob/radio.ts b/packages/core/theme/src/themes/bob/radio.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/radio.ts rename to packages/core/theme/src/themes/bob/radio.ts diff --git a/packages/core/themeV2/src/themes/bob/spinner.ts b/packages/core/theme/src/themes/bob/spinner.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/spinner.ts rename to packages/core/theme/src/themes/bob/spinner.ts diff --git a/packages/core/themeV2/src/themes/bob/switch.ts b/packages/core/theme/src/themes/bob/switch.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/switch.ts rename to packages/core/theme/src/themes/bob/switch.ts diff --git a/packages/core/theme/src/themes/bob/table.ts b/packages/core/theme/src/themes/bob/table.ts new file mode 100644 index 000000000..32f31af45 --- /dev/null +++ b/packages/core/theme/src/themes/bob/table.ts @@ -0,0 +1,25 @@ +import { TableTheme } from 'src/components'; + +import { rounded, typography, spacing } from '../../core'; + +import { color } from './colors'; + +const table: TableTheme = { + item: { + base: { + borderRadius: rounded('md'), + color: color('light'), + padding: `${spacing('md')} ${spacing('lg')}`, + ...typography('md') + }, + hover: { + backgroundColor: color('grey-600') + }, + selected: { + backgroundColor: color('light'), + color: color('dark') + } + } +}; + +export { table }; diff --git a/packages/core/theme/src/themes/bob/tabs.ts b/packages/core/theme/src/themes/bob/tabs.ts new file mode 100644 index 000000000..4e28548e4 --- /dev/null +++ b/packages/core/theme/src/themes/bob/tabs.ts @@ -0,0 +1,61 @@ +import { rounded, spacing, typography, transition } from '../../core'; +import { TabsTheme } from '../../components'; + +import { color } from './colors'; + +const tabs: TabsTheme = { + base: { + backgroundColor: color('grey-800'), + borderRadius: rounded('md') + }, + item: { + base: { + backgroundColor: 'transparent', + borderRadius: rounded('s'), + color: color('light'), + ...transition('common', 'normal') + }, + hover: { + border: `1px solid ${color('grey-300')}` + }, + focus: { + border: `1px solid ${color('light')}`, + boxShadow: `0 0 0 1px ${color('light')}` + }, + selected: { + backgroundColor: color('grey-500'), + border: `1px solid ${color('grey-400')}` + } + }, + size: { + s: { + base: { + padding: spacing('xs') + }, + item: { + padding: `${spacing('s')} ${spacing('xs')}`, + ...typography('s') + } + }, + md: { + base: { + padding: spacing('xs') + }, + item: { + padding: `${spacing('s')} ${spacing('xs')}`, + ...typography('md') + } + }, + lg: { + base: { + padding: spacing('xs') + }, + item: { + padding: `${spacing('s')} ${spacing('xs')}`, + ...typography('lg') + } + } + } +}; + +export { tabs }; diff --git a/packages/core/themeV2/src/themes/bob/token-input.ts b/packages/core/theme/src/themes/bob/token-input.ts similarity index 67% rename from packages/core/themeV2/src/themes/bob/token-input.ts rename to packages/core/theme/src/themes/bob/token-input.ts index 8aefeb6b7..1da9d9698 100644 --- a/packages/core/themeV2/src/themes/bob/token-input.ts +++ b/packages/core/theme/src/themes/bob/token-input.ts @@ -3,6 +3,7 @@ import { TokenInputTheme } from '../../components'; import { color } from './colors'; +// TODO: handle different sizes const tokenInput: TokenInputTheme = { balance: { padding: `${spacing('xxs')} 0`, @@ -13,27 +14,49 @@ const tokenInput: TokenInputTheme = { addorment: { token: { base: { - backgroundColor: color('grey-500'), + backgroundColor: color('grey-600'), border: `1px solid ${color('grey-400')}`, borderLeft: 'none', borderTopRightRadius: rounded('md'), borderBottomRightRadius: rounded('md'), color: color('light') } + }, + usd: { + ...typography('xs'), + color: color('grey-200') + } + }, + list: { + item: { + ticker: { + color: color('light'), + fontWeight: fontWeight('medium'), + ...typography('md') + }, + usd: { + color: color('grey-300'), + fontWeight: fontWeight('medium'), + ...typography('s') + }, + selected: { + ticker: { + color: color('dark') + }, + usd: { + color: color('grey-300') + } + } } }, size: { s: { addornment: { - bottom: { - ...typography('xs'), - color: color('grey-200') - }, token: { base: { paddingLeft: spacing('md'), paddingRight: spacing('md'), - ...typography('md') + ...typography('xs') }, img: { height: spacing('2xl'), @@ -44,15 +67,11 @@ const tokenInput: TokenInputTheme = { }, md: { addornment: { - bottom: { - ...typography('xs'), - color: color('grey-200') - }, token: { base: { paddingLeft: spacing('md'), paddingRight: spacing('md'), - ...typography('md') + ...typography('s') }, img: { height: spacing('2xl'), @@ -63,10 +82,6 @@ const tokenInput: TokenInputTheme = { }, lg: { addornment: { - bottom: { - ...typography('xs'), - color: color('grey-200') - }, token: { base: { paddingLeft: spacing('md'), @@ -74,8 +89,8 @@ const tokenInput: TokenInputTheme = { ...typography('md') }, img: { - height: spacing('2xl'), - width: spacing('2xl') + height: spacing('3xl'), + width: spacing('3xl') } } } diff --git a/packages/core/themeV2/src/themes/bob/tooltip.ts b/packages/core/theme/src/themes/bob/tooltip.ts similarity index 100% rename from packages/core/themeV2/src/themes/bob/tooltip.ts rename to packages/core/theme/src/themes/bob/tooltip.ts diff --git a/packages/core/themeV2/src/themes/index.ts b/packages/core/theme/src/themes/index.ts similarity index 100% rename from packages/core/themeV2/src/themes/index.ts rename to packages/core/theme/src/themes/index.ts diff --git a/packages/core/theme/src/types.ts b/packages/core/theme/src/types.ts index 510cd511c..a6a61492e 100644 --- a/packages/core/theme/src/types.ts +++ b/packages/core/theme/src/types.ts @@ -1,106 +1,5 @@ -import theme from './base'; +type DeepPartial = { + [K in keyof T]?: T[K] extends object ? DeepPartial : T[K]; +}; -export const tuple = (...args: T): T => args; - -export const variant = tuple('primary', 'secondary', 'tertiary'); - -export const ctaVariant = tuple('primary', 'secondary', 'outlined', 'text'); - -export const status = tuple('error', 'warning', 'success'); - -export const sizes = tuple('small', 'medium', 'large'); - -// TODO: add info -export const colors = tuple('primary', 'secondary', 'tertiary', 'success', 'warning', 'error'); - -export const justifyContent = tuple( - 'flex-start', - 'center', - 'flex-end', - 'space-between', - 'space-around', - 'space-evenly' -); - -export const alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline'); - -export const normalAlignments = tuple('start', 'center', 'end'); - -export const direction = tuple('row', 'row-reverse', 'column', 'column-reverse'); - -export const wrap = tuple('wrap', 'nowrap', 'wrap-reverse'); - -export const alignSelf = tuple( - 'auto', - 'normal', - 'start', - 'end', - 'center', - 'flex-start', - 'flex-end', - 'self-start', - 'self-end', - 'stretch' -); - -export type Variants = (typeof variant)[number]; - -export type CTAVariants = (typeof ctaVariant)[number]; - -export type CardVariants = 'default' | 'bordered'; - -export type ListVariants = Exclude | 'card'; - -export type MeterVariants = Exclude; - -export type DividerVariants = Colors | 'default'; - -export type CTASizes = 'x-small' | 'small' | 'medium' | 'large'; - -export type Status = (typeof status)[number]; - -export type Sizes = (typeof sizes)[number]; - -export type Colors = (typeof colors)[number]; - -export type JustifyContent = (typeof justifyContent)[number]; - -export type AlignItems = (typeof alignItems)[number]; - -export type Wrap = (typeof wrap)[number]; - -export type AlignSelf = (typeof alignSelf)[number]; - -export type NormalAlignments = (typeof normalAlignments)[number]; - -export type Direction = (typeof direction)[number]; - -export type FontSize = keyof typeof theme.text; - -export type Spacing = keyof typeof theme.spacing; - -export type Placement = 'top' | 'right' | 'bottom' | 'left'; - -export interface MarginProps { - margin?: Spacing; - marginTop?: Spacing; - marginBottom?: Spacing; - marginLeft?: Spacing; - marginRight?: Spacing; - marginX?: Spacing; - marginY?: Spacing; -} - -export type FontWeight = keyof typeof theme.fontWeight; - -export type Orientation = 'horizontal' | 'vertical'; - -export type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit'; - -export type ProgressBarColors = 'default' | 'red'; - -export type BorderRadius = keyof typeof theme.rounded; - -export type LabelPosition = 'top' | 'side'; - -export type IconSize = keyof typeof theme.icon.sizes; +export type { DeepPartial }; diff --git a/packages/core/theme/src/utils.ts b/packages/core/theme/src/utils.ts index cc573aca5..3562e4b5b 100644 --- a/packages/core/theme/src/utils.ts +++ b/packages/core/theme/src/utils.ts @@ -1,42 +1,23 @@ -import base from './base'; -import { Colors, FontSize } from './types'; +const rem = (value: number, base = 16) => `${(1 / base) * value}rem`; -const resolveColor = (color: Colors | undefined): string => { - switch (color) { - case 'primary': - return base.colors.textPrimary; - case 'secondary': - return base.colors.textSecondary; - case 'tertiary': - return base.colors.textTertiary; - case 'success': - return base.colors.success; - case 'warning': - return base.colors.warning; - case 'error': - return base.colors.error; - default: - return base.colors.textPrimary; - } -}; +const style = + >(baseStyle: T) => + (key: keyof typeof baseStyle, unit: 'rem' | 'px' = 'rem', base = 16) => { + if (unit === 'px') { + return `${baseStyle[key]}px`; + } + + return rem(baseStyle[key], base); + }; + +// MEMO: only supports 6 digits hex +const hexToRgba = (hex: string, opacity: number) => { + const tempHex = hex.replace('#', ''); + const r = parseInt(tempHex.substring(0, 2), 16); + const g = parseInt(tempHex.substring(2, 4), 16); + const b = parseInt(tempHex.substring(4, 6), 16); -const resolveHeight = (size: FontSize | undefined): string | undefined => { - switch (size) { - case 's': - return base.lineHeight.s; - case 'base': - case 'lg': - case 'xl': - default: - return base.lineHeight.base; - case 'xs': - case 'xl2': - case 'xl3': - case 'xl4': - case 'xl5': - case 'xl6': - return undefined; - } + return `rgba(${r},${g},${b},${opacity / 100})`; }; -export { resolveColor, resolveHeight }; +export { rem, style, hexToRgba }; diff --git a/packages/core/theme/tsup.config.ts b/packages/core/theme/tsup.config.ts index 27c61bcf3..fd2bba042 100644 --- a/packages/core/theme/tsup.config.ts +++ b/packages/core/theme/tsup.config.ts @@ -4,16 +4,5 @@ export default defineConfig({ clean: true, target: 'es2019', format: ['cjs', 'esm'], - banner: { js: '"use client";' }, - entry: { - index: 'src/index.ts', - kintsugi: 'src/css/theme.kintsugi.css', - interlay: 'src/css/theme.interlay.css', - bob: 'src/css/theme.bob.css' - }, - dts: { - entry: { - index: 'src/index.ts' - } - } + banner: { js: '"use client";' } }); diff --git a/packages/core/themeV2/CHANGELOG.md b/packages/core/themeV2/CHANGELOG.md deleted file mode 100644 index ae505434a..000000000 --- a/packages/core/themeV2/CHANGELOG.md +++ /dev/null @@ -1,44 +0,0 @@ -# @interlay/theme - -## 0.0.7 - -### Patch Changes - -- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA - -## 0.0.6 - -### Patch Changes - -- [#38](https://github.com/interlay/ui/pull/38) [`0f85afc`](https://github.com/interlay/ui/commit/0f85afc17d8a576331cbd8ae5f6b743977cf80a0) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(theme): bob loading spinner (#37) - -## 0.0.5 - -### Patch Changes - -- [#36](https://github.com/interlay/ui/pull/36) [`200454d`](https://github.com/interlay/ui/commit/200454d7df265c661a5e74d83293179962be8822) Thanks [@tomjeatt](https://github.com/tomjeatt)! - feature: add BOB tab styles - -## 0.0.4 - -### Patch Changes - -- [#29](https://github.com/interlay/ui/pull/29) [`edd2937`](https://github.com/interlay/ui/commit/edd2937b2fbe05fd82b33c1e1cada3ed5c76e3db) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(components): select types - fix(theme): bob input disable - -## 0.0.3 - -### Patch Changes - -- [#27](https://github.com/interlay/ui/pull/27) [`5d11b0a`](https://github.com/interlay/ui/commit/5d11b0aa63dd3efa13e16a52f3b267bfa09e45d4) Thanks [@danielsimao](https://github.com/danielsimao)! - feat(theme): add bob - -## 0.0.2 - -### Patch Changes - -- [#11](https://github.com/interlay/ui/pull/11) [`fec9ccb`](https://github.com/interlay/ui/commit/fec9ccbdbfbee8fa6bb1d8ebfbb29fa5497fd442) Thanks [@danielsimao](https://github.com/danielsimao)! - fix/remove theme font - -## 0.0.1 - -### Patch Changes - -- Initial Release 🎉 diff --git a/packages/core/themeV2/README.md b/packages/core/themeV2/README.md deleted file mode 100644 index b50e0daf4..000000000 --- a/packages/core/themeV2/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# @interlay/theme - -Interlay UI components theme. - -## Installation - -```sh -yarn add @interlay/theme -# or -npm i @interlay/theme -``` - -## Contribution - -Yes please! See the -[contributing guidelines](https://github.com/interlay/ui/blob/main/CONTRIBUTING.MD) -for details. - -## License - -[MIT](https://choosealicense.com/licenses/mit/) diff --git a/packages/core/themeV2/clean-package.config.json b/packages/core/themeV2/clean-package.config.json deleted file mode 100644 index f75a45e95..000000000 --- a/packages/core/themeV2/clean-package.config.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "remove": ["devDependencies"], - "replace": { - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" - }, - "./dist/*.css": { - "import": "./dist/*.css", - "require": "./dist/*.css" - }, - "./package.json": "./package.json" - } - } -} diff --git a/packages/core/themeV2/package.json b/packages/core/themeV2/package.json deleted file mode 100644 index f3a665bba..000000000 --- a/packages/core/themeV2/package.json +++ /dev/null @@ -1,55 +0,0 @@ -{ - "name": "@interlay/themev2", - "version": "0.0.7", - "description": "The default theme for Interlay UI components", - "homepage": "https://github.com/interlay/ui#readme", - "license": "MIT", - "keywords": [ - "interlay", - "interlay ui", - "theme", - "theming", - "design", - "ui", - "components", - "classNames", - "css" - ], - "main": "src/index.ts", - "files": [ - "dist" - ], - "sideEffects": false, - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/interlay/ui.git", - "directory": "packages/core/theme" - }, - "bugs": { - "url": "https://github.com/interlay/ui/issues" - }, - "scripts": { - "lint": "eslint .", - "lint:fix": "eslint . --ext ts,tsx --fix", - "clean": "rimraf dist .turbo", - "typecheck": "tsc --noEmit", - "build": "tsup", - "prepack": "clean-package", - "postpack": "clean-package restore" - }, - "peerDependencies": { - "react": ">=18", - "react-dom": ">=18", - "styled-components": ">=6.0.0" - }, - "devDependencies": { - "clean-package": "^2.2.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "styled-components": "^6.0.7" - }, - "clean-package": "./clean-package.config.json" -} diff --git a/packages/core/themeV2/src/index.ts b/packages/core/themeV2/src/index.ts deleted file mode 100644 index 968de09d3..000000000 --- a/packages/core/themeV2/src/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -export type { - ButtonSizes, - ButtonVariants, - ButtonColors, - SpinnerColors, - SpinnerSizes, - InputSizes, - DividerSizes, - DialogSize, - AccordionVariants, - ProgressBarSize, - AlertStatus, - TokenInputSize -} from './components'; -export type { - IconsSizes, - Color, - BreakPoints, - FontSize, - FontWeight, - LineHeight, - Rounded, - Spacing, - TransitionDuration, - TransitionProperty, - TransitionTimingFunction, - Typography, - NormalAlignments, - MaxWidth, - AlignItems, - AlignSelf, - Direction, - JustifyContent, - LabelPosition, - MarginProps, - Orientation, - Overflow, - Placement, - Status, - Wrap -} from './core'; -export { bobTheme } from './themes'; -export type { Theme } from './define'; diff --git a/packages/core/themeV2/src/types.ts b/packages/core/themeV2/src/types.ts deleted file mode 100644 index a6a61492e..000000000 --- a/packages/core/themeV2/src/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -type DeepPartial = { - [K in keyof T]?: T[K] extends object ? DeepPartial : T[K]; -}; - -export type { DeepPartial }; diff --git a/packages/core/themeV2/src/utils.ts b/packages/core/themeV2/src/utils.ts deleted file mode 100644 index dd07ea592..000000000 --- a/packages/core/themeV2/src/utils.ts +++ /dev/null @@ -1,13 +0,0 @@ -const rem = (value: number, base = 16) => `${(1 / base) * value}rem`; - -const style = - >(baseStyle: T) => - (key: keyof typeof baseStyle, unit: 'rem' | 'px' = 'rem', base = 16) => { - if (unit === 'px') { - return `${baseStyle[key]}px`; - } - - return rem(baseStyle[key], base); - }; - -export { rem, style }; diff --git a/packages/core/themeV2/tsconfig.json b/packages/core/themeV2/tsconfig.json deleted file mode 100644 index 249c65938..000000000 --- a/packages/core/themeV2/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "declaration": false - }, - "include": ["src"] -} diff --git a/packages/core/themeV2/tsup.config.ts b/packages/core/themeV2/tsup.config.ts deleted file mode 100644 index 27c61bcf3..000000000 --- a/packages/core/themeV2/tsup.config.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { defineConfig } from 'tsup'; - -export default defineConfig({ - clean: true, - target: 'es2019', - format: ['cjs', 'esm'], - banner: { js: '"use client";' }, - entry: { - index: 'src/index.ts', - kintsugi: 'src/css/theme.kintsugi.css', - interlay: 'src/css/theme.interlay.css', - bob: 'src/css/theme.bob.css' - }, - dts: { - entry: { - index: 'src/index.ts' - } - } -}); diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 5f84163ca..5f9fbe424 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@interlay/theme": "workspace:*", - "@interlay/themev2": "workspace:*", + "@interlay/theme": "workspace:*", "@internationalized/number": "^3.2.1", "@react-aria/i18n": "^3.8.1", "@react-aria/utils": "^3.19.0", diff --git a/packages/hooks/src/use-form/__tests__/use-form.test.tsx b/packages/hooks/src/use-form/__tests__/use-form.test.tsx index b809c526d..c4b814e79 100644 --- a/packages/hooks/src/use-form/__tests__/use-form.test.tsx +++ b/packages/hooks/src/use-form/__tests__/use-form.test.tsx @@ -190,7 +190,7 @@ describe('useForm', () => { render(
- + ); diff --git a/packages/hooks/src/use-style-props.tsx b/packages/hooks/src/use-style-props.tsx index 5ecc72da1..8bc8792b8 100644 --- a/packages/hooks/src/use-style-props.tsx +++ b/packages/hooks/src/use-style-props.tsx @@ -1,4 +1,4 @@ -import { Spacing } from '@interlay/themev2'; +import { Spacing } from '@interlay/theme'; type MarginProps = { margin?: Spacing; diff --git a/packages/icons/common/package.json b/packages/icons/common/package.json index 526f8d156..f8ecc43fc 100644 --- a/packages/icons/common/package.json +++ b/packages/icons/common/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@interlay/theme": "workspace:*", - "@interlay/themev2": "workspace:*" + "@interlay/theme": "workspace:*" }, "peerDependencies": { "react": ">=18", diff --git a/packages/icons/common/src/core/Icon.style.tsx b/packages/icons/common/src/core/Icon.style.tsx index a21cfa1bd..ce4c137dd 100644 --- a/packages/icons/common/src/core/Icon.style.tsx +++ b/packages/icons/common/src/core/Icon.style.tsx @@ -1,9 +1,9 @@ -import { Color, IconsSizes } from '@interlay/themev2'; +import { Color, IconsSizes } from '@interlay/theme'; import styled from 'styled-components'; type StyledIconProps = { $size: IconsSizes; - $color: Color; + $color?: Color; }; const StyledIcon = styled.svg` diff --git a/packages/icons/common/src/core/Icon.tsx b/packages/icons/common/src/core/Icon.tsx index 1b43e7803..c51166176 100644 --- a/packages/icons/common/src/core/Icon.tsx +++ b/packages/icons/common/src/core/Icon.tsx @@ -1,5 +1,5 @@ import { SVGAttributes, forwardRef } from 'react'; -import { Color, IconsSizes } from '@interlay/themev2'; +import { Color, IconsSizes } from '@interlay/theme'; import { StyledIcon } from './Icon.style'; @@ -13,7 +13,7 @@ type NativeAttrs = Omit, keyof Props>; type IconProps = Props & NativeAttrs; const Icon = forwardRef( - ({ size = 'md', color = 'light', ...props }, ref): JSX.Element => ( + ({ size = 'md', color, ...props }, ref): JSX.Element => ( ) ); diff --git a/packages/icons/common/src/types/styled-components.d.ts b/packages/icons/common/src/types/styled-components.d.ts index b69c7ca19..532240058 100644 --- a/packages/icons/common/src/types/styled-components.d.ts +++ b/packages/icons/common/src/types/styled-components.d.ts @@ -1,4 +1,4 @@ -import { Theme } from '@interlay/themev2'; +import { Theme } from '@interlay/theme'; declare module 'styled-components' { export interface DefaultTheme extends Theme {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5b4227a0..e81336177 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -164,7 +164,7 @@ importers: version: 7.3.0(@swc/core@1.4.2)(ts-node@10.9.2)(typescript@5.3.3) turbo: specifier: latest - version: 1.12.4 + version: 1.12.5 typescript: specifier: '>=3.0.0' version: 5.3.3 @@ -186,9 +186,6 @@ importers: '@interlay/theme': specifier: workspace:* version: link:../core/theme - '@interlay/themev2': - specifier: workspace:* - version: link:../core/themeV2 '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.56)(react@18.2.0) @@ -361,18 +358,6 @@ importers: version: 18.2.0(react@18.2.0) packages/core/theme: - devDependencies: - clean-package: - specifier: ^2.2.0 - version: 2.2.0 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - - packages/core/themeV2: devDependencies: clean-package: specifier: ^2.2.0 @@ -392,9 +377,6 @@ importers: '@interlay/theme': specifier: workspace:* version: link:../core/theme - '@interlay/themev2': - specifier: workspace:* - version: link:../core/themeV2 '@internationalized/number': specifier: ^3.2.1 version: 3.5.1 @@ -445,9 +427,6 @@ importers: '@interlay/theme': specifier: workspace:* version: link:../../core/theme - '@interlay/themev2': - specifier: workspace:* - version: link:../../core/themeV2 styled-components: specifier: '>=6.0.0' version: 6.1.8(react-dom@18.2.0)(react@18.2.0) @@ -770,7 +749,7 @@ packages: js-tokens: 4.0.0 /@babel/parser@7.23.9: - resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==} + resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZButtonxkVNwc+03SVP7aCdWrTlA==} engines: {node: '>=6.0.0'} hasBin: true dependencies: @@ -1379,7 +1358,7 @@ packages: dev: true /@babel/plugin-transform-modules-systemjs@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==} + resolution: {integrity: sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjButtonO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 @@ -4716,7 +4695,7 @@ packages: dev: false /@react-types/table@3.9.3(react@18.2.0): - resolution: {integrity: sha512-Hs/pMbxJdga2zBol4H5pV1FVIiRjCuSTXst6idJjkctanTexR4xkyrtBwl+rdLNoGwQ2pGii49vgklc5bFK7zA==} + resolution: {integrity: sha512-Hs/pMbxJdga2zBol4H5pV1FVIiRjCuSTXst6idJjkButtonnTexR4xkyrtBwl+rdLNoGwQ2pGii49vgklc5bFK7zA==} peerDependencies: react: ^18.2.0 dependencies: @@ -4726,7 +4705,7 @@ packages: dev: false /@react-types/tabs@3.3.5(react@18.2.0): - resolution: {integrity: sha512-6NTSZBOWekCtApdZrhu5tHhE/8q52oVohQN+J5T7shAXd6ZAtu8PABVR/nH4BWucc8FL0OUajRqunqzQMU13gA==} + resolution: {integrity: sha512-6NTSZBOWekButtonpdZrhu5tHhE/8q52oVohQN+J5T7shAXd6ZAtu8PABVR/nH4BWucc8FL0OUajRqunqzQMU13gA==} peerDependencies: react: ^18.2.0 dependencies: @@ -13394,64 +13373,64 @@ packages: yargs: 17.7.2 dev: true - /turbo-darwin-64@1.12.4: - resolution: {integrity: sha512-dBwFxhp9isTa9RS/fz2gDVk5wWhKQsPQMozYhjM7TT4jTrnYn0ZJMzr7V3B/M/T8QF65TbniW7w1gtgxQgX5Zg==} + /turbo-darwin-64@1.12.5: + resolution: {integrity: sha512-0GZ8reftwNQgIQLHkHjHEXTc/Z1NJm+YjsrBP+qhM/7yIZ3TEy9gJhuogDt2U0xIWwFgisTyzbtU7xNaQydtoA==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /turbo-darwin-arm64@1.12.4: - resolution: {integrity: sha512-1Uo5iI6xsJ1j9ObsqxYRsa3W26mEbUe6fnj4rQYV6kDaqYD54oAMJ6hM53q9rB8JvFxwdrUXGp3PwTw9A0qqkA==} + /turbo-darwin-arm64@1.12.5: + resolution: {integrity: sha512-8WpOLNNzvH6kohQOjihD+gaWL+ZFNfjvBwhOF0rjEzvW+YR3Pa7KjhulrjWyeN2yMFqAPubTbZIGOz1EVXLuQA==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /turbo-linux-64@1.12.4: - resolution: {integrity: sha512-ONg2aSqKP7LAQOg7ysmU5WpEQp4DGNxSlAiR7um+LKtbmC/UxogbR5+T+Uuq6zGuQ5kJyKjWJ4NhtvUswOqBsA==} + /turbo-linux-64@1.12.5: + resolution: {integrity: sha512-INit73+bNUpwqGZCxgXCR3I+cQsdkQ3/LkfkgSOibkpg+oGqxJRzeXw3sp990d7SCoE8QOcs3iw+PtiFX/LDAA==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /turbo-linux-arm64@1.12.4: - resolution: {integrity: sha512-9FPufkwdgfIKg/9jj87Cdtftw8o36y27/S2vLN7FTR2pp9c0MQiTBOLVYadUr1FlShupddmaMbTkXEhyt9SdrA==} + /turbo-linux-arm64@1.12.5: + resolution: {integrity: sha512-6lkRBvxtI/GQdGtaAec9LvVQUoRw6nXFp0kM+Eu+5PbZqq7yn6cMkgDJLI08zdeui36yXhone8XGI8pHg8bpUQ==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /turbo-windows-64@1.12.4: - resolution: {integrity: sha512-2mOtxHW5Vjh/5rDVu/aFwsMzI+chs8XcEuJHlY1sYOpEymYTz+u6AXbnzRvwZFMrLKr7J7fQOGl+v96sLKbNdA==} + /turbo-windows-64@1.12.5: + resolution: {integrity: sha512-gQYbOhZg5Ww0bQ/bC0w/4W6yQRwBumUUnkB+QPo15VznwxZe2a7bo6JM+9Xy9dKLa/kn+p7zTqme4OEp6M3/Yg==} cpu: [x64] os: [win32] requiresBuild: true dev: true optional: true - /turbo-windows-arm64@1.12.4: - resolution: {integrity: sha512-nOY5wae9qnxPOpT1fRuYO0ks6dTwpKMPV6++VkDkamFDLFHUDVM/9kmD2UTeh1yyrKnrZksbb9zmShhmfj1wog==} + /turbo-windows-arm64@1.12.5: + resolution: {integrity: sha512-auvhZ9FrhnvQ4mgBlY9O68MT4dIfprYGvd2uPICba/mHUZZvVy5SGgbHJ0KbMwaJfnnFoPgLJO6M+3N2gDprKw==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /turbo@1.12.4: - resolution: {integrity: sha512-yUJ7elEUSToiGwFZogXpYKJpQ0BvaMbkEuQECIWtkBLcmWzlMOt6bActsIm29oN83mRU0WbzGt4e8H1KHWedhg==} + /turbo@1.12.5: + resolution: {integrity: sha512-FATU5EnhrYG8RvQJYFJnDd18DpccDjyvd53hggw9T9JEg9BhWtIEoeaKtBjYbpXwOVrJQMDdXcIB4f2nD3QPPg==} hasBin: true optionalDependencies: - turbo-darwin-64: 1.12.4 - turbo-darwin-arm64: 1.12.4 - turbo-linux-64: 1.12.4 - turbo-linux-arm64: 1.12.4 - turbo-windows-64: 1.12.4 - turbo-windows-arm64: 1.12.4 + turbo-darwin-64: 1.12.5 + turbo-darwin-arm64: 1.12.5 + turbo-linux-64: 1.12.5 + turbo-linux-arm64: 1.12.5 + turbo-windows-64: 1.12.5 + turbo-windows-arm64: 1.12.5 dev: true /tween-functions@1.2.0: