test-cutting UI Components

Common errors

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause Incorrect default import or module resolution issue when importing a component from `test-cutting`.
  fix Ensure you are using named imports for components: `import { Button } from 'test-cutting';` instead of `import Button from 'test-cutting';`.

• TS2307: Cannot find module 'test-cutting' or its corresponding type declarations.

  cause The package is not installed, or TypeScript cannot locate its type definitions.
  fix Run `npm install test-cutting` or `yarn add test-cutting`. If types are still missing, ensure your `tsconfig.json` includes `"test-cutting"` in `typeRoots` or `types` if it's a specific configuration, or that `@types/test-cutting` is installed if the library doesn't ship its own types (though `test-cutting` ships types).

• TypeError: Cannot read properties of undefined (reading 'colors')

  cause Attempting to access theme properties (e.g., `theme.colors`) outside of the `TestCuttingProvider` context, or the provider is not configured correctly.
  fix Ensure that any component using `useTheme` or relying on theme context is rendered as a child of `TestCuttingProvider`. Verify that `TestCuttingProvider` is configured with a valid theme object if required.

Warnings

• breaking Major breaking changes occurred between v6 and v7, including a complete overhaul of the styling system, a revised theming API, and potential renaming or removal of certain components. Direct upgrades without reviewing the migration guide will likely result in compilation or runtime errors.
  Fix: Consult the official migration guide from v6 to v7 on the test-cutting GitHub repository or documentation site. Pay close attention to changes in prop names, CSS variable usage, and `TestCuttingProvider` configuration.
• breaking The `className` and `style` props on components might behave differently in v7 due to changes in internal styling logic. Some components may now internally manage specific styles that previously could be overridden directly.
  Fix: Prefer using `sx` prop (if available, common in modern UI libs) or the designated theming customization options for styling. If direct DOM manipulation is required, ensure it doesn't conflict with the library's encapsulated styles.
• gotcha When using `test-cutting` with server-side rendering (SSR) frameworks like Next.js or Remix, ensure proper hydration of component styles. Mismatches between server-generated and client-side styles can lead to FOUC (Flash of Unstyled Content) or hydration errors.
  Fix: Follow the library's specific SSR setup guide, which typically involves configuring a `StyleProvider` or injecting server-generated CSS into the HTML head before client-side hydration.

Install

• npm install test-cutting npm
• yarn add test-cutting yarn
• pnpm add test-cutting pnpm

Imports

• Button
  wrong:

  import Button from 'test-cutting';
  const { Button } = require('test-cutting');

  correct:

  import { Button } from 'test-cutting';

  Components are typically named exports. Default imports are not common for individual components.
• useTheme
  wrong:

  const useTheme = require('test-cutting').useTheme;

  correct:

  import { useTheme } from 'test-cutting';

  Hooks are also commonly named exports. The library likely provides ESM-first exports.
• TestCuttingProvider
  wrong:

  import TestCuttingProvider from 'test-cutting/provider';

  correct:

  import { TestCuttingProvider } from 'test-cutting';

  Many UI libraries use a context provider to inject themes or global configurations. Ensure it's imported from the main entry point.
• ButtonProps
  wrong:

  import { ButtonProps } from 'test-cutting';

  correct:

  import type { ButtonProps } from 'test-cutting';

  Use 'import type' for type-only imports to ensure they are stripped during compilation and prevent runtime overhead.

Quickstart

This quickstart demonstrates importing components and hooks, wrapping the application with the TestCuttingProvider for theme access, and rendering basic buttons.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Button, TestCuttingProvider, useTheme } from 'test-cutting';

const App = () => {
  const theme = useTheme();

  return (
    <TestCuttingProvider>
      <div style={{ padding: '20px', background: theme?.colors?.background || '#f0f0f0' }}>
        <h1>Welcome to test-cutting!</h1>
        <p>Current theme background: {theme?.colors?.background || 'default'}</p>
        <Button onClick={() => alert('Button clicked!')}>
          Click Me
        </Button>
        <Button variant="primary" disabled>
          Disabled Primary
        </Button>
      </div>
    </TestCuttingProvider>
  );
};

const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}