groovinads-ui 1.0.0

package/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "groovinads-ui",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "repository": "git@bitbucket.org:groovinads/react-components.git",
+  "author": "Pablo Piñero <pablo.piniero@groovinads.com>",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "@babel/core": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.1",
+    "react-dom": "^18.2.0",
+    "sass": "^1.72.0",
+    "storybook": "^8.0.4",
+    "vite": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "packageManager": "yarn@4.1.1",
+  "scripts": {
+    "sb": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/src/components/Button/Button.jsx

@@ -0,0 +1,104 @@
+/* import React from 'react';
+
+//STYLES
+//import 'https://brands.groovinads.com/css/scss/components/_buttons.scss';
+
+const Button = ({ children, ...props }) => {
+	return <button {...props}>{children}</button>;
+}
+
+export default Button;
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// STYLES
+import '../../scss/components/_buttons.scss';
+
+const Button = ({
+	variant,
+	size,
+	onClick,
+	children,
+	icon,
+	iconPosition,
+	className,
+	style,
+	processing,
+}) => {
+	let classes = `btn ${className}`;
+
+	// Variant
+	if (variant !== 'default') {
+		classes += ` btn-${variant}`;
+	}
+
+	// Size
+	if (size !== 'md') {
+		classes += ` btn-${size}`;
+	}
+
+	// Style
+	if (style !== 'default') {
+		classes += ` btn-${style}`;
+	}
+
+	// Processing
+	if (processing) {
+		classes += ` btn-processing`;
+	}
+
+	// Icon
+    const content = processing ? (
+        <>
+            <i className='fa-solid fa-spinner-third fa-spin' aria-hidden='true'></i>
+            {children && <span>{children}…</span>}
+        </>
+    ) : icon ? (
+        iconPosition === 'end' ? (
+            <>
+                {children && <span>{children}</span>}
+                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
+            </>
+        ) : (
+            <>
+                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
+                {children && <span>{children}</span>}
+            </>
+        )
+    ) : (
+        children && <span>{children}</span>
+    );
+
+	return (
+		<button className={classes} onClick={onClick}>
+			{content}
+		</button>
+	);
+};
+
+Button.propTypes = {
+	variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
+	size: PropTypes.oneOf(['xs', 'md', 'lg']),
+	onClick: PropTypes.func,
+	children: PropTypes.node,
+	icon: PropTypes.node,
+	iconPosition: PropTypes.oneOf(['start', 'end']),
+	className: PropTypes.string,
+	style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
+	processing: PropTypes.bool,
+};
+
+Button.defaultProps = {
+	variant: 'primary',
+	size: 'md',
+	onClick: null,
+	icon: null,
+	iconPosition: 'start',
+	className: '',
+	style: 'default',
+	processing: false,
+};
+
+export default Button;

package/src/components/Button/index.jsx

@@ -0,0 +1,3 @@
+import Buttom from "./Button";
+
+export default Buttom;

package/src/index.jsx

@@ -0,0 +1,3 @@
+import Button from "./components/Button";
+
+export { Button };

package/src/scss/abstracts/_borders-radius.scss

@@ -0,0 +1,6 @@
+// Borders radius
+$border-radius-xs: 0.1875rem;
+$border-radius-sm: 0.375rem;
+$border-radius-md: 0.5rem;
+$border-radius-lg: 0.75rem;
+$border-radius-xl: 1rem;

package/src/scss/abstracts/_colors.scss

@@ -0,0 +1,33 @@
+// Groovinads colors
+$ga-brand-dark: #00004b;
+$ga-brand-midtone: #3930b1;
+$ga-brand-light: #24b8ce;
+
+// Neutrals
+$grey-dark: #767676;
+$grey-light: #efefef;
+$white: #ffffff;
+$black: #000000;
+
+// Secondary colors
+$secondary-blue-light: #2d85e5;
+$secondary-blue: #12355b;
+$secondary-violet-light: #9191db;
+$secondary-violet: #746ec8;
+$secondary-dark: #091a12;
+
+// Messaging
+$error: #e63137;
+$warning: #f3a905;
+$safeWarning: #aa5509;
+$warning-bg: #FEEDC6;
+$success: #5bbb84;
+$safeSuccess: #31754e;
+$success-bg: #D6EEE0;
+
+// Brands
+$linkedin-brand: #1877f2;
+$facebook-brand: #0077B5;
+$microsoft-font: #5e5e5e;
+$microsoft-border: #8c8c8c;
+$google-brand: #70757a;

package/src/scss/abstracts/_fonts.scss

@@ -0,0 +1,8 @@
+// Fonts family
+$font-family-primary: 'Baloo 2';
+$font-family-secondary: 'Roboto';
+$font-family-code: 'Roboto Mono';
+$font-family-icon: 'Font Awesome 6 Pro';
+
+// Font size
+$font-size: 16px;

package/src/scss/abstracts/_helpers.scss

@@ -0,0 +1,7 @@
+@forward 'variables';
+@forward 'fonts';
+@forward 'borders-radius';
+@forward 'media-queries';
+@forward 'colors';
+@forward 'mixins';
+@forward 'spinner-duration';

package/src/scss/abstracts/_media-queries.scss

@@ -0,0 +1,6 @@
+// Media Queries
+$xxl: '(min-width: 1400px)';
+$xl: '(min-width: 1200px)';
+$lg: '(min-width: 992px)';
+$md: '(min-width: 768px)';
+$sm: '(min-width: 576px)';

package/src/scss/abstracts/_mixins.scss

@@ -0,0 +1,143 @@
+@use 'fonts' as f;
+@use 'borders-radius' as br;
+
+@mixin font-family($font_family, $font_size, $font_color, $font_weight) {
+	@if $font_family == f.$font-family-primary {
+		font-family: f.$font-family-primary, sans-serif;
+	}
+
+	@if $font_family == f.$font-family-secondary {
+		font-family: f.$font-family-secondary, sans-serif;
+	}
+
+	@if $font_family == f.$font-family-code {
+		font-family: f.$font-family-code, monospace;
+	}
+
+	font: {
+		size: $font_size;
+		weight: $font_weight;
+	}
+	color: $font_color;
+}
+
+@mixin transition($properties, $duration, $easing) {
+	$value: ();
+	@each $property in $properties {
+		@if length($value) > 0 {
+			$value: append($value, unquote(',') #{$property} $duration $easing);
+		} @else {
+			$value: append($value, #{$property} $duration $easing);
+		}
+	}
+	transition: $value;
+}
+
+@mixin respond-to($media) {
+	@media #{$media} {
+		@content;
+	}
+}
+
+@mixin shadow($depth, $color, $direction) {
+	@if $depth == 1 {
+		@if $direction != x {
+			box-shadow: 0px 1px 1px rgba($color, 0.25),
+				0px 1px 3px 1px rgba($color, 0.2);
+		} @else {
+			box-shadow: 1px 0px 1px rgba($color, 0.25),
+				1px 0px 3px 1px rgba($color, 0.2);
+		}
+	}
+
+	@if $depth == 2 {
+		@if $direction != x {
+			box-shadow: 0 10px 20px rgba($color, 0.19), 0px 6px 6px rgba($color, 0.23);
+		} @else {
+			box-shadow: 10px 0px 20px rgba($color, 0.19),
+				6px 0px 6px rgba($color, 0.23);
+		}
+	}
+
+	@if $depth == 3 {
+		@if $direction != x {
+			box-shadow: 0px 14px 28px rgba($color, 0.25),
+				0px 10px 10px rgba($color, 0.22);
+		} @else {
+			box-shadow: 14px 0px 28px rgba($color, 0.25),
+				10px 0px 10px rgba($color, 0.22);
+		}
+	}
+
+	@if $depth == 4 {
+		@if $direction != x {
+			box-shadow: 0px 19px 38px rgba($color, 0.3),
+				0px 15px 12px rgba($color, 0.22);
+		} @else {
+			box-shadow: 19px 0px 38px rgba($color, 0.3),
+				15px 0px 12px rgba($color, 0.22);
+		}
+	}
+}
+
+@mixin scrollbars(
+	$size,
+	$foreground-color,
+	$background-color: mix($foreground-color, white, 50%)
+) {
+	// For Google Chrome
+	&::-webkit-scrollbar {
+		width: $size;
+		height: $size;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: $foreground-color;
+		border-radius: br.$border-radius-sm;
+		@include transition(background-color, 0.15s, ease-in-out);
+
+		&:hover {
+			background-color: mix($foreground-color, black, 75%);
+		}
+	}
+
+	&::-webkit-scrollbar-track {
+		background: $background-color;
+		padding: 10px;
+	}
+
+	// For Internet Explorer
+	& {
+		scrollbar-face-color: $foreground-color;
+		scrollbar-track-color: $background-color;
+	}
+}
+
+@mixin multipleEllipsisText($lineCount, $maxHeight, $lineHeight) {
+	max-height: $maxHeight;
+	-webkit-line-clamp: $lineCount;
+	-moz-line-clamp: $lineCount;
+	-ms-line-clamp: $lineCount;
+	line-clamp: $lineCount;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	line-height: $lineHeight;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	word-break: break-word;
+}
+
+@mixin simpleEllipsisText {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+@mixin setLabelTo($properties) {
+	transform: nth($properties, 1) nth($properties, 2) nth($properties, 3);
+	padding: nth($properties, 4) nth($properties, 5);
+}
+
+@function commonTextShadow($color) {
+	@return 2px 2px 1px $color, 2px -2px 1px $color, -2px 2px 1px $color, -2px -2px 1px $color, 2px 0px 1px $color, 0px 2px 1px $color, -2px 0px 1px $color, 0px -2px 1px $color;
+}

package/src/scss/abstracts/_spinner-duration.scss

@@ -0,0 +1 @@
+$spinner-duration: 0.75s;

package/src/scss/abstracts/_variables.scss

@@ -0,0 +1,2 @@
+// App logo
+$logo-width: 114px;

package/src/scss/animations/_alertToUp.scss

@@ -0,0 +1,10 @@
+@keyframes alertToUp {
+    0% {
+        transform: translate3d(0,-100%,0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translateZ(0);
+    }
+}

package/src/scss/animations/_aurora.scss

@@ -0,0 +1,17 @@
+@keyframes aurora {
+	0% {
+		background-position: left top;
+	}
+	25% {
+		background-position: right top;
+	}
+	50% {
+		background-position: right bottom;
+	}
+	75% {
+		background-position: left bottom;
+	}
+	100% {
+		background-position: left top;
+	}
+}

package/src/scss/animations/_colors.scss

@@ -0,0 +1,15 @@
+//Use
+@use '../abstracts/helpers' as h;
+
+@keyframes colors {
+	0%,
+	100% {
+		stroke: h.$secondary-blue-light;
+	}
+	25% {
+		stroke: h.$ga-brand-light;
+	}
+	75% {
+		stroke: h.$ga-brand-midtone;
+	}
+}

package/src/scss/animations/_dash.scss

@@ -0,0 +1,13 @@
+@keyframes dash {
+	0% {
+		stroke-dashoffset: 187;
+	}
+	50% {
+		stroke-dashoffset: 46.75;
+		transform: rotate(135deg);
+	}
+	100% {
+		stroke-dashoffset: 187;
+		transform: rotate(450deg);
+	}
+}

package/src/scss/animations/_fadeCopyFromLeft.scss

@@ -0,0 +1,10 @@
+@keyframes fadeCopyFromLeft {
+	0% {
+		opacity: 0;
+		transform: translateX(0) translateY(-50%);
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(0) translateY(20%);
+	}
+}

package/src/scss/animations/_goAndBack.scss

@@ -0,0 +1,8 @@
+@keyframes goAndBack {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translate(100%);
+	}
+}

package/src/scss/animations/_inputUp.scss

@@ -0,0 +1,10 @@
+@keyframes inputUp {
+	0% {
+		opacity: 0;
+		transform: translateY(30%);
+	}
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/scss/animations/_shake.scss

@@ -0,0 +1,22 @@
+@keyframes shakeIt {
+	10%,
+	90% {
+		transform: translate3d(-2px, 0, 0);
+	}
+
+	20%,
+	80% {
+		transform: translate3d(4px, 0, 0);
+	}
+
+	30%,
+	50%,
+	70% {
+		transform: translate3d(-6px, 0, 0);
+	}
+
+	40%,
+	60% {
+		transform: translate3d(6px, 0, 0);
+	}
+}

package/src/scss/animations/_showIn.scss

@@ -0,0 +1,8 @@
+@keyframes showIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}

package/src/scss/animations/_showMenu.scss

@@ -0,0 +1,12 @@
+// Animations
+@keyframes showMenu {
+	0% {
+		opacity: 0;
+		max-height: 0;
+	}
+
+	100% {
+		max-height: 50vh;
+		opacity: 1;
+	}
+}

package/src/scss/animations/_statusLine.scss

@@ -0,0 +1,9 @@
+@keyframes statusLine {
+	72.5% {
+	  opacity: 0;
+	}
+
+	to {
+	  stroke-dashoffset: 0;
+	}
+}

package/src/scss/animations/_toDown.scss

@@ -0,0 +1,8 @@
+@keyframes toDown {
+	0% {
+		transform: translateY(-100%);
+	}
+	100% {
+		transform: translateY(0%);
+	}
+}

package/src/scss/animations/_toastFromLeft.scss

@@ -0,0 +1,10 @@
+@keyframes toastFromLeft {
+    0% {
+        transform: translate3d(-100%, 0, 0) scale(0);
+        opacity: .5;
+    }
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 1;
+    }
+}

package/src/scss/animations/_toastFromRight.scss

@@ -0,0 +1,10 @@
+@keyframes toastFromRight {
+    0% {
+        transform: translate3d(100%, 0, 0) scale(0);
+        opacity: .5;
+    }
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 1;
+    }
+}

package/src/scss/base/_base.scss

@@ -0,0 +1,14 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+body {
+	background-color: h.$grey-light;
+	@include h.scrollbars(0.5rem, transparent, transparent);
+
+	&.modal-open {
+		overflow: auto !important;
+		&[style] {
+			padding-right: 0px !important;
+		}
+	}
+}