structure

ui structure.md

For this structure, I'll show you the best way to organize your exports to maintain both legacy support and provide a clean import path for your new UI components.

First, let's organize your new UI components:

// ./lib/my-ui/components/Button.tsx
export interface ButtonProps {
  // props
}

export const Button = ({ ...props }: ButtonProps) => {
  // component
};

Create an index file for your UI components:

// ./lib/my-ui/components/index.ts
export * from './Button';
// export other components

Then in your my-ui index:

// ./lib/my-ui/index.ts
export * from './components';
// export any other my-ui specific things (like utils, types, etc.)

In your main entry file:

// ./index.ts
// Legacy exports
export { default as someName } from "./lib/other/someName";
// ... other legacy exports

// New UI exports
export * as myUI from './lib/my-ui';

Now users can import in different ways:

// Legacy imports still work
import { someName } from 'the-lib';

// New UI components can be imported as
import { Button } from 'the-lib/my-ui';
// or
import { myUI } from 'the-lib';
const { Button } = myUI;

To make this work with your package.json, you'll need to add exports configuration:

{
  "name": "the-lib",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    },
    "./my-ui": {
      "types": "./dist/lib/my-ui/index.d.ts",
      "import": "./dist/lib/my-ui/index.js"
    }
  }
}

This setup:

1. Maintains backward compatibility
2. Provides a clean import path for new components
3. Allows for separate versioning and documentation
4. Keeps your code organized and modular

Would you like me to show how to handle any specific aspects of this setup?