@vyuh/react-feature-system

Core building blocks for creating content-driven React applications

Overview ✨

@vyuh/react-feature-system provides a comprehensive set of content components and layouts for building content-driven applications with the Vyuh framework. It includes:

Content Components: Ready-to-use components for common content types
Layout System: Flexible layouts for different content presentation needs
Conditional Logic: Components for conditional rendering based on rules
Rich Text Support: Portable text rendering with customizable components

Installation 📦

npm install @vyuh/react-feature-system
# or
yarn add @vyuh/react-feature-system
# or
pnpm add @vyuh/react-feature-system

Usage 💡

Basic Setup

Include the system feature in your Vyuh application:

import { VyuhProvider } from '@vyuh/react-core';
import { feature as systemFeature } from '@vyuh/react-feature-system';

function App() {
  return (
    <VyuhProvider features={() => [systemFeature]} plugins={yourPlugins}>
      <YourApp />
    </VyuhProvider>
  );
}

Using Content Components

The content components can be used directly or through the content system:

import { Card, Group, PortableText } from '@vyuh/react-feature-system';
import { useVyuh } from '@vyuh/react-core';

function MyComponent() {
  const { plugins } = useVyuh();

  // Render content from CMS
  return plugins.content.render({
    _type: 'vyuh.card',
    title: 'My Card',
    description: 'This is a card component',
    image: {
      /* image reference */
    },
  });
}

Creating Custom Layouts

You can extend the system with custom layouts:

import { LayoutConfiguration, TypeDescriptor } from '@vyuh/react-core';
import { Card } from '@vyuh/react-feature-system';

class MyCustomCardLayout extends LayoutConfiguration<Card> {
  static readonly schemaName = 'my-feature.card.layout.custom';
  static typeDescriptor = new TypeDescriptor(this.schemaName, this);

  constructor() {
    super({
      schemaType: MyCustomCardLayout.schemaName,
      title: 'Custom Card Layout',
    });
  }

  render(content: Card) {
    return (
      <div className="my-custom-card">
        <h2>{content.title}</h2>
        <p>{content.description}</p>
        {/* Custom rendering logic */}
      </div>
    );
  }
}

Then include your custom layout in your feature descriptor:

import { FeatureDescriptor } from '@vyuh/react-core';
import { ContentExtensionDescriptor } from '@vyuh/react-extension-content';
import { CardDescriptor } from '@vyuh/react-feature-system';
import { Command } from 'lucide-react';
import React from 'react';

// Import your custom layout
import { MyCustomCardLayout } from './layouts/my-custom-card-layout';

export const myFeature = new FeatureDescriptor({
  name: 'my-feature',
  title: 'My Feature',
  description: 'A custom feature with custom layouts',
  icon: <Command />,

  extensions: [
    new ContentExtensionDescriptor({
      contents: [
        // Include your custom layout in the CardDescriptor
        new CardDescriptor({
          layouts: [MyCustomCardLayout.typeDescriptor],
        }),
        // Other content descriptors
      ],
      contentBuilders: [
        // Your content builders
      ],
    }),
  ],

  // Initialization logic
  init: async () => {
    console.log('My feature with custom layouts initialized');
  },
});

Core Components 🧩

Content Types

The package includes the following content types:

Component	Description
`Route`	Page-level content container with regions
`Card`	Versatile content card with various layouts
`Group`	Container for organizing multiple content items
`Accordion`	Collapsible content sections
`PortableText`	Rich text content with embedded blocks
`Divider`	Visual separator between content sections
`VideoPlayer`	Video playback component
`APIContent`	Dynamic content from API endpoints
`ConditionalContent`	Content that renders based on conditions
`ConditionalRoute`	Routes that render based on conditions

Layouts

Each content type supports multiple layouts:

Card Layouts: Different card presentations (basic, featured, etc.)
Group Layouts: Various ways to organize groups (grid, carousel, etc.)
Route Layouts: Page layouts with different region configurations

Styling 🎨

The package includes built-in styles using Tailwind CSS:

// Import the styles in your application
import '@vyuh/react-feature-system/styles.css';

You can customize the appearance by:

Using the provided CSS variables
Overriding the Tailwind classes
Creating custom layouts with your own styling

Documentation 📚

For more detailed documentation, visit docs.vyuh.tech.

Contributing 🤝

We welcome contributions to the Vyuh platform! Please see our contributing guidelines for more information.