Ticket Builder Application

This application facilitates the construction and customization of tickets, allowing users to add various elements such as text, images, barcodes, and cells. It utilizes a web component-based architecture, enabling integration into different environments.

Features

• Drag and Drop Elements: Enables users to drag elements into the ticket canvas and position them as required.
• Resizable Elements: Users can adjust the size of the ticket elements to fit the design.
• Multiple Element Types: Supports various types of elements, including text, images, barcodes, and cells (both single-line and multiline).
• Dynamic Content: Elements can be dynamically added and positioned within the ticket.
• Customization: Offers extensive customization options for text color, font size, and alignment.

Libraries Used

This project uses several key libraries:

• react and react-dom for building the user interface.
• react-draggable and re-resizable for making elements draggable and resizable.
• react-resizable for additional resizable features.
• uuid for generating unique identifiers for elements.
• @r2wc/react-to-web-component for wrapping the React app as a web component.

Project Structure

The project follows a structured and modular approach to organize its files and directories. Here's an overview of the main directories and files:

project-root
│
├── dist                    # Compiled files for production
├── node_modules            # Node.js packages
├── public                  # Public files (e.g., index.html)
├── src                     # Source files
│   ├── assets              # Static assets like images and fonts
│   ├── components          # React components
│   ├── infrastructure      # Core functionalities (hooks, utils, types)
│   │   ├── hooks           # React hooks
│   │   │   └── useFactor   # Example custom hook
│   │   ├── types           # Type definitions and interfaces
│   │   └── utils.ts        # Utility functions
│   ├── App.tsx             # Main React application component
│   ├── index.css           # Global stylesheet
│   └── main.tsx            # Entry point for the React app
│
├── .eslintrc.js            # ESLint configuration
├── .gitignore              # Specifies intentionally untracked files to ignore
├── .prettierrc             # Prettier code formatter configuration
├── dist.zip                # Zipped production build (optional)
├── index.html              # Entry HTML file
├── package.json            # Project manifest
├── README.md               # Project documentation
├── tailwind.config.js      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript compiler configuration
├── tsconfig.node.json      # TypeScript configuration for Node.js
└── vite.config.ts          # Vite configuration

This structure is designed to separate concerns and enhance maintainability. It includes a src directory for all the source code, including React components, hooks, utilities, and types. The public directory contains static assets that can be accessed directly.

Installation

To set up the Ticket Builder Application, clone the repository and install the dependencies:

git clone https://github.com/sertecfarma/02379_SERTEC_Sfera_Label_Builder.git
cd 02379_SERTEC_Sfera_Label_Builder
npm install

Running and Building the Application

Development

To run the application in development mode, use the following command:

npm run dev

This will start the development server. Open http://localhost:3000 to view your application in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

Production Build

When you are ready to build the application for production, use the following command:

npm run build

This compiles the React application into static files for production in the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified, and the filenames include the hashes. Your app is ready to be deployed!

Integration

The application can be integrated into any webpage as a custom HTML web component. Here's a basic example of usage:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Label Builder</title>
</head>
<body>
  <ticket-builder  on-load="YourFunction" data='YourData'></ticket-builder>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Replace YourFunction, and YourData with your specifics. The data property accepts a JSON string representing the ticket's structure and initial content.

Data Structure Example

The ticket-builder component accepts data in JSON format through the data attribute. This data defines the layout and elements of the ticket you're creating. Below is a detailed example of the data structure and how to use it within an HTML page.

Data Structure

The data structure for a ticket includes properties for the ticket's dimensions (labelWidth, labelHeight), areas where elements cannot be placed (blockedAreas), and the elements themselves (labelFields). Here's a brief overview of what each part of the structure represents:

• labelWidth and labelHeight: The dimensions of the ticket.
• blockedAreas: An array of coordinates defining areas where ticket elements cannot be placed.
• labelFields: An array of elements (e.g., text, images, cells) that make up the content of the ticket. Each element has properties such as position (x, y), size (width, height), visibility (visible), and specific characteristics like color, fontSize, and type.

HTML Integration Example

To integrate the ticket-builder into your HTML, you can define a ticket-builder element and pass the ticket data as a JSON string to the data attribute. Here's an example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React + TS</title>
</head>
<body style="height:100vh; width:100%;">
  <div id="root"></div>
  <ticket-builder
    on-load="onLoadFunction"
    data='{
      "labelWidth": 60,
      "labelHeight": 29,
      "blockedAreas": [...],
      "labelFields": [
        {
          "type": "cell",
          "field": "codigo_articulo",
          "x": 23,
          "y": 5,
          "width": 37,
          "height": 3,
          "color": "0, 0, 0",
          "fontSize": 6,
          "textAlign": "C",
          "visible": true,
          ...
        },
        ...
      ],
      "active": true
    }'
  ></ticket-builder>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

In this example, replace onLoadFunction with the name of the function you want to call when the component is loaded. The data attribute contains a JSON string that represents the ticket's structure and initial content. Adjust the JSON content according to the specific elements and layout you wish to create for your ticket.

Contributing

We welcome contributions to improve the Ticket Builder Application! Feel free to fork the repository, make changes, and submit pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.