CUK-72 Isolate tasty engine

.changeset/afraid-monkeys-eat.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+[CUK-72](https://cubedevinc.atlassian.net/jira/software/projects/CUK/boards/3?selectedIssue=CUK-72) Move all style engine logic into a single folder `tasty` and export new `tasty()` helper as `styled` replacement but with simplified and optimized API.

src/App.tsx

@@ -1,24 +1,15 @@
 import { useState } from 'react';
-import {
-  Base,
-  Grid,
-  TopBar,
-  Title,
-  Space,
-  LoadingAnimation,
-  Block,
-} from './index';
+import { Base, Block, Grid, LoadingAnimation, Space, Title } from './index';
 import { Button } from './components/actions';
 // import ResponsiveProvider from './providers/Responsive';
-import { color } from './utils/colors';
+// import { Modal } from './components/organisms/Modal/Modal';
+// import { notification } from './services/notification';
+import { color, StyleProvider } from './tasty';
 import { Card } from './components/content/Card/Card';
 import { Flex } from './components/layout/Flex';
 import { Base64Upload } from './components/other/Base64Upload/Base64Upload';
 import { Link } from './components/navigation/Link/Link';
-// import { Modal } from './components/organisms/Modal/Modal';
-// import { notification } from './services/notification';
-import { StyleProvider } from './providers/StylesProvider';
-import { Form, useForm, Field } from './components/forms/Form';
+import { Field, Form, useForm } from './components/forms/Form';
 import { TextInput } from './components/forms/TextInput/TextInput';
 import { Provider } from './provider';
 import { GridProvider } from './components/GridProvider';
@@ -145,7 +136,6 @@ function App() {
         <Link to="!https://cube.dev">Cube.dev</Link>
       </Space>
       <Provider breakpoints={[1200, 640]}>
-        <TopBar onLogoPress={() => {}} />
         <Flex
           styles={{
             placeContent: ['start', 'center', 'start'],

src/components/Base.tsx

@@ -1,11 +1,13 @@
 import { forwardRef, useContext } from 'react';
 import styled from 'styled-components';
-import { BreakpointsContext } from '../providers/BreakpointsProvider';
-import { pointsToZones } from '../utils/responsive';
-import { renderStyles } from '../utils/renderStyles';
-import { modAttrs } from '../utils/react';
-import { AllBaseProps } from './types';
-import { Styles } from '../styles/types';
+import {
+  AllBaseProps,
+  BreakpointsContext,
+  modAttrs,
+  pointsToZones,
+  renderStyles,
+  Styles,
+} from '../tasty';
 
 const BLOCK_MAP = {
   inline: 'block',
@@ -22,7 +24,7 @@ const INLINE_MAP = {
 const BaseElement = styled.div(({ css }) => css);
 
 /**
- * @deprecated consider using styled() instead
+ * @deprecated consider using tasty() instead
  */
 const Base = function Base<K extends keyof HTMLElementTagNameMap>(
   allProps: AllBaseProps<K>,
@@ -85,7 +87,7 @@ const Base = function Base<K extends keyof HTMLElementTagNameMap>(
 };
 
 /**
- * @deprecated consider using styled() instead
+ * @deprecated consider using tasty() instead
  */
 const _Base = forwardRef(Base);
 export { _Base as Base };

src/components/Block.tsx

@@ -1,23 +1,28 @@
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES } from '../styles/list';
-import { extractStyles } from '../utils/styles';
-import { filterBaseProps } from '../utils/filterBaseProps';
-import { AllBaseProps, ContainerStyleProps } from './types';
-import { Base } from './Base';
+import {
+  AllBaseProps,
+  CONTAINER_STYLES,
+  ContainerStyleProps,
+  extractStyles,
+  filterBaseProps,
+  tasty,
+} from '../tasty';
 
-export const CUBE_BLOCK_STYLES = {
-  display: 'block',
-};
+const RawBlock = tasty({
+  styled: {
+    display: 'block',
+  },
+});
 
 export interface CubeBlockProps
   extends Omit<AllBaseProps, keyof ContainerStyleProps | 'as'>,
     ContainerStyleProps {}
 
 export const Block = forwardRef((props: CubeBlockProps, ref) => {
-  const styles = extractStyles(props, CONTAINER_STYLES, CUBE_BLOCK_STYLES);
+  const styles = extractStyles(props, CONTAINER_STYLES);
 
   return (
-    <Base
+    <RawBlock
       {...filterBaseProps(props, { eventProps: true })}
       styles={styles}
       ref={ref}

src/components/GridProvider.tsx

@@ -1,15 +1,14 @@
 import { forwardRef, ReactNode, useCallback, useEffect, useState } from 'react';
-import { filterBaseProps } from '../utils/filterBaseProps';
+import { filterBaseProps, Styles } from '../tasty';
 import { useCombinedRefs } from '../utils/react';
 import { Base } from './Base';
-import { Styles } from '../styles/types';
 
 const DEFAULT_STYLES = {
   display: 'contents',
 };
 
-const COLUMN_WIDTH
-  = '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
+const COLUMN_WIDTH =
+  '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
 
 export interface CubeGridProviderProps {
   children: ReactNode;
@@ -41,10 +40,10 @@ export const GridProvider = forwardRef(
       if (!el) return;
 
       const computedStyle = getComputedStyle(el);
-      const containerWidth
-        = el.clientWidth
-        - parseFloat(computedStyle.paddingLeft)
-        - parseFloat(computedStyle.paddingRight);
+      const containerWidth =
+        el.clientWidth -
+        parseFloat(computedStyle.paddingLeft) -
+        parseFloat(computedStyle.paddingRight);
 
       setWidth(`${containerWidth}px`);
     }, [ref, columns, gap]);

src/components/Root.tsx

@@ -2,12 +2,15 @@ import { useEffect, useRef, useState } from 'react';
 import { GlobalStyles } from './GlobalStyles';
 import { Base } from './Base';
 import { PortalProvider } from './portal';
-import { BASE_STYLES, BLOCK_STYLES } from '../styles/list';
-import { extractStyles } from '../utils/styles';
-import { filterBaseProps } from '../utils/filterBaseProps';
+import {
+  BASE_STYLES,
+  BaseProps,
+  BLOCK_STYLES,
+  extractStyles,
+  filterBaseProps,
+} from '../tasty';
 import { Provider } from '../provider';
 import { ModalProvider } from '@react-aria/overlays';
-import { BaseProps } from './types';
 import { StyleSheetManager } from 'styled-components';
 import { TOKENS } from '../tokens';
 import { AlertDialogApiProvider } from './overlays/AlertDialog';

src/components/actions/Action.tsx

@@ -1,22 +1,23 @@
-import { forwardRef, MouseEventHandler, useContext, useCallback } from 'react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { Base } from '../Base';
-import { useHover } from '@react-aria/interactions';
-import { useFocus } from '../../utils/interactions';
-import { useButton } from '@react-aria/button';
-import { mergeProps } from '../../utils/react';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-import { UIKitContext } from '../../provider';
+import { forwardRef, MouseEventHandler, useCallback, useContext } from 'react';
 import {
   BaseProps,
   BaseStyleProps,
+  CONTAINER_STYLES,
   ContainerStyleProps,
+  extractStyles,
+  filterBaseProps,
+  Styles,
   TagNameProps,
+  TEXT_STYLES,
   TextStyleProps,
-} from '../types';
+} from '../../tasty';
+import { Base } from '../Base';
+import { useHover } from '@react-aria/interactions';
+import { useFocus } from '../../utils/react/interactions';
+import { useButton } from '@react-aria/button';
+import { mergeProps } from '../../utils/react';
+import { UIKitContext } from '../../provider';
 import { AriaButtonProps } from '@react-types/button';
-import { Styles } from '../../styles/types';
 import { useFocusableRef } from '@react-spectrum/utils';
 import { FocusableRef } from '@react-types/shared';
 
@@ -65,8 +66,8 @@ export function parseTo(to): {
 } {
   const newTab = to && typeof to === 'string' && to.startsWith('!');
   const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
-  const href: string | undefined
-    = to && typeof to === 'string'
+  const href: string | undefined =
+    to && typeof to === 'string'
       ? newTab || nativeRoute
         ? to.slice(1)
         : to
@@ -142,7 +143,6 @@ export const Action = forwardRef(
       htmlType,
       label,
       theme,
-      css,
       mods,
       onPress,
       ...props
@@ -209,7 +209,6 @@ export const Action = forwardRef(
         styles={styles}
         target={target}
         href={href}
-        css={css}
       />
     );
   },

src/components/actions/Button/Button.tsx

@@ -1,9 +1,8 @@
 import { forwardRef, ReactNode } from 'react';
 import { Action, CubeActionProps } from '../Action';
 import { LoadingOutlined } from '@ant-design/icons';
-import { useContextStyles } from '../../../providers/StylesProvider';
+import { Styles, useContextStyles } from '../../../tasty';
 import { FocusableRef } from '@react-types/shared';
-import { Styles } from '../../../styles/types';
 import { accessibilityWarning } from '../../../utils/warnings';
 
 export interface CubeButtonProps extends CubeActionProps {
@@ -278,18 +277,8 @@ const DEFAULT_STYLES = {
 
 export const Button = forwardRef(
   (allProps: CubeButtonProps, ref: FocusableRef<HTMLElement>) => {
-    let {
-      type,
-      size,
-      label,
-      styles,
-      children,
-      theme,
-      css,
-      icon,
-      mods,
-      ...props
-    } = allProps;
+    let { type, size, label, styles, children, theme, icon, mods, ...props } =
+      allProps;
 
     const isDisabled = props.isDisabled;
     const isLoading = props.isLoading;
@@ -339,7 +328,6 @@ export const Button = forwardRef(
     return (
       <Action
         as={props.to ? 'a' : undefined}
-        css={css}
         {...props}
         ref={ref}
         isDisabled={isLoading || isDisabled}

src/components/actions/ButtonGroup/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import { useSlotProps } from '../../../utils/react';
-import { Space, CubeSpaceProps } from '../../layout/Space';
-import { useContextStyles } from '../../../providers/StylesProvider';
+import { CubeSpaceProps, Space } from '../../layout/Space';
+import { useContextStyles } from '../../../tasty';
 
 export const ButtonGroup = forwardRef((props: CubeSpaceProps, ref) => {
   let { styles, ...otherProps } = useSlotProps(props, 'buttonGroup');

src/components/content/ActiveZone/ActiveZone.tsx

@@ -1,21 +1,22 @@
 import { forwardRef, MouseEventHandler } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '../../../utils/react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
 import {
   BaseProps,
   BaseStyleProps,
+  CONTAINER_STYLES,
   ContainerStyleProps,
+  extractStyles,
+  filterBaseProps,
+  Styles,
   TagNameProps,
+  TEXT_STYLES,
   TextStyleProps,
-} from '../../types';
-import { Styles } from '../../../styles/types';
+} from '../../../tasty';
+import { Base } from '../../Base';
 import { useFocusableRef } from '@react-spectrum/utils';
 import { FocusableOptions, useFocusable } from '@react-aria/focus';
-import { useFocus } from '../../../utils/interactions';
+import { useFocus } from '../../../utils/react/interactions';
 
 export interface CubeActiveZoneProps
   extends BaseProps,

src/components/content/Alert/types.ts

@@ -1,4 +1,4 @@
-import { BaseProps, ContainerStyleProps, TextStyleProps } from '../../types';
+import { BaseProps, ContainerStyleProps, TextStyleProps } from '../../../tasty';
 import THEMES from '../../../data/themes';
 
 export interface CubeAlertProps

src/components/content/Alert/use-alert.ts

@@ -1,8 +1,11 @@
-import { extractStyles } from '../../../utils/styles';
+import {
+  CONTAINER_STYLES,
+  extractStyles,
+  filterBaseProps,
+  TEXT_STYLES,
+} from '../../../tasty';
 import { useDeprecationWarning } from '../../../_internal';
 import { CubeAlertProps } from './types';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
 
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES] as const;
 

src/components/content/Avatar/Avatar.tsx

@@ -1,10 +1,13 @@
 import { forwardRef, ReactNode } from 'react';
 import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { BaseProps, ContainerStyleProps } from '../../types';
-import { Styles } from '../../../styles/types';
+import {
+  BaseProps,
+  CONTAINER_STYLES,
+  ContainerStyleProps,
+  extractStyles,
+  filterBaseProps,
+  Styles,
+} from '../../../tasty';
 
 const DEFAULT_STYLES = {
   display: 'grid',

src/components/content/Badge/Badge.tsx

@@ -1,14 +1,17 @@
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { BaseProps, ContainerStyleProps } from '../../types';
-import { styled } from '../../../styled';
+import {
+  BaseProps,
+  CONTAINER_STYLES,
+  ContainerStyleProps,
+  extractStyles,
+  filterBaseProps,
+  tasty,
+} from '../../../tasty';
 
-const RawBadge = styled({
-  name: 'Badge',
-  props: { role: 'region' },
+const RawBadge = tasty({
+  qa: 'Badge',
+  role: 'region',
   styles: {
     display: 'inline-flex',
     placeContent: 'center',