proje-react-panel 1.8.0 → 1.10.0

package/src/decorators/form/Input.ts

@@ -8,7 +8,7 @@ const isFieldSensitive = (fieldName: string): boolean => {
 };
 
 export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
-export type ExtendedInputTypes = InputTypes | 'select' | 'custom';
+export type ExtendedInputTypes = InputTypes | 'select' | 'custom' | 'richtext';
 
 export interface InputOptions {
   type?: InputTypes;
@@ -19,6 +19,9 @@ export interface InputOptions {
   defaultValue?: string;
   includeInCSV?: boolean;
   includeInJSON?: boolean;
+  //NOTE: the visual section this field belongs to, matched against @Form({ groups }) by key.
+  group?: string;
+  rows?: number;
 }
 
 export interface ExtendedInputOptions extends Omit<InputOptions, 'type'> {
@@ -36,6 +39,8 @@ export interface InputConfiguration {
   defaultValue?: string;
   includeInCSV: boolean;
   includeInJSON: boolean;
+  group?: string;
+  rows?: number;
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {

package/src/decorators/form/inputs/RichTextInput.ts

@@ -0,0 +1,38 @@
+import { ExtendedInput, ExtendedInputOptions, InputConfiguration, InputOptions } from '../Input';
+
+export type RichTextToolbarItem =
+  | 'bold'
+  | 'italic'
+  | 'heading'
+  | 'bulletList'
+  | 'orderedList'
+  | 'link';
+
+export const DEFAULT_RICH_TEXT_TOOLBAR: RichTextToolbarItem[] = [
+  'bold',
+  'italic',
+  'heading',
+  'bulletList',
+  'orderedList',
+  'link',
+];
+
+export interface RichTextInputOptions extends InputOptions {
+  toolbar?: RichTextToolbarItem[];
+  minHeight?: number;
+}
+
+export interface RichTextInputConfiguration extends InputConfiguration {
+  type: 'richtext';
+  toolbar?: RichTextToolbarItem[];
+  minHeight?: number;
+}
+
+//NOTE: the editor itself lives behind a lazy import in FormField, because @tiptap/* is an
+// optional peer dependency — this decorator is safe to import without it installed.
+export function RichTextInput(options?: RichTextInputOptions): PropertyDecorator {
+  return ExtendedInput({
+    ...options,
+    type: 'richtext',
+  } as ExtendedInputOptions);
+}

package/src/decorators/list/Cell.ts

@@ -23,7 +23,16 @@ export interface CellOptions {
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
   style?: {
+    /**
+     * @deprecated Tablo `table-layout: fixed` kullaniyor; sabit duzende hucre
+     * `min-width`'i kolon genisligini etkilemiyor (CSS 2.1 17.5.2.1). Bunun
+     * yerine `width` verin.
+     */
     minWidth?: string;
+    /**
+     * Kolon genisligi. Sabit duzende birebir uygulanir; yuzde vermek tabloyu
+     * konteynere sigdirir, px vermek toplam konteyneri asarsa yatay scroll acar.
+     */
     width?: string;
   };
 }

package/src/index.ts

@@ -18,9 +18,16 @@ export { LinkCell } from './decorators/list/cells/LinkCell';
 
 //FORM
 export { FormPage } from './components/form/FormPage';
-export { Form, type OnSubmitFN } from './decorators/form/Form';
+export { Form, type OnSubmitFN, type FormGroup } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
 export { SelectInput } from './decorators/form/inputs/SelectInput';
+export {
+  RichTextInput,
+  DEFAULT_RICH_TEXT_TOOLBAR,
+  type RichTextInputOptions,
+  type RichTextInputConfiguration,
+  type RichTextToolbarItem,
+} from './decorators/form/inputs/RichTextInput';
 export {
   CustomInput,
   type CustomInputOptions,

package/src/styles/components/rich-text.scss

@@ -0,0 +1,115 @@
+// Colors mirror the react-select control (see SelectStyles.ts) so a richtext field and a
+// select field sitting next to each other in the same form read as the same widget family.
+$rich-text-surface: #1f2937;
+$rich-text-border: #374151;
+$rich-text-accent: #6366f1;
+$rich-text-muted: #9ca3af;
+
+.rich-text-field {
+  border: 1px solid $rich-text-border;
+  border-radius: 6px;
+  background-color: $rich-text-surface;
+  color: #ffffff;
+  overflow: hidden;
+
+  &:focus-within {
+    border-color: $rich-text-accent;
+    box-shadow: 0 0 0 1px $rich-text-accent;
+  }
+
+  .rich-text-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 6px;
+    border-bottom: 1px solid $rich-text-border;
+    background-color: $rich-text-surface;
+  }
+
+  .rich-text-toolbar-button {
+    min-width: 32px;
+    height: 28px;
+    padding: 0 8px;
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    color: #ffffff;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: $rich-text-border;
+    }
+
+    &.is-active {
+      background-color: $rich-text-accent;
+      border-color: $rich-text-accent;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .rich-text-content {
+    position: relative;
+    padding: 10px;
+    font-size: 16px;
+
+    // The placeholder is CSS-only on purpose: @tiptap/extension-placeholder would be a third
+    // package for consumers to install, for one line of grey text.
+    &.is-empty::before {
+      content: attr(data-placeholder);
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      color: $rich-text-muted;
+      pointer-events: none;
+    }
+
+    .ProseMirror {
+      outline: none;
+      min-height: inherit;
+
+      > * + * {
+        margin-top: 0.6em;
+      }
+
+      p,
+      h1,
+      h2,
+      h3 {
+        margin: 0;
+      }
+
+      ul,
+      ol {
+        padding-left: 1.4em;
+        margin: 0;
+      }
+
+      a {
+        color: $rich-text-accent;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.rich-text-loading,
+.rich-text-missing {
+  padding: 10px;
+  border: 1px dashed $rich-text-border;
+  border-radius: 6px;
+  color: $rich-text-muted;
+}
+
+.rich-text-missing {
+  color: var(--prp-color-error);
+  border-color: var(--prp-color-error);
+}

package/src/styles/form.scss

@@ -90,6 +90,54 @@
     }
   }
 
+  .form-group-section {
+    border: 1px solid var(--prp-border-primary);
+    border-radius: 6px;
+    background-color: var(--prp-bg-secondary);
+    padding: 16px;
+    margin: 0 0 20px 0;
+    min-width: 0;
+
+    .form-group-legend,
+    .form-group-summary {
+      font-weight: bold;
+      font-size: 15px;
+      color: var(--prp-text-primary);
+      padding: 0 6px;
+    }
+
+    .form-group-summary {
+      cursor: pointer;
+      list-style: none;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &:before {
+        content: '▾';
+        color: var(--prp-text-muted);
+        transition: transform 0.2s;
+      }
+    }
+
+    details:not([open]) > .form-group-summary:before {
+      transform: rotate(-90deg);
+    }
+
+    .form-group-fields {
+      margin-top: 12px;
+    }
+
+    .form-field:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   .submit-button {
     padding: 12px;
     font-size: 18px;

package/src/styles/index.scss

@@ -12,6 +12,7 @@
 @import './components/uploader.scss';
 @import './components/checkbox';
 @import './components/form-header';
+@import './components/rich-text';
 @import './components/button';
 @import './details';
 @import './dashboard';

package/src/styles/list.scss

@@ -86,8 +86,17 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     @include custom-scrollbar;
   }
 
+  // `width` sart: `table-layout: fixed`, genislik `auto` kaldigi surece devreye
+  // girmiyor (CSS 2.1 17.5.2.1) ve tarayici otomatik duzene doner. Burada eskiden
+  // sadece `min-width: 100%` vardi, yani sabit duzen hic calismiyordu: nowrap
+  // hucreler kolonu icerik kadar sisiriyor, tablo konteyneri asiyor ve uzun
+  // metin tasiyan her liste yatay scroll aciyordu.
+  //
+  // Kolonlarina px genislik veren tuketiciler genis tabloyu kaybetmiyor: sabit
+  // duzende kullanilan tablo genisligi, belirtilen kolon genisliklerinin toplami
+  // ile bu %100 degerinin buyugudur.
   .datagrid-table {
-    min-width: 100%;
+    width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
     position: relative;
@@ -97,10 +106,19 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid var(--prp-border-primary);
+      // `text-overflow` yalnizca tasma kirpildiginda is goruyor; `overflow`
+      // olmadan ellipsis hicbir zaman cizilmiyordu.
+      overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    // Actions hucresindeki acilir liste `position: absolute`; kirpilirsa menu
+    // gorunmez oluyor. Kirpma sadece metin kolonlari icin gerekli.
+    .util-cell-actions-cell {
+      overflow: visible;
+    }
+
     th {
       color: var(--prp-text-primary);
       background-color: var(--prp-bg-tertiary);

package/dist/components/DashboardContainer.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface DashboardContainerProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export declare function DashboardContainer({ children, className }: DashboardContainerProps): React.JSX.Element;
-export {};

package/dist/components/DashboardGrid.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface DashboardGridProps {
-    children: React.ReactNode;
-    columns?: number;
-    gap?: string;
-    className?: string;
-}
-export declare function DashboardGrid({ children, columns, gap, className, }: DashboardGridProps): React.JSX.Element;
-export {};

package/dist/components/DashboardItem.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface DashboardItemProps {
-    targetNumber: number;
-    duration?: number;
-    image: React.ReactNode;
-    text: string;
-    className?: string;
-}
-export declare function DashboardItem({ targetNumber, duration, image, text, className, }: DashboardItemProps): React.JSX.Element;
-export {};

package/dist/components/ThemeSwitcher.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface ThemeSwitcherProps {
-    variant?: 'button' | 'dropdown';
-    className?: string;
-}
-export declare function ThemeSwitcher({ variant, className }: ThemeSwitcherProps): React.JSX.Element;
-export {};

package/dist/store/themeStore.d.ts

@@ -1,23 +0,0 @@
-export type ThemeMode = 'light' | 'dark' | 'automatic';
-interface ThemeState {
-    theme: ThemeMode;
-    resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: ThemeMode) => void;
-    initializeTheme: () => void;
-}
-export declare const useThemeStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<ThemeState>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void> | void;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: ThemeState) => void) => () => void;
-        onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
-    };
-}>;
-export declare const getTheme: () => ThemeMode;
-export declare const getResolvedTheme: () => "light" | "dark";
-export declare const setTheme: (theme: ThemeMode) => void;
-export declare const initializeTheme: () => void;
-export {};