diff --git a/src/components/SubmissionConfirm/SubmissionConfirm.stories.tsx b/src/components/SubmissionConfirm/SubmissionConfirm.stories.tsx
index a29f08e3..c3e60837 100644
--- a/src/components/SubmissionConfirm/SubmissionConfirm.stories.tsx
+++ b/src/components/SubmissionConfirm/SubmissionConfirm.stories.tsx
@@ -1,8 +1,9 @@
import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
import { SubmissionConfirm } from './SubmissionConfirm';
-import { Button, useDisclosure } from '@chakra-ui/react';
+import { useDisclosure } from '@chakra-ui/react';
+import { Button } from '../ui/button';
export default {
title: 'components/SubmissionConfirm',
@@ -34,12 +35,12 @@ export default {
} as Meta
;
const Template: StoryFn = (args) => {
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const { onOpen, onClose, open } = useDisclosure();
return (
Trigger}
/>
diff --git a/src/components/SubmissionConfirm/SubmissionConfirm.test.tsx b/src/components/SubmissionConfirm/SubmissionConfirm.test.tsx
index f6991886..57830e93 100644
--- a/src/components/SubmissionConfirm/SubmissionConfirm.test.tsx
+++ b/src/components/SubmissionConfirm/SubmissionConfirm.test.tsx
@@ -11,7 +11,7 @@ const defaultProps: SubmissionConfirmProps = {
submissionText: 'Submit',
cancelText: 'Cancel',
trigger: ,
- isOpen: false,
+ isOpen: true,
onCancel: cancelSpy,
onSubmit: submitSpy,
};
diff --git a/src/components/SubmissionConfirm/SubmissionConfirm.tsx b/src/components/SubmissionConfirm/SubmissionConfirm.tsx
index 344e40da..a890a258 100644
--- a/src/components/SubmissionConfirm/SubmissionConfirm.tsx
+++ b/src/components/SubmissionConfirm/SubmissionConfirm.tsx
@@ -1,14 +1,7 @@
-import {
- Button,
- Flex,
- Heading,
- Popover,
- PopoverBody,
- PopoverContent,
- PopoverTrigger,
- Text,
-} from '@chakra-ui/react';
+import { Box, Flex, Heading, Popover } from '@chakra-ui/react';
import React from 'react';
+import { Button } from '../ui/button';
+import { Text } from '../ui/text';
export interface SubmissionConfirmProps {
trigger: JSX.Element;
@@ -28,10 +21,7 @@ export interface SubmissionConfirmProps {
| 'right-start'
| 'right-end'
| 'left-start'
- | 'left-end'
- | 'auto'
- | 'auto-start'
- | 'auto-end';
+ | 'left-end';
isOpen: boolean;
onCancel: () => void;
onSubmit: () => void;
@@ -52,36 +42,50 @@ export const SubmissionConfirm: React.FC = ({
onCancel,
onSubmit,
}: SubmissionConfirmProps) => (
-
- {trigger}
-
-
- {title}
- {text && (
-
- {text}
-
- )}
-
-
-
-
-
-
-
+ {
+ if (!details.open) {
+ onCancel();
+ }
+ }}
+ >
+ {trigger}
+
+
+
+
+ {title}
+ {text && (
+
+ {text}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx
index 43a5f075..a6048ea8 100644
--- a/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx
+++ b/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
import { TextCardWithIcon } from './TextCardWithIcon';
-import { Heart } from '@phosphor-icons/react';
+import { HeartIcon } from '@phosphor-icons/react';
import { storybookCoverUrl } from '../../test/storybookMedia';
export default {
@@ -11,7 +11,7 @@ export default {
args: {
title: 'Title',
text: 'Text',
- icon: ,
+ icon: ,
},
} as Meta;
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.tsx
index 33910a5f..2e64f2fd 100644
--- a/src/components/TextCardWithIcon/TextCardWithIcon.tsx
+++ b/src/components/TextCardWithIcon/TextCardWithIcon.tsx
@@ -1,6 +1,5 @@
import { Box, Heading, Text, Flex, Button } from '@chakra-ui/react';
import React, { ReactNode } from 'react';
-import { css } from '@emotion/react';
export interface TextCardWithIconProps {
title: string;
@@ -70,13 +69,11 @@ export const TextCardWithIcon: React.FC = ({
position="relative"
height="36"
width="full"
- css={css`
- & span,
- div,
- img {
- border-radius: var(--boemly-radii-xl);
- }
- `}
+ css={{
+ '& span, div, img': {
+ borderRadius: 'var(--boemly-radii-xl)',
+ },
+ }}
>
{image}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..4161a429
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,13 @@
+import {
+ Button as ChakraButton,
+ type ButtonProps as ChakraButtonProps,
+ RecipeVariantProps,
+} from '@chakra-ui/react';
+import { buttonRecipe } from '../../constants/componentCustomizations';
+
+// Auto-inferred from the recipe!
+type ButtonVariantProps = RecipeVariantProps;
+
+export type ButtonProps = Omit & ButtonVariantProps;
+
+export const Button = ChakraButton as React.FC;
diff --git a/src/components/ui/provider.tsx b/src/components/ui/provider.tsx
new file mode 100644
index 00000000..6cc8e6b1
--- /dev/null
+++ b/src/components/ui/provider.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { ChakraProvider, SystemContext } from '@chakra-ui/react';
+import * as React from 'react';
+import defaultTheme from '../../theme';
+
+interface ProviderProps {
+ children: React.ReactNode;
+ theme?: SystemContext;
+}
+
+export function Provider({ children, theme }: ProviderProps) {
+ return {children};
+}
diff --git a/src/components/ui/text.tsx b/src/components/ui/text.tsx
new file mode 100644
index 00000000..780686bc
--- /dev/null
+++ b/src/components/ui/text.tsx
@@ -0,0 +1,11 @@
+import { Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
+import TextSize from '../../types/TextSize';
+import React from 'react';
+
+export interface TextProps extends Omit {
+ size?: TextSize;
+}
+
+export const Text: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..45496833
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+import {
+ Toaster as ChakraToaster,
+ Portal,
+ Spinner,
+ Stack,
+ Toast,
+ createToaster,
+} from '@chakra-ui/react';
+
+// Extended toast type with custom render support
+interface ToastWithRender {
+ meta?: {
+ render?: (toast: unknown) => ReactNode;
+ };
+}
+
+export const toaster = createToaster({
+ placement: 'bottom-end',
+ pauseOnPageIdle: true,
+});
+
+export const Toaster = () => (
+
+
+ {(toast) => {
+ const toastWithRender = toast as typeof toast & ToastWithRender;
+
+ // Support custom render function via meta - render directly without Toast.Root wrapper
+ if (toastWithRender.meta?.render) {
+ return toastWithRender.meta.render(toast);
+ }
+
+ // Default toast template
+ return (
+
+ {toast.type === 'loading' ? (
+
+ ) : (
+
+ )}
+
+ {toast.title && {toast.title}}
+ {toast.description && {toast.description}}
+
+ {toast.action && {toast.action.label}}
+ {toast.closable && }
+
+ );
+ }}
+
+
+);
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..bbfbf0d3
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,63 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+ showArrow?: boolean;
+ portalled?: boolean;
+ portalRef?: React.RefObject;
+ content: React.ReactNode;
+ contentProps?: ChakraTooltip.ContentProps;
+ disabled?: boolean;
+ placement?:
+ | 'top'
+ | 'top-start'
+ | 'top-end'
+ | 'right'
+ | 'right-start'
+ | 'right-end'
+ | 'bottom'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left'
+ | 'left-start'
+ | 'left-end';
+}
+
+export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+ const {
+ showArrow,
+ children,
+ disabled,
+ portalled = true,
+ content,
+ contentProps,
+ portalRef,
+ placement,
+ ...rest
+ } = props;
+
+ if (disabled || !content) return <>{children};
+
+ return (
+
+ {children}
+
+
+
+ {showArrow && (
+
+
+
+ )}
+ {content}
+
+
+
+
+ );
+});
diff --git a/src/constants/buttonVariants.ts b/src/constants/buttonVariants.ts
index d78b5de6..63f8de62 100644
--- a/src/constants/buttonVariants.ts
+++ b/src/constants/buttonVariants.ts
@@ -1,3 +1,5 @@
+import type { ButtonVariant } from '../types/ButtonVariant';
+
export const BUTTON_VARIANTS: ButtonVariant[] = [
'ghost',
'link',
diff --git a/src/constants/colorSchemes.ts b/src/constants/colorPalettes.ts
similarity index 53%
rename from src/constants/colorSchemes.ts
rename to src/constants/colorPalettes.ts
index 0fe2b23b..e548e74c 100644
--- a/src/constants/colorSchemes.ts
+++ b/src/constants/colorPalettes.ts
@@ -1,4 +1,6 @@
-export const COLOR_SCHEMES: ButtonColorScheme[] = [
+import type { ButtonColorPalettes } from '../types/ButtonColorScheme';
+
+export const COLOR_PALETTES: ButtonColorPalettes[] = [
'primary',
'whiteAlpha',
'blackAlpha',
@@ -12,10 +14,4 @@ export const COLOR_SCHEMES: ButtonColorScheme[] = [
'cyan',
'purple',
'pink',
- 'linkedin',
- 'facebook',
- 'messenger',
- 'whatsapp',
- 'twitter',
- 'telegram',
];
diff --git a/src/constants/componentCustomizations.tsx b/src/constants/componentCustomizations.tsx
index 8dcc1831..f30b3956 100644
--- a/src/constants/componentCustomizations.tsx
+++ b/src/constants/componentCustomizations.tsx
@@ -1,330 +1,229 @@
+import { defineRecipe, defineSlotRecipe } from '@chakra-ui/react';
import BorderBottomStyles from '../types/BorderBottomStyles';
import { FONT_SIZES } from './customizations';
+import {
+ accordionAnatomy,
+ alertAnatomy,
+ avatarAnatomy,
+ checkboxAnatomy,
+ fieldAnatomy,
+ listAnatomy,
+ menuAnatomy,
+ numberInputAnatomy,
+ popoverAnatomy,
+ progressAnatomy,
+ radioGroupAnatomy,
+ tableAnatomy,
+ tagAnatomy,
+ tooltipAnatomy,
+} from '@chakra-ui/react/anatomy';
-export const CustomizedHeading = {
- baseStyle: {
- fontWeight: 'semibold',
- color: 'black',
- },
- sizes: {
- '4xl': {
- fontSize: ['5xl', null, null, '7xl'],
- lineHeight: ['9', null, null, '11'],
- fontFamily: 'var(--boemly-fonts-display)',
- fontWeight: 'bold',
- },
- '3xl': {
- fontSize: ['3xl', null, null, '6xl'],
- lineHeight: ['9', null, null, '10'],
- fontFamily: 'var(--boemly-fonts-display)',
- fontWeight: 'bold',
- },
- '2xl': {
- fontSize: '4xl',
- lineHeight: '9',
- },
- '2xlMono': {
- fontSize: '4xl',
- lineHeight: '9',
- fontFamily: 'var(--boemly-fonts-mono)',
- },
- xl: { fontSize: '2xl', lineHeight: '7' },
- lg: { fontSize: 'xl', lineHeight: '5' },
- md: { fontSize: 'lg', lineHeight: '4' },
- sm: { fontSize: 'md', lineHeight: '3' },
- xs: { fontSize: 'sm', lineHeight: '1' },
- },
-};
-
-export const CustomizedText = {
- baseStyle: {
+export const textRecipe = defineRecipe({
+ base: {
color: 'gray.500',
},
- sizes: {
- xlRegularNormal: {
- fontSize: ['xl', null, null, '4xl'],
- lineHeight: ['8', null, null, '10'],
- },
- xlRegularNormalBold: {
- fontSize: ['xl', null, null, '4xl'],
- lineHeight: ['8', null, null, '10'],
- fontWeight: '600',
- },
- xlLowNormal: {
- fontSize: ['xl', null, null, '4xl'],
- lineHeight: ['5', null, null, '9'],
- },
- xlLowBold: {
- fontSize: ['xl', null, null, '4xl'],
- lineHeight: ['5', null, null, '9'],
- fontWeight: '600',
- },
- xlMonoNormal: {
- fontSize: ['xl', null, null, '4xl'],
- lineHeight: ['8', null, null, '10'],
- fontFamily: 'var(--boemly-fonts-mono)',
- },
- xlMonoUppercase: {
- fontSize: ['xl', null, null, '4xl'],
- lineHeight: ['8', null, null, '10'],
- fontFamily: 'var(--boemly-fonts-mono)',
- textTransform: 'uppercase',
- },
-
- lgRegularNormal: {
- fontSize: 'xl',
- lineHeight: '8',
- },
- lgRegularNormalBold: {
- fontSize: 'xl',
- lineHeight: '8',
- fontWeight: '600',
- },
- lgLowNormal: {
- fontSize: 'xl',
- lineHeight: '5',
- },
- lgLowBold: {
- fontSize: 'xl',
- lineHeight: '5',
- fontWeight: '600',
- },
- lgMonoNormal: {
- fontSize: 'xl',
- lineHeight: '8',
- fontFamily: 'var(--boemly-fonts-mono)',
- },
- lgMonoUppercase: {
- fontSize: 'xl',
- lineHeight: '8',
- fontFamily: 'var(--boemly-fonts-mono)',
- textTransform: 'uppercase',
- },
-
- mdRegularNormal: {
- fontSize: 'md',
- lineHeight: '6',
- },
- mdRegularNormalBold: {
- fontSize: 'md',
- lineHeight: '6',
- fontWeight: '600',
- },
- mdLowNormal: {
- fontSize: 'md',
- lineHeight: '6',
- },
- mdLowBold: {
- fontSize: 'md',
- lineHeight: '6',
- fontWeight: '600',
- },
- mdMonoNormal: {
- fontSize: 'md',
- lineHeight: '6',
- fontFamily: 'var(--boemly-fonts-mono)',
- },
- mdMonoUppercase: {
- fontSize: 'md',
- lineHeight: '6',
- fontFamily: 'var(--boemly-fonts-mono)',
- textTransform: 'uppercase',
- },
-
- smRegularNormal: {
- fontSize: 'sm',
- lineHeight: '4',
- },
- smRegularNormalBold: {
- fontSize: 'sm',
- lineHeight: '4',
- fontWeight: '600',
- },
- smLowNormal: {
- fontSize: 'sm',
- lineHeight: '1',
- },
- smLowBold: {
- fontSize: 'sm',
- lineHeight: '1',
- fontWeight: '600',
- },
- smMonoNormal: {
- fontSize: 'sm',
- lineHeight: '4',
- fontFamily: 'var(--boemly-fonts-mono)',
- },
- smMonoUppercase: {
- fontSize: 'sm',
- lineHeight: '4',
- fontFamily: 'var(--boemly-fonts-mono)',
- textTransform: 'uppercase',
- },
+ variants: {
+ size: {
+ xlRegularNormal: {
+ fontSize: '2xl',
+ lineHeight: '8',
+ },
+ xlRegularNormalBold: {
+ fontSize: '2xl',
+ lineHeight: '8',
+ fontWeight: '600',
+ },
+ xlLowNormal: {
+ fontSize: '2xl',
+ lineHeight: '5',
+ },
+ xlLowBold: {
+ fontSize: '2xl',
+ lineHeight: '5',
+ fontWeight: '600',
+ },
+ xlMonoNormal: {
+ fontSize: '2xl',
+ lineHeight: '8',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ },
+ xlMonoUppercase: {
+ fontSize: '2xl',
+ lineHeight: '8',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ textTransform: 'uppercase',
+ },
- xsRegularNormal: {
- fontSize: 'xs',
- lineHeight: '2',
- },
- xsRegularNormalBold: {
- fontSize: 'xs',
- lineHeight: '2',
- fontWeight: '600',
- },
- xsLowNormal: {
- fontSize: 'xs',
- lineHeight: '0',
- },
- xsLowBold: {
- fontSize: 'xs',
- lineHeight: '0',
- fontWeight: '600',
- },
- xsMonoNormal: {
- fontSize: 'xs',
- lineHeight: '2',
- fontFamily: 'var(--boemly-fonts-mono)',
- },
- xsMonoUppercase: {
- fontSize: 'xs',
- lineHeight: '2',
- fontFamily: 'var(--boemly-fonts-mono)',
- textTransform: 'uppercase',
- },
- },
-};
+ lgRegularNormal: {
+ fontSize: 'xl',
+ lineHeight: '8',
+ },
+ lgRegularNormalBold: {
+ fontSize: 'xl',
+ lineHeight: '8',
+ fontWeight: '600',
+ },
+ lgLowNormal: {
+ fontSize: 'xl',
+ lineHeight: '5',
+ },
+ lgLowBold: {
+ fontSize: 'xl',
+ lineHeight: '5',
+ fontWeight: '600',
+ },
+ lgMonoNormal: {
+ fontSize: 'xl',
+ lineHeight: '8',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ },
+ lgMonoUppercase: {
+ fontSize: 'xl',
+ lineHeight: '8',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ textTransform: 'uppercase',
+ },
-export const CustomizedButton = {
- baseStyle: {
- borderRadius: 'xl',
- whiteSpace: 'normal',
- wordWrap: 'break-word',
- },
- variants: {
- solid: {
- color: 'black',
- },
- link: {
- color: 'black',
- textDecoration: 'none',
- _hover: {
- opacity: '0.8',
- textDecoration: 'none',
+ mdRegularNormal: {
+ fontSize: 'md',
+ lineHeight: '6',
},
- },
- outline: {
- color: 'black',
- borderColor: 'gray.200',
- borderWidth: '1px',
- borderStyle: 'solid',
- background: 'white',
- _hover: {
- background: 'gray.50',
+ mdRegularNormalBold: {
+ fontSize: 'md',
+ lineHeight: '6',
+ fontWeight: '600',
},
- _active: {
- background: 'gray.50',
+ mdLowNormal: {
+ fontSize: 'md',
+ lineHeight: '6',
},
- },
- outlineWhite: {
- color: 'white',
- borderColor: 'whiteAlpha.400',
- borderWidth: '1px',
- borderStyle: 'solid',
- _hover: {
- background: 'whiteAlpha.200',
- borderColor: 'whiteAlpha.800',
+ mdLowBold: {
+ fontSize: 'md',
+ lineHeight: '6',
+ fontWeight: '600',
},
- _active: {
- background: 'whiteAlpha.300',
- borderColor: 'whiteAlpha.800',
+ mdMonoNormal: {
+ fontSize: 'md',
+ lineHeight: '6',
+ fontFamily: 'var(--boemly-fonts-mono)',
},
- },
- ghost: {
- color: 'black',
- _hover: {
- background: 'primary.50',
+ mdMonoUppercase: {
+ fontSize: 'md',
+ lineHeight: '6',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ textTransform: 'uppercase',
+ },
+
+ smRegularNormal: {
+ fontSize: 'sm',
+ lineHeight: '4',
+ },
+ smRegularNormalBold: {
+ fontSize: 'sm',
+ lineHeight: '4',
+ fontWeight: '600',
+ },
+ smLowNormal: {
+ fontSize: 'sm',
+ lineHeight: '1',
},
- _active: {
- background: 'primary.100',
+ smLowBold: {
+ fontSize: 'sm',
+ lineHeight: '1',
+ fontWeight: '600',
+ },
+ smMonoNormal: {
+ fontSize: 'sm',
+ lineHeight: '4',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ },
+ smMonoUppercase: {
+ fontSize: 'sm',
+ lineHeight: '4',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ textTransform: 'uppercase',
+ },
+
+ xsRegularNormal: {
+ fontSize: 'xs',
+ lineHeight: '2',
+ },
+ xsRegularNormalBold: {
+ fontSize: 'xs',
+ lineHeight: '2',
+ fontWeight: '600',
+ },
+ xsLowNormal: {
+ fontSize: 'xs',
+ lineHeight: '0',
+ },
+ xsLowBold: {
+ fontSize: 'xs',
+ lineHeight: '0',
+ fontWeight: '600',
+ },
+ xsMonoNormal: {
+ fontSize: 'xs',
+ lineHeight: '2',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ },
+ xsMonoUppercase: {
+ fontSize: 'xs',
+ lineHeight: '2',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ textTransform: 'uppercase',
},
},
},
- sizes: {
- xl: {
- h: 16,
- minW: 12,
- px: 6,
- ...CustomizedText.sizes.smLowBold,
- },
- lg: {
- h: 12,
- minW: 12,
- px: 6,
- ...CustomizedText.sizes.smLowBold,
- },
- md: {
- h: 10,
- minW: 10,
- px: 4,
- ...CustomizedText.sizes.smLowBold,
- },
- sm: {
- h: 8,
- minW: 8,
- borderRadius: 'lg',
- px: 3,
- ...CustomizedText.sizes.smLowBold,
- },
- xs: {
- h: 6,
- minW: 6,
- borderRadius: 'lg',
- px: 2,
- ...CustomizedText.sizes.xsLowBold,
- },
+});
+
+const inputsize = {
+ xl: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ px: '4',
+ height: '16',
+ borderRadius: 'xl',
},
- defaultProps: {
- colorScheme: 'primary',
- variant: 'solid',
+ lg: {
+ ...textRecipe.variants?.size.smLowNormal,
+ px: '4',
+ height: '12',
+ borderRadius: 'lg',
},
-};
-
-export const CustomizedLink = {
- baseStyle: {
- transition: 'opacity ease var(--medium-transition-duration)',
- textDecoration: 'underline',
-
- _hover: {
- opacity: '0.8',
- },
+ md: {
+ ...textRecipe.variants?.size.smLowNormal,
+ px: '4',
+ height: '10',
+ borderRadius: 'lg',
},
- sizes: {
- lg: {
- fontSize: 'lg',
- },
- md: {
- fontSize: 'md',
- },
- sm: {
- fontSize: 'sm',
- },
- xs: {
- fontSize: 'xs',
- },
+ sm: {
+ ...textRecipe.variants?.size.smLowNormal,
+ px: '3',
+ height: '8',
+ borderRadius: 'md',
},
- defaultProps: {
- size: 'sm',
+ xs: {
+ ...textRecipe.variants?.size.xsLowNormal,
+ px: '2',
+ height: '6',
+ borderRadius: 'md',
},
};
-export const CustomizedAccordion = {
- baseStyle: {
- icon: {
+export const accordionSlotRecipe = defineSlotRecipe({
+ className: 'accordion',
+ slots: accordionAnatomy.keys(),
+ base: {
+ itemIndicator: {
fontSize: '1rem',
borderRadius: 'lg',
width: '1.5rem',
height: '1.5rem',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
},
- button: {
+ itemTrigger: {
fontWeight: 'semibold',
borderRadius: 'md',
paddingX: '0',
@@ -332,470 +231,846 @@ export const CustomizedAccordion = {
bg: 'unset',
},
},
- container: {
+ item: {
paddingX: '0',
paddingTop: '6',
paddingBottom: '5',
},
- panel: {
+ itemContent: {
paddingX: '0',
paddingY: '2',
},
},
+
variants: {
- white: {
- icon: {
- color: 'primary.700',
- background: 'white',
+ visual: {
+ white: {
+ itemIndicator: {
+ color: 'primary.700',
+ background: 'white',
+ },
+ itemContent: {
+ borderColor: 'whiteAlpha.300',
+ },
},
- container: {
- borderColor: 'whiteAlpha.300',
+ black: {
+ itemIndicator: {
+ color: 'white',
+ background: 'black',
+ },
+ itemContent: {
+ borderColor: 'gray.300',
+ },
},
},
- black: {
- icon: {
- color: 'white',
- background: 'black',
+ },
+
+ defaultVariants: {
+ visual: 'black',
+ },
+});
+
+export const alertSlotRecipe = defineSlotRecipe({
+ slots: alertAnatomy.keys(),
+ base: {
+ root: {
+ borderRadius: 'md',
+ },
+ indicator: {
+ alignSelf: 'center',
+ },
+ title: {
+ ...textRecipe.variants?.size.mdRegularNormalBold,
+ color: 'black',
+ },
+ description: {
+ ...textRecipe.variants?.size.mdRegularNormal,
+ color: 'gray.700',
+ marginTop: '-4px',
+ },
+ },
+});
+
+export const avatarSlotRecipe = defineSlotRecipe({
+ slots: avatarAnatomy.keys(),
+ base: {
+ image: {
+ borderRadius: 'xl',
+ },
+ },
+
+ variants: {
+ size: {
+ sm: {
+ root: {
+ w: '2.5rem',
+ h: '2.5rem',
+ },
},
- container: {
- borderColor: 'gray.300',
+ md: {
+ root: {
+ w: '3.5rem',
+ h: '3.5rem',
+ },
+ },
+ lg: {
+ root: {
+ w: '4.5rem',
+ h: '4.5rem',
+ },
+ },
+ xl: {
+ root: {
+ w: '5.5rem',
+ h: '5.5rem',
+ },
},
},
},
- defaultProps: {
- variant: 'black',
+ defaultVariants: {
+ size: 'md',
},
-};
+});
-const inputSizes = {
- xl: {
- ...CustomizedText.sizes.mdLowNormal,
- px: '4',
- height: '16',
+export const buttonRecipe = defineRecipe({
+ base: {
borderRadius: 'xl',
+ whiteSpace: 'normal',
+ wordWrap: 'break-word',
},
- lg: {
- ...CustomizedText.sizes.smLowNormal,
- px: '4',
- height: '12',
- borderRadius: 'lg',
- },
- md: {
- ...CustomizedText.sizes.smLowNormal,
- px: '4',
- height: '10',
- borderRadius: 'lg',
+
+ variants: {
+ variant: {
+ solid: {
+ color: 'black',
+ },
+ link: {
+ color: 'black',
+ textDecoration: 'none',
+ _hover: {
+ opacity: '0.8',
+ textDecoration: 'none',
+ },
+ },
+ outline: {
+ color: 'black',
+ borderColor: 'gray.200',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ background: 'white',
+ _hover: {
+ background: 'gray.50',
+ },
+ _active: {
+ background: 'gray.50',
+ },
+ },
+ outlineWhite: {
+ color: 'white',
+ borderColor: 'whiteAlpha.400',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ _hover: {
+ background: 'whiteAlpha.200',
+ borderColor: 'whiteAlpha.800',
+ },
+ _active: {
+ background: 'whiteAlpha.300',
+ borderColor: 'whiteAlpha.800',
+ },
+ },
+ ghost: {
+ color: 'black',
+ _hover: {
+ background: 'primary.50',
+ },
+ _active: {
+ background: 'primary.100',
+ },
+ },
+ },
+ size: {
+ xl: {
+ h: 16,
+ minW: 12,
+ px: 6,
+ ...textRecipe.variants?.size.smLowBold,
+ },
+ lg: {
+ h: 12,
+ minW: 12,
+ px: 6,
+ ...textRecipe.variants?.size.smLowBold,
+ },
+ md: {
+ h: 10,
+ minW: 10,
+ px: 4,
+ ...textRecipe.variants?.size.smLowBold,
+ },
+ sm: {
+ h: 8,
+ minW: 8,
+ borderRadius: 'lg',
+ px: 3,
+ ...textRecipe.variants?.size.smLowBold,
+ },
+ xs: {
+ h: 6,
+ minW: 6,
+ borderRadius: 'lg',
+ px: 2,
+ ...textRecipe.variants?.size.xsLowBold,
+ },
+ },
},
- sm: {
- ...CustomizedText.sizes.smLowNormal,
- px: '3',
- height: '8',
- borderRadius: 'md',
+
+ defaultVariants: {
+ variant: 'solid',
},
- xs: {
- ...CustomizedText.sizes.xsLowNormal,
- px: '2',
- height: '6',
- borderRadius: 'md',
+});
+
+export const checkboxSlotRecipe = defineSlotRecipe({
+ slots: checkboxAnatomy.keys(),
+ base: {
+ root: {
+ display: 'inline-flex',
+ gap: '2',
+ alignItems: 'center',
+ verticalAlign: 'top',
+ position: 'relative',
+ },
+
+ control: {
+ backgroundColor: 'white',
+ },
},
-};
-export const CustomizedInput = {
- sizes: {
- xl: {
- field: inputSizes.xl,
- addon: inputSizes.xl,
+ variants: {
+ size: {
+ sm: {
+ label: {
+ ...textRecipe.variants?.size.smLowNormal,
+ },
+ icon: {
+ w: '4',
+ h: '4',
+ },
+ control: {
+ w: '4',
+ h: '4',
+ },
+ },
+ md: {
+ icon: {
+ w: '5',
+ h: '5',
+ },
+ control: {
+ w: '5',
+ h: '5',
+ },
+ label: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ },
+ },
+ lg: {
+ icon: {
+ w: '6',
+ h: '6',
+ },
+ control: {
+ w: '6',
+ h: '6',
+ },
+ label: {
+ ...textRecipe.variants?.size.lgLowNormal,
+ },
+ },
+ xl: {
+ icon: {
+ w: '8',
+ h: '8',
+ },
+ control: {
+ w: '8',
+ h: '8',
+ },
+ label: {
+ ...textRecipe.variants?.size.xlLowNormal,
+ },
+ },
},
- lg: {
- field: inputSizes.lg,
- addon: inputSizes.lg,
+ },
+ defaultVariants: {
+ size: 'md',
+ },
+});
+
+export const fieldSlotRecipe = defineSlotRecipe({
+ slots: fieldAnatomy.keys(),
+ base: {
+ label: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ color: 'gray.800',
},
- md: {
- field: inputSizes.md,
- addon: inputSizes.md,
+ helperText: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ color: 'gray.600',
},
- sm: {
- field: inputSizes.sm,
- addon: inputSizes.sm,
+ errorText: {
+ ...textRecipe.variants?.size.smRegularNormal,
},
},
- defaultProps: {
- size: 'lg',
- focusBorderColor: 'black',
+});
+
+export const headingRecipe = defineRecipe({
+ base: {
+ fontWeight: 'semibold',
+ color: 'black',
},
-};
+ variants: {
+ size: {
+ '4xl': {
+ fontSize: ['5xl', null, null, '7xl'],
+ lineHeight: ['9', null, null, '11'],
+ fontFamily: 'var(--boemly-fonts-display)',
+ fontWeight: 'bold',
+ },
+ '3xl': {
+ fontSize: ['3xl', null, null, '6xl'],
+ lineHeight: ['9', null, null, '10'],
+ fontFamily: 'var(--boemly-fonts-display)',
+ fontWeight: 'bold',
+ },
+ '2xl': {
+ fontSize: '4xl',
+ lineHeight: '9',
+ },
+ '2xlMono': {
+ fontSize: '4xl',
+ lineHeight: '9',
+ fontFamily: 'var(--boemly-fonts-mono)',
+ },
+ xl: { fontSize: '2xl', lineHeight: '7' },
+ lg: { fontSize: 'xl', lineHeight: '5' },
+ md: { fontSize: 'lg', lineHeight: '4' },
+ sm: { fontSize: 'md', lineHeight: '3' },
+ xs: { fontSize: 'sm', lineHeight: '1' },
+ },
+ },
+});
-export const CustomizedNumberInput = {
- sizes: CustomizedInput.sizes,
- defaultProps: {
- size: 'lg',
- focusBorderColor: 'black',
+export const inputRecipe = defineRecipe({
+ base: {
+ width: '100%',
+ borderRadius: 'md',
+ '--focus-color': 'black',
+ _invalid: {
+ borderWidth: '2px',
+ focusRingColor: 'black',
+ focusRingWidth: '0px',
+ },
+ _readOnly: {
+ _focus: {
+ focusRingWidth: '0px',
+ },
+ },
+ },
+ variants: {
+ size: {
+ sm: {
+ ...textRecipe.variants?.size.smLowNormal,
+ '--input-height': 'sizes.8',
+ },
+ md: {
+ ...textRecipe.variants?.size.smLowNormal,
+ '--input-height': 'sizes.10',
+ },
+ lg: {
+ ...textRecipe.variants?.size.smLowNormal,
+ '--input-height': 'sizes.12',
+ },
+ xl: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ '--input-height': 'sizes.16',
+ borderRadius: 'xl',
+ },
+ },
},
-};
-export const CustomizedPinInput = {
- sizes: {
- xl: {
- fontSize: inputSizes.xl.fontSize,
- w: inputSizes.xl.height,
- h: inputSizes.xl.height,
- borderRadius: inputSizes.xl.borderRadius,
- },
- lg: {
- fontSize: inputSizes.lg.fontSize,
- w: inputSizes.lg.height,
- h: inputSizes.lg.height,
- borderRadius: inputSizes.lg.borderRadius,
- },
- md: {
- fontSize: inputSizes.md.fontSize,
- w: inputSizes.md.height,
- h: inputSizes.md.height,
- borderRadius: inputSizes.md.borderRadius,
- },
- sm: {
- fontSize: inputSizes.sm.fontSize,
- w: inputSizes.sm.height,
- h: inputSizes.sm.height,
- borderRadius: inputSizes.sm.borderRadius,
- },
- },
- defaultProps: {
+ defaultVariants: {
size: 'lg',
- focusBorderColor: 'black',
},
-};
+});
-export const CustomizedProgress = {
- baseStyle: {
- track: {
- borderRadius: 'full',
- },
+export const inputAddonRecipe = defineRecipe({
+ base: {
+ borderRadius: 'md',
},
-};
+});
-export const CustomizedTextarea = {
- sizes: {
- xl: {
- ...CustomizedText.sizes.mdRegularNormal,
- py: '2',
- px: '4',
- borderRadius: 'xl',
+export const linkRecipe = defineRecipe({
+ base: {
+ transition: 'opacity ease var(--medium-transition-duration)',
+ textDecoration: 'underline',
+
+ _hover: {
+ opacity: '0.8',
},
- lg: {
- ...CustomizedText.sizes.mdLowNormal,
- py: '2',
- px: '4',
- borderRadius: 'lg',
+ _focus: {
+ focusRingWidth: '0',
},
- md: {
- ...CustomizedText.sizes.smRegularNormal,
- py: '2',
- px: '4',
- borderRadius: 'lg',
- },
- sm: {
- ...CustomizedText.sizes.smLowNormal,
- py: '2',
- px: '3',
- borderRadius: 'md',
+ },
+
+ variants: {
+ size: {
+ lg: {
+ fontSize: 'lg',
+ },
+ md: {
+ fontSize: 'md',
+ },
+ sm: {
+ fontSize: 'sm',
+ },
+ xs: {
+ fontSize: 'xs',
+ },
},
},
- defaultProps: {
- size: 'lg',
- focusBorderColor: 'black',
+
+ defaultVariants: {
+ size: 'sm',
},
-};
+});
-export const CustomizedSelect = {
- sizes: {
- xs: {
- height: inputSizes.xs.height,
- fontSize: inputSizes.xs.fontSize,
- borderRadius: inputSizes.xs.borderRadius,
- badgeSize: FONT_SIZES.xs,
- },
- sm: {
- ...CustomizedText.sizes.smLowNormal,
- height: inputSizes.sm.height,
- fontSize: inputSizes.sm.fontSize,
- borderRadius: inputSizes.sm.borderRadius,
- badgeSize: FONT_SIZES.xs,
- },
- md: {
- ...CustomizedText.sizes.smRegularNormal,
- height: inputSizes.md.height,
- fontSize: inputSizes.md.fontSize,
- borderRadius: inputSizes.md.borderRadius,
- badgeSize: FONT_SIZES.xs,
- },
- lg: {
- ...CustomizedText.sizes.mdLowNormal,
- height: inputSizes.lg.height,
- fontSize: inputSizes.lg.fontSize,
- borderRadius: inputSizes.lg.borderRadius,
- badgeSize: FONT_SIZES.sm,
- },
- xl: {
- ...CustomizedText.sizes.mdLowNormal,
- height: inputSizes.lg.height,
- fontSize: inputSizes.lg.fontSize,
- borderRadius: inputSizes.lg.borderRadius,
- badgeSize: FONT_SIZES.lg,
+export const listSlotRecipe = defineSlotRecipe({
+ slots: listAnatomy.keys(),
+ base: {
+ indicator: {
+ backgroundColor: 'primary.50',
+ width: '6',
+ height: '6',
+ borderRadius: 'lg',
+ float: 'left',
+ mr: '4',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
},
},
variants: {
- filled: {
- backgroundColor: 'gray.100',
- border: '0.063rem',
- borderColor: 'transparent',
- borderRadius: 'md',
- borderBottomWidth: '0.063rem',
- borderBottomStyle: 'solid' as BorderBottomStyles,
- },
- unstyled: {
- backgroundColor: 'transparent',
- border: '0px',
- borderColor: 'white',
- borderRadius: '0px',
- borderBottomWidth: '0px',
- borderBottomStyle: 'solid' as BorderBottomStyles,
- },
- flushed: {
- backgroundColor: 'transparent',
- border: '0px',
- borderColor: 'gray.200',
- borderRadius: '0px',
- borderBottomWidth: '0.063rem',
- borderBottomStyle: 'solid' as BorderBottomStyles,
+ visual: {
+ light: {
+ indicator: {
+ backgroundColor: 'primary.200',
+ },
+ },
+ },
+ },
+});
+
+export const menuSlotRecipe = defineSlotRecipe({
+ slots: menuAnatomy.keys(),
+ base: {
+ content: {
+ border: '1px solid',
+ borderColor: 'gray.100',
+ borderRadius: 'var(--boemly-radii-md)',
+ boxShadow: 'var(--boemly-shadows-sm)',
+ paddingTop: 'var(--boemly-spacing-2)',
+ paddingBottom: 'var(--boemly-spacing-2)',
},
- outline: {
- backgroundColor: 'transparent',
- border: '0.063rem solid',
+ },
+});
+
+export const popoverSlotRecipe = defineSlotRecipe({
+ slots: popoverAnatomy.keys(),
+ base: {
+ content: {
+ backgroundColor: 'white',
+ border: '0.63px solid',
borderColor: 'gray.200',
borderRadius: 'md',
- borderBottomWidth: '0.063rem',
- borderBottomStyle: 'solid' as BorderBottomStyles,
+ boxShadow: 'xs',
},
},
-};
+});
-export const CustomizedAvatar = {
- sizes: {
- '2xs': {
- container: {
- fontWeight: '600',
+export const numberInputSlotRecipe = defineSlotRecipe({
+ slots: numberInputAnatomy.keys(),
+ base: {
+ root: {
+ borderRadius: 'md',
+ },
+ input: {
+ '--focus-color': 'black',
+ },
+ incrementTrigger: {
+ borderTopRightRadius: 'md',
+ },
+ decrementTrigger: {
+ borderBottomRightRadius: 'md',
+ },
+ },
+ variants: {
+ size: {
+ xl: {
+ input: inputsize.xl,
+ control: {
+ fontSize: 'sm',
+ '--stepper-width': 'sizes.6',
+ },
},
- label: {
- fontWeight: '600',
+ lg: {
+ input: inputsize.lg,
+ control: {
+ fontSize: 'sm',
+ '--stepper-width': 'sizes.6',
+ },
},
- },
- xs: {
- container: {
- fontWeight: '600',
+ md: {
+ input: inputsize.md,
+ control: {
+ fontSize: 'sm',
+ '--stepper-width': 'sizes.6',
+ },
},
- label: {
- fontWeight: '600',
+ sm: {
+ input: inputsize.sm,
+ control: {
+ fontSize: 'xs',
+ '--stepper-width': 'sizes.5',
+ },
},
},
- sm: {
- container: {
- ...CustomizedText.sizes.xsLowBold,
+ },
+
+ defaultVariants: {
+ size: 'lg',
+ },
+});
+
+export const pinInputRecipe = defineRecipe({
+ variants: {
+ size: {
+ xl: {
+ fontSize: inputsize.xl.fontSize,
+ w: inputsize.xl.height,
+ h: inputsize.xl.height,
+ borderRadius: inputsize.xl.borderRadius,
},
- label: {
- ...CustomizedText.sizes.xsLowBold,
+ lg: {
+ fontSize: inputsize.lg.fontSize,
+ w: inputsize.lg.height,
+ h: inputsize.lg.height,
+ borderRadius: inputsize.lg.borderRadius,
},
- },
- md: {
- container: {
- width: '2.5rem',
- height: '2.5rem',
- ...CustomizedText.sizes.mdLowBold,
+ md: {
+ fontSize: inputsize.md.fontSize,
+ w: inputsize.md.height,
+ h: inputsize.md.height,
+ borderRadius: inputsize.md.borderRadius,
},
- excessLabel: {
- width: '2.5rem',
- height: '2.5rem',
+ sm: {
+ fontSize: inputsize.sm.fontSize,
+ w: inputsize.sm.height,
+ h: inputsize.sm.height,
+ borderRadius: inputsize.sm.borderRadius,
},
- label: {
- ...CustomizedText.sizes.mdLowBold,
+ },
+ },
+
+ defaultVariants: {
+ size: 'lg',
+ },
+});
+
+export const progressSlotRecipe = defineSlotRecipe({
+ slots: progressAnatomy.keys(),
+ base: {
+ root: {
+ borderRadius: 'full',
+ overflow: 'hidden', // Workaround because border radius on the track is not working
+ },
+ range: {
+ borderRadius: 'full',
+ },
+ },
+ variants: {
+ striped: {
+ true: {
+ range: {
+ backgroundImage:
+ 'linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)',
+ },
},
},
- lg: {
- container: {
- width: '3rem',
- height: '3rem',
- ...CustomizedText.sizes.mdLowBold,
+ },
+});
+
+export const radioGroupSlotRecipe = defineSlotRecipe({
+ slots: radioGroupAnatomy.keys(),
+ variants: {
+ size: {
+ sm: {
+ label: {
+ ...textRecipe.variants?.size.smLowNormal,
+ },
},
- excessLabel: {
- width: '3rem',
- height: '3rem',
+ md: {
+ label: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ },
},
- label: {
- ...CustomizedText.sizes.mdLowBold,
+ lg: {
+ label: {
+ ...textRecipe.variants?.size.lgLowNormal,
+ },
},
- },
- xl: {
- container: {
- width: '4rem',
- height: '4rem',
- ...CustomizedText.sizes.lgLowBold,
+ xl: {
+ label: {
+ ...textRecipe.variants?.size.xlLowNormal,
+ },
},
- excessLabel: {
- width: '4rem',
- height: '4rem',
+ },
+ },
+});
+
+export const selectRecipe = defineRecipe({
+ variants: {
+ size: {
+ xs: {
+ height: inputsize.xs.height,
+ fontSize: inputsize.xs.fontSize,
+ borderRadius: inputsize.xs.borderRadius,
+ badgeSize: FONT_SIZES.xs,
},
- label: {
- ...CustomizedText.sizes.lgLowBold,
+ sm: {
+ ...textRecipe.variants?.size.smLowNormal,
+ height: inputsize.sm.height,
+ fontSize: inputsize.sm.fontSize,
+ borderRadius: inputsize.sm.borderRadius,
+ badgeSize: FONT_SIZES.xs,
},
- },
- '2xl': {
- container: {
- width: '6rem',
- height: '6rem',
- ...CustomizedHeading.sizes.xl,
+ md: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ height: inputsize.md.height,
+ fontSize: inputsize.md.fontSize,
+ borderRadius: inputsize.md.borderRadius,
+ badgeSize: FONT_SIZES.xs,
},
- excessLabel: {
- width: '6rem',
- height: '6rem',
+ lg: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ height: inputsize.lg.height,
+ fontSize: inputsize.lg.fontSize,
+ borderRadius: inputsize.lg.borderRadius,
+ badgeSize: FONT_SIZES.sm,
},
- label: {
- ...CustomizedHeading.sizes.xl,
+ xl: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ height: inputsize.xl.height,
+ fontSize: inputsize.xl.fontSize,
+ borderRadius: inputsize.xl.borderRadius,
+ badgeSize: FONT_SIZES.lg,
},
},
- '3xl': {
- container: {
- width: '8rem',
- height: '8rem',
- ...CustomizedHeading.sizes['2xl'],
+ visual: {
+ filled: {
+ backgroundColor: 'gray.100',
+ border: '0.063rem',
+ borderColor: 'transparent',
+ borderRadius: 'md',
+ borderBottomWidth: '0.063rem',
+ borderBottomStyle: 'solid' as BorderBottomStyles,
},
- excessLabel: {
- width: '8rem',
- height: '8rem',
+ unstyled: {
+ backgroundColor: 'transparent',
+ border: '0px',
+ borderColor: 'white',
+ borderRadius: '0px',
+ borderBottomWidth: '0px',
+ borderBottomStyle: 'solid' as BorderBottomStyles,
},
- label: {
- ...CustomizedHeading.sizes['2xl'],
+ flushed: {
+ backgroundColor: 'transparent',
+ border: '0px',
+ borderColor: 'gray.200',
+ borderRadius: '0px',
+ borderBottomWidth: '0.063rem',
+ borderBottomStyle: 'solid' as BorderBottomStyles,
+ },
+ outline: {
+ backgroundColor: 'transparent',
+ border: '0.063rem solid',
+ borderColor: 'gray.200',
+ borderRadius: 'md',
+ borderBottomWidth: '0.063rem',
+ borderBottomStyle: 'solid' as BorderBottomStyles,
},
},
},
-};
+});
-export const CustomizedAlert = {
- baseStyle: {
- container: {
- borderRadius: 'md',
+export const textareaRecipe = defineRecipe({
+ base: {
+ _focus: {
+ focusRingColor: 'black',
},
},
-};
-
-export const CustomizedTooltip = {
- baseStyle: {
- borderRadius: 'lg',
- px: '4',
- py: '2',
- },
-};
-
-export const CustomizedCheckbox = {
- defaultProps: {
- colorScheme: 'primary',
- },
- baseStyle: {
- control: {
- backgroundColor: 'white',
- },
- },
- sizes: {
- xl: {
- icon: {
- w: '8',
- h: '8',
+ variants: {
+ size: {
+ xl: {
+ ...textRecipe.variants?.size.mdRegularNormal,
+ py: '2',
+ px: '4',
+ borderRadius: 'xl',
},
- control: {
- w: '8',
- h: '8',
+ lg: {
+ ...textRecipe.variants?.size.mdLowNormal,
+ py: '2',
+ px: '4',
+ borderRadius: 'lg',
},
- label: {
- fontSize: 'xl',
+ md: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ py: '2',
+ px: '4',
+ borderRadius: 'lg',
+ },
+ sm: {
+ ...textRecipe.variants?.size.smLowNormal,
+ py: '2',
+ px: '3',
+ borderRadius: 'md',
},
},
},
-};
-export const CustomizedTable = {
- baseStyle: {
- th: {
+ defaultVariants: {
+ size: 'lg',
+ },
+});
+
+export const tooltipSlotRecipe = defineSlotRecipe({
+ slots: tooltipAnatomy.keys(),
+ base: {
+ content: {
+ borderRadius: 'lg',
+ px: '4',
+ py: '2',
+ backgroundColor: 'gray.900',
+ fontSize: 'sm',
+ },
+ },
+});
+
+export const tableSlotRecipe = defineSlotRecipe({
+ className: 'table',
+ slots: tableAnatomy.keys(),
+ base: {
+ columnHeader: {
color: 'gray.500',
textTransform: 'unset',
letterSpacing: 'unset',
},
- td: {
+ cell: {
color: 'black',
},
},
- sizes: {
- sm: {
- th: {
- ...CustomizedText.sizes.smRegularNormalBold,
- },
- td: {
- ...CustomizedText.sizes.smRegularNormal,
- },
- caption: {
- ...CustomizedText.sizes.smRegularNormal,
+ variants: {
+ striped: {
+ true: {
+ row: {
+ background: 'unset',
+ '&:nth-of-type(odd) td': {
+ bg: 'gray.100',
+ },
+ },
},
},
- md: {
- th: {
- ...CustomizedText.sizes.smRegularNormalBold,
- },
- td: {
- ...CustomizedText.sizes.smRegularNormal,
- },
- caption: {
- ...CustomizedText.sizes.smRegularNormal,
+ variant: {
+ line: {
+ row: {
+ bg: 'transparent',
+ },
},
},
- lg: {
- th: {
- ...CustomizedText.sizes.lgRegularNormalBold,
+ size: {
+ sm: {
+ columnHeader: {
+ ...textRecipe.variants?.size.smRegularNormalBold,
+ },
+ cell: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ },
+ caption: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ },
},
- td: {
- ...CustomizedText.sizes.lgRegularNormal,
+ md: {
+ columnHeader: {
+ ...textRecipe.variants?.size.smRegularNormalBold,
+ },
+ cell: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ },
+ caption: {
+ ...textRecipe.variants?.size.smRegularNormal,
+ },
},
- caption: {
- ...CustomizedText.sizes.lgRegularNormal,
+ lg: {
+ columnHeader: {
+ ...textRecipe.variants?.size.lgRegularNormalBold,
+ },
+ cell: {
+ ...textRecipe.variants?.size.lgRegularNormal,
+ },
+ caption: {
+ ...textRecipe.variants?.size.lgRegularNormal,
+ },
},
},
- },
- variants: {
- minimal: {
- table: {
- backgroundColor: 'transparent',
- },
- th: {
- paddingX: '0',
- paddingY: '2',
- letterSpacing: 'normal',
- },
- td: {
- paddingX: '0',
- paddingY: '2',
+ visual: {
+ minimal: {
+ root: {
+ backgroundColor: 'transparent',
+ },
+ columnHeader: {
+ paddingX: '0',
+ paddingY: '2',
+ letterSpacing: 'normal',
+ },
+ cell: {
+ paddingX: '0',
+ paddingY: '2',
+ },
},
},
},
-};
+});
-export const CustomizedList = {
- baseStyle: {
- icon: {
- backgroundColor: 'primary.50',
+export const tagSlotRecipe = defineSlotRecipe({
+ slots: tagAnatomy.keys(),
+ base: {
+ root: {
+ borderRadius: 'md',
+ paddingX: '4px',
+ paddingY: '1px',
+ },
+ label: {
+ fontWeight: 'medium',
},
},
variants: {
- light: {
- icon: {
- backgroundColor: 'primary.200',
+ variant: {
+ outline: {
+ root: {
+ borderWidth: '1px',
+ borderColor: 'colorPalette.500',
+ },
},
},
},
-};
+});
diff --git a/src/constants/customizations.ts b/src/constants/customizations.ts
index ce5000d9..843629f7 100644
--- a/src/constants/customizations.ts
+++ b/src/constants/customizations.ts
@@ -1,194 +1,194 @@
import { BREAKPOINT_LG, BREAKPOINT_MD, BREAKPOINT_SM, BREAKPOINT_XL } from './breakpoints';
export const FONTS = {
- body: 'Inter, ui-sans-serif, system-ui, sans-serif',
- display: 'Raleway, ui-sans-serif, system-ui, sans-serif',
- heading: 'Inter, ui-sans-serif, system-ui, sans-serif',
- mono: 'Space Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+ body: { value: 'Inter, ui-sans-serif, system-ui, sans-serif' },
+ display: { value: 'Raleway, ui-sans-serif, system-ui, sans-serif' },
+ heading: { value: 'Inter, ui-sans-serif, system-ui, sans-serif' },
+ mono: { value: 'Space Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' },
};
export const FONT_SIZES = {
- xs: '0.75rem',
- sm: '0.875rem',
- md: '1rem',
- lg: '1.125rem',
- xl: '1.25rem',
- '2xl': '1.375rem',
- '3xl': '1.75rem',
- '4xl': '1.875rem',
- '5xl': '2rem',
- '6xl': '2.75rem',
- '7xl': '3.5rem',
- '8xl': '6rem',
- '9xl': '8rem',
+ xs: { value: '0.75rem' },
+ sm: { value: '0.875rem' },
+ md: { value: '1rem' },
+ lg: { value: '1.125rem' },
+ xl: { value: '1.25rem' },
+ '2xl': { value: '1.375rem' },
+ '3xl': { value: '1.75rem' },
+ '4xl': { value: '1.875rem' },
+ '5xl': { value: '2rem' },
+ '6xl': { value: '2.75rem' },
+ '7xl': { value: '3.5rem' },
+ '8xl': { value: '6rem' },
+ '9xl': { value: '8rem' },
};
export const LINE_HEIGHTS = {
- '0': '0.875rem',
- '1': '1rem',
- '2': '1.125rem',
- '3': '1.25rem',
- '4': '1.375rem',
- '5': '1.5rem',
- '6': '1.625rem',
- '7': '1.75rem',
- '8': '2rem',
- '9': '2.25rem',
- '10': '3.25rem',
- '11': '3.875rem',
+ '0': { value: '0.875rem' },
+ '1': { value: '1rem' },
+ '2': { value: '1.125rem' },
+ '3': { value: '1.25rem' },
+ '4': { value: '1.375rem' },
+ '5': { value: '1.5rem' },
+ '6': { value: '1.625rem' },
+ '7': { value: '1.75rem' },
+ '8': { value: '2rem' },
+ '9': { value: '2.25rem' },
+ '10': { value: '3.25rem' },
+ '11': { value: '3.875rem' },
};
export const COLORS = {
- black: '#121212',
+ black: { value: '#121212' },
primary: {
- 50: '#f3f6f5',
- 100: '#f2fcf7',
- 200: '#d0f2e3',
- 300: '#96E3BF',
- 400: '#6DD8A6',
- 500: '#14C072',
- 600: '#13B46C',
- 700: '#13A060',
- 800: '#108450',
- 900: '#0D7748',
+ 50: { value: '#f3f6f5' },
+ 100: { value: '#f2fcf7' },
+ 200: { value: '#d0f2e3' },
+ 300: { value: '#96E3BF' },
+ 400: { value: '#6DD8A6' },
+ 500: { value: '#14C072' },
+ 600: { value: '#13B46C' },
+ 700: { value: '#13A060' },
+ 800: { value: '#108450' },
+ 900: { value: '#0D7748' },
},
gray: {
- 50: '#F9FAF9',
- 100: '#F1F3F3',
- 200: '#DCE2DF',
- 300: '#CDD5D1',
- 400: '#BBC6C1',
- 500: '#5F6D65',
- 600: '#4C5751',
- 700: '#3B443F',
- 800: '#28332D',
- 900: '#18251E',
+ 50: { value: '#F9FAF9' },
+ 100: { value: '#F1F3F3' },
+ 200: { value: '#DCE2DF' },
+ 300: { value: '#CDD5D1' },
+ 400: { value: '#BBC6C1' },
+ 500: { value: '#5F6D65' },
+ 600: { value: '#4C5751' },
+ 700: { value: '#3B443F' },
+ 800: { value: '#28332D' },
+ 900: { value: '#18251E' },
},
red: {
- 50: '#FDF6F6',
- 100: '#FEE1E1',
- 200: '#FEB2B2',
- 300: '#E5817C',
- 400: '#E26F6A',
- 500: '#DC544C',
- 600: '#D83F37',
- 700: '#C82F28',
- 800: '#B82119',
- 900: '#A7130C',
+ 50: { value: '#FDF6F6' },
+ 100: { value: '#FEE1E1' },
+ 200: { value: '#FEB2B2' },
+ 300: { value: '#E5817C' },
+ 400: { value: '#E26F6A' },
+ 500: { value: '#DC544C' },
+ 600: { value: '#D83F37' },
+ 700: { value: '#C82F28' },
+ 800: { value: '#B82119' },
+ 900: { value: '#A7130C' },
},
blue: {
- 50: '#F0F4FA',
- 100: '#DAE6F3',
- 200: '#B6CDE7',
- 300: '#91B3DA',
- 400: '#5F90C9',
- 500: '#3D76B8',
- 600: '#396FAC',
- 700: '#2A517F',
- 800: '#24466C',
- 900: '#1C3654',
+ 50: { value: '#F0F4FA' },
+ 100: { value: '#DAE6F3' },
+ 200: { value: '#B6CDE7' },
+ 300: { value: '#91B3DA' },
+ 400: { value: '#5F90C9' },
+ 500: { value: '#3D76B8' },
+ 600: { value: '#396FAC' },
+ 700: { value: '#2A517F' },
+ 800: { value: '#24466C' },
+ 900: { value: '#1C3654' },
},
};
export const BREAKPOINTS = {
- sm: BREAKPOINT_SM,
- md: BREAKPOINT_MD,
- lg: BREAKPOINT_LG,
- xl: BREAKPOINT_XL,
+ sm: { value: BREAKPOINT_SM },
+ md: { value: BREAKPOINT_MD },
+ lg: { value: BREAKPOINT_LG },
+ xl: { value: BREAKPOINT_XL },
};
export const RADII = {
- none: '0',
- sm: '0.125rem',
- base: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- xl: '0.75rem',
- '2xl': '1.25rem',
- '3xl': '1.5rem',
- full: '9999px',
+ none: { value: '0' },
+ sm: { value: '0.125rem' },
+ base: { value: '0.25rem' },
+ md: { value: '0.375rem' },
+ lg: { value: '0.5rem' },
+ xl: { value: '0.75rem' },
+ '2xl': { value: '1.25rem' },
+ '3xl': { value: '1.5rem' },
+ full: { value: '9999px' },
};
export const Z_INDICES = {
- hide: -1,
- auto: 'auto',
- base: 0,
- aboveBase: 1,
- docked: 10,
- dropdown: 1000,
- sticky: 1100,
- banner: 1200,
- overlay: 1300,
- modal: 1400,
- popover: 1500,
- skipLink: 1600,
- toast: 1700,
- tooltip: 1800,
+ hide: { value: -1 },
+ auto: { value: 'auto' },
+ base: { value: 0 },
+ aboveBase: { value: 1 },
+ docked: { value: 10 },
+ dropdown: { value: 1000 },
+ sticky: { value: 1100 },
+ banner: { value: 1200 },
+ overlay: { value: 1300 },
+ modal: { value: 1400 },
+ popover: { value: 1500 },
+ skipLink: { value: 1600 },
+ toast: { value: 1700 },
+ tooltip: { value: 1800 },
};
export const SPACE = {
- px: '1px',
- 0.5: '0.125rem',
- 1: '0.25rem',
- 1.5: '0.375rem',
- 2: '0.5rem',
- 2.5: '0.625rem',
- 3: '0.75rem',
- 3.5: '0.875rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- 12: '3rem',
- 14: '3.5rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 28: '7rem',
- 32: '8rem',
- 36: '9rem',
- 40: '10rem',
- 44: '11rem',
- 48: '12rem',
- 52: '13rem',
- 56: '14rem',
- 60: '15rem',
- 64: '16rem',
- 72: '18rem',
- 80: '20rem',
- 96: '24rem',
- 136: '34rem',
+ px: { value: '1px' },
+ 0.5: { value: '0.125rem' },
+ 1: { value: '0.25rem' },
+ 1.5: { value: '0.375rem' },
+ 2: { value: '0.5rem' },
+ 2.5: { value: '0.625rem' },
+ 3: { value: '0.75rem' },
+ 3.5: { value: '0.875rem' },
+ 4: { value: '1rem' },
+ 5: { value: '1.25rem' },
+ 6: { value: '1.5rem' },
+ 7: { value: '1.75rem' },
+ 8: { value: '2rem' },
+ 9: { value: '2.25rem' },
+ 10: { value: '2.5rem' },
+ 12: { value: '3rem' },
+ 14: { value: '3.5rem' },
+ 16: { value: '4rem' },
+ 20: { value: '5rem' },
+ 24: { value: '6rem' },
+ 28: { value: '7rem' },
+ 32: { value: '8rem' },
+ 36: { value: '9rem' },
+ 40: { value: '10rem' },
+ 44: { value: '11rem' },
+ 48: { value: '12rem' },
+ 52: { value: '13rem' },
+ 56: { value: '14rem' },
+ 60: { value: '15rem' },
+ 64: { value: '16rem' },
+ 72: { value: '18rem' },
+ 80: { value: '20rem' },
+ 96: { value: '24rem' },
+ 136: { value: '34rem' },
};
export const SIZES_ONLY = {
- max: 'max-content',
- min: 'min-content',
- full: '100%',
- '3xs': '14rem',
- '2xs': '16rem',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- '7xl': '80rem',
- '8xl': '90rem',
+ max: { value: 'max-content' },
+ min: { value: 'min-content' },
+ full: { value: '100%' },
+ '3xs': { value: '14rem' },
+ '2xs': { value: '16rem' },
+ xs: { value: '20rem' },
+ sm: { value: '24rem' },
+ md: { value: '28rem' },
+ lg: { value: '32rem' },
+ xl: { value: '36rem' },
+ '2xl': { value: '42rem' },
+ '3xl': { value: '48rem' },
+ '4xl': { value: '56rem' },
+ '5xl': { value: '64rem' },
+ '6xl': { value: '72rem' },
+ '7xl': { value: '80rem' },
+ '8xl': { value: '90rem' },
};
export const SIZES = {
...SPACE,
...SIZES_ONLY,
container: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
+ sm: { value: '640px' },
+ md: { value: '768px' },
+ lg: { value: '1024px' },
+ xl: { value: '1280px' },
},
};
diff --git a/src/constants/globalStyle.ts b/src/constants/globalStyle.ts
index 0428827c..3e117d4d 100644
--- a/src/constants/globalStyle.ts
+++ b/src/constants/globalStyle.ts
@@ -26,8 +26,18 @@ const GLOBAL_STYLE = css`
body {
padding: 0;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
- Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-family:
+ -apple-system,
+ BlinkMacSystemFont,
+ Segoe UI,
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ Fira Sans,
+ Droid Sans,
+ Helvetica Neue,
+ sans-serif;
min-height: auto !important;
}
diff --git a/src/constants/iconCustomizations.ts b/src/constants/iconCustomizations.ts
index 195afff0..d8fefbed 100644
--- a/src/constants/iconCustomizations.ts
+++ b/src/constants/iconCustomizations.ts
@@ -2,7 +2,7 @@ import { IconProps } from '@phosphor-icons/react';
import { COLORS } from './customizations';
const iconCustomizations: IconProps = {
- color: COLORS.black,
+ color: COLORS.black.value,
size: 16,
weight: 'bold',
};
diff --git a/src/constants/textSizes.ts b/src/constants/textSizes.ts
index 6e8339db..42d6deae 100644
--- a/src/constants/textSizes.ts
+++ b/src/constants/textSizes.ts
@@ -1,3 +1,5 @@
+import TextSize from '../types/TextSize';
+
export const TEXT_SIZES: TextSize[] = [
'xlRegularNormal',
'xlRegularNormalBold',
diff --git a/src/index.tsx b/src/index.tsx
index ac7ada7d..73f35da2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,90 +1,79 @@
-export * from './components/AvatarWithName';
-export * from './components/ContactArea';
-export * from './components/Container';
-export * from './components/DatePersonPair';
-export * from './components/DefaultSectionContainer';
-export * from './components/DefaultSectionHeader';
-export * from './components/DeleteConfirm';
-export * from './components/Expandable';
-export * from './components/Footer';
-export * from './components/ForceClientSideRender';
-export * from './components/Gradient';
-export * from './components/Header';
-export * from './components/HeroCard';
-export * from './components/ImageRadioItem';
-export * from './components/ImageRadioGroup';
-export * from './components/LabelNumberPair';
-export * from './components/LabelTextPair';
-export * from './components/Layout';
-export * from './components/BoemlyList';
-export * from './components/BoemlyModal';
-export * from './components/MobileMenuBurger';
-export * from './components/OverflownText';
-export * from './components/PageContainer';
-export * from './components/PortfolioCard';
-export * from './components/ProjectCard';
-export * from './components/QuoteCard';
-export * from './components/RichText';
-export * from './components/Shape';
-export * from './components/ShapesCard';
-export * from './components/SplitScreen';
-export * from './components/Slider';
-export * from './components/TextCardWithIcon';
-export * from './components/BoemlyAccordion';
-export * from './components/BoemlyAlert';
-export * from './components/BoemlyFormControl';
-export * from './components/BoemlySteps';
-export * from './components/BoemlyTabs';
-export * from './components/BoemlyTag';
-export * from './components/BoemlyThemeProvider';
-export * from './components/Wrapper';
-export * from './components/ConfirmAction';
-export * from './components/Select';
-export * from './components/SubmissionConfirm';
+export { AvatarWithName } from './components/AvatarWithName';
+export { ContactArea } from './components/ContactArea';
+export { Container } from './components/Container';
+export { DatePersonPair } from './components/DatePersonPair';
+export { DefaultSectionContainer } from './components/DefaultSectionContainer';
+export { DefaultSectionHeader } from './components/DefaultSectionHeader';
+export { DeleteConfirm } from './components/DeleteConfirm';
+export { Expandable } from './components/Expandable';
+export { Footer } from './components/Footer';
+export { ForceClientSideRender } from './components/ForceClientSideRender';
+export { Gradient } from './components/Gradient';
+export { Header } from './components/Header';
+export { HeroCard } from './components/HeroCard';
+export { ImageRadioItem } from './components/ImageRadioItem';
+export { ImageRadioGroup } from './components/ImageRadioGroup';
+export { LabelNumberPair } from './components/LabelNumberPair';
+export { LabelTextPair } from './components/LabelTextPair';
+export { Layout } from './components/Layout';
+export { BoemlyList } from './components/BoemlyList';
+export { BoemlyModal } from './components/BoemlyModal';
+export { MobileMenuBurger } from './components/MobileMenuBurger';
+export { OverflownText } from './components/OverflownText';
+export { PageContainer } from './components/PageContainer';
+export { PortfolioCard } from './components/PortfolioCard';
+export { ProjectCard } from './components/ProjectCard';
+export { QuoteCard } from './components/QuoteCard';
+export { RichText } from './components/RichText';
+export { Shape } from './components/Shape';
+export { ShapesCard } from './components/ShapesCard';
+export { SplitScreen } from './components/SplitScreen';
+export { Slider, type SliderProps } from './components/Slider';
+export { TextCardWithIcon } from './components/TextCardWithIcon';
+export { BoemlyAccordion } from './components/BoemlyAccordion';
+export { BoemlyAlert } from './components/BoemlyAlert';
+export { BoemlyFormControl, type BoemlyFormControlProps } from './components/BoemlyFormControl';
+export { BoemlySteps } from './components/BoemlySteps';
+export { BoemlyTabs } from './components/BoemlyTabs';
+export { BoemlyTag } from './components/BoemlyTag';
+export { BoemlyThemeProvider } from './components/BoemlyThemeProvider';
+export { Wrapper } from './components/Wrapper';
+export { ConfirmAction } from './components/ConfirmAction';
+export { Select, type BoemlySelectProps } from './components/Select';
+export { SubmissionConfirm } from './components/SubmissionConfirm';
export {
Avatar,
Badge,
Box,
- Button,
Center,
- Divider,
Flex,
Grid,
GridItem,
Heading,
IconButton,
- InputLeftAddon,
- InputLeftElement,
- InputRightAddon,
- InputRightElement,
Link,
List,
ListItem,
Menu,
- MenuButton,
- MenuList,
- MenuItem,
+ Portal,
Progress,
- Radio,
RadioGroup,
+ Separator,
SimpleGrid,
Spacer,
Spinner,
Stack,
- Tooltip,
Table,
- TableContainer,
Tag,
- Tbody,
- Td,
- Text,
- Tfoot,
- Th,
- Thead,
- Tr,
useDisclosure,
useMediaQuery,
- useToast,
useToken,
} from '@chakra-ui/react';
+
+export { Tooltip } from './components/ui/tooltip';
+export { createToaster, Toaster } from '@chakra-ui/react';
+export { Text, type TextProps } from './components/ui/text';
+export { Button, type ButtonProps } from './components/ui/button';
+
+export { getSystem } from './theme';
diff --git a/src/stories/Customizations.stories.mdx b/src/stories/Customizations.mdx
similarity index 98%
rename from src/stories/Customizations.stories.mdx
rename to src/stories/Customizations.mdx
index 28d04075..19e714af 100644
--- a/src/stories/Customizations.stories.mdx
+++ b/src/stories/Customizations.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
diff --git a/src/stories/How to use tokens.stories.mdx b/src/stories/How to use tokens.mdx
similarity index 89%
rename from src/stories/How to use tokens.stories.mdx
rename to src/stories/How to use tokens.mdx
index 8d60790f..87065765 100644
--- a/src/stories/How to use tokens.stories.mdx
+++ b/src/stories/How to use tokens.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
@@ -62,8 +62,8 @@ export default () => {
```css
.div {
- width: var(--boemly-space-24);
- height: var(--boemly-space-24);
+ width: var(--boemly-spacing-24);
+ height: var(--boemly-spacing-24);
background-color: var(--boemly-colors-primary-500);
}
```
diff --git a/src/stories/Optimizations.stories.mdx b/src/stories/Optimizations.mdx
similarity index 93%
rename from src/stories/Optimizations.stories.mdx
rename to src/stories/Optimizations.mdx
index 6abafc02..0ddf0808 100644
--- a/src/stories/Optimizations.stories.mdx
+++ b/src/stories/Optimizations.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
diff --git a/src/stories/Welcome.stories.mdx b/src/stories/Welcome.mdx
similarity index 95%
rename from src/stories/Welcome.stories.mdx
rename to src/stories/Welcome.mdx
index 105438ef..e6e0315e 100644
--- a/src/stories/Welcome.stories.mdx
+++ b/src/stories/Welcome.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
diff --git a/src/stories/components/Badge.stories.tsx b/src/stories/components/Badge.stories.tsx
index ad7431a2..96e44f35 100644
--- a/src/stories/components/Badge.stories.tsx
+++ b/src/stories/components/Badge.stories.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
import { Badge } from '../..';
-import { COLOR_SCHEMES } from '../../constants/colorSchemes';
+import { COLOR_PALETTES } from '../../constants/colorPalettes';
export default {
title: 'Components/Badge',
@@ -12,14 +12,14 @@ export default {
options: ['solid', 'subtle', 'outline'],
control: { type: 'radio' },
},
- colorScheme: {
- options: COLOR_SCHEMES,
+ colorPalette: {
+ options: COLOR_PALETTES,
control: { type: 'radio' },
},
},
args: {
children: 'Badge',
- colorScheme: 'primary',
+ colorPalette: 'primary',
},
} as Meta;
diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx
index cbf48dad..047034e9 100644
--- a/src/stories/components/Button.stories.tsx
+++ b/src/stories/components/Button.stories.tsx
@@ -1,9 +1,9 @@
import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
import { Button } from '../..';
-import { Heart } from '@phosphor-icons/react';
-import { COLOR_SCHEMES } from '../../constants/colorSchemes';
+import { HeartIcon } from '@phosphor-icons/react';
+import { COLOR_PALETTES } from '../../constants/colorPalettes';
import { BUTTON_VARIANTS } from '../../constants/buttonVariants';
export default {
@@ -19,8 +19,8 @@ export default {
options: BUTTON_VARIANTS,
control: { type: 'radio' },
},
- colorScheme: {
- options: COLOR_SCHEMES,
+ colorPalette: {
+ options: COLOR_PALETTES,
control: { type: 'radio' },
},
isLoading: { control: { type: 'boolean' } },
@@ -32,7 +32,23 @@ export default {
},
} as Meta;
-const Template: StoryFn = (args) => ;
+const Template: StoryFn = (args) => {
+ const { isFullWidth, isLoading, isDisabled, ...restArgs } = args as typeof args & {
+ isFullWidth?: boolean;
+ isLoading?: boolean;
+ isDisabled?: boolean;
+ };
+ return (
+
+ );
+};
export const Primary = Template.bind({});
Primary.args = {};
@@ -54,8 +70,8 @@ OutlineWhite.args = {
size: 'md',
variant: 'outlineWhite',
};
-OutlineWhite.parameters = {
- backgrounds: { default: 'dark' },
+OutlineWhite.globals = {
+ backgrounds: { value: 'dark' },
};
export const Ghost = Template.bind({});
@@ -64,10 +80,10 @@ Ghost.args = {
variant: 'ghost',
};
-export const ColorScheme = Template.bind({});
-ColorScheme.args = {
+export const ColorPalette = Template.bind({});
+ColorPalette.args = {
size: 'md',
- colorScheme: 'gray',
+ colorPalette: 'gray',
};
export const Size = Template.bind({});
@@ -84,23 +100,31 @@ FullWidth.args = {
export const Disabled = Template.bind({});
Disabled.args = {
size: 'md',
- isDisabled: true,
+ disabled: true,
};
export const IsLoading = Template.bind({});
IsLoading.args = {
size: 'md',
- isLoading: true,
+ loading: true,
};
export const LeftIcon = Template.bind({});
LeftIcon.args = {
size: 'md',
- leftIcon: ,
+ children: (
+ <>
+ Button
+
+ ),
};
export const RightIcon = Template.bind({});
RightIcon.args = {
size: 'md',
- rightIcon: ,
+ children: (
+ <>
+ Button
+
+ ),
};
diff --git a/src/stories/components/Divider.stories.tsx b/src/stories/components/Divider.stories.tsx
deleted file mode 100644
index d1cfa034..00000000
--- a/src/stories/components/Divider.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-
-import { Box, Divider } from '../..';
-
-export default {
- title: 'Components/Divider',
- component: Divider,
- argTypes: {
- variant: {
- options: ['solid', 'dashed'],
- control: { type: 'radio' },
- },
- orientation: {
- options: ['vertical', 'horizontal'],
- control: { type: 'radio' },
- },
- },
- args: {
- variant: 'solid',
- orientation: 'horizontal',
- },
-} as Meta;
-
-const Template: StoryFn = (args) => (
-
-
-
-);
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/src/stories/components/IconButton.stories.tsx b/src/stories/components/IconButton.stories.tsx
index 796f9e1c..1f84065a 100644
--- a/src/stories/components/IconButton.stories.tsx
+++ b/src/stories/components/IconButton.stories.tsx
@@ -1,9 +1,9 @@
import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
import { IconButton } from '../..';
-import { Heart } from '@phosphor-icons/react';
-import { COLOR_SCHEMES } from '../../constants/colorSchemes';
+import { HeartIcon } from '@phosphor-icons/react';
+import { COLOR_PALETTES } from '../../constants/colorPalettes';
import { BUTTON_VARIANTS } from '../../constants/buttonVariants';
export default {
@@ -23,21 +23,24 @@ export default {
options: BUTTON_VARIANTS,
control: { type: 'radio' },
},
- colorScheme: {
- options: COLOR_SCHEMES,
+ colorPalette: {
+ options: COLOR_PALETTES,
control: { type: 'radio' },
},
- isLoading: { control: { type: 'boolean' } },
- isDisabled: { control: { type: 'boolean' } },
- isRound: { control: { type: 'boolean' } },
+ loading: { control: { type: 'boolean' } },
+ disabled: { control: { type: 'boolean' } },
+ rounded: { control: { type: 'radio' }, options: ['none', 'full'] },
},
args: {
- icon: ,
'aria-label': 'Heart button',
},
} as Meta;
-const Template: StoryFn = (args) => ;
+const Template: StoryFn = (args) => (
+
+
+
+);
export const Primary = Template.bind({});
Primary.args = {};
@@ -53,14 +56,14 @@ OutlineWhite.args = {
size: 'md',
variant: 'outlineWhite',
};
-OutlineWhite.parameters = {
- backgrounds: { default: 'dark' },
+OutlineWhite.globals = {
+ backgrounds: { value: 'dark' },
};
-export const ColorScheme = Template.bind({});
-ColorScheme.args = {
+export const ColorPalette = Template.bind({});
+ColorPalette.args = {
size: 'md',
- colorScheme: 'gray',
+ colorPalette: 'gray',
};
export const Size = Template.bind({});
@@ -71,19 +74,19 @@ Size.args = {
export const IsRound = Template.bind({});
IsRound.args = {
size: 'md',
- isRound: true,
+ rounded: 'full',
};
export const Disabled = Template.bind({});
Disabled.args = {
- icon: ,
+ icon: ,
size: 'md',
- isDisabled: true,
+ disabled: true,
};
export const IsLoading = Template.bind({});
IsLoading.args = {
- icon: ,
+ icon: ,
size: 'md',
- isLoading: true,
+ loading: true,
};
diff --git a/src/stories/components/Progress.stories.tsx b/src/stories/components/Progress.stories.tsx
index 0bd8eae8..edf0c716 100644
--- a/src/stories/components/Progress.stories.tsx
+++ b/src/stories/components/Progress.stories.tsx
@@ -1,19 +1,19 @@
import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
import { Progress } from '../..';
-import { COLOR_SCHEMES } from '../../constants/colorSchemes';
+import { COLOR_PALETTES } from '../../constants/colorPalettes';
export default {
title: 'Components/Progress',
- component: Progress,
+ component: Progress.Root,
argTypes: {
size: { options: ['xs', 'sm', 'md', 'lg'], control: { type: 'radio' } },
- colorScheme: {
- options: COLOR_SCHEMES,
+ colorPalette: {
+ options: COLOR_PALETTES,
control: { type: 'radio' },
},
- hasStripe: { control: { type: 'boolean' } },
+ striped: { control: { type: 'boolean' } },
},
args: {
width: 'sm',
@@ -21,20 +21,26 @@ export default {
},
} as Meta;
-const Template: StoryFn = (args) => ;
+const Template: StoryFn = (args) => (
+
+
+
+
+
+);
export const Primary = Template.bind({});
Primary.args = {
- colorScheme: 'primary',
+ colorPalette: 'primary',
};
-export const ColorScheme = Template.bind({});
-ColorScheme.args = {
- colorScheme: 'red',
+export const ColorPalette = Template.bind({});
+ColorPalette.args = {
+ colorPalette: 'red',
};
export const WithStripe = Template.bind({});
WithStripe.args = {
- colorScheme: 'primary',
- hasStripe: true,
+ colorPalette: 'primary',
+ striped: true,
};
diff --git a/src/stories/components/Separator.stories.tsx b/src/stories/components/Separator.stories.tsx
new file mode 100644
index 00000000..c795ccd3
--- /dev/null
+++ b/src/stories/components/Separator.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+
+import { Separator } from '../..';
+
+export default {
+ title: 'Components/Separator',
+ component: Separator,
+ argTypes: {
+ variant: {
+ options: ['solid', 'dashed', 'dotted'],
+ control: { type: 'radio' },
+ },
+ orientation: {
+ options: ['horizontal', 'vertical'],
+ control: { type: 'radio' },
+ },
+ },
+ args: {
+ variant: 'solid',
+ orientation: 'horizontal',
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+ orientation: 'vertical',
+};
diff --git a/src/stories/components/Table.mdx b/src/stories/components/Table.mdx
new file mode 100644
index 00000000..6adb7647
--- /dev/null
+++ b/src/stories/components/Table.mdx
@@ -0,0 +1,151 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { BoemlyThemeProvider, Table } from '../..';
+
+
+
+# Table
+
+
+
+
+
+ To convert
+ into
+ multiply by
+
+
+
+
+
+ inches
+ millimeters (mm)
+ 25.4
+
+
+
+ feet
+ centimeters (cm)
+ 30.48
+
+
+
+ yards
+ metres (m)
+ 0.91444
+
+
+
+
+
+
+```tsx
+
+
+
+ To convert
+ into
+ multiply by
+
+
+
+
+ inches
+ millimeters (mm)
+ 25.4
+
+
+ feet
+ centimeters (cm)
+ 30.48
+
+
+ yards
+ metres (m)
+ 0.91444
+
+
+
+```
+
+## Arguments
+
+### ``
+
+| Property | Values | Default |
+| ---------- | ---------------------- | --------- |
+| `variant` | `'line'`, `'outline'` | `'line'` |
+| `size` | `'sm'`, `'md'`, `'lg'` | `'md'` |
+| `striped` | `'true'`, `'false'` | `'false'` |
+| `unstyled` | `'true'`, `'false'` | `'true'` |
+
+## Examples
+
+### Striped
+
+
+
+
+
+ To convert
+ into
+ multiply by
+
+
+
+
+
+ inches
+ millimeters (mm)
+ 25.4
+
+
+
+ feet
+ centimeters (cm)
+ 30.48
+
+
+
+ yards
+ metres (m)
+ 0.91444
+
+
+
+
+
+
+### Unstyled
+
+
+
+
+
+ To convert
+ into
+ multiply by
+
+
+
+
+
+ inches
+ millimeters (mm)
+ 25.4
+
+
+
+ feet
+ centimeters (cm)
+ 30.48
+
+
+
+ yards
+ metres (m)
+ 0.91444
+
+
+
+
+
diff --git a/src/stories/components/Table.stories.mdx b/src/stories/components/Table.stories.mdx
deleted file mode 100644
index 963c8a04..00000000
--- a/src/stories/components/Table.stories.mdx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { BoemlyThemeProvider, Table, Thead, Tbody, Tr, Th, Td } from '../..';
-
-
-
-# Table
-
-
-
-
-
- | To convert |
- into |
- multiply by |
-
-
-
-
- | inches |
- millimeters (mm) |
- 25.4 |
-
-
- | feet |
- centimeters (cm) |
- 30.48 |
-
-
- | yards |
- metres (m) |
- 0.91444 |
-
-
-
-
-
-```tsx
-
-
-
- | To convert |
- into |
- multiply by |
-
-
-
-
- | inches |
- millimeters (mm) |
- 25.4 |
-
-
- | feet |
- centimeters (cm) |
- 30.48 |
-
-
- | yards |
- metres (m) |
- 0.91444 |
-
-
-
-```
-
-## Arguments
-
-### ``
-
-| Property | Values | Default |
-| --------- | ------------------------------------- | ---------- |
-| `variant` | `'simple'`, `'striped'`, `'unstyled'` | `'simple'` |
-| `size` | `'sm'`, `'md'`, `'lg'` | `'md'` |
-
-### `| ` and ` | `
-
-| Property | Values | Default |
-| ----------- | --------------- | ------- |
-| `isNumeric` | `true`, `false` | `false` |
-
-## Examples
-
-### Variant: `'striped'`
-
-
-
-
-
- | To convert |
- into |
- multiply by |
-
-
-
-
- | inches |
- millimeters (mm) |
- 25.4 |
-
-
- | feet |
- centimeters (cm) |
- 30.48 |
-
-
- | yards |
- metres (m) |
- 0.91444 |
-
-
-
-
-
-### Variant: `'unstyled'`
-
-
-
-
-
- | To convert |
- into |
- multiply by |
-
-
-
-
- | inches |
- millimeters (mm) |
- 25.4 |
-
-
- | feet |
- centimeters (cm) |
- 30.48 |
-
-
- | yards |
- metres (m) |
- 0.91444 |
-
-
-
-
diff --git a/src/stories/components/Tooltip.stories.tsx b/src/stories/components/Tooltip.stories.tsx
index 5bdb36e7..6a023809 100644
--- a/src/stories/components/Tooltip.stories.tsx
+++ b/src/stories/components/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
import { Tooltip } from '../..';
@@ -16,42 +16,42 @@ export default {
control: { type: 'boolean' },
description: 'Is needed if you want to wrap a disabled element like a button',
},
- hasArrow: {
+ showArrow: {
control: { type: 'boolean' },
},
- isDisabled: {
+ disabled: {
control: { type: 'boolean' },
},
placement: {
options: [
- 'auto-start',
- 'auto',
- 'auto-end',
- 'left-start',
- 'left',
- 'left-end',
- 'right-start',
- 'right',
- 'right-end',
- 'top-start',
'top',
+ 'top-start',
'top-end',
- 'bottom-start',
+ 'right',
+ 'right-start',
+ 'right-end',
'bottom',
+ 'bottom-start',
'bottom-end',
+ 'left',
+ 'left-start',
+ 'left-end',
],
control: { type: 'radio' },
},
closeOnClick: {
control: { type: 'boolean' },
},
- closeOnEsc: {
+ closeOnEscape: {
+ control: { type: 'boolean' },
+ },
+ closeOnPointerDown: {
control: { type: 'boolean' },
},
- closeOnMouseDown: {
+ closeOnScroll: {
control: { type: 'boolean' },
},
- defaultIsOpen: {
+ defaultOpen: {
control: { type: 'boolean' },
},
gutter: {
@@ -62,16 +62,17 @@ export default {
args: {
children: Hover me,
'aria-label': 'Tooltip',
- label: 'Label',
+ content: 'Label',
shouldWrapChildren: false,
- hasArrow: false,
- isDisabled: false,
+ showArrow: false,
+ disabled: false,
placement: 'bottom',
closeOnClick: false,
- closeOnEsc: false,
+ closeOnEscape: false,
closeOnMouseDown: false,
- defaultIsOpen: false,
+ defaultOpen: false,
gutter: 8,
+ interactive: true,
},
} as Meta;
diff --git a/src/stories/components/Typography.stories.tsx b/src/stories/components/Typography.stories.tsx
index 2952dd65..dcaafde1 100644
--- a/src/stories/components/Typography.stories.tsx
+++ b/src/stories/components/Typography.stories.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
import { Heading, Text } from '../..';
diff --git a/src/stories/tokens/Breakpoints.stories.tsx b/src/stories/tokens/Breakpoints.stories.tsx
index 5768b545..d262afa3 100644
--- a/src/stories/tokens/Breakpoints.stories.tsx
+++ b/src/stories/tokens/Breakpoints.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text, useToken } from '../..';
import { BREAKPOINTS } from '../../constants/customizations';
export default {
@@ -16,29 +16,29 @@ const BreakpointRow = ({ breakpoint }: BreakpointRowProps) => {
const [breakpointValue] = useToken('breakpoints', [breakpoint]);
return (
-
- |
+
+
{breakpoint}
- |
-
+
+
{breakpointValue}
- |
-
+
+
);
};
export const Breakpoints = () => (
-
-
-
- | Token |
- Value |
-
-
-
+
+
+
+ Token
+ Value
+
+
+
{Object.keys(BREAKPOINTS).map((breakpoint) => (
))}
-
-
+
+
);
diff --git a/src/stories/tokens/Colors.stories.tsx b/src/stories/tokens/Colors.stories.tsx
index eeb64b2b..10647c84 100644
--- a/src/stories/tokens/Colors.stories.tsx
+++ b/src/stories/tokens/Colors.stories.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
+import { Box, Table, Text, useToken } from '../..';
-import { Box, Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
-import { COLOR_SCHEMES } from '../../constants/colorSchemes';
+import { COLOR_PALETTES } from '../../constants/colorPalettes';
export default {
title: 'Tokens/Colors',
@@ -16,38 +16,38 @@ const ColorRow: React.FC = ({ colorToken }: ColorRowProps) => {
const [color] = useToken('colors', [colorToken]);
return (
-
- |
+
+
{colorToken}
- |
-
+
+
{color}
- |
-
+
+
- |
-
+
+
);
};
const colorWeights = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
export const Colors = () => (
-
-
-
- | Token |
- Value |
- Example |
-
-
-
+
+
+
+ Token
+ Value
+ Example
+
+
+
- {COLOR_SCHEMES.map((color) =>
+ {COLOR_PALETTES.map((color) =>
colorWeights.map((weight) => )
)}
-
-
+
+
);
diff --git a/src/stories/tokens/Font Sizes.stories.tsx b/src/stories/tokens/Font Sizes.stories.tsx
index f89f3d46..c130102e 100644
--- a/src/stories/tokens/Font Sizes.stories.tsx
+++ b/src/stories/tokens/Font Sizes.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text, useToken } from '../..';
import { FONT_SIZES } from '../../constants/customizations';
export default {
@@ -16,35 +16,35 @@ const FontSizeRow = ({ fontSize }: FontSizesRowProps) => {
const [fontSizeValue] = useToken('fontSizes', [fontSize]);
return (
-
- |
+
+
{fontSize}
- |
-
+
+
{fontSizeValue}
- |
-
+
+
{`Font Size = ${fontSize}`}
- |
-
+
+
);
};
export const FontSizes = () => (
-
-
-
- | Token |
- Value |
- Example |
-
-
-
+
+
+
+ Token
+ Value
+ Example
+
+
+
{Object.keys(FONT_SIZES).map((fontSizes) => (
))}
-
-
+
+
);
diff --git a/src/stories/tokens/Line Heights.stories.tsx b/src/stories/tokens/Line Heights.stories.tsx
index 8a2807e0..500fa154 100644
--- a/src/stories/tokens/Line Heights.stories.tsx
+++ b/src/stories/tokens/Line Heights.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text, useToken } from '../..';
import { LINE_HEIGHTS } from '../../constants/customizations';
export default {
@@ -16,35 +16,35 @@ const LineHeightRow = ({ lineHeight }: LineHeightsRowProps) => {
const [lineHeightValue] = useToken('lineHeights', [lineHeight]);
return (
-
- |
+
+
{lineHeight}
- |
-
+
+
{lineHeightValue}
- |
-
+
+
{`Line height = ${lineHeight}`}
- |
-
+
+
);
};
export const LineHeights = () => (
-
-
-
- | Token |
- Value |
- Example |
-
-
-
+
+
+
+ Token
+ Value
+ Example
+
+
+
{Object.keys(LINE_HEIGHTS).map((lineHeights) => (
))}
-
-
+
+
);
diff --git a/src/stories/tokens/Radii.stories.tsx b/src/stories/tokens/Radii.stories.tsx
index 040980f4..e5d8a110 100644
--- a/src/stories/tokens/Radii.stories.tsx
+++ b/src/stories/tokens/Radii.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Box, Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text, Box, useToken } from '../..';
import { RADII } from '../../constants/customizations';
export default {
@@ -16,33 +16,33 @@ const RadiiRow = ({ radius }: RadiiRowProps) => {
const [radiiValue] = useToken('radii', [radius]);
return (
-
- |
+
+
{radius}
- |
-
+
+
{radiiValue}
- |
-
+
+
- |
-
+
+
);
};
export const Radii = () => (
-
-
-
- | Token |
- Value |
- Example |
-
-
-
+
+
+
+ Token
+ Value
+ Example
+
+
+
{Object.keys(RADII).map((radii) => (
))}
-
-
+
+
);
diff --git a/src/stories/tokens/Sizes.stories.tsx b/src/stories/tokens/Sizes.stories.tsx
index 610d829c..db937b7b 100644
--- a/src/stories/tokens/Sizes.stories.tsx
+++ b/src/stories/tokens/Sizes.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Box, Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text, Box, useToken } from '../..';
import { SIZES_ONLY } from '../../constants/customizations';
export default {
@@ -16,33 +16,33 @@ const SizeRow = ({ size }: SizesRowProps) => {
const [sizeValue] = useToken('sizes', [size]);
return (
-
- |
+
+
{size}
- |
-
+
+
{sizeValue}
- |
-
+
+
- |
-
+
+
);
};
export const Sizes = () => (
-
-
-
- | Token |
- Value |
- Example |
-
-
-
+
+
+
+ Token
+ Value
+ Example
+
+
+
{Object.keys(SIZES_ONLY).map((size) => (
))}
-
-
+
+
);
diff --git a/src/stories/tokens/Space.stories.tsx b/src/stories/tokens/Space.stories.tsx
index ed544542..2050c78a 100644
--- a/src/stories/tokens/Space.stories.tsx
+++ b/src/stories/tokens/Space.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Box, Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text, Box } from '../..';
import { SPACE } from '../../constants/customizations';
export default {
@@ -13,36 +13,36 @@ interface SpaceRowProps {
}
const SpaceRow = ({ space }: SpaceRowProps) => {
- const [spaceValue] = useToken('space', [space]);
+ const spaceValue = SPACE[space]?.value;
return (
-
- |
+
+
{space}
- |
-
+
+
{spaceValue}
- |
-
+
+
- |
-
+
+
);
};
export const Space = () => (
-
-
-
- | Token |
- Value |
- Example |
-
-
-
+
+
+
+ Token
+ Value
+ Example
+
+
+
{Object.keys(SPACE).map((space) => (
))}
-
-
+
+
);
diff --git a/src/stories/tokens/Z Indices.stories.tsx b/src/stories/tokens/Z Indices.stories.tsx
index da6ade0b..30fbfe7a 100644
--- a/src/stories/tokens/Z Indices.stories.tsx
+++ b/src/stories/tokens/Z Indices.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
-import { Table, Tbody, Td, Text, Th, Thead, Tr, useToken } from '../..';
+import { Table, Text } from '../..';
import { Z_INDICES } from '../../constants/customizations';
export default {
@@ -13,32 +13,32 @@ interface ZIndexRowProps {
}
const ZIndexRow = ({ zIndex }: ZIndexRowProps) => {
- const [zIndexValue] = useToken('zIndices', [zIndex]);
+ const zIndexValue = Z_INDICES[zIndex]?.value;
return (
-
- |
+
+
{zIndex}
- |
-
+
+
{zIndexValue}
- |
-
+
+
);
};
export const ZIndices = () => (
-
-
-
- | Token |
- Value |
-
-
-
+
+
+
+ Token
+ Value
+
+
+
{Object.keys(Z_INDICES).map((zIndex) => (
))}
-
-
+
+
);
diff --git a/src/test/setupTests.ts b/src/test/setupTests.ts
index b7be9baa..b1c2ac8d 100644
--- a/src/test/setupTests.ts
+++ b/src/test/setupTests.ts
@@ -1,5 +1,29 @@
+import '@testing-library/jest-dom';
import resizeObserverPolyfill from 'resize-observer-polyfill';
global.ResizeObserver = resizeObserverPolyfill;
global.scrollTo = jest.fn();
+
+global.structuredClone = (obj) => {
+ if (obj === undefined || obj === null) {
+ return obj;
+ }
+ return JSON.parse(JSON.stringify(obj));
+};
+
+beforeEach(() => {
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation((query) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+ });
+});
diff --git a/src/test/testUtils.tsx b/src/test/testUtils.tsx
index 51e1bab5..2a04a39f 100644
--- a/src/test/testUtils.tsx
+++ b/src/test/testUtils.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
import { render as rtlRender } from '@testing-library/react';
import { BoemlyThemeProvider } from '../index';
interface WrapperProps {
- children: JSX.Element | JSX.Element[];
+ children: ReactNode | ReactNode[];
}
const render = (ui: any, { ...renderOptions } = {}) => {
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 00000000..66fc32ef
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,165 @@
+import { createSystem, defaultConfig } from '@chakra-ui/react';
+import {
+ accordionSlotRecipe,
+ alertSlotRecipe,
+ avatarSlotRecipe,
+ buttonRecipe,
+ checkboxSlotRecipe,
+ fieldSlotRecipe,
+ headingRecipe,
+ inputAddonRecipe,
+ inputRecipe,
+ linkRecipe,
+ listSlotRecipe,
+ numberInputSlotRecipe,
+ menuSlotRecipe,
+ pinInputRecipe,
+ popoverSlotRecipe,
+ progressSlotRecipe,
+ radioGroupSlotRecipe,
+ selectRecipe,
+ tableSlotRecipe,
+ tagSlotRecipe,
+ textareaRecipe,
+ textRecipe,
+ tooltipSlotRecipe,
+} from './constants/componentCustomizations';
+import {
+ BREAKPOINTS,
+ COLORS,
+ FONTS,
+ FONT_SIZES,
+ LINE_HEIGHTS,
+ RADII,
+ SIZES,
+ SPACE,
+ Z_INDICES,
+} from './constants/customizations';
+import BorderRadiiCustomization from './types/BorderRadiiCustomization';
+import ColorsCustomization from './types/ColorsCustomization';
+import FontsCustomization from './types/FontsCustomization';
+
+interface Options {
+ customColors: ColorsCustomization;
+ customFonts: FontsCustomization;
+ customRadii: BorderRadiiCustomization;
+}
+
+export const getSystem = ({
+ customColors = {},
+ customFonts = {},
+ customRadii = {},
+}: Partial = {}) => {
+ return createSystem(defaultConfig, {
+ cssVarsPrefix: 'boemly',
+ globalCss: {
+ html: {
+ colorPalette: 'primary',
+ },
+ },
+ theme: {
+ tokens: {
+ colors: { ...COLORS, ...customColors } as typeof COLORS,
+ breakpoints: BREAKPOINTS,
+ fonts: { ...FONTS, ...customFonts } as typeof FONTS,
+ fontSizes: FONT_SIZES,
+ lineHeights: LINE_HEIGHTS,
+ radii: { ...RADII, ...customRadii } as typeof RADII,
+ sizes: SIZES,
+ spacing: SPACE,
+ zIndex: Z_INDICES,
+ },
+ semanticTokens: {
+ colors: {
+ primary: {
+ solid: { value: '{colors.primary.500}' },
+ contrast: { value: 'white' },
+ fg: { value: '{colors.primary.700}' },
+ muted: { value: '{colors.primary.100}' },
+ subtle: { value: '{colors.primary.100}' },
+ emphasized: { value: '{colors.primary.300}' },
+ focusRing: { value: '{colors.primary.500}' },
+ },
+ gray: {
+ solid: { value: '{colors.gray.100}' },
+ contrast: { value: 'white' },
+ fg: { value: '{colors.gray.700}' },
+ muted: { value: '{colors.gray.100}' },
+ subtle: { value: '{colors.gray.100}' },
+ emphasized: { value: '{colors.gray.300}' },
+ focusRing: { value: '{colors.gray.500}' },
+ },
+ red: {
+ solid: { value: '{colors.red.500}' },
+ contrast: { value: 'white' },
+ fg: { value: '{colors.red.700}' },
+ muted: { value: '{colors.red.100}' },
+ subtle: { value: '{colors.red.100}' },
+ emphasized: { value: '{colors.red.300}' },
+ focusRing: { value: '{colors.red.500}' },
+ },
+ blue: {
+ solid: { value: '{colors.blue.500}' },
+ contrast: { value: 'white' },
+ fg: { value: '{colors.blue.700}' },
+ muted: { value: '{colors.blue.100}' },
+ subtle: { value: '{colors.blue.100}' },
+ emphasized: { value: '{colors.blue.300}' },
+ focusRing: { value: '{colors.blue.500}' },
+ },
+ whiteAlpha: {
+ solid: { value: '{colors.whiteAlpha.500}' },
+ contrast: { value: '{colors.black}' },
+ fg: { value: '{colors.whiteAlpha.700}' },
+ muted: { value: '{colors.whiteAlpha.100}' },
+ subtle: { value: '{colors.whiteAlpha.100}' },
+ emphasized: { value: '{colors.whiteAlpha.300}' },
+ focusRing: { value: '{colors.whiteAlpha.500}' },
+ },
+ blackAlpha: {
+ solid: { value: '{colors.blackAlpha.500}' },
+ contrast: { value: 'white' },
+ fg: { value: '{colors.blackAlpha.700}' },
+ muted: { value: '{colors.blackAlpha.100}' },
+ subtle: { value: '{colors.blackAlpha.100}' },
+ emphasized: { value: '{colors.blackAlpha.300}' },
+ focusRing: { value: '{colors.blackAlpha.500}' },
+ },
+ },
+ },
+ recipes: {
+ button: buttonRecipe,
+ heading: headingRecipe,
+ input: inputRecipe,
+ inputAddon: inputAddonRecipe,
+ link: linkRecipe,
+ pinInput: pinInputRecipe,
+ select: selectRecipe,
+ text: textRecipe,
+ textarea: textareaRecipe,
+ },
+ slotRecipes: {
+ accordion: accordionSlotRecipe,
+ alert: alertSlotRecipe,
+ avatar: avatarSlotRecipe,
+ checkbox: checkboxSlotRecipe,
+ field: fieldSlotRecipe,
+ list: listSlotRecipe,
+ menu: menuSlotRecipe,
+ numberInput: numberInputSlotRecipe,
+ popover: popoverSlotRecipe,
+ progress: progressSlotRecipe,
+ radioGroup: radioGroupSlotRecipe,
+ table: tableSlotRecipe,
+ tag: tagSlotRecipe,
+ tooltip: tooltipSlotRecipe,
+ },
+ },
+ });
+};
+
+// Create a default theme with empty customizations
+const defaultTheme = getSystem();
+
+// Export the default theme for the Chakra CLI to use
+export default defaultTheme;
diff --git a/src/types/BorderRadiiCustomization.ts b/src/types/BorderRadiiCustomization.ts
index 1c7fa055..d73102fe 100644
--- a/src/types/BorderRadiiCustomization.ts
+++ b/src/types/BorderRadiiCustomization.ts
@@ -1,13 +1,13 @@
interface BorderRadiiCustomization {
- none?: string;
- sm?: string;
- base?: string;
- md?: string;
- lg?: string;
- xl?: string;
- '2xl'?: string;
- '3xl'?: string;
- full?: string;
+ none?: { value: string };
+ sm?: { value: string };
+ base?: { value: string };
+ md?: { value: string };
+ lg?: { value: string };
+ xl?: { value: string };
+ '2xl'?: { value: string };
+ '3xl'?: { value: string };
+ full?: { value: string };
}
export default BorderRadiiCustomization;
diff --git a/src/types/ButtonColorScheme.ts b/src/types/ButtonColorScheme.ts
index 97109477..b148acbd 100644
--- a/src/types/ButtonColorScheme.ts
+++ b/src/types/ButtonColorScheme.ts
@@ -1,4 +1,4 @@
-type ButtonColorScheme =
+export type ButtonColorPalettes =
| 'primary'
| 'whiteAlpha'
| 'blackAlpha'
@@ -11,10 +11,4 @@ type ButtonColorScheme =
| 'blue'
| 'cyan'
| 'purple'
- | 'pink'
- | 'linkedin'
- | 'facebook'
- | 'messenger'
- | 'whatsapp'
- | 'twitter'
- | 'telegram';
+ | 'pink';
diff --git a/src/types/ButtonVariant.ts b/src/types/ButtonVariant.ts
index 313d9ec5..a9e2ff72 100644
--- a/src/types/ButtonVariant.ts
+++ b/src/types/ButtonVariant.ts
@@ -1 +1 @@
-type ButtonVariant = 'ghost' | 'link' | 'outline' | 'outlineWhite' | 'solid';
+export type ButtonVariant = 'ghost' | 'link' | 'outline' | 'outlineWhite' | 'solid';
diff --git a/src/types/ColorsCustomization.ts b/src/types/ColorsCustomization.ts
new file mode 100644
index 00000000..3404269e
--- /dev/null
+++ b/src/types/ColorsCustomization.ts
@@ -0,0 +1,28 @@
+interface ColorToken {
+ value: string;
+}
+
+interface ColorScale {
+ [key: string]: ColorToken | undefined;
+ 50?: ColorToken;
+ 100?: ColorToken;
+ 200?: ColorToken;
+ 300?: ColorToken;
+ 400?: ColorToken;
+ 500?: ColorToken;
+ 600?: ColorToken;
+ 700?: ColorToken;
+ 800?: ColorToken;
+ 900?: ColorToken;
+}
+
+interface ColorsCustomization {
+ black?: ColorToken;
+ primary?: ColorScale;
+ gray?: ColorScale;
+ red?: ColorScale;
+ blue?: ColorScale;
+ [key: string]: ColorToken | ColorScale | undefined;
+}
+
+export default ColorsCustomization;
diff --git a/src/types/FontsCustomization.ts b/src/types/FontsCustomization.ts
index 12fb2ad4..7aea8270 100644
--- a/src/types/FontsCustomization.ts
+++ b/src/types/FontsCustomization.ts
@@ -1,8 +1,8 @@
interface FontsCustomization {
- body?: string;
- display?: string;
- heading?: string;
- mono?: string;
+ body?: { value: string };
+ display?: { value: string };
+ heading?: { value: string };
+ mono?: { value: string };
}
export default FontsCustomization;
diff --git a/src/types/TextSize.ts b/src/types/TextSize.ts
index 8f534a4a..975ddb34 100644
--- a/src/types/TextSize.ts
+++ b/src/types/TextSize.ts
@@ -29,3 +29,5 @@ type TextSize =
| 'xsLowBold'
| 'xsMonoNormal'
| 'xsMonoUppercase';
+
+export default TextSize;
diff --git a/src/types/react-syntax-highlighter.d.ts b/src/types/react-syntax-highlighter.d.ts
new file mode 100644
index 00000000..a2ca3f76
--- /dev/null
+++ b/src/types/react-syntax-highlighter.d.ts
@@ -0,0 +1,10 @@
+declare module 'react-syntax-highlighter/dist/cjs/languages/hljs/*' {
+ const content: any;
+ export default content;
+}
+
+declare module 'react-syntax-highlighter/dist/cjs/styles/hljs/*' {
+ const content: any;
+ export default content;
+}
+
diff --git a/src/utils/__tests__/getDefaultFontImports.test.ts b/src/utils/__tests__/getDefaultFontImports.test.ts
index d8ef15ff..18cddf45 100644
--- a/src/utils/__tests__/getDefaultFontImports.test.ts
+++ b/src/utils/__tests__/getDefaultFontImports.test.ts
@@ -15,7 +15,7 @@ describe('The getDefaultFontImports function', () => {
expect(fonts).toContain(FONT_IMPORT_SPACEMONO);
});
it('returns an array of all the uncustomized fonts.', () => {
- const fonts = getDefaultFontImports({ body: 'Arial', heading: 'Arial' });
+ const fonts = getDefaultFontImports({ body: { value: 'Arial' }, heading: { value: 'Arial' } });
expect(fonts.length).toBe(2);
expect(fonts).toContain(FONT_IMPORT_RALEWAY);
expect(fonts).toContain(FONT_IMPORT_SPACEMONO);
diff --git a/src/utils/getTheme.ts b/src/utils/getTheme.ts
deleted file mode 100644
index 562db6a7..00000000
--- a/src/utils/getTheme.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Colors, extendTheme } from '@chakra-ui/react';
-import {
- CustomizedAccordion,
- CustomizedAlert,
- CustomizedAvatar,
- CustomizedButton,
- CustomizedCheckbox,
- CustomizedHeading,
- CustomizedInput,
- CustomizedLink,
- CustomizedList,
- CustomizedNumberInput,
- CustomizedPinInput,
- CustomizedProgress,
- CustomizedTable,
- CustomizedText,
- CustomizedTextarea,
- CustomizedTooltip,
-} from '../constants/componentCustomizations';
-import {
- BREAKPOINTS,
- COLORS,
- FONTS,
- FONT_SIZES,
- LINE_HEIGHTS,
- RADII,
- SIZES,
- SPACE,
- Z_INDICES,
-} from '../constants/customizations';
-import BorderRadiiCustomization from '../types/BorderRadiiCustomization';
-import FontsCustomization from '../types/FontsCustomization';
-
-interface Options {
- customColors: Colors;
- customFonts: FontsCustomization;
- customRadii: BorderRadiiCustomization;
-}
-
-const getTheme = ({ customColors, customFonts, customRadii }: Options) => {
- return extendTheme({
- config: { cssVarPrefix: 'boemly' },
- colors: { ...COLORS, ...customColors },
- breakpoints: BREAKPOINTS,
- fonts: { ...FONTS, ...customFonts },
- fontSizes: FONT_SIZES,
- lineHeights: LINE_HEIGHTS,
- radii: { ...RADII, ...customRadii },
- sizes: SIZES,
- space: SPACE,
- zIndices: Z_INDICES,
-
- components: {
- Accordion: CustomizedAccordion,
- Alert: CustomizedAlert,
- Avatar: CustomizedAvatar,
- Button: CustomizedButton,
- Checkbox: CustomizedCheckbox,
- Heading: CustomizedHeading,
- Input: CustomizedInput,
- Link: CustomizedLink,
- List: CustomizedList,
- NumberInput: CustomizedNumberInput,
- PinInput: CustomizedPinInput,
- Progress: CustomizedProgress,
- Table: CustomizedTable,
- Text: CustomizedText,
- Textarea: CustomizedTextarea,
- Tooltip: CustomizedTooltip,
- },
- });
-};
-
-export default getTheme;
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 00000000..c4ecf08f
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "emitDeclarationOnly": true,
+ "declarationMap": true,
+ "outDir": "dist",
+ "noEmit": false,
+ "isolatedModules": true
+ },
+ "include": ["src"],
+ "exclude": ["src/test", "src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.stories.tsx"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index cdfb9f8d..53325320 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,9 +1,12 @@
{
// see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
- "include": ["src", "types"],
+ "include": ["src"],
"exclude": ["**/*.stories.tsx"],
"compilerOptions": {
- "module": "esnext",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+ "skipLibCheck": true,
"lib": ["dom", "esnext"],
"importHelpers": true,
// output .d.ts declaration files for consumers
@@ -20,14 +23,10 @@
// noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
"noUnusedLocals": true,
"noUnusedParameters": true,
- // use Node's module resolution algorithm, instead of the legacy TS one
- "moduleResolution": "node",
// transpile JSX to React.createElement
"jsx": "react",
// interop between ESM and CJS modules. Recommended by TS
"esModuleInterop": true,
- // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
- "skipLibCheck": true,
// error out if import and file system have a casing mismatch. Recommended by TS
"forceConsistentCasingInFileNames": true,
// `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
diff --git a/tsdx.config.js b/tsdx.config.js
deleted file mode 100644
index 00615d95..00000000
--- a/tsdx.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// Not transpiled with TypeScript or Babel, so use plain Es6/Node.js!
-const replace = require('@rollup/plugin-replace');
-
-module.exports = {
- // This function will run for each entry/format/env combination
- rollup(config, opts) {
- config.plugins = config.plugins.map((p) =>
- p.name === 'replace'
- ? replace({
- 'process.env.NODE_ENV': JSON.stringify(opts.env),
- preventAssignment: true,
- })
- : p
- );
- return config; // always return a config.
- },
-};
|
,
+ imageSrc: storybookAvatarUrl,
},
};
diff --git a/src/components/QuoteCard/QuoteCard.test.tsx b/src/components/QuoteCard/QuoteCard.test.tsx
index 11f5eb5a..bd2b8fac 100644
--- a/src/components/QuoteCard/QuoteCard.test.tsx
+++ b/src/components/QuoteCard/QuoteCard.test.tsx
@@ -8,7 +8,7 @@ const defaultProps: QuoteCardProps = {
avatar: {
name: 'Name',
description: 'Description',
- image: 
,
+ imageSrc: '/src',
},
};
diff --git a/src/components/QuoteCard/QuoteCard.tsx b/src/components/QuoteCard/QuoteCard.tsx
index f42202f1..c933d745 100644
--- a/src/components/QuoteCard/QuoteCard.tsx
+++ b/src/components/QuoteCard/QuoteCard.tsx
@@ -14,7 +14,11 @@ export const QuoteCard: React.FC