proje-react-panel 1.11.1 → 1.12.0

package/how_to.md

@@ -137,6 +137,29 @@ export class ProductDetails {
 }
 ```
 
+### 4.4.1 Page size
+
+`ListPage` asks for as many rows as fit the datagrid, instead of a fixed page size. It measures the
+grid element (so your own shell CSS is accounted for) and divides by the row height — which is
+declared, not measured, and then applied to the row, so the number cannot drift from what is on
+screen:
+
+```ts
+// Default: auto page size, library row height, nothing to declare.
+@List({ getData: dataFetchers.products.getAll, primaryId: 'id' })
+
+// A list with taller rows (an image cell, or your own row CSS) declares its height.
+@List({ getData: dataFetchers.products.getAll, primaryId: 'id', rowHeight: 124 })
+
+// Opt out: `getData` (or the server) decides the page size, as before.
+@List({ getData: dataFetchers.products.getAll, primaryId: 'id', autoCalculate: false })
+```
+
+The computed size is sent as `limit`, so the backend contract in §2 is unchanged. It is clamped to
+5–100 rows, and recomputed on window resize.
+
+---
+
 ### 4.5 Route the pages
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",
@@ -9,6 +9,7 @@
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
   "types": "dist/index.d.ts",
+  "packageManager": "yarn@4.17.0",
   "scripts": {
     "test": "jest",
     "build": "rollup -c",
@@ -23,12 +24,12 @@
     "url": "https://github.com/demirsefa/proje-react-panel/issues"
   },
   "homepage": "https://github.com/demirsefa/proje-react-panel#readme",
-  "dependencies": {},
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
     "@hookform/resolvers": "^4.1.3",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
+    "@svgr/core": "^8.1.0",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",

package/src/__tests__/build/svgoViewBox.test.ts

@@ -0,0 +1,48 @@
+import { readdirSync, readFileSync } from 'fs';
+import path from 'path';
+import { describe, expect, it } from '@jest/globals';
+import { transform } from '@svgr/core';
+
+/**
+ * Ikonlar bundle'a SVGR + SVGO'dan gecerek gomuluyor ve SVGO'nun varsayilan
+ * `removeViewBox` plugin'i, viewBox width/height ile birebir ayniysa onu
+ * "gereksiz" sayip siliyor. viewBox'siz bir SVG olceklenemez: tuketici CSS'te
+ * `.icon { width: 16px }` verdiginde ikon kucultulmez, KIRPILIR — check/cross
+ * bir kez tam bu yuzden gorunmez oldu, dist'e yama atilarak kapatildi, yama
+ * baska bir fix'le dusunce geri geldi.
+ *
+ * Bu yuzden test tek bir ikonu degil ayari kilitliyor: rollup'in okudugu
+ * `svgo.icons.json` ile HER ikon gercekten donusturuluyor. Ayar bozulursa —
+ * ya da viewBox'i width/height'iyla ayni yeni bir ikon eklenirse — kirmizi yanar.
+ */
+const repoRoot = path.resolve(__dirname, '../../..');
+const iconDir = path.join(repoRoot, 'src/assets/icons/svg');
+const svgoConfig = JSON.parse(
+  readFileSync(path.join(repoRoot, 'svgo.icons.json'), 'utf8')
+);
+
+const icons = readdirSync(iconDir).filter((f) => f.endsWith('.svg'));
+
+const compile = (file: string): Promise<string> =>
+  transform(
+    readFileSync(path.join(iconDir, file), 'utf8'),
+    { plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], svgoConfig },
+    { componentName: 'Icon', filePath: path.join(iconDir, file) }
+  );
+
+describe('icon build config', () => {
+  it('has icons to check', () => {
+    expect(icons.length).toBeGreaterThan(0);
+  });
+
+  it.each(icons)('%s keeps its viewBox', async (file) => {
+    expect(await compile(file)).toContain('viewBox=');
+  });
+
+  // Kirpilma yalnizca viewBox'in varligina degil dogruluguna bagli: yanlis bir
+  // viewBox da ayni sonucu verir, o yuzden regresyonun kaynagi olan ikon acikca
+  // kendi kutusuyla kilitli.
+  it('check.svg keeps the exact box its paths are drawn in', async () => {
+    expect(await compile('check.svg')).toContain('viewBox="0 0 24 24"');
+  });
+});

package/src/__tests__/components/list/Pagination.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment jsdom
+ */
+import { TextDecoder, TextEncoder } from 'util';
+// jsdom'da TextEncoder yok; testing-library'nin cektigi bagimliliklar import
+// aninda okuyor.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import React from 'react';
+import { describe, expect, it, jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { Pagination } from '../../../components/list/Pagination';
+
+const lastPageButton = () => {
+  const numbered = screen
+    .getAllByRole('button')
+    .map(button => Number(button.textContent))
+    .filter(value => Number.isFinite(value) && value > 0);
+  return Math.max(...numbered);
+};
+
+describe('Pagination', () => {
+  it('eksik dolu son sayfayi da cizer', () => {
+    // 2151 kayit / 10 limit = 216 sayfa. `floor` ile 215 ciziliyordu ve son
+    // kayda hicbir sayfadan ulasilamiyordu.
+    render(
+      <Pagination pagination={{ total: 2151, page: 1, limit: 10 }} onPageChange={jest.fn()} />
+    );
+    expect(lastPageButton()).toBe(216);
+  });
+
+  it('ikinci sayfasi olan listede gizlenmez', () => {
+    // total < 2*limit: `floor` 1 sayfa sanip pagination'i tamamen gizliyordu.
+    render(<Pagination pagination={{ total: 15, page: 1, limit: 10 }} onPageChange={jest.fn()} />);
+    expect(lastPageButton()).toBe(2);
+  });
+
+  it('tek sayfaya sigan listede cizilmez', () => {
+    const { container } = render(
+      <Pagination pagination={{ total: 8, page: 1, limit: 10 }} onPageChange={jest.fn()} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('limit gelmeden cizilmez', () => {
+    // Liste ilk fetch'ini beklerken pagination state'i {0,0,0}; bolme NaN
+    // uretip "NaN <= 1" false donuyordu.
+    const { container } = render(
+      <Pagination pagination={{ total: 0, page: 0, limit: 0 }} onPageChange={jest.fn()} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/__tests__/components/list/listMetrics.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from '@jest/globals';
+import {
+  LIST_FALLBACK_LIMIT,
+  LIST_MAX_LIMIT,
+  LIST_MIN_LIMIT,
+  LIST_ROW_HEIGHT,
+  calculateListLimit,
+} from '../../../components/list/listMetrics';
+
+describe('calculateListLimit', () => {
+  it('istenen satirlar konteynere sigar, bir fazlasi sigmaz', () => {
+    const containerHeight = 780;
+    const limit = calculateListLimit(containerHeight);
+
+    // Tablo basligi da konteynerin icinde; onun icin bir satirlik yer ayriliyor.
+    // Toplam konteyneri asiyorsa otomatik boyut kendi amacinin tersine scroll
+    // uretiyor demektir.
+    expect((limit + 1) * LIST_ROW_HEIGHT).toBeLessThanOrEqual(containerHeight);
+    expect((limit + 2) * LIST_ROW_HEIGHT).toBeGreaterThan(containerHeight);
+  });
+
+  it('yuksek satirda daha az kayit ister', () => {
+    expect(calculateListLimit(780, 124)).toBeLessThan(calculateListLimit(780));
+  });
+
+  it('cok kisa konteynerde tabana, cok uzununda tavana yapisir', () => {
+    expect(calculateListLimit(120)).toBe(LIST_MIN_LIMIT);
+    expect(calculateListLimit(100000)).toBe(LIST_MAX_LIMIT);
+  });
+
+  it('olculemeyen degerlerde fallback limit doner', () => {
+    expect(calculateListLimit(Number.NaN)).toBe(LIST_FALLBACK_LIMIT);
+    expect(calculateListLimit(780, 0)).toBe(LIST_FALLBACK_LIMIT);
+    expect(calculateListLimit(0)).toBe(LIST_FALLBACK_LIMIT);
+  });
+});

package/src/assets/icons/svg/down-arrow-backup-2.svg

@@ -1,3 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="#000000" /></svg>

package/src/components/list/Datagrid.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { EmptyList } from './EmptyList';
+import { LoadingScreen } from '../LoadingScreen';
 import SearchIcon from '../../assets/icons/svg/search.svg';
 import PencilIcon from '../../assets/icons/svg/pencil.svg';
 import DownArrowIcon from '../../assets/icons/svg/down-arrow-backup-2.svg';
@@ -21,12 +22,24 @@ const ACTIONS_COLUMN_WIDTH = '120px';
 interface DatagridProps<T extends AnyClass> {
   data: T[];
   listPageMeta: ListPageMeta<T>;
+  loading?: boolean;
+  /**
+   * Satir yuksekligi satira UYGULANIR, sadece bildirilmez: otomatik sayfa
+   * boyutu bu sayiya gore hesaplandigi icin gercekle ayrismasina izin
+   * verilemez. Inline veriliyor ki tuketicinin kendi tablo CSS'i olsa da
+   * gecerli olsun.
+   */
+  rowHeight?: number;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   onRemoveItem?: (item: T) => Promise<void>;
 }
 
 export function Datagrid<T extends AnyClass>({
   data,
   listPageMeta,
+  loading,
+  rowHeight,
+  containerRef,
   onRemoveItem,
 }: DatagridProps<T>) {
   const cells = listPageMeta.cells;
@@ -38,8 +51,10 @@ export function Datagrid<T extends AnyClass>({
     : null;
 
   return (
-    <div className="datagrid">
-      {!data || data.length === 0 ? (
+    <div className="datagrid" ref={containerRef}>
+      {loading ? (
+        <LoadingScreen id={listPageMeta.class.key} />
+      ) : !data || data.length === 0 ? (
         <EmptyList />
       ) : (
         <table className="datagrid-table">
@@ -75,7 +90,7 @@ export function Datagrid<T extends AnyClass>({
                     | undefined)
                 : null;
               return (
-                <tr key={index}>
+                <tr key={index} style={{ height: rowHeight }}>
                   {cells.map((configuration: CellConfiguration) => {
                     return (
                       <CellField

package/src/components/list/ListPage.tsx

@@ -1,13 +1,23 @@
-import React, { useMemo, useCallback, useEffect, useState, useId } from 'react';
+import React, {
+  useMemo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useId,
+} from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { Datagrid } from './Datagrid';
 import { ErrorComponent } from '../ErrorComponent';
-import { LoadingScreen } from '../LoadingScreen';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { Pagination } from './Pagination';
 import { ListHeader } from './ListHeader';
 import { FilterPopup } from './FilterPopup';
 import { getListPageMeta } from '../../decorators/list/getListPageMeta';
+import { LIST_ROW_HEIGHT, calculateListLimit } from './listMetrics';
+
+const RESIZE_DEBOUNCE_MS = 200;
 
 export function ListPage<T extends AnyClass>({
   model,
@@ -24,17 +34,51 @@ export function ListPage<T extends AnyClass>({
   const [error, setError] = useState<unknown>(null);
 
   const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
+
+  const rowHeight = listPageMeta.class.rowHeight ?? LIST_ROW_HEIGHT;
+  const autoCalculate = listPageMeta.class.autoCalculate ?? true;
+
+  const datagridRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number | null>(null);
+
+  // undefined: limit gonderme (autoCalculate kapali). null: henuz olculmedi,
+  // yanlis boyutla bir istek atmaktansa bekle.
+  const limit = !autoCalculate
+    ? undefined
+    : containerHeight === null
+      ? null
+      : calculateListLimit(containerHeight, rowHeight);
+
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [activeFilters, setActiveFilters] = useState<Record<string, string>>();
   const params = useParams();
   const navigate = useNavigate();
 
+  // Gorsel hucresi satiri kutuphanenin olcusunun cok uzerine cikariyor; tablo
+  // artik satiri kirptigi icin bunu soylemeden birakmak gorseli sessizce
+  // kucultmek olurdu. Uretim derlemesinde sussun, tuketicinin konsolunu
+  // kirletmeyelim.
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (listPageMeta.class.rowHeight !== undefined) return;
+    if (!listPageMeta.cells.some(cell => cell.type === 'image')) return;
+
+    console.warn(
+      `[proje-react-panel] "${listPageMeta.class.key}" listesinde gorsel hucresi var ` +
+        `ama rowHeight verilmemis; satir ${LIST_ROW_HEIGHT}px'e kirpilacak. ` +
+        `@List({ rowHeight: ... }) ile gorselin sigacagi yuksekligi bildir.`
+    );
+  }, [listPageMeta]);
+
   const fetchData = useCallback(
     async (page: number, filters?: Record<string, string>) => {
       setLoading(true);
       try {
         const result = await listPageMeta.class.getData({
           page,
+          // autoCalculate kapaliysa limit hic gonderilmez: sayfa boyutunu
+          // eskisi gibi `getData`/sunucu belirlesin.
+          ...(limit ? { limit } : {}),
           filters: filters ?? activeFilters ?? {},
         });
         //TODO: any is not a good solution, we need to find a better way to do this
@@ -52,7 +96,7 @@ export function ListPage<T extends AnyClass>({
         setLoading(false);
       }
     },
-    [activeFilters, listPageMeta.class]
+    [activeFilters, limit, listPageMeta.class]
   );
 
   useEffect(() => {
@@ -60,15 +104,47 @@ export function ListPage<T extends AnyClass>({
     const filtersFromUrl: Record<string, string> = {};
     searchParams.forEach((value, key) => {
       filtersFromUrl[key] = value;
-    }); 
+    });
     setActiveFilters(filtersFromUrl);
   }, []);
 
+  // Datagrid ilk boyamadan once olculuyor: veri beklerken de render edildigi
+  // icin yuksekligi hazir, yani dogru limit ILK istekte kullanilabiliyor.
+  // Olcum penceye degil elemana bakiyor; tuketicinin kabugu (sidebar, baslik,
+  // dolgu) ne kadar yer kaplarsa kaplasin hesap dogru kaliyor.
+  //
+  // ResizeObserver yerine window resize: icerik buyudukce buyuyen bir
+  // konteynerde observer "daha cok satir iste -> daha uzun konteyner" dongusune
+  // girebilirdi. Yuksekligi degistiren gercek olay zaten pencere boyutu.
+  useLayoutEffect(() => {
+    if (!autoCalculate) return;
+
+    const measure = () => {
+      const element = datagridRef.current;
+      if (!element) return;
+      const next = element.clientHeight;
+      setContainerHeight(previous => (previous === next ? previous : next));
+    };
+    measure();
+
+    let timer: ReturnType<typeof setTimeout>;
+    const onResize = () => {
+      clearTimeout(timer);
+      timer = setTimeout(measure, RESIZE_DEBOUNCE_MS);
+    };
+
+    window.addEventListener('resize', onResize);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', onResize);
+    };
+  }, [autoCalculate]);
+
   useEffect(() => {
-    if (activeFilters) {
+    if (activeFilters && limit !== null) {
       fetchData(parseInt(params.page as string) || 1, activeFilters);
     }
-  }, [fetchData, params.page, activeFilters, listPageMeta.class.getData]);
+  }, [fetchData, limit, params.page, activeFilters, listPageMeta.class.getData]);
 
   const handleFilterApply = (filters: Record<string, string>) => {
     setActiveFilters(filters);
@@ -86,11 +162,18 @@ export function ListPage<T extends AnyClass>({
     fetchData(1, filters); // Reset to first page when filters change
   };
 
-  if (loading) return <LoadingScreen id={id} />;
+  // Yukleme ekrani artik sayfanin tamamini degil datagrid'in icini kapliyor:
+  // konteyner ilk istekten once render olmazsa olculemez, olculemezse ilk
+  // istek yanlis sayfa boyutuyla gider ve duzeltmek ikinci bir istek olurdu.
   if (error) return <ErrorComponent id={id} error={error} />;
 
   return (
-    <div className="list">
+    <div
+      className="list"
+      // Satir yuksekligi hucrelere de lazim (ornegin gorsel bu yukseklige
+      // sigdiriliyor); tek kaynak yine `@List({ rowHeight })`.
+      style={{ '--prp-list-row-height': `${rowHeight}px` } as React.CSSProperties}
+    >
       <ListHeader
         listPageMeta={listPageMeta}
         filtered={!!(activeFilters && !!Object.keys(activeFilters).length)}
@@ -100,6 +183,9 @@ export function ListPage<T extends AnyClass>({
       <Datagrid
         listPageMeta={listPageMeta}
         data={data}
+        loading={loading}
+        rowHeight={rowHeight}
+        containerRef={datagridRef}
         onRemoveItem={async () => {
           await fetchData(pagination.page);
         }}

package/src/components/list/Pagination.tsx

@@ -11,7 +11,11 @@ interface PaginationProps {
 
 export function Pagination({ pagination, onPageChange }: PaginationProps) {
   const { total, page, limit } = pagination;
-  const totalPages = Math.floor(total / limit);
+  // `floor` son, eksik dolu sayfayi hic saymiyordu: 2151 kayit / 10 limit ->
+  // 215 sayfa cizilir, son kayda hicbir sayfadan ulasilamazdi. Daha kotusu
+  // total < 2*limit olan her listede sonuc 1 cikip pagination tamamen
+  // gizleniyor, ikinci sayfadaki kayitlar erisilemez oluyordu.
+  const totalPages = limit > 0 ? Math.ceil(total / limit) : 0;
 
   if (totalPages <= 1) return null;
 

package/src/components/list/cells/ImageCell.tsx

@@ -17,11 +17,16 @@ export function ImageCell({ item, configuration }: ImageCellProps) {
     // maxWidth sart: sabit tablo duzeninde kolon 100px'ten dar kalabiliyor ve
     // hucre tasmayi kirptigi icin gorsel sessizce yarim gorunurdu. Kucultmek
     // kirpmaktan iyi; objectFit: contain oranı koruyor.
+    //
+    // maxHeight ayni isi dikeyde yapiyor: gorsel satir yuksekliginden uzun
+    // olursa satiri tek basina buyutur ve otomatik sayfa boyutunun dayandigi
+    // rowHeight yalan olurdu. Gorseli buyuk gormek isteyen liste
+    // `@List({ rowHeight })` ile satiri buyutur.
     <img
       width={100}
       height={100}
       src={imageConfiguration.baseUrl + value}
-      style={{ objectFit: 'contain', maxWidth: '100%' }}
+      style={{ objectFit: 'contain', maxWidth: '100%', maxHeight: 'var(--prp-list-row-height)' }}
       alt=""
     />
   );

package/src/components/list/listMetrics.ts

@@ -0,0 +1,42 @@
+/**
+ * Otomatik sayfa boyutunun iki girdisi var ve ikisi ayri yollardan geliyor:
+ *
+ * - Datagrid'in yuksekligi OLCULUR. Tuketici kutuphanenin liste CSS'ini
+ *   kullanmak zorunda degil (kendi kabugunu yazan bir panelde datagrid ne
+ *   `100vh - 120px`'tir ne de baska bir sabit), dolayisiyla buraya px yazmak
+ *   sessizce yanlislanacak bir varsayim olurdu.
+ * - Satir yuksekligi BEYAN EDILIR ve tabloya dayatilir (`@List({ rowHeight })`).
+ *   Olculmuyor: olcmek icin once satirin render olmasi, yani bir istek atilmis
+ *   olmasi gerekirdi; dogru limit ikinci bir istek demek olurdu.
+ */
+
+/** Olcum yapilamadiginda (SSR, jsdom, yukseklik 0) kullanilan sayfa boyutu. */
+export const LIST_FALLBACK_LIMIT = 10;
+
+/**
+ * Satirin varsayilan yuksekligi (px): hucre dolgusu + satir kutusu + alt cizgi.
+ * Satirini kendi CSS'iyle degistiren ya da `image` gibi yuksek hucre tasiyan
+ * tuketici `@List({ rowHeight })` ile kendi olcusunu verir.
+ */
+export const LIST_ROW_HEIGHT = 44;
+
+/**
+ * Otomatik hesabin tabani ve tavani: cok kisa ekranda kullanilamaz bir liste,
+ * cok uzun ekranda sunucuyu doven bir sorgu cikmasin.
+ */
+export const LIST_MIN_LIMIT = 5;
+export const LIST_MAX_LIMIT = 100;
+
+/**
+ * Datagrid'e kac satir sigiyorsa o kadar kayit iste. Tablo basligi da o alanin
+ * icinde duruyor, o yuzden bir satir dusuluyor; dusulmezse hesap tam bir satir
+ * tasar ve otomatik boyut kendi amacinin tersine scroll uretir.
+ */
+export function calculateListLimit(containerHeight: number, rowHeight = LIST_ROW_HEIGHT): number {
+  if (!Number.isFinite(containerHeight) || containerHeight <= 0 || rowHeight <= 0) {
+    return LIST_FALLBACK_LIMIT;
+  }
+
+  const rows = Math.floor(containerHeight / rowHeight) - 1;
+  return Math.min(LIST_MAX_LIMIT, Math.max(LIST_MIN_LIMIT, rows));
+}

package/src/decorators/list/List.ts

@@ -38,6 +38,21 @@ export interface ListOptions<T> {
   actions?: ((item: T) => ListActionOptions<T>) | ListActionOptions<T>;
   primaryId?: string;
   key?: string;
+  /**
+   * Sayfa boyutunu ekrana sigan satir sayisindan hesapla. Varsayilan acik:
+   * sabit bir sayfa boyutu (ornegin 10) buyuk ekranda tablonun altinda kocaman
+   * bir bosluk birakiyordu — datagrid yuksekligi viewport'a civili.
+   * Kapatirsan `getData` limit'i eskisi gibi kendi belirler.
+   */
+  autoCalculate?: boolean;
+  /**
+   * Satir yuksekligi (px). Sadece bir bilgi degil, tabloya UYGULANIR: satira
+   * bu yukseklik verilir ve hucre icerigi (ornegin gorsel) buna kirpilir.
+   * Boylece beyan ile gercek asla ayrisamaz. Yalnizca satirini kendi CSS'iyle
+   * degistiren ya da `image` gibi yuksek hucre tasiyan listelerde gerekir;
+   * verilmezse kutuphanenin kendi olcusu (`LIST_ROW_HEIGHT`) kullanilir.
+   */
+  rowHeight?: number;
 }
 
 export type ListConfiguration<T> = ListOptions<T> & {

package/svgo.icons.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    { "name": "preset-default", "params": { "overrides": { "removeViewBox": false } } },
+    "prefixIds"
+  ]
+}

package/.idea/codeStyles/Project.xml

@@ -1,54 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="120" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="4" />
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="120" />
-      <indentOptions>
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="120" />
-      <indentOptions>
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="120" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="4" />
-        <option name="TAB_SIZE" value="4" />
-        <option name="USE_TAB_CHARACTER" value="true" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/jsLinters/eslint.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>

package/.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="GithubDefaultAccount">
-    <option name="defaultAccountId" value="1f47474a-5c46-4e64-871f-41c4af1c466e" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/proje-react-panel.iml" filepath="$PROJECT_DIR$/.idea/proje-react-panel.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-    <option name="myRunOnSave" value="true" />
-  </component>
-</project>

package/.idea/proje-react-panel.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>