Sixbell Telco SDK

We are thrilled to have you here. This SDK is designed to provide you with a comprehensive set of UI components to accelerate your development process. Whether you are building a small project or a large-scale application, our components are crafted to be flexible, customizable, and easy to integrate.

Explore the documentation, try out the examples, and start building amazing applications with Sixbell Telco SDK today!

Happy coding!

Pre-requirements

Angular 18.X.X or later

Available Components

General components

Component	Description
Accordion	Expandable/collapsible content
Accordion Item	Item within an accordion
Audio Player	Audio playback with track controls
Avatar	User avatar display
Button	Buttons for various actions
Card	Container for content and actions
Countdown	Countdown timer
Dropdown	Dropdown menu for actions or links
Dual List	Dual list for selecting items
File Uploader	Upload files
File Dropzone	Drag and drop file upload
Icon	Display icons
Link	Hyperlink component
Modal	Modal dialog
Notification	Display notifications
Paginator	Pagination controls
Product Card	Display product information
Progress	Progress bar
Tab	Tabbed navigation
Table	Display tabular data
Toast	Toast notifications
Tooltip	Display tooltips
Wizard	Step-by-step wizard

Forms specific components

Component	Description
Checkbox	Checkbox input
Combobox	Combo box for selecting options
Datepicker	Date selection input
Form Error	Display form errors
Input	Text input field
Radio	Radio button input
Range	Range slider input
Select	Dropdown select input
Switch	Toggle switch input
Textarea	Multi-line text input
Toggle	Toggle button input

Setup

Quick Setup (Recommended)

We provide a CLI tool for automatic setup:

npx @sixbell-telco/cli init

This will automatically:

Install all necessary dependencies
Configure Tailwind CSS and Daisy UI
Set up required theme configurations

Note: The CLI tool is currently a work in progress and is not yet available. Coming soon!

Manual Setup

Install dependencies:

npm i -D @sixbell-telco/sdk @tailwindcss/typography daisyui @midudev/tailwind-animations

Configure Tailwind CSS (Tailwind guide)
Add the provided configuration to gobla stylesheet where you configured tailwind [See detailed config below]

@import 'node_modules/@sixbell-telco/sdk/_index.scss';

⚠️ IMPORTANT: Make sure to import the _index.css before the tailwind import.

⚠️ IMPORTANT: The @source decorator indicates where tailwind should look for classes.

With that configuration the library custom CSS will be loaded

Microfrontend Configuration (Required for Microfrontends Only)

Add the following path mapping to your tsconfig.json file under compilerOptions.paths:

"@sixbell-telco/sdk/*": ["./node_modules/@sixbell-telco/sdk/*"]

Complete example of a tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@sixbell-telco/sdk/*": ["./node_modules/@sixbell-telco/sdk/*"]
      // ... other path mappings
    }
    // ... other compiler options
  }
}

This configuration ensures proper module resolution in microfrontend architectures.

VSCode Settings (Optional)

For VSCode users, it is recommended to install the official Tailwind CSS extension and add the following to your settings.json file:

  "editor.quickSuggestions": {
    "strings": "on"
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", "classes"],
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["cn\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]

These settings improve your development experience:

editor.quickSuggestions: Enables autosuggestions within string literals
files.associations: Ensures CSS files are treated as Tailwind CSS files
tailwindCSS.classAttributes: Adds support for Angular-specific class attributes
tailwindCSS.experimental.classRegex: Enables Tailwind intellisense in utility functions like cva(), cx(), and cn() that are used for conditional class name composition

With these settings, VSCode will provide class autocompletion for the library's custom attributes and utility functions.

Translations

Before setting up translations, first install the necessary packages:

npm install @ngx-translate/core @ngx-translate/http-loader ngx-translate-multi-http-loader@18.2.0

Setup

Create a folder (e.g., /assets/i18n) to store your translation files.
In the folder, add separate JSON files for each language:

en.json (English)
es.json (Spanish)
pt.json (Portuguese)

In each file, include the corresponding translations for file uploader, for example:

English

{
  "sdk": {
    "fileUpload": {
      "dropzone": {
        "selectPrompt": "Click to select files or drag and drop here",
        "maxSizeLabel": "Max size:",
        "allowedTypesLabel": "Allowed types:",
        "invalidFileType": "Invalid file type",
        "fileTooLarge": "File too large",
        "fileCounter": "{{current}} of {{max}} files",
        "maxFilesExceeded": "Maximum {{max}} file(s) allowed",
        "noValidFiles": "No valid files selected",
        "fileActions": {
          "play": "Play audio",
          "pause": "Pause audio",
          "download": "Download file",
          "remove": "Remove file"
        }
      },
      "fileUploader": {
        "allowedTypesLabel": "Allowed types:"
      }
    },
    "audioPlayer": {
      "trackListTitle": "Tracks",
      "trackInfo": {
        "title": "No title",
        "description": "No description"
      }
    },
    "countdown": {
      "days": "Days",
      "hours": "Hours",
      "minutes": "Minutes",
      "seconds": "Seconds"
    },
    "dualList": {
      "searchPlaceHolder": "Search"
    },
    "combobox": {
      "noResultsFound": "No results found",
      "loading": "Loading..."
    },
    "formErrors": {
      "validation": {
        "required": "*This field is required",
        "email": "*Please enter a valid email address",
        "minLength": "*Must be at least {{min}} characters",
        "maxLength": "*Must be no more than {{max}} characters",
        "min": "*Value must be at least {{min}}",
        "max": "*Value must be no more than {{max}}",
        "pattern": "*Invalid format",
        "unhandledError": "*Unhandled error"
      }
    },
    "textarea": {
      "maxCharacters": "{{current}} of {{max}} characters"
    },
    "table": {
      "entriesByPage": "Entries per page",
      "totalEntries": "{{total}} entries",
      "entriesRange": "{{range}} of {{total}} entries",
      "emptyListMessage": "No items to show"
    },
    "wizard": {
      "wizardMarker": {
        "completed": "Completed",
        "inProgress": "In progress",
        "pending": "Pending"
      },
      "wizardWrapper": {
        "back": "Back",
        "previous": "Previous",
        "end": "End",
        "next": "Next",
        "step": "Step {{index}}"
      }
    }
  }
}

Spanish

{
  "sdk": {
    "fileUpload": {
      "dropzone": {
        "selectPrompt": "Haz clic para seleccionar archivos o arrastra y suelta aquí",
        "maxSizeLabel": "Tamaño máximo:",
        "allowedTypesLabel": "Tipos permitidos:",
        "invalidFileType": "Tipo de archivo no válido",
        "fileTooLarge": "Archivo demasiado grande",
        "fileCounter": "{{current}} de {{max}} archivos",
        "maxFilesExceeded": "Máximo de {{max}} archivo(s) permitido",
        "noValidFiles": "No se han seleccionado archivos válidos",
        "fileActions": {
          "play": "Reproducir audio",
          "pause": "Pausar audio",
          "download": "Descargar archivo",
          "remove": "Quitar archivo"
        }
      },
      "fileUploader": {
        "allowTypesLabel": "Tipos permitidos:"
      }
    },
    "audioPlayer": {
      "trackListTitle": "Pistas",
      "trackInfo": {
        "title": "Sin título",
        "description": "Sin descripción"
      }
    },
    "countdown": {
      "days": "Días",
      "hours": "Horas",
      "minutes": "Minutos",
      "seconds": "Segundos"
    },
    "dualList": {
      "searchPlaceHolder": "Buscar"
    },
    "combobox": {
      "noResultsFound": "No se encontraron resultados",
      "loading": "Cargando..."
    },
    "formErrors": {
      "validation": {
        "required": "*Este campo es obligatorio",
        "email": "*Por favor ingresa una dirección de correo válida",
        "minLength": "*Debe tener al menos {{min}} caracteres",
        "maxLength": "*No debe tener más de {{max}} caracteres",
        "min": "*El valor debe ser al menos {{min}}",
        "max": "*El valor no debe superar {{max}}",
        "pattern": "*Formato inválido",
        "unhandledError": "*Error inesperado"
      }
    },
    "textarea": {
      "maxCharacters": "{{current}} de {{max}} caracteres"
    },
    "table": {
      "entriesByPage": "Entradas por página",
      "totalEntries": "{{total}} entradas",
      "entriesRange": "{{range}} de {{total}} entradas",
      "emptyListMessage": "No hay elementos para mostrar"
    },
    "wizard": {
      "wizardMarker": {
        "completed": "Completado",
        "inProgress": "En progreso",
        "pending": "Pendiente"
      },
      "wizardWrapper": {
        "back": "Atrás",
        "previous": "Anterior",
        "end": "Finalizar",
        "next": "Siguiente",
        "step": "Paso {{index}}"
      }
    }
  }
}

Portuguese

{
  "sdk": {
    "fileUpload": {
      "dropzone": {
        "selectPrompt": "Haz clic para seleccionar archivos o arrastra y suelta aquí",
        "maxSizeLabel": "Tamaño máximo:",
        "allowedTypesLabel": "Tipos permitidos:",
        "invalidFileType": "Tipo de archivo no válido",
        "fileTooLarge": "Archivo demasiado grande",
        "fileCounter": "{{current}} de {{max}} archivos",
        "maxFilesExceeded": "Máximo de {{max}} archivo(s) permitido",
        "noValidFiles": "No se han seleccionado archivos válidos",
        "fileActions": {
          "play": "Reproducir audio",
          "pause": "Pausar audio",
          "download": "Descargar archivo",
          "remove": "Quitar archivo"
        }
      },
      "fileUploader": {
        "allowedTypesLabel": "Tipos permitidos:"
      }
    },
    "audioPlayer": {
      "trackListTitle": "Trilhas",
      "trackInfo": {
        "title": "Sem título",
        "description": "Sem descrição"
      }
    },
    "countdown": {
      "days": "Dias",
      "hours": "Horas",
      "minutes": "Minutos",
      "seconds": "Segundos"
    },
    "dualList": {
      "searchPlaceHolder": "Pesquisar"
    },
    "combobox": {
      "noResultsFound": "Nenhum resultado encontrado",
      "loading": "Carregando..."
    },
    "formErrors": {
      "validation": {
        "required": "*Este campo é obrigatório",
        "email": "*Por favor, insira um endereço de e-mail válido",
        "minLength": "*Deve ter pelo menos {{min}} caracteres",
        "maxLength": "*Deve ter no máximo {{max}} caracteres",
        "min": "*O valor deve ser de pelo menos {{min}}",
        "max": "*O valor deve ser de no máximo {{max}}",
        "pattern": "*Formato inválido",
        "unhandledError": "*Erro não tratado"
      }
    },
    "textarea": {
      "maxCharacters": "{{current}} de {{max}} caracteres"
    },
    "table": {
      "entriesByPage": "Entradas por página",
      "totalEntries": "{{total}} entradas",
      "entriesRange": "{{range}} de {{total}} entradas",
      "emptyListMessage": "Nenhum item para mostrar"
    },
    "wizard": {
      "wizardMarker": {
        "completed": "Concluído",
        "inProgress": "Em andamento",
        "pending": "Pendente"
      },
      "wizardWrapper": {
        "back": "Voltar",
        "previous": "Anterior",
        "end": "Fim",
        "next": "Próximo",
        "step": "Etapa {{index}}"
      }
    }
  }
}

Configure your translation loader. If you are using Angular i18n, ngx-translate, etc., first import in your app.config.ts:

import { HttpBackend } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { provideTranslateService, TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';

export function HttpLoaderFactory(_httpBackend: HttpBackend) {
  return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/']);
}

Then, add the provider to your application configuration:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideTranslateService({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpBackend],
      },
    }),
  ],
};

Finally, set up the basic configuration in your app.component to load the translations:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    this.translate.addLangs(['en', 'es', 'pt']);
    this.translate.setDefaultLang('en');
    this.translate.use('en');
  }
}

With this configuration, all the translations related to the SDK will be loaded.

Usage Example

Here's a basic example of using a button component:

// app.component.ts
import { ButtonComponent } from '@sixbell-telco/sdk/components/button';

@Component({
  imports: [ButtonComponent],
  template: `
    <div>
      <h1>Awesome button</h1>
    	  <st-button variant="primary">Click me!</st-button>
    </div>
  `
})

Documentation

For detailed component documentation, visit our Storybook

Note: Our Storybook documentation is currently a work in progress and will be available soon!

Last update

This file was last updated on March 20th, 2025.