@alaarab/ogrid-mcp 2.8.1 → 2.11.0

package/bundled-docs/features/premium-inputs.mdx

@@ -20,31 +20,6 @@ npm install @alaarab/ogrid-react-inputs
 
 Works with any OGrid React UI package (Radix, Fluent, Material).
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```bash
-npm install @alaarab/ogrid-angular-inputs
-```
-
-Works with any OGrid Angular UI package (Angular Material, PrimeNG, Radix).
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```bash
-npm install @alaarab/ogrid-vue-inputs
-```
-
-Works with any OGrid Vue UI package (Vuetify, PrimeVue, Radix).
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```bash
-npm install @alaarab/ogrid-js-inputs
-```
-
   </TabItem>
 </Tabs>
 
@@ -95,81 +70,8 @@ function App() {
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`
-:::
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-const columns = [
-  { columnId: 'name', name: 'Name' },
-  {
-    columnId: 'dueDate',
-    name: 'Due Date',
-    editable: true,
-    cellEditor: DatePickerEditorComponent,
-    cellEditorPopup: true,
-  },
-];
-```
-
-:::tip Switching UI libraries
-`DatePickerEditorComponent` works with all Angular UI packages:
-
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-- **Radix** (lightweight): `from '@alaarab/ogrid-angular-radix'`
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```typescript
-
-const columns = [
-  { columnId: 'name', name: 'Name' },
-  {
-    columnId: 'dueDate',
-    name: 'Due Date',
-    editable: true,
-    cellEditor: DatePickerEditor,
-    cellEditorPopup: true,
-  },
-];
-```
-
-:::tip Switching UI libraries
-`DatePickerEditor` works with all Vue UI packages:
-
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-- **Radix** (lightweight): `from '@alaarab/ogrid-vue-radix'`
 :::
 
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```typescript
-
-const grid = new OGrid(container, {
-  columns: [
-    { columnId: 'name', name: 'Name' },
-    {
-      columnId: 'dueDate',
-      name: 'Due Date',
-      editable: true,
-      cellEditor: createDatePickerEditor,
-      cellEditorPopup: true,
-    },
-  ],
-  data,
-  getRowId: (item) => item.id,
-  editable: true,
-});
-```
-
   </TabItem>
 </Tabs>
 
@@ -200,57 +102,6 @@ const columns = [
     cellEditorParams: { maxStars: 5, allowHalf: false },
   },
 ];
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'rating',
-    name: 'Rating',
-    editable: true,
-    cellEditor: RatingEditorComponent,
-    cellEditorPopup: true,
-    cellEditorParams: { maxStars: 5, allowHalf: false },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'rating',
-    name: 'Rating',
-    editable: true,
-    cellEditor: RatingEditor,
-    cellEditorPopup: true,
-    cellEditorParams: { maxStars: 5, allowHalf: false },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'rating',
-    name: 'Rating',
-    editable: true,
-    cellEditor: createRatingEditor,
-    cellEditorPopup: true,
-    cellEditorParams: { maxStars: 5, allowHalf: false },
-  },
-];
 ```
 
   </TabItem>
@@ -283,57 +134,6 @@ const columns = [
     cellEditorParams: { allowCustom: true },
   },
 ];
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'color',
-    name: 'Color',
-    editable: true,
-    cellEditor: ColorPickerEditorComponent,
-    cellEditorPopup: true,
-    cellEditorParams: { allowCustom: true },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'color',
-    name: 'Color',
-    editable: true,
-    cellEditor: ColorPickerEditor,
-    cellEditorPopup: true,
-    cellEditorParams: { allowCustom: true },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'color',
-    name: 'Color',
-    editable: true,
-    cellEditor: createColorPickerEditor,
-    cellEditorPopup: true,
-    cellEditorParams: { allowCustom: true },
-  },
-];
 ```
 
   </TabItem>
@@ -366,57 +166,6 @@ const columns = [
     cellEditorParams: { min: 0, max: 100, step: 1 },
   },
 ];
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'progress',
-    name: 'Progress',
-    editable: true,
-    cellEditor: SliderEditorComponent,
-    cellEditorPopup: true,
-    cellEditorParams: { min: 0, max: 100, step: 1 },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'progress',
-    name: 'Progress',
-    editable: true,
-    cellEditor: SliderEditor,
-    cellEditorPopup: true,
-    cellEditorParams: { min: 0, max: 100, step: 1 },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'progress',
-    name: 'Progress',
-    editable: true,
-    cellEditor: createSliderEditor,
-    cellEditorPopup: true,
-    cellEditorParams: { min: 0, max: 100, step: 1 },
-  },
-];
 ```
 
   </TabItem>
@@ -453,66 +202,6 @@ const columns = [
     },
   },
 ];
-```
-
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'skills',
-    name: 'Skills',
-    editable: true,
-    cellEditor: TagsEditorComponent,
-    cellEditorPopup: true,
-    cellEditorParams: {
-      suggestions: ['React', 'Angular', 'Vue', 'TypeScript', 'Python'],
-      allowCreate: true,
-    },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'skills',
-    name: 'Skills',
-    editable: true,
-    cellEditor: TagsEditor,
-    cellEditorPopup: true,
-    cellEditorParams: {
-      suggestions: ['React', 'Angular', 'Vue', 'TypeScript', 'Python'],
-      allowCreate: true,
-    },
-  },
-];
-```
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```typescript
-
-const columns = [
-  {
-    columnId: 'skills',
-    name: 'Skills',
-    editable: true,
-    cellEditor: createTagsEditor,
-    cellEditorPopup: true,
-    cellEditorParams: {
-      suggestions: ['React', 'Angular', 'Vue', 'TypeScript', 'Python'],
-      allowCreate: true,
-    },
-  },
-];
 ```
 
   </TabItem>

package/bundled-docs/features/responsive-columns.mdx

@@ -59,84 +59,9 @@ function App() {
 ```
 
 <Admonition type="tip">
-Also available from `@alaarab/ogrid-react-fluent` and `@alaarab/ogrid-react-material`.
+Also available from `@alaarab/ogrid-react-fluent`.
 </Admonition>
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  template: `
-    <ogrid-component
-      [columns]="columns"
-      [data]="items"
-      [getRowId]="getRowId"
-      [responsiveColumns]="true"
-    />
-  `,
-})
-export class AppComponent {
-  columns = [
-    { columnId: 'name', name: 'Name', responsivePriority: 0 },
-    { columnId: 'email', name: 'Email', responsivePriority: 1 },
-    { columnId: 'phone', name: 'Phone', responsivePriority: 3 },
-  ];
-  items = [...];
-  getRowId = (item: any) => item.id;
-}
-```
-
-<Admonition type="tip">
-Also available from `@alaarab/ogrid-angular-primeng` and `@alaarab/ogrid-angular-radix`.
-</Admonition>
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<template>
-  <OGrid
-    :columns="columns"
-    :data="items"
-    :getRowId="(item) => item.id"
-    :responsiveColumns="true"
-  />
-</template>
-
-<script setup>
-
-const columns = [
-  { columnId: 'name', name: 'Name', responsivePriority: 0 },
-  { columnId: 'email', name: 'Email', responsivePriority: 1 },
-  { columnId: 'phone', name: 'Phone', responsivePriority: 3 },
-];
-const items = [...];
-</script>
-```
-
-<Admonition type="tip">
-Also available from `@alaarab/ogrid-vue-primevue` and `@alaarab/ogrid-vue-radix`.
-</Admonition>
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```typescript
-
-const grid = new OGrid(document.getElementById('grid')!, {
-  columns: [
-    { columnId: 'name', name: 'Name', responsivePriority: 0 },
-    { columnId: 'email', name: 'Email', responsivePriority: 1 },
-    { columnId: 'phone', name: 'Phone', responsivePriority: 3 },
-  ],
-  data: items,
-  getRowId: (item) => item.id,
-  responsiveColumns: true,
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/row-selection.mdx

@@ -13,14 +13,8 @@ Select entire rows with checkboxes (multiple mode) or radio-button-style selecti
 
 <RowSelectionDemo />
 
-:::tip Framework-Specific Styling
-The live demo above shows **React Radix UI** styling (lightweight default). To see how row selection looks in your framework's design system, click the framework buttons above the demo to open online demo:
-- **React**  -  Radix UI checkboxes
-- **Angular**  -  Angular Material checkboxes
-- **Vue**  -  Vuetify checkboxes
-- **JS**  -  Vanilla JS default theme
-
-Each framework renders with its native checkbox components, so the styling matches your design system.
+:::tip UI styling
+The live demo above shows **Radix UI** styling (lightweight default). The same feature renders through the Fluent UI package with its native components.
 :::
 
 ## Quick Example
@@ -61,106 +55,8 @@ The `OGrid` component has the same props across all React UI packages. To switch
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `
-    <button (click)="handleExport()">Export Selected</button>
-    <ogrid [props]="gridProps" />
-  `
-})
-export class GridComponent {
-  constructor(private gridService: OGridService) {}
-
-  handleExport() {
-    const selectedIds = this.gridService.getSelectedRows();
-    console.log('Selected:', selectedIds);
-  }
-
-  gridProps = {
-    columns,
-    data: people,
-    getRowId: (item: Person) => item.id,
-    rowSelection: 'multiple' as const,
-    onSelectionChange: (event: any) => {
-      console.log(`${event.selectedItems.length} rows selected`);
-    },
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component API across Angular packages. To switch, just change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone  -  no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-const gridProps = {
-  columns,
-  data: people,
-  getRowId: (item) => item.id,
-  rowSelection: 'multiple',
-  onSelectionChange: (event) => {
-    console.log(`${event.selectedItems.length} rows selected`);
-  },
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same component API across Vue packages. To switch, just change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: columns,
-  data: people,
-  getRowId: (item) => item.id,
-  rowSelection: 'multiple',
-});
-
-grid.on('selectionChange', ({ selectedItems, selectedRowIds }) => {
-  console.log(`${selectedItems.length} rows selected`);
-  console.log('Selected row IDs:', selectedRowIds);
-});
-
-// Programmatic access
-document.getElementById('export-btn').addEventListener('click', () => {
-  const selected = grid.api.getSelectedRows();
-  console.log('Selected:', selected);
-});
-```
-
   </TabItem>
 </Tabs>
 

package/bundled-docs/features/server-side-data.mdx

@@ -14,7 +14,7 @@ Pass a `dataSource` instead of a `data` array to delegate sorting, filtering, an
 <ServerSideDemo />
 
 :::tip Try it in your framework
-The demo above uses Radix UI for styling. To see this feature with your framework's design system (Fluent UI, Material UI, Vuetify, PrimeNG, etc.), click **"Open in online demo"** below the demo.
+The demo above uses Radix UI for styling. To see this feature with the Fluent UI implementation, click **"Open in online demo"** below the demo.
 :::
 
 ## Quick Example
@@ -63,136 +63,8 @@ The `OGrid` component has the same props across all React UI packages. To switch
 
 - **Radix** (lightweight, default): `from '@alaarab/ogrid-react-radix'`
 - **Fluent UI** (Microsoft 365 / SPFx): `from '@alaarab/ogrid-react-fluent'`  -  wrap in `<FluentProvider>`
-- **Material UI** (MUI v7): `from '@alaarab/ogrid-react-material'`  -  wrap in `<ThemeProvider>`
 :::
 
-  </TabItem>
-  <TabItem value="angular" label="Angular">
-
-```typescript
-
-interface Employee {
-  id: number;
-  name: string;
-  department: string;
-  salary: number;
-}
-
-const dataSource: IDataSource<Employee> = {
-  async fetchPage(params: IFetchParams): Promise<IPageResult<Employee>> {
-    const query = new URLSearchParams({
-      page: String(params.page),
-      pageSize: String(params.pageSize),
-      ...(params.sort && {
-        sortField: params.sort.field,
-        sortDir: params.sort.direction,
-      }),
-    });
-    const res = await fetch(`/api/employees?${query}`);
-    return res.json();
-  },
-};
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = {
-    columns: columns,
-    dataSource,
-    getRowId: (e: Employee) => e.id,
-    defaultPageSize: 25,
-  };
-}
-```
-
-:::tip Switching UI libraries
-Same component API across Angular packages. To switch, just change the import:
-
-- **Radix (CDK)**: `from '@alaarab/ogrid-angular-radix'` *(default, lightweight)*
-- **Angular Material**: `from '@alaarab/ogrid-angular-material'`
-- **PrimeNG**: `from '@alaarab/ogrid-angular-primeng'`
-
-All components are standalone  -  no NgModule required.
-:::
-
-  </TabItem>
-  <TabItem value="vue" label="Vue">
-
-```vue
-<script setup lang="ts">
-
-interface Employee {
-  id: number;
-  name: string;
-  department: string;
-  salary: number;
-}
-
-const dataSource: IDataSource<Employee> = {
-  async fetchPage(params: IFetchParams): Promise<IPageResult<Employee>> {
-    const query = new URLSearchParams({
-      page: String(params.page),
-      pageSize: String(params.pageSize),
-      ...(params.sort && {
-        sortField: params.sort.field,
-        sortDir: params.sort.direction,
-      }),
-    });
-    const res = await fetch(`/api/employees?${query}`);
-    return res.json();
-  },
-};
-
-const gridProps = {
-  columns,
-  dataSource,
-  getRowId: (e: Employee) => e.id,
-  defaultPageSize: 25,
-};
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-:::tip Switching UI libraries
-Same component API across Vue packages. To switch, just change the import:
-
-- **Radix (Headless UI)**: `from '@alaarab/ogrid-vue-radix'` *(default, lightweight)*
-- **Vuetify**: `from '@alaarab/ogrid-vue-vuetify'`  -  wrap in `<v-app>` for theming
-- **PrimeVue**: `from '@alaarab/ogrid-vue-primevue'`
-:::
-
-  </TabItem>
-  <TabItem value="js" label="Vanilla JS">
-
-```js
-
-const grid = new OGrid(document.getElementById('grid'), {
-  columns: columns,
-  dataSource: {
-    async fetchPage({ page, pageSize, sort, filters }) {
-      const query = new URLSearchParams({
-        page: String(page),
-        pageSize: String(pageSize),
-        ...(sort && {
-          sortField: sort.field,
-          sortDir: sort.direction,
-        }),
-      });
-      const res = await fetch(`/api/employees?${query}`);
-      return res.json(); // { items: Employee[], totalCount: number }
-    },
-  },
-  getRowId: (e) => e.id,
-  pageSize: 25,
-});
-```
-
   </TabItem>
 </Tabs>