Dawuti

Dawuti is a package with different utils implemented by Workoholics development team. Here you can find individual utilities to resolve common funcionalities for different languages or technologies (Sass, JS, TS...).

Dawuti TS Utils

This library, developed by Workoholics, provides a collection of TypeScript utilities designed to tackle common tasks in our projects. Each method is standalone, ensuring flexibility and ease of use.

Dawuti TS Utils is organized by use cases. For instance, all functionalities related to the DOM are grouped under the domUtils namespace and implemented in the dom.utils.ts file.

[[TOC]]

Develop (Only WKHS DevTeam)

If you'd like to contribute, develop, or publish a new utility, detailed instructions are available in the repository's Wiki.

Installation NPM

Dawuti is an npm package available on the public npm registry (https://www.npmjs.com/). You can install the package by running the following command:

npm i dawuti-ts-utils

Usage

To use a specific functionality from the library, you can either import it individually or access it through the appropriate namespace.

Individually

import { slugify } from "dawuti-ts-utils";

const title = "Este es el título del post";
const slug = slugify(title);

Namespace

import { urlUtils } from "dawuti-ts-utils";

const title = "Este es el título del post";
const slug = urlUtils.slugify(title);

URL Utils

Utilities for handling URL-related tasks, such as parsing, formatting, and generating URLs with ease.

slugify

The slugify method takes a string and converts it into a URL-friendly "slug."

import { slugify } from "dawuti-ts-utils";

const title = "Este es el título del post";
const slug = slugify(title);

DOM Utils

The DOM Utils section is designed to house methods that simplify and solve common tasks related to working with the Document Object Model (DOM). These utilities provide convenient, reusable functions to manipulate, query, or interact with DOM elements, streamlining front-end development and improving code maintainability.

classList

The classList method generates a single string of class names based on a provided object and an optional string. It is designed to simplify the dynamic assignment of CSS classes in your application. Here's how it works:

Parameters:

• classes (object): A key-value pair where keys represent class names, and values are booleans. If the value is true, the corresponding class name will be included in the final string.
• stringClasses (optional string): A string of additional class names to append to the final result.

How it Works:

Iterates over the classes object to include class names where the value is true. Combines the filtered class names with any additional classes provided in stringClasses. Ensures the resulting string is clean by trimming unnecessary whitespace or leading spaces.

Returns:

A single, trimmed string containing all valid class names, ready to be used in a className attribute.

Example (TypeScript)

import { classList } from "dawuti-ts-utils";

const isPrimary = true;
const isWrapper = false;
const bg = 'dark';

const classes = classList({
    'hero': true,
    'hero--primary': isPrimary,
    'hero--wrapped': isWrapped,
    [`hero--background-${bg}`]
}, 'extra-class')

console.log(classes);

// Output: 'hero hero--primary hero--background-dark extra-class'

Example (React)

import { classList } from "dawuti-ts-utils";

const Comp = ({isPrimary, isWrapper, bg}: {isPrimary: boolean; isWrapped: boolean; bg: 'light' | 'dark'}) => {

    const classes

    return (
        <header className={
            classList({
                'hero': true,
                'hero--primary': isPrimary,
                'hero--wrapped': isWrapped,
                [`hero--background-${bg}`]
            },'extra-class')
        }>
            <h1>Hero</h1>
        </header>
    )
}

Scroll Utils

This module provides utility functions for handling various scrolling behaviors in a webpage.

getScrollPosition(scrollElement?: HTMLElement | Window): { x: number; y: number }

Retrieves the current scroll position of the given element or window.

Parameters:

• scrollElement (optional): The element or window to get the scroll position from (defaults to window).

Returns:

• An object containing:
  • x: Horizontal scroll position.
  • y: Vertical scroll position.

Example:

import { getScrollPosition } from "dawuti-ts-utils";

const position = getScrollPosition();
console.log(position.x, position.y);

scrollToElement(element: HTMLElement, offset?: number, behavior?: ScrollBehavior, scrollElement?: HTMLElement | Window)

Scrolls the page or a specific scroll container to a given element.

Parameters:

• element: The target element to scroll to.
• offset (optional, default: 0): Additional offset from the top.
• behavior (optional, default: "smooth"): Scroll behavior ("auto", "smooth", "instant").
• scrollElement (optional, default: window): The scroll container.

Example:

import { scrollToElement } from "dawuti-ts-utils";

scrollToElement(document.getElementById("target"), 50, "smooth");

isScrollingDown(scrollElement?: HTMLElement | Window, lastScrollTop: number): { scrollingDown: boolean; lastScrollTop: number }

Checks if the user is currently scrolling down.

Parameters:

• scrollElement (optional): The element or window to track scrolling (defaults to window).
• lastScrollTop: The last known scroll position.

Returns:

• An object containing:
  • scrollingDown: Boolean indicating whether scrolling is downward.
  • lastScrollTop: The updated scroll position.

Example:

import { isScrollingDown } from "dawuti-ts-utils";

let lastScrollTop = 0;
window.addEventListener("scroll", () => {
  const { scrollingDown, lastScrollTop: newScrollTop } = isScrollingDown(
    window,
    lastScrollTop
  );
  console.log(scrollingDown ? "Scrolling Down" : "Scrolling Up");
  lastScrollTop = newScrollTop;
});

getScrollProgress(scrollElement?: HTMLElement | Window): number

Calculates the scroll progress as a percentage.

Parameters:

• scrollElement (optional): The element or window to track scrolling (defaults to window).

Returns:

• A number representing the scroll progress percentage (0 to 100).

Example:

import { getScrollProgress } from "dawuti-ts-utils";

window.addEventListener("scroll", () => {
  console.log(`Scroll Progress: ${getScrollProgress()}%`);
});

Agent Utils

getBrowserAgent(): BrowserAgent

Detects the user's browser based on the navigator.userAgent string.

Returns:

• A string representing the browser type, which can be one of the following: "safari", "firefox", "chrome", "edge", "opera", "ie", "unknown"

Example:

import { getBrowserAgent } from "dawuti-ts-utils";

const browser = getBrowserAgent();
console.log(`You are using: ${browser}`);

Count utils

startCounter(target: number, duration: number, setCount: (updateFn: (prev: number) => number) => void): number

Animates a counter from 0 to target over a specified duration.

Parameters:

• target: The final count value.
• duration: Duration in milliseconds for the count animation.
• setCount: A function that updates the counter value.

Returns:

• The interval ID, which can be used to clear the interval if needed.

Example (React):

const [count, setCount] = useState(0);
const interval = startCounter(100, 2000, setCount);

Example (TypeScript):

import { startCounter } from "dawuti-ts-utils";

let count = 0;

const setCount = (updateFn: (prev: number) => number) => {
  count = updateFn(count);
  console.log(Math.floor(count));
};

startCounter(100, 2000, setCount);

Date Utils

🚧 Under construction 🚧

Format Utils

🚧 Under construction 🚧