@voiceflow/style 1.7.0 → 1.9.0

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,9 +0,0 @@
-export * from './styled';
-export * from './testing';
-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;

package/src/styled/utils.ts

@@ -1,56 +0,0 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { clsx } from 'clsx';
-import { useMemo } from 'react';
-
-import { STYLED_CLASS } from './constants';
-import type {
-  DynamicOptions,
-  FirstStyledArgument,
-  SecondStyledArgument,
-  StyledComponentProps,
-  ThemeContract,
-} from './types';
-
-export const getStaticClass = (firstArg: FirstStyledArgument, secondArg?: SecondStyledArgument): string | null => {
-  // eslint-disable-next-line no-nested-ternary
-  const classNames = (Array.isArray(firstArg) ? firstArg : Array.isArray(secondArg) ? secondArg : []).map((source) =>
-    typeof source === 'string' ? source : source[STYLED_CLASS]
-  );
-
-  return classNames.length ? clsx(classNames) : null;
-};
-
-export const getDynamicOptions = (secondArg?: SecondStyledArgument, thirdArg?: DynamicOptions): DynamicOptions | null =>
-  (Array.isArray(secondArg) ? thirdArg : secondArg) ?? null;
-
-export const useDynamicClass = (
-  firstArg: FirstStyledArgument<any>,
-  props: { variant?: string; variants?: Record<string, any> }
-) =>
-  useMemo(() => {
-    if (typeof firstArg === 'function') return firstArg(props.variants);
-    if (Array.isArray(firstArg) || !props.variant) return null;
-
-    return firstArg[props.variant];
-  }, [firstArg, props.variants, props.variant]);
-
-export const useInlineStyle = (
-  props: StyledComponentProps<keyof JSX.IntrinsicElements, ThemeContract, Record<string, string>>,
-  dynamicOptions: DynamicOptions | null
-) => {
-  const { theme, vars } = dynamicOptions ?? {};
-
-  return useMemo(() => {
-    const style = {};
-
-    if (theme && props.theme) {
-      Object.assign(style, assignInlineVars(theme, props.theme));
-    }
-
-    if (vars && props.vars) {
-      Object.assign(style, assignInlineVars(props.vars as Record<string, string>));
-    }
-
-    return style;
-  }, [props.theme, props.vars]);
-};

package/src/testing.ts

@@ -1,15 +0,0 @@
-/**
- * the pattern for data-testid attributes is based off of BEM naming
- * https://getbem.com/naming/
- */
-
-export const tid = (block: string | undefined, elements: string | [string, string, ...string[]], modifier?: string) => {
-  if (!block) return undefined;
-
-  const elementList = typeof elements === 'string' ? [elements] : elements;
-  const blockElement = [block, ...elementList].join('__');
-
-  if (!modifier) return blockElement;
-
-  return `${blockElement}--${modifier}`;
-};

package/src/types.ts

@@ -1,10 +0,0 @@
-import type { ComplexStyleRule } from '@vanilla-extract/css';
-import type { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
-import type { Simplify } from 'type-fest';
-
-export type VariantStyleRules = Record<string, Record<string, ComplexStyleRule | string>>;
-
-export type VariantProps<RecipeFn extends RuntimeFn<VariantStyleRules>> = Exclude<
-  Simplify<RecipeVariants<RecipeFn>>,
-  undefined | null
->;

package/tsconfig.build.cjs.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./tsconfig.build.json",
-  "compilerOptions": {
-    "module": "commonjs",
-    "outDir": "build/cjs"
-  }
-}

package/tsconfig.build.esm.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./tsconfig.build.json",
-  "compilerOptions": {
-    "module": "esnext",
-    "outDir": "build/esm"
-  },
-  "tsc-alias": {
-    "resolveFullPaths": true
-  }
-}

package/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./tsconfig.json",
-  "include": ["src", "types"]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@voiceflow-meta/typescript-config/base.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "jsx": "react-jsx"
-  },
-  "exclude": ["node_modules", "build"]
-}

package/vitest.config.ts

@@ -1,16 +0,0 @@
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import { configDefaults, defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  plugins: [tsconfigPaths(), vanillaExtractPlugin()],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: './config/test/setup.js',
-    exclude: [...configDefaults.exclude, 'build'],
-    coverage: {
-      exclude: [...configDefaults.exclude, 'build', '*.js'],
-    },
-  },
-});