teo-ui

teo-ui is a lightweight and customizable React component library built with TypeScript. It provides a set of common UI components that can be easily styled globally using a theme provider or individually via props.

Installation

To install the library, run the following command in your project's directory:

npm install teo-ui

Note: This library has react and react-dom as peer dependencies. You should have them already installed in your project.

Quick Start

Here's a simple example of how to import and use a component:

import React from 'react';
import { Button } from 'teo-ui';

function App() {
  return (
    <div>
      <Button onClick={() => alert('Button clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

export default App;

Theming (Global Styling)

The library uses React's Context API to allow for global theming. You can wrap your application with the ThemeProvider to pass a custom theme object that will be applied to all components.

1. Define your custom theme

Create a theme object. You can import the defaultTheme to extend it. The theme object has the following structure:

interface Theme {
  colors: {
    primary: string;
    secondary: string;
    accent: string;
    background: string;
    text: string;
    primaryText: string; // Text color for components with a primary background
  };
  fonts: {
    body: string;
    heading: string;
  };
}

Example of a custom theme:

// theme.js
import { defaultTheme } from 'teo-ui';

export const myTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: 'darkblue',
    secondary: 'lightblue',
    text: '#2c3e50',
    primaryText: '#ffffff',
  },
  fonts: {
    ...defaultTheme.fonts,
    body: 'Roboto, sans-serif',
    heading: 'Montserrat, sans-serif',
  },
};

2. Wrap your application with ThemeProvider

In your main application file (e.g., App.js or index.js), import the ThemeProvider and your custom theme, then wrap your root component.

// App.js
import React from 'react';
import { ThemeProvider, Button, Navbar } from 'teo-ui';
import { myTheme } from './theme';

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <Navbar />
      <main style={{ padding: '2rem' }}>
        <h1>Welcome to My App</h1>
        <p>This is a paragraph styled with the body font.</p>
        <Button>Themed Button</Button>
      </main>
    </ThemeProvider>
  );
}

export default App;

Component API

Button

A standard button component.

| Prop | Type | Default | Description | | --------- | --------------------- | ----------- | ------------------------------------------------ | | children| React.ReactNode | - | The content to display inside the button. | | onClick | () => void | - | Function to call when the button is clicked. | | style | React.CSSProperties | {} | Custom CSS styles to apply to the button element.|

Navbar

A responsive navigation bar.

| Prop | Type | Default | Description | | --------------- | ----------------------------------- | -------------- | ---------------------------------------------------- | | logoText | string | 'Mundo Nuevo'| The text to display as the logo. | | navLinks | Array<{ text: string, href: string }> | (pre-defined) | An array of link objects for the navigation. | | buttonText | string | 'Get Started'| The text for the call-to-action button. | | onButtonClick | () => void | - | Function to call when the CTA button is clicked. | | style | React.CSSProperties | {} | Custom styles for the main nav container. | | logoStyle | React.CSSProperties | {} | Custom styles for the logo element. | | linkStyle | React.CSSProperties | {} | Custom styles for the navigation link elements. | | buttonStyle | React.CSSProperties | {} | Custom styles for the CTA Button component. |

Card

A card component with a background image, title, and button.

| Prop | Type | Default | Description | | --------------- | --------------------- | ------------- | ---------------------------------------------------- | | imageUrl | string | - | Required. The URL for the card's background image. | | title | string | - | Required. The title text to display on the card. | | buttonText | string | 'Ver más' | The text for the button inside the card. | | onButtonClick | () => void | - | Function to call when the card's button is clicked. | | style | React.CSSProperties | {} | Custom styles for the main card container. | | titleStyle | React.CSSProperties | {} | Custom styles for the title element. | | buttonStyle | React.CSSProperties | {} | Custom styles for the Button component. |

TestimonialCard

A card for displaying user testimonials.

| Prop | Type | Default | Description | | ------------- | --------------------- | ------- | ---------------------------------------------------- | | testimonial | string | - | Required. The main text of the testimonial. | | avatarUrl | string | - | Required. The URL for the user's avatar image. | | name | string | - | Required. The name of the person giving the testimonial. | | role | string | - | Required. The role or title of the person. | | style | React.CSSProperties | {} | Custom styles for the main card container. | | textStyle | React.CSSProperties | {} | Custom styles for the testimonial text. | | nameStyle | React.CSSProperties | {} | Custom styles for the name element. | | roleStyle | React.CSSProperties | {} | Custom styles for the role element. |

Development

To run the Storybook development server and see the components in action, use:

npm run dev