@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/AccountInfo/AccountInfo.jsx

@@ -1,113 +0,0 @@
-'use client';
-import { format } from 'date-fns';
-import { noop } from 'lodash-es';
-import Image from 'next/image';
-import { useAccountQuery, useLocaleInfo, useMobileNumberParser, } from '../../client/hooks';
-import { FacebookIcon, GoogleIcon } from '../../icons';
-import avatar from '../../images/placeholder-avatar.png';
-import { Button, Field, IconButton } from '../../ui';
-export function AccountInfo(props) {
-    const localeInfo = useLocaleInfo();
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const mobileNumberParser = useMobileNumberParser();
-    return (<div className={props.className}>
-      <h2 className="text-text-secondary-700 text-sm font-semibold">
-        Profile Info
-      </h2>
-      <div className="bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border">
-        <div className="border-border-secondary border-b px-4 py-5">
-          <div className="flex items-center gap-xl">
-            <Image src={avatar} alt="" width={80} height={80} className="size-14 shrink-0 rounded-md object-cover"/>
-            <div>
-              <h3 className="text-text-secondary-700 text-lg font-semibold leading-tight">
-                {account?.name}
-              </h3>
-              <p className="text-text-tertiary-600 leading-tight">
-                {account?.emailAddress ?? account?.nickName}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-end px-xl py-lg">
-          <Button size="sm" variant="outline" fullWidth={false}>
-            Upload New Avatar
-          </Button>
-        </div>
-      </div>
-
-      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
-        Contact Info
-      </h2>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <Field.Root>
-          <Field.Label>Mobile Number</Field.Label>
-          <div className="relative">
-            <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-            <Field.Input className="pl-10.5" value={account?.mobileNumber
-            ? mobileNumberParser.format(account?.mobileNumber)
-            : ''} readOnly onChange={noop}/>
-          </div>
-        </Field.Root>
-
-        <Field.Root className="mt-6">
-          <Field.Label>Email address</Field.Label>
-          <Field.Input defaultValue={account?.emailAddress ?? ''}/>
-        </Field.Root>
-      </div>
-
-      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
-        Personal Data
-      </h2>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <Field.Root>
-          <Field.Label>Real name</Field.Label>
-          <Field.Input value={account?.realName ?? ''} onChange={noop} readOnly/>
-        </Field.Root>
-
-        <Field.Root className="mt-6">
-          <Field.Label>Date of birth</Field.Label>
-          <Field.Input type="date" value={account?.birthDay ? format(account.birthDay, 'yyyy-MM-dd') : ''} readOnly/>
-        </Field.Root>
-      </div>
-
-      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
-        Account Connections
-      </h2>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <div className="flex items-center">
-          <div className="flex grow items-center gap-sm">
-            <IconButton variant="outline" colorScheme="gray">
-              <GoogleIcon className="size-6"/>
-            </IconButton>
-            <div>
-              <p className="text-sm font-medium leading-tight">Google</p>
-              <p className="text-text-secondary-700 mt-xs text-xs leading-tight">
-                Not Connected
-              </p>
-            </div>
-          </div>
-          <Button fullWidth={false}>Connect</Button>
-        </div>
-        <div className="mt-6 flex items-center">
-          <div className="flex grow items-center gap-sm">
-            <IconButton variant="outline" colorScheme="gray">
-              <FacebookIcon className="size-6"/>
-            </IconButton>
-            <div>
-              <p className="text-sm font-medium leading-tight">Facebook</p>
-              <p className="text-text-success-primary-600 mt-xs text-xs leading-tight">
-                Connected
-              </p>
-            </div>
-          </div>
-          <button className="text-button-tertiary-error-fg text-sm font-semibold">
-            Disconnect
-          </button>
-        </div>
-      </div>
-    </div>);
-}

package/dist/components/AccountSecurity/AccountSecurity.jsx

@@ -1,142 +0,0 @@
-'use client';
-import { ark, createListCollection, Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
-import { useProfileCompletionQuery } from '../../client/hooks';
-import { AlertCircleIcon, CheckIcon, CheckVerified02Icon, ChevronDownIcon, EyeIcon, EyeOffIcon, } from '../../icons';
-import { Field, PasswordInput, Select } from '../../ui';
-export function AccountSecurity(props) {
-    const profileCompletionQuery = useProfileCompletionQuery();
-    const profileCompletion = profileCompletionQuery.data;
-    return (<div className={props.className}>
-      <div className="flex items-center">
-        <div className="grow">
-          <h2 className="text-text-secondary-700 text-sm font-semibold">
-            Log in password
-          </h2>
-          <p className="text-text-tertiary-600 text-sm">
-            Access your account by logging in with your name and password.
-          </p>
-        </div>
-
-        <ark.svg asChild className={twMerge('size-6', profileCompletion?.accountPassword
-            ? 'text-text-success-primary'
-            : 'text-text-warning-primary')}>
-          {profileCompletion?.accountPassword ? (<CheckVerified02Icon />) : (<AlertCircleIcon />)}
-        </ark.svg>
-      </div>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <Field.Root>
-          <PasswordInput.Root>
-            <PasswordInput.Label>Password</PasswordInput.Label>
-            <PasswordInput.Control>
-              <PasswordInput.Input />
-              <PasswordInput.VisibilityTrigger>
-                <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                  <EyeIcon />
-                </PasswordInput.Indicator>
-              </PasswordInput.VisibilityTrigger>
-            </PasswordInput.Control>
-          </PasswordInput.Root>
-        </Field.Root>
-
-        <Field.Root className="mt-6">
-          <Select.Root collection={secretQuestionCollection} lazyMount positioning={{
-            sameWidth: true,
-        }}>
-            <Select.Label>Security Question</Select.Label>
-            <Select.Trigger>
-              <Select.ValueText placeholder="Game Vendor"/>
-              <Select.Indicator asChild>
-                <ChevronDownIcon />
-              </Select.Indicator>
-            </Select.Trigger>
-            <Portal>
-              <Select.Positioner>
-                <Select.Content>
-                  <Select.ItemGroup>
-                    {secretQuestionCollection.items.map((provider) => (<Select.Item key={provider} item={provider}>
-                        <Select.ItemText>
-                          {secretQuestionCollection.stringifyItem(provider)}
-                        </Select.ItemText>
-                        <Select.ItemIndicator asChild>
-                          <CheckIcon />
-                        </Select.ItemIndicator>
-                      </Select.Item>))}
-                  </Select.ItemGroup>
-                </Select.Content>
-              </Select.Positioner>
-            </Portal>
-          </Select.Root>
-        </Field.Root>
-
-        <Field.Root className="mt-6">
-          <Field.Label>Answer</Field.Label>
-          <Field.Input />
-        </Field.Root>
-      </div>
-
-      <div className="mt-6 flex items-center">
-        <div className="grow">
-          <h2 className="text-text-secondary-700 text-sm font-semibold">
-            Transaction password
-          </h2>
-          <p className="text-text-tertiary-600 text-sm">
-            The transaction password secures and confirms your wallet
-            withdrawals.
-          </p>
-        </div>
-
-        <ark.svg asChild className={twMerge('size-6', profileCompletion?.accountPassword
-            ? 'text-text-success-primary'
-            : 'text-text-warning-primary')}>
-          {profileCompletion?.accountPassword ? (<CheckVerified02Icon />) : (<AlertCircleIcon />)}
-        </ark.svg>
-      </div>
-
-      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
-        <Field.Root>
-          <PasswordInput.Root>
-            <PasswordInput.Label>Password</PasswordInput.Label>
-            <PasswordInput.Control>
-              <PasswordInput.Input />
-              <PasswordInput.VisibilityTrigger>
-                <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                  <EyeIcon />
-                </PasswordInput.Indicator>
-              </PasswordInput.VisibilityTrigger>
-            </PasswordInput.Control>
-          </PasswordInput.Root>
-        </Field.Root>
-      </div>
-    </div>);
-}
-const SECRET_QUESTIONS = [
-    'BEST_CHILDHOOD_FRIEND',
-    'BIRTH_PLACE',
-    'FAVORITE_BOOK',
-    'FAVORITE_MOVIE',
-    'FAVORITE_TEACHER',
-    'FIRST_CAR',
-    'FIRST_PET',
-    'FIRST_SCHOOL',
-    'MOTHERS_MAIDEN_NAME',
-    'PARENTS_MET_CITY',
-];
-const SECRET_QUESIONS_MAP = {
-    BEST_CHILDHOOD_FRIEND: 'Who is your best childhood friend?',
-    BIRTH_PLACE: 'Where were you born?',
-    FAVORITE_BOOK: 'What is your favorite book?',
-    FAVORITE_MOVIE: 'What is your favorite movie?',
-    FAVORITE_TEACHER: 'Who was your favorite teacher?',
-    FIRST_CAR: 'What was your first car?',
-    FIRST_PET: 'What was your first pet?',
-    FIRST_SCHOOL: 'What was the name of your first school?',
-    MOTHERS_MAIDEN_NAME: "What is your mother's maiden name?",
-    PARENTS_MET_CITY: 'In which city did your parents meet?',
-};
-const secretQuestionCollection = createListCollection({
-    items: SECRET_QUESTIONS,
-    itemToValue: (item) => item,
-    itemToString: (item) => SECRET_QUESIONS_MAP[item],
-});

package/dist/components/Banner/Banner.jsx

@@ -1,51 +0,0 @@
-'use client';
-import emblaCarouselAutoplay from 'embla-carousel-autoplay';
-import useEmblaCarousel, {} from 'embla-carousel-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Fragment, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { dataAttr } from '../../utils';
-export function Banner(props) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        loop: true,
-        align: 'start',
-    }, [
-        emblaCarouselAutoplay({
-            playOnInit: true,
-            delay: 5000,
-        }),
-    ]);
-    const [currentIndex, setCurrentIndex] = useState(0);
-    useEffect(() => {
-        function handler(detail) {
-            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
-        }
-        emblaApi?.on('scroll', handler);
-        emblaApi?.on('init', handler);
-        return () => {
-            emblaApi?.on('init', handler);
-            emblaApi?.off('scroll', handler);
-        };
-    }, [emblaApi]);
-    return (<div className={twMerge('relative', props.className)}>
-      <div ref={emblaRef} className="overflow-hidden">
-        <div className="flex gap-2">
-          {props.banners.map((banner, index) => {
-            const img = (<Image src={banner.src} alt="" width={1200} /* ✏️ TODO: must be 400 on mobile */ height={300} /* ✏️ TODO: must be 225 on mobile */ className="block h-auto w-full rounded-xl" priority={index === 0}/>);
-            return (<Fragment key={index}>
-                {!banner.redirectUrl ? (<div className="w-full shrink-0">{img}</div>) : (<Link href={banner.redirectUrl} className="block w-full shrink-0">
-                    {img}
-                  </Link>)}
-              </Fragment>);
-        })}
-        </div>
-      </div>
-
-      <div className="absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2">
-        {props.banners.map((_, index) => (<button key={index} type="button" className="ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9" onClick={() => {
-                emblaApi?.scrollTo(index);
-            }} aria-label={`Go to slide ${index + 1}`} data-active={dataAttr(index === currentIndex)}/>))}
-      </div>
-    </div>);
-}