System pluginów

import { createDeenruvUIPlugin } from '@deenruv/react-ui-devkit';

export const MyPlugin = createDeenruvUIPlugin({
  name: 'my-plugin-ui',
  version: '1.0.0',
  // ...punkty rozszerzeń
});

pages: [
  { path: '', element: <MyListPage /> },         // /admin-ui/extensions/my-plugin-ui/
  { path: 'new', element: <MyCreatePage /> },     // /admin-ui/extensions/my-plugin-ui/new
  { path: ':id', element: <MyDetailPage /> },     // /admin-ui/extensions/my-plugin-ui/:id
],

tables: [
  {
    locationId: 'products-list-view',
    columns: [
      {
        header: 'Review Score',
        accessorKey: 'customFields.reviewScore',
        cell: ({ row }) => <StarRating value={row.original.customFields?.reviewScore} />,
      },
    ],
    rowActions: [
      {
        label: 'View Reviews',
        onClick: (row) => navigate(`/reviews/${row.original.id}`),
      },
    ],
    bulkActions: [
      {
        label: 'Export Reviews',
        onClick: (selectedRows) => exportReviews(selectedRows),
      },
    ],
  },
],

tabs: [
  {
    locationId: 'products-detail-view',
    tab: {
      id: 'reviews',
      label: 'Reviews',
      component: ProductReviewsTab,
    },
    hideSidebar: false,              // Ukryj pasek boczny gdy ta zakładka jest aktywna
    sidebarReplacement: null,        // Zastąp zawartość paska bocznego
    disabled: false,                 // Dezaktywuj zakładkę
  },
],

actions: {
  inline: [
    {
      locationId: 'products-detail-view',
      component: ({ entity }) => (
        <Button onClick={() => generateReport(entity.id)}>
          Generate Report
        </Button>
      ),
    },
  ],
  dropdown: [
    {
      locationId: 'orders-detail-view',
      label: 'Send custom email',
      onClick: (entity) => sendEmail(entity.id),
    },
  ],
},

components: [
  // Wstrzyknięcie do głównego obszaru widoku szczegółów produktu
  {
    id: 'products-detail-view',
    tab: 'product',                    // Pokaż tylko na konkretnej zakładce
    component: MyProductComponent,
  },
  // Wstrzyknięcie do paska bocznego (dodaj -sidebar do identyfikatora lokalizacji)
  {
    id: 'products-detail-view-sidebar',
    tab: 'product',
    component: MyProductSidebar,
  },
],

modals: [
  {
    id: 'manual-order-state',
    component: MyOrderStateComponent,
  },
],

widgets: [
  {
    id: 'sales-chart',
    title: 'Sales Overview',
    component: SalesChartWidget,
    size: { width: 2, height: 1 },
    sizes: [
      { width: 1, height: 1 },
      { width: 2, height: 1 },
      { width: 2, height: 2 },
    ],
  },
],

inputs: [
  {
    id: 'my-custom-color-picker',
    component: ColorPickerInput,
  },
],

navMenuGroups: [
  {
    id: 'my-plugin-group',
    label: 'My Plugin',
    placement: 'after:assortment-group',
  },
],
navMenuLinks: [
  {
    id: 'my-plugin-link',
    labelId: 'nav.myPlugin',
    href: '',
    groupId: 'assortment-group',  // Użyj wartości BASE_GROUP_ID
    icon: ListIcon,
  },
],

topNavigationComponents: [
  { id: 'my-status-indicator', component: StatusIndicator },
],
topNavigationActionsMenu: [
  { label: 'Quick Action', onClick: () => doSomething(), icon: ZapIcon },
],

notifications: [
  {
    id: 'pending-reviews',
    fetch: async () => {
      const result = await apiClient('query')({
        pendingReviews: [
          {},
          { totalItems: true },
        ],
      });
      return { count: result.pendingReviews.totalItems };
    },
    interval: 30000,   // Odpytywanie co 30 sekund
    placements: {
      main: (data) => ({
        name: 'pending-reviews',
        title: 'Pending Reviews',
        description: `${data.count} reviews need approval`,
        icon: <StarIcon />,
        when: (data) => data.count > 0,
      }),
      navigation: [
        {
          id: 'my-plugin-link',
          component: (data) => <Badge>{data.count}</Badge>,
        },
      ],
    },
  },
],

translations: {
  ns: 'my-plugin',
  data: {
    en: { 'my-plugin': { nav: { myPlugin: 'My Plugin' } } },
    pl: { 'my-plugin': { nav: { myPlugin: 'Moja wtyczka' } } },
  },
},

import { BASE_GROUP_ID } from '@deenruv/react-ui-devkit';

// Dostępne identyfikatory grup:
BASE_GROUP_ID.SHOP          // 'shop-group'
BASE_GROUP_ID.ASSORTMENT    // 'assortment-group'
BASE_GROUP_ID.USERS         // 'users-group'
BASE_GROUP_ID.PROMOTIONS    // 'promotions-group'
BASE_GROUP_ID.SHIPPING      // 'shipping-group'
BASE_GROUP_ID.SETTINGS      // 'settings-group'

import { createDeenruvUIPlugin, BASE_GROUP_ID, apiClient } from '@deenruv/react-ui-devkit';
import { StarIcon, ListIcon } from 'lucide-react';
import { ReviewsListPage } from './pages/ReviewsListPage';
import { ReviewDetailPage } from './pages/ReviewDetailPage';
import { ProductReviewsTab } from './components/ProductReviewsTab';
import { ReviewsSidebar } from './components/ReviewsSidebar';
import { ReviewsWidget } from './components/ReviewsWidget';
import en from './locales/en';
import pl from './locales/pl';

const PLUGIN_NAME = 'reviews-plugin-ui';

export const ReviewsPlugin = createDeenruvUIPlugin({
  name: PLUGIN_NAME,
  version: '1.0.0',

  translations: {
    ns: 'reviews',
    data: { en, pl },
  },

  pages: [
    { path: '', element: <ReviewsListPage /> },
    { path: ':id', element: <ReviewDetailPage /> },
  ],

  navMenuLinks: [
    {
      id: 'reviews-link',
      labelId: 'nav.reviews',
      href: '',
      groupId: BASE_GROUP_ID.ASSORTMENT,
      icon: StarIcon,
    },
  ],

  tabs: [
    {
      locationId: 'products-detail-view',
      tab: {
        id: 'reviews',
        label: 'Reviews',
        component: ProductReviewsTab,
      },
    },
  ],

  components: [
    {
      id: 'products-detail-view-sidebar',
      tab: 'reviews',
      component: ReviewsSidebar,
    },
  ],

  widgets: [
    {
      id: 'recent-reviews',
      title: 'Recent Reviews',
      component: ReviewsWidget,
      size: { width: 2, height: 1 },
    },
  ],

  notifications: [
    {
      id: 'pending-reviews',
      fetch: async () => {
        const result = await apiClient('query')({
          pendingReviews: [{}, { totalItems: true }],
        });
        return { count: result.pendingReviews.totalItems };
      },
      interval: 30000,
      placements: {
        main: (data) => ({
          name: 'pending-reviews',
          title: 'Pending Reviews',
          description: `${data.count} reviews awaiting approval`,
          icon: <StarIcon />,
          when: (data) => data.count > 0,
        }),
      },
    },
  ],
});

# Przykłady
VITE_ADMIN_UI_PLUGINS="dashboard-widgets,badges" pnpm start:admin-ui
VITE_ADMIN_UI_PLUGINS="all" pnpm start:admin-ui
VITE_ADMIN_UI_PLUGINS="" pnpm start:admin-ui   # brak pluginów

import { BadgesUiPlugin } from '@deenruv/product-badges-plugin/plugin-ui';

export const pluginManifest = [
  // ...istniejące wpisy
  { id: 'badges', plugin: BadgesUiPlugin, enabledByDefault: false },
];