adnbn-ui 0.0.1 → 0.0.2

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,58 @@
+import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./footer.module.scss";
+
+export interface FooterProps extends ComponentProps<"footer"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    shadow?: boolean;
+    reverse?: boolean;
+    leftClassName?: string;
+    rightClassName?: string;
+    childrenClassName?: string;
+}
+
+const Footer: FC<FooterProps> = props => {
+    const {
+        left,
+        right,
+        shadow,
+        reverse,
+        children,
+        className,
+        leftClassName,
+        rightClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("footer"), ...props};
+
+    return (
+        <footer
+            {...other}
+            className={classnames(
+                styles["footer"],
+                {
+                    [styles["footer--shadow"]]: shadow,
+                    [styles["footer--reverse"]]: reverse,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["footer-children"], childrenClassName)},
+                "div"
+            )}
+            {!children &&
+                cloneOrCreateElement(left, {className: classnames(styles["footer-left"], leftClassName)}, "div")}
+            {!children &&
+                cloneOrCreateElement(right, {className: classnames(styles["footer-right"], rightClassName)}, "div")}
+        </footer>
+    );
+};
+
+export default memo(Footer);

package/src/components/Footer/footer.module.scss

@@ -0,0 +1,44 @@
+$root: footer;
+
+.#{$root} {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--footer-padding, var(--side-padding-sm));
+  padding-top: 0;
+  background-color: var(--footer-background-color, transparent);
+  transition:
+    background-color var(--transition-speed-sm),
+    box-shadow var(--transition-speed-sm);
+
+  &--shadow {
+    box-shadow: var(--footer-box-shadow, 0px -4px 4px 0px rgba(0, 0, 0, 0.03));
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &-children {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .#{$root}--reverse & {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &-left {
+    display: flex;
+    align-items: center;
+    gap: var(--footer-left-gap, var(--footer-gap, 15px));
+  }
+
+  &-right {
+    display: flex;
+    align-items: center;
+    gap: var(--footer-right-gap, var(--footer-gap, 15px));
+  }
+}

package/src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+export {default as Footer} from "./Footer";
+export type {FooterProps} from "./Footer";

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,49 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import HeaderComponent from "./Header";
+
+const meta: Meta<typeof HeaderComponent> = {
+    title: "Components/Header",
+    component: HeaderComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        before: hideInTable,
+        after: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+        wrapClassName: hideInTable,
+        titleClassName: hideInTable,
+        beforeClassName: hideInTable,
+        afterClassName: hideInTable,
+        subtitleClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+    decorators: [
+        Story => (
+            <div
+                style={{background: "var(--bg-secondary-color", width: "380px", height: "300px", borderRadius: "10px"}}
+            >
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+export const Header: StoryObj<typeof HeaderComponent> = {
+    args: {
+        title: "Volume Up Plus",
+        subtitle: "Adjust the current tab's volume with the slider. Switch to any audio tab in one click.",
+    },
+};
+
+export const WithLogo: StoryObj<typeof HeaderComponent> = {
+    args: {
+        title: "Volume Up Plus",
+        subtitle: "Adjust the current tab's volume with the slider. Switch to any audio tab in one click.",
+        before: "❤️",
+    },
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,73 @@
+import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./header.module.scss";
+
+export interface HeaderProps extends Omit<ComponentProps<"header">, "title"> {
+    title?: ReactNode;
+    before?: ReactNode;
+    after?: ReactNode;
+    subtitle?: ReactNode;
+    wrapClassName?: string;
+    titleClassName?: string;
+    beforeClassName?: string;
+    afterClassName?: string;
+    subtitleClassName?: string;
+    childrenClassName?: string;
+    alignCenter?: boolean;
+}
+
+const Header: FC<HeaderProps> = props => {
+    const {
+        title,
+        before,
+        after,
+        subtitle,
+        className,
+        wrapClassName,
+        titleClassName,
+        beforeClassName,
+        afterClassName,
+        subtitleClassName,
+        childrenClassName,
+        alignCenter = true,
+        children,
+        ...other
+    } = {...useComponentProps("header"), ...props};
+
+    return (
+        <header
+            {...other}
+            className={classnames(
+                styles["header"],
+                {
+                    [styles["header--center"]]: alignCenter,
+                },
+                className
+            )}
+        >
+            {(title || subtitle) && (
+                <div className={classnames(styles["header__wrap"], wrapClassName)}>
+                    <h1 className={classnames(styles["header__title"], titleClassName)}>
+                        {cloneOrCreateElement(before, {className: beforeClassName})}
+                        {title}
+                        {cloneOrCreateElement(after, {className: afterClassName})}
+                    </h1>
+
+                    {cloneOrCreateElement(
+                        subtitle,
+                        {className: classnames(styles["header__subtitle"], subtitleClassName)},
+                        "h2"
+                    )}
+                </div>
+            )}
+
+            {cloneOrCreateElement(children, {className: childrenClassName}, "div")}
+        </header>
+    );
+};
+
+export default memo(Header);

package/src/components/Header/header.module.scss

@@ -0,0 +1,56 @@
+$root: header;
+
+.#{$root} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  gap: var(--header-gap, 10px);
+  padding: var(--header-padding, var(--side-padding-sm));
+  padding-bottom: 0;
+
+  &__wrap {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    gap: var(--header-wrap-gap, 10px);
+  }
+
+  &__title,
+  &__subtitle {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--header-title-gap, 12px);
+    color: var(--header-title-color, var(--text-primary-color));
+    font-size: var(--header-title-font-size, 25px);
+    font-family: var(--header-title-font-family, var(--font-family)), "sans-serif";
+    font-weight: var(--header-title-font-weight, 700);
+    line-height: var(--header-title-line-height, 120%);
+    will-change: color;
+    transition: color var(--transition-speed);
+
+    .#{$root}--center & {
+      justify-content: center;
+    }
+  }
+
+  &__subtitle {
+    color: var(--header-subtitle-color, var(--text-secondary-color));
+    font-size: var(--header-subtitle-font-size, 14px);
+    font-family: var(--header-subtitle-font-family, var(--font-family)), "sans-serif";
+    font-weight: var(--header-subtitle-font-weight, 400);
+    line-height: var(--header-subtitle-line-height, 120%);
+    white-space: wrap;
+
+    .#{$root}--center & {
+      text-align: center;
+    }
+  }
+}

package/src/components/Header/index.ts

@@ -0,0 +1,2 @@
+export {default as Header} from "./Header";
+export type {HeaderProps} from "./Header";

package/src/components/Highlight/Highlight.stories.tsx

@@ -0,0 +1,83 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import HighlightComponent, {HighlightColor} from "./Highlight";
+
+const colors: (HighlightColor | "default")[] = [
+    "default",
+    HighlightColor.Primary,
+    HighlightColor.Secondary,
+    HighlightColor.Accent,
+];
+const searchWords = ["Adjust", "volume", "switch", "audio"];
+const textToHighlight = "Adjust the current tab's volume with the slider. Switch to any audio tab in one click";
+
+const meta: Meta<typeof HighlightComponent> = {
+    title: "Components/Highlighter",
+    component: HighlightComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        color: {
+            options: colors,
+            control: {type: "select"},
+        },
+        searchWords: {
+            description:
+                "Array of search words. String search terms are automatically cast to RegExps unless autoEscape is true.",
+        },
+        activeIndex: {
+            description: "Specify the match index that should be actively highlighted. Use along with activeClassName",
+        },
+        caseSensitive: {
+            description: "Search should be case sensitive; defaults to false",
+        },
+        textToHighlight: {
+            description: "Text to highlight matches in",
+        },
+
+        style: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+    },
+    decorators: [
+        Story => (
+            <div style={{color: "var(--text-primary-color"}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+export const Highlight: StoryObj<typeof HighlightComponent> = {
+    args: {
+        searchWords,
+        textToHighlight,
+        color: undefined,
+        activeIndex: 0,
+        caseSensitive: true,
+    },
+};
+
+export const Color = () => {
+    return (
+        <div>
+            {colors.map(color => (
+                <div key={color} style={{margin: "20px", display: "flex", alignItems: "center"}}>
+                    <span className="item-card__title" style={{width: "150px"}}>
+                        {capitalizeFirstLetter(color)} color
+                    </span>
+
+                    <HighlightComponent
+                        searchWords={searchWords}
+                        textToHighlight={textToHighlight}
+                        color={color !== "default" ? color : undefined}
+                        activeIndex={0}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};

package/src/components/Highlight/Highlight.tsx

@@ -0,0 +1,40 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import Highlighter, {HighlighterProps} from "react-highlight-words";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./highlight.module.scss";
+
+export enum HighlightColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export interface HighlightProps extends HighlighterProps {
+    color?: HighlightColor;
+}
+
+const Highlight: FC<HighlightProps> = props => {
+    const {color, activeClassName, highlightClassName, ...other} = {
+        ...useComponentProps("highlight"),
+        ...props,
+    };
+
+    return (
+        <Highlighter
+            highlightClassName={classnames(
+                styles["highlight"],
+                {
+                    [styles[`highlight--${color}-color`]]: color,
+                },
+                highlightClassName
+            )}
+            activeClassName={classnames(styles["highlight--active"], activeClassName)}
+            {...other}
+        />
+    );
+};
+
+export default memo(Highlight);

package/src/components/Highlight/highlight.module.scss

@@ -0,0 +1,47 @@
+$root: highlight;
+
+.#{$root} {
+  font-size: var(--highlight-font-size, inherit);
+  font-weight: var(--highlight-font-weight, inherit);
+  font-family: var(--highlight-font-family, inherit), sans-serif;
+  color: var(--highlight-color, #fff);
+  background-color: var(--highlight-bg-color, #ffd60a);
+  padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);
+  margin: 0 calc(-1 * var(--highlight-x-padding, 3px));
+  border-radius: var(--highlight-border-radius, 2px);
+
+  &--primary-color {
+    color: var(--highlight-primary-color, #fff);
+    background-color: var(--primary-color);
+  }
+
+  &--secondary-color {
+    color: var(--highlight-secondary-color, #fff);
+    background-color: var(--secondary-color);
+  }
+
+  &--accent-color {
+    color: var(--highlight-accent-color, #fff);
+    background-color: var(--accent-color);
+  }
+
+  &--active {
+    color: var(--highlight-active-color, var(--highlight-color, #fff));
+    background-color: var(--highlight-active-bg-color, #ff801f);
+
+    &.#{$root}--primary-color {
+      color: var(--highlight-active-primary-color, var(--highlight-primary-color, #fff));
+      background-color: color-mix(in srgb, black 40%, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--highlight-active-secondary-color, var(--highlight-secondary-color, #fff));
+      background-color: color-mix(in srgb, black 40%, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--highlight-active-accent-color, var(--highlight-accent-color, #fff));
+      background-color: color-mix(in srgb, black 40%, var(--accent-color));
+    }
+  }
+}

package/src/components/Highlight/index.ts

@@ -0,0 +1,2 @@
+export {default as Highlight, HighlightColor} from "./Highlight";
+export type {HighlightProps} from "./Highlight";

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,46 @@
+import React, {FC, memo, useEffect, ComponentProps} from "react";
+import classnames from "classnames";
+import {useComponentProps, useIcons} from "../../providers";
+
+import styles from "./icon.module.scss";
+
+export interface IconProps extends ComponentProps<"svg"> {
+    name: string;
+    size?: number;
+}
+
+const Icon: FC<IconProps> = props => {
+    const {
+        name,
+        className,
+        size = 24,
+        width = size,
+        height = size,
+        ...other
+    } = {...useComponentProps("icon"), ...props};
+
+    const {icons, registerIcon} = useIcons();
+
+    useEffect(() => icons[name] && registerIcon(name), [name, icons, registerIcon]);
+
+    if (!icons[name]) {
+        console.warn(`Icon "${name}" not found.`);
+
+        return (
+            <span
+                className={styles["icon--default"]}
+                style={{fontSize: `${width}px`, lineHeight: `${width}px`, width, height}}
+            >
+                ⁇
+            </span>
+        );
+    }
+
+    return (
+        <svg className={classnames(styles["icon"], className)} width={width} height={height} {...other}>
+            <use href={`#${name}`} />
+        </svg>
+    );
+};
+
+export default memo(Icon);

package/src/components/Icon/icon.module.scss

@@ -0,0 +1,17 @@
+.icon {
+  color: var(--icon-color);
+  transition:
+    transform var(--transition-speed-sm),
+    color var(--transition-speed-sm);
+
+  &:hover {
+    color: var(--icon-color-hover);
+    transform: scale(var(--icon-scale, 1));
+  }
+
+  &--default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export {default as Icon} from "./Icon";
+export type {IconProps} from "./Icon";