@react5/ui 1.0.0

package/packages/lib/src/components/SuccessCongratulation/SuccessCongratulation.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SuccessCongratulation } from './SuccessCongratulation';
+
+const meta: Meta<typeof SuccessCongratulation> = {
+  title: 'Example/SuccessCongratulation',
+  component: SuccessCongratulation,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof SuccessCongratulation>;
+
+export const TextSuccessCongratulation: Story = {
+  render: () => <SuccessCongratulation/>,
+};

package/packages/lib/src/components/SuccessCongratulation/SuccessCongratulation.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SuccessCongratulation } from './SuccessCongratulation';
+
+describe('SuccessCongratulation Component', () => {
+  test('renders the button with the correct label', () => {
+    render(<SuccessCongratulation onContinue={jest.fn()} />);
+    const div = screen.getByRole('SuccessCongratulation', { name: /click me/i });
+    expect(div).toBeInTheDocument();
+  });
+});

package/packages/lib/src/components/SuccessCongratulation/SuccessCongratulation.tsx

@@ -0,0 +1,64 @@
+import './SuccessCongratulation.scss'
+import clsx from 'clsx';
+import { bem } from "../../utils";
+import { Toolbar } from '../Toolbar';
+import { IconButton } from '../IconButton';
+import { FaBookmark, FaTrophy } from 'react-icons/fa6';
+import { FormEvent, useEffect } from 'react';
+
+interface SuccessCongratulationProps {
+  message?: string;
+  onContinue?: () => void;
+  onAddToFavorites?: () => void;
+  isFavorite?: boolean;
+  className?: string;
+  continueText?: string;
+}
+const b = bem("success-congratulation");
+export const SuccessCongratulation = ({message = "Congratulations!",
+  onContinue, onAddToFavorites, isFavorite, className, continueText = "Continue"}: SuccessCongratulationProps) => {
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (["Escape", "Enter", " "].includes(event.key)) {
+        event.preventDefault();
+        onContinue?.();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown, false);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onContinue]);
+
+  const handleClick = () => {
+    onContinue?.();
+  };
+  const handleAddToFavorites = (e?: FormEvent) => {
+    e?.stopPropagation();
+    onAddToFavorites?.();
+  }
+
+  return (
+    <div
+      className={clsx(b(), className)}
+      onClick={handleClick}
+      tabIndex={0}
+      role="button"
+      //onAnimationEnd={onAnimationEnd}
+    >
+      <div className={b("icon")}>
+        <FaTrophy className={b("checkmark")}/>
+      </div>
+      <p className={b("message")}>{message}</p>
+      <Toolbar>
+        <IconButton variant='rounded' onClick={onContinue}>{continueText}</IconButton>
+        <IconButton variant='round-outlined' onClick={handleAddToFavorites}>
+          <FaBookmark className={clsx(isFavorite && b("favorite"))}/>
+        </IconButton>
+      </Toolbar>
+    </div>
+  )
+}
+export default SuccessCongratulation

package/packages/lib/src/components/SuccessCongratulation/index.tsx

@@ -0,0 +1 @@
+export * from "./SuccessCongratulation";

package/packages/lib/src/components/TextArea/TextArea.scss

@@ -0,0 +1,33 @@
+.r5ui-text-area {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  
+  margin: 0.5em;
+
+  &__label {
+    flex: 40%;
+    padding: 3px;
+    color: $page_text_color;
+    align-self: start;
+    margin-right: 0.5em;
+  }
+  &__input {
+    flex: 60%;
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    color: $control_text_color;
+    background-color: $control_bg_color;
+  }
+
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 100%;
+  }
+  &__error-container {
+    text-align: right;
+    color: $error_validation_color;
+  }
+}

package/packages/lib/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Example/TextArea',
+  component: TextArea,
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const TextButton: Story = {
+  render: () => <TextArea value="test" name="tf1" />,
+};

package/packages/lib/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,48 @@
+import { ChangeEventHandler, FC, forwardRef, RefObject } from "react";
+import { bem, formatError } from "../../utils";
+import "./TextArea.scss"
+import clsx from "clsx";
+
+interface ITextAreaProps {
+  label?: string;
+  name?: string;
+  error?: string;
+  rows?: number;
+  validationError?: (name?: string) => string | undefined;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  onBlur?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  value?: string;
+  autoFocus?: boolean;
+  className?: string;
+  readonly?: boolean;
+  placeholder?: string;
+  noLabel?: boolean;
+}
+
+const b = bem("text-area");
+export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(({value,
+    onChange, noLabel = false, onBlur, name, rows = 3, className, autoFocus = false,
+    readonly = false, label, error, placeholder }: ITextAreaProps, ref) => {
+  
+  return (<div className={clsx(b(), className)}>
+    <div className={b("wrapper")}>
+      {!noLabel && <label
+        htmlFor={name} className={b("label")}>{label}:</label>}
+      <textarea
+        rows={rows}
+        id={name}
+        name={name}
+        className={b("input")}
+        readOnly={readonly}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        ref={ref}
+        autoFocus={autoFocus}
+        autoComplete="on"
+        placeholder={placeholder}
+      />
+    </div>
+    {error && <div className={b("error-container")}>{formatError(error, label)}</div>}
+  </div>)
+});

package/packages/lib/src/components/TextArea/index.tsx

@@ -0,0 +1 @@
+export * from "./TextArea";

package/packages/lib/src/components/TextField/TextField.scss

@@ -0,0 +1,46 @@
+.r5ui-text-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  //flex: 1;
+  margin: 0.5em;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  &__label {
+    flex: 40%;
+    padding: 3px;
+    color: $page_text_color;
+    align-self: center;
+    margin-right: 0.5em;
+    text-align: right;
+  }
+  &__input-wrapper {
+    flex: 60%;
+    text-align: left;
+  }
+  &__input {
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    color: $control_text_color;
+    background-color: $control_bg_color;
+    &--number {
+      width: 8em;
+    }
+    &--time {
+      width: 8em;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 100%;
+  }
+  &__error-container {
+    text-align: right;
+    color: $error_validation_color;
+  }
+}

package/packages/lib/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from './TextField';
+
+const meta: Meta<typeof TextField> = {
+  title: 'Example/TextField',
+  component: TextField,
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const TextButton: Story = {
+  render: () => <TextField value="test" name="tf1" />,
+};

package/packages/lib/src/components/TextField/TextField.tsx

@@ -0,0 +1,85 @@
+import { ChangeEventHandler, forwardRef, KeyboardEvent, ReactNode } from "react";
+import { bem, formatError } from "../../utils";
+import "./TextField.scss"
+import clsx from "clsx";
+
+interface ITextFieldProps {
+  label?: string;
+  name?: string;
+  error?: string;
+  validationError?: (name?: string) => string | undefined;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: ChangeEventHandler<HTMLInputElement>;
+  onEnter?: () => void;
+  value?: string | number;
+  isPassword?: boolean;
+  autoFocus?: boolean;
+  type?: "text" | "number" | "time" | "date";
+  className?: string;
+  readonly?: boolean;
+  placeholder?: string;
+  noLabel?: boolean;
+  step?: number;
+}
+
+interface ITextFieldWrapperProps {
+  id?: string;
+  name?: string;
+  className?: string;
+  label?: string;
+  children: ReactNode;
+}
+
+const b = bem("text-field");
+
+export const TextFieldWrapper = ({id, name, className, label, children}: ITextFieldWrapperProps) => {
+  return (
+    <div className={clsx(b(), className)}>
+      <div className={b('wrapper')}>
+        <label
+          htmlFor={id || name} className={b("label")}>{label}:</label>
+        <div className={b('input-wrapper')}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+} 
+
+export const TextField = forwardRef<HTMLInputElement, ITextFieldProps>(({isPassword, value,
+  onChange, onEnter, noLabel = false, onBlur, type = 'text', name, className, autoFocus = false,
+  readonly = false, label, error, placeholder, step }: ITextFieldProps, ref) => {
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && onEnter) {
+      e.preventDefault();
+      onEnter();
+    }
+  };
+
+  return (<div className={clsx(b(), className)}>
+    <div className={b("wrapper")}>
+      {!noLabel && <label
+        htmlFor={name} className={b("label")}>{label}:</label>}
+      <div className={b("input-wrapper")}>
+        <input
+            id={name}
+            name={name}
+            className={clsx(b("input"), b("input", type))}
+            readOnly={readonly}
+            type={isPassword ? "password" : type}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            ref={ref}
+            autoFocus={autoFocus}
+            autoComplete="on"
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            step={step}
+        />
+      </div>
+    </div>
+    {error && <div className={b("error-container")}>{formatError(error, label)}</div>}
+  </div>)
+});

package/packages/lib/src/components/TextField/index.tsx

@@ -0,0 +1 @@
+export * from "./TextField";

package/packages/lib/src/components/TitleEdit/TitleEdit.scss

@@ -0,0 +1,18 @@
+.r5ui-title-edit {
+  display: flex;
+  &__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    gap: 0.5em;
+  }
+  &__edit-field {
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    flex: 1;
+  }
+  &__edit-field--number {
+    width: 4em;
+  }
+}

package/packages/lib/src/components/TitleEdit/TitleEdit.tsx

@@ -0,0 +1,70 @@
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import './TitleEdit.scss'
+import { FaCheck, FaPen, FaXmark } from "react-icons/fa6";
+import clsx from "clsx";
+import { bem } from '../../utils';
+import { Typography } from '../Typography';
+import { IconButton } from '../IconButton';
+import { useSetStartupFocus, useKeysEneterEsc } from '../../hooks'
+
+interface TitleEditProps<T extends string | number> {
+  className?: string;
+  name?: string;
+  variant?: 'h1' | 'h2' | 'h3' | 'p' | 'div';
+  value: T;
+  noButton?: boolean;
+  onChange: (newValue: T) => (void);
+  postfix?: string;
+  type?: "text" | "number";
+}
+
+const b = bem("title-edit");
+export const TitleEdit = <T extends string | number, >({className, variant = 'p', noButton = false, 
+  value, type = 'text', onChange, postfix, name}: TitleEditProps<T>) => {
+  
+  const [tempValue, setTempValue] = useState(value)
+  const [isEditing, setEditing] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useSetStartupFocus(inputRef, isEditing);
+  const handleOk = () => {
+    onChange(tempValue)
+    setEditing(false)
+  }
+  const handleCancel = () => {
+    setTempValue(value);
+    setEditing(false)
+  }
+  useKeysEneterEsc(inputRef, handleOk, handleCancel);
+  useEffect(() => {
+    setTempValue(value);
+  }, [value])
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setTempValue(e.target.value as T)
+  }
+  const beginEditing = () => {
+    setEditing(true)
+  }
+  return (
+    <div className={clsx(b(), className)}>
+      {isEditing && <div className={b("container")}>
+        <input
+          id={name}
+          name={name}
+          type={type}
+          className={clsx(b("edit-field"), b("edit-field", type))} 
+          value={tempValue}
+          onChange={handleChange}
+          ref={inputRef}
+          />
+        <IconButton onClick={handleOk}><FaCheck/></IconButton>
+        <IconButton onClick={handleCancel}><FaXmark/></IconButton>
+      </div>
+      }
+      {!isEditing && <div className={b("container")}>
+        <Typography variant={variant} onClick={beginEditing}>{value} {postfix}</Typography>
+        {!noButton && <IconButton onClick={beginEditing}><FaPen/></IconButton>}
+        </div>}
+    </div>
+  )
+}
+export default TitleEdit

package/packages/lib/src/components/TitleEdit/index.tsx

@@ -0,0 +1 @@
+export * from "./TitleEdit"

package/packages/lib/src/components/Toast/Toast.scss

@@ -0,0 +1,33 @@
+.r5ui-toast {
+    background: $primary_bg_color;
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    color: $primary_text_color;
+    display: block;
+    padding: 1em;
+    width: 100%;
+  &--success {
+    background: $success_color;
+    color: $success_text_color;
+  }
+  &--warning {
+    background: $warning_color;
+    color: $warning_text_color;
+  }
+  &--error {
+    background: $error_color;
+    color: $error_text_color;
+  }
+  &__close {
+    float: right;
+    width: 1em;
+    height: 1em;
+    &, &:focus, &:hover {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      outline: none;
+      color: $primary_text_color;
+    }
+  }
+}

package/packages/lib/src/components/Toast/Toast.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import "./Toast.scss";
+import type { ReactNode } from "react";
+import { bem } from "../../utils";
+
+export interface IToastProps {
+  children: ReactNode;
+  type?: "error" | "warning" | "success";
+  onClose?: Function;
+  className?: string;
+}
+
+const b = bem("toast");
+export const Toast = ({type = "success", children, onClose, className}: IToastProps) => {
+  return (
+    <div className={clsx(b(), b('', type), className)}>
+      { children }
+      <button
+        aria-label="Close"
+        className={b('close')}
+        onClick={ () => onClose && onClose() }
+        >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  )
+}
+
+
+export default Toast

package/packages/lib/src/components/Toast/index.tsx

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

package/packages/lib/src/components/ToggleButton/ToggleButton.scss

@@ -0,0 +1,48 @@
+.r5ui-toggle-button {
+  display: inline-block;
+  position: relative;
+  width: 30px;
+  height: 17px;
+  //margin: 0 .5em;
+  margin-right: 0.5em;
+
+  &__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  &__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $primary_border_color;
+    transition: .4s;
+    border-radius: 17px;
+  }
+  
+  &__slider:before {
+    position: absolute;
+    content: "";
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background-color: $control_bg_color;
+    //background-color: $menu_text_color;
+    transition: .4s;
+    border-radius: 50%;
+  }
+    
+  &__input:checked + &__slider {
+    background-color: $primary_bg_color;
+  }
+  
+  &__input:checked + &__slider:before {
+    transform: translateX(13px);
+  }
+ 
+}

package/packages/lib/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,22 @@
+import { Fragment } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButton } from './ToggleButton';
+
+const meta: Meta<typeof ToggleButton> = {
+  title: 'Example/ToggleButton',
+  component: ToggleButton,
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof ToggleButton>;
+
+export const SampleToggleButton: Story = {
+  render: () => (
+    <Fragment>
+      <ToggleButton checked={true} onChange={() => {}} label="Test" name="Checked CB" />
+      <br />
+      <br />
+      <ToggleButton checked={false} onChange={() => {}} label="Test" name="Unchecked CB" />
+    </Fragment>
+  ),
+};

package/packages/lib/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,41 @@
+import { ChangeEventHandler, FC, Fragment, forwardRef } from "react";
+import { bem, formatError } from "../../utils";
+import "./ToggleButton.scss";
+import clsx from "clsx";
+
+interface IToggleButtonProps {
+  label?: string;
+  name?: string;
+  error?: string;
+  validationError?: (name?: string) => string | undefined;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  autoFocus?: boolean;
+  className?: string;
+  readonly?: boolean;
+  checked?: boolean;
+}
+
+const b = bem("toggle-button");
+export const ToggleButton : FC<IToggleButtonProps> = forwardRef(({checked, onChange,
+  name, className, autoFocus = false, readonly = false, label, error }, ref: any) => {
+
+  return (<Fragment>
+    <label className={clsx(b(), className)}>
+      <input
+        id={name}
+        name={name}
+        className={b("input")}
+        readOnly={readonly}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        ref={ref}
+        autoFocus={autoFocus}
+        autoComplete="on"
+      />
+      <span className={b("slider")}></span>
+    </label>
+    <span className={b("label")}>{label}</span>
+    {error && <div>{formatError(error, label)}</div>}
+  </Fragment>)
+});

package/packages/lib/src/components/ToggleButton/index.tsx

@@ -0,0 +1 @@
+export * from "./ToggleButton";

package/packages/lib/src/components/Toolbar/Toolbar.scss

@@ -0,0 +1,17 @@
+.r5ui-toolbar {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+
+  &--right {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+  &--center {
+    justify-content: center;
+    margin: 0 auto;
+  }
+  &--vertical {
+    flex-direction: column;
+  }
+}

package/packages/lib/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toolbar } from './Toolbar';
+
+const meta: Meta<typeof Toolbar> = {
+  title: 'Example/Toolbar',
+  component: Toolbar,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof Toolbar>;
+
+export const TextToolbar: Story = {
+  render: () => <Toolbar>Test</Toolbar>,
+};

package/packages/lib/src/components/Toolbar/Toolbar.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Toolbar } from './Toolbar';
+
+describe('Toolbar Component', () => {
+  test('renders the button with the correct label', () => {
+    render(<Toolbar >test</Toolbar>);
+    const div = screen.getByText('test');
+    expect(div).toBeInTheDocument();
+  });
+});