proje-react-panel 1.7.0 → 1.9.0

package/src/components/form/RichTextField.tsx

@@ -0,0 +1,218 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import type { Editor } from '@tiptap/react';
+import { InputConfiguration } from '../../decorators/form/Input';
+import {
+  DEFAULT_RICH_TEXT_TOOLBAR,
+  RichTextInputConfiguration,
+  RichTextToolbarItem,
+} from '../../decorators/form/inputs/RichTextInput';
+
+const DEFAULT_MIN_HEIGHT = 160;
+
+export interface RichTextFieldProps {
+  input: InputConfiguration;
+  fieldName: string;
+}
+
+interface Tiptap {
+  react: typeof import('@tiptap/react');
+  starterKit: (typeof import('@tiptap/starter-kit'))['default'];
+}
+
+//NOTE: @tiptap/* is an optional peer dependency, so it may only be reached through a dynamic
+// import — a static one would put ~100kb (and a hard install requirement) on every panel,
+// including the ones that never declare a richtext field. The promise is cached at module level
+// so a form with several richtext fields loads the editor once.
+let tiptapPromise: Promise<Tiptap> | null = null;
+
+function loadTiptap(): Promise<Tiptap> {
+  if (!tiptapPromise) {
+    const pending = Promise.all([import('@tiptap/react'), import('@tiptap/starter-kit')]).then(
+      ([react, starterKit]) => ({ react, starterKit: starterKit.default })
+    );
+    // A failed load is not cached: a chunk that failed to arrive should be retried on the next
+    // mount instead of leaving the field broken for the rest of the session.
+    pending.catch(() => {
+      tiptapPromise = null;
+    });
+    tiptapPromise = pending;
+  }
+  return tiptapPromise;
+}
+
+interface ToolbarButton {
+  label: string;
+  title: string;
+  isActive: (editor: Editor) => boolean;
+  run: (editor: Editor) => void;
+}
+
+const TOOLBAR_BUTTONS: Record<RichTextToolbarItem, ToolbarButton> = {
+  bold: {
+    label: 'B',
+    title: 'Bold',
+    isActive: editor => editor.isActive('bold'),
+    run: editor => editor.chain().focus().toggleBold().run(),
+  },
+  italic: {
+    label: 'I',
+    title: 'Italic',
+    isActive: editor => editor.isActive('italic'),
+    run: editor => editor.chain().focus().toggleItalic().run(),
+  },
+  heading: {
+    label: 'H2',
+    title: 'Heading',
+    isActive: editor => editor.isActive('heading', { level: 2 }),
+    run: editor => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+  },
+  bulletList: {
+    label: '••',
+    title: 'Bullet list',
+    isActive: editor => editor.isActive('bulletList'),
+    run: editor => editor.chain().focus().toggleBulletList().run(),
+  },
+  orderedList: {
+    label: '1.',
+    title: 'Numbered list',
+    isActive: editor => editor.isActive('orderedList'),
+    run: editor => editor.chain().focus().toggleOrderedList().run(),
+  },
+  link: {
+    label: '🔗',
+    title: 'Link',
+    isActive: editor => editor.isActive('link'),
+    run: editor => {
+      const current = editor.getAttributes('link').href as string | undefined;
+      const url = window.prompt('Link URL', current ?? 'https://');
+      //NOTE: null is "cancelled", empty string is "remove the link".
+      if (url === null) return;
+      if (url === '') {
+        editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+      }
+      editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    },
+  },
+};
+
+export function RichTextField({ input, fieldName }: RichTextFieldProps) {
+  const [tiptap, setTiptap] = useState<Tiptap | null>(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    loadTiptap().then(
+      modules => {
+        if (active) setTiptap(modules);
+      },
+      (error: unknown) => {
+        console.error(
+          "proje-react-panel: a 'richtext' input needs @tiptap/react and @tiptap/starter-kit installed.",
+          error
+        );
+        if (active) setLoadFailed(true);
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  if (loadFailed) {
+    return (
+      <div className="rich-text-missing" role="alert">
+        Rich text editor unavailable — install @tiptap/react and @tiptap/starter-kit.
+      </div>
+    );
+  }
+
+  if (!tiptap) {
+    return <div className="rich-text-loading">Loading editor…</div>;
+  }
+
+  return <RichTextEditor input={input} fieldName={fieldName} tiptap={tiptap} />;
+}
+
+function RichTextEditor({ input, fieldName, tiptap }: RichTextFieldProps & { tiptap: Tiptap }) {
+  const richInput = input as RichTextInputConfiguration;
+  // Hooks off a dynamically loaded module: safe because the module object is cached, so the
+  // hook identity never changes between renders of this component.
+  const { EditorContent, useEditor } = tiptap.react;
+  const { control } = useFormContext();
+  //NOTE: register() would bind the value to a DOM node; TipTap owns an uncontrolled
+  // contenteditable of its own, so the value goes through the controller instead.
+  const { field } = useController({ name: fieldName, control });
+  const toolbar = richInput.toolbar ?? DEFAULT_RICH_TEXT_TOOLBAR;
+  const incomingHtml = typeof field.value === 'string' ? field.value : '';
+
+  // The HTML the editor last emitted or received. The outside -> editor sync compares against
+  // this instead of the previous prop value: while the user types, react-hook-form hands our
+  // own HTML straight back, and calling setContent for that would jump the caret to the start.
+  const editorHtmlRef = useRef<string>(incomingHtml);
+
+  // onUpdate is captured when the editor is created; the ref keeps it pointed at the live handler.
+  const onChangeRef = useRef(field.onChange);
+  onChangeRef.current = field.onChange;
+
+  const editor = useEditor({
+    extensions: [tiptap.starterKit],
+    content: editorHtmlRef.current,
+    //NOTE: toolbar highlighting reads editor state, so the field has to re-render with it.
+    shouldRerenderOnTransaction: true,
+    onUpdate: ({ editor: updatedEditor }) => {
+      // An empty document still serializes to '<p></p>'; report it as empty so required
+      // validators (@IsNotEmpty and friends) see what the user actually sees.
+      const html = updatedEditor.isEmpty ? '' : updatedEditor.getHTML();
+      editorHtmlRef.current = html;
+      onChangeRef.current(html);
+    },
+  });
+
+  useEffect(() => {
+    if (!editor) return;
+    // getDetailsData resolves after the form mounts, so the value can arrive late — but only
+    // replace the document when it really differs from what the editor already holds.
+    if (incomingHtml === editorHtmlRef.current) return;
+    editorHtmlRef.current = incomingHtml;
+    editor.commands.setContent(incomingHtml, { emitUpdate: false });
+  }, [editor, incomingHtml]);
+
+  const buttons = useMemo(
+    () => toolbar.map(item => ({ item, ...TOOLBAR_BUTTONS[item] })),
+    [toolbar]
+  );
+
+  return (
+    <div className="rich-text-field">
+      <div className="rich-text-toolbar" role="toolbar" aria-label={`${input.label ?? fieldName}`}>
+        {buttons.map(button => {
+          const active = editor ? button.isActive(editor) : false;
+          return (
+            <button
+              key={button.item}
+              type="button"
+              title={button.title}
+              aria-label={button.title}
+              aria-pressed={active}
+              disabled={!editor}
+              className={`rich-text-toolbar-button${active ? ' is-active' : ''}`}
+              onClick={() => editor && button.run(editor)}
+            >
+              {button.label}
+            </button>
+          );
+        })}
+      </div>
+      <EditorContent
+        editor={editor}
+        id={fieldName}
+        data-testid={`rich-text-${fieldName}`}
+        data-placeholder={input.placeholder}
+        className={`rich-text-content${!editor || editor.isEmpty ? ' is-empty' : ''}`}
+        style={{ minHeight: `${richInput.minHeight ?? DEFAULT_MIN_HEIGHT}px` }}
+      />
+    </div>
+  );
+}

package/src/components/layout/Layout.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SideBar } from './SideBar';
+import { LoadingScreen } from '../LoadingScreen';
 import { useAppStore } from '../../store/store';
 
 export function Layout<IconType>({
@@ -16,8 +17,23 @@ export function Layout<IconType>({
   const { user } = useAppStore(s => ({
     user: s.user,
   }));
-  if (!user) {
+  const redirected = useRef(false);
+
+  // Yonlendirme render govdesinde degil effect'te yapiliyor: render sirasindaki
+  // yan etki React kuralini ihlal ediyor ve StrictMode'da iki kez tetikleniyordu.
+  useEffect(() => {
+    if (user || redirected.current) {
+      return;
+    }
+    redirected.current = true;
     logout?.('redirect');
+  }, [user, logout]);
+
+  // Oturum yokken children RENDER EDILMEZ. Eskiden `logout('redirect')` cagrilip
+  // yine de tum layout donuluyordu; tarayici korumali ekrani boyayip ancak
+  // ondan sonra login'e gidiyordu (panelin bir an gorunup kaybolmasi).
+  if (!user) {
+    return <LoadingScreen id="layout-auth-redirect" />;
   }
 
   return (

package/src/components/list/ListPage.tsx

@@ -60,7 +60,7 @@ export function ListPage<T extends AnyClass>({
     const filtersFromUrl: Record<string, string> = {};
     searchParams.forEach((value, key) => {
       filtersFromUrl[key] = value;
-    });
+    }); 
     setActiveFilters(filtersFromUrl);
   }, []);
 

package/src/decorators/form/Form.ts

@@ -5,12 +5,21 @@ import { GetDetailsDataFN } from '../details/Details';
 const DETAILS_METADATA_KEY = 'DetailsMetaData';
 export type OnSubmitFN<T, L = T> = (data: T | FormData) => Promise<L>;
 
+export interface FormGroup {
+  key: string;
+  label: string;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+}
+
 interface FormOptions<T extends AnyClass, L = T> {
   onSubmit: OnSubmitFN<T, L>;
   onSubmitSuccess?: (data: L) => void;
   getDetailsData?: GetDetailsDataFN<T>;
   type?: 'json' | 'formData';
   redirectSuccessUrl?: string;
+  //NOTE: declares the section headings and their order; fields opt in with @Input({ group }).
+  groups?: FormGroup[];
 }
 
 export interface FormConfiguration<T extends AnyClass, L = T> {
@@ -19,6 +28,7 @@ export interface FormConfiguration<T extends AnyClass, L = T> {
   getDetailsData?: GetDetailsDataFN<T>;
   type: 'json' | 'formData';
   redirectSuccessUrl?: string;
+  groups?: FormGroup[];
 }
 
 export function Form<T extends AnyClass, L = T>(options?: FormOptions<T, L>): ClassDecorator {
@@ -45,6 +55,7 @@ export function getFormConfiguration<T extends AnyClass, K extends AnyClassConst
     getDetailsData: formOptions.getDetailsData,
     type: formOptions.type ?? 'json',
     redirectSuccessUrl: formOptions.redirectSuccessUrl,
+    groups: formOptions.groups,
   };
   return formConfiguration;
 }

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';
+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/CustomInput.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { ExtendedInput, ExtendedInputOptions, InputConfiguration, InputOptions } from '../Input';
+
+export interface CustomRenderProps {
+  fieldName: string;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  error?: string;
+}
+
+export interface CustomInputOptions extends Omit<InputOptions, 'type'> {
+  render: (props: CustomRenderProps) => ReactNode;
+}
+
+export interface CustomInputConfiguration extends InputConfiguration {
+  type: 'custom';
+  render: (props: CustomRenderProps) => ReactNode;
+}
+
+//NOTE: the render function travels through Reflect metadata like any other option value.
+export function CustomInput(options: CustomInputOptions): PropertyDecorator {
+  return ExtendedInput({
+    ...options,
+    type: 'custom',
+  } as ExtendedInputOptions);
+}

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/index.ts

@@ -18,9 +18,21 @@ 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,
+  type CustomRenderProps,
+} from './decorators/form/inputs/CustomInput';
 //for nested form fields
 export { getInputFields } from './decorators/form/Input';
 

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/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 {};