@feminab/box-ui 0.1.0

package/src/data/colors.tsx

@@ -0,0 +1,279 @@
+import { IColor } from "../@interfaces";
+
+export const colors: IColor[] = [
+  {
+    bgClass: "bg-gray-2",
+    code: 25,
+    hex: "#FCFCF",
+  },
+  {
+    bgClass: "bg-gray-50",
+    code: 50,
+    hex: "#F9FAFB",
+  },
+  {
+    bgClass: "bg-gray-100",
+    code: 100,
+    hex: "#F2F4F7",
+  },
+  {
+    bgClass: "bg-gray-200",
+    code: 200,
+    hex: "#E4E7EC",
+  },
+  {
+    bgClass: "bg-gray-300",
+    code: 300,
+    hex: "#D0D5DD",
+  },
+  {
+    bgClass: "bg-gray-400",
+    code: 400,
+    hex: "#98A2B3",
+  },
+  {
+    bgClass: "bg-gray-500",
+    code: 500,
+    hex: "#667085",
+  },
+  {
+    bgClass: "bg-gray-600",
+    code: 600,
+    hex: "#475467",
+  },
+  {
+    bgClass: "bg-gray-700",
+    code: 700,
+    hex: "#344054",
+  },
+  {
+    bgClass: "bg-gray-800",
+    code: 800,
+    hex: "#1D2939",
+  },
+  {
+    bgClass: "bg-gray-900",
+    code: 900,
+    hex: "#101828",
+  },
+  {
+    bgClass: "bg-primary-25",
+    code: 25,
+    hex: "#F5FAFF",
+  },
+  {
+    bgClass: "bg-primary-50",
+    code: 50,
+    hex: "#EFF8FF",
+  },
+  {
+    bgClass: "bg-primary-100",
+    code: 100,
+    hex: "#D1E9FF",
+  },
+  {
+    bgClass: "bg-primary-200",
+    code: 200,
+    hex: "#B2DDFF",
+  },
+  {
+    bgClass: "bg-primary-300",
+    code: 300,
+    hex: "#84CAFF",
+  },
+  {
+    bgClass: "bg-primary-400",
+    code: 400,
+    hex: "#53B1FD",
+  },
+  {
+    bgClass: "bg-primary-500",
+    code: 500,
+    hex: "#2E90FA",
+  },
+  {
+    bgClass: "bg-primary-600",
+    code: 600,
+    hex: "#1570EF",
+  },
+  {
+    bgClass: "bg-primary-700",
+    code: 700,
+    hex: "#175CD3",
+  },
+  {
+    bgClass: "bg-primary-800",
+    code: 800,
+    hex: "#1849A9",
+  },
+  {
+    bgClass: "bg-primary-900",
+    code: 900,
+    hex: "#194185",
+  },
+  {
+    bgClass: "bg-error-25",
+    code: 25,
+    hex: "#FFFBFA",
+  },
+  {
+    bgClass: "bg-error-50",
+    code: 50,
+    hex: "#FEF3F2",
+  },
+  {
+    bgClass: "bg-error-100",
+    code: 100,
+    hex: "#FEE4E2",
+  },
+  {
+    bgClass: "bg-error-200",
+    code: 200,
+    hex: "#FECDCA",
+  },
+  {
+    bgClass: "bg-error-300",
+    code: 300,
+    hex: "#FDA29B",
+  },
+  {
+    bgClass: "bg-error-400",
+    code: 400,
+    hex: "#F97066",
+  },
+  {
+    bgClass: "bg-error-500",
+    code: 500,
+    hex: "#F04438",
+  },
+  {
+    bgClass: "bg-error-600",
+    code: 600,
+    hex: "#D92D20",
+  },
+  {
+    bgClass: "bg-error-700",
+    code: 700,
+    hex: "#B42318",
+  },
+  {
+    bgClass: "bg-error-800",
+    code: 800,
+    hex: "#912018",
+  },
+  {
+    bgClass: "bg-error-900",
+    code: 900,
+    hex: "#7A271A",
+  },
+  {
+    bgClass: "bg-warning-25",
+    code: 25,
+    hex: "#FFFCF5",
+  },
+  {
+    bgClass: "bg-warning-50",
+    code: 50,
+    hex: "#FFFAEB",
+  },
+  {
+    bgClass: "bg-warning-100",
+    code: 100,
+    hex: "#FEF0C7",
+  },
+  {
+    bgClass: "bg-warning-200",
+    code: 200,
+    hex: "#FEDF89",
+  },
+  {
+    bgClass: "bg-warning-300",
+    code: 300,
+    hex: "#FEC84B",
+  },
+  {
+    bgClass: "bg-warning-400",
+    code: 400,
+    hex: "#FDB022",
+  },
+  {
+    bgClass: "bg-warning-500",
+    code: 500,
+    hex: "#F79009",
+  },
+  {
+    bgClass: "bg-warning-600",
+    code: 600,
+    hex: "#DC6803",
+  },
+  {
+    bgClass: "bg-warning-700",
+    code: 700,
+    hex: "#B54708",
+  },
+  {
+    bgClass: "bg-warning-800",
+    code: 800,
+    hex: "#93370D",
+  },
+  {
+    bgClass: "bg-warning-900",
+    code: 900,
+    hex: "#7A2E0E",
+  },
+  {
+    bgClass: "bg-success-25",
+    code: 25,
+    hex: "#F6FEF9",
+  },
+  {
+    bgClass: "bg-success-50",
+    code: 50,
+    hex: "#ECFDF3",
+  },
+  {
+    bgClass: "bg-success-100",
+    code: 100,
+    hex: "#D1FADF",
+  },
+  {
+    bgClass: "bg-success-200",
+    code: 200,
+    hex: "#A6F4C5",
+  },
+  {
+    bgClass: "bg-success-300",
+    code: 300,
+    hex: "#6CE9A6",
+  },
+  {
+    bgClass: "bg-success-400",
+    code: 400,
+    hex: "#32D583",
+  },
+  {
+    bgClass: "bg-success-500",
+    code: 500,
+    hex: "#12B76A",
+  },
+  {
+    bgClass: "bg-success-600",
+    code: 600,
+    hex: "#039855",
+  },
+  {
+    bgClass: "bg-success-700",
+    code: 700,
+    hex: "#027A48",
+  },
+  {
+    bgClass: "bg-success-800",
+    code: 800,
+    hex: "#05603A",
+  },
+  {
+    bgClass: "bg-success-900",
+    code: 900,
+    hex: "#054F31",
+  },
+];

package/src/data/countries.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { IOption } from "../@interfaces";
+import { CountryISO, images } from "./images";
+
+interface ICountry {
+  city: string;
+  countryISO: CountryISO;
+}
+
+const countriesData: ICountry[] = [
+  {
+    city: "Ahmedabad",
+    countryISO: "IN",
+  },
+  {
+    city: "Amsterdam",
+    countryISO: "NL",
+  },
+  {
+    city: "Rome",
+    countryISO: "IT",
+  },
+  {
+    city: "Berlin",
+    countryISO: "DE",
+  },
+  {
+    city: "Paris",
+    countryISO: "FR",
+  },
+  {
+    city: "Washington",
+    countryISO: "US",
+  },
+  {
+    city: "Moscow",
+    countryISO: "RU",
+  },
+  {
+    city: "Brussels",
+    countryISO: "BE",
+  },
+];
+
+export const countries: IOption[] = countriesData.map((country) => ({
+  value: country.countryISO,
+  label: (
+    <>
+      <img
+        src={images[country.countryISO]}
+        alt={country.countryISO.toLowerCase()}
+        className="w-5 h-5 mr-2"
+      />{" "}
+      {`${country.city}, ${country.countryISO}`}
+    </>
+  ),
+}));

package/src/data/images/be.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#333" d="M0 0h167l38.2 252.6L167 512H0z"/><path fill="#d80027" d="M345 0h167v512H345l-36.7-256z"/><path fill="#ffda44" d="M167 0h178v512H167z"/></g></svg>

package/src/data/images/de.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"/><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"/><path fill="#333" d="M0 0h512v167H0z"/></g></svg>

package/src/data/images/fr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"/><path fill="#0052b4" d="M0 0h167v512H0z"/><path fill="#d80027" d="M345 0h167v512H345z"/></g></svg>

package/src/data/images/in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352z"/><path fill="#ff9811" d="M0 0h512v160H0Z"/><path fill="#6da544" d="M0 352h512v160H0Z"/><circle cx="256" cy="256" r="72" fill="#0052b4"/><circle cx="256" cy="256" r="48" fill="#eee"/><circle cx="256" cy="256" r="24" fill="#0052b4"/></g></svg>

package/src/data/images/index.tsx

@@ -0,0 +1,33 @@
+export type CountryISO = "IN" | "BE" | "DE" | "FR" | "IT" | "NL" | "RU" | "US";
+
+type image =  CountryISO | "logo";
+
+// Development images
+// const devImages: Record<image, string> = {
+// logo: require("./logo.png"),
+//   IN: require("./in.svg"),
+//   BE: require("./be.svg"),
+//   DE: require("./de.svg"),
+//   FR: require("./fr.svg"),
+//   IT: require("./it.svg"),
+//   NL: require("./nl.svg"),
+//   RU: require("./ru.svg"),
+//   US: require("./us.svg"),
+
+// };
+
+// Production images (CDN)
+const prodImages: Record<image, string> = {
+  logo: "https://media-hosting.imagekit.io/0ec1ca8b900e4e8b/logo.svg?Expires=1838348369&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=pCHsmoIdugCAGgRQuivkSFGORbcd0DMZjw-l9LQlxqEs77-19RpmN8TrGsMdYdKwLic46nDsKt44NPaRyu~mxJDKX7I0acu5x53nLqrjh-fs6s8VATv5eHASNeV83rLF3LXgXwMkXubchLy79xPaEHKlRlvJgcqrjZd3cE4C8QXC0KIG4dSjtkd0rECwtweKFuh1BrJIwcKIxiu5cEJUKgDvi4TUS22KVFh4c52c9CjBGa0ulrxxyZHMj2eXff-uQBkecyW-QYillwmsuz2i5PFf6Ud~9JZ2xYOBWwrq4VRSY-8p~c6Czqagg-w6gqyk-3xEM-f-cDfor~11~xwtTg__",
+  IN: "https://kapowaz.github.io/circle-flags/flags/in.svg",
+  BE: "https://kapowaz.github.io/circle-flags/flags/be.svg",
+  DE: "https://kapowaz.github.io/circle-flags/flags/de.svg",
+  FR: "https://kapowaz.github.io/circle-flags/flags/fr.svg",
+  IT: "https://kapowaz.github.io/circle-flags/flags/it.svg",
+  NL: "https://kapowaz.github.io/circle-flags/flags/nl.svg",
+  RU: "https://kapowaz.github.io/circle-flags/flags/ru.svg",
+  US: "https://kapowaz.github.io/circle-flags/flags/us.svg",
+};
+
+export const images = prodImages;
+// export const images = process.env.NODE_ENV === "production" ? prodImages : devImages;

package/src/data/images/it.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"/><path fill="#6da544" d="M0 0h167v512H0z"/><path fill="#d80027" d="M345 0h167v512H345z"/></g></svg>

package/src/data/images/logo.svg

@@ -0,0 +1,23 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="blueGradient" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#66b2ff"/>
+      <stop offset="100%" stop-color="#007bff"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Outer Box with Rounded Corners -->
+  <rect x="10" y="10" width="180" height="180" rx="20" stroke="white" stroke-width="4" fill="url(#blueGradient)"/>
+  
+  <!-- Vertical Slider -->
+  <line x1="50" y1="50" x2="50" y2="150" stroke="white" stroke-width="6"/>
+  <circle cx="50" cy="100" r="10" fill="white"/>
+
+  <!-- Rounded Button -->
+  <rect x="90" y="85" width="30" height="30" rx="6" fill="white"/>
+
+  <!-- Hamburger Menu -->
+  <line x1="140" y1="90" x2="170" y2="90" stroke="white" stroke-width="4"/>
+  <line x1="140" y1="100" x2="170" y2="100" stroke="white" stroke-width="4"/>
+  <line x1="140" y1="110" x2="170" y2="110" stroke="white" stroke-width="4"/>
+</svg>

package/src/data/images/nl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"/><path fill="#a2001d" d="M0 0h512v167H0z"/><path fill="#0052b4" d="M0 345h512v167H0z"/></g></svg>

package/src/data/images/ru.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#0052b4" d="M512 170v172l-256 32L0 342V170l256-32z"/><path fill="#eee" d="M512 0v170H0V0Z"/><path fill="#d80027" d="M512 342v170H0V342Z"/></g></svg>

package/src/data/images/us.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="M256 0h256v64l-32 32 32 32v64l-32 32 32 32v64l-32 32 32 32v64l-256 32L0 448v-64l32-32-32-32v-64z"/><path fill="#d80027" d="M224 64h288v64H224Zm0 128h288v64H256ZM0 320h512v64H0Zm0 128h512v64H0Z"/><path fill="#0052b4" d="M0 0h256v256H0Z"/><path fill="#eee" d="m187 243 57-41h-70l57 41-22-67zm-81 0 57-41H93l57 41-22-67zm-81 0 57-41H12l57 41-22-67zm162-81 57-41h-70l57 41-22-67zm-81 0 57-41H93l57 41-22-67zm-81 0 57-41H12l57 41-22-67Zm162-82 57-41h-70l57 41-22-67Zm-81 0 57-41H93l57 41-22-67zm-81 0 57-41H12l57 41-22-67Z"/></g></svg>

package/src/data/index.tsx

@@ -0,0 +1,5 @@
+export * from "./colors";
+export * from "./countries";
+export * from "./prices";
+export * from "./navItems";
+export * from "./options";

package/src/data/navItems.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { INavItem } from "../@interfaces";
+import {
+  FiArrowLeft,
+  FiBarChart2,
+  FiCheckSquare,
+  FiHome,
+  FiLayers,
+  FiSettings,
+  FiFlag,
+  FiMapPin,
+} from "react-icons/fi";
+
+const Home = FiHome as React.FC<any>;
+const Layers = FiLayers as React.FC<any>;
+const Settings = FiSettings as React.FC<any>;
+const Flag = FiFlag as React.FC<any>;
+const MapPin = FiMapPin as React.FC<any>;
+const CheckSquare = FiCheckSquare as React.FC<any>;
+const BarChart = FiBarChart2 as React.FC<any>;
+const ArrowLeft = FiArrowLeft as React.FC<any>;
+
+export const navItemsTop: INavItem[] = [
+  {
+    order: 0,
+    path: "home",
+    label: "Home",
+    icon: <Home />,
+  },
+  {
+    order: 1,
+    path: "dashboard",
+    label: "Dashboard",
+    icon: <BarChart />,
+    subItems: [
+      {
+        order: 0,
+        path: "analytics",
+        label: "Analytics",
+      },
+      {
+        order: 1,
+        path: "apps",
+        label: "Apps",
+      },
+      {
+        order: 2,
+        path: "learn",
+        label: "Learn",
+      },
+    ],
+  },
+  {
+    order: 2,
+    path: "projects",
+    label: "Projects",
+    icon: <Layers />,
+  },
+  {
+    order: 3,
+    path: "tasks",
+    label: "Tasks",
+    icon: <CheckSquare />,
+  },
+  {
+    order: 4,
+    path: "reporting",
+    label: "Reporting",
+    icon: <Flag />,
+  },
+  {
+    order: 5,
+    path: "rentals",
+    label: "Rentals",
+    icon: <MapPin />,
+    subItems: [
+      {
+        order: 0,
+        path: "all",
+        label: "All rentals",
+      },
+      {
+        order: 1,
+        path: "popular",
+        label: "Popular",
+      },
+      {
+        order: 2,
+        path: "recent",
+        label: "Recently added",
+      },
+    ],
+  },
+];
+
+export const navItemsBottom: INavItem[] = [
+  {
+    order: 0,
+    path: "settings",
+    label: "Settings",
+    icon: <Settings />,
+  },
+  {
+    order: 1,
+    label: "Close Navbar",
+    icon: <ArrowLeft />,
+    toggleSidebar: true,
+  },
+];

package/src/data/options.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { IButtonItem } from "../@interfaces";
+import { FiCircle, FiList, FiGrid } from "react-icons/fi";
+
+
+const Circle = FiCircle as React.FC<any>;
+
+const List = FiList as React.FC<any>;
+
+const Grid = FiGrid as React.FC<any>;
+
+export const options1: IButtonItem[] = [
+  { value: "Leading", content: "Leading" },
+  { value: "Middle", content: "Middle" },
+  { value: "Trailing", content: "Trailing" },
+];
+
+export const options2: IButtonItem[] = [
+  {
+    value: "first",
+    content:  (
+      <>
+        <span><Circle size={20} className='mr-2'/></span>
+        First
+      </>
+    ),
+  },
+  {
+    value: "second",
+    content: (
+      <>
+        <span><Circle size={20} className='mr-2'/></span>
+        Second
+      </>
+    ),
+  },
+  {
+    value: "third",
+    content: (
+      <>
+        <span><Circle size={20} className='mr-2'/></span>
+        Third
+      </>
+    ),
+  },
+];
+
+export const options3: IButtonItem[] = [
+  {value:'list', content:<List size={20}/>},
+  {value:'grid', content:<Grid size={20}/>},
+]

package/src/data/prices.tsx

@@ -0,0 +1,36 @@
+import { IOption } from "../@interfaces";
+
+export const prices: IOption[] = [
+  {
+    label: "Any price",
+    value: "-1",
+  },
+  {
+    label: "Below 50",
+    value: "0",
+  },
+  {
+    label: "50 - 100",
+    value: "50",
+  },
+  {
+    label: "100 - 200",
+    value: "100",
+  },
+  {
+    label: "200 - 300",
+    value: "200",
+  },
+  {
+    label: "300 - 400",
+    value: "300",
+  },
+  {
+    label: "400 - 500",
+    value: "400",
+  },
+  {
+    label: "500 - 600",
+    value: "500",
+  },
+];

package/src/hooks/useIconClassName.tsx

@@ -0,0 +1,14 @@
+import { ReactElement, cloneElement, isValidElement } from "react";
+import classNames from "classnames";
+
+export const useIconClassName = () => {
+  const setClassName = (icon: ReactElement, additionalClass: string) => {
+    return isValidElement<{ className?: string }>(icon)
+      ? cloneElement(icon, {
+          className: classNames(icon.props.className, additionalClass),
+        })
+      : icon;
+  };
+
+  return { setClassName };
+};

package/src/hooks/useIconProps.tsx

@@ -0,0 +1,19 @@
+import { ReactElement, cloneElement, isValidElement } from "react";
+import classNames from "classnames";
+
+export const useIconProps = () => {
+  const setProps = (
+    icon: ReactElement,
+    iconSize: number,
+    additionalClass: string
+  ) => {
+    return isValidElement<{ size?: number; className?: string }>(icon)
+      ? cloneElement(icon, {
+          size: iconSize,
+          className: classNames(icon.props.className, additionalClass),
+        })
+      : icon;
+  };
+
+  return { setProps };
+};

package/src/index.js

@@ -0,0 +1,15 @@
+export * from "./Badge";
+export * from "./Button";
+export * from "./ButtonGroup";
+export * from "./ColorBox";
+export * from "./Paginate";
+export * from "./Select";
+export * from "./TextInput";
+export * from "./Typography";
+
+export * from "./Nav/SideNav";
+export * from "./Nav/MobileNav";
+
+export * from "./@interfaces";
+export * from "./data";
+export * from "./data/images";

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />