Fixes

.changeset/fair-suits-invite.md

@@ -0,0 +1,5 @@
+---
+"@viron/app": patch
+---
+
+bug fixes for modals of endpoint and group addition

packages/app/src/components/error/index.tsx

@@ -84,6 +84,7 @@ const _Error: React.FC<Props> = ({ className = '', on, error }) => {
           </div>
         </div>
         {error.message && <div className="text-xs">{error.message}</div>}
+        {/*
         {error instanceof NetworkError && (
           <div>
             <div>TODO: NetworkError</div>
@@ -104,6 +105,7 @@ const _Error: React.FC<Props> = ({ className = '', on, error }) => {
             <div>TODO: コンテンツへのアクセス権がないよ。</div>
           </div>
         )}
+     */}
       </div>
     </div>
   );

packages/app/src/components/icon/dotsVertical/outline/index.tsx

@@ -0,0 +1,2 @@
+import { DotsVerticalIcon } from '@heroicons/react/outline';
+export default DotsVerticalIcon;

packages/app/src/components/link/index.tsx

@@ -13,7 +13,7 @@ const Link: React.FC<Props> = ({ className = '', to, children }) => {
     );
   } else {
     return (
-      <a href={to} className={className}>
+      <a href={to} className={className} target="_blank">
         {children}
       </a>
     );

packages/app/src/components/navigation/services/index.tsx

@@ -1,41 +1,82 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Props as BaseProps } from '~/components';
 import GithubIcon from '~/components/icon/github/solid';
 import TwitterIcon from '~/components/icon/twitter/solid';
 import Link from '~/components/link';
 import { URL } from '~/constants';
+import Popover, { usePopover } from '~/portals/popover';
 import { Pathname, URL as _URL } from '~/types';
 
-const links: {
+type ServiceType = {
   to: Pathname | _URL;
   icon: JSX.Element;
-}[] = [
+  isComingSoon?: boolean;
+};
+const services: ServiceType[] = [
   {
     to: URL.GITHUB,
     icon: <GithubIcon className="w-em" />,
   },
   {
     to: URL.TWITTER,
     icon: <TwitterIcon className="w=em" />,
+    isComingSoon: true,
   },
 ];
 
 type Props = BaseProps;
 const Services: React.FC<Props> = ({ on }) => {
   return (
     <ul className="flex justify-center gap-2 text-2xl">
-      {links.map((item) => (
-        <li key={item.to}>
-          <Link className="block group focus:outline-none" on={on} to={item.to}>
-            <div
-              className={`text-2xl text-thm-on-${on} group-hover:text-thm-on-${on}-low group-active:text-thm-on-${on}-slight group-focus:ring-2 group-focus:ring-thm-on-${on}`}
-            >
-              {item.icon}
-            </div>
-          </Link>
+      {services.map((service) => (
+        <li key={service.to}>
+          <Service on={on} service={service} />
         </li>
       ))}
     </ul>
   );
 };
 export default Services;
+
+type ServiceProps = BaseProps & {
+  service: ServiceType;
+};
+const Service: React.FC<ServiceProps> = ({ on, service }) => {
+  const popover = usePopover<HTMLButtonElement>();
+  const handleButtonClick = useCallback(() => {
+    popover.open();
+  }, [popover]);
+
+  return (
+    <>
+      {!service.isComingSoon ? (
+        <Link
+          className="block group focus:outline-none"
+          on={on}
+          to={service.to}
+        >
+          <div
+            className={`text-2xl text-thm-on-${on} group-hover:text-thm-on-${on}-low group-active:text-thm-on-${on}-slight group-focus:ring-2 group-focus:ring-thm-on-${on}`}
+          >
+            {service.icon}
+          </div>
+        </Link>
+      ) : (
+        <button
+          className="block group focus:outline-none"
+          ref={popover.targetRef}
+          onClick={handleButtonClick}
+        >
+          <div
+            className={`text-2xl text-thm-on-${on} group-hover:text-thm-on-${on}-low group-active:text-thm-on-${on}-slight group-focus:ring-2 group-focus:ring-thm-on-${on}`}
+          >
+            {service.icon}
+          </div>
+        </button>
+      )}
+      <Popover {...popover.bind}>
+        <div>Coming Soon.</div>
+      </Popover>
+    </>
+  );
+};

packages/app/src/components/request/index.tsx

@@ -189,7 +189,7 @@ const _Request: React.FC<Props> = ({
         </div>
         {/* Tail */}
         <div
-          className={`flex-none p-2 border-t-2 border-thm-on-${on}-faint flex justify-start gap-2`}
+          className={`flex-none p-2 border-t-2 border-thm-on-${on}-faint flex justify-end gap-2`}
         >
           <FilledButton
             type="submit"

packages/app/src/components/select/index.tsx

@@ -1,27 +1,37 @@
 import classnames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Props as BaseProps } from '~/components';
 import { ClassName } from '~/types';
 
 export type Props<T = unknown> = BaseProps & {
   list: T[];
-  Select: React.FC<{ className: ClassName }>;
+  Select: React.FC<{ id: string; className: ClassName }>;
   Option: React.FC<{ className: ClassName; data: T }>;
   OptionBlank?: React.FC<{ className: ClassName }>;
+  label?: string;
 };
 const _Select = function <T = unknown>({
   on,
   list,
   Select,
   Option,
   OptionBlank,
+  label,
 }: React.PropsWithChildren<Props<T>>): JSX.Element {
+  const id = useMemo<string>(() => `select-${Math.random()}`, []);
+
   return (
-    <div>
+    <div className={`text-thm-on-${on}`}>
+      {label && (
+        <label htmlFor={id} className="text-xs font-bold">
+          {label}
+        </label>
+      )}
       <Select
+        id={id}
         className={classnames(
           'block w-full p-1 border rounded focus:outline-none focus:ring-2',
-          `border-thm-on-${on}-faint bg-thm-${on} text-thm-on-${on} focus:bg-thm-on-${on}-faint focus:text-thm-on-${on}  focus:ring-thm-on-${on}`
+          `border-thm-on-${on}-low bg-thm-${on} text-thm-on-${on} hover:bg-thm-on-${on}-faint focus:bg-thm-on-${on}-faint focus:text-thm-on-${on} focus:ring-thm-on-${on}`
         )}
       >
         {OptionBlank && <OptionBlank className="p-1" />}

packages/app/src/components/textinput/index.tsx

@@ -35,7 +35,7 @@ const Textinput: React.FC<Props> = ({
   const bind: Bind = {
     type,
     id,
-    className: `block w-full p-1 border rounded border-thm-on-${on}-low bg-thm-${on} text-thm-on-${on} hover:bg-thm-on-${on}-faint focus:outline-none focus:ring-2 focus:ring-thm-on-${on} focus:bg-thm-on-${on}-faint focus:ring-thm-on-${on}`,
+    className: `block w-full p-1 border rounded border-thm-on-${on}-low bg-thm-${on} text-thm-on-${on} hover:bg-thm-on-${on}-faint focus:outline-none focus:ring-2 focus:bg-thm-on-${on}-faint focus:ring-thm-on-${on}`,
   };
   if (autocompleteId) {
     bind.list = autocompleteId;

packages/app/src/components/wyswyg/index.tsx

@@ -7,7 +7,8 @@ const WyswygLazy = React.lazy<typeof WyswygBase>(
 );
 
 const Spinner: React.FC = () => {
-  return <p>TODO: spinning...</p>;
+  // TODO: spinner
+  return null;
 };
 
 export type Props = WyswygProps;

packages/app/src/constants/index.ts

@@ -1,10 +1,10 @@
 import { isSSR } from '~/utils';
 
 export const URL = {
-  DOCUMENTATION: 'https://discovery.viron.plus/docs/introduction',
+  DOCUMENTATION: 'https://discovery.viron.plus/docs/introduction/',
   BLOG: 'https://discovery.viron.plus/blog/',
-  RELEASE_NOTES: 'https://viron.plus/TODO/release_notes/',
-  HELP: 'https://viron.plus/TODO/help/',
+  RELEASE_NOTES: 'https://discovery.viron.plus/docs/References/changelog/',
+  HELP: 'https://discovery.viron.plus/docs/References/faq/',
   GITHUB: 'https://github.com/cam-inc/viron/',
   TWITTER: 'https://twitter.com/TODO',
 } as const;

packages/app/src/hooks/endpoint.ts

@@ -680,10 +680,11 @@ export const useEndpoint = (): UseEndpointReturn => {
       // Remove groupId for each endpoint items.
       setEndpointList((currVal) =>
         currVal.map((item) => {
+          const _item = { ...item };
           if (item.groupId === endpointGroupId) {
-            delete item.groupId;
+            delete _item.groupId;
           }
-          return item;
+          return _item;
         })
       );
       return {

packages/app/src/pages/404/_/appBar/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { SIZE as BUTTON_SIZE } from '~/components/button';
-import TextButton from '~/components/button/text';
+import TextButton from '~/components/button/text/on';
 import MenuAlt1Icon from '~/components/icon/menuAlt1/outline';
 import { Props as LayoutProps } from '~/layouts';
 import { useAppScreenGlobalStateValue } from '~/store';
@@ -19,9 +19,8 @@ const AppBar: React.FC<Props> = ({ className = '', openNavigation }) => {
         <div className="flex-none">
           {!lg && (
             <TextButton
-              cs={COLOR_SYSTEM.PRIMARY_CONTAINER}
+              on={COLOR_SYSTEM.PRIMARY}
               size={BUTTON_SIZE.SM}
-              label="Dashboard"
               Icon={MenuAlt1Icon}
               onClick={handleNavButtonClick}
             />

packages/app/src/pages/404/_/navigation/index.tsx

@@ -15,8 +15,8 @@ const _Navigation: React.FC<Props> = ({ className }) => {
       <div className="flex flex-col gap-2 items-center py-8">
         <Logo
           className="h-12 drop-shadow-01dp"
-          left="text-thm-primary"
-          right="text-thm-secondary"
+          left="text-thm-on-surface-high"
+          right="text-thm-on-surface"
         />
         <div className="text-thm-on-surface text-xs font-bold text-center">
           Give OAS, <br />

packages/app/src/pages/dashboard/_/navigation/index.tsx

@@ -18,8 +18,8 @@ const _Navigation: React.FC<Props> = ({ className, style }) => {
         <div className="flex flex-col gap-2 items-center py-8">
           <Logo
             className="h-12 drop-shadow-01dp"
-            left="text-thm-primary"
-            right="text-thm-secondary"
+            left="text-thm-on-surface-high"
+            right="text-thm-on-surface"
           />
           <div className="text-thm-on-surface text-xs font-bold text-center">
             Give OAS, <br />

packages/app/src/pages/dashboard/endpoints/_/body/add/index.tsx

@@ -78,11 +78,7 @@ const AddEndpoint: React.FC<Props> = ({ className = '', onAdd, onCancel }) => {
     <div className={className}>
       <form className="space-y-8" onSubmit={handleSubmit}>
         <div>
-          <Head
-            on={COLOR_SYSTEM.SURFACE}
-            title="Create an Endpoint"
-            description="Groups are xxx"
-          />
+          <Head on={COLOR_SYSTEM.SURFACE} title="Create an Endpoint" />
         </div>
         <div>{formState.errors.manual?.message}</div>
         <div className="space-y-4">
@@ -102,9 +98,11 @@ const AddEndpoint: React.FC<Props> = ({ className = '', onAdd, onCancel }) => {
           />
           <Select<EndpointGroup>
             on={COLOR_SYSTEM.SURFACE}
+            label="Group"
             list={groupList}
-            Select={({ className, children }) => (
+            Select={({ id, className, children }) => (
               <select
+                id={id}
                 className={className}
                 value={watch('groupId')}
                 {...register('groupId')}

packages/app/src/pages/dashboard/endpoints/_/body/index.tsx

@@ -7,8 +7,8 @@ import TextButton, {
   Props as TextButtonProps,
 } from '~/components/button/text/on';
 import Head from '~/components/head';
-import CollectionOutlineIcon from '~/components/icon/collection/outline';
-import CollectionSolidIcon from '~/components/icon/collection/solid';
+import ChevronDownIcon from '~/components/icon/chevronDown/outline';
+import ChevronRightIcon from '~/components/icon/chevronRight/outline';
 import ColorSwatchIcon from '~/components/icon/colorSwatch/outline';
 import PlusCircleIcon from '~/components/icon/plusCircle/outline';
 import Modal, { useModal } from '~/portals/modal';
@@ -80,12 +80,17 @@ const Body: React.FC<Props> = ({ className, style }) => {
               </ul>
             )}
             {!!listUngrouped.length && (
-              <ul className="mt-2">
+              <ul
+                className="mt-2 p-2"
+                style={{
+                  display: 'grid',
+                  gridGap: '8px',
+                  gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
+                  gridAutoRows: 'auto',
+                }}
+              >
                 {listUngrouped.map((item) => (
-                  <li
-                    key={item.id}
-                    className="border-b border-dashed border-thm-on-background-faint pb-2 mb-2 last:border-none last:mb-0 last:pb-0"
-                  >
+                  <li key={item.id} className="">
                     <Item endpoint={item} />
                   </li>
                 ))}
@@ -116,33 +121,38 @@ const Group: React.FC<GroupProps> = ({ group, list }) => {
   }, [list]);
 
   return (
-    <div className="border-l-4 border-thm-primary">
+    <div className="border-l-2 border-thm-background hover:border-thm-on-background-low">
       {/* Head */}
-      <div className="pl-2 flex items-center gap-2 border-l-4 border-thm-primary">
+      <div className="px-2 flex items-center gap-2">
         <TextButton
           on={COLOR_SYSTEM.SURFACE}
           label={`${group.name}(${list.length})`}
-          Icon={isOpened ? CollectionSolidIcon : CollectionOutlineIcon}
+          Icon={isOpened ? ChevronDownIcon : ChevronRightIcon}
           onClick={handleToggleClick}
         />
         {group.description && (
-          <div className="text-xxs text-thm-on-background-low">
+          <div className="text-xxs text-thm-on-background-low truncate">
             {group.description}
           </div>
         )}
       </div>
       {/* Body */}
       <div
-        className={classnames('mt-2', {
+        className={classnames('mt-2 p-2', {
           hidden: !isOpened,
         })}
       >
-        <ul>
+        <ul
+          className=""
+          style={{
+            display: 'grid',
+            gridGap: '8px',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
+            gridAutoRows: 'auto',
+          }}
+        >
           {list.map((item) => (
-            <li
-              key={item.id}
-              className="border-b border-dashed border-thm-on-background-faint pb-2 mb-2 last:border-none last:mb-0 last:pb-0"
-            >
+            <li key={item.id} className="">
               <Item endpoint={item} />
             </li>
           ))}