Remove AmplifyProvider custom components feature (#716)

.changeset/sharp-cherries-knock.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+Remove AmplifyProvider custom components feature

docs/src/pages/_app.page.tsx

@@ -22,7 +22,7 @@ function MyApp({ Component, pageProps }) {
  <title>Amplify UI</title>
  <link rel="icon" type="image/svg+xml" href={favicon} />
  </Head>
- <AmplifyProvider components={{}} theme={theme} colorMode={colorMode}>
+ <AmplifyProvider theme={theme} colorMode={colorMode}>
  <Header
  platform={platform}
  colorMode={colorMode}

examples/next/pages/examples/listings/App.tsx

@@ -18,7 +18,7 @@ import './styles.scss';
 export const App = ({ children }) => {
  const [colorMode, setColorMode] = useState<ColorMode>('system');
  return (
- <AmplifyProvider components={{}} theme={theme} colorMode={colorMode}>
+ <AmplifyProvider theme={theme} colorMode={colorMode}>
  <header className="listing-app-header">
  <Logo />
 

packages/react/src/components/AmplifyProvider/AmplifyContext.tsx

@@ -2,14 +2,10 @@ import * as React from 'react';
 
 import { defaultTheme, WebTheme } from '@aws-amplify/ui';
 
-import * as primitives from '../../primitives/components';
-
 interface AmplifyContextType {
- components: Partial<typeof primitives>;
  theme: WebTheme;
 }
 
 export const AmplifyContext = React.createContext<AmplifyContextType>({
- components: primitives,
  theme: defaultTheme,
 });

packages/react/src/components/AmplifyProvider/__tests__/AmplifyProvider.test.tsx

@@ -1,13 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { useAmplify } from '../../../hooks';
 
-import { AmplifyProvider } from '..';
+import { AmplifyProvider } from '../index';
+import { Heading } from '../../../primitives';
 
 const App = () => {
- const {
- components: { Heading },
- } = useAmplify();
-
  return <Heading>Howdy</Heading>;
 };
 
@@ -34,21 +30,4 @@ describe('AmplifyProvider', () => {
  expect(wrapper).toBeInTheDocument();
  expect(wrapper).toHaveAttribute('data-amplify-theme', 'default-theme');
  });
-
- it('accepts custom primitives as components', async () => {
- render(
- <AmplifyProvider
- components={{
- Heading({ children }) {
- return <h1>Custom {children}</h1>;
- },
- }}
- >
- <App />
- </AmplifyProvider>
- );
-
- const heading = await screen.getByText('Custom Howdy');
- expect(heading.nodeName).toBe('H1');
- });
 });

packages/react/src/components/AmplifyProvider/index.tsx

@@ -1,24 +1,21 @@
-import { IdProvider } from '@radix-ui/react-id';
 import * as React from 'react';
+import { IdProvider } from '@radix-ui/react-id';
 
 import { createTheme, defaultTheme, Theme as UiTheme } from '@aws-amplify/ui';
 
 import { AmplifyContext } from './AmplifyContext';
-import * as primitives from '../../primitives/components';
 
 export type Theme = UiTheme;
 export type ColorMode = 'system' | 'light' | 'dark';
 
 interface AmplifyProviderProps {
  children: React.ReactNode;
- components?: Partial<typeof primitives>;
- theme?: Theme;
  colorMode?: ColorMode;
+ theme?: Theme;
 }
 
 export function AmplifyProvider({
  children,
- components,
  colorMode,
  theme = defaultTheme,
 }: AmplifyProviderProps) {
@@ -27,7 +24,6 @@ export function AmplifyProvider({
  return (
  <AmplifyContext.Provider
  value={{
- components,
  theme: webTheme,
  }}
  >

packages/react/src/hooks/useAmplify.ts

@@ -3,23 +3,14 @@ import * as React from 'react';
 import { Theme } from '@aws-amplify/ui';
 
 import { AmplifyContext } from '../components/AmplifyProvider/AmplifyContext';
-import * as primitives from '../primitives/components';
 
 interface UseAmplifyOutput {
- components: typeof primitives;
  theme: Theme;
 }
 
 export function useAmplify(): UseAmplifyOutput {
  const context = React.useContext(AmplifyContext);
- const { components: customComponents, theme } = context;
- const components = React.useMemo(
- () => ({
- ...primitives,
- ...customComponents,
- }),
- [customComponents]
- );
+ const { theme } = context;
 
- return { components, theme };
+ return { theme };
 }