Fluxgen Component Library

A modern React+TypeScript component library for Next.js with MDX support, specifically designed for blog editor applications using MDXEditor.

Features

• CustomImage: Optimized image component with Next.js Image optimization, captions, and error handling
• ImageTextLayout: Responsive layout component that combines images with text content
• MDXEditor Integration: Full support for MDXEditor with JSX component descriptors and toolbar integration
• TypeScript: Full type safety with comprehensive prop interfaces
• TailwindCSS: Modern styling with utility-first CSS framework
• Next.js Optimized: Built with Next.js best practices and image optimization

Installation

npm install fluxgen-component-library

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom next @mdxeditor/editor

Quick Start

Basic Usage

import { CustomImage, ImageTextLayout } from 'fluxgen-component-library'

function MyComponent() {
  return (
    <div>
      <CustomImage
        src="/path/to/image.jpg"
        alt="Description"
        caption="Optional caption"
        width="800"
        height="600"
      />
      
      <ImageTextLayout
        imageSrc="/path/to/image.jpg"
        imageAlt="Description"
        imagePosition="left"
        imageWidth="1/2"
      >
        <h3>Your Content</h3>
        <p>This content will appear alongside the image.</p>
      </ImageTextLayout>
    </div>
  )
}

MDX Integration

// mdx-components.tsx
import { useMDXComponents } from 'mdx/types'
import { CustomImage, ImageTextLayout, mdxComponents } from 'fluxgen-component-library'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...mdxComponents, // Enhanced styling for basic HTML elements
    CustomImage,
    ImageTextLayout,
    ...components,
  }
}

MDXEditor Integration

import { MDXEditor, jsxPlugin, toolbarPlugin } from '@mdxeditor/editor'
import {
  jsxComponentDescriptors,
  createInsertButtons,
  mdxEditorComponents
} from 'fluxgen-component-library'

function MyEditor() {
  const insertButtons = createInsertButtons()

  return (
    <MDXEditor
      plugins={[
        jsxPlugin({
          jsxComponentDescriptors,
          jsxComponentMap: mdxEditorComponents
        }),
        toolbarPlugin({
          toolbarContents: () => (
            <>
              <insertButtons.InsertCustomImage />
              <insertButtons.InsertImageTextLayout />
            </>
          )
        })
      ]}
    />
  )
}

Components

CustomImage

A responsive image component with Next.js optimization, captions, and error handling.

<CustomImage
  src="/path/to/image.jpg"
  alt="Image description"
  caption="Optional caption text"
  width="800"
  height="600"
/>

Props:

• src (string, required): Image source URL
• alt (string, required): Alt text for accessibility
• caption (string, optional): Caption text displayed below the image
• width (string, optional): Image width (default: "800")
• height (string, optional): Image height (default: "600")

ImageTextLayout

A responsive layout component that combines images with text content.

<ImageTextLayout
  imageSrc="/path/to/image.jpg"
  imageAlt="Image description"
  imagePosition="left"
  imageWidth="1/2"
>
  <h3>Your Content Title</h3>
  <p>Your content goes here...</p>
</ImageTextLayout>

Props:

• imageSrc (string, required): Image source URL
• imageAlt (string, required): Alt text for accessibility
• imagePosition (string, optional): Image position - "left" or "right" (default: "left")
• imageWidth (string, optional): Image width - "1/3", "1/2", or "2/3" (default: "1/2")
• children (ReactNode, optional): Content to display alongside the image

MDXEditor Integration

JSX Component Descriptors

The library provides jsxComponentDescriptors that define how components appear in MDXEditor:

import { jsxComponentDescriptors } from 'fluxgen-component-library'

// Use in jsxPlugin
jsxPlugin({ jsxComponentDescriptors })

Insert Buttons

Create toolbar buttons for inserting components:

import { createInsertButtons } from 'fluxgen-component-library'

const insertButtons = createInsertButtons()

// Available buttons:
// - insertButtons.InsertCustomImage
// - insertButtons.InsertImageTextLayout

Component Map

Provide the actual components for rendering:

import { mdxEditorComponents } from 'fluxgen-component-library'

// Use in jsxPlugin
jsxPlugin({ jsxComponentMap: mdxEditorComponents })

MDX Components

The library exports mdxComponents with enhanced styling for basic HTML elements:

• Headings (h1-h6): Styled with primary colors and proper spacing
• Paragraphs: Optimized line height and text color
• Lists: Styled bullet points and numbering
• Blockquotes: Enhanced with borders and background colors
• Code blocks: Syntax highlighting ready
• Links: Hover effects and proper styling
• Tables: Responsive table styling
• Images: Next.js optimized image rendering

TypeScript Support

All components include comprehensive TypeScript interfaces:

import type { CustomImageProps, ImageTextLayoutProps } from 'fluxgen-component-library'

Styling

The library uses TailwindCSS for styling. Make sure your project has TailwindCSS configured:

npm install tailwindcss

TailwindCSS Configuration

The library extends the default TailwindCSS theme with a primary color palette:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/fluxgen-component-library/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
      },
    },
  },
  plugins: [],
}

Development

Local Development

1. Clone the repository
2. Install dependencies: npm install
3. Build the library: npm run build
4. Link locally: npm link
5. In your project: npm link fluxgen-component-library

Building

npm run build

This creates:

• CommonJS build (dist/index.js)
• ES Module build (dist/index.esm.js)
• TypeScript declarations (dist/index.d.ts)

Publishing

npm publish

Examples

See the examples/ directory for complete usage examples:

• basic-usage.tsx: Basic component usage
• mdxeditor-usage.tsx: MDXEditor integration example

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions, please open an issue on the GitHub repository.