diff --git a/MIGRATING.md b/MIGRATING.md index 761fdb726..6891720b5 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -1,5 +1,17 @@ # Migration Guides +## v0.14 + +- `theme-ui`, `@theme-ui/components` and `@theme-ui/mdx` packages no longer + depend on `@emotion/styled`. + +- Previously deprecated `Component.withComponent` API was removed. + +- `as` prop was removed from Themed.X components from `@theme-ui/mdx`. + + - All occurences of `` can be changed to + ` t.styles.X} />`. + ## v0.13 **Moved Emotion and `@mdx-js/react` to peerDependencies to solve context diff --git a/examples/gatsby-plugin/package.json b/examples/gatsby-plugin/package.json index 402de71d8..bdb9d3c19 100644 --- a/examples/gatsby-plugin/package.json +++ b/examples/gatsby-plugin/package.json @@ -13,7 +13,6 @@ }, "dependencies": { "@emotion/react": "^11.8.1", - "@emotion/styled": "^11.8.1", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "gatsby": "^4.7.2", diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json index 79ee38802..6875c855a 100644 --- a/examples/gatsby/package.json +++ b/examples/gatsby/package.json @@ -13,7 +13,6 @@ }, "dependencies": { "@emotion/react": "^11.8.1", - "@emotion/styled": "^11.8.1", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "gatsby": "^4.7.2", diff --git a/examples/next/package.json b/examples/next/package.json index da309aefb..7a7281a91 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -13,7 +13,6 @@ }, "dependencies": { "@emotion/react": "^11.7.1", - "@emotion/styled": "^11.6.0", "@mdx-js/loader": "^1.6.22", "@mdx-js/react": "^1.6.22", "@next/mdx": "^12.0.7", diff --git a/jest.config.js b/jest.config.js index fecdc23ce..afab8c9d6 100644 --- a/jest.config.js +++ b/jest.config.js @@ -17,6 +17,7 @@ const config = { '/style-guide/', 'tailwind.config.js', '/dist/', + '/__test-utils__/', ], coverageReporters: ['lcov', 'text', 'html'], collectCoverageFrom: [ diff --git a/package.json b/package.json index 3859e6777..fd7876b5b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "typecheck:tests": "tsc --noEmit -P ./tsconfig.test.json", "logo": "yarn workspace docs logo", "postinstall": "preconstruct dev", + "dev": "preconstruct dev", "version:bump": "lerna version", "version:bump-next": "lerna version prerelease --preid alpha --exact", "release": "yarn clean && yarn build && yarn shipit", diff --git a/packages/components/README.md b/packages/components/README.md index d140aa074..9697a7fcc 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -6,7 +6,7 @@ Primitive layout, typographic, and other components for use with Theme UI. separate installation is not required._ ```sh -npm i @theme-ui/components @emotion/react @emotion/styled +npm i @theme-ui/components @emotion/react ``` https://theme-ui.com/components diff --git a/packages/components/index.d.ts b/packages/components/index.d.ts deleted file mode 100644 index 19fd57ed2..000000000 --- a/packages/components/index.d.ts +++ /dev/null @@ -1,401 +0,0 @@ -import * as React from 'react' -import { StyledComponent } from '@emotion/styled' -import { Interpolation } from '@emotion/react' -import { SpaceProps, ColorProps, MarginProps } from 'styled-system' -import { ResponsiveStyleValue, ThemeUIStyleObject } from '@theme-ui/css' - -type Omit = Pick> - -type Assign = { - [P in keyof (T & U)]: P extends keyof T - ? T[P] - : P extends keyof U - ? U[P] - : never -} - -type ForwardRef = React.ForwardRefExoticComponent< - React.PropsWithoutRef

& React.RefAttributes -> - -export interface BoxOwnProps extends SpaceProps, ColorProps { - as?: React.ElementType - variant?: string - css?: Interpolation - sx?: ThemeUIStyleObject -} -export interface BoxProps - extends Assign, BoxOwnProps> {} -/** - * Use the Box component as a layout primitive to add margin, padding, and colors to content. - * @see https://theme-ui.com/components/box - */ -export const Box: StyledComponent - -export type FlexOwnProps = BoxOwnProps -export type FlexProps = BoxProps -/** - * Use the Flex component to create flexbox layouts. - * @see https://theme-ui.com/components/flex - */ -export const Flex: StyledComponent - -export interface GridProps extends BoxProps { - /** - * Minimum width of child elements - */ - width?: ResponsiveStyleValue - /** - * Number of columns to use for the layout (cannot be used in conjunction with the width prop) - */ - columns?: ResponsiveStyleValue - /** - * Space between child elements - */ - gap?: ResponsiveStyleValue - /** - * Auto-repeat track behaviour (default is fit) - */ - repeat?: 'fit' | 'fill' -} -/** - * CSS grid layout component to arrange direct child elements in a tiled grid layout. - * @see https://theme-ui.com/components/grid - */ -export const Grid: ForwardRef - -export interface ButtonProps - extends Assign, BoxOwnProps> {} -/** - * Primitive button component with variants - * @see https://theme-ui.com/components/button - */ -export const Button: ForwardRef - -export interface LinkProps - extends Assign, BoxOwnProps> {} -/** - * Link variants can be defined in the `theme.links` object. - * By default the Link component will use styles defined in `theme.styles.a`. - * @see https://theme-ui.com/components/link - */ -export const Link: ForwardRef - -export type TextProps = BoxProps -/** - * Primitive typographic component. - * - * Text style variants can be defined in the theme.text object. - * @see https://theme-ui.com/components/text - */ -export const Text: ForwardRef - -export interface ParagraphProps - extends Assign, BoxOwnProps> {} -/** - * Primitive typographic component. - * - * Text style variants can be defined in the theme.text object. - * The Paragraph component uses theme.text.paragraph as its default variant style. - * @see https://theme-ui.com/components/paragraph - */ -export const Paragraph: ForwardRef - -export interface HeadingProps - extends Assign, BoxOwnProps> {} -/** - * Primitive heading component, defaults to

. - * - * Text style variants can be defined in the theme.text object. - * The Heading component uses theme.text.heading as its default variant style. - * @see https://theme-ui.com/components/heading - */ -export const Heading: ForwardRef - -export interface ImageProps - extends Assign, BoxOwnProps> {} -/** - * Image style variants can be defined in the theme.images object. - * @see https://theme-ui.com/components/image/ - */ -export const Image: ForwardRef - -export type CardProps = BoxProps -/** - * Card style variants can be defined in the `theme.cards` object. - * By default the Card component uses the `theme.cards.primary` variant. - * @see https://theme-ui.com/components/card - */ -export const Card: ForwardRef - -export interface LabelProps - extends Assign, BoxOwnProps> {} -/** - * Label variants can be defined in `theme.forms` - * and the component uses the `theme.forms.label` variant by default. - * @see https://theme-ui.com/components/label/ - */ -export const Label: ForwardRef - -export interface InputProps - extends Assign, BoxOwnProps> {} -/** - * Input variants can be defined in `theme.forms` - * and the component uses the `theme.forms.input` variant by default. - * @see https://theme-ui.com/components/input/ - */ -export const Input: ForwardRef - -export interface SelectProps - extends Assign, BoxOwnProps> { - arrow?: React.ReactElement -} -/** - * Select variants can be defined in `theme.forms` - * and the component uses the `theme.forms.select` variant by default. - * @see https://theme-ui.com/components/select/ - */ -export const Select: ForwardRef - -export interface TextareaProps - extends Assign, BoxOwnProps> {} -/** - * Form textarea component - * - * Textarea variants can be defined in `theme.forms` - * and the component uses the `theme.forms.textarea` variant by default. - * @see https://theme-ui.com/components/textarea/ - */ -export const Textarea: ForwardRef - -export interface RadioProps - extends Assign, BoxOwnProps> {} -/** - * Form radio input component - * - * Radio variants can be defined in `theme.forms` and the - * component uses the `theme.forms.radio variant` by default. - * @see https://theme-ui.com/components/radio/ - */ -export const Radio: ForwardRef - -export interface CheckboxProps - extends Assign, BoxOwnProps> {} -/** - * Form checkbox input component - * - * Checkbox variants can be defined in `theme.forms` and the - * component uses the `theme.forms.checkbox` variant by default. - * @see https://theme-ui.com/components/checkbox/ - */ -export const Checkbox: ForwardRef - -export interface SliderProps - extends Assign, BoxOwnProps> {} -/** - * Range input element - * - * Slider variants can be defined in the `theme.forms` object. - * The Slider component uses `theme.forms.slider` as its default variant style. - * @see https://theme-ui.com/components/slider/ - */ -export const Slider: ForwardRef - -export interface FieldOwnProps extends MarginProps { - /** - * Text for Label component - */ - label: string - /** - * Used for the for, id, and name attributes - */ - name: string -} -export type FieldProps = FieldOwnProps & - Omit, 'as' | keyof FieldOwnProps> & { - /** - * form control to render, default Input - */ - as?: T - } - -// `T` is far from unnecessary. We derive component props from it. -// tslint:disable-next-line no-unnecessary-generics -export function Field< - T extends React.ElementType = React.ComponentType ->(props: FieldProps): JSX.Element - -export interface ProgressProps - extends Assign, BoxOwnProps> {} -/** - * @see https://theme-ui.com/components/progress/ - */ -export const Progress: ForwardRef - -export interface DonutProps - extends Assign< - Omit< - React.ComponentPropsWithRef<'svg'>, - 'opacity' | 'color' | 'css' | 'sx' | 'max' | 'min' - >, - BoxOwnProps - > { - value: number - min?: number - max?: number - title?: string - size?: string | number -} -/** - * Single value SVG donut chart - * @see https://theme-ui.com/components/donut/ - */ -export const Donut: ForwardRef - -export interface SpinnerProps - extends Assign< - Omit< - React.ComponentPropsWithRef<'svg'>, - 'opacity' | 'color' | 'css' | 'sx' - >, - BoxOwnProps - > { - size?: number | string -} -export const Spinner: ForwardRef - -export interface AvatarProps extends ImageProps { - size?: number | string -} -export const Avatar: ForwardRef - -export type BadgeProps = BoxProps -export const Badge: ForwardRef - -export interface CloseProps extends Omit {} -/** - * Button with close (×) icon. - * - * The Close component renders as a