@melv1c/ui-kit 1.0.0 → 1.1.0

package/dist/code-editors/index.d.ts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Monaco } from '@monaco-editor/react';
+export { DiffEditorProps } from '@monaco-editor/react';
+import { VariantProps } from 'class-variance-authority';
+import { editor } from 'monaco-editor';
+import { HTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+type SupportedLanguage = "javascript" | "typescript" | "json" | "html" | "css" | "markdown" | "python" | "sql" | "xml" | "yaml" | "plaintext";
+type EditorTheme = "light" | "vs-dark" | "qualifio";
+
+declare const codeEditorVariants: (props?: ({
+    variant?: "default" | "ghost" | "card" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface CodeDiffEditorProps extends VariantProps<typeof codeEditorVariants>, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    original?: string;
+    modified?: string;
+    language: SupportedLanguage;
+    theme?: EditorTheme;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onMount?: (editor: editor.IStandaloneDiffEditor, monaco: Monaco) => void;
+    options?: editor.IDiffEditorConstructionOptions;
+}
+declare function CodeDiffEditor({ original, modified, language, theme, readOnly, disabled, className, variant, size, onMount, options, ...props }: CodeDiffEditorProps): react_jsx_runtime.JSX.Element;
+
+interface CodeEditorProps extends VariantProps<typeof codeEditorVariants>, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    language: SupportedLanguage;
+    theme?: EditorTheme;
+    readOnly?: boolean;
+    disabled?: boolean;
+    lineNumbers?: boolean;
+    wordWrap?: boolean;
+    minimap?: boolean;
+    onChange?: (value: string | undefined) => void;
+    onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+    onValidate?: (markers: editor.IMarker[]) => void;
+    options?: editor.IStandaloneEditorConstructionOptions;
+}
+declare function CodeEditor({ value, defaultValue, language, theme, readOnly, disabled, lineNumbers, wordWrap, minimap, className, variant, size, onChange, onMount, onValidate, options, ...props }: CodeEditorProps): react_jsx_runtime.JSX.Element;
+
+export { CodeDiffEditor, CodeEditor, type CodeEditorProps, type EditorTheme, type SupportedLanguage };

package/dist/code-editors/index.js

@@ -0,0 +1,154 @@
+import { Skeleton } from '../chunk-PYHBC3IQ.js';
+import { cn } from '../chunk-WZ2GOU2J.js';
+import '../chunk-PZ5AY32C.js';
+import { DiffEditor, Editor } from '@monaco-editor/react';
+import { useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var codeEditorVariants = cva(
+  "relative overflow-hidden rounded-md border transition-[color,box-shadow] outline-none focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "border-input bg-transparent dark:bg-input/30",
+        ghost: "border-transparent bg-transparent",
+        card: "border-border bg-card shadow-sm"
+      },
+      size: {
+        default: "h-[300px]",
+        sm: "h-[150px]",
+        lg: "h-[500px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function LoadingFallback() {
+  return /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" });
+}
+function CodeDiffEditor({
+  original,
+  modified,
+  language,
+  theme = "qualifio",
+  readOnly = false,
+  disabled = false,
+  className,
+  variant,
+  size,
+  onMount,
+  options,
+  ...props
+}) {
+  const editorOptions = useMemo(
+    () => ({
+      readOnly: readOnly || disabled,
+      fontSize: 14,
+      fontFamily: "'Menlo', 'Monaco', Consolas, monospace",
+      scrollBeyondLastLine: false,
+      automaticLayout: true,
+      padding: { top: 12, bottom: 12 },
+      renderSideBySide: true,
+      enableSplitViewResizing: true,
+      ...options
+    }),
+    [readOnly, disabled, options]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "code-diff-editor",
+      className: cn(
+        codeEditorVariants({ variant, size }),
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        DiffEditor,
+        {
+          language,
+          theme,
+          original,
+          modified,
+          onMount,
+          options: editorOptions,
+          loading: /* @__PURE__ */ jsx(LoadingFallback, {})
+        }
+      )
+    }
+  );
+}
+function LoadingFallback2() {
+  return /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" });
+}
+function CodeEditor({
+  value,
+  defaultValue,
+  language,
+  theme = "qualifio",
+  readOnly = false,
+  disabled = false,
+  lineNumbers = true,
+  wordWrap = false,
+  minimap = false,
+  className,
+  variant,
+  size,
+  onChange,
+  onMount,
+  onValidate,
+  options,
+  ...props
+}) {
+  const editorOptions = useMemo(
+    () => ({
+      readOnly: readOnly || disabled,
+      lineNumbers: lineNumbers ? "on" : "off",
+      wordWrap: wordWrap ? "on" : "off",
+      minimap: { enabled: minimap },
+      fontSize: 14,
+      fontFamily: "'Menlo', 'Monaco', Consolas, monospace",
+      scrollBeyondLastLine: false,
+      automaticLayout: true,
+      padding: { top: 12, bottom: 12 },
+      bracketPairColorization: { enabled: true },
+      ...options
+    }),
+    [readOnly, disabled, lineNumbers, wordWrap, minimap, options]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "code-editor",
+      className: cn(
+        codeEditorVariants({ variant, size }),
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Editor,
+        {
+          language,
+          theme,
+          value,
+          defaultValue,
+          onChange,
+          onMount,
+          onValidate,
+          options: editorOptions,
+          loading: /* @__PURE__ */ jsx(LoadingFallback2, {})
+        }
+      )
+    }
+  );
+}
+
+export { CodeDiffEditor, CodeEditor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/code-editors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/optionals/code-editors/variants.ts","../../src/components/optionals/code-editors/code-diff-editor.tsx","../../src/components/optionals/code-editors/code-editor.tsx"],"names":["LoadingFallback","jsx","useMemo"],"mappings":"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","file":"index.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const codeEditorVariants = cva(\n  \"relative overflow-hidden rounded-md border transition-[color,box-shadow] outline-none focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"border-input bg-transparent dark:bg-input/30\",\n        ghost: \"border-transparent bg-transparent\",\n        card: \"border-border bg-card shadow-sm\",\n      },\n      size: {\n        default: \"h-[300px]\",\n        sm: \"h-[150px]\",\n        lg: \"h-[500px]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n","import { Skeleton } from \"@/components/base/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  DiffEditor,\n  type DiffEditorProps,\n  type Monaco,\n} from \"@monaco-editor/react\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type { editor } from \"monaco-editor\";\nimport { type HTMLAttributes, useMemo } from \"react\";\nimport type { EditorTheme, SupportedLanguage } from \"./types\";\nimport { codeEditorVariants } from \"./variants\";\n\ninterface CodeDiffEditorProps\n  extends\n    VariantProps<typeof codeEditorVariants>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  original?: string;\n  modified?: string;\n  language: SupportedLanguage;\n  theme?: EditorTheme;\n  readOnly?: boolean;\n  disabled?: boolean;\n  onMount?: (editor: editor.IStandaloneDiffEditor, monaco: Monaco) => void;\n  options?: editor.IDiffEditorConstructionOptions;\n}\n\nfunction LoadingFallback() {\n  return <Skeleton className=\"h-full w-full\" />;\n}\n\nfunction CodeDiffEditor({\n  original,\n  modified,\n  language,\n  theme = \"qualifio\",\n  readOnly = false,\n  disabled = false,\n  className,\n  variant,\n  size,\n  onMount,\n  options,\n  ...props\n}: CodeDiffEditorProps) {\n  const editorOptions = useMemo(\n    () => ({\n      readOnly: readOnly || disabled,\n      fontSize: 14,\n      fontFamily: \"'Menlo', 'Monaco', Consolas, monospace\",\n      scrollBeyondLastLine: false,\n      automaticLayout: true,\n      padding: { top: 12, bottom: 12 },\n      renderSideBySide: true,\n      enableSplitViewResizing: true,\n      ...options,\n    }),\n    [readOnly, disabled, options],\n  );\n\n  return (\n    <div\n      data-slot=\"code-diff-editor\"\n      className={cn(\n        codeEditorVariants({ variant, size }),\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <DiffEditor\n        language={language}\n        theme={theme}\n        original={original}\n        modified={modified}\n        onMount={onMount}\n        options={editorOptions}\n        loading={<LoadingFallback />}\n      />\n    </div>\n  );\n}\n\nexport { CodeDiffEditor, type DiffEditorProps };\n","import { Skeleton } from \"@/components/base/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport { Editor, type Monaco } from \"@monaco-editor/react\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type { editor } from \"monaco-editor\";\nimport { type HTMLAttributes, useMemo } from \"react\";\nimport type { EditorTheme, SupportedLanguage } from \"./types\";\nimport { codeEditorVariants } from \"./variants\";\n\ninterface CodeEditorProps\n  extends\n    VariantProps<typeof codeEditorVariants>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value?: string;\n  defaultValue?: string;\n  language: SupportedLanguage;\n  theme?: EditorTheme;\n  readOnly?: boolean;\n  disabled?: boolean;\n  lineNumbers?: boolean;\n  wordWrap?: boolean;\n  minimap?: boolean;\n  onChange?: (value: string | undefined) => void;\n  onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;\n  onValidate?: (markers: editor.IMarker[]) => void;\n  options?: editor.IStandaloneEditorConstructionOptions;\n}\n\nfunction LoadingFallback() {\n  return <Skeleton className=\"h-full w-full\" />;\n}\n\nfunction CodeEditor({\n  value,\n  defaultValue,\n  language,\n  theme = \"qualifio\",\n  readOnly = false,\n  disabled = false,\n  lineNumbers = true,\n  wordWrap = false,\n  minimap = false,\n  className,\n  variant,\n  size,\n  onChange,\n  onMount,\n  onValidate,\n  options,\n  ...props\n}: CodeEditorProps) {\n  const editorOptions = useMemo(\n    () => ({\n      readOnly: readOnly || disabled,\n      lineNumbers: lineNumbers ? (\"on\" as const) : (\"off\" as const),\n      wordWrap: wordWrap ? (\"on\" as const) : (\"off\" as const),\n      minimap: { enabled: minimap },\n      fontSize: 14,\n      fontFamily: \"'Menlo', 'Monaco', Consolas, monospace\",\n      scrollBeyondLastLine: false,\n      automaticLayout: true,\n      padding: { top: 12, bottom: 12 },\n      bracketPairColorization: { enabled: true },\n      ...options,\n    }),\n    [readOnly, disabled, lineNumbers, wordWrap, minimap, options],\n  );\n\n  return (\n    <div\n      data-slot=\"code-editor\"\n      className={cn(\n        codeEditorVariants({ variant, size }),\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <Editor\n        language={language}\n        theme={theme}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={onChange}\n        onMount={onMount}\n        onValidate={onValidate}\n        options={editorOptions}\n        loading={<LoadingFallback />}\n      />\n    </div>\n  );\n}\n\nexport type { EditorTheme, SupportedLanguage } from \"./types\";\nexport { CodeEditor, type CodeEditorProps };\n"]}