create-near-app 5.3.1 → 6.0.0-beta.0

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

@@ -0,0 +1,379 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+type Fill = 'solid' | 'outline' | 'ghost';
+type Size = 'small' | 'default' | 'large';
+type Variant = 'primary' | 'secondary' | 'affirmative' | 'destructive';
+
+type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {
+  disabled?: boolean;
+  fill?: Fill;
+  href?: string;
+  icon?: string;
+  iconLeft?: string;
+  iconRight?: string;
+  label: string;
+  loading?: boolean;
+  size?: Size;
+  type?: 'button' | 'submit';
+  variant?: Variant;
+};
+
+type StyledProps = {
+  disabled?: boolean;
+  fill: Fill;
+  icon?: string;
+  loading?: boolean;
+  size: Size;
+  variant: Variant;
+};
+
+const variants: Record<Variant, any> = {
+  primary: {
+    outline: {
+      background: 'var(--sand1)',
+      border: 'var(--sand6)',
+      color: 'var(--violet8)',
+      iconColor: 'var(--violet9)',
+      hover: {
+        border: 'var(--violet6)',
+      },
+      focus: {
+        border: 'var(--violet9)',
+      },
+      active: {
+        background: 'var(--violet2)',
+        border: 'var(--violet7)',
+      },
+    },
+    solid: {
+      background: 'var(--sand12)',
+      border: 'var(--sand12)',
+      color: 'var(--sand1)',
+      iconColor: 'var(--sand9)',
+      hover: {
+        background: 'var(--sand11)',
+        border: 'var(--sand11)',
+      },
+      focus: {},
+      active: {},
+    },
+  },
+  secondary: {
+    outline: {
+      background: 'var(--sand1)',
+      border: 'var(--sand6)',
+      color: 'var(--sand12)',
+      iconColor: 'var(--sand10)',
+      hover: {
+        border: 'var(--sand8)',
+      },
+      focus: {
+        border: 'var(--violet8)',
+      },
+      active: {
+        background: 'var(--sand3)',
+        border: 'var(--sand8)',
+      },
+    },
+    solid: {
+      background: 'var(--sand3)',
+      border: 'var(--sand6)',
+      color: 'var(--sand12)',
+      iconColor: 'var(--sand11)',
+      hover: {
+        background: 'var(--sand4)',
+      },
+      focus: {
+        border: 'var(--violet8)',
+      },
+      active: {
+        background: 'var(--sand5)',
+      },
+    },
+  },
+  destructive: {
+    outline: {
+      background: 'var(--sand1)',
+      border: 'var(--sand6)',
+      color: 'var(--red8)',
+      iconColor: 'var(--red9)',
+      hover: {
+        border: 'var(--red6)',
+      },
+      focus: {
+        border: 'var(--violet8)',
+      },
+      active: {
+        background: 'var(--red2)',
+        border: 'var(--red7)',
+      },
+    },
+    solid: {
+      background: 'var(--red9)',
+      border: 'var(--red8)',
+      color: 'var(--red12)',
+      iconColor: 'var(--red11)',
+      hover: {
+        background: 'var(--red10)',
+      },
+      focus: {
+        border: 'var(--red11)',
+      },
+      active: {
+        background: 'var(--red8)',
+      },
+    },
+  },
+  affirmative: {
+    outline: {
+      background: 'var(--sand1)',
+      border: 'var(--sand6)',
+      color: 'var(--green11)',
+      iconColor: 'var(--green10)',
+      hover: {
+        border: 'var(--green9)',
+      },
+      focus: {
+        border: 'var(--violet8)',
+      },
+      active: {
+        background: 'var(--green2)',
+        border: 'var(--green8)',
+      },
+    },
+    solid: {
+      background: 'var(--green9)',
+      border: 'var(--green8)',
+      color: 'var(--green12)',
+      iconColor: 'var(--green11)',
+      hover: {
+        background: 'var(--green10)',
+      },
+      focus: {
+        border: 'var(--green11)',
+      },
+      active: {
+        background: 'var(--green8)',
+      },
+    },
+  },
+};
+variants.primary.ghost = {
+  ...variants.primary.outline,
+  border: 'hsla(0, 0%, 100%, 0)',
+  background: 'hsla(0, 0%, 100%, 0)',
+};
+variants.secondary.ghost = {
+  ...variants.secondary.outline,
+  border: 'hsla(0, 0%, 100%, 0)',
+  background: 'hsla(0, 0%, 100%, 0)',
+};
+variants.destructive.ghost = {
+  ...variants.destructive.outline,
+  border: 'hsla(0, 0%, 100%, 0)',
+  background: 'hsla(0, 0%, 100%, 0)',
+};
+variants.affirmative.ghost = {
+  ...variants.affirmative.outline,
+  border: 'hsla(0, 0%, 100%, 0)',
+  background: 'hsla(0, 0%, 100%, 0)',
+};
+
+const sizes: Record<Size, any> = {
+  small: {
+    font: 'var(--text-xs)',
+    gap: '6px',
+    height: '32px',
+    icon: '14px',
+    paddingX: '16px',
+  },
+  default: {
+    font: 'var(--text-s)',
+    gap: '8px',
+    height: '40px',
+    icon: '18px',
+    paddingX: '20px',
+  },
+  large: {
+    font: 'var(--text-base)',
+    gap: '8px',
+    height: '48px',
+    icon: '18px',
+    paddingX: '24px',
+  },
+};
+
+function returnColor(variant: Variant, fill: string, state: string, key: string) {
+  if (state === 'default') return variants[variant][fill][key];
+  return variants[variant][fill][state][key] || variants[variant][fill][key];
+}
+
+const StyledButton = styled.button<StyledProps>`
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${(p) => (p.icon ? sizes[p.size].height : undefined)};
+  height: ${(p) => sizes[p.size].height};
+  padding: ${(p) => (p.icon ? '0' : `0 ${sizes[p.size].paddingX}`)};
+  font: ${(p) => sizes[p.size].font};
+  font-weight: 600;
+  line-height: 1;
+  border-radius: 100px;
+  background: ${(p) => returnColor(p.variant, p.fill, 'default', 'background')};
+  color: ${(p) => returnColor(p.variant, p.fill, 'default', 'color')};
+  border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'default', 'border')};
+  box-shadow: 0 0 0 0px var(--violet4);
+  cursor: pointer;
+  transition: all 200ms;
+  text-decoration: none !important;
+
+  &:hover {
+    background: ${(p) => returnColor(p.variant, p.fill, 'hover', 'background')};
+    color: ${(p) => returnColor(p.variant, p.fill, 'hover', 'color')};
+    border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'hover', 'border')};
+  }
+  &:focus {
+    background: ${(p) => returnColor(p.variant, p.fill, 'focus', 'background')};
+    color: ${(p) => returnColor(p.variant, p.fill, 'focus', 'color')};
+    border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'focus', 'border')};
+    box-shadow: 0 0 0 4px var(--violet4);
+  }
+  &:active {
+    background: ${(p) => returnColor(p.variant, p.fill, 'active', 'background')};
+    color: ${(p) => returnColor(p.variant, p.fill, 'active', 'color')};
+    border: 1px solid ${(p) => returnColor(p.variant, p.fill, 'active', 'border')};
+  }
+
+  ${(p) =>
+    p.loading &&
+    `
+        pointer-events: none;
+      `}
+
+  ${(p) =>
+    p.disabled &&
+    `
+        opacity: 1;
+        background: ${p.fill === 'ghost' ? 'hsla(0, 0%, 100%, 0)' : 'var(--sand3)'};
+        border-color: var(--sand3);
+        color: var(--sand8);
+        pointer-events: none;
+    
+        i {
+          color: var(--sand8) !important;
+        }
+      `}
+`;
+
+const Inner = styled.span<StyledProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(p) => sizes[p.size].gap};
+
+  i {
+    font-size: ${(p) => sizes[p.size].icon};
+    line-height: ${(p) => sizes[p.size].icon};
+    color: ${(p) => (p.icon ? undefined : returnColor(p.variant, p.fill, 'default', 'iconColor'))};
+  }
+
+  ${(p) =>
+    p.loading &&
+    `
+        opacity: 0;
+      `}
+`;
+
+const Label = styled.span``;
+
+const Spinner = styled.i<StyledProps>`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  margin: calc(${(p) => sizes[p.size].icon} * -0.5) auto 0;
+  width: ${(p) => sizes[p.size].icon};
+  height: ${(p) => sizes[p.size].icon};
+  font-size: ${(p) => sizes[p.size].icon};
+  line-height: ${(p) => sizes[p.size].icon};
+  animation: spin 800ms infinite linear;
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      disabled,
+      fill = 'solid',
+      href,
+      icon,
+      iconLeft,
+      iconRight,
+      label,
+      loading,
+      size = 'default',
+      type = 'button',
+      variant = 'primary',
+      ...forwardedProps
+    },
+    ref,
+  ) => {
+    const conditionalAttributes: Record<string, unknown> = href
+      ? {
+        as: 'a',
+        href,
+      }
+      : {
+        type,
+        disabled: disabled || loading,
+      };
+
+    if (icon) {
+      conditionalAttributes['aria-label'] = label;
+    }
+
+    const styledProps: StyledProps = {
+      disabled,
+      fill,
+      icon,
+      loading,
+      size,
+      variant,
+    };
+
+    return (
+      <StyledButton ref={ref} {...styledProps} {...conditionalAttributes} {...forwardedProps}>
+        <>
+          {loading && <Spinner {...styledProps} className="ph-bold ph-circle-notch" />}
+          <Inner {...styledProps}>
+            {icon ? (
+              <i className={icon} />
+            ) : (
+              <>
+                {iconLeft && <i className={iconLeft} />}
+                <Label>{label}</Label>
+                {iconRight && <i className={iconRight} />}
+              </>
+            )}
+          </Inner>
+        </>
+      </StyledButton>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/templates/frontend/gateway/src/components/lib/Button/index.tsx

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

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.span`
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  animation: spin 1200ms infinite linear;
+
+  i {
+    color: currentColor;
+    font-size: 16px;
+    line-height: 16px;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export function Spinner() {
+  return (
+    <Wrapper>
+      <i className="ph ph-spinner"></i>
+    </Wrapper>
+  );
+}

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

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

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+type Props = {
+  color?: string;
+  font?: string;
+  weight?: string;
+};
+
+export const Text = styled.p<Props>`
+  font: ${(p) => (p.font ? `var(--${p.font})` : 'var(--text-base)')};
+  font-weight: ${(p) => p.weight ?? '400'};
+  color: ${(p) => (p.color ? `var(--${p.color})` : 'currentColor')};
+  margin: 0;
+`;

package/templates/frontend/gateway/src/components/lib/Text/index.tsx

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

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

@@ -0,0 +1,83 @@
+# 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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,6 @@
+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

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

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

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