oppr_components

oppr_components is a React component library built with TypeScript and Tailwind CSS for Oppr AI. All components are designed to be customizable via props and integrate easily into any Oppr project.

Table of Contents

• Installation
• Usage
• Components
  • Theme
  • Button
  • Sidebar & SidebarNav
  • Header
  • Dialog
  • DropdownMenu
  • Input
  • Tabs
  • Card
  • Checkbox
  • Breadcrumbs
  • Textarea
  • Tooltip
  • Avatar
  • Tables
  • Searchbar
  • Logo

Installation

Install the package via npm or yarn:

npm install oppr_components
# or
yarn add oppr_components

Note: This package has react and react-dom as peer dependencies. Ensure your project has compatible versions installed.

Usage

Import components from the package and use them in your project:

import React from "react";
import {
  ThemeProvider,
  useTheme,
  Button,
  Sidebar,
  Header,
  Searchbar,
  Logo
} from "oppr_components";

function App() {
  const { theme, setTheme } = useTheme();

  return (
    <ThemeProvider defaultTheme="light">
      <div className="flex">
        <Sidebar
          items={[
            { label: "Home", href: "/", icon: <Logo /> },
          ]}
          logo={<Logo logoSrc="/custom-logo.png" />}
          userInfo={<div>User Info Here</div>}
          onToggle={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
        />
        <div className="flex-1">
          <Header
            onGoBack={() => window.history.back()}
            center={<Searchbar placeholder="Search..." />}
            right={
              <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
                Toggle Theme
              </Button>
            }
          />
          <main className="p-6">
            {/* Your main content */}
          </main>
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

Components

Theme

• ThemeProvider - Wraps your application to provide theme support.
• useTheme - Hook to access the current theme and update it.

Button

• Button - A customizable button with variant and size options.

Sidebar & SidebarNav

• Sidebar - A responsive sidebar container.
• SidebarNav - A navigation list for the sidebar.

Header

• Header - A flexible header component.

Dialog

• Dialog - A modal dialog component.

DropdownMenu

• DropdownMenu - A dropdown menu system with various triggers and options.

Input

• Input - A styled text input component.

Tabs

• Tabs - A tabbed navigation system.

Card

• Card - A container for related content with header and footer sections.

Checkbox

• Checkbox - A styled checkbox component.

Breadcrumbs

• Breadcrumbs - A set of components for breadcrumb navigation.

Textarea

• Textarea - A styled textarea input.

Tooltip

• Tooltip - A component for displaying tooltips.

Avatar

• Avatar - A user avatar component with fallback options.

Tables

• BorderedTable - A table with sorting and selection features.
• MinimalTable - A simplified table component.
• ModernTable - A modern-styled table with enhanced features.

Searchbar

• Searchbar - A search input with an embedded search icon.

Logo

• Logo - A logo component that switches between favicon and full logo.

Example

import React from "react";
import {
  ThemeProvider,
  useTheme,
  Button,
  Sidebar,
  Header,
  Searchbar,
  Logo,
  BorderedTable
} from "oppr_components";

const menuItems = [
  { label: "Home", href: "/", icon: <Logo /> },
  { label: "Settings", href: "/settings" },
];

const sampleData = [
  { id: 1, name: "Document 1", type: "PDF", size: "1.2MB", modified: "2023-01-01", status: "Active" },
  { id: 2, name: "Spreadsheet 1", type: "XLSX", size: "2.3MB", modified: "2023-01-02", status: "Inactive" },
];

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <div className="flex">
        <Sidebar items={menuItems} logo={<Logo />} />
        <div className="flex-1">
          <Header center={<Searchbar placeholder="Search..." />} />
          <main className="p-6">
            <BorderedTable data={sampleData} />
          </main>
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;