Merge pull request #5 from holaplex/anshul/minor-fixes

Popover component, placeholder in avatar, minor updates in form
holaplex · Jan 30, 2023 · 88087d3 · 88087d3
2 parents 8666e18 + 0e0415a
commit 88087d3
Show file tree

Hide file tree

Showing 16 changed files with 1,311 additions and 9,917 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/@holaplexui-playground/package.json b/packages/@holaplexui-playground/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

diff --git a/packages/@holaplexui-playground/pages/_app.tsx b/packages/@holaplexui-playground/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../styles/globals.css';
 import '@holaplex/ui-library-react/dist/index.css';
+import '../styles/globals.css';
 
 import type { AppProps } from 'next/app';
 import Link from 'next/link';

diff --git a/packages/@holaplexui-playground/pages/avatar.tsx b/packages/@holaplexui-playground/pages/avatar.tsx
@@ -1,21 +1,87 @@
-import { Avatar, AvatarSize } from '@holaplex/ui-library-react';
+import { Avatar, AvatarSize, Icon } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (
     <div className='flex flex-col items-center justify-center p-4 gap-4'>
       <span className='font-bold underline'>Avatar</span>
       Tiny
-      <Avatar size={AvatarSize.Tiny} />
+      <div className='flex items-center gap-4'>
+        <Avatar
+          size={AvatarSize.Tiny}
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar
+          size={AvatarSize.Tiny}
+          circle
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar size={AvatarSize.Tiny} handle='MyAvatar' />
+      </div>
       Small
-      <Avatar size={AvatarSize.Small} />
+      <div className='flex items-center gap-4'>
+        <Avatar
+          size={AvatarSize.Small}
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar
+          size={AvatarSize.Small}
+          circle
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar size={AvatarSize.Small} handle='MyAvatar' />
+      </div>
       Standard
-      <Avatar size={AvatarSize.Standard} />
+      <div className='flex items-center gap-4'>
+        <Avatar
+          size={AvatarSize.Standard}
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar
+          size={AvatarSize.Standard}
+          circle
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar size={AvatarSize.Standard} handle='MyAvatar' />
+      </div>
       Large
-      <Avatar size={AvatarSize.Large} />
+      <div className='flex items-center gap-4'>
+        <Avatar
+          size={AvatarSize.Large}
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar
+          size={AvatarSize.Large}
+          circle
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar size={AvatarSize.Large} handle='MyAvatar' />
+      </div>
       Jumbo
-      <Avatar size={AvatarSize.Jumbo} />
+      <div className='flex items-center gap-4'>
+        <Avatar
+          size={AvatarSize.Jumbo}
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar
+          size={AvatarSize.Jumbo}
+          circle
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar size={AvatarSize.Jumbo} handle='MyAvatar' />
+      </div>
       Gigantic
-      <Avatar size={AvatarSize.Gigantic} />
+      <div className='flex items-center gap-4'>
+        <Avatar
+          size={AvatarSize.Gigantic}
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar
+          size={AvatarSize.Gigantic}
+          circle
+          src='https://img.freepik.com/free-vector/hand-drawn-nft-style-ape-illustration_23-2149611030.jpg?w=2000'
+        />
+        <Avatar size={AvatarSize.Gigantic} handle='MyAvatar' />
+      </div>
     </div>
   );
 }
diff --git a/packages/@holaplexui-playground/pages/buttons.tsx b/packages/@holaplexui-playground/pages/buttons.tsx
@@ -1,12 +1,12 @@
-import { Button } from '@holaplex/ui-library-react';
+import { Button, Icon } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (
     <div className='flex flex-col gap-4 justify-center items-center p-4'>
       <span className='font-bold underline'>Buttons</span>
       Rounded
-      <div className='flex gap-4'>
-        <Button border='rounded' size='small' variant='secondary'>
+      <div className='flex gap-4 items-center'>
+        <Button border='rounded' size='small'>
           Small
         </Button>
         <Button border='rounded' size='medium'>
@@ -17,8 +17,8 @@ export default function App() {
         </Button>
       </div>
       Square
-      <div className='flex gap-4'>
-        <Button border='square' size='small' variant='secondary'>
+      <div className='flex gap-4 items-center'>
+        <Button border='square' size='small'>
           Small
         </Button>
         <Button border='square' size='medium'>
@@ -29,8 +29,8 @@ export default function App() {
         </Button>
       </div>
       Circular
-      <div className='flex gap-4'>
-        <Button border='circle' size='small' variant='secondary'>
+      <div className='flex gap-4 items-center'>
+        <Button border='circle' size='small'>
           Small
         </Button>
         <Button border='circle' size='medium'>
@@ -40,6 +40,16 @@ export default function App() {
           Large
         </Button>
       </div>
+      More
+      <div className='flex gap-4 items-center'>
+        <Button border='rounded' icon={<Icon.Discord />}>
+          With Icon
+        </Button>
+
+        <Button spinner={<div>🔄</div>} border='rounded' loading>
+          With Spinner
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
@@ -70,18 +70,20 @@ export default function App() {
   return (
     <div className='w-[400px] mx-auto flex flex-col gap-4 justify-center items-center p-4'>
       <Form>
-        <Form.Label name='Email' />
-        <Form.Input placeholder='e.g. [email protected]' />
+        <Form.Label name='Email'>
+          <Form.Input placeholder='e.g. [email protected]' />
+        </Form.Label>
         <Form.Label
           name='Password'
           asideComponent={<div className='text-xs'>Forgot Password?</div>}
           className='mt-5'
-        />
-        <Form.Password
-          placeholder='Enter your password'
-          showPasswordIcon={<ShowPasswordIcon />}
-          hidePasswordIcon={<HidePasswordIcon />}
-        />
+        >
+          <Form.Password
+            placeholder='Enter your password'
+            showPasswordIcon={<ShowPasswordIcon />}
+            hidePasswordIcon={<HidePasswordIcon />}
+          />
+        </Form.Label>
       </Form>
     </div>
   );

diff --git a/packages/@holaplexui-playground/pages/popover.tsx b/packages/@holaplexui-playground/pages/popover.tsx
@@ -0,0 +1,23 @@
+import { Icon, PopoverBox } from '@holaplex/ui-library-react';
+
+export default function App() {
+  return (
+    <div className='flex flex-col gap-4 justify-center items-center p-4'>
+      <PopoverBox
+        triggerButton={
+          <span className='font-bold underline cursor-pointer'>
+            Show Popover
+          </span>
+        }
+        elements={[
+          <div key='1' className='flex gap-2'>
+            <Icon.Discord /> Open Discord
+          </div>,
+          <div key='2' className='flex gap-2'>
+            <Icon.Twitter /> Open Twitter
+          </div>
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
@@ -2,81 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -89,37 +14,17 @@ body {
   overflow-x: hidden;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
 a {
   color: inherit;
   text-decoration: none;
 }
 
-/* @media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-} */
-
 .spinner-border {
   vertical-align: -0.125em;
   border: solid currentColor;
   border-right-color: transparent;
 }
 
-.avatar {
-  @apply bg-blue-500;
-}
-
 .form-label {
   @apply flex flex-col gap-2;
 }
@@ -133,23 +38,47 @@ a {
 }
 
 .form-input-container {
-  @apply flex flex-row w-full items-center rounded-md border border-gray-800;
+  @apply rounded-md border border-gray-800;
 }
 .form-input {
-  @apply w-full text-black appearance-none focus:appearance-none border-none focus:border-none outline-none focus:outline-none border-transparent focus:border-transparent;
+  @apply text-black;
 }
 
 .form-input-icon-container {
-  @apply p-2 bg-gray-200 rounded-md ml-1 mr-1;
+  @apply p-2 bg-gray-200 rounded-md;
 }
 .form-input-error {
   @apply border-red-500;
 }
 
 .form-show-password-container {
-  @apply p-2 bg-gray-200 rounded-md ml-1 mr-1;
+  @apply p-2 bg-gray-200 rounded-md;
 }
 
 .price-text {
   @apply text-white;
 }
+
+.button-small {
+  @apply py-1 px-2 text-sm;
+}
+
+.button-medium {
+  @apply py-2 px-4 text-base;
+}
+
+.button-large {
+  @apply py-2 px-4 text-lg;
+}
+
+.button-variant-primary {
+  @apply text-white bg-blue-800;
+}
+
+.avatar-handle {
+  @apply bg-blue-800 text-white;
+}
+
+.popover {
+  @apply rounded-md p-6 bg-black text-white flex flex-col gap-4;
+}