Merge branch 'master' into X2-7602

index.d.ts

@@ -1,28 +1,36 @@
 // This is just to make the auto-import work.
 // Next step is to add types for the props.
 export {
+    AccountIcon,
+    AddNoteIcon,
     AddSquareIcon,
     Alert,
     almostZero,
     AnnounceIcon,
+    AppIcon,
     ArchiveIcon,
     ArrowCcwIcon,
+    ArrowCwIcon,
+    ArrowDownIcon,
     ArrowRightIcon,
     ArrowTopRightIcon,
+    ArrowUpIcon,
     AtIcon,
     Avatar,
     Badge,
     BalloonIcon,
     BankCheckIcon,
     BarGraphIcon,
-    BaseChartOptions,
+    BaseInput,
     BellIcon,
+    BookIcon,
     BookmarkIcon,
     BoxIcon,
     Breadcrumb,
     Breakdown,
     BriefcaseIcon,
     Button,
+    ButtonCodeIcon,
     ButtonGroup,
     CakeIcon,
     CalendarDayIcon,
@@ -35,102 +43,165 @@ export {
     CartIcon,
     CashIcon,
     Checkbox,
+    CheckboxIcon,
     CheckIcon,
     ChecklistIcon,
     ChevronDownIcon,
     ChevronLeftIcon,
     ChevronRightIcon,
     ChevronUpIcon,
     ChipIcon,
+    CircleCheckIcon,
+    CircleCrossIcon,
+    CircleCrownIcon,
+    CircleDollarIcon,
+    CircleDotIcon,
+    CircleInfinityIcon,
+    CircleInfoIcon,
+    CircleKeyIcon,
+    CircleNotch,
+    CirclePauseIcon,
+    CirclePlusIcon,
+    CircleSubtractIcon,
     ClipboardIcon,
     ClockAltIcon,
     ClockIcon,
+    ClockManualIcon,
     CloseCircleIcon,
     CloseIcon,
+    CollapseIcon,
+    ComboBox,
+    CommentAltIcon,
     CommentIcon,
+    compactNumber,
     CompassIcon,
     CopyIcon,
     Counter,
+    CouponIcon,
     CrmIcon,
+    CrownIcon,
     Currency,
     DashboardIcon,
+    dateFromObjectId,
     DatePicker,
     DatePickerPopover,
     DecreaseIcon,
     DepositIcon,
     DisabledIcon,
     DisputeIcon,
     Dot,
+    DotProgress,
     DotCircleIcon,
+    DoubleCheckIcon,
     DownArrowIcon,
     DownloadIcon,
     Drawer,
+    DropdownIcon,
+    DumbbellIcon,
+    DuplicateIcon,
+    DurationIcon,
     EditIcon,
+    EditNoteIcon,
+    EditNotesIcon,
     EllipsisIcon,
+    EmailCheckedIcon,
     EmailIcon,
+    EmailResendIcon,
+    EmailSendIcon,
     EmptyChecklistIcon,
     EquipmentIcon,
     ExportIcon,
+    EyeClosedIcon,
     EyeIcon,
     FaceNeutralIcon,
     FaceSadIcon,
     FaceSmileIcon,
+    FadeIn,
+    FilterIcon,
+    FilterIconOld,
     FlagIcon,
     flash,
+    FlexFee2Icon,
+    FlexFeeIcon,
+    FoodIcon,
     ForkIcon,
+    formatDate,
+    formatTime,
     FormGroup,
     FunnelIcon,
+    getChildByType,
+    getChildrenByType,
+    getInitials,
     getSymbol,
     GiftIcon,
+    GlobeIcon,
     HandIcon,
+    HandshakeIcon,
     HeaderToolbar,
+    HelpCenterIcon,
     HiddenIcon,
-    HiddenIcon,
-    HistogramOptions,
-    StoreCreditIcon,
+    HouseIcon,
     ImageIcon,
+    ImageUpload,
     InfinityIcon,
-    CircleInfoIcon,
+    InlineValuePopover,
     Input,
     InvoiceIcon,
     isOSX,
     isZeroDecimal,
     Key,
     KeyIcon,
+    KioskIcon,
     Label,
+    LabelIcon,
     LandscapeIcon,
+    LightIcon,
     LinkIcon,
     LockIcon,
     Login,
     Logo,
+    LogoutIcon,
     MagicIcon,
+    MedicalIcon,
     MegaphoneIcon,
     MenuIcon,
+    MinusIcon,
     MixedChecklistIcon,
+    MobileIcon,
     Modal,
     MoneyAddIcon,
     MoneyBackIcon,
     MoneyIcon,
+    MountainIcon,
+    MouseIcon,
     Number,
     numberFormat,
+    PassIcon,
     PauseIcon,
     PenIcon,
     Phone,
     PhoneIcon,
-    PieOptions,
+    PhotosIcon,
     PiggyBankIcon,
     PinIcon,
     PipeIcon,
+    PlayIcon,
     PlusIcon,
+    PolicyIcon,
     Popover,
     PopoverList,
     PrintIcon,
     ProductsIcon,
+    Provider,
+    QuestionIcon,
     QuestionnaireIcon,
     RangeSlider,
     ReceiptIcon,
-    RelativeDateRange,
+    ReceptionBellIcon,
+    ReceptionBellMoneyIcon,
     RefreshIcon,
+    RefundIcon,
+    RelativeDateRange,
     RosterIcon,
     RoundedSquareIcon,
     roundNumber,
@@ -140,36 +211,61 @@ export {
     SearchIcon,
     Select,
     SendIcon,
+    SeniorIcon,
+    SeniorV2Icon,
+    SeniorV3Icon,
     ServiceIcon,
     SettingsIcon,
     ShapesIcon,
     ShareIcon,
     ShirtIcon,
+    ShoppingBagIcon,
     Sidebar,
     Skeleton,
+    SlideDown,
     Spinner,
     SplitPaymentIcon,
     SquareIcon,
     StackIcon,
+    StarFilledIcon,
     StarIcon,
+    StoreCreditIcon,
+    SubmitButton,
     Switch,
     Table,
     Tabs,
     Tag,
+    TaxIcon,
     Textarea,
     theme,
+    ThumbsDownIcon,
+    ThumbsUpIcon,
     TicketIcon,
+    ToggleButton,
     Tooltip,
+    TransferArrowIcon,
     TrashIcon,
+    TutorialsBadgeIcon,
+    TutorialsButtonIcon,
+    TutorialsSquareIcon,
     UnlinkIcon,
+    useId,
+    useIsClient,
     UserAddIcon,
+    UserChangedIcon,
     UserIcon,
+    UserSubtractIcon,
+    ValuePopoverText,
     VeteranIcon,
+    ViewNotesIcon,
     VoucherIcon,
     WaitlistIcon,
+    WarningDiamondIcon,
     WarningIcon,
+    WarningTriangleIcon,
+    WeightIcon,
     WifiIcon,
     WriteIcon,
+    XolaBotIcon,
     XrayIcon,
-    ImageUpload,
 } from "./build/ui-kit.umd";

package.json

@@ -1,11 +1,12 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.20",
+    "version": "2.1.25",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [
         "build",
         "index.css",
+        "index.d.ts",
         "tailwind.config.js",
         "postcss.config.js"
     ],
@@ -14,18 +15,17 @@
     "types": "index.d.ts",
     "scripts": {
         "prepare": "node scripts/prepare && vite build",
-        "start": "node scripts/prepare && start-storybook -p 6006 -s public",
-        "dev": "node scripts/prepare && start-storybook -p 6006 -s public --no-manager-cache",
-        "storybook": "node scripts/prepare && start-storybook -p 6006 -s public",
-        "build": "node scripts/prepare && vite build",
-        "watch": "npm run build -- --watch",
+        "start": "npm run storybook -s public --no-open",
+        "dev": "npm run storybook -s public --no-manager-cache --no-open",
+        "storybook": "npm run prepare && start-storybook -p 6006 -s public --no-open",
+        "build": "npm run prepare && vite build",
         "clean": "rm -rf node_modules/.vite",
-        "build:storybook": "node scripts/prepare && build-storybook -s public",
-        "lint": "xola-lint --ignore src/stories src",
-        "lint:fix": "xola-lint --ignore src/stories src --fix",
-        "lint:report": "xola-lint --ignore src/stories src --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
+        "build:storybook": "npm run prepare && build-storybook -s public",
+        "lint": "xola-lint src --ignore src/stories",
+        "lint:fix": "xola-lint src --fix --ignore src/stories",
+        "lint:report": "xola-lint src --ignore src/stories --reporter=json src > eslint_report.json",
         "format": "prettier --write src",
-        "test": "xola-lint && jest",
+        "test": "jest",
         "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
     "dependencies": {

src/components/DatePicker/DatePicker.css

@@ -127,7 +127,8 @@
 }
 
 /* Change the dates within the date to have the full light blue to show that it's a part of the range */
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+.date-range-picker
+    .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
     @apply rounded-none bg-blue-lighter text-black;
 }
 

src/components/Dot.jsx → src/components/Dot/Dot.jsx

@@ -11,10 +11,16 @@ const colors = {
     caution: "bg-caution",
 };
 
-export const Dot = ({ color = "primary", className, ...rest }) => {
+const sizes = {
+    small: "h-1 w-1",
+    medium: "h-1.5 w-1.5",
+    large: "h-2 w-2",
+};
+
+export const Dot = ({ color = "primary", size = "medium", className, ...rest }) => {
     return (
         <span
-            className={clsx("ui-dot", "inline-block h-1 w-1 rounded-full text-white", colors[color], className)}
+            className={clsx("ui-dot", "inline-block rounded-full text-white", colors[color], sizes[size], className)}
             {...rest}
         />
     );

src/components/Dot/DotProgress.jsx

@@ -0,0 +1,25 @@
+import { range } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { Dot } from "./Dot";
+
+export const DotProgress = ({ current, total }) => {
+    if (total <= 1) {
+        return null;
+    }
+
+    return (
+        <div className="w-full space-x-2 text-center">
+            {range(0, total).map((index) => {
+                const currentValue = current <= 0 ? 0 : current >= total ? current - 1 : current;
+                const color = index === currentValue ? "primary" : "secondary";
+                return <Dot key={index} color={color} size="medium" />;
+            })}
+        </div>
+    );
+};
+
+DotProgress.propTypes = {
+    total: PropTypes.number.isRequired,
+    current: PropTypes.number.isRequired,
+};