@react5/ui 1.0.27 → 1.0.28

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

@@ -1,44 +1,44 @@
-import { FormEvent, MouseEvent, ReactNode } from 'react';
-import './IconButton.scss'
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-import { Link } from 'react-router';
-
-interface IconButtonProps {
-  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  className?: string;
-  children: ReactNode;
-  title?: string;
-  variant?: "none" | "round" | "rounded" | "round-outlined";
-  type?: 'submit' | 'reset' | 'button';
-  to?: string;
-}
-const b = bem("icon-button");
-export const IconButton = ({children, onClick, className, title, to, variant = "none", type, disabled}: IconButtonProps) => {
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    onClick && onClick(e);
-  }
-  if(to) {
-    return (
-      <Link className={clsx(b(), b(variant), className)}
-        to={to}
-        title={title}
-        type={type}
-      >{children}</Link>
-    )
-  }
-  else {
-    return (
-      <button
-        className={clsx(b(), b(variant), className)}
-        onClick={handleClick}
-        disabled={disabled}
-        title={title}
-        type={type}
-      >{children}</button>
-    );
-  }
-}
-export default IconButton
+import { FormEvent, MouseEvent, ReactNode } from 'react';
+import './IconButton.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+import { Link } from 'react-router';
+
+interface IconButtonProps {
+  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+  title?: string;
+  variant?: "none" | "round" | "rounded" | "round-outlined";
+  type?: 'submit' | 'reset' | 'button';
+  to?: string;
+}
+const b = bem("icon-button");
+export const IconButton = ({children, onClick, className, title, to, variant = "none", type, disabled}: IconButtonProps) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    onClick && onClick(e);
+  }
+  if(to) {
+    return (
+      <Link className={clsx(b(), b(variant), className)}
+        to={to}
+        title={title}
+        type={type}
+      >{children}</Link>
+    )
+  }
+  else {
+    return (
+      <button
+        className={clsx(b(), b(variant), className)}
+        onClick={handleClick}
+        disabled={disabled}
+        title={title}
+        type={type}
+      >{children}</button>
+    );
+  }
+}
+export default IconButton

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

@@ -1,14 +1,14 @@
-// .r5ui-menu-item {
-//   color: $secondary_text_color;
-//   padding: .5em 1em;
-//   text-decoration: none;
-//   display: block;
-//   cursor: pointer;
-//   border: 0;
-//   background: none;
-
-//   &:hover {
-//     //background-color: $secondary_bg_color_highlight;
-//     text-decoration: underline;
-//   }
+// .r5ui-menu-item {
+//   color: $secondary_text_color;
+//   padding: .5em 1em;
+//   text-decoration: none;
+//   display: block;
+//   cursor: pointer;
+//   border: 0;
+//   background: none;
+
+//   &:hover {
+//     //background-color: $secondary_bg_color_highlight;
+//     text-decoration: underline;
+//   }
 // }

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

@@ -1,36 +1,36 @@
-import React, { ReactNode } from 'react';
-import { Link } from 'react-router';
-import './MenuItem.scss';
-import clsx from 'clsx';
-import { bem } from '../../utils/bem';
-
-interface MenuItemProps {
-  to?: string;
-  onClick?: (e?: React.FormEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  className?: string;
-  children: React.ReactNode;
-  component?: ReactNode;
-}
-
-const b = bem('menu-item');
-export const MenuItem: React.FC<MenuItemProps> = ({ className, to, onClick, component, disabled, children }) => {
-  const c = clsx(b(), className);
-  if(component) {
-    return <div className={className}>{component}</div>;
-  }
-  if(to) {
-    return (
-      <Link className={c} to={to} onClick={(() => {onClick && onClick()})}>
-        {children}
-      </Link>
-    );
-  }
-  return (
-    <button className={c} onClick={onClick} disabled={disabled}>
-      {children}
-    </button>
-  );
-};
-
-export default MenuItem;
+import React, { ReactNode } from 'react';
+import { Link } from 'react-router';
+import './MenuItem.scss';
+import clsx from 'clsx';
+import { bem } from '../../utils/bem';
+
+interface MenuItemProps {
+  to?: string;
+  onClick?: (e?: React.FormEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  component?: ReactNode;
+}
+
+const b = bem('menu-item');
+export const MenuItem: React.FC<MenuItemProps> = ({ className, to, onClick, component, disabled, children }) => {
+  const c = clsx(b(), className);
+  if(component) {
+    return <div className={className}>{component}</div>;
+  }
+  if(to) {
+    return (
+      <Link className={c} to={to} onClick={(() => {onClick && onClick()})}>
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <button className={c} onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  );
+};
+
+export default MenuItem;

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>
+  ),
+};