diff --git a/.changeset/fair-suits-invite.md b/.changeset/fair-suits-invite.md new file mode 100644 index 000000000..4c552a437 --- /dev/null +++ b/.changeset/fair-suits-invite.md @@ -0,0 +1,5 @@ +--- +"@viron/app": patch +--- + +bug fixes for modals of endpoint and group addition diff --git a/arts/responsive/desktop.png b/arts/responsive/desktop.png new file mode 100644 index 000000000..1cc286246 Binary files /dev/null and b/arts/responsive/desktop.png differ diff --git a/arts/responsive/mobile.png b/arts/responsive/mobile.png new file mode 100644 index 000000000..908135106 Binary files /dev/null and b/arts/responsive/mobile.png differ diff --git a/arts/theme/c_1.png b/arts/theme/c_1.png new file mode 100644 index 000000000..a42020d0e Binary files /dev/null and b/arts/theme/c_1.png differ diff --git a/arts/theme/c_2.png b/arts/theme/c_2.png new file mode 100644 index 000000000..439843ce4 Binary files /dev/null and b/arts/theme/c_2.png differ diff --git a/arts/theme/c_3.png b/arts/theme/c_3.png new file mode 100644 index 000000000..17916df22 Binary files /dev/null and b/arts/theme/c_3.png differ diff --git a/arts/theme/c_4.png b/arts/theme/c_4.png new file mode 100644 index 000000000..0b0979436 Binary files /dev/null and b/arts/theme/c_4.png differ diff --git a/arts/theme/c_5.png b/arts/theme/c_5.png new file mode 100644 index 000000000..48104849a Binary files /dev/null and b/arts/theme/c_5.png differ diff --git a/arts/theme/p_1.png b/arts/theme/p_1.png new file mode 100644 index 000000000..fd13db996 Binary files /dev/null and b/arts/theme/p_1.png differ diff --git a/arts/theme/p_2.png b/arts/theme/p_2.png new file mode 100644 index 000000000..97824b357 Binary files /dev/null and b/arts/theme/p_2.png differ diff --git a/arts/theme/p_3.png b/arts/theme/p_3.png new file mode 100644 index 000000000..c8a59a222 Binary files /dev/null and b/arts/theme/p_3.png differ diff --git a/arts/theme/p_4.png b/arts/theme/p_4.png new file mode 100644 index 000000000..c3ca4a4e9 Binary files /dev/null and b/arts/theme/p_4.png differ diff --git a/arts/theme/p_5.png b/arts/theme/p_5.png new file mode 100644 index 000000000..406dbdf32 Binary files /dev/null and b/arts/theme/p_5.png differ diff --git a/arts/theme/p_6.png b/arts/theme/p_6.png new file mode 100644 index 000000000..f213d226e Binary files /dev/null and b/arts/theme/p_6.png differ diff --git a/arts/title.png b/arts/title.png new file mode 100644 index 000000000..c6eccd0f8 Binary files /dev/null and b/arts/title.png differ diff --git a/arts/ui/app_bar.png b/arts/ui/app_bar.png new file mode 100644 index 000000000..956468183 Binary files /dev/null and b/arts/ui/app_bar.png differ diff --git a/arts/ui/endpoint_card.png b/arts/ui/endpoint_card.png new file mode 100644 index 000000000..5e03df20f Binary files /dev/null and b/arts/ui/endpoint_card.png differ diff --git a/arts/ui/form.png b/arts/ui/form.png new file mode 100644 index 000000000..7a0db48a0 Binary files /dev/null and b/arts/ui/form.png differ diff --git a/arts/ui/info.png b/arts/ui/info.png new file mode 100644 index 000000000..6c9fe59a2 Binary files /dev/null and b/arts/ui/info.png differ diff --git a/arts/ui/modal.png b/arts/ui/modal.png new file mode 100644 index 000000000..75398ce6e Binary files /dev/null and b/arts/ui/modal.png differ diff --git a/arts/ui/nav.png b/arts/ui/nav.png new file mode 100644 index 000000000..90b9df24e Binary files /dev/null and b/arts/ui/nav.png differ diff --git a/arts/ui/table.png b/arts/ui/table.png new file mode 100644 index 000000000..8d45af548 Binary files /dev/null and b/arts/ui/table.png differ diff --git a/packages/app/src/components/error/index.tsx b/packages/app/src/components/error/index.tsx index 73cb6dd85..e263615f7 100644 --- a/packages/app/src/components/error/index.tsx +++ b/packages/app/src/components/error/index.tsx @@ -84,6 +84,7 @@ const _Error: React.FC = ({ className = '', on, error }) => { {error.message &&
{error.message}
} + {/* {error instanceof NetworkError && (
TODO: NetworkError
@@ -104,6 +105,7 @@ const _Error: React.FC = ({ className = '', on, error }) => {
TODO: コンテンツへのアクセス権がないよ。
)} + */} ); diff --git a/packages/app/src/components/icon/dotsVertical/outline/index.tsx b/packages/app/src/components/icon/dotsVertical/outline/index.tsx new file mode 100644 index 000000000..1cceec127 --- /dev/null +++ b/packages/app/src/components/icon/dotsVertical/outline/index.tsx @@ -0,0 +1,2 @@ +import { DotsVerticalIcon } from '@heroicons/react/outline'; +export default DotsVerticalIcon; diff --git a/packages/app/src/components/link/index.tsx b/packages/app/src/components/link/index.tsx index 36362834f..56dd0f371 100644 --- a/packages/app/src/components/link/index.tsx +++ b/packages/app/src/components/link/index.tsx @@ -13,7 +13,7 @@ const Link: React.FC = ({ className = '', to, children }) => { ); } else { return ( - + {children} ); diff --git a/packages/app/src/components/navigation/services/index.tsx b/packages/app/src/components/navigation/services/index.tsx index 1c8615d54..cc0781689 100644 --- a/packages/app/src/components/navigation/services/index.tsx +++ b/packages/app/src/components/navigation/services/index.tsx @@ -1,15 +1,18 @@ -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: , @@ -17,6 +20,7 @@ const links: { { to: URL.TWITTER, icon: , + isComingSoon: true, }, ]; @@ -24,18 +28,55 @@ type Props = BaseProps; const Services: React.FC = ({ on }) => { return (
    - {links.map((item) => ( -
  • - -
    - {item.icon} -
    - + {services.map((service) => ( +
  • +
    • ))}
); }; export default Services; + +type ServiceProps = BaseProps & { + service: ServiceType; +}; +const Service: React.FC = ({ on, service }) => { + const popover = usePopover(); + const handleButtonClick = useCallback(() => { + popover.open(); + }, [popover]); + + return ( + <> + {!service.isComingSoon ? ( + +
+ {service.icon} +
+ + ) : ( + + )} + +
Coming Soon.
+ + + ); +}; diff --git a/packages/app/src/components/request/index.tsx b/packages/app/src/components/request/index.tsx index 09cfe5625..e6fe6da02 100644 --- a/packages/app/src/components/request/index.tsx +++ b/packages/app/src/components/request/index.tsx @@ -189,7 +189,7 @@ const _Request: React.FC = ({ {/* Tail */}
= 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 ({ on, @@ -15,13 +16,22 @@ const _Select = function ({ Select, Option, OptionBlank, + label, }: React.PropsWithChildren>): JSX.Element { + const id = useMemo(() => `select-${Math.random()}`, []); + return ( -
+
+ {label && ( + + )} = ({ className, style }) => { )} {!!listUngrouped.length && ( -
    +
      {listUngrouped.map((item) => ( -
    • +
      • ))} @@ -116,33 +121,38 @@ const Group: React.FC = ({ group, list }) => { }, [list]); return ( -
      +
      {/* Head */} -
      +
      {group.description && ( -
      +
      {group.description}
      )}
      {/* Body */}
      -
        +
          {list.map((item) => ( -
        • +
          • ))} diff --git a/packages/app/src/pages/dashboard/endpoints/_/body/item/index.tsx b/packages/app/src/pages/dashboard/endpoints/_/body/item/index.tsx index f5840baa0..f11d6610e 100644 --- a/packages/app/src/pages/dashboard/endpoints/_/body/item/index.tsx +++ b/packages/app/src/pages/dashboard/endpoints/_/body/item/index.tsx @@ -70,7 +70,23 @@ const Item: React.FC = ({ endpoint }) => { const content = useMemo(() => { if (error) { - return ; + return ( +
          + + +
          +
          + {endpoint.id} +
          +
          + {document?.info.title || authentication?.oas.info.title || '---'} +
          +
          + {endpoint.url} +
          +
          +
          + ); } if (isPending) { return ; @@ -88,7 +104,11 @@ const Item: React.FC = ({ endpoint }) => { ); }, [endpoint, error, isPending, document, authentication]); - return
          {content}
          ; + return ( +
          + {content} +
          + ); }; export default Item; @@ -133,30 +153,37 @@ const _Item: React.FC<{ return ( <> -
          -
          - -
          -
          -
          - {endpoint.id} -
          -
          - {document?.info.title || authentication.oas.info.title || '---'} +
          +
          + {/* Info */} +
          +
          + +
          +
          +
          + {endpoint.id} +
          +
          + {document?.info.title || authentication.oas.info.title || '---'} +
          +
          + {endpoint.url} +
          +
          -
          - {endpoint.url} + {/* Menu */} +
          +
          + +
          -
          -
          - -
          +
          {document ? ( <> = ({ group }) => { const { removeGroup, ascendGroup, descendGroup } = useEndpoint(); - const removeConfirmationModal = useModal(); + + const menuPopover = usePopover(); + const handleMenuClick = useCallback(() => { + menuPopover.open(); + }, [menuPopover]); const handleUpClick = useCallback(() => { ascendGroup(group.id); - }, [group, ascendGroup]); + menuPopover.close(); + }, [group, ascendGroup, menuPopover]); const handleDownClick = useCallback(() => { descendGroup(group.id); - }, [group, descendGroup]); + menuPopover.close(); + }, [group, descendGroup, menuPopover]); const handleEditClick = useCallback(() => { // TODO }, []); + const removeConfirmationModal = useModal(); + const handleRemoveClick = useCallback(() => { removeConfirmationModal.open(); }, [removeConfirmationModal]); @@ -58,7 +68,7 @@ const Item: React.FC = ({ group }) => { return ( <> -
          +
          {group.name}
          @@ -71,24 +81,23 @@ const Item: React.FC = ({ group }) => {
          - - +
          + +
          + {/* + TODO: 編集機能。 + */} = ({ group }) => { />
          + + + + = ({ className = '', openNavigation }) => {
          {!lg && ( diff --git a/packages/app/src/pages/endpointimport/_/navigation/index.tsx b/packages/app/src/pages/endpointimport/_/navigation/index.tsx index 2f76b15b0..a807f45e5 100644 --- a/packages/app/src/pages/endpointimport/_/navigation/index.tsx +++ b/packages/app/src/pages/endpointimport/_/navigation/index.tsx @@ -15,8 +15,8 @@ const _Navigation: React.FC = ({ className }) => {
          Give OAS,
          diff --git a/packages/app/src/pages/endpoints/[endpointId]/_/appBar/index.tsx b/packages/app/src/pages/endpoints/[endpointId]/_/appBar/index.tsx index bac443334..ecd4af3a1 100644 --- a/packages/app/src/pages/endpoints/[endpointId]/_/appBar/index.tsx +++ b/packages/app/src/pages/endpoints/[endpointId]/_/appBar/index.tsx @@ -8,6 +8,7 @@ import TextOnButton, { Props as TextOnButtonProps, } from '~/components/button/text/on'; import CommonMark from '~/components/commonMark'; +import DotsVerticalIcon from '~/components/icon/dotsVertical/outline'; import MenuAlt1Icon from '~/components/icon/menuAlt1/outline'; import ExternalLinkIcon from '~/components/icon/externalLink/outline'; import ServerIcon from '~/components/icon/server/outline'; @@ -81,7 +82,7 @@ const Appbar: React.FC = ({ // Contents Info const contentsPopover = usePopover(); - const handleContentsClick = useCallback(() => { + const handleContentsClick = useCallback(() => { contentsPopover.open(); }, [contentsPopover]); const handleContentClick = useCallback['onClick']>( @@ -159,9 +160,9 @@ const Appbar: React.FC = ({
          -
          @@ -187,9 +188,9 @@ const Appbar: React.FC = ({
          -
          -
          +
          +
          {document.info['x-tags'] && (
          diff --git a/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/body/index.tsx b/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/body/index.tsx index 17ba80ea5..efcf03a1e 100644 --- a/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/body/index.tsx +++ b/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/body/index.tsx @@ -27,7 +27,6 @@ const Body: React.FC = ({ const handleDescendantOperationSuccess = useCallback( // eslint-disable-next-line @typescript-eslint/no-explicit-any (data: any) => { - console.log(data); base.refresh(); }, [base] diff --git a/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/filter/index.tsx b/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/filter/index.tsx index 7eadf7c17..d7fda5460 100644 --- a/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/filter/index.tsx +++ b/packages/app/src/pages/endpoints/[endpointId]/_/content/parts/filter/index.tsx @@ -83,7 +83,7 @@ const Filter: React.FC = ({ base }) => {
          {/* Body */} @@ -106,7 +106,7 @@ const Filter: React.FC = ({ base }) => {
          {/* Tail */} -
          +
          = ({ onUnpin, className = '', }) => { + const { lg } = useAppScreenGlobalStateValue(); + const handleSiblingOperationSuccess = useCallback( // eslint-disable-next-line @typescript-eslint/no-explicit-any (data: any) => { @@ -126,9 +129,11 @@ const Head: React.FC = ({
          -
          - -
          + {lg && ( +
          + +
          + )}
          diff --git a/packages/app/src/pages/endpoints/[endpointId]/_/navigation/index.tsx b/packages/app/src/pages/endpoints/[endpointId]/_/navigation/index.tsx index bfa785848..7dc97a19b 100644 --- a/packages/app/src/pages/endpoints/[endpointId]/_/navigation/index.tsx +++ b/packages/app/src/pages/endpoints/[endpointId]/_/navigation/index.tsx @@ -40,8 +40,8 @@ const _Navigation: React.FC = ({ > ), diff --git a/packages/app/src/pages/endpoints/[endpointId]/index.tsx b/packages/app/src/pages/endpoints/[endpointId]/index.tsx index 6cab590b7..9de53e2a6 100644 --- a/packages/app/src/pages/endpoints/[endpointId]/index.tsx +++ b/packages/app/src/pages/endpoints/[endpointId]/index.tsx @@ -183,7 +183,8 @@ const EndpointPage: React.FC = ({ params }) => { return null; } if (isPending) { - return
          TODO: pending...
          ; + // TODO: show spinner. + return null; } if (error) { return ; diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index 6bd85088f..61ada593f 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -127,7 +127,7 @@ const HomePage: React.FC = () => { style={{ height: `${minHeight}px`, }} - className="flex items-stretch" + className="flex items-stretch justify-center" > {poster}
          @@ -136,15 +136,6 @@ const HomePage: React.FC = () => { )}
          ); - return ( -
          -
          -
          - poster -
          -
          -
          - ); }, [screen] ); diff --git a/packages/app/src/pages/oauthredirect/_/appBar/index.tsx b/packages/app/src/pages/oauthredirect/_/appBar/index.tsx index 0a56ab8be..b26bf8990 100644 --- a/packages/app/src/pages/oauthredirect/_/appBar/index.tsx +++ b/packages/app/src/pages/oauthredirect/_/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 = ({ className = '', openNavigation }) => {
          {!lg && ( diff --git a/packages/app/src/pages/oauthredirect/_/navigation/index.tsx b/packages/app/src/pages/oauthredirect/_/navigation/index.tsx index 2f76b15b0..a807f45e5 100644 --- a/packages/app/src/pages/oauthredirect/_/navigation/index.tsx +++ b/packages/app/src/pages/oauthredirect/_/navigation/index.tsx @@ -15,8 +15,8 @@ const _Navigation: React.FC = ({ className }) => {
          Give OAS,
          diff --git a/packages/app/src/pages/theme/_/appBar/index.tsx b/packages/app/src/pages/theme/_/appBar/index.tsx index 0a56ab8be..822998eba 100644 --- a/packages/app/src/pages/theme/_/appBar/index.tsx +++ b/packages/app/src/pages/theme/_/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 = ({ className = '', openNavigation }) => {
          {!lg && ( diff --git a/packages/app/src/pages/theme/_/navigation/index.tsx b/packages/app/src/pages/theme/_/navigation/index.tsx index 2f76b15b0..a807f45e5 100644 --- a/packages/app/src/pages/theme/_/navigation/index.tsx +++ b/packages/app/src/pages/theme/_/navigation/index.tsx @@ -15,8 +15,8 @@ const _Navigation: React.FC = ({ className }) => {
          Give OAS,
          diff --git a/packages/app/src/portals/popover/index.tsx b/packages/app/src/portals/popover/index.tsx index efee7fa23..2b3428141 100644 --- a/packages/app/src/portals/popover/index.tsx +++ b/packages/app/src/portals/popover/index.tsx @@ -167,7 +167,7 @@ const PopoverLg: React.FC = ({ const content = useMemo(() => { const space = 8; const commonClassName = - 'p-2 rounded bg-thm-surface border border-thm-on-surface-faint shadow-01dp overflow-scroll overscroll-contain'; + 'p-2 rounded bg-thm-surface border border-thm-on-surface-low shadow-01dp overflow-scroll overscroll-contain'; switch (placement) { case PLACEMENT.TOP_LEFT: { return ( diff --git a/packages/app/src/types/oas.ts b/packages/app/src/types/oas.ts index d65a601b9..689a1840e 100644 --- a/packages/app/src/types/oas.ts +++ b/packages/app/src/types/oas.ts @@ -75,7 +75,6 @@ export type Content = { defaultParametersValue?: RequestParametersValue; defaultRequestBodyValue?: RequestRequestBodyValue; pagination?: boolean; - // TODO: ドキュメントに書くこと autoRefreshSec?: number; actions?: { operationId: OperationId; diff --git a/packages/app/src/utils/oas/style.ts b/packages/app/src/utils/oas/style.ts index c2be2f49d..da51a3df7 100644 --- a/packages/app/src/utils/oas/style.ts +++ b/packages/app/src/utils/oas/style.ts @@ -85,7 +85,7 @@ export const serializeMatrix = function ( ); } } - throw new Error('TODO'); + throw new Error('serialization failed'); }; export const serializeLabel = function ( @@ -133,7 +133,7 @@ export const serializeLabel = function ( } return '.' + variable.map((value) => `${JSON.stringify(value)}`).join('.'); } - throw new Error('TODO'); + throw new Error('serialization failed'); }; export const serializeForm = function ( @@ -187,7 +187,7 @@ export const serializeForm = function ( ); } } - throw new Error('TODO'); + throw new Error('serialization failed'); }; // @see: https://tools.ietf.org/html/rfc6570#section-3.2.2 @@ -197,7 +197,7 @@ export const serializeSimple = function ( ): string { if (_.isString(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return variable; } @@ -209,7 +209,7 @@ export const serializeSimple = function ( } if (_.isPlainObject(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } if (explode) { return Object.entries(variable) @@ -223,20 +223,20 @@ export const serializeSimple = function ( } if (_.isArray(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return variable.map((value) => `${JSON.stringify(value)}`).join(','); } - throw new Error('TODO'); + throw new Error('serialization failed'); }; export const serializeSpaceDelimited = function (variable: Variable): string { if (_.isString(variable) || _.isNumber(variable) || _.isBoolean(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } if (_.isPlainObject(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return Object.entries(variable) .map(([key, value]) => `${key}%20${JSON.stringify(value)}`) @@ -244,20 +244,20 @@ export const serializeSpaceDelimited = function (variable: Variable): string { } if (_.isArray(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return variable.map((value) => `${JSON.stringify(value)}`).join('%20'); } - throw new Error('TODO'); + throw new Error('serialization failed'); }; export const serializePipeDelimited = function (variable: Variable): string { if (_.isString(variable) || _.isNumber(variable) || _.isBoolean(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } if (_.isPlainObject(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return Object.entries(variable) .map(([key, value]) => `${key}|${JSON.stringify(value)}`) @@ -265,11 +265,11 @@ export const serializePipeDelimited = function (variable: Variable): string { } if (_.isArray(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return variable.map((value) => `${JSON.stringify(value)}`).join('|'); } - throw new Error('TODO'); + throw new Error('serialization failed'); }; export const serializeDeepObject = function ( @@ -277,18 +277,18 @@ export const serializeDeepObject = function ( variable: Variable ): string { if (_.isString(variable) || _.isNumber(variable) || _.isBoolean(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } if (_.isPlainObject(variable)) { if (_.isEmpty(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } return Object.entries(variable) .map(([key, value]) => `${name}[${key}]=${JSON.stringify(value)}`) .join('&'); } if (_.isArray(variable)) { - throw new Error('TODO'); + throw new Error('serialization failed'); } - throw new Error('TODO'); + throw new Error('serialization failed'); };