timered-counter/dist/stories/timered-counter-string/index.stories.js

Make the value change more vivid and natural

import { setCustomElementsManifest, } from '@storybook/web-components';
import { expect } from '@storybook/test';
import { range } from 'remeda';
import { faker } from '@faker-js/faker';
import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
import { setNumberAdapter, } from '../../src/index.js';
import { setByAttr, setByProp } from '../utils/index.js';
import { valueChange } from '../story-parts/value-change.js';
import { animationEvents } from '../story-parts/animation-events.js';
import { animationOptions } from '../story-parts/animation-options.js';
import { styles } from '../story-parts/styles.js';
import { emoji } from '../story-parts/emoji.js';
setCustomElementsManifest(customElementsManifest);
//
// function setByAttr(element: TimeredCounter, attr: string, value: string) {
//   element.setAttribute(attr, value);
// }
//
// function setByProp(element: TimeredCounter, prop: string, value: any) {
//   // @ts-ignore
//   element[prop] = value.toString();
// }
function equal(counter, a, b) {
    a = counter.getAttribute('aria-label')?.replaceAll(/\s/g, ' ');
    return expect(a).toBe(b.toString());
}
const meta = {
    title: 'TimeredCounterString',
    component: 'timered-counter-string',
    tags: ['autodocs', 'timered-counter-string'],
    parameters: {
        controls: { expanded: true },
    },
    beforeEach: () => {
        setNumberAdapter('number');
    },
};
export default meta;
export const Basic = {
    args: {
        className: 'test-target',
        animationOptions: { duration: 100 },
    },
    async play(context) {
        const { canvasElement, step } = context;
        const counter = canvasElement.querySelector('.test-target');
        const list = [
            'Hello, World!',
            '你好，世界！',
            'こんにちは、世界！',
            '안녕하세요, 세계!',
            // 太长了
            // "Bonjour, le monde!",
            'Hallo, Welt!',
            'Ciao, mondo!',
            'Olá, mundo!',
            'Привет, мир!',
            // '¡Hola, mundo!',
            // 'Hej, världen!',
            // 'Merhaba, Dünya!',
            // 'مرحبا بالعالم!',
            // 'שלום, עולם!',
            // 'नमस्ते, दुनिया!',
            // 'سلام دنیا!',
        ];
        await step('Testing with attribute', async () => {
            await valueChange(context, { counter, list, setBy: setByAttr, equal });
        });
        await step('Testing with property', async () => {
            await valueChange(context, { counter, list, setBy: setByProp, equal });
        });
    },
};
export const Events = {
    args: {
        className: 'test-target',
        animationOptions: { duration: 100 },
    },
    async play(context) {
        const { canvasElement, step } = context;
        const counter = canvasElement.querySelector('.test-target');
        const list = range(0, 5).map(() => faker.lorem.word({ length: { min: 5, max: 10 } }));
        await step('Testing with attribute', () => animationEvents(context, { counter, list, setBy: setByAttr, equal }));
        await step('Testing with property', () => animationEvents(context, { counter, list, setBy: setByProp, equal }));
    },
};
export const AnimationOptions = {
    args: {
        className: 'test-target',
        animationOptions: { duration: 100 },
    },
    async play(context) {
        const { canvasElement, step } = context;
        const counter = canvasElement.querySelector('.test-target');
        await step('Testing with attribute', () => animationOptions(context, { counter, setBy: setByAttr }));
    },
};
export const Styles = {
    args: {
        className: 'test-target',
        animationOptions: { duration: 100 },
    },
    async play(context) {
        const { canvasElement, step } = context;
        const counter = canvasElement.querySelector('.test-target');
        await step('Testing with attribute', () => styles(context, { counter, setBy: setByAttr }));
        await step('Testing with property', () => styles(context, { counter, setBy: setByProp }));
    },
};
export const Emoji = {
    args: {
        className: 'test-target',
        animationOptions: { duration: 100 },
        // partsOptions: {
        //   fillChar: '1',
        // },
    },
    async play(context) {
        const { canvasElement, step } = context;
        const counter = canvasElement.querySelector('.test-target');
        const list = ['⌚', '↔️', '👩', '👩🏿', '🧑‍💻'];
        await step('Testing with attribute', () => emoji(context, { counter, list, setBy: setByAttr, equal }));
        await step('Testing with property', () => emoji(context, { counter, list, setBy: setByProp, equal }));
    },
};
//# sourceMappingURL=index.stories.js.map