create-near-app 6.0.0-beta.2 → 6.0.0-beta.3

package/templates/frontend/gateway/src/components/lib/Toast/README.md

@@ -1,83 +0,0 @@
-# Toast
-
-Implemented via Radix primitives: https://www.radix-ui.com/docs/primitives/components/toast
-
-_If the current props and Stitches style overrides aren't enough to cover your use case, feel free to implement your own component using the Radix primitives directly._
-
-## Example
-
-Using the `openToast` API allows you to easily open a toast from any context:
-
-```tsx
-import { openToast } from '@/components/lib/Toast';
-
-...
-
-<Button
-  onClick={() =>
-    openToast({
-      type: 'ERROR',
-      title: 'Toast Title',
-      description: 'This is a great toast description.',
-    })
-  }
->
-  Open a Toast
-</Button>
-```
-
-You can pass other options too:
-
-```tsx
-<Button
-  onClick={() =>
-    openToast({
-      type: 'SUCCESS', // SUCCESS | INFO | ERROR
-      title: 'Toast Title',
-      description: 'This is a great toast description.',
-      icon: 'ph-bold ph-pizza', // https://phosphoricons.com/
-      duration: 20000, // milliseconds (pass Infinity to disable auto close)
-    })
-  }
->
-  Open a Toast
-</Button>
-```
-
-## Deduplicate
-
-If you need to ensure only a single instance of a toast is ever displayed at once, you can deduplicate by passing a unique `id` key. If a toast with the passed `id` is currently open, a new toast will not be opened:
-
-```tsx
-<Button
-  onClick={() =>
-    openToast({
-      id: 'my-unique-toast',
-      title: 'Toast Title',
-      description: 'This is a great toast description.',
-    })
-  }
->
-  Deduplicated Toast
-</Button>
-```
-
-## Custom Toast
-
-If you need something more custom, you can render a custom toast using `lib/Toast/Toaster.tsx` as an example like so:
-
-```tsx
-import * as Toast from '@/components/lib/Toast';
-
-...
-
-<Toast.Provider duration={5000}>
-  <Toast.Root open={isOpen} onOpenChange={setIsOpen}>
-    <Toast.Title>My Title</Toast.Title>
-    <Toast.Description>My Description</Toast.Description>
-    <Toast.CloseButton />
-  </Toast.Root>
-
-  <Toast.Viewport />
-</Toast.Provider>
-```

package/templates/frontend/gateway/src/components/lib/Toast/Toast.tsx

@@ -1,25 +0,0 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import type { ComponentProps } from 'react';
-import { forwardRef } from 'react';
-
-import * as S from './styles';
-
-type CloseButtonProps = ComponentProps<typeof S.CloseButton>;
-
-export const Root = S.Root;
-export const Title = S.Title;
-export const Description = S.Description;
-export const Content = S.Content;
-export const Viewport = S.Viewport;
-export const Action = ToastPrimitive.Action;
-export const Provider = ToastPrimitive.Provider;
-export const Close = ToastPrimitive.Close;
-
-export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((props, ref) => {
-  return (
-    <S.CloseButton aria-label="Close" ref={ref} {...props}>
-      <i className="ph-bold ph-x"></i>
-    </S.CloseButton>
-  );
-});
-CloseButton.displayName = 'CloseButton';

package/templates/frontend/gateway/src/components/lib/Toast/Toaster.tsx

@@ -1,48 +0,0 @@
-import type { Toast, ToastType } from './store';
-import { useToasterStore } from './store';
-import * as T from './Toast';
-
-export function Toaster() {
-  const toaster = useToasterStore();
-
-  const iconsByType: Record<ToastType, string> = {
-    INFO: 'ph ph-info',
-    WARNING: 'ph ph-warning',
-    ERROR: 'ph ph-warning-circle',
-    SUCCESS: 'ph ph-check-circle',
-  };
-
-  function onOpenChange(open: boolean, toast: Toast) {
-    if (!open) toaster.close(toast);
-  }
-
-  return (
-    <T.Provider duration={5000}>
-      {toaster.toasts.map((toast) => {
-        const type = toast.type || 'INFO';
-        const icon = toast.icon || iconsByType[type];
-
-        return (
-          <T.Root
-            data-type={type}
-            duration={toast.duration}
-            open={toast.isOpen}
-            onOpenChange={(open) => onOpenChange(open, toast)}
-            key={toast.id}
-          >
-            <i className={icon} />
-
-            <T.Content>
-              <T.Title>{toast.title}</T.Title>
-              {toast.description && <T.Description>{toast.description}</T.Description>}
-            </T.Content>
-
-            <T.CloseButton data-type={type} />
-          </T.Root>
-        );
-      })}
-
-      <T.Viewport />
-    </T.Provider>
-  );
-}

package/templates/frontend/gateway/src/components/lib/Toast/api.ts

@@ -1,6 +0,0 @@
-import type { OpenToastOptions } from './store';
-import { useToasterStore } from './store';
-
-export function openToast(options: OpenToastOptions) {
-  useToasterStore.getState().open(options);
-}

package/templates/frontend/gateway/src/components/lib/Toast/index.ts

@@ -1,3 +0,0 @@
-export * from './api';
-export * from './Toast';
-export * from './Toaster';

package/templates/frontend/gateway/src/components/lib/Toast/store.ts

@@ -1,83 +0,0 @@
-import { create } from 'zustand';
-
-export type ToastType = 'INFO' | 'ERROR' | 'SUCCESS' | 'WARNING';
-
-export interface Toast {
-  description?: string;
-  duration?: number;
-  icon?: string;
-  id: string;
-  isOpen: boolean;
-  title: string;
-  type?: ToastType;
-}
-
-export interface OpenToastOptions {
-  description?: string;
-  duration?: number;
-  icon?: string;
-  id?: string;
-  title: string;
-  type?: ToastType;
-}
-
-interface ToasterStore {
-  toasts: Toast[];
-  close: (toast: Toast) => void;
-  destroy: (toast: Toast) => void;
-  open: (options: OpenToastOptions) => void;
-}
-
-export const useToasterStore = create<ToasterStore>((set) => ({
-  toasts: [],
-
-  close: (toast) => {
-    set((state) => {
-      const toasts = state.toasts.map((t) => {
-        if (t.id === toast.id) {
-          return {
-            ...t,
-            isOpen: false,
-          };
-        }
-
-        return t;
-      });
-
-      setTimeout(() => {
-        state.destroy(toast);
-      }, 5000);
-
-      return {
-        toasts,
-      };
-    });
-  },
-
-  destroy: (toast) => {
-    set((state) => {
-      const toasts = state.toasts.filter((t) => t.id !== toast.id);
-
-      return {
-        toasts,
-      };
-    });
-  },
-
-  open: (options) => {
-    const newToast = {
-      ...options,
-      isOpen: true,
-      id: options.id || Date.now().toString(),
-      type: options.type || 'INFO',
-    };
-
-    set((state) => {
-      const toasts = state.toasts.filter((t) => t.id !== newToast.id);
-
-      return {
-        toasts: [...toasts, newToast],
-      };
-    });
-  },
-}));

package/templates/frontend/gateway/src/components/lib/Toast/styles.ts

@@ -1,126 +0,0 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import styled, { keyframes } from 'styled-components';
-
-const hideAnimation = keyframes`
-  from { opacity: 1; }
-  to { opacity: 0; }
-`;
-
-const slideInAnimation = keyframes`
-  from { transform: translateX(calc(100% + 1rem)) }
-  to { transform: translateX(0) }
-`;
-
-const swipeOutAnimation = keyframes`
-  from { transform: translateX(var(--radix-toast-swipe-end-x)) }
-  to { transform: translateX(calc(100% + 1rem)) }
-`;
-
-export const Viewport = styled(ToastPrimitive.Viewport)`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
-  width: 100%;
-  max-height: 100vh;
-  max-width: 20rem;
-  z-index: 2147483632;
-`;
-
-export const Root = styled(ToastPrimitive.Root)`
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  background: #000;
-  color: #fff;
-  border-radius: 1rem;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-  padding: 1rem;
-
-  i {
-    font-size: 1.4rem;
-  }
-
-  &[data-state='open'] {
-    animation: ${slideInAnimation} 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  &[data-state='closed'] {
-    animation: ${hideAnimation} 200ms ease-in forwards;
-  }
-  &[data-swipe='move'] {
-    transform: translateX(var(--radix-toast-swipe-move-x));
-  }
-  &[data-swipe='cancel'] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
-  &[data-swipe='end'] {
-    animation: ${swipeOutAnimation} 100ms ease-out forwards;
-  }
-
-  &[data-type='ERROR'] {
-    background: var(--red11);
-  }
-  &[data-type='SUCCESS'] {
-    background: var(--green11);
-  }
-  &[data-type='INFO'] {
-    background: var(--sand12);
-  }
-  &[data-type='WARNING'] {
-    background: var(--amber4);
-    color: var(--amber12);
-  }
-`;
-
-export const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 0rem;
-`;
-
-export const Title = styled(ToastPrimitive.Title)`
-  font: 450 16px/1.5 'Mona Sans', sans-serif;
-  color: currentColor;
-`;
-
-export const Description = styled(ToastPrimitive.Description)`
-  font: 450 14px/1.5 'Mona Sans', sans-serif;
-  color: currentColor;
-  opacity: 0.8;
-`;
-
-export const CloseButton = styled(ToastPrimitive.Close)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  border-radius: 100%;
-  cursor: pointer;
-  color: #fff;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  background: none;
-  transition: all 200ms;
-
-  &:hover {
-    border-color: rgba(255, 255, 255, 0.5);
-  }
-
-  &:focus {
-    border-color: rgba(255, 255, 255, 1);
-  }
-
-  i {
-    font-size: 0.8rem;
-  }
-
-  &[data-type='WARNING'] {
-    color: var(--amber12);
-  }
-`;

package/templates/frontend/gateway/src/components/navigation/Navigation.tsx

@@ -1,23 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { DesktopNavigation } from './desktop/DesktopNavigation';
-import { MobileNavigation } from './mobile/MobileNavigation';
-
-export const Navigation = () => {
-  const [matches, setMatches] = useState(true);
-
-  useEffect(() => {
-    setMatches(window.matchMedia('(min-width: 1024px)').matches);
-  }, []);
-
-  useEffect(() => {
-    window.matchMedia('(min-width: 1024px)').addEventListener('change', (e) => setMatches(e.matches));
-  }, []);
-
-  return (
-    <>
-      {matches && <DesktopNavigation />}
-      {!matches && <MobileNavigation />}
-    </>
-  );
-};

package/templates/frontend/gateway/src/components/navigation/UserDropdownMenu.tsx

@@ -1,209 +0,0 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import styled from 'styled-components';
-
-import { VmComponent } from '@/components/vm/VmComponent';
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useAuthStore } from '@/stores/auth';
-
-const Wrapper = styled.div`
-  > button {
-    all: unset;
-    display: flex;
-    align-items: center;
-    border-radius: 50px;
-    background-color: var(--sand12);
-    padding: 4px;
-    transition: all 200ms;
-
-    &:hover {
-      background-color: var(--black);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px var(--violet4);
-    }
-  }
-  .d-inline-block {
-    width: unset !important;
-    height: unset !important;
-    img {
-      border-radius: 50% !important;
-      width: 38px !important;
-      height: 38px !important;
-    }
-  }
-
-  i {
-    color: #a1a09a;
-    margin: 0 5px 0 0;
-  }
-
-  .profile-info {
-    margin: 0 8px;
-    line-height: normal;
-    max-width: 110px;
-    font-size: 12px;
-
-    .profile-name,
-    .profile-username {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .profile-name {
-      color: white;
-    }
-    .profile-username {
-      color: #a1a09a;
-    }
-  }
-
-  .DropdownMenuContent {
-    background-color: #161615;
-    border-radius: 6px;
-    margin-top: 11px;
-    padding: 12px;
-    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-    animation-duration: 600ms;
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-    will-change: transform, opacity;
-    z-index: 10000000;
-  }
-  .DropdownMenuContent[data-side='top'] {
-    animation-name: slideDownAndFade;
-  }
-  .DropdownMenuContent[data-side='right'] {
-    animation-name: slideLeftAndFade;
-  }
-  .DropdownMenuContent[data-side='bottom'] {
-    animation-name: slideUpAndFade;
-  }
-  .DropdownMenuContent[data-side='left'] {
-    animation-name: slideRightAndFade;
-  }
-
-  .DropdownMenuItem {
-    all: unset;
-    font-size: 13px;
-    line-height: 1;
-    color: #9ba1a6;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    position: relative;
-    user-select: none;
-    outline: none;
-  }
-
-  .DropdownMenuItem:hover {
-    color: white;
-    cursor: pointer;
-  }
-
-  .DropdownMenuItem i {
-    font-size: 20px;
-    margin-right: 10px;
-  }
-
-  @keyframes slideUpAndFade {
-    from {
-      opacity: 0;
-      transform: translateY(2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slideRightAndFade {
-    from {
-      opacity: 0;
-      transform: translateX(-2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideDownAndFade {
-    from {
-      opacity: 0;
-      transform: translateY(-2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slideLeftAndFade {
-    from {
-      opacity: 0;
-      transform: translateX(2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @media (max-width: 800px) {
-    .profile-info,
-    .ph {
-      display: none;
-    }
-
-    > button {
-      background: var(--sand6);
-      padding: 1px;
-    }
-
-    .d-inline-block {
-      img {
-        width: 43px !important;
-        height: 43px !important;
-      }
-    }
-  }
-`;
-
-export const UserDropdownMenu = () => {
-  const accountId = useAuthStore((store) => store.accountId);
-  const logOut = useAuthStore((store) => store.logOut);
-  const components = useBosComponents();
-
-  return (
-    <Wrapper>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <VmComponent
-            src={components.UI.profileImage}
-            props={{
-              accountId,
-              className: 'd-inline-block',
-            }}
-          />
-          <div className="profile-info">
-            <div className="profile-name">
-              <VmComponent src={components.UI.profileName} />
-            </div>
-            <div className="profile-username">{accountId}</div>
-          </div>
-          <i className="ph ph-caret-down"></i>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Content className="DropdownMenuContent" sideOffset={-5}>
-          <DropdownMenu.Item className="DropdownMenuItem" onClick={() => logOut()}>
-            <i className="ph-duotone ph-sign-out"></i>
-            Sign out
-          </DropdownMenu.Item>
-
-          <DropdownMenu.Arrow style={{ fill: '#161615' }} />
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </Wrapper>
-  );
-};