@react5/ui 1.0.11 → 1.0.13

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

@@ -1,72 +1,72 @@
-.r5ui-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-
-  &__content {
-    background: $page_bg_color;
-    color: $page_text_color;
-    padding: 4px;
-    border-radius: 8px;
-    max-height: 100vh;
-    width: 96%;
-    position: relative;
-    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
-  }
-  &__content--small {
-    max-width: 480px;
-  }
-  &__content--medium {
-    max-width: 720px;
-    min-height: 60vh;
-  }
-  &__content--large {
-    max-width: 1080px;
-    min-height: 90vh;
-  }
-
-  &__close {
-    position: absolute;
-    top: 5px;
-    right: 8px;
-  }
-
-  &__title {
-    text-align: center;
-    margin: 0.5em;
-  }
-
-  &__modal-body {
-    margin: 0;
-    //max-height: 80vh;
-    overflow-y: auto;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    margin: 0 0.5em 0.5em 0.5em;
-    margin-bottom: 10px;
-    min-height: 2em;
-  }
-  &__body {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    max-height: 90vh;
-    overflow-y: auto;
-  }
-  &__footer {
-    display: flex;
-    flex-direction: column;
-    margin-top: 10px;
-    width: 100%;
-  }
+.r5ui-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+
+  &__content {
+    background: $page_bg_color;
+    color: $page_text_color;
+    padding: 4px;
+    border-radius: 8px;
+    max-height: 100vh;
+    width: 96%;
+    position: relative;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
+  }
+  &__content--small {
+    max-width: 480px;
+  }
+  &__content--medium {
+    max-width: 720px;
+    min-height: 60vh;
+  }
+  &__content--large {
+    max-width: 1080px;
+    min-height: 90vh;
+  }
+
+  &__close {
+    position: absolute;
+    top: 5px;
+    right: 8px;
+  }
+
+  &__title {
+    text-align: center;
+    margin: 0.5em;
+  }
+
+  &__modal-body {
+    margin: 0;
+    //max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    margin: 0 0.5em 0.5em 0.5em;
+    margin-bottom: 10px;
+    min-height: 2em;
+  }
+  &__body {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    width: 100%;
+  }
 }

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

@@ -1,61 +1,61 @@
-import { bem } from '../../utils/bem';
-import type { ReactNode, FC } from 'react';
-import './Modal.scss'
-import { Typography } from '../Typography';
-import clsx from 'clsx';
-import { IconButton } from '../IconButton';
-import { FaXmark } from 'react-icons/fa6';
-
-export interface IModalProps {
-  title?: string;
-  className?: string;
-  onClose?: () => void;
-  children: ReactNode;
-  variant?: 'small' | 'medium' | 'large';
-}
-const b = bem("modal");
-export const Modal = ({className, children, onClose, title, variant = 'large'}: IModalProps) => {
-  return (
-    <div className={clsx(b(), className)}>
-      <div className={clsx(b("content"), b("content", variant))} onClick={(e) => e.stopPropagation()}>
-        <Typography className={b("title")}  variant='h3'>{title}</Typography>
-        {onClose && <IconButton className={b("close")} variant='round-outlined' onClick={onClose}>
-          <FaXmark/>
-        </IconButton>}
-        <div className={b("modal-body")}>{children}</div>
-      </div>
-    </div>
-  )
-}
-
-export interface IModalHeaderProps {
-  className?: string;
-  children?: ReactNode;
-}
-const Header: FC<IModalHeaderProps> = ({ children, className }) => {
-  return <div className={clsx(b('header'), className)}>{children}</div>;
-};
-
-Modal.Header = Header;
-
-export interface IModalBodyProps {
-  className?: string;
-  children: ReactNode;
-}
-const Body: FC<IModalBodyProps> = ({ children, className }) => {
-  return <div className={clsx(b('body'), className)}>{children}</div>;
-};
-
-Modal.Body = Body;
-
-export interface IModalActionsProps {
-  className?: string;
-  children: ReactNode;
-}
-const Footer: FC<IModalActionsProps> = ({ children, className }) => {
-  return <div className={clsx(b('footer'), className)}>{children}</div>;
-};
-
-Modal.Footer = Footer;
-
+import { bem } from '../../utils/bem';
+import type { ReactNode, FC } from 'react';
+import './Modal.scss'
+import { Typography } from '../Typography';
+import clsx from 'clsx';
+import { IconButton } from '../IconButton';
+import { FaXmark } from 'react-icons/fa6';
+
+export interface IModalProps {
+  title?: string;
+  className?: string;
+  onClose?: () => void;
+  children: ReactNode;
+  variant?: 'small' | 'medium' | 'large';
+}
+const b = bem("modal");
+export const Modal = ({className, children, onClose, title, variant = 'large'}: IModalProps) => {
+  return (
+    <div className={clsx(b(), className)}>
+      <div className={clsx(b("content"), b("content", variant))} onClick={(e) => e.stopPropagation()}>
+        <Typography className={b("title")}  variant='h3'>{title}</Typography>
+        {onClose && <IconButton className={b("close")} variant='round-outlined' onClick={onClose}>
+          <FaXmark/>
+        </IconButton>}
+        <div className={b("modal-body")}>{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export interface IModalHeaderProps {
+  className?: string;
+  children?: ReactNode;
+}
+const Header: FC<IModalHeaderProps> = ({ children, className }) => {
+  return <div className={clsx(b('header'), className)}>{children}</div>;
+};
+
+Modal.Header = Header;
+
+export interface IModalBodyProps {
+  className?: string;
+  children: ReactNode;
+}
+const Body: FC<IModalBodyProps> = ({ children, className }) => {
+  return <div className={clsx(b('body'), className)}>{children}</div>;
+};
+
+Modal.Body = Body;
+
+export interface IModalActionsProps {
+  className?: string;
+  children: ReactNode;
+}
+const Footer: FC<IModalActionsProps> = ({ children, className }) => {
+  return <div className={clsx(b('footer'), className)}>{children}</div>;
+};
+
+Modal.Footer = Footer;
+
 export default Modal

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

@@ -1,52 +1,52 @@
-.r5ui-navbar {
-  display: flex;
-  justify-content: right;
-  align-items: end;
-  margin: 0 1em;
-  &__container {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-basis: 100%;
-  }
-  &__item {
-    margin: 0;
-    margin-left: 1em;
-    display: flex;
-    align-items: center;
-  }
-  &__expand-button {
-    margin: 0;
-    padding: 0;
-    display: none;
-    background: none;
-    border: $border_size solid $primary_border_color;
-    border-radius: $border_radius;
-    width: 36px;
-    height: 36px;
-    cursor: pointer;
-    color: $secondary_text_color;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (max-width: 240px) {
-  .navbar {
-    flex-direction: column;
-    &__container {
-      display: none;
-      flex-direction: column;
-      &--open {
-        display: flex;
-        align-items: end;
-      }
-    }
-    &__expand-button {
-      display: flex;
-    }
-  }
-}
-
+.r5ui-navbar {
+  display: flex;
+  justify-content: right;
+  align-items: end;
+  margin: 0 1em;
+  &__container {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-basis: 100%;
+  }
+  &__item {
+    margin: 0;
+    margin-left: 1em;
+    display: flex;
+    align-items: center;
+  }
+  &__expand-button {
+    margin: 0;
+    padding: 0;
+    display: none;
+    background: none;
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    color: $secondary_text_color;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 240px) {
+  .navbar {
+    flex-direction: column;
+    &__container {
+      display: none;
+      flex-direction: column;
+      &--open {
+        display: flex;
+        align-items: end;
+      }
+    }
+    &__expand-button {
+      display: flex;
+    }
+  }
+}
+

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

@@ -1,25 +1,25 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Navbar } from './Navbar';
-
-const meta: Meta<typeof Navbar> = {
-  component: Navbar,
-};
-
-export default meta;
-type Story = StoryObj<typeof Navbar>;
-
-/*
- *👇 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.
- */
-export const Primary: Story = {
-  render: () => (
-    <div style={{ backgroundColor: '#333' }}>
-      <Navbar>
-        <a href="#">Link</a>
-      </Navbar>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Navbar } from './Navbar';
+
+const meta: Meta<typeof Navbar> = {
+  component: Navbar,
+};
+
+export default meta;
+type Story = StoryObj<typeof Navbar>;
+
+/*
+ *👇 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.
+ */
+export const Primary: Story = {
+  render: () => (
+    <div style={{ backgroundColor: '#333' }}>
+      <Navbar>
+        <a href="#">Link</a>
+      </Navbar>
+    </div>
+  ),
+};

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

@@ -1,39 +1,39 @@
-import { ReactNode, Children, useState, useRef } from "react"
-import './Navbar.scss'
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-import { FaBars } from "react-icons/fa6";
-import { useClickOutside } from "../../hooks";
-
-export interface INavbarProps {
-  children: ReactNode
-  className?: string
-}
-const b = bem("navbar");
-export const Navbar = ({children, className}: INavbarProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const dropdownRef = useRef<HTMLUListElement | null>(null);
-  useClickOutside([buttonRef, dropdownRef], () => setIsOpen(false));
-
-  const toggleDropdown = () => setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
-  return (<nav className={clsx(b(), className)}>
-    <button 
-      className={b("expand-button")} 
-      onClick={toggleDropdown} 
-      ref={buttonRef}>
-        <FaBars/>
-    </button>
-    <ul 
-      className={clsx(b("container"), isOpen && b("container", "open"))}
-      ref={dropdownRef}
-    >
-      {
-        Children.map(children, (c, i) => (
-          <li key={i} className={b("item")}>{c}</li>
-        ))
-      }
-    </ul>
-  </nav>
-  )
+import { ReactNode, Children, useState, useRef } from "react"
+import './Navbar.scss'
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+import { FaBars } from "react-icons/fa6";
+import { useClickOutside } from "../../hooks";
+
+export interface INavbarProps {
+  children: ReactNode
+  className?: string
+}
+const b = bem("navbar");
+export const Navbar = ({children, className}: INavbarProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const dropdownRef = useRef<HTMLUListElement | null>(null);
+  useClickOutside([buttonRef, dropdownRef], () => setIsOpen(false));
+
+  const toggleDropdown = () => setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
+  return (<nav className={clsx(b(), className)}>
+    <button 
+      className={b("expand-button")} 
+      onClick={toggleDropdown} 
+      ref={buttonRef}>
+        <FaBars/>
+    </button>
+    <ul 
+      className={clsx(b("container"), isOpen && b("container", "open"))}
+      ref={dropdownRef}
+    >
+      {
+        Children.map(children, (c, i) => (
+          <li key={i} className={b("item")}>{c}</li>
+        ))
+      }
+    </ul>
+  </nav>
+  )
 }

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

@@ -1,16 +1,16 @@
-.r5ui-navbar-link {
-  text-decoration: none;
-  margin: 10px;
-  color: $secondary_text_color;
-  @media (min-width: 640px) {
-    font-weight: 600;
-  }
-  &:hover,
-  &:focus{
-    color: $secondary_text_color;
-    text-decoration: underline;
-  }
-  &:active{
-    color: $secondary_text_color_highlight;
-  }
+.r5ui-navbar-link {
+  text-decoration: none;
+  margin: 10px;
+  color: $secondary_text_color;
+  @media (min-width: 640px) {
+    font-weight: 600;
+  }
+  &:hover,
+  &:focus{
+    color: $secondary_text_color;
+    text-decoration: underline;
+  }
+  &:active{
+    color: $secondary_text_color_highlight;
+  }
 }

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

@@ -1,34 +1,34 @@
-import type { ReactNode } from 'react';
-import "./NavbarLink.scss";
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-
-export interface INavbarLinkProps {
-  to?: string;
-  onClick?: () => void;
-  children: ReactNode;
-  component?: any;
-  className?: string;
-}
-
-const b = bem("navbar-link");
-export const NavbarLink = ({ to, children, onClick, component: Component, className }: INavbarLinkProps) => {
-  if(Component) {
-    return (
-      <Component
-        className={clsx(b(), className)}
-        to={to}
-      >{children}</Component>)
-  }
-  else if(onClick)
-    return (
-      <a
-        className={clsx(b(), className)}
-        href="#"
-        onClick={onClick}
-      >{children}</a>
-    );
-  return <a>{children}</a>;
-}
-
-export default NavbarLink
+import type { ReactNode } from 'react';
+import "./NavbarLink.scss";
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+
+export interface INavbarLinkProps {
+  to?: string;
+  onClick?: () => void;
+  children: ReactNode;
+  component?: any;
+  className?: string;
+}
+
+const b = bem("navbar-link");
+export const NavbarLink = ({ to, children, onClick, component: Component, className }: INavbarLinkProps) => {
+  if(Component) {
+    return (
+      <Component
+        className={clsx(b(), className)}
+        to={to}
+      >{children}</Component>)
+  }
+  else if(onClick)
+    return (
+      <a
+        className={clsx(b(), className)}
+        href="#"
+        onClick={onClick}
+      >{children}</a>
+    );
+  return <a>{children}</a>;
+}
+
+export default NavbarLink