@sikka/hawa 0.1.2 → 0.1.3-next

package/src/elements/HawaRange.tsx

@@ -1,49 +0,0 @@
-import React, { FC, useState } from "react"
-
-type RangeTypes = {
-  value?: any
-  handleChange?: any
-  startElement?: any
-  endElement?: any
-  label?: string
-  min?: any
-  max?: any
-}
-
-export const HawaRange: FC<RangeTypes> = ({
-  value,
-  handleChange,
-  startElement,
-  endElement,
-  label,
-  ...props
-}) => {
-  const [rangeValue, setRangeValue] = useState(value)
-
-  return (
-    <div {...props}>
-      {label && (
-        <label
-          htmlFor="default-range"
-          className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-        >
-          {label}
-        </label>
-      )}
-      <div className="flex w-fit flex-row items-center justify-center">
-        <div className="mr-2">{startElement}</div>{" "}
-        <input
-          id="default-range"
-          type="range"
-          value={rangeValue}
-          onChange={(e) => {
-            setRangeValue(e.target.value)
-            handleChange(e)
-          }}
-          className="h-2 w-fit cursor-pointer appearance-none rounded bg-gray-200 dark:bg-gray-700"
-        />
-        <div className="ml-2">{endElement}</div>{" "}
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaSearchBar.tsx

@@ -1,7 +0,0 @@
-import React, { FC } from "react"
-import { HawaTextField } from "./HawaTextField"
-
-type SearchBarTypes = {}
-export const HawaSearchBar: FC<SearchBarTypes> = (props) => {
-  return <HawaTextField type={"search"} {...props} />
-}

package/src/elements/HawaSelect.tsx

@@ -1,209 +0,0 @@
-import clsx from "clsx"
-import React, { FC } from "react"
-import Select from "react-select"
-import CreatableSelect from "react-select/creatable"
-
-// The select bar
-type ControlTypes = {
-  cx: any
-  children: any
-  getStyles: any
-  innerProps: any
-  innerRef: any
-  size?: "small" | "normal" | "large"
-}
-const Control: FC<ControlTypes> = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  size = "normal",
-  ...props
-}) => {
-  let sizeStyles = {
-    small: "h-7 text-xs",
-    normal: "h-[2.36rem]  text-sm",
-    large: "",
-  }
-  return (
-    <div
-      ref={innerRef}
-      className={clsx(
-        sizeStyles[size],
-        "flex  w-full rounded border bg-background text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:focus:ring-blue-500"
-      )}
-      {...innerProps}
-      // {...props}
-    >
-      {children}
-    </div>
-  )
-}
-// The options container
-type MenuTypes = {
-  cx: any
-  children: any
-  getStyles: any
-  innerProps: any
-  innerRef: any
-}
-const Menu: FC<MenuTypes> = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  ...props
-}) => {
-  return (
-    <div
-      className="absolute z-10 mt-2 flex w-full  flex-col justify-start  rounded  border  bg-background p-1  px-1.5"
-      ref={innerRef}
-      {...innerProps}
-      // {...props}
-    >
-      {children}
-    </div>
-  )
-}
-// The single options
-type OptionTypes = {
-  cx: any
-  children: any
-  getStyles: any
-  innerProps: any
-  innerRef: any
-  size?: "small" | "normal" | "large"
-}
-const Option: FC<OptionTypes> = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  size = "normal",
-  ...props
-}) => (
-  <div
-    ref={innerRef}
-    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/50 hover:text-white"
-    {...innerProps}
-  >
-    {children}
-  </div>
-)
-// The main element
-type SelectTypes = {
-  label?: string
-  options?: {
-    value: any
-    label: any
-  }[]
-  isCreatable?: boolean
-  isClearable?: boolean
-  isMulti?: boolean
-  isSearchable?: boolean
-  onChange?: any
-  helperText?: any
-  onInputChange?: any
-  native?: any
-  width?: "full" | "small"
-  value?: any
-  children?: any
-  getOptionLabel?: any
-  disabled?: boolean
-}
-export const HawaSelect: FC<SelectTypes> = (props) => {
-  return (
-    <div className=" w-full">
-      {props.label && (
-        <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
-          {props.label}
-        </div>
-      )}
-      {!props.isCreatable && (
-        <Select
-          classNames={{
-            // control: () => "bg-blue-500 w-full",
-            // container: () => "bg-red-500 w-full",
-            placeholder: () => "px-2 text-muted-foreground",
-            input: () => "text-white px-2",
-            valueContainer: () => "text-white dark:text-muted-foreground",
-            singleValue: () => "text-black dark:text-white px-2",
-            indicatorsContainer: () =>
-              " px-2 cursor-pointer text-muted-foreground",
-          }}
-          unstyled
-          isDisabled={props.disabled}
-          options={props.options}
-          isClearable={props.isClearable}
-          isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
-          onChange={(newValue: any, action) =>
-            // props.onChange(newValue.label, action)
-            props.onChange(newValue, action)
-          }
-          components={{
-            Control,
-            Option,
-            Menu,
-          }}
-          getOptionLabel={props.getOptionLabel}
-        />
-      )}
-      {props.isCreatable && (
-        <CreatableSelect
-          styles={{
-            input: (base) => ({
-              ...base,
-              "input:focus": {
-                boxShadow: "none",
-              },
-            }),
-
-            control: (base) => ({
-              ...base,
-              borderRadius: "0.75rem",
-            }),
-            menu: (base) => ({
-              ...base,
-              borderRadius: "0.75rem",
-              padding: 0,
-              display: "flex",
-              justifyContent: "center",
-            }),
-            menuList: (base) => ({
-              ...base,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              width: "100%",
-            }),
-            option: (base) => ({
-              ...base,
-              borderRadius: "0.75rem",
-              margin: 3,
-              width: "98%",
-            }),
-          }}
-          options={props.options}
-          isClearable={props.isClearable}
-          isMulti={props.isMulti}
-          isSearchable={props.isSearchable}
-          onCreateOption={() => console.log("im changing")}
-          onChange={(newValue, action) => props.onChange(newValue, action)}
-          onInputChange={(newValue, action) =>
-            props.onInputChange(newValue, action)
-          }
-        />
-      )}
-      {props.helperText && (
-        <p className="mt-2 text-sm text-red-600 dark:text-red-500">
-          {props.helperText}
-        </p>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaSettingsRow.tsx

@@ -1,74 +0,0 @@
-import React, { FC } from "react"
-import { HawaTextField } from "./HawaTextField"
-import { HawaSwitch } from "./HawaSwitch"
-import { HawaColorPicker } from "./HawaColorPicker"
-import { HawaRange } from "./HawaRange"
-import { HawaRadio } from "./HawaRadio"
-import { HawaSelect } from "./HawaSelect"
-
-type SettingsRowTypes = {
-  settingsLabel: string
-  settingsType: "text" | "radio" | "boolean" | "color" | "range" | "select"
-  settingsDescription?: string
-  radioProps: {
-    defaultValue: any
-    onChangeTab: any
-    options: [{ label: string; value: any }]
-  }
-  colorProps: {
-    color?: any
-    handleChange?: any
-  }
-  rangeProps: {
-    min?: any
-    max?: any
-  }
-  switchProps: {
-    size: "small" | "normal" | "large"
-  }
-  selectProps: {
-    label?: string
-    options?: any[any]
-    isCreatable?: boolean
-    isClearable?: boolean
-    isMulti?: boolean
-    isSearchable?: boolean
-    onChange?: any
-    helperText?: any
-    onInputChange?: any
-    native?: any
-    fullWidth?: any
-    value?: any
-    children?: any
-    getOptionLabel?: any
-    disabled?: boolean
-  }
-}
-
-export const HawaSettingsRow: FC<SettingsRowTypes> = ({
-  settingsLabel,
-  settingsType,
-  settingsDescription,
-  colorProps,
-  rangeProps,
-  radioProps,
-  switchProps,
-  selectProps,
-}) => {
-  return (
-    <div className="flex max-h-fit flex-row items-center justify-between rounded  align-middle">
-      <div>
-        <div className="text-sm">{settingsLabel}</div>
-        {settingsDescription && (
-          <div className="text-xs">{settingsDescription}</div>
-        )}{" "}
-      </div>
-      {settingsType === "text" && <HawaTextField margin="none" width="small" />}
-      {settingsType === "boolean" && <HawaSwitch {...switchProps} />}
-      {settingsType === "range" && <HawaRange {...rangeProps} />}
-      {settingsType === "color" && <HawaColorPicker {...colorProps} />}
-      {settingsType === "radio" && <HawaRadio {...radioProps} />}
-      {settingsType === "select" && <HawaSelect {...selectProps} />}
-    </div>
-  )
-}

package/src/elements/HawaSnackbar.tsx

@@ -1,137 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from "react"
-import clsx from "clsx"
-import { HawaButton } from "./HawaButton"
-
-type THawaSnackBar = {
-  severity: "info" | "warning" | "error" | "success" | "none"
-  title: string
-  description: string
-  onCloseSnakbar?: () => void
-  duration?: number
-  position?:
-    | "top-left"
-    | "top-center"
-    | "top-right"
-    | "bottom-right"
-    | "bottom-center"
-    | "bottom-left"
-  actions?: [
-    {
-      icon?: any
-      label: string
-      onClick: any
-      variant: "contained" | "outlined"
-    }
-  ]
-}
-
-export const HawaSnackbar: FC<THawaSnackBar> = ({
-  title,
-  description,
-  severity = "info",
-  position = "bottom-left",
-  actions,
-  onCloseSnakbar,
-  // handleClose,
-  duration,
-}) => {
-  let defaultStyle =
-    "fixed flex flex-row items-top p-1 w-full max-w-xs rounded shadow dark:text-gray-400 dark:bg-gray-800"
-  let severities = {
-    info: "text-blue-700 bg-blue-100",
-    warning: "text-yellow-700 bg-yellow-100",
-    error: "text-red-700 bg-red-100",
-    success: "text-green-700 bg-green-100",
-    none: "text-gray-500 bg-white ",
-  }
-  let positions = {
-    "top-left": "top-4",
-    "top-right": "top-4 right-4",
-    "top-center": "top-4 left-1/2 -translate-x-1/2",
-    "bottom-left": "bottom-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
-  }
-
-  const [closed, setClosed] = useState(false)
-  const toastRef = useRef(null)
-  useEffect(() => {
-    if (duration) {
-      //To change opacity and hide the component
-      const timeoutHide = setTimeout(() => {
-        setClosed(true)
-      }, duration)
-      //To destroy the component after hiding it
-      const timeoutDestroy = setTimeout(() => {
-        setClosed(true)
-        toastRef.current.removeChild(toastRef.current.children[0])
-      }, duration + 1000)
-
-      return () => {
-        clearTimeout(timeoutHide)
-        clearTimeout(timeoutDestroy)
-      }
-    }
-  }, [duration])
-
-  return (
-    <div ref={toastRef}>
-      <div
-        id="toast-default"
-        role="alert"
-        className={clsx(
-          defaultStyle,
-          severities[severity],
-          positions[position],
-          "p-2 transition-all",
-          closed ? "opacity-0" : "opacity-100"
-        )}
-      >
-        <div className="flex w-full  flex-col gap-2 p-3">
-          <div className="text-sm font-bold">{title}</div>
-          <div className="text-sm font-normal">{description}</div>
-          {actions && (
-            <div className="mt-2 flex flex-row gap-2">
-              {actions.map((act, i) => (
-                <HawaButton
-                  key={i}
-                  variant={act.variant}
-                  onClick={act.onClick()}
-                  margins="none"
-                >
-                  {act.icon && act.icon}
-                  {act.label}
-                </HawaButton>
-              ))}
-            </div>
-          )}
-        </div>
-        <button
-          type="button"
-          className="right-0 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
-          data-dismiss-target="#toast-default"
-          aria-label="Close"
-          onClick={() => {
-            onCloseSnakbar()
-            setClosed(true)
-          }}
-        >
-          <span className="sr-only">Close</span>
-          <svg
-            aria-label="Close Button"
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path
-              fillRule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaStats.tsx

@@ -1,72 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-import { HawaLoading } from "./HawaLoading"
-// import { BsFilesAlt } from "react-icons/bs"
-
-type StatTypes = {
-  label?: string
-  color?: string
-  number?: string
-  helperText?: string
-  icon?: any
-  variant?:
-    | "default"
-    | "plain"
-    | "contained"
-    | "outlined"
-    | "brutalist"
-    | "dropshadow"
-  width?: "full" | "min" | "normal"
-  isLoading?: boolean
-  handleClick?: () => void
-}
-export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
-  let defaultStyle =
-    "flex transition-all flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
-  let statStyles = {
-    plain: "",
-    default: "border bg-card text-card-foreground shadow-sm",
-    contained: "bg-layoutPrimary-500",
-    outlined: "ring-2 w-fit",
-    neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white",
-    dropshadow: "bg-white drop-shadow-md",
-  }
-  let widthStyles = {
-    full: "w-full",
-    min: "w-fit",
-    normal: "w-full max-w-[200px]",
-  }
-
-  return (
-    <div
-      onClick={props.handleClick}
-      className={clsx(
-        defaultStyle,
-        widthStyles[props.width],
-        statStyles[variant],
-        props.handleClick ? "cursor-pointer" : "cursor-default",
-        props.handleClick && variant === "dropshadow"
-          ? "hover:drop-shadow-lg"
-          : ""
-      )}
-      style={{
-        backgroundColor: props.color
-          ? props.color
-          : variant === "contained"
-          ? "var(--layout-primary-500)"
-          : "",
-      }}
-    >
-      {props.icon && <div className="mb-2">{props.icon} </div>}
-      <div>{props.label}</div>
-      {props.isLoading ? (
-        <HawaLoading />
-      ) : (
-        <div className="text-2xl font-bold">{props.number}</div>
-      )}
-      {props.helperText ? (
-        <div className="text-xs text-muted-foreground">{props.helperText}</div>
-      ) : null}
-    </div>
-  )
-}

package/src/elements/HawaStepper.tsx

@@ -1,109 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type THawaTimeline = {
-  steps: any[any]
-  currentStep: any
-  orientation: "vertical" | "horizontal"
-}
-
-export const HawaStepper: FC<THawaTimeline> = ({
-  orientation = "horizontal",
-  ...props
-}) => {
-  let orientationStyles = {
-    vertical: "flex flex-col items-start w-fit",
-    horizontal: "flex flex-row",
-  }
-  let lineStyles = {
-    vertical: "w-1 h-32 rounded bg-red-200 ml-6 my-2",
-    horizontal: "h-0.5 flex w-full rounded bg-red-200",
-  }
-  return (
-    <div
-      className={clsx(
-        orientationStyles[orientation],
-        " flex-wrap justify-start gap-4"
-      )}
-    >
-      {props.steps.map((step: any, i: number) => {
-        return (
-          <div
-            key={i}
-            className="my-2 flex w-auto flex-row flex-wrap justify-start  "
-          >
-            <div
-              className={
-                orientation === "vertical"
-                  ? "flex w-full flex-row items-center"
-                  : i + 1 === props.steps.length
-                  ? "flex w-full flex-row items-center justify-start gap-2"
-                  : "flex  flex-row items-center justify-start gap-2 after:mx-2 after:hidden  after:h-1 after:w-10 after:border-b  after:border-gray-200   dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10"
-              }
-            >
-              <div className="flex flex-row gap-2  ">
-                {/* Icon */}
-                <div
-                  className={clsx(
-                    "ring-buttonPrimary-200 flex h-6 w-6 min-w-[24px] items-center  justify-center rounded  ring-2 ring-offset-2",
-                    i + 1 <= props.currentStep
-                      ? "bg-buttonPrimary-500 text-white"
-                      : "bg-buttonPrimary-200"
-                  )}
-                >
-                  {i + 1 <= props.currentStep ? (
-                    <svg
-                      aria-label="Check Mark"
-                      stroke="currentColor"
-                      fill="white"
-                      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>
-                  ) : (
-                    i + 1
-                  )}
-                </div>
-                {/* Text */}
-                <div className="whitespace-nowrap">{step}</div>
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// const TimelineStep = (props) => {
-//   let defaultStyles = {
-//     vertical: "",
-//     horizontal: "",
-//   }
-//   return (
-//     <div
-//       className={
-//         props.orientation === "vertical"
-//           ? "flex w-full flex-row items-center"
-//           : props.stepNumber === props.steps
-//           ? "flex items-center"
-//           : "after:border-1 flex items-center after:mx-6 after:hidden after:h-1 after:w-10 after:border-b after:border-gray-200  dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10"
-//       }
-//     >
-//       <div
-//         className={clsx(
-//           "ring-buttonPrimary-200 m-2 mr-4 flex h-6 w-6 items-center justify-center rounded ring-2 ring-offset-2",
-//           props.current
-//             ? "bg-buttonPrimary-500 text-white"
-//             : "bg-buttonPrimary-200"
-//         )}
-//       >
-//         {props.current ? <FaCheck fontSize={11} /> : props.stepNumber}
-//       </div>
-//       <div className="whitespace-nowrap">{props.stepName}</div>
-//     </div>
-//   )
-// }