@react5/ui 1.0.0

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Form } from './Form';
+
+const meta: Meta<typeof Form> = {
+  component: Form,
+};
+
+export default meta;
+type Story = StoryObj<typeof Form>;
+
+export const Primary: Story = {
+  render: () => (
+    <div style={{ backgroundColor: '#333' }}>
+      <Form>
+        <a href="#">Link</a>
+      </Form>
+    </div>
+  ),
+};

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

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import "./Form.scss";
+import type { FormEvent, ReactNode } from "react";
+import { bem } from "../../utils";
+
+export interface IFormProps {
+  className?: string;
+  children: ReactNode;
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+}
+
+const b = bem("form");
+export const Form = ({children, onSubmit, className}: IFormProps) => {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    if(onSubmit) {
+      e.preventDefault();
+      onSubmit(e);
+    }
+  }
+  return (<form method="post" onSubmit={handleSubmit} className={clsx(b(), className)}>
+    {children}
+  </form>)
+}
+
+export default Form

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

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

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

@@ -0,0 +1,6 @@
+.r5ui-form-buttons {
+  display: block;
+  text-align: right;
+  color: $page_text_color;
+  margin-top: auto;
+}

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

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

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

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

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

@@ -0,0 +1,65 @@
+.r5ui-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0; //.5em 0 0 .5em;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: $link_color;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  cursor: pointer;
+  gap: 10px;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    color: $link_color_highlight;
+  }
+  svg {
+    vertical-align: middle;
+  }
+
+  &__rounded {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 1em;
+    height: 2em;
+    padding: 0 1em;
+    margin-left: 0;
+    background-color: $primary_bg_color;
+    color: $primary_text_color;
+
+    // > * {
+    //   margin-left: 0.5em;
+    // }
+
+    &:disabled {
+      color: $primary_text_color_disabled;
+    }
+  }
+  &__round {
+    border-radius: 1em;
+    height: 2em;
+    width: 2em;
+    padding: 0 6px;
+    margin-left: 0;
+    background-color: $primary_bg_color;
+    color: $primary_text_color;
+  }
+  &__round-outlined {
+    border-radius: 1em;
+    height: 2em;
+    width: 2em;
+    padding: 0 6px;
+    margin-left: 0;
+    border: 1px solid $page_text_color;
+    color: $page_text_color;
+  }
+}

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

@@ -0,0 +1,44 @@
+import { FormEvent, MouseEvent, ReactNode } from 'react';
+import './IconButton.scss'
+import clsx from 'clsx';
+import { bem } from '../../utils';
+import { Link } from 'react-router-dom';
+
+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/IconButton/index.tsx

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

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

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

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

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import './MenuItem.scss';
+import clsx from 'clsx';
+import { bem } from '../../utils';
+
+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/MenuItem/index.tsx

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

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

@@ -0,0 +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%;
+  }
+}

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

@@ -0,0 +1,61 @@
+import { bem } from '../../utils';
+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/Modal/index.tsx

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+import { ReactNode, Children, useState, useRef } from "react"
+import './Navbar.scss'
+import clsx from "clsx";
+import { bem } from "../../utils";
+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/Navbar/index.tsx

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

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

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

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import "./NavbarLink.scss";
+import clsx from 'clsx';
+import { bem } from "../../utils";
+
+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

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

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