@fduenascoink/ui-sdk v18.0.4

Getting Started with @coink/ui-sdk

Prerequisites

Before installing @coink/ui-sdk, make sure you have the following dependencies installed and configured:

• Angular CDK: Ensure you have Angular CDK installed.
• Tailwind CSS v3: Tailwind must be installed and properly configured in your project.

Installation

Install the library via npm:

npm install @coink/ui-sdk

Tailwind Configuration

For detailed instructions on setting up Tailwind CSS in an Angular project, refer to the official guide: Tailwind CSS with Angular.

Add the preset from @coink/ui-sdk to your Tailwind configuration file (tailwind.config.js) and ensure you include the necessary paths in the content property:

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js",
    "./node_modules/@fduenascoink/**/*.mjs"
  ],
  presets: [require("@coink/ui-sdk/preset")],
  // other configurations...
};

Configuring Colors

Use the setColors function from @coink/ui-sdk/utils to configure the theme colors. It is recommended to call this function in the Angular app initialization, but it can be used anywhere in the application:

import { setColors } from "@coink/ui-sdk/utils";

setColors({
  primary: { value: "#ff5722", contrast: "#FFFFFF" },
  secondary: { value: "#2196f3", contrast: "#FFFFFF" },
  error: { value: "#2196f3", contrast: "#FFFFFF" }
});

Importing Angular CDK Overlay Styles

Ensure you have imported the required CSS for Angular CDK overlays in your global styles:

@import "@angular/cdk/overlay-prebuilt.css";

Custom Error Messages

To configure custom error messages, use the provideCoinkUiErrorMessages function in the Angular ApplicationConfig:

import { ApplicationConfig } from "@angular/core";
import { provideCoinkUiErrorMessages } from "@coink/ui-sdk";

const errors = {
  required: () => "This field is required",
  email: () => "Please enter a valid email address",
  minlength: (params: Record<string, any>) => "La cantidad mínima de caracteres es " + params["requiredLength"],
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideCoinkUiErrorMessages(errors),
  ],
};

Using Toast Notifications

To use toast notifications, follow this setup:

import { toast, NgxSonnerToaster } from "@coink/ui-sdk";

@Component({
  selector: "app-root",
  imports: [NgxSonnerToaster],
  template: `
    <ngx-sonner-toaster />
    <button (click)="toast('My first toast')">Give me a toast</button>
  `,
})
export class AppComponent {
  protected readonly toast = toast;
}

Your @coink/ui-sdk is now ready to use! 🎉