@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/HawaSelect.tsx

@@ -1,216 +0,0 @@
-import clsx from "clsx"
-import React, { FC } from "react"
-import Select from "react-select"
-import CreatableSelect from "react-select/creatable"
-import { Label } from "./Label"
-import { cn } from "../util"
-import { Skeleton } from "./Skeleton"
-
-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.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 cursor-pointer select-none flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-primary hover:text-primary-foreground"
-    {...innerProps}
-  >
-    {children}
-  </div>
-)
-
-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
-  defaultValue?: any
-  isLoading?: any
-}
-export const HawaSelect: FC<SelectTypes> = (props) => {
-  return (
-    <div className=" flex w-full flex-col gap-2">
-      {props.label && <Label>{props.label}</Label>}
-
-      {props.isLoading ? (
-        <Skeleton className="h-[38px] w-full" />
-      ) : !props.isCreatable ? (
-        <Select
-          classNames={{
-            // control: () => "bg-blue-500 w-full",
-            container: () =>
-              cn(
-                "rounded",
-                props.disabled ? "cursor-not-allowed" : "cursor-pointer"
-              ),
-            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}
-          defaultValue={props.defaultValue}
-          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}
-        />
-      ) : (
-        <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 { HawaColorPicker } from "./HawaColorPicker"
-import { HawaRange } from "./HawaRange"
-import { HawaRadio } from "./HawaRadio"
-import { HawaSelect } from "./HawaSelect"
-import { Switch } from "./Switch"
-
-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: "sm" | "default"
-  }
-  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" && <Switch {...switchProps} />}
-      {settingsType === "range" && <HawaRange {...rangeProps} />}
-      {settingsType === "color" && <HawaColorPicker {...colorProps} />}
-      {settingsType === "radio" && <HawaRadio {...radioProps} />}
-      {settingsType === "select" && <HawaSelect {...selectProps} />}
-    </div>
-  )
-}

package/src/elements/HawaStats.tsx

@@ -1,51 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent, CardHeader, CardTitle } from "./Card"
-import { Skeleton } from "./Skeleton"
-
-type StatTypes = {
-  label?: string
-  color?: string
-  number?: string
-  helperText?: string
-  chart?: any
-  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 }) => {
-  return (
-    <Card onClick={props.handleClick} clickable={Boolean(props.handleClick)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{props.label}</CardTitle>
-        {props.icon && props.icon}
-      </CardHeader>
-      <CardContent>
-        {props.isLoading ? (
-          <Skeleton className="h-8 w-3/4" />
-        ) : (
-          <div className="text-2xl font-bold">{props.number}</div>
-        )}
-        {props.isLoading && props.helperText ? (
-          <Skeleton className="mt-2 h-4 w-1/2" />
-        ) : (
-          props.helperText && (
-            <p className="text-xs text-muted-foreground">{props.helperText}</p>
-          )
-        )}
-        {props.isLoading && props.chart ? (
-          <Skeleton className="mt-2 h-4 w-1/2" />
-        ) : (
-          props.chart
-        )}
-      </CardContent>
-    </Card>
-  )
-}

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(
-                    "flex h-6 w-6 min-w-[24px] items-center justify-center  rounded ring-2  ring-primary/20 ring-offset-2",
-                    i + 1 <= props.currentStep
-                      ? "bg-primary text-primary-foreground "
-                      : "bg-primary/20"
-                  )}
-                >
-                  {i + 1 <= props.currentStep ? (
-                    <svg
-                      aria-label="Check Mark"
-                      stroke="currentColor"
-                      fill="currentColor"
-                      strokeWidth="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>
-//   )
-// }

package/src/elements/HawaStoreButtons.tsx

@@ -1,129 +0,0 @@
-import React, { FC } from "react"
-
-type StoreButtonsTypes = {
-  store: "apple" | "google"
-  mode: "dark" | "light"
-}
-export const HawaStoreButtons: FC<StoreButtonsTypes> = (props) => {
-  return (
-    <div className="flex justify-center">
-      <div>
-        {/* <!-- https://developer.apple.com/app-store/marketing/guidelines/#section-badges --> */}
-        {props.store === "apple" ? (
-          props.mode === "dark" ? (
-            <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white">
-              <div className="mr-3">
-                <svg viewBox="0 0 384 512" width="30">
-                  <path
-                    fill="currentColor"
-                    d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <div className="text-xs">Download on the</div>
-                <div className="font-sans -mt-1 text-2xl font-semibold">
-                  App Store
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-transparent text-black">
-              <div className="mr-3">
-                <svg viewBox="0 0 384 512" width="30">
-                  <path
-                    fill="currentColor"
-                    d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <div className="text-xs">Download on the</div>
-                <div className="font-sans -mt-1 text-2xl font-semibold">
-                  App Store
-                </div>
-              </div>
-            </div>
-          )
-        ) : props.mode === "dark" ? (
-          <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-black text-white">
-            <div className="mr-3">
-              <svg viewBox="30 336.7 120.9 129.2" width="30">
-                <path
-                  fill="#FFD400"
-                  d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
-                />
-                <path
-                  fill="#FF3333"
-                  d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
-                />
-                <path
-                  fill="#48FF48"
-                  d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
-                />
-                <path
-                  fill="#3BCCFF"
-                  d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
-                />
-              </svg>
-            </div>
-            <div>
-              <div className="text-xs">GET IT ON</div>
-              <div className="font-sans -mt-1 text-xl font-semibold">
-                Google Play
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-white text-black">
-            <div className="mr-3">
-              <svg viewBox="30 336.7 120.9 129.2" width="30">
-                <path
-                  fill="#FFD400"
-                  d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7  c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z"
-                />
-                <path
-                  fill="#FF3333"
-                  d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3  c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z"
-                />
-                <path
-                  fill="#48FF48"
-                  d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1  c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z"
-                />
-                <path
-                  fill="#3BCCFF"
-                  d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6  c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z"
-                />
-              </svg>
-            </div>
-            <div>
-              <div className="text-xs">GET IT ON</div>
-              <div className="font-sans -mt-1 text-xl font-semibold">
-                Google Play
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* <div className="mt-3 flex h-14 w-60 items-center justify-center rounded-xl bg-black text-white">
-          <div className="mr-3">
-            <svg viewBox="0 0 384 512" width="30">
-              <path
-                fill="currentColor"
-                d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
-              />
-            </svg>
-          </div>
-          <div>
-            <div className="text-xs">Download on the</div>
-            <div className="font-sans -mt-1 text-2xl font-semibold">
-              Mac App Store
-            </div>
-          </div>
-        </div> */}
-
-        {/* <!-- https://play.google.com/intl/en_us/badges/ --> */}
-      </div>
-    </div>
-  )
-}