@alaarab/ogrid-mcp 2.8.1 → 2.11.0

package/bundled-docs/api/README.md

@@ -16,7 +16,6 @@ Complete API documentation for OGrid components, types, and interfaces.
 - [OGrid Props](./ogrid-props.mdx): top-level OGrid component props (client-side and server-side modes)
 - [Column Definition](./column-def.mdx): complete column definition reference (IColumnDef, IColumnGroupDef, cell editors, filters)
 - [Grid API](./grid-api.mdx): imperative grid API (IOGridApi) for programmatic control
-- [JS API](./js-api.mdx): vanilla JS API reference (OGrid class, state classes, components)
 
 ## Types
 
@@ -32,7 +31,6 @@ Complete API documentation for OGrid components, types, and interfaces.
 ### Getting Started
 - [Installation](/docs/getting-started/installation)
 - [Quick Start](/docs/getting-started/quick-start)
-- [Framework Showcase](/docs/guides/framework-showcase)
 
 ### Features
 - [Sorting](/docs/features/sorting)
@@ -48,10 +46,9 @@ Complete API documentation for OGrid components, types, and interfaces.
 
 ## Type Imports
 
-All types can be imported from any OGrid package:
+All types can be imported from any React UI package:
 
 ```typescript
-// React packages
   IColumnDef,
   IOGridApi,
   IOGridProps,
@@ -61,34 +58,12 @@ All types can be imported from any OGrid package:
   FilterValue,
   RowId,
 } from '@alaarab/ogrid-react-radix';
-
-// Angular packages
-  IColumnDef,
-  IOGridApi,
-  IDataSource,
-} from '@alaarab/ogrid-angular-material';
-
-// Vue packages
-  IColumnDef,
-  IOGridApi,
-  IDataSource,
-} from '@alaarab/ogrid-vue-vuetify';
-
-// Vanilla JS
-  IColumnDef,
-  IDataSource,
-} from '@alaarab/ogrid-js';
 ```
 
-## Framework-Specific APIs
-
-Each framework has idiomatic APIs:
-
-| Framework | Orchestration | State Hook/Service | Props Pattern |
-|-----------|---------------|-------------------|---------------|
-| React | `useOGrid()` hook | `useDataGridState()` | Individual props |
-| Angular | `OGridService` | `DataGridStateService` | Signal-based inputs |
-| Vue | `useOGrid()` composable | `useDataGridState()` | Individual props or `:grid-props` |
-| Vanilla JS | `OGrid` class | `GridState` class | Constructor options |
+## API surface
 
-See the [Framework Showcase](/docs/guides/framework-showcase) for detailed comparisons and examples.
+| Surface | Entry point |
+|---|---|
+| Component | `<OGrid>` from `@alaarab/ogrid-react-radix` or `-react-fluent` |
+| Orchestration hook | `useOGrid()` |
+| State hook | `useDataGridState()` |

package/bundled-docs/api/column-def.mdx

@@ -43,7 +43,7 @@ interface IColumnMeta {
 
 ## IColumnDef<T>
 
-Extends `IColumnMeta` with rendering, editing, and data access properties. The `renderCell` and `cellStyle` properties are React-specific additions; Angular and Vue packages have equivalent rendering mechanisms in their respective component APIs.
+Extends `IColumnMeta` with rendering, editing, and data access properties. `renderCell` returns a React node; `cellStyle` accepts a `React.CSSProperties` object or a function returning one.
 
 ```typescript
 interface IColumnDef<T> extends IColumnMeta {

package/bundled-docs/api/components-column-chooser.mdx

@@ -15,30 +15,6 @@ A dropdown component that allows users to show/hide columns in the grid. Display
 
 ```typescript
 // or
-// or
-```
-
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```typescript
-// ColumnChooser is an internal component in vanilla JS
 ```
 
 </TabItem>
@@ -134,78 +110,6 @@ function MyApp() {
 
 The "ID" and "Product Name" columns will have disabled checkboxes and cannot be hidden.
 
-## Angular Usage
-
-In Angular packages, the component uses `@Input()` and `@Output()` decorators:
-
-```typescript
-
-@Component({
-  selector: 'app-my-grid',
-  standalone: true,
-  imports: [ColumnChooserComponent],
-  template: `
-    <ogrid-column-chooser
-      [columns]="columns"
-      [visibleColumns]="visibleColumns"
-      (onVisibilityChange)="handleVisibilityChange($event)"
-    />
-  `
-})
-export class MyGridComponent {
-  columns: IColumnDefinition[] = [
-    { columnId: 'id', name: 'ID', required: true },
-    { columnId: 'name', name: 'Product Name' },
-    { columnId: 'price', name: 'Price' },
-  ];
-
-  visibleColumns = new Set(['id', 'name', 'price']);
-
-  handleVisibilityChange(event: { columnKey: string; visible: boolean }) {
-    if (event.visible) {
-      this.visibleColumns.add(event.columnKey);
-    } else {
-      this.visibleColumns.delete(event.columnKey);
-    }
-    this.visibleColumns = new Set(this.visibleColumns); // Trigger change detection
-  }
-}
-```
-
-## Vue Usage
-
-In Vue packages, the component accepts props via `v-bind` or shorthand `:`:
-
-```vue
-<template>
-  <ColumnChooser
-    :columns="columns"
-    :visible-columns="visibleColumns"
-    @visibility-change="handleVisibilityChange"
-  />
-</template>
-
-<script setup lang="ts">
-
-const columns: IColumnDefinition[] = [
-  { columnId: 'id', name: 'ID', required: true },
-  { columnId: 'name', name: 'Product Name' },
-  { columnId: 'price', name: 'Price' },
-];
-
-const visibleColumns = ref<Set<string>>(new Set(['id', 'name', 'price']));
-
-const handleVisibilityChange = (columnKey: string, visible: boolean) => {
-  if (visible) {
-    visibleColumns.value.add(columnKey);
-  } else {
-    visibleColumns.value.delete(columnKey);
-  }
-  visibleColumns.value = new Set(visibleColumns.value); // Trigger reactivity
-};
-</script>
-```
-
 ## Behavior
 
 ### Select All / Clear All

package/bundled-docs/api/components-column-header-filter.mdx

@@ -15,30 +15,6 @@ A column header component that combines sorting and filtering UI. Displays the c
 
 ```typescript
 // or
-// or
-```
-
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```typescript
-// ColumnHeaderFilter is an internal component in vanilla JS
 ```
 
 </TabItem>
@@ -198,64 +174,6 @@ function MyHeader() {
 }
 ```
 
-## Angular Usage
-
-In Angular packages, the component has the same prop interface but uses `@Input()` decorators:
-
-```typescript
-
-@Component({
-  selector: 'app-my-header',
-  standalone: true,
-  imports: [ColumnHeaderFilterComponent],
-  template: `
-    <ogrid-column-header-filter
-      [columnKey]="'status'"
-      [columnName]="'Status'"
-      [filterType]="'multiSelect'"
-      [selectedValues]="selectedValues"
-      (onFilterChange)="handleFilterChange($event)"
-      [options]="options"
-    />
-  `
-})
-export class MyHeaderComponent {
-  selectedValues: string[] = [];
-  options = ['Active', 'Pending', 'Completed'];
-
-  handleFilterChange(values: string[]) {
-    this.selectedValues = values;
-  }
-}
-```
-
-## Vue Usage
-
-In Vue packages, the component accepts props via `v-bind` or shorthand `:`:
-
-```vue
-<template>
-  <ColumnHeaderFilter
-    column-key="status"
-    column-name="Status"
-    filter-type="multiSelect"
-    :selected-values="selectedValues"
-    @filter-change="handleFilterChange"
-    :options="options"
-  />
-</template>
-
-<script setup lang="ts">
-
-const selectedValues = ref<string[]>([]);
-const options = ['Active', 'Pending', 'Completed'];
-
-const handleFilterChange = (values: string[]) => {
-  selectedValues.value = values;
-};
-</script>
-```
-
 ## Accessibility
 
 `ColumnHeaderFilter` implements WCAG 2.1 AA standards with full keyboard and screen reader support.
@@ -344,7 +262,7 @@ See the [Accessibility Guide](/docs/guides/accessibility) for complete documenta
 
 ## Styling
 
-All UI packages provide default styles matching their design system (Radix UI, Fluent UI, Material UI, PrimeNG, Vuetify, PrimeVue). Styles are scoped to avoid conflicts.
+All UI packages provide default styles matching their design system (Radix UI, Fluent UI). Styles are scoped to avoid conflicts.
 
 **CSS custom properties** (all packages):
 - `--ogrid-header-bg`  -  Header background color

package/bundled-docs/api/components-datagrid-table.mdx

@@ -15,30 +15,6 @@ The core data grid component that renders the table structure, headers, rows, ce
 
 ```typescript
 // or
-// or
-```
-
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```typescript
-// DataGridTable is an internal component of OGrid in vanilla JS
 ```
 
 </TabItem>
@@ -142,45 +118,6 @@ function MyGrid() {
 }
 ```
 
-## Angular Usage
-
-In Angular Material/Radix packages, `DataGridTable` accepts a single `propsInput` property:
-
-```typescript
-
-@Component({
-  selector: 'app-my-grid',
-  standalone: true,
-  imports: [DataGridTableComponent],
-  template: `
-    <ogrid-datagrid-table [propsInput]="gridProps" />
-  `
-})
-export class MyGridComponent {
-  ogridService = new OGridService<Product>();
-  gridProps = this.ogridService.getDataGridProps();
-}
-```
-
-In Angular PrimeNG, `DataGridTable` uses individual `@Input()` properties matching the React prop names.
-
-## Vue Usage
-
-In Vue Vuetify/PrimeVue packages, `DataGridTable` accepts a single `:grid-props` prop:
-
-```vue
-<template>
-  <DataGridTable :grid-props="gridProps" />
-</template>
-
-<script setup lang="ts">
-
-const { dataGridProps: gridProps } = useOGrid({ /* ... */ });
-</script>
-```
-
-In Vue Radix, `DataGridTable` uses individual props via `defineProps<IOGridProps>()` (like React).
-
 ## Accessibility
 
 `DataGridTable` implements WCAG 2.1 AA standards with comprehensive keyboard navigation and screen reader support.

package/bundled-docs/api/components-pagination-controls.mdx

@@ -15,30 +15,6 @@ A pagination UI component that displays page navigation buttons, current page in
 
 ```typescript
 // or
-// or
-```
-
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```typescript
-// or
-// or
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```typescript
-// PaginationControls is an internal component in vanilla JS
 ```
 
 </TabItem>
@@ -132,76 +108,6 @@ function MyApp() {
 }
 ```
 
-## Angular Usage
-
-In Angular packages, the component uses `@Input()` and `@Output()` decorators:
-
-```typescript
-
-@Component({
-  selector: 'app-my-grid',
-  standalone: true,
-  imports: [PaginationControlsComponent],
-  template: `
-    <ogrid-pagination-controls
-      [currentPage]="currentPage"
-      [pageSize]="pageSize"
-      [totalCount]="totalCount"
-      (onPageChange)="handlePageChange($event)"
-      (onPageSizeChange)="handlePageSizeChange($event)"
-      [entityLabelPlural]="'users'"
-    />
-  `
-})
-export class MyGridComponent {
-  currentPage = 1;
-  pageSize = 20;
-  totalCount = 500;
-
-  handlePageChange(page: number) {
-    this.currentPage = page;
-  }
-
-  handlePageSizeChange(pageSize: number) {
-    this.pageSize = pageSize;
-    this.currentPage = 1; // Reset to first page
-  }
-}
-```
-
-## Vue Usage
-
-In Vue packages, the component accepts props via `v-bind` or shorthand `:`:
-
-```vue
-<template>
-  <PaginationControls
-    :current-page="currentPage"
-    :page-size="pageSize"
-    :total-count="totalCount"
-    @page-change="handlePageChange"
-    @page-size-change="handlePageSizeChange"
-    entity-label-plural="users"
-  />
-</template>
-
-<script setup lang="ts">
-
-const currentPage = ref(1);
-const pageSize = ref(20);
-const totalCount = ref(500);
-
-const handlePageChange = (page: number) => {
-  currentPage.value = page;
-};
-
-const handlePageSizeChange = (size: number) => {
-  pageSize.value = size;
-  currentPage.value = 1; // Reset to first page
-};
-</script>
-```
-
 ## Behavior
 
 ### Pagination Buttons

package/bundled-docs/api/components-sidebar.mdx

@@ -21,27 +21,6 @@ A collapsible sidebar panel that provides quick access to column visibility cont
 The `SideBar` component is framework-agnostic and uses inline styles. All React UI packages (Radix, Fluent, Material) use the same `SideBar` from `@alaarab/ogrid-react`.
 :::
 
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-// SideBar is rendered internally by OGridLayout in Angular packages
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```typescript
-// SideBar is rendered internally by OGridLayout in Vue packages
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```typescript
-// SideBar is an internal component in vanilla JS
-```
-
 </TabItem>
 </Tabs>
 
@@ -224,61 +203,6 @@ function MyGrid() {
 />
 ```
 
-## Angular Usage
-
-In Angular packages, the sidebar is rendered internally by `OGridLayoutComponent` when `sideBar` is enabled:
-
-```typescript
-
-@Component({
-  selector: 'app-my-grid',
-  template: `
-    <ogrid [propsInput]="gridProps" />
-  `
-})
-export class MyGridComponent {
-  ogridService = new OGridService<Product>();
-
-  constructor() {
-    // Enable sidebar via props
-    this.ogridService.setProps({
-      sideBar: {
-        panels: ['columns', 'filters'],
-        defaultPanel: 'columns',
-        position: 'right',
-      },
-    });
-  }
-
-  gridProps = this.ogridService.getDataGridProps();
-}
-```
-
-## Vue Usage
-
-In Vue packages, the sidebar is rendered internally by `OGridLayout` when `sideBar` is enabled:
-
-```vue
-<template>
-  <OGrid
-    :data="products"
-    :columns="columns"
-    :get-row-id="(item) => item.id"
-    :side-bar="{
-      panels: ['columns', 'filters'],
-      defaultPanel: 'columns',
-      position: 'right',
-    }"
-  />
-</template>
-
-<script setup lang="ts">
-
-const products = [...];
-const columns = [...];
-</script>
-```
-
 ## Behavior
 
 ### Tab Strip

package/bundled-docs/api/components-status-bar.mdx

@@ -15,28 +15,6 @@ A status bar component that displays row counts, filtered counts, selected count
 
 ```typescript
 // or
-// or
-```
-
-</TabItem>
-<TabItem value="angular" label="Angular">
-
-```typescript
-// StatusBar is rendered internally by DataGridTable in Angular packages
-```
-
-</TabItem>
-<TabItem value="vue" label="Vue">
-
-```typescript
-// StatusBar is rendered internally by DataGridTable in Vue packages
-```
-
-</TabItem>
-<TabItem value="js" label="Vanilla JS">
-
-```typescript
-// StatusBar is an internal component in vanilla JS
 ```
 
 </TabItem>
@@ -168,50 +146,6 @@ The status bar intelligently shows/hides sections based on available data:
 
 Sections are separated by `|` (pipe) characters.
 
-## Angular Usage
-
-In Angular packages, the status bar is rendered internally by `DataGridTable` when `statusBar` is enabled. You don't need to import or use the component directly.
-
-```typescript
-
-@Component({
-  selector: 'app-my-grid',
-  template: `
-    <ogrid-datagrid-table [propsInput]="gridProps" />
-  `
-})
-export class MyGridComponent {
-  ogridService = new OGridService<Product>();
-
-  constructor() {
-    // Enable status bar via props
-    this.ogridService.setProps({ statusBar: true });
-  }
-
-  gridProps = this.ogridService.getDataGridProps();
-}
-```
-
-## Vue Usage
-
-In Vue packages, the status bar is rendered internally by `DataGridTable` when `statusBar` is enabled.
-
-```vue
-<template>
-  <DataGridTable :grid-props="gridProps" />
-</template>
-
-<script setup lang="ts">
-
-const { dataGridProps: gridProps } = useOGrid({
-  data: products,
-  columns: columns,
-  getRowId: (item) => item.id,
-  statusBar: true, // Enable status bar
-});
-</script>
-```
-
 ## Enabling in OGrid
 
 The top-level `OGrid` component accepts a `statusBar` prop: