@react5/ui 1.0.26 → 1.0.28

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

@@ -1,45 +1,45 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Submenu } from './Submenu';
-
-const meta: Meta<typeof Submenu> = {
-  component: Submenu,
-};
-
-export default meta;
-type Story = StoryObj<typeof Submenu>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-const items = [
-  {
-    label: 'Item 1',
-    value: 'item1',
-  },
-  {
-    label: 'Item 2',
-    value: 'item2',
-  },
-  {
-    label: 'Item 3',
-    value: 'item3',
-  },
-  {
-    label: 'Item 4',
-    value: 'item4',
-  },
-  {
-    label: 'Item 5',
-    value: 'item5',
-  },
-];
-export const Primary: Story = {
-  render: () => (
-    <div style={{ backgroundColor: '#333' }}>
-      <Submenu items={items} selectedItem={items[1]} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Submenu } from './Submenu';
+
+const meta: Meta<typeof Submenu> = {
+  component: Submenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof Submenu>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+const items = [
+  {
+    label: 'Item 1',
+    value: 'item1',
+  },
+  {
+    label: 'Item 2',
+    value: 'item2',
+  },
+  {
+    label: 'Item 3',
+    value: 'item3',
+  },
+  {
+    label: 'Item 4',
+    value: 'item4',
+  },
+  {
+    label: 'Item 5',
+    value: 'item5',
+  },
+];
+export const Primary: Story = {
+  render: () => (
+    <div style={{ backgroundColor: '#333' }}>
+      <Submenu items={items} selectedItem={items[1]} />
+    </div>
+  ),
+};

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

@@ -1,60 +1,60 @@
-import { useState, useRef, useEffect } from "react"
-import './Submenu.scss'
-import { bem } from '../../utils/bem';
-import clsx from "clsx";
-
-export interface ISubmenuItem {
-  label: string
-  value: string
-}
-export interface ISubmenuProps {
-  items: ISubmenuItem[]
-  selectedItem?: ISubmenuItem
-  className?: string
-  onChange?: (item: ISubmenuItem) => void
-  variant?: "primary" | "secondary"
-}
-const b = bem("submenu");
-export const Submenu = ({items, selectedItem, variant="primary", onChange, className}: ISubmenuProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef: any = useRef(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-          setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  const toggleDropdown = () => setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
-  const handleChange = (item: ISubmenuItem) => () => {
-    onChange && onChange(item);
-    setIsOpen(false);
-  }
-
-  const listClass = b("list");
-
-  return (<div className={clsx(b(), className)} ref={dropdownRef}>
-    <button className={b("button")} onClick={toggleDropdown}>
-      {selectedItem?.label || ""}
-      <span className={clsx(b("indicator"), b(`indicator-${variant}`),
-        isOpen && b("indicator", "open"))}
-      />
-    </button>
-    {isOpen && (
-      <ul className={listClass}>
-        {
-          items.map((c, i) => (
-            <li key={i} className={b("item")} onClick={handleChange(c)}>{c.label}</li>
-          ))
-        }
-      </ul>
-    )}
-  </div>
-  )
+import { useState, useRef, useEffect } from "react"
+import './Submenu.scss'
+import { bem } from '../../utils/bem';
+import clsx from "clsx";
+
+export interface ISubmenuItem {
+  label: string
+  value: string
+}
+export interface ISubmenuProps {
+  items: ISubmenuItem[]
+  selectedItem?: ISubmenuItem
+  className?: string
+  onChange?: (item: ISubmenuItem) => void
+  variant?: "primary" | "secondary"
+}
+const b = bem("submenu");
+export const Submenu = ({items, selectedItem, variant="primary", onChange, className}: ISubmenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef: any = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleDropdown = () => setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
+  const handleChange = (item: ISubmenuItem) => () => {
+    onChange && onChange(item);
+    setIsOpen(false);
+  }
+
+  const listClass = b("list");
+
+  return (<div className={clsx(b(), className)} ref={dropdownRef}>
+    <button className={b("button")} onClick={toggleDropdown}>
+      {selectedItem?.label || ""}
+      <span className={clsx(b("indicator"), b(`indicator-${variant}`),
+        isOpen && b("indicator", "open"))}
+      />
+    </button>
+    {isOpen && (
+      <ul className={listClass}>
+        {
+          items.map((c, i) => (
+            <li key={i} className={b("item")} onClick={handleChange(c)}>{c.label}</li>
+          ))
+        }
+      </ul>
+    )}
+  </div>
+  )
 }

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

@@ -1 +1 @@
-export * from "./Submenu"
+export * from "./Submenu"

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

@@ -1,76 +1,76 @@
-.r5ui-success-congratulation {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7); // Slight backdrop overlay
-  overflow: hidden;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 1s ease-out;
-  text-align: center;
-
-  &__icon {
-    background-color: $success_text_color;
-    border-radius: 50%;
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 16px;
-    animation: bounceIn .8s ease-out;
-  }
-  &__favorite {
-    color: $success_color;
-  }
-  &__checkmark {
-    font-size: 48px;
-    color: $success_color;
-  }
-
-  &__message {
-    font-size: 1.25rem;
-    color: $menu_text_color;
-    animation: slideIn 1.2s ease-out;
-  }
-}
-
-// Animations
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes bounceIn {
-  0% {
-    transform: scale(0.3);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.05);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+.r5ui-success-congratulation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7); // Slight backdrop overlay
+  overflow: hidden;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 1s ease-out;
+  text-align: center;
+
+  &__icon {
+    background-color: $success_text_color;
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+    animation: bounceIn .8s ease-out;
+  }
+  &__favorite {
+    color: $success_color;
+  }
+  &__checkmark {
+    font-size: 48px;
+    color: $success_color;
+  }
+
+  &__message {
+    font-size: 1.25rem;
+    color: $menu_text_color;
+    animation: slideIn 1.2s ease-out;
+  }
+}
+
+// Animations
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }

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

@@ -1,17 +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/>,
-};
+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

@@ -1,12 +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();
-  });
+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

@@ -1,64 +1,64 @@
-import './SuccessCongratulation.scss'
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-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>
-  )
-}
+import './SuccessCongratulation.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+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="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

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

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

@@ -1,42 +1,42 @@
-.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;
-    &--left {
-      text-align: left;
-    }
-    &--center {
-      text-align: center;
-    }
-    &--right {
-      text-align: right;
-    }
-  }
-  &__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;
-  }
+.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;
+    &--left {
+      text-align: left;
+    }
+    &--center {
+      text-align: center;
+    }
+    &--right {
+      text-align: right;
+    }
+  }
+  &__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

@@ -1,14 +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" />,
-};
+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" />,
+};