TCM UI Kit

This is the private UI Kit package for Telcell Market products. It provides a collection of reusable components and styles to create consistent, visually appealing user interfaces for your Telcell Market applications.

🚀 Features

• Reusable Components: Includes components like buttons, forms, and more to build a cohesive UI.
• Theming: Easily switch between light and dark themes with built-in context and styled-components.
• TypeScript Support: Full type safety and autocompletion.
• Storybook: View and interact with all components in isolation.

📦 Installation

1. Install the UI kit package:

   pnpm add tcm-ui-kit

⚙️ Setup and Usage

Wrap your app with the TCMProvider to enable the context and theme functionality.

Example Usage

import React, { useState } from 'react';
import { TCMProvider } from 'tcm-ui-kit/provider';
import { TCMButton } from 'tcm-ui-kit/buttons';

const App = () => {
  const [themeKey, setThemeKey] = useState('light');

  const switchTheme = () =>
    setThemeKey((prev) => (prev === 'light' ? 'dark' : 'light'));

  return (
    <TCMProvider themeKey={themeKey}>
      <TCMButton onClick={switchTheme}>Switch Theme</TCMButton>
    </TCMProvider>
  );
};

export default App;

In this example, the TCMButton component is wrapped inside the TCMProvider to access the context and theme settings.

🛠 Technologies

• React.js – UI library
• TypeScript – Strongly typed JavaScript
• Styled-Components – CSS-in-JS styling
• Storybook – UI component documentation and testing
• Esbuild – Module bundler
• ESLint – Code linting

🔨 Build and Release

• Build production:

  pnpm build:prod

• Release a version (patch/minor/major):

  pnpm run release:patch
  # Or
  pnpm run release:minor
  # Or
  pnpm run release:major

🧑‍💻 Development

Make sure to run the following commands for development tasks:

• Start Storybook for local component development:

  pnpm dev

✨ Creators & Collaborators

• SergeiKamalian

With ❤
Telcell Market Frontend Team