@alfalab/core-components-page-indicator 1.0.0

package/moderncssm/components/runner/static-inverted.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+    --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
+    --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
+}
+
+.pageIndicator {
+    background: var(--page-indicator-color-static-inverted);
+}
+
+.element {
+    background: var(--page-indicator-active-color-static-inverted);
+}

package/moderncssm/components/runner/static.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+    --page-indicator-color-static: var(--color-static-neutral-translucent-300);
+    --page-indicator-active-color-static: var(--color-static-neutral-1300);
+
+    /* static-inverted */
+}
+
+.pageIndicator {
+    background: var(--page-indicator-color-static);
+}
+
+.element {
+    background: var(--page-indicator-active-color-static);
+}

package/moderncssm/components/step/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PageIndicatorStepProps } from "../../types";
+declare const PageIndicatorStep: React.FC<PageIndicatorStepProps>;
+export { PageIndicatorStep };

package/moderncssm/components/step/Component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import cn from 'classnames';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+import staticColors from './static.module.css';
+import staticInvertedColors from './static-inverted.module.css';
+
+const colorsStyle = {
+    inverted: invertedColors,
+    default: defaultColors,
+    static: staticColors,
+    'static-inverted': staticInvertedColors,
+};
+const PageIndicatorStep = ({ activeElement, elements: count = 10, size = 4, gap = 4, colors = 'default', }) => (React.createElement("ol", { className: styles.pageIndicator, style: { height: size, gap } }, Array.from({ length: count }, (_, index) => (React.createElement("li", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, {
+        [colorsStyle[colors].active]: index === activeElement,
+    }) })))));
+
+export { PageIndicatorStep };

package/moderncssm/components/step/default.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+    --page-indicator-color: var(--color-light-neutral-translucent-300);
+    --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color);
+    }

package/moderncssm/components/step/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/step/index.js

@@ -0,0 +1 @@
+export { PageIndicatorStep } from './Component.js';

package/moderncssm/components/step/index.module.css

@@ -0,0 +1,27 @@
+/* */
+
+:root {
+    --page-indicator-animation-duration: 0.2s;
+    --page-indicator-animation-timing-function: ease-in-out;
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.pageIndicator {
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.element {
+    list-style-type: none;
+    flex-grow: 1;
+    transition: backgroud var(--page-indicator-animation-duration)
+        var(--page-indicator-animation-timing-function);
+}

package/moderncssm/components/step/inverted.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+    --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
+    --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
+
+    /* static */
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color-inverted)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color-inverted);
+    }

package/moderncssm/components/step/static-inverted.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+    --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
+    --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
+}
+
+.element {
+    background: var(--page-indicator-color-static-inverted)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color-static-inverted);
+    }

package/moderncssm/components/step/static.module.css

@@ -0,0 +1,22 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+    --page-indicator-color-static: var(--color-static-neutral-translucent-300);
+    --page-indicator-active-color-static: var(--color-static-neutral-1300);
+
+    /* static-inverted */
+}
+
+.element {
+    background: var(--page-indicator-color-static)
+}
+
+.element.active {
+        background: var(--page-indicator-active-color-static);
+    }

package/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/index.js

@@ -0,0 +1,4 @@
+export { PageIndicatorBullet } from './components/bullet/Component.js';
+export { PageIndicatorDynamic } from './components/dynamic/Component.js';
+export { PageIndicatorRunner } from './components/runner/Component.js';
+export { PageIndicatorStep } from './components/step/Component.js';

package/moderncssm/types.d.ts

@@ -0,0 +1,129 @@
+interface PageIndicatorDynamicProps {
+    /**
+     * Индекс выбранного элемента по-умолчанию
+     * @default 0
+     */
+    defaultActiveElement?: number;
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement?: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 8
+     */
+    size?: number;
+    /**
+     * Ширина выбранного элемента
+     * @default size * 7
+     */
+    activeElementWidth?: number;
+    /**
+     * Расстояние между элементами
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Продолжительность прогресса выбранного элемента, в миллисекундах
+     * @default 3000
+     */
+    duration?: (activeElement: number) => number | number;
+    /**
+     * Обработчик при изменении выбранного элемента. Вызывается при заполнении прогресса предыдущего выбранного элемента
+     */
+    onActiveElementChange?: (nextActiveElement: number) => void;
+    /**
+     * Зациклен ли обход элементов
+     * @default false
+     */
+    cycle?: boolean;
+    /**
+     * Активен ли прогресс выбранного элемента
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+interface PageIndicatorBulletProps {
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 8
+     */
+    size?: number;
+    /**
+     * Расстояние между элементами
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+interface PageIndicatorStepProps {
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 4
+     */
+    size?: number;
+    /**
+     * Расстояние между элементами
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+interface PageIndicatorRunnerProps {
+    /**
+     * Индекс выбранного элемента
+     */
+    activeElement: number;
+    /**
+     * Количество элементов (минимум 2)
+     * @default 10
+     */
+    elements?: number;
+    /**
+     * Высота компонента
+     * @default 4
+     */
+    size?: number;
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
+}
+export { PageIndicatorDynamicProps, PageIndicatorBulletProps, PageIndicatorStepProps, PageIndicatorRunnerProps };

package/moderncssm/types.js

@@ -0,0 +1 @@
+

package/moderncssm/vars.css

@@ -0,0 +1,12 @@
+/* */
+
+:root {
+
+    /* default */
+
+    /* inverted */
+
+    /* static */
+
+    /* static-inverted */
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@alfalab/core-components-page-indicator",
+    "version": "1.0.0",
+    "description": "PageIndicator component",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-shared": "^0.16.0",
+        "classnames": "^2.5.1",
+        "react-transition-group": "^4.4.5",
+        "tslib": "^2.4.0"
+    },
+    "devDependencies": {
+        "@types/react-transition-group": "^4.4.5"
+    },
+    "themesVersion": "13.7.1",
+    "varsVersion": "9.18.0",
+    "sideEffects": false
+}

package/src/Component.tsx

@@ -0,0 +1,6 @@
+export { PageIndicatorBullet } from './components/bullet';
+export { PageIndicatorDynamic } from './components/dynamic';
+export { PageIndicatorRunner } from './components/runner';
+export { PageIndicatorStep } from './components/step';
+
+export * from './types';

package/src/components/bullet/Component.tsx

@@ -0,0 +1,84 @@
+import React, { createRef, FC, useMemo } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import cn from 'classnames';
+
+import { PageIndicatorBulletProps } from '../../types';
+
+import { calcParams } from './utils';
+
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+import staticColors from './static.module.css';
+import staticInvertedColors from './static-inverted.module.css';
+
+const colorsStyle = {
+    inverted: invertedColors,
+    default: defaultColors,
+    static: staticColors,
+    'static-inverted': staticInvertedColors,
+} as const;
+
+const transitionClassess = {} as const;
+
+export const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({
+    elements: count = 10,
+    activeElement: activeElementIndex,
+    size = 8,
+    gap = 8,
+    colors = 'default',
+}) => {
+    const refs = useMemo(() => Array.from({ length: count }, createRef<HTMLLIElement>), [count]);
+    const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =
+        useMemo(
+            () => calcParams(size, gap, activeElementIndex, count),
+            [activeElementIndex, count, gap, size],
+        );
+
+    return (
+        <div className={cn(styles.pageIndicator, styles.bullet)} style={{ height, width }}>
+            <ol
+                className={styles.elementsList}
+                style={{ gap, transform: `translate(${offset}px)` }}
+            >
+                {refs.map((ref, index) => {
+                    const sizeOfElement = elementSize(index);
+                    const isActive = activeElementIndex === index;
+                    const isVisible =
+                        firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
+                    const addListTransitionEndListener = (done: () => void) => {
+                        const parentElement = ref.current?.parentElement;
+
+                        parentElement?.addEventListener('transitionend', done, { once: true });
+                    };
+
+                    return (
+                        <CSSTransition
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                            nodeRef={ref}
+                            addEndListener={addListTransitionEndListener}
+                            in={isVisible}
+                            // passed empty object so any classes aren't added
+                            classNames={transitionClassess}
+                        >
+                            {(status) => (
+                                <li
+                                    ref={ref}
+                                    data-index={index}
+                                    className={cn(
+                                        styles.element,
+                                        colorsStyle[colors].element,
+                                        { [colorsStyle[colors].active]: isActive },
+                                        styles[status],
+                                    )}
+                                    style={{ height: sizeOfElement, width: sizeOfElement }}
+                                />
+                            )}
+                        </CSSTransition>
+                    );
+                })}
+            </ol>
+        </div>
+    );
+};

package/src/components/bullet/default.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color);
+
+    &.active {
+        background: var(--page-indicator-active-color);
+    }
+}

package/src/components/bullet/index.module.css

@@ -0,0 +1,42 @@
+@import '../../vars.css';
+
+.pageIndicator {
+    &.bullet {
+        overflow: hidden;
+    }
+}
+
+.elementsList {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    will-change: transform;
+    transition: transform var(--page-indicator-animation-duration)
+        var(--page-indicator-animation-timing-function);
+}
+
+.element {
+    list-style-type: none;
+    flex-shrink: 0;
+    transition: background var(--page-indicator-animation-duration)
+        var(--page-indicator-animation-timing-function);
+    border-radius: var(--border-radius-circle);
+
+    &.entering {
+        opacity: 0;
+    }
+    &.entered {
+        opacity: 1;
+        transition: background var(--page-indicator-animation-duration)
+                var(--page-indicator-animation-timing-function),
+            opacity var(--page-indicator-animation-duration)
+                var(--page-indicator-animation-timing-function);
+    }
+    &.exiting {
+        opacity: 0;
+    }
+    &.exited {
+        opacity: 0;
+    }
+}

package/src/components/bullet/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/bullet/inverted.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-inverted);
+
+    &.active {
+        background: var(--page-indicator-active-color-inverted);
+    }
+}

package/src/components/bullet/static-inverted.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-static-inverted);
+
+    &.active {
+        background: var(--page-indicator-active-color-static-inverted);
+    }
+}

package/src/components/bullet/static.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.element {
+    background: var(--page-indicator-color-static);
+
+    &.active {
+        background: var(--page-indicator-active-color-static);
+    }
+}

package/src/components/bullet/utils/index.ts

@@ -0,0 +1 @@
+export * from './utils';