@alaarab/ogrid-mcp 2.9.0 → 2.11.1

package/bundled-docs/guides/framework-showcase.mdx

@@ -1,246 +0,0 @@
----
-sidebar_position: 5
-title: Framework Showcase
-description: OGrid in React, Angular, Vue, and Vanilla JS — shared core, native components
----
-
-
-# Framework Showcase
-
-OGrid works with your existing design system — not against it. React, Angular, Vue, and Vanilla JS are all fully supported, and every framework shares the same headless core so most behavior stays aligned across them.
-
-Every grid below is live. Core interactions like sorting, filtering, editing, and selection are wired up across the demos, and the current browser verification split is documented in the [Browser Support Matrix](./browser-support-matrix).
-
----
-
-## Picking the right package
-
-The short version:
-
-- **Starting from scratch?** Pick the Radix variant for your framework — it's the lightest, with no peer dependencies beyond the framework itself.
-- **Already using a design system?** Pick the matching package — Fluent, Material, Angular Material, PrimeNG, Vuetify, or PrimeVue — and the grid components will use your existing components for buttons, inputs, and popovers.
-- **No framework?** Use `@alaarab/ogrid-js` for a full-featured grid with just a CDN import.
-
-Switching between UI libraries later is straightforward — you change the import and the wrapper provider if required. The grid configuration (columns, data, event handlers) doesn't change.
-
----
-
-## React
-
-Three design systems, all sharing the same hooks from `@alaarab/ogrid-react`. Your column definitions, event handlers, and grid API calls work identically across all three.
-
-### Radix UI — lightweight default
-
-The default React package. Radix primitives are bundled in — no separate peer dependency to install. It's a good starting point for new projects or when you want minimal overhead.
-
-```bash
-npm install @alaarab/ogrid-react-radix
-```
-
-```tsx
-
-export default function App() {
-  return (
-    <OGrid
-      columns={columns}
-      data={data}
-      getRowId={(row) => row.id}
-      statusBar
-    />
-  );
-}
-```
-
-<ShowcaseRadixDemo />
-
-### Fluent UI — Microsoft ecosystem
-
-If you're building for Microsoft Teams, SharePoint, or any Microsoft 365 integration, Fluent is your pick. The grid uses native Fluent components for headers, filters, and inputs so it blends naturally.
-
-```bash
-npm install @alaarab/ogrid-react-fluent @fluentui/react-components
-```
-
-```tsx
-
-export default function App() {
-  return (
-    <FluentProvider theme={webLightTheme}>
-      <OGrid columns={columns} data={data} getRowId={(row) => row.id} />
-    </FluentProvider>
-  );
-}
-```
-
-<ShowcaseFluentDemo />
-
-### Material UI — Google's Material Design
-
-If your app already uses MUI, this drops right in. The grid uses MUI components and respects your `ThemeProvider` — including custom palettes and typography.
-
-```bash
-npm install @alaarab/ogrid-react-material @mui/material @emotion/react @emotion/styled
-```
-
-```tsx
-
-const theme = createTheme({ palette: { primary: { main: '#6750a4' } } });
-
-export default function App() {
-  return (
-    <ThemeProvider theme={theme}>
-      <OGrid columns={columns} data={data} getRowId={(row) => row.id} />
-    </ThemeProvider>
-  );
-}
-```
-
-<ShowcaseMaterialDemo />
-
----
-
-## Angular
-
-Signals-based reactivity with standalone components — no NgModule, no boilerplate. All three packages share the same services from `@alaarab/ogrid-angular`.
-
-### Radix (Angular CDK) — lightweight default
-
-Angular CDK handles overlays (dropdowns, popovers) with no heavy UI framework required. Good default for new Angular projects.
-
-```bash
-npm install @alaarab/ogrid-angular-radix @angular/cdk
-```
-
-```typescript
-
-@Component({
-  standalone: true,
-  imports: [OGridComponent],
-  template: `<ogrid [props]="gridProps" />`
-})
-export class GridComponent {
-  gridProps = { columns, data, getRowId: (row) => row.id };
-}
-```
-
-### Angular Material
-
-If you're already on Angular Material, the grid components match your existing theme automatically.
-
-```bash
-npm install @alaarab/ogrid-angular-material @angular/material @angular/cdk
-```
-
-```typescript
-// Same props — just change the import
-```
-
-### PrimeNG
-
-For teams in the PrimeFaces ecosystem, PrimeNG integration means dialogs, dropdowns, and inputs all look native.
-
-```bash
-npm install @alaarab/ogrid-angular-primeng primeng
-```
-
-```typescript
-// Same props — just change the import
-```
-
----
-
-## Vue
-
-Composition API composables built with `ref()` and `computed()`. All three packages share composables from `@alaarab/ogrid-vue`.
-
-### Radix (Headless UI) — lightweight default
-
-Headless UI Vue components bundled in — no peer dependencies beyond Vue 3. Good starting point for new Vue projects.
-
-```bash
-npm install @alaarab/ogrid-vue-radix
-```
-
-```vue
-<script setup lang="ts">
-
-const gridProps = { columns, data, getRowId: (row) => row.id };
-</script>
-
-<template>
-  <OGrid :gridProps="gridProps" />
-</template>
-```
-
-### Vuetify
-
-If your app is built on Vuetify 3, the grid's buttons, selects, and inputs all use Vuetify components and adopt your existing theme.
-
-```bash
-npm install @alaarab/ogrid-vue-vuetify vuetify
-```
-
-```vue
-<script setup lang="ts">
-// Same gridProps — just change the import, wrap in <v-app> for theming
-</script>
-```
-
-### PrimeVue
-
-PrimeVue 4 integration for teams already on the PrimeFaces stack.
-
-```bash
-npm install @alaarab/ogrid-vue-primevue primevue
-```
-
-```vue
-<script setup lang="ts">
-// Same gridProps — just change the import
-</script>
-```
-
----
-
-## Vanilla JS / TypeScript
-
-No framework, no virtual DOM — just a container element and a class constructor. A built-in CSS theme covers light and dark mode with CSS custom properties you can override.
-
-```bash
-npm install @alaarab/ogrid-js
-```
-
-<VanillaJSDemo />
-
----
-
-## At a glance
-
-| Framework | Design Systems | Reactivity model |
-|-----------|----------------|-----------------|
-| **React** 17–19 | Radix *(bundled)* · Fluent UI v9 · MUI v7 | Hooks |
-| **Angular** 21 | Radix (CDK) *(default)* · Angular Material · PrimeNG | Signals |
-| **Vue** 3.3+ | Radix (Headless UI) *(bundled)* · Vuetify 3 · PrimeVue 4 | Composition API |
-| **Vanilla JS/TS** | Built-in CSS theme *(zero deps)* | EventEmitter |
-
-All 10 packages share the same `@alaarab/ogrid-core`. Shared test factories cover the common contract, and package-specific browser coverage handles the remaining interaction differences. Switching design systems within a framework family is usually a one-line import change.
-
-## Premium inputs (optional)
-
-Each framework has an optional inputs package with advanced cell editors: calendar date pickers, sliders, color pickers, ratings, and tag inputs. They're tree-shakeable and have no impact on bundle size unless you use them.
-
-| Framework | Package |
-|-----------|---------|
-| React | `@alaarab/ogrid-react-inputs` |
-| Angular | `@alaarab/ogrid-angular-inputs` |
-| Vue | `@alaarab/ogrid-vue-inputs` |
-| Vanilla JS | `@alaarab/ogrid-js-inputs` |
-
-See [Premium Inputs](../features/premium-inputs) for usage and the full list of available editors.
-
-## Related
-
-- [Quick Start](../getting-started/quick-start) — get a grid running in 60 seconds
-- [Vanilla JS Guide](../getting-started/vanilla-js) — full JS API documentation
-- [Theming Guide](./theming) — customize colors and styling
-- [Premium Inputs](../features/premium-inputs) — advanced cell editors