table-reuse/README.md

Common, reusable React UI components

# table-reuse

A **clean, reusable React UI component library** for consistent enterprise and product interfaces.

✅ **Designed for reusability and consistency across projects**

✅ **Focus on composable, minimal, and flexible APIs**

✅ ActionView

✅ More coming

---

## Installation

```bash
npm install table-reuse
```

---

## Components

Reusable, common UI components such as `ActionView`, `ConfirmButton`, and `EditableText` will be incrementally added for building consistent product UIs efficiently.

---

## ActionView Example

### Features

- **Reusable action handling:** Synchronous or asynchronous `onClick` handlers supported.
- **Layout flexibility:** Control `direction` ("vertical" | "horizontal").
- **Overflow handling:** `maxVisible` prop controls how many actions are shown before the rest overflow into a dropdown.

---

## Usage

Define your actions **outside** the React component and pass them to `ActionView` for consistent handling:

```tsx
import { ActionView } from "table-reuse";
import type { ClickAction } from "table-reuse";

const actions: ClickAction[] = [
  {
    label: "Edit",
    onClick: async () => {
      console.log("Edit clicked");
      await new Promise((res) => setTimeout(res, 500));
    },
    type: "primary",
  },
  {
    label: "Delete",
    onClick: () => {
      console.log("Delete clicked");
    },
    danger: true,
  },
];

function Example() {
  return (
    <ActionView
      actions={actions}
      maxVisible={2} // Only 2 buttons shown before overflow
      direction="vertical" // or "horizontal"
    />
  );
}
```

---

## Roadmap

- [ ] Add `ConfirmButton` for consistent confirmation flows.
- [ ] Add `EditableText` for in-place editing.
- [ ] Add `FormBuilder` for standardized forms.
- [ ] Expand design tokens and theming utilities.
- [ ] Provide storybook examples and codesandbox playgrounds.

---

## License

MIT

---

## Why `table-reuse`?

- **Saves time:** Eliminate repeated implementation of common UI patterns.
- **Ensures consistency:** Same design and behavior across products and teams.
- **Composable & lightweight:** Add only what you need.
- **Future-friendly:** Ready for theming, design system expansion, and potential AI-driven UI composition later.