Tacugama by Timechimp - A React Template

Overview:

Tacugama is a set of React components that seamlessly integrate with the TimeChimp UI. It offers both client-side and server-side rendering options through the use of its ThemeProvider and custom files. It provides a hassle-free solution for developers to implement the Tacugama UI in their apps.

Features:

Installation: Easily install the Tacugama package via npm.
Getting started: Find step-by-step instructions for client-side rendering (CSR) and server-side rendering (SSR) with Next.js.
ThemeProvider: Wrap your app with the Tacugama ThemeProvider to enable the use of Tacugama components.
Tacugama components: Utilize a wide range of pre-built and customizable components in your app.
Custom _app.jsx: Create a custom _app.jsx file and wrap the Component with the Tacugama ThemeProvider for SSR.
Custom _document.jsx: Configure a custom _document.jsx file for SSR with Next.js.
Tacugama Storybook: Access the Tacugama Storybook to explore all available components and their functionalities.
Releasing: The CI/CD pipeline handles releases automatically based on the version number in the package.json file.

Getting started - CSR:

To integrate Tacugama with client-side rendering, perform the following steps:

Wrap your app with the Tacugama ThemeProvider:

import { TacugamaThemeProvider } from 'tacugama';

function App() {
  return (
    <TacugamaThemeProvider>
      {/* Your app components */}
    </TacugamaThemeProvider>
  );
}

Use Tacugama components in your app as needed.

Getting started - SSR with Next.js:

To implement Tacugama with server-side rendering using Next.js, follow these steps:

Step 1: Create a custom _app.jsx file and wrap the Component with the Tacugama ThemeProvider:

import { TacugamaThemeProvider } from 'tacugama';

function MyApp({ Component, pageProps }) {
  return (
    <TacugamaThemeProvider>
      <Component {...pageProps} />
    </TacugamaThemeProvider>
  );
}

export default MyApp;

Step 2: Create a custom _document.jsx file and set it up as follows:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { TacugamaCSSTheme } from 'tacugama';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href={TacugamaCSSTheme} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

For a full list of available components and their usage, refer to the Tacugama Storybook.

Summary:

Tacugama is a collection of React components designed to seamlessly integrate with the TimeChimp UI. It provides an easy installation process, detailed guides for both client-side and server-side rendering, a ThemeProvider for simplified component usage, and a range of pre-built components to enhance the app's UI. Developers can explore all available components and their functionalities in the Tacugama Storybook. Additionally, the CI/CD pipeline handles automatic releases based on version number updates in the package.json file.