feat: added styles export to components TET-555 (#104)

* feat: added styles export to components TET-555

* fix: prevent boxShadow and ring styles inheritance NO-JIRA

* test(Button): updated stylesBuilder test NO-JIRA

src/components/AlertBanner/AlertBanner.styles.ts

@@ -63,3 +63,7 @@ export const resolveIconName = (intent: AlertBannerIntent) => {
 
   return iconConfig[intent];
 };
+
+export const alertBannerStyles = {
+  defaultConfig,
+};

src/components/AlertBanner/index.ts

@@ -1,2 +1,3 @@
 export { AlertBanner } from './AlertBanner';
 export type { AlertBannerProps } from './AlertBanner.props';
+export { alertBannerStyles } from './AlertBanner.styles';

src/components/Avatar/Avatar.styles.ts

@@ -255,3 +255,7 @@ export const defaultConfig = {
     },
   },
 } satisfies AvatarConfig;
+
+export const avatarStyles = {
+  defaultConfig,
+};

src/components/Avatar/index.ts

@@ -1,2 +1,3 @@
 export { Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar.props';
+export { avatarStyles } from './Avatar.styles';

src/components/Badge/Badge.styles.ts

@@ -371,3 +371,7 @@ export const defaultConfig = {
     iconContainer: {},
   },
 } satisfies BadgeConfig;
+
+export const badgeStyles = {
+  defaultConfig,
+};

src/components/Badge/index.ts

@@ -1,2 +1,3 @@
 export { Badge } from './Badge';
 export type { BadgeProps } from './Badge.props';
+export { badgeStyles } from './Badge.styles';

src/components/Button/Button.styles.ts

@@ -315,6 +315,7 @@ const commonConfig = {
 
 const defaultButtonConfig = {
   ...commonConfig,
+  ring: 'unset',
   boxShadow: '$elevation-bottom-100',
   appearance: {
     primary: {
@@ -647,3 +648,7 @@ export const defaultConfig = {
   ghost: ghostButtonConfig,
   bare: bareButtonConfig,
 } satisfies ButtonConfig;
+
+export const buttonStyles = {
+  defaultConfig,
+};

src/components/Button/index.ts

@@ -1,2 +1,3 @@
 export { Button } from './Button';
 export type { ButtonProps } from './Button.props';
+export { buttonStyles } from './Button.styles';

src/components/Button/stylesBuilder/stylesBuilder.test.ts

@@ -24,6 +24,7 @@ describe('stylesBuilder', () => {
           selected: '$color-action-primary-selected',
         },
         borderRadius: '$border-radius-large',
+        ring: 'unset',
         boxShadow: '$elevation-bottom-100',
         color: '$color-action-inverted-normal',
         display: 'inline-flex',

src/components/Checkbox/Checkbox.styles.ts

@@ -50,8 +50,9 @@ export const defaultConfig = {
           hover: '$color-interaction-default-hover',
         },
       },
-      ring: '$border-width-focus',
       borderRadius: '$border-radius-medium',
+      boxShadow: '0 0 #0000',
+      ring: '$border-width-focus',
       ringInset: true,
       ringColor: {
         _: '$color-interaction-border-neutral-normal',
@@ -104,3 +105,7 @@ export const defaultConfig = {
     },
   },
 } satisfies CheckboxConfig;
+
+export const checkboxStyles = {
+  defaultConfig,
+};

src/components/Checkbox/index.ts

@@ -1,2 +1,3 @@
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox.props';
+export { checkboxStyles } from './Checkbox.styles';

src/components/CheckboxGroup/CheckboxGroup.style.ts

@@ -26,3 +26,7 @@ export const defaultConfig = {
     helperText: {},
   },
 } satisfies CheckboxGroupConfig;
+
+export const checkboxGroupStyles = {
+  defaultConfig,
+};

src/components/CheckboxGroup/index.ts

@@ -3,3 +3,4 @@ export type {
   CheckboxGroupProps,
   CheckboxGroupItemProps,
 } from './CheckboxGroup.props';
+export { checkboxGroupStyles } from './CheckboxGroup.style';

src/components/Counter/Counter.styles.ts

@@ -28,12 +28,14 @@ export const defaultConfig = {
     default: {
       emphasis: {
         high: {
+          boxShadow: '0 0 #0000',
           ring: '$border-width-small',
           ringColor: '$color-border-neutral-strong',
           backgroundColor: '$color-background-default',
           color: '$color-content-primary',
         },
         low: {
+          boxShadow: '0 0 #0000',
           ring: '$border-width-small',
           ringColor: '$color-border-neutral-subtle',
           backgroundColor: '$color-background-default',
@@ -103,3 +105,7 @@ export const defaultConfig = {
     },
   },
 } satisfies CounterConfig;
+
+export const counterStyles = {
+  defaultConfig,
+};

src/components/Counter/index.ts

@@ -1,2 +1,3 @@
 export { Counter } from './Counter';
 export type { CounterProps } from './Counter.props';
+export { counterStyles } from './Counter.styles';

src/components/Divider/Divider.styles.ts

@@ -19,3 +19,7 @@ export const defaultConfig = {
     },
   },
 } satisfies DividerConfig;
+
+export const dividerStyles = {
+  defaultConfig,
+};

src/components/Divider/index.ts

@@ -1,2 +1,3 @@
 export { Divider } from './Divider';
 export type { DividerProps } from './Divider.props';
+export { dividerStyles } from './Divider.styles';

src/components/HelperText/HelperText.styles.ts

@@ -44,3 +44,7 @@ export const resolveIconName = (intent: HelperTextIntent): IconName<16> => {
 
   return iconConfig[intent];
 };
+
+export const helperTextStyles = {
+  defaultConfig,
+};

src/components/HelperText/index.ts

@@ -1,2 +1,3 @@
 export { HelperText } from './HelperText';
 export type { HelperTextProps } from './HelperText.props';
+export { helperTextStyles } from './HelperText.styles';

src/components/IconButton/IconButton.styles.ts

@@ -73,3 +73,7 @@ export const defaultConfig = {
     },
   },
 } satisfies ButtonConfig;
+
+export const iconButtonStyles = {
+  defaultConfig,
+};

src/components/IconButton/index.ts

@@ -1,2 +1,3 @@
 export { IconButton } from './IconButton';
 export { type IconButtonProps } from './IconButton.props';
+export { iconButtonStyles } from './IconButton.styles';

src/components/InlineBanner/InlineBanner.styles.ts

@@ -28,6 +28,7 @@ export const defaultConfig = {
   p: '$space-component-padding-xLarge',
   gap: '$space-component-gap-large',
   borderRadius: '$border-radius-large',
+  boxShadow: '0 0 #0000',
   ring: '$border-width-small',
   ringInset: true,
   intent: {
@@ -134,3 +135,5 @@ export const resolveIconName = (intent: InlineBannerIntent): IconName<20> => {
 
   return iconConfig[intent];
 };
+
+export const inlineBannerStyles = { defaultConfig };

src/components/InlineBanner/index.ts

@@ -1,2 +1,3 @@
 export { InlineBanner } from './InlineBanner';
 export type { InlineBannerProps } from './InlineBanner.props';
+export { inlineBannerStyles } from './InlineBanner.styles';

src/components/InlineMessage/InlineMessage.styles.ts

@@ -74,3 +74,7 @@ export const resolveIconName = (intent: InlineMessageIntent): IconName<20> => {
 
   return iconConfig[intent];
 };
+
+export const inlineMessageStyles = {
+  defaultConfig,
+};

src/components/InlineMessage/index.ts

@@ -1,2 +1,3 @@
 export { InlineMessage } from './InlineMessage';
 export type { InlineMessageProps } from './InlineMessage.props';
+export { inlineMessageStyles } from './InlineMessage.styles';

src/components/InlineSearchInput/InlineSearchInput.styles.ts

@@ -41,3 +41,7 @@ export const defaultConfig: SearchInputProps['custom'] = {
     },
   },
 };
+
+export const inlineSearchInputStyles = {
+  defaultConfig,
+};

src/components/InlineSearchInput/index.ts

@@ -1,2 +1,3 @@
 export { InlineSearchInput } from './InlineSearchInput';
 export type { InlineSearchInputProps } from './InlineSearchInput.props';
+export { inlineSearchInputStyles } from './InlineSearchInput.styles';

src/components/Label/Label.styles.ts

@@ -29,3 +29,7 @@ export const defaultConfig = {
     },
   },
 } satisfies LabelConfig;
+
+export const labelStyles = {
+  defaultConfig,
+};

src/components/Label/index.ts

@@ -1,2 +1,3 @@
 export { Label } from './Label';
 export type { LabelProps } from './Label.props';
+export { labelStyles } from './Label.styles';

src/components/Loader/Loader.styles.ts

@@ -128,3 +128,7 @@ export const defaultConfig = {
     },
   },
 } satisfies LoaderConfig;
+
+export const loaderStyles = {
+  defaultConfig,
+};

src/components/Loader/index.tsx

@@ -1,2 +1,3 @@
 export { Loader } from './Loader';
 export type { LoaderProps } from './Loader.props';
+export { loaderStyles } from './Loader.styles';

src/components/Popover/Popover.styles.ts

@@ -97,3 +97,7 @@ export const defaultConfig = {
     },
   },
 } satisfies PopoverConfig;
+
+export const popoverStyles = {
+  defaultConfig,
+};

src/components/Popover/index.ts

@@ -1,2 +1,3 @@
 export { Popover } from './Popover';
 export type { PopoverProps } from './Popover.props';
+export { popoverStyles } from './Popover.styles';

src/components/RadioButton/RadioButton.styles.ts

@@ -36,11 +36,12 @@ export const defaultConfig = {
       alignItems: 'center',
       flexShrink: 0,
       backgroundColor: '$color-interaction-background-formField',
+      borderRadius: '$border-radius-full',
+      boxShadow: '0 0 #0000',
       ring: {
         _: '$border-width-focus',
         checked: '5px',
       },
-      borderRadius: '$border-radius-full',
       ringInset: true,
       ringColor: {
         _: '$color-interaction-border-neutral-normal',
@@ -85,3 +86,7 @@ export const defaultConfig = {
     },
   },
 } satisfies RadioButtonConfig;
+
+export const radioButtonStyles = {
+  defaultConfig,
+};

src/components/RadioButton/index.ts

@@ -1,2 +1,3 @@
 export { RadioButton } from './RadioButton';
 export type { RadioButtonProps } from './RadioButton.props';
+export { radioButtonStyles } from './RadioButton.styles';

src/components/RadioButtonGroup/RadioButtonGroup.styles.ts

@@ -24,3 +24,7 @@ export const defaultConfig = {
     helperText: {},
   },
 } satisfies RadioButtonGroupConfig;
+
+export const radioButtonGroupStyles = {
+  defaultConfig,
+};

src/components/RadioButtonGroup/index.ts

@@ -3,3 +3,4 @@ export type {
   RadioButtonGroupProps,
   RadioButtonGroupItemProps,
 } from './RadioButtonGroup.props';
+export { radioButtonGroupStyles } from './RadioButtonGroup.styles';

src/components/Select/Select.styles.ts

@@ -11,3 +11,7 @@ export const defaultConfig: TextInputProps['custom'] = {
     },
   },
 };
+
+export const selectStyles = {
+  defaultConfig,
+};

src/components/Select/index.ts

@@ -1,2 +1,3 @@
 export { Select } from './Select';
 export type { SelectProps } from './Select.props';
+export { selectStyles } from './Select.styles';

src/components/SocialButton/SocialButton.styles.ts

@@ -36,6 +36,12 @@ export const defaultConfig = {
         selected: '$color-action-outline-selected',
       },
     },
-    primary: {},
+    primary: {
+      ring: 'unset',
+    },
   },
 } satisfies SocialButtonConfig;
+
+export const socialButtonStyles = {
+  defaultConfig,
+};

src/components/SocialButton/index.ts

@@ -1,2 +1,3 @@
 export { SocialButton } from './SocialButton';
 export { type SocialButtonProps } from './SocialButton.props';
+export { socialButtonStyles } from './SocialButton.styles';

src/components/StatusDot/StatusDot.styles.ts

@@ -23,7 +23,12 @@ export const defaultConfig = {
     },
   },
   hasStroke: {
+    boxShadow: '0 0 #0000',
     ring: '$border-width-medium',
     ringColor: '$color-border-inverted',
   },
 } satisfies StatusDotConfig;
+
+export const statusDotStyles = {
+  defaultConfig,
+};

src/components/StatusDot/index.ts

@@ -1,2 +1,3 @@
 export { StatusDot } from './StatusDot';
 export type { StatusDotProps } from './StatusDot.props';
+export { statusDotStyles } from './StatusDot.styles';

src/components/Tag/Tag.styles.ts

@@ -67,3 +67,7 @@ export const defaultConfig = {
     },
   },
 } satisfies TagConfig;
+
+export const tagStyles = {
+  defaultConfig,
+};

src/components/Tag/index.ts

@@ -1,2 +1,3 @@
 export { Tag } from './Tag';
 export type { TagProps } from './Tag.props';
+export { tagStyles } from './Tag.styles';

src/components/TextInput/TextInput.styles.ts

@@ -31,6 +31,7 @@ export const defaultConfig = {
   padding: '$space-component-padding-small $space-component-padding-large',
   flexShrink: 0,
   ringInset: true,
+  boxShadow: '0 0 #0000',
   ring: '$border-width-small',
   ringColor: {
     _: '$color-interaction-border-neutral-normal',
@@ -128,3 +129,7 @@ export const defaultConfig = {
     },
   },
 } satisfies TextInputConfig;
+
+export const textInputStyles = {
+  defaultConfig,
+};

src/components/TextInput/index.ts

@@ -1,2 +1,3 @@
 export { TextInput } from './TextInput';
 export type { TextInputProps } from './TextInput.props';
+export { textInputStyles } from './TextInput.styles';

src/components/Toast/Toast.styles.ts

@@ -161,3 +161,7 @@ export const resolveIconName = (intent: ToastIntent): IconName<20> | null => {
 
   return iconConfig[intent];
 };
+
+export const toastStyles = {
+  defaultConfig,
+};

src/components/Toast/index.ts

@@ -1,2 +1,3 @@
 export { Toast } from './Toast';
 export type { ToastProps } from './Toast.props';
+export { toastStyles } from './Toast.styles';