@react5/ui 1.0.26 → 1.0.28

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

@@ -1,68 +1,68 @@
-.r5ui-accordion {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  border: 0 solid $primary_border_color;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  margin: 0;
-  + .accordion {
-    border-top: none;
-  }
-
-  &__toggle-header {
-    color: $page_text_color;
-    background: $page_bg_color;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem;
-    flex: 1;
-    text-align: left;
-    outline: none;
-    display: flex;
-    border: none;
-  }
-
-  &__title {
-    font-size: 1.3rem;
-    font-weight: 500;
-  }
-
-  &__indicator {
-    margin-left: 0.6em;
-    border: solid $secondary_border_color;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 3px;
-    transform: rotate(45deg);
-    transition: transform 0.3s ease;
-    align-self: last;
-  }
-
-  &__indicator--open {
-    transform: rotate(-135deg);
-  }
-
-  &__content {
-    display: none;
-    padding: 0 0 1em 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease, opacity 0.3s ease;
-    max-height: 0;
-    opacity: 0;
-
-    &--open {
-      display: block;
-      max-height: initial; // Adjust max height as needed
-      opacity: 1;
-    }
-  }
-
-  &--open {
-    .accordion__content {
-      display: block;
-    }
-  }
+.r5ui-accordion {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 0 solid $primary_border_color;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  margin: 0;
+  + .accordion {
+    border-top: none;
+  }
+
+  &__toggle-header {
+    color: $page_text_color;
+    background: $page_bg_color;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    flex: 1;
+    text-align: left;
+    outline: none;
+    display: flex;
+    border: none;
+  }
+
+  &__title {
+    font-size: 1.3rem;
+    font-weight: 500;
+  }
+
+  &__indicator {
+    margin-left: 0.6em;
+    border: solid $secondary_border_color;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+    align-self: last;
+  }
+
+  &__indicator--open {
+    transform: rotate(-135deg);
+  }
+
+  &__content {
+    display: none;
+    padding: 0 0 1em 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    max-height: 0;
+    opacity: 0;
+
+    &--open {
+      display: block;
+      max-height: initial; // Adjust max height as needed
+      opacity: 1;
+    }
+  }
+
+  &--open {
+    .accordion__content {
+      display: block;
+    }
+  }
 }

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

@@ -1,37 +1,37 @@
-import React, { useState, ReactNode, useEffect, MouseEvent } from 'react';
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-import './Accordion.scss';
-
-const b = bem('accordion');
-
-interface AccordionProps {
-  title: string;
-  children: ReactNode;
-  className?: string;
-  isOpen?: boolean;
-}
-
-export const Accordion: React.FC<AccordionProps> = ({ title, children, className, isOpen = false }) => {
-  const [isAccOpen, setIsOpen] = useState(isOpen);
-  useEffect(() => {
-    isOpen && setIsOpen(isOpen);    
-  }, [isOpen])
-
-  const toggleAccordion = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setIsOpen((prev) => !prev);
-  };
-  
-  return (
-    <div className={clsx(b(), className, { [b('open')]: isAccOpen })}>
-      <button className={b('toggle-header')} onClick={toggleAccordion}>
-        <h3 className={b('title')}>{title}</h3>
-        <span className={clsx(b("indicator"), isAccOpen && b("indicator", "open"))}></span>
-      </button>
-      <div className={clsx(b('content'), isAccOpen && b('content', 'open'))}>
-        {children}
-      </div>
-    </div>
-  );
+import React, { useState, ReactNode, useEffect, MouseEvent } from 'react';
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+import './Accordion.scss';
+
+const b = bem('accordion');
+
+interface AccordionProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+  isOpen?: boolean;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ title, children, className, isOpen = false }) => {
+  const [isAccOpen, setIsOpen] = useState(isOpen);
+  useEffect(() => {
+    isOpen && setIsOpen(isOpen);    
+  }, [isOpen])
+
+  const toggleAccordion = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsOpen((prev) => !prev);
+  };
+  
+  return (
+    <div className={clsx(b(), className, { [b('open')]: isAccOpen })}>
+      <button className={b('toggle-header')} onClick={toggleAccordion}>
+        <h3 className={b('title')}>{title}</h3>
+        <span className={clsx(b("indicator"), isAccOpen && b("indicator", "open"))}></span>
+      </button>
+      <div className={clsx(b('content'), isAccOpen && b('content', 'open'))}>
+        {children}
+      </div>
+    </div>
+  );
 };

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

@@ -1,63 +1,61 @@
-//@import "../../styles/colors.scss";
-.r5ui-button {
-  display: inline-block;
-  margin: .5em;
-  padding: .5em 1em;
-  border: $border_size solid $primary_border_color;
-  background-color: $primary_bg_color;
-  border-radius: $border_radius;
-  color: $primary_text_color;
-  font-weight: bold;
-  text-decoration: none;
-  text-align: center;
-  transition: color 0.3s ease;
-  cursor: pointer;
-  &:disabled {
-    background-color: $disabled_bg_color;
-    color: $disabled_text_color;
-    border-color: $disabled_border_color;
-    cursor: not-allowed;
-  }
-
-  &:not(:disabled):hover {
-    color: $primary_text_color_highlight;
-  }
-
-  &__primary {
-    background-color: $primary_bg_color;
-    color: $primary_text_color;
-    border-color: $primary_border_color;
-  }
-  &__secondary {
-    background-color: $secondary_bg_color;
-    color: $secondary_text_color;
-    border-color: $secondary_border_color;
-  }
-  &__disabled {
-    background-color: $disabled_bg_color;
-    color: $disabled_text_color;
-    border-color: $disabled_border_color;
-    cursor: not-allowed;
-  }
-  &__link {
-    background: none;
-    border: none;
-    padding: 0;
-    color: $link_color;
-    font: inherit;
-    cursor: pointer;
-    //text-decoration: underline;
-    &:not(:disabled):hover {
-      color: $link_color_highlight;
-      text-decoration: underline;
-    }
-  }
-  &__disabled {
-    color: $disabled_text_color;
-    cursor: not-allowed;
-    &:hover {
-      color: $disabled_text_color;
-      text-decoration: none;
-    }
-  }
+//@import "../../styles/colors.scss";
+.r5ui-button {
+  display: inline-block;
+  margin: .5em;
+  padding: .5em 1em;
+  border: $border_size solid $primary_border_color;
+  background-color: $primary_bg_color;
+  border-radius: $border_radius;
+  color: $primary_text_color;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  transition: color 0.3s ease;
+  cursor: pointer;
+  &:disabled {
+    background-color: $disabled_bg_color;
+    color: $disabled_text_color;
+    border-color: $disabled_border_color;
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled):hover {
+    color: $primary_text_color_highlight;
+  }
+
+  &__primary {
+    background-color: $primary_bg_color;
+    color: $primary_text_color;
+    border-color: $primary_border_color;
+  }
+  &__secondary {
+    background-color: $secondary_bg_color;
+    color: $secondary_text_color;
+    border-color: $secondary_border_color;
+  }
+  &__disabled {
+    background-color: $disabled_bg_color;
+    color: $disabled_text_color;
+    border-color: $disabled_border_color;
+    cursor: not-allowed;
+  }
+  &__link {
+    background: none;
+    border: none;
+    padding: 0;
+    color: $link_color;
+    font: inherit;
+    cursor: pointer;
+    //text-decoration: underline;
+    color: $link_color_highlight;
+    text-decoration: underline;
+  }
+  &__disabled {
+    color: $disabled_text_color;
+    cursor: not-allowed;
+    &:hover {
+      color: $disabled_text_color;
+      text-decoration: none;
+    }
+  }
 }

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

@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Colors from '../../stories/assets/github.svg';
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Example/Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as Meta;
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const TextButton: Story = {
-  render: () => <Button>Test</Button>,
-};
-
-export const IconButton: Story = {
-  render: () => (
-    <Button>
-      <Colors />
-    </Button>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import Colors from '../../stories/assets/github.svg';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const TextButton: Story = {
+  render: () => <Button>Test</Button>,
+};
+
+export const IconButton: Story = {
+  render: () => (
+    <Button>
+      <Colors />
+    </Button>
+  ),
+};

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

@@ -1,40 +1,40 @@
-import { FormEvent, ReactNode, FC, MouseEvent } from 'react';
-import { Link } from 'react-router';
-import './Button.scss';
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-
-interface ButtonProps {
-  to?: string;
-  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  className?: string;
-  variant?: 'primary' | 'secondary' | 'link';
-  type?: 'submit' | 'reset' | 'button';
-  children: ReactNode;
-}
-
-const b = bem('button');
-export const Button: FC<ButtonProps> = ({ className, variant = "primary", type = "button", to, onClick, disabled, children }) => {
-  const c = clsx(b(), b(variant), b(type), disabled && b('disabled'), className);
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    if(onClick) {
-      e.preventDefault();
-      onClick(e);
-    }
-  }
-  if(to) {
-    return (
-      <Link className={c} to={disabled ? '#' : to} aria-disabled={disabled}>
-        {children}
-      </Link>
-    );
-  }
-  return (
-    <button className={c} onClick={handleClick} disabled={disabled} type={type}>
-      {children}
-    </button>
-  );
-};
-
-export default Button;
+import { FormEvent, ReactNode, FC, MouseEvent } from 'react';
+import { Link } from 'react-router';
+import './Button.scss';
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+
+interface ButtonProps {
+  to?: string;
+  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'link';
+  type?: 'submit' | 'reset' | 'button';
+  children: ReactNode;
+}
+
+const b = bem('button');
+export const Button: FC<ButtonProps> = ({ className, variant = "primary", type = "button", to, onClick, disabled, children }) => {
+  const c = clsx(b(), b(variant), b(type), disabled && b('disabled'), className);
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if(onClick) {
+      e.preventDefault();
+      onClick(e);
+    }
+  }
+  if(to) {
+    return (
+      <Link className={c} to={disabled ? '#' : to} aria-disabled={disabled}>
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <button className={c} onClick={handleClick} disabled={disabled} type={type}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

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

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

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

@@ -1,4 +1,4 @@
-.r5ui-buttons-group {
-  display: flex;
-  gap: 0.5em;
+.r5ui-buttons-group {
+  display: flex;
+  gap: 0.5em;
 }

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

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

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

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

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

@@ -1,18 +1,18 @@
-import { ReactNode } from 'react';
-import './ButtonsGroup.scss'
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-
-interface ButtonsGroupProps {
-  className?: string;
-  children: ReactNode;
-}
-const b = bem("buttons-group");
-export const ButtonsGroup = ({children, className}: ButtonsGroupProps) => {
-  return (
-    <div className={clsx(b(), className)}>
-      {children}
-    </div>
-  )
-}
+import { ReactNode } from 'react';
+import './ButtonsGroup.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+
+interface ButtonsGroupProps {
+  className?: string;
+  children: ReactNode;
+}
+const b = bem("buttons-group");
+export const ButtonsGroup = ({children, className}: ButtonsGroupProps) => {
+  return (
+    <div className={clsx(b(), className)}>
+      {children}
+    </div>
+  )
+}
 export default ButtonsGroup

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

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