yairEO

import {isString} from 'utility/types';

export const VERSION = 1; // current version of persisted data. if code change breaks persisted data, verison number should be bumped.
export const STORAGE_KEY_PREFIX = 'amdocs/catalog';

/**
 * checks arguments are as expected
 * @param {string} keyName
 * @param {string} type
 * @returns boolean

yairEO

body { 
  content: linear-gradient(transparent, transparent);
}

yairEO

Checkbox-Switch

CSS-only styles for transforming an innocent input of type checkbox to a beautiful switch
which so many desire to have in their UX. Automatically looks great in RTL direction.

See Demo

yairEO

const ActionCard = ({id, dataTestId, icon, label, onClick, dispatch}) => {
    const onActionCardClick = () => {
        dispatch((dispatch, getState) => onClick(dispatch, getState()));
    };

    return (
        <div id={id} data-test-id={dataTestId} className='action-card' onClick={onActionCardClick}>
            <Icon type={icon}/>
            <Truncate wrapper={(<Highlighter/>)}>{i18next.t(label)}</Truncate>
        </div>

yairEO

How to test a React hooks which is binding a global window/document event(s):

This is an easy approach for testing DOM events in hooks/components without actually emmitting/triggering any "fake" events, which is much easier:

1. In the tests file, create a dummy React component and call the hook. if the hook is returning something, then assign it to a varaible which should be defined from outside the component so it will be available for the tests cases.

yairEO

JSON.parse = (JP => (...args) => {
  try { return JP(...args) } catch{}
})(JSON.parse)

yairEO

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
const inc = async i => (await delay(500), ++i)

const foo = async () => {
  for(let i = 1; i <= 5; i = await inc(i)) 
    console.log(i) // prints 1, 2, 3, 4, 5 with a delay 
}

foo()

yairEO

// https://css-tricks.com/css-switch-case-conditions
// simplified version of my method:

.foo {
    --feature: 1; // 1 is "on", 0 is "off"
  
    animation: foo_styles 1s calc(-1s * (var(--feature) - 1)) paused;

    @keyframes foo_styles {
        0% {

yairEO

/***** ceil ******/

/* For a value between 0 - 1, where 1 is the maximum possible */
--ceil: clamp(0, calc((1 - var(--value)) * 100), 1);


/***** floor ******/

/* For a value between 0 - 1, where 1 is the maximum possible, use a value just a tiny bit below the maximum for the 
 math to work, so the output will be either positive or negative when magnified by a factor of 999999*/

yairEO

div {
    transform: translate(100px) var(--transform-y, );
}