etudes 2.0.0 → 2.1.0

package/lib/Accordion.d.ts

@@ -1,12 +1,12 @@
 import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
 import { ListItemProps } from './List';
-declare type Orientation = 'horizontal' | 'vertical';
-export declare type AccordionItemProps<T> = ListItemProps<T>;
-export declare type SectionData<T> = {
+type Orientation = 'horizontal' | 'vertical';
+export type AccordionItemProps<T> = ListItemProps<T>;
+export type SectionData<T> = {
     label: string;
     items: T[];
 };
-export declare type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Data provided to each section.
      */

package/lib/BurgerButton.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
-export declare type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
+export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
     height?: number;
     isActive?: boolean;
     isDoubleJointed?: boolean;

package/lib/Conditional.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare type ConditionalProps = PropsWithChildren<{
+export type ConditionalProps = PropsWithChildren<{
     if: boolean | (() => boolean);
 }>;
 export default function Conditional({ children, if: boolOrExpression }: ConditionalProps): JSX.Element;

package/lib/DebugConsole.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
+export type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
     align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
     margin?: number;
     maxEntries?: number;

package/lib/Dial.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, PropsWithChildren, SVGAttributes } from 'react';
-export declare type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Current angle reading of the compass, between 0.0 - 360.0 degrees,
      * inclusive.

package/lib/Dropdown.d.ts

@@ -1,11 +1,11 @@
 import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
 import { ListItemProps } from './List';
-declare type Orientation = 'horizontal' | 'vertical';
-export declare type DropdownData = {
+type Orientation = 'horizontal' | 'vertical';
+export type DropdownData = {
     label?: string;
 };
-export declare type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>;
-export declare type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>;
+export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Data of every item in the component. This is used to generate individual
      * menu items. Data type is generic.

package/lib/Each.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare type EachProps<T> = {
+export type EachProps<T> = {
     children?: ReactNode | ((value: T, index: number) => ReactNode);
     in?: T[];
     render?: (value: T, index: number) => ReactNode;

package/lib/ExtractChild.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type ExtractChildProps = HTMLAttributes<HTMLElement>;
+export type ExtractChildProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts a single child of a parent component into its own component. If the
  * parent component has multiple children, only the first one will be extracted,

package/lib/ExtractChildren.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare type ExtractChildrenProps = HTMLAttributes<HTMLElement>;
+export type ExtractChildrenProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts all children of a parent component into its own component.
  */

package/lib/FlatSVG.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
+export type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * The SVG string markup, i.e. "<svg>...</svg>".
      */

package/lib/List.d.ts

@@ -1,12 +1,12 @@
 import React, { ComponentType, HTMLAttributes, ReactElement, Ref } from 'react';
-declare type Orientation = 'horizontal' | 'vertical';
-export declare type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
+type Orientation = 'horizontal' | 'vertical';
+export type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
     data: T;
     index: number;
     isSelected: boolean;
     orientation: Orientation;
 };
-export declare type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
+export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
     /**
      * Thickness of item borders (in pixels). 0 indicates no borders.
      */

package/lib/MasonryGrid.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
-declare type Orientation = 'horizontal' | 'vertical';
-export declare type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {
+type Orientation = 'horizontal' | 'vertical';
+export type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {
     areSectionsAligned?: boolean;
     horizontalSpacing?: number;
     isReversed?: boolean;

package/lib/Panorama.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import { Size } from 'spase';
-export declare type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
+export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
     /**
      * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or
      * 360, the left bound of the image is at the center of the component.

package/lib/PanoramaSlider.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import { Size } from 'spase';
 import { PanoramaProps } from './Panorama';
-export declare type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{
+export type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{
     /**
      * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of
      * the reticle. 360 indicates the reticle covers the entire image. If this is

package/lib/RangeSlider.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
-declare type Orientation = 'horizontal' | 'vertical';
-declare type Range = [number, number];
-export declare type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+type Orientation = 'horizontal' | 'vertical';
+type Range = [number, number];
+export type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     areLabelsVisible?: boolean;
     decimalPlaces?: number;
     knobPadding?: number;

package/lib/Repeat.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare type RepeatProps = {
+export type RepeatProps = {
     children?: ReactNode | ((index: number) => ReactNode);
     count?: number;
     render?: (index: number) => ReactNode;

package/lib/RotatingGallery.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
-export declare type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Current image index. An error is thrown if the index is invalid (must be
      * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way

package/lib/SelectableButton.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
-export declare type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
+export type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
     children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
     isDeselectable?: boolean;
     isDisabled?: boolean;

package/lib/Slider.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
-declare type Orientation = 'horizontal' | 'vertical';
-export declare type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+type Orientation = 'horizontal' | 'vertical';
+export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * By default the position is a value from 0 - 1, 0 being the start of the
      * slider and 1 being the end. Switching on this flag inverts this behavior,

package/lib/StepwiseSlider.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
-declare type Orientation = 'horizontal' | 'vertical';
-export declare type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+type Orientation = 'horizontal' | 'vertical';
+export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * By default the position is a value from 0 - 1, 0 being the start of the
      * slider and 1 being the end. Switching on this flag inverts this behavior,

package/lib/SwipeContainer.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {
+export type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {
     isEnabled?: boolean;
     threshold?: number;
     onSwipeDown?: () => void;

package/lib/TextField.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
+export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
     value?: string;
     onFocus?: (value: string) => void;
     onUnfocus?: (value: string) => void;

package/lib/Video.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type VideoProps = HTMLAttributes<HTMLDivElement> & {
+export type VideoProps = HTMLAttributes<HTMLDivElement> & {
     autoLoop?: boolean;
     autoPlay?: boolean;
     hasControls?: boolean;

package/lib/WithTooltip.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare type WithToolTipProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & PropsWithChildren<{
+export type WithToolTipProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & PropsWithChildren<{
     /**
      * The height of the arrow. The width (longest edge) of the arrow is always
      * twice its height.

package/lib/hooks/useDragEffect.d.ts

@@ -1,11 +1,11 @@
 import { DependencyList, Dispatch, RefObject, SetStateAction } from 'react';
-declare type ReturnedStates<T> = {
+type ReturnedStates<T> = {
     isDragging: [boolean, Dispatch<SetStateAction<boolean>>];
     isReleasing: [boolean, Dispatch<SetStateAction<boolean>>];
     value: [T, Dispatch<SetStateAction<T>>];
 };
-declare type InteractDraggableOptions = Parameters<Interact.Interactable['draggable']>[0];
-declare type Options<T> = Omit<InteractDraggableOptions, 'onstart' | 'onmove' | 'onend'> & {
+type InteractDraggableOptions = Parameters<Interact.Interactable['draggable']>[0];
+type Options<T> = Omit<InteractDraggableOptions, 'onstart' | 'onmove' | 'onend'> & {
     /**
      * The initial associated value of this hook.
      */

package/lib/hooks/useInterval.d.ts

@@ -1,5 +1,5 @@
 import { DependencyList } from 'react';
-declare type Options = {
+type Options = {
     /**
      * Specifies if the handler should be invoked initially (as opposed to waiting
      * for the specified interval for the initial invocation).

package/lib/hooks/useLoadImageEffect.d.ts

@@ -1,6 +1,6 @@
 import { DependencyList, Dispatch, SetStateAction } from 'react';
 import { Size } from 'spase';
-declare type ReturnedStates = {
+type ReturnedStates = {
     /**
      * A tuple consisting of a stateful value indicating if the image is loading,
      * and a function that updates the loading state.
@@ -12,7 +12,7 @@ declare type ReturnedStates = {
      */
     imageSize: [Size | undefined, Dispatch<SetStateAction<Size | undefined>>];
 };
-declare type Options = {
+type Options = {
     /**
      * Handler invoked when the image is done loading.
      *

package/lib/hooks/useResizeEffect.d.ts

@@ -1,6 +1,6 @@
 import { DependencyList, Dispatch, RefObject, SetStateAction } from 'react';
 import { Size } from 'spase';
-declare type Options = {
+type Options = {
     /**
      * Handler invoked when the target element resizes.
      *

package/lib/hooks/useSearchParamState.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-export declare type Options<T> = {
+export type Options<T> = {
     /**
      * Function for transforming the search param value to the value of the mapped
      * state.

package/lib/providers/I18nProvider.d.ts

@@ -0,0 +1,179 @@
+import Polyglot from 'node-polyglot';
+import React, { Dispatch, PropsWithChildren } from 'react';
+interface Translation {
+    [key: string]: Translation | string;
+}
+type I18nState = {
+    changeLocaleStrategy: 'action' | 'path' | 'query';
+    defaultLocale: string;
+    locale: string;
+    polyglots: Record<string, Polyglot>;
+    supportedLocales: string[];
+    getLocalizedPath?: (path: string) => string;
+    getLocalizedString: typeof Polyglot.prototype.t;
+};
+type I18nContextValue = {
+    state: I18nState;
+    dispatch?: Dispatch<I18nChangeLocaleAction>;
+};
+type I18nProviderProps = PropsWithChildren<{
+    changeLocaleStrategy?: I18nState['changeLocaleStrategy'];
+    defaultLocale?: I18nState['defaultLocale'];
+    translations: Record<string, Translation>;
+}>;
+type I18nChangeLocaleAction = {
+    type: '@i18n/CHANGE_LOCALE';
+    locale: string;
+};
+export declare const I18nContext: React.Context<I18nContextValue | undefined>;
+/**
+ * Context provider whose value consists of the current i18n state. The method
+ * of modifying the locale is specified by `changeLocaleStrategy`, as follows:
+ *   - If set to `action`, the locale can be modified by dispatching an action
+ *   - If set to `path`, the locale is inferred from the current path name
+ *   - If set to `query`, the locale is inferred from the search parameter
+ *     `locale` in the current path
+ *
+ * @param props - See {@link I18nProviderProps}.
+ *
+ * @returns The context provider.
+ */
+export default function I18nProvider({ children, defaultLocale, translations, changeLocaleStrategy, }: I18nProviderProps): JSX.Element;
+/** @namespace Components */
+/**
+ * Custom {@link Routes} container that generates child {@link Route} components
+ * for all locales supported by {@link I18nProvider}.
+ */
+export declare function I18nRoutes({ children }: PropsWithChildren): JSX.Element;
+/** @namespace Hooks */
+/**
+ * Hook for retrieving the change locale function.
+ *
+ * @returns The change locale function.
+ */
+export declare function useChangeLocale(): (locale: string) => void | undefined;
+/**
+ * Hook for retrieving the current locale.
+ *
+ * @returns The current locale.
+ */
+export declare function useLocale(): string;
+/**
+ * Hook for retrieving the path localizing function for the current locale.
+ *
+ * @returns The path localizing function.
+ */
+export declare function useLocalizedPath(): (path: string) => string;
+/**
+ * Hook for retrieving the string localizing function for the current locale.
+ *
+ * @returns The string localizing function.
+ */
+export declare function useLocalizedString(): (phrase: string, options?: number | Polyglot.InterpolationOptions | undefined) => string;
+/**
+ * Hook for retrieving all supported locales.
+ *
+ * @returns All supported locales.
+ */
+export declare function useSupportedLocales(): string[];
+/** @namespace Utilities */
+type URLParts = {
+    base?: string;
+    hash?: string;
+    host?: string;
+    path?: string;
+    port?: string;
+    protocol?: string;
+    query?: string;
+};
+type ResolveLocaleOptions = {
+    /**
+     * The locale to fallback to if one cannot be inferred from the provided URL.
+     */
+    defaultLocale?: string;
+    /**
+     * An array of supported locales to validate the inferred locale against. If
+     * it doesn't exist in the list of supported locales, the default locale (if
+     * specified) or `undefined` will be returned.
+     */
+    supportedLocales?: string[];
+};
+type ResolveLocalizedURLOptions = ResolveLocaleOptions & {
+    /**
+     * Specifies where in the URL the locale should be matched. If `resolver` is
+     * provided, this option is ignored.
+     */
+    resolveStrategy?: 'auto' | 'domain' | 'path' | 'query';
+    /**
+     * Custom resolver function.
+     *
+     * @param protocol - The matched protocol of the provided url, if available.
+     * @param host - The matched host of the provided url, if available.
+     * @param port - The matched port of the provided url, if available.
+     * @param path - The matched path of the provided url, if available.
+     *
+     * @returns The resolved locale.
+     */
+    resolver?: (urlParts: URLParts) => string | undefined;
+};
+type LocalizedURLInfo = {
+    /**
+     * The matched locale.
+     */
+    locale: string;
+    /**
+     * Specifies where in the URL the locale was matched.
+     */
+    resolveStrategy: ResolveLocalizedURLOptions['resolveStrategy'] | 'custom';
+};
+/**
+ * Resolves the specified locale with the provided options. All parameters are
+ * optional.
+ *
+ * @param locale - The locale to resolve.
+ * @param options - See {@link ResolveLocaleOptions}.
+ *
+ * @returns - The resolved locale.
+ */
+export declare function resolveLocale(locale?: string, { defaultLocale, supportedLocales }?: ResolveLocaleOptions): string | undefined;
+/**
+ * Retrieves the locale identifier from a URL. The default behavior of this
+ * function to look for the locale identifier in the domain first followed by
+ * the first directory of the path. You can provide a custom resolver.
+ *
+ * @param url - The URL, can be a full URL or a valid path.
+ * @param options - See {@link ResolveLocalizedURLOptions}.
+ *
+ * @returns The inferred locale if it exists.
+ */
+export declare function getLocaleFromURL(url: string, { defaultLocale, resolveStrategy, resolver, supportedLocales }?: ResolveLocalizedURLOptions): LocalizedURLInfo | undefined;
+/**
+ * Returns the unlocalized version of a URL.
+ *
+ * @param url - The URL.
+ * @param options - See {@link ResolveLocalizedURLOptions}.
+ *
+ * @returns The unlocalized URL.
+ */
+export declare function getUnlocalizedURL(url: string, { resolveStrategy, resolver, supportedLocales }?: ResolveLocalizedURLOptions): string;
+/**
+ * Returns the localized version of a URL.
+ *
+ * @param url - The URL.
+ * @param locale - The target locale.
+ * @param options - See {@link ResolveLocalizedURLOptions}.
+ *
+ * @returns The localized URL.
+ */
+export declare function getLocalizedURL(url: string, locale: string, { defaultLocale, resolveStrategy, resolver, supportedLocales }?: ResolveLocalizedURLOptions): string;
+/**
+ * Returns all localized versions of a URL based on the specified
+ * `supportedLocales`.
+ *
+ * @param url - The URL.
+ * @param options - See {@link ResolveLocalizedURLOptions}.
+ *
+ * @returns The localized URLs.
+ */
+export declare function getLocalizedURLs(url: string, { defaultLocale, resolveStrategy, resolver, supportedLocales }?: ResolveLocalizedURLOptions): string[];
+export {};