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

1. Install dependencies:

npm i @sixbell-telco/sdk @tailwindcss/typography daisyui

2. Configure Tailwind CSS (Tailwind guide)

3. Add the provided configuration to your tailwind.config.js [See detailed config below]

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {
      colors: {
        'secondary-muted': 'rgba(var(--secondary-muted), <alpha-value>)',
        'secondary-muted-content': 'rgba(var(--secondary-muted-content), <alpha-value>)',
        'border-box': 'rgba(var(--border-box))',
        ring: 'rgba(var(--ring),  <alpha-value>)',
        'ring-accent': 'rgba(var(--ring-accent), <alpha-value>)',
        separator: 'rgba(var(--separtor), <alpha-value>)',
        'base-200-muted': 'rgba(var(--base-200-muted))',
      },
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
        body: ['Poppins', 'sans-serif'],
      },
      boxShadow: {
        primary: '0px 5px 5px 0px rgba(var(--shadow-primary))',
        secondary: '0px 2px 5px 0px rgba(var(--shadow-secondary))',
      },
      borderRadius: {
        'btn-xs': 'var(--rounded-btn-xs)',
        'btn-sm': 'var(--rounded-btn-sm)',
        'btn-md': 'var(--rounded-btn-md)',
        'btn-lg': 'var(--rounded-btn-lg)',
        'box-sm': 'var(--rounded-box-sm)',
        'box-md': 'var(--rounded-box-md)',
        'box-lg': 'var(--rounded-box-lg)',
      },
      fontWeight: {
        inherit: 'inherit',
      },
      transitionTimingFunction: {
        'ease-out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        'ease-in-and-out-back': 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
      },
      animation: {
        'slide-in': 'slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'slide-out': 'slideOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'toast-slide-out': 'toastSlideOut 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55)',
        'fade-in': 'fadeIn 1s',
        'fade-out': 'fadeOut 1s',
      },
    },
  },
  daisyui: {
    themes: [
      {
        vivid_elegance: {
          // Daisy UI theme variables
          primary: '#4DD6ED',
          'primary-content': '#FFFFFF',
          secondary: '#d9dadd',
          'secondary-content': '#414756',
          accent: '#4DD6ED',
          'accent-content': '#FFFFFF',
          neutral: '#414756',
          'neutral-content': '#FFFFFF',
          'base-100': '#FFFFFF',
          'base-200': '#f6f6f6',
          'base-300': '#4DBED1',
          'base-content': '#1F2937',
          info: '#4DD6ED',
          'info-content': '#FFFFFF',
          success: '#4DD192',
          'success-content': '#FFFFFF',
          warning: '#DBD46C',
          'warning-content': '#414756',
          error: '#E72F40',
          'error-content': '#FFFFFF',
          // Custom colors
          '--secondary-muted': '237, 237, 237',
          '--secondary-muted-content': '65, 71, 86',
          '--shadow-primary': '77, 190, 209,  0.7',
          '--shadow-secondary': '186, 185, 185, 0.40',
          '--separtor': '217, 217, 217',
          '--border-box': '65, 71,68, 0.2',
          '--input-border': '186, 185, 185',
          '--ring': '186, 185, 185',
          '--ring-accent': '77, 214, 237',
          '--base-200-muted': '250, 250, 250, 0.2',
          // Daisy UI utility variables
          '--rounded-box': '1rem', // border radius rounded-box utility class, used in card and other large boxes
          '--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element
          '--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
          '--animation-btn': '0.25s', // duration of animation when you click on button
          '--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
          '--btn-focus-scale': '0.95', // scale transform of button when you focus on it
          '--border-btn': '1px', // border width of buttons
          '--tab-border': '1px', // border width of tabs
          '--tab-radius': '0.5rem', // border radius of tabs
          // Custom utility variables
          '--rounded-btn-xs': '0.3rem', // 4.8px
          '--rounded-btn-sm': '0.5rem', // 8px
          '--rounded-btn-md': '0.813rem', // 13px
          '--rounded-btn-lg': '2.25rem', // 36px
          '--rounded-box-sm': '0.5rem', // 8px
          '--rounded-box-md': '0.813rem', // 13px
          '--rounded-box-lg': '2.25rem', // 36px
        },
      },
    ],
  },
  plugins: [require('@midudev/tailwind-animations'), require('@tailwindcss/typography'), require('daisyui')],
};

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</h2>
    <app-button label="Click me!" variant="primary" padding="normal" shape="round-sm" />
    </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 in 15th of November, 2024.