@shlinkio/shlink-frontend-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shlinkio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Shlink frontend kit
+
+React components and utilities for Shlink frontend projects

package/dist/index.css

@@ -0,0 +1 @@
+.search-field{position:relative}.search-field:focus-within{z-index:1}.search-field__input.search-field__input{padding-left:40px;padding-right:40px}.search-field__input--no-border.search-field__input--no-border{border:none;border-radius:0}.search-field__icon{position:absolute;top:50%;transform:translateY(-50%);left:15px;color:#6c757d}.search-field__close{position:absolute;top:50%;transform:translateY(-50%);right:10px;cursor:pointer}.dropdown-btn__toggle.dropdown-btn__toggle{text-align:left}.dropdown-btn__toggle.dropdown-btn__toggle--with-caret{padding-right:1.75rem}.dropdown-btn__toggle.dropdown-btn__toggle,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{color:var(--input-text-color);background-color:var(--primary-color);border-color:var(--input-border-color)}.card .dropdown-btn__toggle.dropdown-btn__toggle,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.card .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{background-color:var(--input-color)}.dropdown-btn__toggle.dropdown-btn__toggle.disabled,.dropdown-btn__toggle.dropdown-btn__toggle:disabled{background-color:var(--input-disabled-color)}.dropdown-btn__toggle.dropdown-btn__toggle:after{position:absolute;top:50%;transform:translateY(-50%);right:.75rem}.nav-pills__nav{position:sticky!important;top:55px;z-index:2}.nav-pills__nav-link.nav-pills__nav-link{border-radius:0!important;padding-bottom:calc(.5rem - 3px)!important;border-bottom:3px solid transparent!important;color:#5d6778;font-weight:700;cursor:pointer;text-decoration:none}@media (min-width: 576px) and (max-width: 991px){.nav-pills__nav-link.nav-pills__nav-link{font-size:89%}}.nav-pills__nav-link:hover{color:#4696e5!important}.nav-pills__nav-link.active{border-color:#4696e5!important;background-color:var(--primary-color)!important;color:#4696e5!important}.ordering-dropdown__menu--link.ordering-dropdown__menu--link{min-width:11rem}.ordering-dropdown__sort-icon{margin:3.5px 0 0;float:right}

package/dist/index.d.ts

@@ -0,0 +1,170 @@
+import type { CardProps } from 'reactstrap';
+import type { ChangeEvent } from 'react';
+import type { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
+import type { FC } from 'react';
+import type { InputType } from 'reactstrap/types/lib/Input';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MutableRefObject } from 'react';
+import type { PropsWithChildren } from 'react';
+import type { ReactNode } from 'react';
+
+declare type BooleanControlProps = PropsWithChildren<{
+    checked?: boolean;
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    inline?: boolean;
+}>;
+
+export declare const changeThemeInMarkup: (theme: Theme) => void | undefined;
+
+export declare const Checkbox: FC<BooleanControlProps>;
+
+export declare const determineOrderDir: <T extends string = string>(currentField: T, newField?: T | undefined, currentOrderDir?: OrderDir) => OrderDir;
+
+export declare const DropdownBtn: FC<DropdownBtnProps>;
+
+export declare type DropdownBtnMenuProps = PropsWithChildren<{
+    minWidth?: number;
+}>;
+
+export declare type DropdownBtnProps = PropsWithChildren<Omit<DropdownToggleProps, 'caret' | 'size' | 'outline'> & {
+    text: ReactNode;
+    noCaret?: boolean;
+    className?: string;
+    dropdownClassName?: string;
+    inline?: boolean;
+    minWidth?: number;
+    size?: 'sm' | 'md' | 'lg';
+}>;
+
+export declare const HIGHLIGHTED_COLOR = "#f77f28";
+
+export declare const HIGHLIGHTED_COLOR_ALPHA = "rgba(247, 127, 40, 0.4)";
+
+export declare const InputFormGroup: FC<InputFormGroupProps>;
+
+export declare type InputFormGroupProps = PropsWithChildren<{
+    value: string;
+    onChange: (newValue: string) => void;
+    type?: InputType;
+    required?: boolean;
+    placeholder?: string;
+    className?: string;
+    labelClassName?: string;
+}>;
+
+export declare const isDarkThemeEnabled: () => boolean;
+
+export declare const LabeledFormGroup: FC<LabeledFormGroupProps>;
+
+declare type LabeledFormGroupProps = PropsWithChildren<{
+    label: ReactNode;
+    noMargin?: boolean;
+    className?: string;
+    labelClassName?: string;
+    id?: string;
+}>;
+
+export declare const MAIN_COLOR = "#4696e5";
+
+export declare const MAIN_COLOR_ALPHA = "rgba(70, 150, 229, 0.4)";
+
+export declare const Message: FC<MessageProps>;
+
+export declare type MessageProps = PropsWithChildren<{
+    className?: string;
+    loading?: boolean;
+    fullWidth?: boolean;
+    type?: MessageType;
+}>;
+
+declare type MessageType = 'default' | 'error';
+
+export declare const NavPillItem: FC<NavPillProps>;
+
+declare type NavPillProps = PropsWithChildren<{
+    to: string;
+    replace?: boolean;
+}>;
+
+export declare const NavPills: FC<NavPillsProps>;
+
+declare type NavPillsProps = PropsWithChildren<{
+    fill?: boolean;
+    className?: string;
+}>;
+
+export declare type Order<Fields> = {
+    field?: Fields;
+    dir?: OrderDir;
+};
+
+export declare type OrderDir = 'ASC' | 'DESC' | undefined;
+
+export declare function OrderingDropdown<T extends string = string>({ items, order, onChange, isButton, right, prefixed }: OrderingDropdownProps<T>): JSX_2.Element;
+
+export declare type OrderingDropdownProps<T extends string = string> = {
+    items: Record<T, string>;
+    order: Order<T>;
+    onChange: (orderField?: T, orderDir?: OrderDir) => void;
+    isButton?: boolean;
+    right?: boolean;
+    prefixed?: boolean;
+};
+
+export declare const orderToString: <T>(order: Order<T>) => string | undefined;
+
+export declare const parseQuery: <T>(search: string) => T;
+
+export declare const PRIMARY_DARK_COLOR = "#161b22";
+
+export declare const PRIMARY_LIGHT_COLOR = "white";
+
+export declare const Result: FC<ResultProps>;
+
+export declare type ResultProps = PropsWithChildren<{
+    type: ResultType;
+    className?: string;
+    small?: boolean;
+}>;
+
+export declare type ResultType = 'success' | 'error' | 'warning';
+
+export declare const RowDropdownBtn: FC<DropdownBtnMenuProps>;
+
+export declare const SearchField: ({ onChange, className, large, noBorder, initialValue }: SearchFieldProps) => JSX_2.Element;
+
+declare type SearchFieldProps = {
+    onChange: (value: string) => void;
+    className?: string;
+    large?: boolean;
+    noBorder?: boolean;
+    initialValue?: string;
+};
+
+export declare const SimpleCard: ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => JSX_2.Element;
+
+export declare type SimpleCardProps = Omit<CardProps, 'title'> & {
+    title?: ReactNode;
+    bodyClassName?: string;
+};
+
+export declare const sortList: <List>(list: List[], { field, dir }: Order<keyof List>) => List[];
+
+export declare const stringifyQuery: (query: any) => string;
+
+export declare const stringToOrder: <T>(order: string) => Order<T>;
+
+export declare type Theme = 'dark' | 'light';
+
+declare type ToggleResult = [boolean, () => void, () => void, () => void];
+
+export declare const ToggleSwitch: FC<BooleanControlProps>;
+
+export declare const useDomId: () => string;
+
+export declare const useElementRef: <T>() => MutableRefObject<T | null>;
+
+export declare const useToggle: (initialValue?: boolean) => ToggleResult;
+
+export { }