@koobiq/react-components 0.0.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Koobiq
+
+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,43 @@
+# @koobiq/react-components
+
+## Getting Started
+
+Install the component library with the following command:
+
+```bash
+pnpm add @koobiq/design-tokens @koobiq/react-components
+```
+
+### Usage
+
+```tsx
+import '@koobiq/design-tokens/web/css-tokens.css';
+import '@koobiq/design-tokens/web/css-tokens-light.css';
+import '@koobiq/design-tokens/web/css-tokens-dark.css';
+import '@koobiq/react-components/style.css';
+
+import { Typography } from '@koobiq/react-components';
+
+export default function App() {
+  return <Typography>Hello, Koobiq React!</Typography>;
+}
+```
+
+## Browser Support
+
+[Check compatible browsers](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C%0A++++chrome+%3E+88%2C%0A++++safari+%3E+14%2C%0A++++firefox+%3E+78%2C%0A++++opera+%3E+75%2C%0A++++edge+%3E+88)
+
+## Development
+
+Follow these steps to start the development mode:
+
+- Clone the repository and navigate to the created directory.
+- Run the command `pnpm dev` in the terminal.
+
+Documentation will be available at [http://localhost:6006](http://localhost:6006).
+All development is conducted there. For convenience, you can go directly to the page of the component you are working on.
+
+### Prerequisites
+
+- Node.js v20
+- pnpm v9

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { AlertBaseProps } from './index';
+export declare const Alert: import("@koobiq/react-core").PolyForwardComponent<"div", AlertBaseProps, ElementType>;
+export type AlertProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Alert<As>>;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmark16 } from "@koobiq/react-icons";
+import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
+import s from "./Alert.module.css.js";
+import intlMessages from "./intl.json.js";
+import { AlertIcon } from "./components/AlertIcon/AlertIcon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+const Alert = polymorphicForwardRef(
+  ({
+    status = "info",
+    colored = false,
+    compact = false,
+    as: Tag = "div",
+    hideIcon = false,
+    slotProps,
+    icon,
+    onClose,
+    action,
+    title,
+    className,
+    children,
+    ...other
+  }, ref) => {
+    const stringFormatter = useLocalizedStringFormatter(intlMessages);
+    const contentProps = mergeProps(
+      {
+        className: s.content
+      },
+      slotProps?.content
+    );
+    const statusIcon = mergeProps(
+      {
+        icon,
+        status,
+        compact
+      },
+      slotProps?.statusIcon
+    );
+    const closeIcon = mergeProps(
+      {
+        "aria-label": stringFormatter.format("close"),
+        variant: "fade-contrast",
+        onClick: onClose,
+        className: s.closeIcon
+      },
+      slotProps?.closeIcon
+    );
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        role: "alert",
+        ...other,
+        ref,
+        className: clsx(
+          s.base,
+          s[status],
+          compact && s.compact,
+          colored && s.colored,
+          className
+        ),
+        children: [
+          !hideIcon && /* @__PURE__ */ jsx(AlertIcon, { ...statusIcon }),
+          /* @__PURE__ */ jsxs("div", { ...contentProps, children: [
+            isNotNil(title) && /* @__PURE__ */ jsx("span", { className: s.title, children: title }),
+            isNotNil(children) && /* @__PURE__ */ jsx("span", { className: s.body, children }),
+            isNotNil(action) && /* @__PURE__ */ jsx("span", { className: s.action, children: action })
+          ] }),
+          isNotNil(onClose) && typeof onClose === "function" && /* @__PURE__ */ jsx(IconButton, { ...closeIcon, children: closeIcon.children || /* @__PURE__ */ jsx(IconXmark16, {}) })
+        ]
+      }
+    );
+  }
+);
+export {
+  Alert
+};

package/dist/components/Alert/Alert.module.css.js

@@ -0,0 +1,41 @@
+const base = "kbq-alert-bc5d04";
+const content = "kbq-alert-content-26b952";
+const title = "kbq-alert-title-65d4cf";
+const body = "kbq-alert-body-e3014a";
+const action = "kbq-alert-action-56d767";
+const closeIcon = "kbq-alert-closeIcon-f7a8b8";
+const compact = "kbq-alert-compact-ae75df";
+const info = "kbq-alert-info-5d61e4";
+const colored = "kbq-alert-colored-b82b77";
+const warning = "kbq-alert-warning-4392ba";
+const error = "kbq-alert-error-e5580a";
+const success = "kbq-alert-success-1c44d9";
+const s = {
+  base,
+  content,
+  title,
+  body,
+  action,
+  closeIcon,
+  compact,
+  info,
+  colored,
+  warning,
+  error,
+  success
+};
+export {
+  action,
+  base,
+  body,
+  closeIcon,
+  colored,
+  compact,
+  content,
+  s as default,
+  error,
+  info,
+  success,
+  title,
+  warning
+};

package/dist/components/Alert/components/AlertIcon/AlertIcon.d.ts

@@ -0,0 +1,2 @@
+import type { AlertIconProps } from './types';
+export declare const AlertIcon: import("react").ForwardRefExoticComponent<AlertIconProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/components/AlertIcon/AlertIcon.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import s from "./AlertIcon.module.css.js";
+import { matchStatusToIcon } from "./utils.js";
+const AlertIcon = forwardRef(
+  ({ status = "info", icon, compact }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(s.base, status && s[status], compact && s.compact),
+      ref,
+      children: icon || matchStatusToIcon[compact ? "compact" : "normal"][status]
+    }
+  )
+);
+AlertIcon.displayName = "AlertIcon";
+export {
+  AlertIcon
+};

package/dist/components/Alert/components/AlertIcon/AlertIcon.module.css.js

@@ -0,0 +1,23 @@
+const base = "kbq-alerticon-024057";
+const info = "kbq-alerticon-info-5c9bab";
+const success = "kbq-alerticon-success-7255f9";
+const warning = "kbq-alerticon-warning-a84e1f";
+const error = "kbq-alerticon-error-ba110a";
+const compact = "kbq-alerticon-compact-2a8a72";
+const s = {
+  base,
+  info,
+  success,
+  warning,
+  error,
+  compact
+};
+export {
+  base,
+  compact,
+  s as default,
+  error,
+  info,
+  success,
+  warning
+};

package/dist/components/Alert/components/AlertIcon/index.d.ts

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

package/dist/components/Alert/components/AlertIcon/types.d.ts

@@ -0,0 +1,2 @@
+import type { AlertBaseProps } from '../../index';
+export type AlertIconProps = Pick<AlertBaseProps, 'status' | 'compact' | 'icon'>;

package/dist/components/Alert/components/AlertIcon/utils.d.ts

@@ -0,0 +1,14 @@
+export declare const matchStatusToIcon: {
+    normal: {
+        info: import("react/jsx-runtime").JSX.Element;
+        success: import("react/jsx-runtime").JSX.Element;
+        error: import("react/jsx-runtime").JSX.Element;
+        warning: import("react/jsx-runtime").JSX.Element;
+    };
+    compact: {
+        info: import("react/jsx-runtime").JSX.Element;
+        success: import("react/jsx-runtime").JSX.Element;
+        error: import("react/jsx-runtime").JSX.Element;
+        warning: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/Alert/components/AlertIcon/utils.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { IconInfoCircle16, IconCheck16, IconExclamationTriangle16, IconCheckCircle16 } from "@koobiq/react-icons";
+const iconProps = {
+  focusable: false,
+  "aria-hidden": true
+};
+const matchStatusToIcon = {
+  normal: {
+    info: /* @__PURE__ */ jsx(IconInfoCircle16, { ...iconProps }),
+    success: /* @__PURE__ */ jsx(IconCheck16, { ...iconProps }),
+    error: /* @__PURE__ */ jsx(IconExclamationTriangle16, { ...iconProps }),
+    warning: /* @__PURE__ */ jsx(IconExclamationTriangle16, { ...iconProps })
+  },
+  compact: {
+    info: /* @__PURE__ */ jsx(IconInfoCircle16, { ...iconProps }),
+    success: /* @__PURE__ */ jsx(IconCheckCircle16, { ...iconProps }),
+    error: /* @__PURE__ */ jsx(IconExclamationTriangle16, { ...iconProps }),
+    warning: /* @__PURE__ */ jsx(IconExclamationTriangle16, { ...iconProps })
+  }
+};
+export {
+  matchStatusToIcon
+};

package/dist/components/Alert/components/index.d.ts

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

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './types';

package/dist/components/Alert/intl.json.js

@@ -0,0 +1,11 @@
+const intlMessages = {
+  "ru-RU": {
+    close: "Закрыть"
+  },
+  "en-US": {
+    close: "Close"
+  }
+};
+export {
+  intlMessages as default
+};

package/dist/components/Alert/types.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { IconButtonProps } from '../IconButton';
+export declare const alertPropStatus: readonly ["info", "warning", "error", "success"];
+export type AlertPropStatus = (typeof alertPropStatus)[number];
+export type AlertBaseProps = {
+    /**
+     * The status of the component.
+     * @default info
+     * */
+    status?: AlertPropStatus;
+    /**
+     * If `true`, compact mode will be enabled in the alert.
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * If `true`, background color will be enabled in the alert.
+     * @default false
+     */
+    colored?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * If `true`, the status icon will be hidden in the component.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Title content. */
+    title?: ReactNode;
+    /** Message of the alert. */
+    children?: ReactNode;
+    /** Action element, such as a button or link. */
+    action?: ReactNode;
+    /** Override default icon. */
+    icon?: ReactNode;
+    /** A callback function called when the user clicks the alert's close button. */
+    onClose?: IconButtonProps['onClick'];
+    slotProps?: {
+        content?: ComponentPropsWithRef<'div'>;
+        statusIcon?: ComponentPropsWithRef<'div'>;
+        closeIcon?: IconButtonProps;
+    };
+};

package/dist/components/Alert/types.js

@@ -0,0 +1,4 @@
+const alertPropStatus = ["info", "warning", "error", "success"];
+export {
+  alertPropStatus
+};

package/dist/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithRef, type ElementType } from 'react';
+import type { BackdropBaseProps } from './index';
+export declare const Backdrop: import("@koobiq/react-core").PolyForwardComponent<"div", BackdropBaseProps, ElementType>;
+export type BackdropProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Backdrop<As>>;

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { polymorphicForwardRef, useDOMRef, clsx } from "@koobiq/react-core";
+import { Transition } from "react-transition-group";
+import s from "./Backdrop.module.css.js";
+const Backdrop = polymorphicForwardRef(
+  (props, ref) => {
+    const {
+      as: Tag = "div",
+      duration = 300,
+      open: openProp = false,
+      style: styleProp,
+      zIndex,
+      children,
+      className,
+      ...other
+    } = props;
+    const domRef = useDOMRef(ref);
+    const style = {
+      "--backdrop-z-index": zIndex,
+      "--backdrop-duration": `${duration}ms`,
+      ...styleProp
+    };
+    return /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: openProp,
+        nodeRef: domRef,
+        timeout: duration,
+        appear: true,
+        unmountOnExit: true,
+        children: (state) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            className: clsx(s.base, className),
+            "data-transition": state,
+            style,
+            "aria-hidden": true,
+            ...other,
+            ref: domRef,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Backdrop.displayName = "Backdrop";
+export {
+  Backdrop
+};

package/dist/components/Backdrop/Backdrop.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-backdrop-238ef0";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Backdrop';
+export * from './types';

package/dist/components/Backdrop/types.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type BackdropBaseProps = {
+    /** If `true`, the component is shown. */
+    open?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    duration?: number;
+    /** z-index. */
+    zIndex?: CSSProperties['zIndex'];
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string;
+};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { BadgeBaseProps } from './index';
+export declare const Badge: import("@koobiq/react-core").PolyForwardComponent<"span", BadgeBaseProps, ElementType>;
+export type BadgeProps<As extends ElementType = 'span'> = ComponentPropsWithRef<typeof Badge<As>>;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import s from "./Badge.module.css.js";
+const Badge = polymorphicForwardRef(
+  ({
+    variant = "fade-contrast",
+    as: Tag = "span",
+    size = "normal",
+    className,
+    startIcon,
+    endIcon,
+    label,
+    ...other
+  }, ref) => /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      "data-variant": variant,
+      "data-size": size,
+      ...other,
+      ref,
+      className: clsx(s.base, s[size], s[variant], className),
+      children: [
+        startIcon,
+        /* @__PURE__ */ jsx("span", { className: s.label, children: label }),
+        endIcon
+      ]
+    }
+  )
+);
+export {
+  Badge
+};

package/dist/components/Badge/Badge.module.css.js

@@ -0,0 +1,42 @@
+const base = "kbq-badge-ef7338";
+const label = "kbq-badge-label-780747";
+const compact = "kbq-badge-compact-4e1018";
+const normal = "kbq-badge-normal-4b4e05";
+const theme = "kbq-badge-theme-ea1b1d";
+const error = "kbq-badge-error-03bdde";
+const warning = "kbq-badge-warning-e86fa3";
+const success = "kbq-badge-success-e7ef93";
+const contrast = "kbq-badge-contrast-3759ce";
+const s = {
+  base,
+  label,
+  compact,
+  normal,
+  theme,
+  "fade-theme": "kbq-badge-fade-theme-3235e5",
+  "outline-fade-theme": "kbq-badge-outline-fade-theme-c19181",
+  error,
+  "fade-error": "kbq-badge-fade-error-6f260a",
+  "outline-fade-error": "kbq-badge-outline-fade-error-857d1a",
+  warning,
+  "fade-warning": "kbq-badge-fade-warning-13f89c",
+  "outline-fade-warning": "kbq-badge-outline-fade-warning-bd27c4",
+  success,
+  "fade-success": "kbq-badge-fade-success-c1c765",
+  "outline-fade-success": "kbq-badge-outline-fade-success-bf13bf",
+  contrast,
+  "fade-contrast": "kbq-badge-fade-contrast-64c817",
+  "outline-fade-contrast": "kbq-badge-outline-fade-contrast-8fc813"
+};
+export {
+  base,
+  compact,
+  contrast,
+  s as default,
+  error,
+  label,
+  normal,
+  success,
+  theme,
+  warning
+};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './types';

package/dist/components/Badge/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export declare const badgePropSize: readonly ["compact", "normal"];
+export type BadgePropSize = (typeof badgePropSize)[number];
+export declare const badgePropVariant: readonly ["theme", "fade-theme", "outline-fade-theme", "error", "fade-error", "outline-fade-error", "warning", "fade-warning", "outline-fade-warning", "success", "fade-success", "outline-fade-success", "contrast", "fade-contrast", "outline-fade-contrast"];
+export type BadgePropVariant = (typeof badgePropVariant)[number];
+export type BadgeBaseProps = {
+    /** The variant to use. */
+    variant?: BadgePropVariant;
+    /** The size of the component. */
+    size?: BadgePropSize;
+    /** The label of the component. */
+    label?: ReactNode;
+    /** Icon placed before the children. */
+    startIcon?: ReactNode;
+    /** Icon placed after the children. */
+    endIcon?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    children?: never;
+};

package/dist/components/Badge/types.js

@@ -0,0 +1,22 @@
+const badgePropSize = ["compact", "normal"];
+const badgePropVariant = [
+  "theme",
+  "fade-theme",
+  "outline-fade-theme",
+  "error",
+  "fade-error",
+  "outline-fade-error",
+  "warning",
+  "fade-warning",
+  "outline-fade-warning",
+  "success",
+  "fade-success",
+  "outline-fade-success",
+  "contrast",
+  "fade-contrast",
+  "outline-fade-contrast"
+];
+export {
+  badgePropSize,
+  badgePropVariant
+};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { ButtonBaseProps } from './types.js';
+export declare const Button: import("@koobiq/react-core").PolyForwardComponent<"button", ButtonBaseProps, ElementType>;
+export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithRef<typeof Button<As>>;

package/dist/components/Button/Button.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Button as Button$1 } from "@koobiq/react-primitives";
+import s from "./Button.module.css.js";
+const Button = polymorphicForwardRef(
+  ({
+    as: Tag = "button",
+    variant = "contrast-filled",
+    onlyIcon = false,
+    fullWidth = false,
+    progress = false,
+    disabled = false,
+    children,
+    startIcon,
+    endIcon,
+    className,
+    ...other
+  }, ref) => {
+    const iconOnly = (!children || onlyIcon) && (startIcon || endIcon);
+    const classNameFn = ({
+      hovered,
+      disabled: disabled2,
+      loading,
+      focusVisible,
+      pressed
+    }) => clsx(
+      s.base,
+      variant && s[variant],
+      hovered && s.hovered,
+      pressed && s.pressed,
+      onlyIcon && s.onlyIcon,
+      disabled2 && s.disabled,
+      loading && s.progress,
+      fullWidth && s.fullWidth,
+      focusVisible && s.focusVisible,
+      className
+    );
+    return /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        as: Tag,
+        loading: progress,
+        disabled,
+        className: classNameFn,
+        ...other,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: s.content, children: [
+            iconOnly,
+            !iconOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+              startIcon,
+              /* @__PURE__ */ jsx("span", { className: s.label, children }),
+              endIcon
+            ] })
+          ] }),
+          progress && /* @__PURE__ */ jsx("div", { className: s.loader })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};