@lumx/core 3.20.1-alpha.2 → 3.20.1-alpha.21

package/CONTRIBUTING.md

@@ -4,7 +4,7 @@ We'd love for you to contribute to our source code and to make it even better th
 
 ## Getting the source code
 
-To be able to contribute, you will have to use the global LumX package from our [GitHub repository](https://github.com/lumapps/design-system). You won't be able to contribute from the distributed packages `@lumx/<angularjs|react>`, so be sure to clone the repository before starting contributing:
+To be able to contribute, you will have to use the global LumX package from our [GitHub repository](https://github.com/lumapps/design-system). You won't be able to contribute from the distributed packages, so be sure to clone the repository before starting contributing:
 
 ```bash
 git clone git@github.com:lumapps/design-system.git
@@ -25,10 +25,6 @@ Here are the guidelines we'd like you to follow.
 -   [Coding rules](#coding-rules)
 -   [Git commit guidelines](#git-commit-guidelines)
 
-## <a name="code-of-conduct"></a> Code of Conduct
-
-As heavy users of [AngularJS](https://github.com/angular/angular.js) and [React](https://github.com/facebook/react/), we encourage you to read and follow the [AngularJS Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md) and the [React Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md).
-
 ## <a name="got-a-question-or-a-problem-"></a> Got a question or a problem?
 
 If you have questions about how to use LumX, please direct these to [StackOverflow](http://stackoverflow.com/questions/tagged/LumX).

package/package.json

@@ -6,7 +6,6 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^3.20.1-alpha.2",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -34,18 +33,15 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.2",
+    "version": "3.20.1-alpha.21",
     "devDependencies": {
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.4",
-        "@testing-library/dom": "^9.3.4",
-        "@testing-library/jest-dom": "^5.16.4",
         "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",
-        "react": "^17.0.2",
         "rollup": "^2.79.1",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -53,9 +49,5 @@
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",
         "version-changelog": "^3.1.1"
-    },
-    "peerDependencies": {
-        "moment": ">= 2",
-        "moment-range": "^4.0.2"
     }
 }

package/js/components/Icon/Stories.js

@@ -1,40 +0,0 @@
-import { mdiEmail } from '@lumx/icons';
-
-import { Size } from '@lumx/core/js/constants';
-import { iconArgType } from '@lumx/core/stories/controls/icons';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { Icon } from '.';
-
-const iconSizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
-export default {
-    argTypes: {
-        icon: iconArgType,
-        hasShape: { control: 'boolean' },
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-    },
-    args: Icon.defaultProps,
-};
-
-export const SizeAndShape = {
-    args: {
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-    getDecorators: ({ withCombinations }) => [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: withUndefined(iconSizes) },
-                rows: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-    ],
-};

package/js/components/Icon/Tests.tsx

@@ -1,120 +0,0 @@
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/core/js/constants';
-
-import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
-import { IconProps, Icon } from '.';
-
-const CLASSNAME = Icon.className as string;
-
-type SetupProps = Partial<IconProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper, render }: any = {}) => {
-    const props: IconProps = {
-        icon: 'mdiPlus',
-        ...propsOverride,
-    };
-
-    render(props, { wrapper });
-
-    const i = getByClassName(document.body, CLASSNAME);
-    const svg = getByTagName(i, 'svg');
-    const path = getByTagName(svg, 'path');
-
-    return { i, svg, path, props };
-};
-
-export default (render: any) => {
-    describe(`<${Icon.displayName}>`, () => {
-        describe('Props', () => {
-            it('should render default', () => {
-                const { i, svg, path, props } = setup({}, { render });
-                expect(i).toBeInTheDocument();
-                expect(i).toHaveClass(CLASSNAME);
-                expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
-
-                expect(svg).toBeInTheDocument();
-                expect(svg).toHaveAttribute('aria-hidden', 'true');
-                expect(svg).not.toHaveAttribute('role');
-
-                expect(path).toBeInTheDocument();
-                expect(path).toHaveAttribute('d', props.icon);
-            });
-
-            it('should adapt svg with alternate text', () => {
-                const { svg, props } = setup({ alt: 'Alternate text' }, { render });
-                expect(svg).toHaveAttribute('aria-label', props.alt);
-                expect(svg).not.toHaveAttribute('aria-hidden');
-                expect(svg).toHaveAttribute('role');
-            });
-
-            describe('size', () => {
-                it('should render size', () => {
-                    const { i } = setup({ size: Size.s }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-s');
-                });
-
-                it('should adapt xxs size with hasShape', () => {
-                    const { i } = setup({ hasShape: true, size: Size.xxs }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-s');
-                });
-
-                it('should adapt xs size with hasShape', () => {
-                    const { i } = setup({ hasShape: true, size: Size.xs }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-s');
-                });
-
-                it('should adapt xxl size with hasShape', () => {
-                    const { i } = setup({ hasShape: true, size: Size.xxl }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-xl');
-                });
-
-                it('should add default size with hasShape', () => {
-                    const { i } = setup({ hasShape: true }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-m');
-                });
-            });
-
-            describe('color', () => {
-                it('should render color and color variant', () => {
-                    const { i } = setup(
-                        {
-                            color: ColorPalette.primary,
-                            colorVariant: ColorVariant.D1,
-                        },
-                        { render },
-                    );
-                    expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
-                });
-
-                it('should improve yellow icon color contrast with alert circle icon', () => {
-                    const { i } = setup(
-                        {
-                            color: ColorPalette.yellow,
-                            icon: mdiAlertCircle,
-                        },
-                        { render },
-                    );
-                    expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
-                });
-
-                it('should set a default color on dark theme', () => {
-                    const { i } = setup({ theme: Theme.dark }, { render });
-                    expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
-                });
-
-                it('should set a default color on has shape', () => {
-                    const { i } = setup({ hasShape: true }, { render });
-                    expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
-                });
-
-                it('should set a default color variant on has shape & dark color', () => {
-                    const { i } = setup({ color: ColorPalette.dark, hasShape: true }, { render });
-                    expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
-                });
-            });
-        });
-    });
-};

package/js/components/Icon/index.tsx

@@ -1,134 +0,0 @@
-import classNames from 'classnames';
-
-import { mdiAlertCircle } from '@lumx/icons';
-
-import { GenericProps, HasTheme } from '../../types';
-import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '../../utils/className';
-import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '../../constants';
-
-export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-
-/**
- * Defines the props of the component.
- */
-export interface IconProps extends GenericProps, HasTheme {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Whether the icon has a shape. */
-    hasShape?: boolean;
-    /**
-     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
-     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-     */
-    icon: string;
-    /** Size variant. */
-    size?: IconSizes;
-    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
-    alt?: string;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Icon';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<IconProps> = {};
-
-/**
- * Icon component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Icon = (props: IconProps) => {
-    const {
-        className,
-        color: propColor,
-        colorVariant: propColorVariant,
-        hasShape,
-        icon,
-        size,
-        theme,
-        alt,
-        ref,
-        ...forwardedProps
-    } = props;
-
-    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-
-    // Color
-    let iconColor = color;
-    if (!iconColor && (hasShape || theme)) {
-        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-    }
-
-    // Color variant
-    let iconColorVariant = colorVariant;
-    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
-        iconColorVariant = 'L2';
-    }
-
-    // Size
-    let iconSize = size;
-    if (size && hasShape) {
-        if (size === Size.xxs || size === Size.xs) {
-            iconSize = Size.s;
-        } else if (size === Size.xxl) {
-            iconSize = Size.xl;
-        }
-    } else if (hasShape) {
-        iconSize = Size.m;
-    }
-
-    return (
-        <i
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    color: iconColor,
-                    colorVariant: iconColorVariant,
-                    hasShape,
-                    prefix: CLASSNAME,
-                    theme,
-                    size: iconSize,
-                }),
-                !hasShape && `${CLASSNAME}--no-shape`,
-                !hasShape &&
-                    iconColor === ColorPalette.yellow &&
-                    icon === mdiAlertCircle &&
-                    `${CLASSNAME}--has-dark-layer`,
-                `${CLASSNAME}--path`,
-            )}
-        >
-            <svg
-                aria-hidden={alt ? undefined : 'true'}
-                role={alt ? 'img' : undefined}
-                aria-label={alt}
-                height="1em"
-                preserveAspectRatio="xMidYMid meet"
-                style={{ verticalAlign: '-0.125em' }}
-                viewBox="0 0 24 24"
-                width="1em"
-            >
-                <path d={icon} fill="currentColor" />
-            </svg>
-        </i>
-    );
-};
-
-Icon.displayName = COMPONENT_NAME;
-Icon.className = CLASSNAME;
-Icon.defaultProps = DEFAULT_PROPS;

package/js/date-picker.js

@@ -1,71 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var range = require('lodash/range');
-var mMoment = require('moment');
-var momentRange = require('moment-range');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var range__default = /*#__PURE__*/_interopDefaultLegacy(range);
-var mMoment__default = /*#__PURE__*/_interopDefaultLegacy(mMoment);
-
-const moment = momentRange.extendMoment(mMoment__default["default"]);
-const DAYS_PER_WEEK = 7;
-/**
- * Get the list of days in a week based on locale.
- *
- * @deprecated will be removed in next major version along with the removal of moment (no replacement planned)
- *
- * @param  locale The locale using to generate the order of days in a week.
- * @return The list of days in a week based on locale.
- */
-function getWeekDays(locale) {
-    return range__default["default"](DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));
-}
-/**
- * Get month calendar based on locale and start date.
- *
- * @deprecated will be removed in next major version along with the removal of moment (no replacement planned)
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
- */
-function getMonthCalendar(locale, selectedMonth) {
-    const firstDayOfMonth = moment(selectedMonth).startOf('month');
-    const endDayOfMonth = moment(selectedMonth).endOf('month');
-    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday
-    const firstDay = firstDayOfMonth.locale(locale).startOf('week');
-    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());
-    return Array.from(monthRange.by('day'));
-}
-/**
- * Get month calendar based on locale and start date.
- * Each day is annotated to know if they are displayed and/or clickable.
- *
- * @deprecated will be removed in next major version along with the removal of moment (no replacement planned)
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  minDate       The first selectable date.
- * @param  maxDate       The last selectable date.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
- */
-function getAnnotatedMonthCalendar(locale, minDate, maxDate, selectedMonth) {
-    const month = moment(selectedMonth).locale(locale).month();
-    const clickableRange = moment.range(minDate, maxDate);
-    return getMonthCalendar(locale, selectedMonth).map((date) => {
-        return {
-            date,
-            isClickable: clickableRange.contains(date),
-            isDisplayed: date.month() === month,
-            isToday: date.isSame(moment(), 'day'),
-        };
-    });
-}
-
-exports.getAnnotatedMonthCalendar = getAnnotatedMonthCalendar;
-exports.getMonthCalendar = getMonthCalendar;
-exports.getWeekDays = getWeekDays;

package/js/date-picker.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/range"),t=require("moment"),n=require("moment-range");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(e),r=a(t);const s=n.extendMoment(r.default);function d(e,t){const n=s(t).startOf("month"),a=s(t).endOf("month"),o=n.locale(e).startOf("week"),r=s.range(o.toDate(),a.toDate());return Array.from(r.by("day"))}exports.getAnnotatedMonthCalendar=function(e,t,n,a){const o=s(a).locale(e).month(),r=s.range(t,n);return d(e,a).map(e=>({date:e,isClickable:r.contains(e),isDisplayed:e.month()===o,isToday:e.isSame(s(),"day")}))},exports.getMonthCalendar=d,exports.getWeekDays=function(e){return o.default(7).map((t,n)=>s().locale(e).weekday(n))};

package/js/date-picker.ts

@@ -1,77 +0,0 @@
-import range from 'lodash/range';
-import mMoment, { Moment } from 'moment';
-import { extendMoment } from 'moment-range';
-
-const moment = extendMoment(mMoment as any);
-
-const DAYS_PER_WEEK = 7;
-
-interface AnnotatedDate {
-    date: Moment;
-    isDisplayed: boolean;
-    isClickable: boolean;
-    isToday: boolean;
-}
-
-/**
- * Get the list of days in a week based on locale.
- *
- * @deprecated will be removed in next major version along with the removal of moment (no replacement planned)
- *
- * @param  locale The locale using to generate the order of days in a week.
- * @return The list of days in a week based on locale.
- */
-export function getWeekDays(locale: string): Moment[] {
-    return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));
-}
-
-/**
- * Get month calendar based on locale and start date.
- *
- * @deprecated will be removed in next major version along with the removal of moment (no replacement planned)
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
- */
-export function getMonthCalendar(locale: string, selectedMonth?: Moment): Moment[] {
-    const firstDayOfMonth = moment(selectedMonth).startOf('month');
-    const endDayOfMonth = moment(selectedMonth).endOf('month');
-    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday
-    const firstDay = firstDayOfMonth.locale(locale).startOf('week');
-    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());
-
-    return Array.from(monthRange.by('day'));
-}
-
-/**
- * Get month calendar based on locale and start date.
- * Each day is annotated to know if they are displayed and/or clickable.
- *
- * @deprecated will be removed in next major version along with the removal of moment (no replacement planned)
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  minDate       The first selectable date.
- * @param  maxDate       The last selectable date.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
- */
-export function getAnnotatedMonthCalendar(
-    locale: string,
-    minDate?: Date,
-    maxDate?: Date,
-    selectedMonth?: Moment,
-): AnnotatedDate[] {
-    const month = moment(selectedMonth).locale(locale).month();
-
-    const clickableRange = moment.range(minDate as Date, maxDate as Date);
-
-    return getMonthCalendar(locale, selectedMonth).map((date) => {
-        return {
-            date,
-            isClickable: clickableRange.contains(date),
-            isDisplayed: date.month() === month,
-            isToday: date.isSame(moment(), 'day'),
-        };
-    });
-}

package/stories/controls/color.ts

@@ -1,7 +0,0 @@
-import { ColorPalette, ColorVariant } from '@lumx/core/js/constants';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export const ALL_COLORS = Object.values(ColorPalette);
-export const colorArgType = getSelectArgType(withUndefined(ALL_COLORS));
-export const colorVariantArgType = getSelectArgType(ColorVariant);

package/stories/controls/icons.ts

@@ -1,126 +0,0 @@
-import {
-    mdiAbTesting,
-    mdiAbjadArabic,
-    mdiAccount,
-    mdiAccountBox,
-    mdiAlert,
-    mdiAlertCircle,
-    mdiArrowDown,
-    mdiArrowUp,
-    mdiAtom,
-    mdiBee,
-    mdiBell,
-    mdiBullhornOutline,
-    mdiCheck,
-    mdiCheckCircle,
-    mdiChevronDown,
-    mdiChevronLeft,
-    mdiChevronRight,
-    mdiChevronUp,
-    mdiClose,
-    mdiCloseCircle,
-    mdiDelete,
-    mdiDotsHorizontal,
-    mdiDragVertical,
-    mdiEarth,
-    mdiEmail,
-    mdiEye,
-    mdiFileEdit,
-    mdiFlag,
-    mdiFolder,
-    mdiFolderGoogleDrive,
-    mdiFoodApple,
-    mdiGoogleCirclesExtended,
-    mdiHeart,
-    mdiHome,
-    mdiImageBroken,
-    mdiInformation,
-    mdiLink,
-    mdiMagnifyMinusOutline,
-    mdiMagnifyPlusOutline,
-    mdiMenuDown,
-    mdiMessageTextOutline,
-    mdiMinus,
-    mdiOpenInNew,
-    mdiPauseCircleOutline,
-    mdiPencil,
-    mdiPlay,
-    mdiPlayCircleOutline,
-    mdiPlus,
-    mdiRadioboxBlank,
-    mdiRadioboxMarked,
-    mdiReply,
-    mdiSend,
-    mdiStar,
-    mdiTextBox,
-    mdiTextBoxPlus,
-    mdiTram,
-    mdiTranslate,
-    mdiViewList,
-} from '@lumx/icons';
-
-// Small selection of mdi icons to
-export const iconArgType = {
-    control: { type: 'select' },
-    options: {
-        undefined,
-        mdiAbTesting,
-        mdiAbjadArabic,
-        mdiAccount,
-        mdiAccountBox,
-        mdiAlert,
-        mdiAlertCircle,
-        mdiArrowDown,
-        mdiArrowUp,
-        mdiAtom,
-        mdiBee,
-        mdiBell,
-        mdiBullhornOutline,
-        mdiCheck,
-        mdiCheckCircle,
-        mdiChevronDown,
-        mdiChevronLeft,
-        mdiChevronRight,
-        mdiChevronUp,
-        mdiClose,
-        mdiCloseCircle,
-        mdiDelete,
-        mdiDotsHorizontal,
-        mdiDragVertical,
-        mdiEarth,
-        mdiEmail,
-        mdiEye,
-        mdiFileEdit,
-        mdiFlag,
-        mdiFolder,
-        mdiFolderGoogleDrive,
-        mdiFoodApple,
-        mdiGoogleCirclesExtended,
-        mdiHeart,
-        mdiHome,
-        mdiImageBroken,
-        mdiInformation,
-        mdiLink,
-        mdiMagnifyMinusOutline,
-        mdiMagnifyPlusOutline,
-        mdiMenuDown,
-        mdiMessageTextOutline,
-        mdiMinus,
-        mdiOpenInNew,
-        mdiPauseCircleOutline,
-        mdiPencil,
-        mdiPlay,
-        mdiPlayCircleOutline,
-        mdiPlus,
-        mdiRadioboxBlank,
-        mdiRadioboxMarked,
-        mdiReply,
-        mdiSend,
-        mdiStar,
-        mdiTextBox,
-        mdiTextBoxPlus,
-        mdiTram,
-        mdiTranslate,
-        mdiViewList,
-    },
-};

package/stories/controls/selectArgType.ts

@@ -1,8 +0,0 @@
-export const getSelectArgType = <E>(
-    options: Array<E> | Record<string, E>,
-    type: 'select' | 'inline-radio' = 'inline-radio',
-) => ({
-    control: { type },
-    options: Object.values(options),
-    mapping: !Array.isArray(options) ? options : undefined,
-});

package/stories/controls/withUndefined.ts

@@ -1 +0,0 @@
-export const withUndefined = <E>(options: Array<E> | Record<string, E>) => [undefined, ...Object.values(options)];

package/testing/utils/queries.ts

@@ -1,19 +0,0 @@
-import { buildQueries } from '@testing-library/dom';
-
-export const queryAllByClassName = (container: HTMLElement, className: string) =>
-    Array.from(container.getElementsByClassName(className) as HTMLCollectionOf<HTMLElement>);
-
-export const [queryByClassName, getAllByClassName, getByClassName, findAllByClassName, findByClassName] = buildQueries(
-    queryAllByClassName,
-    (_, className) => `Multiple \`.${className}\` found`,
-    (_, className) => `No \`.${className}\` found`,
-);
-
-export const queryAllByTagName = (container: HTMLElement, tagName: string) =>
-    Array.from(container.getElementsByTagName(tagName) as HTMLCollectionOf<HTMLElement>);
-
-export const [queryByTagName, getAllByTagName, getByTagName, findAllByTagName, findByTagName] = buildQueries(
-    queryAllByTagName,
-    (_, tagName) => `Multiple \`${tagName}\` found`,
-    (_, tagName) => `No \`${tagName}\` found`,
-);