@empyreanui/core

EmpyreanUi

Installation

To use the EmpyreanUi u need to install

npm install @empyreanui/core

CodeEditor Component

The CodeEditor component provides a code editor interface with support for multiple files, folder structure, and themes. It leverages the Monaco Editor for a rich coding experience and can be easily integrated into your React applications.

Features

• Supports multiple files with a folder structure view.
• Customizable themes (default is vs-dark).
• Customizable editor options.
• Callback functions for various editor events.
• Responsive design with customizable dimensions.

Usage

Here is an example of how to use the CodeEditor component in a React application:

import React from "react";
import { CodeEditor } from "@empyreanui/core";

const data = {
  "src/index.js":
    "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>\n);",
  "src/index.css": `body { margin: 0; font-family: Arial, sans-serif; }`,
};

const MyApp = () => (
  <CodeEditor
    data={data}
    options={{ readOnly: false }}
    theme="vs-dark"
    width="100%"
    height="600px"
    onChange={(newValue) => console.log("Content changed:", newValue)}
  />
);

export default MyApp;

Props

The CodeEditor component accepts the following props:

Prop	Type	Description
data	Object | string	The file data, either as a string for a single file or an object for multiple files.
options	Object	Options for the Monaco Editor.
defaultValue	string	Default value for the editor.
defaultLanguage	string	Default language for the editor.
defaultPath	string	Default path for the editor.
path	string	Current path for the editor.
theme	string	Theme for the editor. Default is vs-dark.
line	number	Line number to focus on.
loading	string	Loading message or component.
overrideServices	Object	Override services for the editor.
saveViewState	boolean	Whether to save the view state of the editor.
keepCurrentModel	boolean	Whether to keep the current model in the editor.
width	string	Width of the editor.
height	string	Height of the editor.
className	string	Additional class name for the editor.
wrapperProps	Object	Additional props for the wrapper element.
beforeMount	Function	Function to execute before the editor mounts.
onMount	Function	Function to execute when the editor mounts.
onChange	Function	Function to execute when the editor content changes.
onValidate	Function	Function to execute when the editor content is validated.

Example

import React from "react";
import { CodeEditor } from "@empyreanui/core";

const data = {
  "src/index.js":
    "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>\n);",
  "src/index.css": `body { margin: 0; font-family: Arial, sans-serif; }`,
};

const MyApp = () => (
  <CodeEditor
    data={data}
    options={{ readOnly: false }}
    theme="vs-dark"
    width="100%"
    height="600px"
    onChange={(newValue) => console.log("Content changed:", newValue)}
  />
);

export default MyApp;

ErrorBoundary Component

A component that acts as an error boundary to catch JavaScript errors in its child component tree, log those errors, and provide a fallback UI.

Props

ErrorBoundaryProps

• children: ReactNode - The children components that will be wrapped by the error boundary.
• fallbackText: string (optional) - The text to display in the fallback UI.
• className: string (optional) - Optional className for the wrapper div.
• style: CSSProperties (optional) - Optional inline styles for the wrapper div.
• fallbackComponent: ReactNode (optional) - Optional custom fallback component to render when an error is caught.
• onError: (error: Error) => void (optional) - Optional callback function to handle the error.

State

ErrorBoundaryState

• hasError: boolean - Indicates whether an error has been caught or not.
• error: Error | null - The error that was caught, if any.

Example Usage

import { ErrorBoundary } from "@empyreanui/core";

const App = () => {
  return (
    <ErrorBoundary fallbackText="Something went wrong!">
      <YourComponent />
    </ErrorBoundary>
  );
};

export default App;

Methods

constructor(props: ErrorBoundaryProps)

Constructs the ErrorBoundary component.

static getDerivedStateFromError(error: Error): ErrorBoundaryState

A lifecycle method invoked after an error is thrown in a child component. It updates the state to trigger a fallback UI.

componentDidCatch(error: Error, info: React.ErrorInfo): void

A lifecycle method invoked after an error has been captured. It can be used for additional error logging or reporting services.

resetError = () => void

Function to reset the error state.

render(): ReactNode

Renders the children components if there's no error, otherwise displays fallback UI.

ScrollAnimationWrapper

A React component that applies a CSS animation class to its children when they scroll into view. This component uses the Intersection Observer API to detect when it is visible on the screen and triggers the animation.

Usage

Here's how you can use ScrollAnimationWrapper in your project:

import React from "react";
import { ScrollAnimationWrapper } from "@empyreanui/core";

const App = () => (
  <ScrollAnimationWrapper animationClass="fadeInUp" element="section">
    <div className="content">This will fade in up when scrolled into view.</div>
  </ScrollAnimationWrapper>
);

export default App;

Props

ScrollAnimationWrapper accepts the following props:

• children (ReactNode): The elements to be rendered inside the wrapper.
• animationClass (string): CSS class that defines the animation to apply when the element comes into view. This class should be defined in your CSS with keyframe animations. Options include:
  • "fadeIn"
  • "fadeInUp"
  • "fadeInDown"
  • "fadeInLeft"
  • "fadeInRight"
  • "scaleUp"
  • "slideUp"
  • "slideDown"
  • "slideLeft"
  • "slideRight"
  • "rotateIn"
  • Any other custom animation class
• element (ElementType): The HTML element type to render as the component root node. Defaults to "div".
• className (string): Additional class names to be applied to the element.

Example

<ScrollAnimationWrapper animationClass="fadeInUp" element="section">
  <div className="content">This will fade in up when scrolled into view.</div>
</ScrollAnimationWrapper>

Hooks

usePersistentState Hook

usePersistentState is a custom React hook that manages state and persists it to localStorage. This hook can be particularly useful for maintaining state across page reloads.

Installation

You can add this hook to your project by copying the code below and pasting it into your project files.

Usage

Import

import { usePersistentState } from "@empyreanui/core";

Example

Basic Example

import React from "react";
import { usePersistentState } from "@empyreanui/core";

function Counter() {
  const [count, setCount] = usePersistentState("count", 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Complex Example

import React from "react";
import { usePersistentState } from "@empyreanui/core";

function UserProfile() {
  const [user, setUser] = usePersistentState("user", { name: "John Doe" });

  return (
    <div>
      <p>Name: {user.name}</p>
      <button onClick={() => setUser({ name: "Jane Doe" })}>Change Name</button>
    </div>
  );
}

export default UserProfile;

usePersistentState

function usePersistentState<T>(
  key: string,
  initialValue: T
): [T, Dispatch<SetStateAction<T>>];

Parameters

• key (string): The key under which the state is stored in localStorage.
• initialValue (T): The initial value of the state.

Returns

• [T, Dispatch<SetStateAction<T>>]: Returns the current state and a function to update it.

Example

const [count, setCount] = usePersistentState("count", 0);
const [user, setUser] = usePersistentState("user", { name: "John Doe" });

useScrolled Hook

A custom React hook that tracks the scroll position of an HTMLElement and checks if it has scrolled beyond a specified limit.

Installation

To use this hook, simply import it into your project:

npm install your-library-name

Usage

Here is an example of how to use the useScrolled hook in a functional React component:

import React, { useRef } from 'react';
import { useScrolled } from '@empyreanui/core';

const ScrollComponent: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);
  const { scrollPosition, isScrolled } = useScrolled(scrollRef, 100);

  return (
    <div ref={scrollRef} style={{ height: '200px', overflow: 'auto' }}>
      <div style={{ height: '500px' }}>
        Scroll down to see more content and check the scroll position!
      </div>
      <p>Scroll Position: {scrollPosition}px</p>
      {isScrolled && <p>You have scrolled more than 100 pixels!</p>}
    </div>
  );
}

export default ScrollComponent;

Parameters

• ref (RefObject): A React ref object pointing to the target element to monitor for scroll events.
• limit (number): The pixel threshold after which isScrolled should return true.

Returns

An object containing the following properties:

• scrollPosition (number): The current scroll position of the element.
• isScrolled (boolean): A boolean indicating whether the scroll position has exceeded the specified limit.

Example

import React, { useRef } from 'react';
import { useScrolled } from '@empyreanui/core';

const ScrollComponent: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);
  const { scrollPosition, isScrolled } = useScrolled(scrollRef, 100);

  return (
    <div ref={scrollRef} style={{ height: '200px', overflow: 'auto' }}>
      <div style={{ height: '500px' }}>
        Scroll down to see more content and check the scroll position!
      </div>
      <p>Scroll Position: {scrollPosition}px</p>
      {isScrolled && <p>You have scrolled more than 100 pixels!</p>}
    </div>
  );
}

export default ScrollComponent;

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or bug fixes.