@voiceflow/style 1.6.1 → 1.8.0

package/src/__fixtures__/Button/index.ts

@@ -1,7 +0,0 @@
-import { Button as ButtonComponent } from './Button.component';
-import * as css from './Button.css';
-import * as styled from './Button.styled';
-
-export type { ButtonProps } from './Button.component';
-
-export const Button = Object.assign(ButtonComponent, styled, { css });

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.component.tsx

@@ -1,13 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as Theme from '../theme.css';
-import * as S from './InlineThemedButton.styled';
-
-export interface InlineThemedButtonProps extends ButtonProps {
-  brandColor: string;
-}
-
-export const InlineThemedButton: React.FC<InlineThemedButtonProps> = ({ brandColor, onClick, children }) => (
-  <S.Base onClick={onClick} theme={{ color: { brand: brandColor }, spacing: Theme.spacing }}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.css.ts

@@ -1,8 +0,0 @@
-import { style } from '@/main';
-
-import * as Theme from '../theme.css';
-
-export const themed = style({
-  color: Theme.vars.color.brand,
-  borderRadius: 0,
-});

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.styled.ts

@@ -1,7 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import * as Theme from '../theme.css';
-import { themed } from './InlineThemedButton.css';
-
-export const Base = styled.button([Button.Base, themed], { theme: Theme.vars });

package/src/__fixtures__/InlineThemedButton/index.ts

@@ -1,4 +0,0 @@
-import { InlineThemedButton as InlineThemedButtonComponent } from './InlineThemedButton.component';
-import * as css from './InlineThemedButton.css';
-
-export const InlineThemedButton = Object.assign(InlineThemedButtonComponent, { css });

package/src/__fixtures__/InlineVarButton/InlineVarButton.component.tsx

@@ -1,12 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as S from './InlineVarButton.styled';
-
-export interface InlineVarButtonProps extends ButtonProps {
-  brandColor: string;
-}
-
-export const InlineVarButton: React.FC<InlineVarButtonProps> = ({ brandColor, onClick, children }) => (
-  <S.Base onClick={onClick} vars={{ brandColor }}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/InlineVarButton/InlineVarButton.css.ts

@@ -1,12 +0,0 @@
-import { createVar, style } from '@/main';
-
-export const colorVar = createVar();
-
-export const base = style({
-  vars: {
-    [colorVar]: 'red',
-  },
-
-  backgroundColor: colorVar,
-  borderRadius: 0,
-});

package/src/__fixtures__/InlineVarButton/InlineVarButton.styled.ts

@@ -1,10 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import { base, colorVar } from './InlineVarButton.css';
-
-export const Base = styled.button([Button.Base, base], {
-  vars: {
-    brandColor: colorVar,
-  },
-});

package/src/__fixtures__/InlineVarButton/index.ts

@@ -1,4 +0,0 @@
-import { InlineVarButton as InlineVarButtonComponent } from './InlineVarButton.component';
-import * as css from './InlineVarButton.css';
-
-export const InlineVarButton = Object.assign(InlineVarButtonComponent, { css });

package/src/__fixtures__/RecipeButton/RecipeButton.component.tsx

@@ -1,13 +0,0 @@
-import type { VariantProps } from '@/main';
-
-import type { ButtonProps } from '../Button';
-import type { complex } from './RecipeButton.css';
-import * as S from './RecipeButton.styled';
-
-export interface RecipeButtonProps extends ButtonProps, VariantProps<typeof complex> {}
-
-export const RecipeButton: React.FC<RecipeButtonProps> = ({ color, fontSize, onClick, children }) => (
-  <S.Base variants={{ color, fontSize }} onClick={onClick}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/RecipeButton/RecipeButton.css.ts

@@ -1,22 +0,0 @@
-import { recipe } from '@/main';
-
-export const complex = recipe({
-  base: {
-    border: '1px dashed black',
-  },
-  variants: {
-    color: {
-      ok: { backgroundColor: 'cyan' },
-      warn: { backgroundColor: 'orange' },
-    },
-    fontSize: {
-      sm: { fontSize: 10 },
-      md: { fontSize: 14 },
-      lg: { fontSize: 18 },
-    },
-  },
-
-  defaultVariants: {
-    fontSize: 'lg',
-  },
-});

package/src/__fixtures__/RecipeButton/RecipeButton.styled.ts

@@ -1,6 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import { complex } from './RecipeButton.css';
-
-export const Base = styled.button(complex, [Button.Base]);

package/src/__fixtures__/RecipeButton/index.ts

@@ -1,4 +0,0 @@
-import { RecipeButton as RecipeButtonComponent } from './RecipeButton.component';
-import * as css from './RecipeButton.css';
-
-export const RecipeButton = Object.assign(RecipeButtonComponent, { css });

package/src/__fixtures__/ReuseCSS/ReuseCSS.component.tsx

@@ -1,8 +0,0 @@
-import type { ButtonProps } from '../Button';
-import { base } from './ReuseCSS.css';
-
-export const ReuseCSS: React.FC<ButtonProps> = ({ onClick, children }) => (
-  <button className={base} onClick={onClick}>
-    {children}
-  </button>
-);

package/src/__fixtures__/ReuseCSS/ReuseCSS.css.ts

@@ -1,11 +0,0 @@
-import { style } from '@/main';
-
-import { Button } from '../Button';
-
-export const base = style([
-  Button.css.base,
-  {
-    backgroundColor: 'red',
-    borderRadius: 0,
-  },
-]);

package/src/__fixtures__/ReuseCSS/index.ts

@@ -1,4 +0,0 @@
-import { ReuseCSS as ReuseCSSComponent } from './ReuseCSS.component';
-import * as css from './ReuseCSS.css';
-
-export const ReuseCSS = Object.assign(ReuseCSSComponent, { css });

package/src/__fixtures__/ReuseStyled/ReuseStyled.component.tsx

@@ -1,6 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as S from './ReuseStyled.styled';
-
-export const ReuseStyled: React.FC<ButtonProps> = ({ onClick, children }) => (
-  <S.Base onClick={onClick}>{children}</S.Base>
-);

package/src/__fixtures__/ReuseStyled/ReuseStyled.css.ts

@@ -1,6 +0,0 @@
-import { style } from '@/main';
-
-export const override = style({
-  border: '1px solid red',
-  margin: 2,
-});

package/src/__fixtures__/ReuseStyled/ReuseStyled.styled.ts

@@ -1,6 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import { override } from './ReuseStyled.css';
-
-export const Base = styled.button([Button.Base, override]);

package/src/__fixtures__/ReuseStyled/index.ts

@@ -1,4 +0,0 @@
-import { ReuseStyled as ReuseStyledComponent } from './ReuseStyled.component';
-import * as css from './ReuseStyled.css';
-
-export const ReuseStyled = Object.assign(ReuseStyledComponent, { css });

package/src/__fixtures__/ThemedButton/ThemedButton.component.tsx

@@ -1,6 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as S from './ThemedButton.styled';
-
-export const ThemedButton: React.FC<ButtonProps> = ({ onClick, children }) => (
-  <S.Base onClick={onClick}>{children}</S.Base>
-);

package/src/__fixtures__/ThemedButton/ThemedButton.css.ts

@@ -1,8 +0,0 @@
-import { style } from '@/main';
-
-import * as Theme from '../theme.css';
-
-export const themed = style({
-  color: Theme.vars.color.brand,
-  borderRadius: 0,
-});

package/src/__fixtures__/ThemedButton/ThemedButton.styled.ts

@@ -1,6 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import { themed } from './ThemedButton.css';
-
-export const Base = styled.button([Button.Base, themed]);

package/src/__fixtures__/ThemedButton/index.ts

@@ -1,4 +0,0 @@
-import { ThemedButton as ThemedButtonComponent } from './ThemedButton.component';
-import * as css from './ThemedButton.css';
-
-export const ThemedButton = Object.assign(ThemedButtonComponent, { css });

package/src/__fixtures__/VariantButton/VariantButton.component.tsx

@@ -1,13 +0,0 @@
-import type { ButtonProps } from '../Button';
-import type { variants } from './VariantButton.css';
-import * as S from './VariantButton.styled';
-
-export interface VariantButtonProps extends ButtonProps {
-  variant: keyof typeof variants;
-}
-
-export const VariantButton: React.FC<VariantButtonProps> = ({ variant, onClick, children }) => (
-  <S.Base variant={variant} onClick={onClick}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/VariantButton/VariantButton.css.ts

@@ -1,6 +0,0 @@
-import { styleVariants } from '@/main';
-
-export const variants = styleVariants({
-  primary: { borderWidth: 2, borderColor: 'pink' },
-  secondary: { borderWidth: 2, borderColor: 'blue' },
-});

package/src/__fixtures__/VariantButton/VariantButton.styled.ts

@@ -1,6 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import { variants } from './VariantButton.css';
-
-export const Base = styled.button(variants, [Button.Base]);

package/src/__fixtures__/VariantButton/index.ts

@@ -1,4 +0,0 @@
-import { VariantButton as VariantButtonComponent } from './VariantButton.component';
-import * as css from './VariantButton.css';
-
-export const VariantButton = Object.assign(VariantButtonComponent, { css });

package/src/__fixtures__/index.ts

@@ -1,9 +0,0 @@
-export * from './Button';
-export * from './InlineThemedButton';
-export * from './InlineVarButton';
-export * from './RecipeButton';
-export * from './ReuseCSS';
-export * from './ReuseStyled';
-export * as Theme from './theme.css';
-export * from './ThemedButton';
-export * from './VariantButton';

package/src/__fixtures__/theme.css.ts

@@ -1,21 +0,0 @@
-import { createTheme } from '@/main';
-
-export const spacing = {
-  sm: '2px',
-  md: '4px',
-  lg: '8px',
-};
-
-export const [light, vars] = createTheme({
-  color: {
-    brand: 'red',
-  },
-  spacing,
-});
-
-export const dark = createTheme(vars, {
-  color: {
-    brand: 'blue',
-  },
-  spacing,
-});

package/src/main.ts

@@ -1,8 +0,0 @@
-export * from './styled';
-export * from './ThemeContext';
-export * from './types';
-export * from '@vanilla-extract/css';
-export * from '@vanilla-extract/dynamic';
-export type { RuntimeFn } from '@vanilla-extract/recipes';
-export { recipe } from '@vanilla-extract/recipes';
-export { clsx } from 'clsx';

package/src/styled/constants.ts

@@ -1 +0,0 @@
-export const STYLED_CLASS = Symbol('styled_class');

package/src/styled/factory.test.tsx

@@ -1,181 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it } from 'vitest';
-
-import {
-  Button,
-  InlineThemedButton,
-  InlineVarButton,
-  RecipeButton,
-  ReuseCSS,
-  ReuseStyled,
-  Theme,
-  ThemedButton,
-  VariantButton,
-} from '@/__fixtures__';
-import { ThemeProvider } from '@/ThemeContext';
-
-const BASE_STYLE = {
-  padding: '20px',
-  borderRadius: '10px',
-  margin: '10px',
-};
-
-describe('styled factory', () => {
-  describe('static styling', () => {
-    it('should inherit styles from static CSS', () => {
-      render(<Button />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base);
-      expect(el).toHaveStyle(BASE_STYLE);
-    });
-  });
-
-  describe('reusable CSS', () => {
-    it('should extend static CSS with overrides', () => {
-      render(<ReuseCSS />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, ReuseCSS.css.base);
-      expect(el).toHaveStyle({
-        padding: '20px',
-        margin: '10px',
-        backgroundColor: 'red',
-        borderRadius: '0',
-      });
-    });
-  });
-
-  describe('reusable styled components', () => {
-    it('should extend styled component with overrides', () => {
-      render(<ReuseStyled />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, ReuseStyled.css.override);
-      expect(el).toHaveStyle({
-        padding: '20px',
-        border: '1px solid red',
-        margin: '2px',
-      });
-    });
-  });
-
-  describe('style variants', () => {
-    it('should render the primary style variant', () => {
-      render(<VariantButton variant="primary" />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.primary);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        borderWidth: '2px',
-        borderColor: 'pink',
-      });
-    });
-
-    it('should render the secondary style variant', () => {
-      render(<VariantButton variant="secondary" />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.secondary);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        borderWidth: '2px',
-        borderColor: 'blue',
-      });
-    });
-  });
-
-  describe('style recipes', () => {
-    it('should render a recipe with default variants', () => {
-      render(<RecipeButton />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        border: '1px dashed black',
-        fontSize: '18px',
-      });
-    });
-
-    it('should render a recipe with selected variants', () => {
-      render(<RecipeButton fontSize="sm" color="warn" />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        border: '1px dashed black',
-        backgroundColor: 'orange',
-        fontSize: '10px',
-      });
-    });
-  });
-
-  // unable to test CSS variables fully in JSDOM it seems
-  // https://github.com/jsdom/jsdom/pull/3299
-  describe.skip('themed components', () => {
-    it('should render styles from the provided theme', () => {
-      render(
-        <ThemeProvider theme={Theme.light}>
-          <ThemedButton />
-        </ThemeProvider>
-      );
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        color: 'red',
-        borderRadius: '0',
-      });
-    });
-
-    it('should override styles with contextual themes', () => {
-      render(
-        <ThemeProvider theme={Theme.light}>
-          <ThemeProvider theme={Theme.dark}>
-            <ThemedButton />
-          </ThemeProvider>
-        </ThemeProvider>
-      );
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        color: 'blue',
-        borderRadius: '0',
-      });
-    });
-  });
-
-  describe.skip('inline CSS variables', () => {
-    it('should render style from dynamic values', () => {
-      render(<InlineVarButton brandColor="green" />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, InlineVarButton.css.base);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        color: 'green',
-        borderRadius: '0',
-      });
-    });
-  });
-
-  describe.skip('inline theme', () => {
-    it('should render style from inline theme', () => {
-      render(<InlineThemedButton brandColor="green" />);
-
-      const el = screen.getByRole('button');
-      expect(el).toHaveClass(Button.css.base, InlineThemedButton.css.themed);
-      expect(el).toHaveStyle({
-        ...BASE_STYLE,
-        color: 'green',
-        borderRadius: '0',
-      });
-    });
-  });
-});

package/src/styled/factory.tsx

@@ -1,39 +0,0 @@
-import { clsx } from 'clsx';
-import { createElement } from 'react';
-
-import { useTheme } from '../ThemeContext';
-import { STYLED_CLASS } from './constants';
-import type {
-  DynamicOptions,
-  FirstStyledArgument,
-  SecondStyledArgument,
-  StyledComponent,
-  StyledComponentProps,
-  StyledFactory,
-} from './types';
-import { getDynamicOptions, getStaticClass, useDynamicClass, useInlineStyle } from './utils';
-
-export const styled = new Proxy<{
-  [Tag in keyof JSX.IntrinsicElements]: StyledFactory<Tag>;
-}>({} as any, {
-  get:
-    <Tag extends keyof JSX.IntrinsicElements>(_target: unknown, tag: Tag): StyledFactory<Tag> =>
-    (firstArg: FirstStyledArgument, secondArg?: SecondStyledArgument, thirdArg?: DynamicOptions) => {
-      const staticClass = getStaticClass(firstArg, secondArg);
-      const dynamicOptions = getDynamicOptions(secondArg, thirdArg);
-
-      const StyledComponent = (props: StyledComponentProps<Tag, any, any, { variant?: any; variants?: any }>) => {
-        const themeClass = useTheme();
-        const dynamicClass = useDynamicClass(firstArg, props);
-        const inlineStyle = useInlineStyle(props, dynamicOptions);
-
-        return createElement(tag, {
-          ...(props as React.ComponentPropsWithoutRef<Tag>),
-          className: clsx(themeClass, staticClass, dynamicClass, props.className),
-          style: { ...inlineStyle, ...props.style },
-        });
-      };
-
-      return Object.assign(StyledComponent, { [STYLED_CLASS]: staticClass }) as StyledComponent<any>;
-    },
-});

package/src/styled/index.ts

@@ -1,4 +0,0 @@
-export * from './constants';
-export * from './factory';
-export * from './types';
-export * from './utils';

package/src/styled/types.ts

@@ -1,87 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import type { assignInlineVars } from '@vanilla-extract/dynamic';
-import type { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
-
-import type { STYLED_CLASS } from './constants';
-
-export type ThemeContract = Parameters<typeof assignInlineVars>[0];
-
-export interface DynamicOptions<
-  Theme extends ThemeContract | null = ThemeContract,
-  Variables extends Record<string, string> | null = Record<string, string>
-> {
-  /**
-   * the contract for a theme that can be overridden via a `theme` prop
-   */
-  theme?: Theme;
-  /**
-   * variables that can be overridden via a `vars` prop
-   */
-  vars?: Variables;
-}
-
-export type DynamicThemeProps<Theme> = Theme extends ThemeContract
-  ? {
-      /**
-       * inline override for the theme used to style this component
-       */
-      theme?: Parameters<typeof assignInlineVars<Theme>>[1];
-    }
-  : {};
-
-export type DynamicVariablesProps<Variables> = Variables extends Record<string, string>
-  ? {
-      /**
-       * inline override for variables used to styled this component
-       */
-      vars?: Partial<{ [K in keyof Variables]: string }>;
-    }
-  : {};
-
-export type StyledComponentProps<
-  Tag extends keyof JSX.IntrinsicElements,
-  Theme,
-  Variables,
-  Extras extends object = {}
-> = React.ComponentPropsWithoutRef<Tag> & DynamicThemeProps<Theme> & DynamicVariablesProps<Variables> & Extras;
-
-export interface StyledComponent<Props = {}> extends React.FunctionComponent<Props> {
-  (props: Props, context?: any): React.ReactElement<any, any> | null;
-  [STYLED_CLASS]: string | null;
-}
-
-export type StyleSource = StyledComponent | string;
-
-export interface StyledFactory<Tag extends keyof JSX.IntrinsicElements> {
-  <
-    Recipe extends RuntimeFn<Record<string, any>>,
-    Theme extends ThemeContract | null = null,
-    Variables extends Record<string, string> | null = null
-  >(
-    recipe: Recipe,
-    sources?: StyleSource[],
-    dynamic?: DynamicOptions<Theme, Variables>
-  ): StyledComponent<StyledComponentProps<Tag, Theme, Variables, { variants: RecipeVariants<Recipe> }>>;
-
-  <
-    Variant extends string,
-    Theme extends ThemeContract | null = null,
-    Variables extends Record<string, string> | null = null
-  >(
-    variants: Record<Variant, string>,
-    sources?: StyleSource[],
-    dynamic?: DynamicOptions<Theme, Variables>
-  ): StyledComponent<StyledComponentProps<Tag, Theme, Variables, { variant: Variant }>>;
-
-  <Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(
-    sources: StyleSource[],
-    dynamic?: DynamicOptions<Theme, Variables>
-  ): StyledComponent<StyledComponentProps<Tag, Theme, Variables>>;
-}
-
-export type FirstStyledArgument<Variants extends {} = any> =
-  | RuntimeFn<Variants>
-  | Record<string, string>
-  | StyleSource[];
-
-export type SecondStyledArgument = StyleSource[] | DynamicOptions;