@sorocraft/ui 1.2.69 → 1.2.76

package/dist/models/form.d.ts

@@ -0,0 +1,3 @@
+export interface FormErrors {
+    [key: string]: string;
+}

package/dist/models/modal.d.ts

@@ -0,0 +1,21 @@
+import { JSXElementConstructor, LazyExoticComponent, ReactElement } from "react";
+export interface ModalParams {
+    closeModal?: () => void;
+    onClose?: () => void;
+    [key: string]: any;
+}
+export interface ModalType {
+    id: string;
+    params?: ModalParams;
+}
+export interface DrawerType {
+    id: string;
+    params?: ModalParams;
+}
+export interface ModalComponentProps {
+    params: ModalParams;
+}
+export type ModalComponent = JSXElementConstructor<ModalComponentProps> | LazyExoticComponent<({ params }: ModalComponentProps) => ReactElement>;
+export interface ModalsMap {
+    [key: string]: ModalComponent;
+}

package/dist/models/ui.d.ts

@@ -0,0 +1,27 @@
+export type SIZE = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+export type SIZE_LONG = "xsmall" | "small" | "medium" | "large";
+export declare enum UIElementType {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    DANGER = "danger",
+    SUCCESS = "success",
+    WARNING = "warning",
+    INFO = "info",
+    LIGHT = "light",
+    DEFAULT = "default",
+    DARK = "dark",
+    LIGHT_PRIMARY = "lightPrimary",
+    LIGHT_SUCCESS = "lightSuccess",
+    LIGHT_WARNING = "lightWarning",
+    LIGHT_INFO = "lightInfo",
+    LIGHT_DANGER = "lightDanger",
+    LIGHT_DARK = "lightDark",
+    LIGHT_SECONDARY = "lightSecondary",
+    WHITE_TEXT = "whiteText",
+    BORDERED_PRIMARY = "borderedPrimary",
+    BORDERED_SECONDARY = "borderedSecondary",
+    NO_STYLE = "noStyle"
+}
+export interface DivElementMap {
+    [key: string]: HTMLDivElement | null;
+}

package/dist/styles/scss/animations.scss

@@ -0,0 +1,115 @@
+@keyframes flexWide {
+	from {
+		flex: 0;
+	}
+
+	to {
+		flex: 1;
+	}
+}
+
+@keyframes slidein {
+	from {
+		transform: translateX(0%);
+	}
+	to {
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes fadeInOut {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes heightAnimation {
+	0% {
+		height: 0%;
+	}
+
+	100% {
+		height: 100%;
+	}
+}
+
+@keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes floatAnimation {
+	0% {
+		transform: translateY(0);
+	}
+	100% {
+		transform: translateY(-20px);
+	}
+}
+
+@keyframes bottomSheet {
+	from {
+		transform: translate(0, 100%);
+	}
+	to {
+		transform: translate(0, 0);
+	}
+}
+
+@keyframes slideRightToLeft {
+	from {
+		transform: translateX(100%);
+	}
+	to {
+		transform: translateX(0%);
+	}
+}
+
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/dist/styles/scss/colors.scss

@@ -0,0 +1,140 @@
+$color-gray-100: #f5f8fa;
+$color-gray-200: #eff2f5;
+$color-gray-300: #e4e6ef;
+$color-gray-400: #b5b5c3;
+$color-gray-500: #a1a5b7;
+$color-gray-600: #7e8299;
+$color-gray-700: #5e6278;
+$color-gray-800: #3f4254;
+$color-gray-900: #181c32;
+$color-border: $color-gray-200;
+$color-border-dashed: $color-gray-300;
+$color-blue: #009ef6;
+$color-indigo: #6610f2;
+$color-purple: #6f42c1;
+$color-pink: #d63384;
+$color-red: #dc3545;
+$color-orange: #fd7e14;
+$color-yellow: #ffc107;
+$color-green: #198754;
+$color-teal: #20c997;
+$color-cyan: #0dcaf0;
+$color-gray: #7e8299;
+$color-gray-dark: $color-gray-800;
+$color-white: #ffffff;
+$color-black: #000000;
+// THEME COLORS
+$color-light: $color-gray-100;
+$color-light-active: $color-gray-300;
+$color-light-inverse: $color-gray-600;
+$color-primary: var(--sorocraft-color-primary, #2d3436);
+$color-primary-light: var(--sorocraft-color-primary-light, #f5f8fa);
+$color-primary-active: var(--sorocraft-color-primary-active, #212526);
+$color-primary-inverse: var(--sorocraft-color-primary-inverse, $color-white);
+$color-secondary: var(--sorocraft-color-secondary, #16a085);
+$color-secondary-inverse: $color-white;
+$color-secondary-active: var(--sorocraft-color-secondary-active, #0bb7af);
+$color-secondary-light: rgba($color-secondary, 0.1);
+$color-secondary-extra-light: var(--sorocraft-color-secondary-extra-light, #dcfdfd);
+$color-success: #1bc5bd;
+$color-success-light: #c9f7f5;
+$color-success-active: #0bb7af;
+$color-success-inverse: $color-white;
+$color-info: #7239ea;
+$color-info-inverse: $color-white;
+$color-info-light: #f8f5ff;
+$color-info-active: #5014d0;
+$color-warning: #ffc700;
+$color-warning-inverse: $color-white;
+$color-warning-light: #fff8dd;
+$color-warning-active: #f1bc00;
+$color-danger: #f1416c;
+$color-danger-inverse: $color-white;
+$color-dark: $color-gray-900;
+$color-dark-inverse: $color-white;
+$color-dark-light: $color-gray-200;
+$color-dark-active: #131628;
+$color-danger-light: #fff5f8;
+$color-danger-active: #d9214e;
+$color-link: #1b84ff;
+$color-link-active: #056ee9;
+$color-link-light: #e9f3ff;
+$color-link-inverse: #ffffff;
+// END THEME COLORS
+$color-light-rgb: 245, 248, 250;
+$color-primary-rgb: 4, 200, 200;
+$color-success-rgb: 0, 158, 247;
+$color-info-rgb: 114, 57, 234;
+$color-warning-rgb: 255, 199, 0;
+$color-danger-rgb: 241, 65, 108;
+$color-dark-rgb: 24, 28, 50;
+$color-white-rgb: 255, 255, 255;
+$color-black-rgb: 0, 0, 0;
+$color-body-color-rgb: 24, 28, 50;
+$color-body-bg-rgb: 255, 255, 255;
+$color-body-bg: #f3f6f9;
+$color-link-hover: #36d3d3;
+$color-sidebar-bg: $color-white;
+
+/* Text */
+$color-text-muted: $color-gray-500;
+$color-body-text: $color-gray-900;
+$color-message-bg: $color-white;
+$color-active-message-bg: $color-secondary-extra-light;
+
+/* Input */
+$color-input-plaintext: $color-gray-700;
+$color-input-bg: $color-white;
+$color-input-disabled-bg: $color-gray-200;
+$color-input-disabled-border: $color-gray-300;
+$color-input: $color-gray-700;
+$color-input-border: $color-gray-300;
+$color-input-focus-bg: $color-white;
+$color-input-focus-border: $color-gray-400;
+$color-input-focus: $color-gray-700;
+$color-input-solid-bg: $color-gray-100;
+$color-input-solid-bg-focus: #eef3f7;
+$color-input-solid-placeholder: $color-gray-500;
+$color-input-solid: $color-gray-700;
+
+/* Button */
+$btn-disabled-color: $color-white;
+$btn-disabled-bg: $color-primary;
+$btn-disabled-border-color: $color-primary;
+$btn-color: $color-body-text;
+
+$color-tooltip: $color-gray-800;
+$color-tooltip-bg: $color-white;
+
+/* TABLE */
+$color-table: $color-gray-900;
+$color-table-bg: transparent;
+$color-table-border: $color-gray-200;
+$color-table-accent-bg: transparent;
+$color-table-striped: $color-gray-900;
+$color-table-striped-bg: rgba(245, 248, 250, 0.75);
+$color-table-active: $color-gray-900;
+$color-table-active-bg: $color-gray-100;
+$color-table-hover: $color-gray-900;
+$color-table-hover-bg: $color-gray-100;
+$color-table-caption: $color-gray-500;
+$color-table-loading-message-bg: $color-white;
+$color-table-loading-message: $color-gray-700;
+
+/* Modal */
+$color-modal-divider: $color-gray-200;
+
+/* Bagde */
+$color-badge: $color-gray-100;
+$color-badge-text: $color-gray-500;
+
+/* Menu */
+$menu-dropdown-bg-color: $color-white;
+$color-divider: $color-gray-200;
+$color-darker-divider: $color-gray-400;
+
+/* Notification */
+$color-unseen-notification: $color-gray-200;
+
+/* BRANDS */
+$color-whatsapp: #25d366;

package/dist/styles/scss/functions/toRem.scss

@@ -0,0 +1,13 @@
+@use "sass:list";
+@use "sass:math";
+
+@use "../variables" as variables;
+
+@function toRem($value...) {
+	$result: ();
+
+	@each $val in $value {
+		$result: list.append($result, math.div($val, variables.$base-font-size) * 1rem);
+	}
+	@return $result;
+}

package/dist/styles/scss/mixins.scss

@@ -0,0 +1,261 @@
+@use "./colors.scss" as *;
+@use "./variables.scss" as *;
+@use "./functions/toRem.scss" as functions;
+@use "./responsive.scss" as *;
+@use "sass:list";
+@use "sass:map";
+
+@mixin flexCentered {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+@mixin noSelection {
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+@mixin thickScrollbar {
+	scrollbar-color: rgba($color: $color-primary, $alpha: 0.3) transparent;
+
+	&::-webkit-scrollbar {
+		height: 8px;
+		width: 8px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: rgba($color: $color-primary, $alpha: 0.3);
+	}
+}
+
+@mixin cardStyle() {
+	background-color: $color-white;
+	border-radius: $card-border-radius;
+	margin-bottom: 2rem;
+	box-shadow: $card-box-shadow;
+}
+
+/* RESPONSIVE */
+
+$xxs: 375px;
+$xs: 430px;
+$sm: 580px;
+$msm: 660px;
+$md: 768px;
+$lm: 844px;
+$lg: 1024px;
+$xl: 1200px;
+$xxl: 1440px;
+
+@mixin media-xxl-down {
+	@media (max-width: #{$xxl}) {
+		@content;
+	}
+}
+
+@mixin media-xl-down {
+	@media (max-width: #{$xl}) {
+		@content;
+	}
+}
+
+@mixin media-lg-down {
+	@media (max-width: #{$lg}) {
+		@content;
+	}
+}
+
+@mixin media-lm-down {
+	@media (max-width: #{$lm}) {
+		@content;
+	}
+}
+
+@mixin media-md-down {
+	@media (max-width: #{$md}) {
+		@content;
+	}
+}
+
+@mixin media-msm-down {
+	@media (max-width: #{$msm}) {
+		@content;
+	}
+}
+
+@mixin media-xs-down {
+	@media (max-width: #{$xs}) {
+		@content;
+	}
+}
+
+@mixin media-xxs-down {
+	@media (max-width: #{$xxs}) {
+		@content;
+	}
+}
+
+@mixin media-xxl-up {
+	@media (min-width: #{$xxl}) {
+		@content;
+	}
+}
+
+@mixin media-xl-up {
+	@media (min-width: #{$xl}) {
+		@content;
+	}
+}
+
+@mixin media-lg-up {
+	@media (min-width: #{$lg}) {
+		@content;
+	}
+}
+
+@mixin media-lm-up {
+	@media (min-width: #{$lm}) {
+		@content;
+	}
+}
+
+@mixin media-md-up {
+	@media (min-width: #{$md}) {
+		@content;
+	}
+}
+
+@mixin media-sm-up {
+	@media (min-width: #{$sm}) {
+		@content;
+	}
+}
+
+@mixin media-xs-up {
+	@media (min-width: #{$xs}) {
+		@content;
+	}
+}
+
+@mixin media-xxs-up {
+	@media (min-width: #{$xxs}) {
+		@content;
+	}
+}
+
+@mixin apply-ui-type-styles($styles) {
+	background-color: list.nth($styles, 1);
+	color: list.nth($styles, 2);
+	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
+	i {
+		color: list.nth($styles, 2);
+	}
+
+	svg {
+		stroke: list.nth($styles, 2) !important;
+		transition: stroke 0.2s ease-in-out;
+
+		path {
+			stroke: list.nth($styles, 2) !important;
+			transition: stroke 0.2s ease-in-out;
+		}
+	}
+
+	.action {
+		background-color: list.nth($styles, 3);
+
+		svg {
+			stroke: list.nth($styles, 4) !important;
+			transition: stroke 0.2s ease-in-out;
+
+			path {
+				stroke: list.nth($styles, 4) !important;
+				transition: stroke 0.2s ease-in-out;
+			}
+		}
+	}
+
+	&:hover,
+	&.active {
+		background-color: list.nth($styles, 3);
+		color: list.nth($styles, 4);
+
+		svg {
+			stroke: list.nth($styles, 4) !important;
+
+			path {
+				stroke: list.nth($styles, 4) !important;
+			}
+		}
+
+		.action {
+			background-color: list.nth($styles, 1);
+
+			svg {
+				stroke: list.nth($styles, 2) !important;
+
+				path {
+					stroke: list.nth($styles, 2) !important;
+				}
+			}
+		}
+	}
+}
+
+@mixin gradientUnderline($color) {
+	background: $color;
+	background-position: 0 100%;
+	background-size: 100% 2px;
+	background-repeat: repeat-x;
+}
+
+@mixin maxLine($lineCount) {
+	display: -webkit-box;
+	line-clamp: $lineCount;
+	-webkit-line-clamp: $lineCount;
+	-webkit-box-orient: vertical;
+}
+
+@mixin avatar-size($size) {
+	width: functions.toRem(map.get($avatar-sizes, $size));
+	height: functions.toRem(map.get($avatar-sizes, $size));
+}
+
+// Headings with responsive font sizes
+@mixin heading($default, $xl: null, $lg: null, $md: null, $sm: null) {
+	font-size: $default;
+	margin-bottom: 1rem;
+	line-height: calc($default * 1.5);
+
+	@if $xl {
+		@include media-xl-down {
+			font-size: $xl;
+			line-height: calc($xl * 1.5);
+		}
+	}
+	@if $lg {
+		@include media-lg-down {
+			font-size: $lg;
+			line-height: calc($lg * 1.5);
+		}
+	}
+	@if $md {
+		@include media-md-down {
+			font-size: $md;
+			line-height: calc($md * 1.5);
+		}
+	}
+	@if $sm {
+		@include media(down, mobile-md) {
+			font-size: $sm;
+			line-height: calc($sm * 1.5);
+		}
+	}
+}

package/dist/styles/scss/responsive.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+$breakpoints: (
+	mobile-xxs: 320px,
+	mobile-xs: 375px,
+	mobile-sm: 480px,
+	mobile-md: 576px,
+	tablet-sm: 768px,
+	tablet-md: 992px,
+	tablet-lg: 1024px,
+	desktop-sm: 1200px,
+	desktop-md: 1440px,
+	desktop-lg: 1920px,
+);
+
+// Enhanced media query mixin
+@mixin media($type, $start, $end: null) {
+	$start-value: map.get($breakpoints, $start);
+	$end-value: if($end, map.get($breakpoints, $end), null);
+
+	@if $type == "range" and $start-value and $end-value {
+		@media (min-width: #{$start-value}) and (max-width: #{$end-value}) {
+			@content;
+		}
+	} @else if $type == "down" and $start-value {
+		@media (max-width: #{$start-value}) {
+			@content;
+		}
+	} @else if $type == "up" and $start-value {
+		@media (min-width: #{$start-value}) {
+			@content;
+		}
+	} @else {
+		@error "Invalid type `#{$type}` or breakpoint `#{$start}` or `#{$end}`.";
+	}
+}

package/dist/styles/scss/utils.scss

@@ -0,0 +1,6 @@
+@forward "./colors.scss";
+@forward "./functions/toRem.scss";
+@forward "./variables.scss";
+@forward "./mixins";
+@forward "./animations";
+@forward "./responsive.scss";