proje-react-panel 1.8.0 → 1.9.0

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