Changelog Package

A React context-based changelog management system for managing and displaying version history, release notes, and platform-specific updates.

Installation

npm install @sonardigital/changelog
# or
yarn add @sonardigital/changelog

Usage

1. Define your Changelog Data

Create a list of changelog entries.

import { Changelog } from '@sonardigital/changelog';

const changelogData: Changelog[] = [
  {
    version: '1.0.0',
    date: '2023-10-27',
    changes: [
      { type: 'feature', description: 'Initial release' },
      { type: 'fix', description: 'Fixed login bug' },
    ],
    platform: ['ios', 'android', 'web'],
  },
  // ... more entries
];

2. Wrap your app with ChangelogProvider

Initialize the provider with your changelog data using the useChangelog hook.

import React from 'react';
import { ChangelogProvider, useChangelog } from '@sonardigital/changelog';

const App = () => {
  const changelogMethods = useChangelog({ 
    changelog: changelogData,
    platforms: ['ios', 'android', 'web'] // optional, defaults to all platforms
  });

  return (
    <ChangelogProvider methods={changelogMethods}>
      {/* Your app code */}
    </ChangelogProvider>
  );
};

3. Access Changelog Data

Use the useChangelogContext hook to access the changelog data and helper methods anywhere in your app.

import React from 'react';
import { useChangelogContext } from '@sonardigital/changelog';

const ChangelogScreen = () => {
  const { changelog, currentVersion, totalReleases, platforms } = useChangelogContext();

  return (
    <div>
      <h2>current version: {currentVersion}</h2>
      <p>total releases: {totalReleases}</p>
      <p>platforms: {platforms.join(', ')}</p>
      {changelog.map((entry) => (
        <div key={entry.version}>
          <h3>{entry.version} - {entry.date}</h3>
          {entry.changes.map((change, index) => (
            <p key={index}>- [{change.type}] {change.description}</p>
          ))}
        </div>
      ))}
    </div>
  );
};

API Reference

useChangelog

Hook to initialize the changelog context state.

Parameters:

• changelog: Changelog[] - Array of changelog entries.
• platforms: Platform[] - Optional array of platforms to filter changelog entries. Defaults to ['ios', 'android', 'web'].

Returns:

• ChangelogContextType object containing state and methods.

ChangelogProvider

Provider component to pass down changelog data.

Props:

• methods: ChangelogContextType - The object returned by useChangelog.
• children: React.ReactNode

useChangelogContext

Hook to consume the changelog context. Returns ChangelogContextType with the following properties:

• changelog: Changelog[] - Filtered array of changelog entries based on selected platforms.
• currentVersion: string - The version of the first changelog entry (latest version).
• totalReleases: number - Total number of changelog entries.
• platforms: Platform[] - Array of platforms used for filtering.

Types

Changelog

interface Changelog {
  version: string;
  date: string;
  changes: Change[];
  platform: Platform[];
}

Change

interface Change {
  type: 'feature' | 'fix' | 'improvement' | 'breaking';
  description: string;
}

Platform

type Platform = 'ios' | 'android' | 'web';