0.20.0 • Published 3 months ago

@sixbell-telco/sdk v0.20.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 months ago

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!

sixbell-telco-sdk-banner

Pre-requirements

  • Angular 18.X.X or later

Available Components

General components

ComponentDescription
AccordionExpandable/collapsible content
Accordion ItemItem within an accordion
Audio PlayerAudio playback with track controls
AvatarUser avatar display
ButtonButtons for various actions
CardContainer for content and actions
CountdownCountdown timer
DropdownDropdown menu for actions or links
Dual ListDual list for selecting items
File UploaderUpload files
File DropzoneDrag and drop file upload
IconDisplay icons
LinkHyperlink component
ModalModal dialog
NotificationDisplay notifications
PaginatorPagination controls
Product CardDisplay product information
ProgressProgress bar
TabTabbed navigation
TableDisplay tabular data
ToastToast notifications
TooltipDisplay tooltips
WizardStep-by-step wizard

Forms specific components

ComponentDescription
CheckboxCheckbox input
ComboboxCombo box for selecting options
DatepickerDate selection input
Form ErrorDisplay form errors
InputText input field
RadioRadio button input
RangeRange slider input
SelectDropdown select input
SwitchToggle switch input
TextareaMulti-line text input
ToggleToggle 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

  1. Install dependencies:
npm i -D @sixbell-telco/sdk @tailwindcss/typography daisyui @midudev/tailwind-animations
  1. Configure Tailwind CSS (Tailwind guide)

  2. 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

  1. 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.

  1. 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.

  1. 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

  1. Create a folder (e.g., /assets/i18n) to store your translation files.
  2. In the folder, add separate JSON files for each language:
  • en.json (English)
  • es.json (Spanish)
  • pt.json (Portuguese)
  1. 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}}"
      }
    }
  }
}
  1. 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/']);
}
  1. 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],
      },
    }),
  ],
};
  1. 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.

0.20.0

3 months ago

0.19.1

4 months ago

0.19.0

4 months ago

0.18.0

4 months ago

0.17.0

4 months ago

0.16.0

4 months ago

0.15.0

4 months ago

0.14.1

4 months ago

0.14.0

4 months ago

0.13.0

4 months ago

0.12.0

4 months ago

0.11.0

4 months ago

0.10.1

4 months ago

0.10.0

4 months ago

0.9.0

5 months ago

0.8.0

5 months ago

0.7.3

5 months ago

0.7.2

5 months ago

0.7.1

5 months ago

0.71.0

5 months ago

0.7.0

5 months ago

0.6.1

6 months ago

0.6.0

6 months ago

0.5.3

6 months ago

0.5.2

6 months ago

0.5.1

6 months ago

0.5.0

6 months ago

0.4.1

6 months ago

0.4.0

6 months ago

0.3.0

6 months ago

0.2.1

7 months ago

0.2.0

7 months ago

0.1.9

8 months ago

0.1.8

8 months ago

0.1.7

8 months ago

0.1.6

8 months ago

0.1.5

8 months ago

0.1.4

8 months ago

0.1.3

8 months ago

0.1.0

8 months ago