@sikka/hawa 0.1.1 → 0.1.2-next

package/src/elements/HawaCodeBlock.tsx

@@ -1,156 +0,0 @@
-import React, { FC, useState } from "react"
-import clsx from "clsx"
-import { HawaButton } from "./HawaButton"
-
-type CodeBlockTypes = {
-  color?: "dark" | "light"
-  language?: string
-  width?: "full" | "md" | "sm"
-  tabs?: TabsTypes[]
-  fileName?: string
-  code?: string
-}
-type TabsTypes = {
-  title: string
-  code: string
-}
-
-export const HawaCodeBlock: FC<CodeBlockTypes> = ({
-  tabs,
-  language,
-  code,
-  fileName,
-  width = "full",
-}) => {
-  const [selectedTab, setSelectedTab] = useState(0)
-  const [showTooltip, setShowTooltip] = useState(0)
-  const [copyClicked, setCopyClicked] = useState(false)
-  let widthStyles = {
-    full: "w-full",
-    md: "w-full max-w-md",
-    sm: "w-full max-w-sm",
-    xs: "w-full max-w-xs",
-  }
-
-  const handleCopyClick = () => {
-    if (!copyClicked) {
-      setCopyClicked(true)
-      console.log("copy button clicked")
-      // Reset the button text after 2 seconds (adjust the time as needed).
-      setTimeout(() => {
-        setCopyClicked(false)
-      }, 2000)
-    }
-  }
-  return (
-    <div
-      className={clsx(
-        widthStyles[width],
-        "w-full flex-col items-center rounded bg-gray-200 text-left text-sm text-white dark:bg-gray-800 sm:text-base"
-      )}
-    >
-      {" "}
-      {tabs && (
-        <div className="flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black   dark:bg-gray-700 dark:text-white">
-          {tabs.map((tab, i) => (
-            <div
-              className={clsx(
-                selectedTab === i
-                  ? "dark:border-buttonPrimary-400 border-b-2   border-buttonPrimary-700"
-                  : "bg-transparent"
-              )}
-            >
-              <div
-                onClick={() => setSelectedTab(i)}
-                className={clsx(
-                  "mb-1 w-full max-w-[52px] cursor-pointer rounded-inner p-2 py-1 text-center text-[0.75rem] hover:bg-gray-300 dark:hover:bg-gray-500"
-                )}
-              >
-                {tab.title}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-      {fileName && (
-        <div className="flex flex-row gap-2 rounded-t p-2 pb-0 text-black bg-gray-100  dark:bg-gray-700 dark:text-white">
-          <div
-            className={clsx(
-              "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem]"
-            )}
-          >
-            {fileName}
-          </div>
-        </div>
-      )}
-      <pre>
-        <code
-          className={clsx(
-            "flex w-full flex-row items-start justify-between rounded bg-gray-200 p-2 text-left  text-sm text-black dark:bg-gray-800 dark:text-white sm:text-base"
-            // `language-${language}`,
-          )}
-        >
-          <div className="flex min-h-[37.75px] w-full  flex-col  justify-center p-4 ">
-            {tabs ? tabs[selectedTab].code : code}
-          </div>
-          <div className="flex flex-row items-center gap-2  p-2">
-            <div
-              className={clsx(
-                "transition-all",
-                copyClicked ? "opacity-100" : "opacity-0"
-              )}
-            >
-              Copied!
-            </div>
-            <HawaButton
-              variant="outlined"
-              color="dark"
-              onClick={() => {
-                handleCopyClick()
-                navigator.clipboard.writeText(
-                  tabs ? tabs[selectedTab].code : code
-                )
-              }}
-              margins="none"
-            >
-              <svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                height="1em"
-                width="1em"
-              >
-                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
-                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
-              </svg>
-            </HawaButton>
-          </div>
-        </code>
-      </pre>
-      {/* {tabs.map((tab) => (
-        <code className="inline-flex items-center space-x-4 rounded bg-gray-800 p-4 pl-6 text-left text-sm text-white sm:text-base">
-          <span className="flex gap-4">npm install @sikka/hawa</span>
-
-          <svg
-            onClick={() => navigator.clipboard.writeText("test")}
-            className="cursor-pointer"
-            stroke="currentColor"
-            fill="none"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            height="1em"
-            width="1em"
-          >
-            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
-            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
-          </svg>
-        </code>
-      ))} */}
-    </div>
-  )
-}

package/src/elements/HawaColorPicker.tsx

@@ -1,40 +0,0 @@
-import React, { useState, FC, ChangeEvent } from "react"
-
-type ColorPickerTypes = {
-  /** The hex code for the color */
-  color?: any
-  /** Fires everytime the color changes */
-  handleChange?: (e: ChangeEvent<HTMLInputElement>) => void
-}
-
-export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
-  const [selectedColor, setSelectedColor] = useState(props.color)
-  return (
-    <div className={`flex w-fit flex-row rounded border p-0`}>
-      <div
-        style={{ backgroundColor: selectedColor }}
-        className="rounded-bl-lg rounded-tl-lg"
-      >
-        <input
-          type="color"
-          value={selectedColor}
-          onChange={(e) => {
-            setSelectedColor(e.target.value)
-            props.handleChange(e)
-          }}
-          className="opacity-0"
-        />
-      </div>
-
-      <input
-        type="text"
-        onChange={(e) => {
-          setSelectedColor(e.target.value)
-          props.handleChange(e)
-        }}
-        value={selectedColor}
-        className="w-24 bg-background  rounded-br-lg rounded-tr-lg pl-2 pr-2"
-      />
-    </div>
-  )
-}

package/src/elements/HawaCopyrights.tsx

@@ -1,30 +0,0 @@
-import React, { FC } from "react"
-
-type CopyRightsTypes = {
-  /** A text used as the version of the app, for example: v1.0.0 */
-  version?: string
-  /** Credit to the creator of the app, for example: Sikka Software */
-  credits?: string
-  /** The URL of the logo in the copyrights */
-  logoURL?: string
-  /** Enable/Disable the existance of the logo */
-  withLogo?: boolean
-  /** Fires when the logo is clicked, usually goes to the website of the creator of the app */
-  onLogoClicked?: any
-}
-
-export const HawaCopyrights: FC<CopyRightsTypes> = (props) => {
-  return (
-    <div className="my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400">
-      {props.withLogo ? (
-        <a href={props.onLogoClicked}>
-          <div className="cursor-pointer">
-            <image href={props.logoURL} width={100} height={50} />
-          </div>
-        </a>
-      ) : null}
-      <div>{props.version}</div>
-      {props.credits ? props.credits : null}
-    </div>
-  )
-}

package/src/elements/HawaDatepicker.tsx

@@ -1,23 +0,0 @@
-import React, { FC, useState } from "react"
-
-type DatepickerTypes = {}
-
-export const HawaDatepicker: FC<DatepickerTypes> = () => {
-  const [selectedDate, setSelectedDate] = useState("")
-
-  const handleDateChange = (event) => {
-    setSelectedDate(event.target.value)
-  }
-  return (
-    <div className="relative inline-block text-left">
-      <span className="rounded-md shadow-sm">
-        <input
-          type="date"
-          value={selectedDate}
-          onChange={handleDateChange}
-          className="block w-full rounded border border-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        />
-      </span>
-    </div>
-  )
-}

package/src/elements/HawaDropdownMenu.tsx

@@ -1,267 +0,0 @@
-import React, { ReactNode, useEffect, useRef, useState, FC } from "react"
-import clsx from "clsx"
-import { Command } from "cmdk"
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
-
-// TODO: add width to decrease width
-
-interface TMenuTypes {
-  children?: any
-  direction?: "rtl" | "ltr"
-}
-
-type MenuItems = {}
-
-export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
-  const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
-  const [urlsChecked, setUrlsChecked] = React.useState(false)
-  const [person, setPerson] = React.useState("pedro")
-
-  let dropdownData = {
-    items: [
-      {
-        label: "New Tab",
-        shortcut: "ctrl + T",
-        disabled: false,
-      },
-      {
-        label: "New Windows",
-        shortcut: "ctrl + N",
-        disabled: false,
-      },
-      {
-        label: "New Private Window",
-        shortcut: "⇧+ctrl+N",
-        disabled: true,
-      },
-    ],
-    checkboxes: [
-      {
-        label: "Show Bookmarks",
-        shortcut: "ctrl + B",
-        disabled: false,
-      },
-      {
-        label: "Show Something",
-        shortcut: "ctrl + C",
-        disabled: false,
-      },
-      {
-        label: "Show that",
-        shortcut: "ctrl + T",
-        disabled: false,
-      },
-    ],
-  }
-  return (
-    <DropdownMenu.Root dir={direction}>
-      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          className="min-w-[220px] rounded bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
-          sideOffset={5}
-        >
-          {dropdownData.items.map((it, i) => (
-            <DropdownMenu.Item
-              key={i}
-              className="group relative flex h-[25px] select-none items-center justify-between 
-         rounded-inner  px-[5px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
-          data-[highlighted]:text-violet-1 "
-              //  ltr:pr-[25px] rtl:pl-[25px]
-              disabled={it.disabled}
-            >
-              {/* New Tab{" "} */}
-              {it.label}
-              <div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-                {/* ml-auto pl-[20px] */}
-                {/* ⌘+T */}
-                {it.shortcut}
-              </div>
-            </DropdownMenu.Item>
-          ))}
-
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger
-              className=" group relative flex h-[25px] select-none  
-            items-center rounded-inner  justify-between flex-row
-            px-[5px] text-[13px] leading-none text-violet-11
-             outline-none data-[disabled]:pointer-events-none
-              data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9
-               data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1
-                data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ltr:pl-[25px] rtl:pl-[0px]  "
-            >
-              More Tools
-              <div
-                className="ltr:ml-auto rtl:pr-[5px]  ltr:pl-[0px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white
-               rtl:mr-auto rtl:rotate-180 rtl:pl-[0px]"
-              >
-                {/* <ChevronRightIcon /> */}
-                <svg
-                  aria-label="Chevron Right Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                  ></path>
-                </svg>
-              </div>
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.Portal>
-              <DropdownMenu.SubContent
-                className="min-w-[220px] rounded-inner bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
-                sideOffset={2}
-                alignOffset={-5}
-              >
-                <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
-                  Save Page As…{" "}
-                  <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-                    ⌘+S
-                  </div>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
-                  Create Shortcut…
-                </DropdownMenu.Item>
-                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
-                  Name Window…
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
-                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
-                  Developer Tools
-                </DropdownMenu.Item>
-              </DropdownMenu.SubContent>
-            </DropdownMenu.Portal>
-          </DropdownMenu.Sub>
-
-          <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
-
-          {dropdownData.checkboxes.map((ch, i) => (
-            <DropdownMenu.CheckboxItem
-              key={i}
-              className="group relative flex h-[25px] select-none items-center
-             justify-between rounded-inner px-[5px] text-[13px] leading-none text-violet-11
-              outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
-               data-[highlighted]:text-violet-1"
-              //  ltr:pl-[25px] rtl:pr-[25px]
-              checked={bookmarksChecked}
-              onCheckedChange={setBookmarksChecked}
-            >
-              <DropdownMenu.ItemIndicator className="absolute inline-flex w-[25px] items-center justify-center  ltr:left-0 rtl:right-0">
-                <svg
-                  aria-label="Check Mark"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 512 512"
-                  height="0.60em"
-                  width="0.60em"
-                >
-                  <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-                </svg>{" "}
-              </DropdownMenu.ItemIndicator>
-              {/* Show Bookmarks{" "} */}
-              {ch.label}
-              <div className=" text-mauve-11  group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-                {/* ml-auto pl-[20px] */}
-                {/* ⌘+B */}
-                {ch.shortcut}
-              </div>
-            </DropdownMenu.CheckboxItem>
-          ))}
-          {/*         
-          <DropdownMenu.CheckboxItem
-            className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
-            checked={urlsChecked}
-            onCheckedChange={setUrlsChecked}
-          >
-            <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
-              <svg
-                aria-label="Check Mark"
-                stroke="currentColor"
-                fill="currentColor"
-                stroke-width="0"
-                viewBox="0 0 512 512"
-                height="0.60em"
-                width="0.60em"
-              >
-                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-              </svg>{" "}
-            </DropdownMenu.ItemIndicator>
-            Show Full URLs
-          </DropdownMenu.CheckboxItem> */}
-
-          <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
-
-          <DropdownMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve-11">
-            People
-          </DropdownMenu.Label>
-          <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
-            <DropdownMenu.RadioItem
-              className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
-              value="pedro"
-            >
-              <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
-                <svg
-                  aria-label="Filled Dot"
-                  width="15"
-                  height="15"
-                  viewBox="0 0 15 15"
-                  fill="none"
-                >
-                  <path
-                    d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z"
-                    fill="currentColor"
-                  ></path>
-                </svg>{" "}
-              </DropdownMenu.ItemIndicator>
-              Pedro Duarte
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem
-              className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
-              value="colm"
-            >
-              <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
-                <svg
-                  aria-label="Filled Dot"
-                  width="15"
-                  height="15"
-                  viewBox="0 0 15 15"
-                  fill="none"
-                >
-                  <path
-                    d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z"
-                    fill="currentColor"
-                  ></path>
-                </svg>{" "}
-              </DropdownMenu.ItemIndicator>
-              Colm Tuite
-            </DropdownMenu.RadioItem>
-          </DropdownMenu.RadioGroup>
-
-          <DropdownMenu.Arrow className="fill-white" />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-    // <Command label="Command Menu" className="bg-gray-100 drop-shadow-lg w-fit rounded">
-    //   <Command.Input className="rounded-t-inner" />
-    //   <Command.List className="p-1">
-    //     <Command.Empty>No results found.</Command.Empty>
-
-    //     <Command.Group heading="Letters">
-    //       <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">a</Command.Item>
-    //       <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">b</Command.Item>
-    //       <Command.Separator />
-    //       <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">c</Command.Item>
-    //     </Command.Group>
-
-    //     <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">Apple</Command.Item>
-    //   </Command.List>
-    // </Command>
-  )
-}

package/src/elements/HawaIconCount.tsx

@@ -1,17 +0,0 @@
-import React, { FC } from "react"
-
-type IconCountTypes = {
-  /** The icon of the counter */
-  icon: JSX.Element
-  /** The text next to the icon */
-  count?: string
-}
-
-export const HawaIconCount: FC<IconCountTypes> = (props) => {
-  return (
-    <div className="flex h-fit  flex-row items-center  gap-2 px-2">
-      <div>{props.icon}</div>
-      <div className="text-sm">{props.count}</div>
-    </div>
-  )
-}

package/src/elements/HawaInlineCode.tsx

@@ -1,9 +0,0 @@
-import React, { FC } from "react"
-
-type InlineCodeTypes = {
-  text: string
-}
-
-export const HawaInlineCode: FC<InlineCodeTypes> = (props) => {
-  return <code className="inline-code">{props.text}</code>
-}