dgrcorrientes-modulos 1.0.0

package/src/sass/utilities/_derived-variables.scss

@@ -0,0 +1,68 @@
+@import '/src/sass/utilities/variables';
+
+$custom_colors: (
+  // ====================== COLORS / PRINCIPAL ======================
+  // PRIMARY
+  'primary-100': $primary-100,
+  'primary-200': $primary-200,
+  'primary-400': $primary-400,
+  'primary-600': $primary-600,
+  // SECONDARY
+  'secondary-600': $secondary-600,
+  'secondary-700': $secondary-700,
+  'secondary-800': $secondary-800,
+  // TERTIARY
+  'tertiary-600': $tertiary-600,
+  'tertiary-700': $tertiary-700,
+  'tertiary-800': $tertiary-800,
+  // ====================== COLORS / STATES ======================
+  // INFO
+  'info-200': $info-200,
+  'info-700': $info-700,
+  // SUCCESS
+  'success-200': $success-200,
+  'success-500': $success-500,
+  'success-600': $success-600,
+  'success-700': $success-700,
+  // ERROR
+  'error-200': $error-200,
+  'error-600': $error-600,
+  'error-700': $error-700,
+  // DANGER
+  'danger-200': $danger-200,
+  'danger-600': $danger-600,
+  'danger-700': $danger-700,
+  // WARNING
+  'warning-200': $warning-200,
+  'warning-600': $warning-600,
+  'warning-700': $warning-700,
+  // ====================== COLORS / SINGLE TONE ======================
+  'white': $white,
+  'black': $black,
+  'darkText': $darkText,
+  'blueGray-100': $blueGray-100,
+  'blueGray-500': $blueGray-500,
+  'darkBlue-500': $darkBlue-500,
+  // ====================== COLORS / TEXT&MUTED ======================
+  'truegray-50': $truegray-50,
+  'truegray-100': $truegray-100,
+  'truegray-200': $truegray-200,
+  'truegray-300': $truegray-300,
+  'truegray-400': $truegray-400,
+  'truegray-500': $truegray-500,
+  'truegray-600': $truegray-600,
+  'truegray-700': $truegray-700,
+  'truegray-800': $truegray-800,
+  'truegray-900': $truegray-900
+);
+
+@each $name, $pair in $custom_colors {
+  $color: nth($pair, 1);
+  .has-tc-#{$name} {
+    color: $color !important;
+    fill: $color !important;
+  }
+  .has-bc-#{$name} {
+    background-color: $color !important;
+  }
+}

package/src/sass/utilities/_helpers.scss

@@ -0,0 +1,70 @@
+// FONT =============================================
+.has-text-weight-extrabold {
+  font-weight: 900;
+}
+
+.has-line-height-150 {
+  line-height: 150%;
+}
+
+.has-border-bottom-grey-lighter {
+  border-bottom: 1px solid $grey-lighter;
+}
+
+.is-size-18px {
+  font-size: 18px !important;
+}
+
+.is-size-14px {
+  font-size: 14px !important;
+}
+
+.is-size-10px {
+  font-size: 10px !important;
+}
+
+// DIV =============================================
+.is-border-box {
+  box-sizing: border-box !important;
+}
+
+.is-absolute {
+  position: absolute !important;
+}
+
+.is-fullw {
+  width: 100%;
+}
+
+.is-fullh {
+  height: 100%;
+}
+
+.has-minw-maxcontent {
+  min-width: max-content;
+}
+
+// FLEX =============================================
+.is-gap-6 {
+  gap: 48px !important;
+}
+
+.is-gap-5 {
+  gap: 24px !important;
+}
+
+.is-gap-4 {
+  gap: 16px !important;
+}
+
+.is-gap-3 {
+  gap: 12px !important;
+}
+
+.is-gap-2 {
+  gap: 8px !important;
+}
+
+.is-gap-1 {
+  gap: 4px !important;
+}

package/src/sass/utilities/_variables.scss

@@ -0,0 +1,147 @@
+// ====================== FONT-VARIABLES ======================
+$fw-regular: 400;
+$fw-medium: 500;
+$fw-semibold: 600;
+$fw-bold: 700;
+$fw-heavy: 800;
+
+// ====================== COLORS / PRINCIPAL ======================
+// PRIMARY
+$primary-100: #b9d4ff;
+$primary-200: #7dafff;
+$primary-400: #2b71df;
+$primary-600: #124596;
+// SECONDARY
+$secondary-600: #db2777;
+$secondary-700: #be185d;
+$secondary-800: #9d174d;
+// TERTIARY
+$tertiary-600: #059669;
+$tertiary-700: #047857;
+$tertiary-800: #065f46;
+
+// ====================== COLORS / STATES ======================
+// INFO
+$info-200: #bae6fd;
+$info-700: #0369a1;
+
+// SUCCESS
+$success-200: #bbf7d0;
+$success-500: #22c55e;
+$success-600: #16a34a;
+$success-700: #15803d;
+
+// ERROR
+$error-200: #fecaca;
+$error-600: #dc2626;
+$error-700: #b91c1c;
+
+// DANGER
+$danger-200: #fecdd3;
+$danger-600: #e11d48;
+$danger-700: #be123c;
+
+// WARNING
+$warning-200: #fed7aa;
+$warning-600: #ea580c;
+$warning-700: #c2410c;
+
+// ====================== COLORS / SINGLE TONE ======================
+$white: #fff;
+$black: #000;
+$darkText: #27272a;
+
+$blueGray-100: #f1f5f9;
+$blueGray-500: #64748b;
+
+$darkBlue-500: #0077e6;
+// ====================== COLORS / TEXT&MUTED ======================
+$truegray-50: #fafafa;
+$truegray-100: #f5f5f5;
+$truegray-200: #e5e5e5;
+$truegray-300: #d4d4d4;
+$truegray-400: #a3a3a3;
+$truegray-500: #737373;
+$truegray-600: #525252;
+$truegray-700: #404040;
+$truegray-800: #262626;
+$truegray-900: #171717;
+
+$text-50: $truegray-50;
+$text-100: $truegray-100;
+$text-200: $truegray-200;
+$text-300: $truegray-300;
+$text-400: $truegray-400;
+$text-500: $truegray-500;
+$text-600: $truegray-600;
+$text-700: $truegray-700;
+$text-800: $truegray-900;
+$text-900: $truegray-900;
+
+$muted-50: $truegray-50;
+$muted-100: $truegray-100;
+$muted-200: $truegray-200;
+$muted-300: $truegray-300;
+$muted-400: $truegray-400;
+$muted-500: $truegray-500;
+$muted-600: $truegray-600;
+$muted-700: $truegray-700;
+$muted-800: $truegray-800;
+$muted-900: $truegray-900;
+
+// ============================== FONTS ==============================
+$shadow: 0px 8px 16px -2px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.02);
+
+// ============================== COLORS ==============================
+// PRIMARY ==========================
+$primary: #124596;
+$primary-light: #b9d4ff;
+$primary-hover: #214e96;
+$primary-active: #0c3b87;
+$primary-dark: #042e70;
+
+// LINK =============================
+$link: #3273dc;
+$link-light: #eef3fc;
+$link-hover: #326fd2;
+$link-active: #3069c5;
+$link-dark: #234e95;
+
+// INFO =============================
+$info: #209cee;
+$info-light: #ecf7fe;
+$info-hover: #1f96e4;
+$info-active: #1e8cd4;
+$info-dark: #044977;
+
+// INFO =============================
+$success: #68da90;
+$success-light: #eefcf3;
+$success-hover: #5fd086;
+$success-active: #55c37b;
+$success-dark: #208a45;
+
+// WARNING =============================
+$warning: #ffe681;
+$warning-light: #fffbeb;
+$warning-hover: #ffe167;
+$warning-active: #ffd943;
+$warning-dark: #be9d19;
+
+// DANGER =============================
+$danger: #ff7a95;
+$danger-light: #ffebef;
+$danger-hover: #ff5e7e;
+$danger-active: #ff4168;
+$danger-dark: #b12945;
+
+// ================= DEVICES =================
+$mobile: 600px;
+$desktop: 1200px;
+$desktopFullHd: 1920px;
+
+$breakpoint_header1: 1500px;
+$breakpoint_header1_5: 1380px;
+$breakpoint_header2: 1217px;
+$breakpoint_header3_burger: 1045px;
+$breakpoint_header4_logo: 654px;

package/src/stories/Changelog.stories.tsx

@@ -0,0 +1,73 @@
+import {Meta} from '@storybook/react';
+import Thumbnail from './assets/thumbnail-black[2].jpg';
+import {versions} from './changelog';
+import {generateRandomKey} from '../utils/functions';
+
+export const Changelog = () => {
+  return (
+    <div className="elv-component">
+      <section
+        className="hero is-black is-fullheight-with-navbar"
+        style={{background: `url("${Thumbnail}") center center / cover no-repeat`}}
+      >
+        <div className="hero-body is-flex is-align-items-flex-start">
+          <div className="container is-fluid">
+            <div className="column is-4">
+              <p className="subtitle is-3 mb-2 has-text-white" style={{whiteSpace: 'nowrap'}}>
+                @elevation/react
+              </p>
+              <p className="title is-1 has-text-white" style={{whiteSpace: 'nowrap'}}>
+                Changelog
+              </p>
+            </div>
+            {versions.map(ver => (
+              <div className="column is-6 mt-6" key={generateRandomKey()}>
+                <p className="title is-4 has-text-white mb-3">
+                  ====== {ver.version} - ({ver.date})
+                </p>
+                {ver.new && (
+                  <div>
+                    <p className="subtitle is-6 has-text-white mt-4 mb-1 has-text-weight-semibold">Nuevo:</p>
+                    {ver.new.map(item => (
+                      <div className="mb-3" key={generateRandomKey()}>
+                        <p className="subtitle is-6 has-text-white mb-1">- {item.component}</p>
+                        {item.changes.map(change => (
+                          <p key={generateRandomKey()} className="subtitle is-size-7 mb-1">
+                            {change}
+                          </p>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {ver.fixes && (
+                  <div>
+                    <p className="subtitle is-6 has-text-white mt-4 mb-1 has-text-weight-semibold">Ajustes:</p>
+                    {ver.fixes.map(item => (
+                      <div className="mb-3">
+                        <p className="subtitle is-6 has-text-white mb-1">- {item.component && item.component}</p>
+                        {item.changes.map(change => (
+                          <p key={generateRandomKey()} className="subtitle is-size-7 mb-1">
+                            {change}
+                          </p>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+export default {
+  title: 'Elevation/Changelog',
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+} as Meta;

package/src/stories/Components/AssistanceDiary/AssistanceDiary.scss

@@ -0,0 +1,19 @@
+@import '/src/sass/utilities/variables';
+
+.elv-assistancediary{
+    .assistancediary{
+        &__date{
+            min-width: 73px;
+            color: $truegray-600;
+        }
+
+        &__widthstate{
+            min-width: 75px;
+        }
+
+        &__status{
+            border-radius: 11px;
+            color: $warning-light;
+        }
+    }
+}

package/src/stories/Components/AssistanceDiary/AssistanceDiary.stories.tsx

@@ -0,0 +1,25 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {AssistanceDiary} from './AssistanceDiary';
+
+export default {
+  title: 'Components/AssistanceDiary',
+  component: AssistanceDiary,
+  args: {
+    title: 'Asistencia',
+    option: [
+      {detail: 'Se conectó tarde', date: '04/03/2023', state: 'Tardanza', stateBackground: '#F97316'},
+      {detail: 'No hay detalle', date: '04/03/2023', state: 'En horario', stateBackground: '#047857'},
+      {detail: 'El usuario pidió el día', date: '04/03/2023', state: 'Día libre', stateBackground: '#124596'},
+      {detail: 'No hay motivo que indique la falta', date: '04/03/2023', state: 'Ausente', stateBackground: '#DC2626'},
+      {detail: 'No hay motivo que indique la falta', date: '04/03/2023', state: 'Ausente', stateBackground: '#DC2626'},
+    ],
+    onSeeAll: () => {
+      console.log('clicked Button');
+    },
+  },
+} as ComponentMeta<typeof AssistanceDiary>;
+
+const Template: ComponentStory<typeof AssistanceDiary> = args => <AssistanceDiary {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Components/AssistanceDiary/AssistanceDiary.tsx

@@ -0,0 +1,57 @@
+import {title} from 'process';
+import './AssistanceDiary.scss';
+import {Button} from '../../Elements/Button/Button';
+
+export interface IAssistanceDiary {
+  // BASE
+  title?: string;
+  option?: IOption[];
+  // IS-OPTIONS
+
+  // EVENTS
+  onSeeAll?: () => void;
+
+  // GENERIC
+  className?: string;
+}
+export interface IOption {
+  detail?: string;
+  date?: string;
+  state?: string;
+  stateBackground?: string;
+}
+
+export const AssistanceDiary = ({title, option, onSeeAll, className}: IAssistanceDiary) => {
+  return (
+    <div className="elv-component elv-assistancediary">
+      <div
+        className={['assistancediary is-flex is-flex-direction-column p-5 is-gap-5 box', `${className ? ' ' + className : ''}`].join('')}
+      >
+        <div className="is-size-4 has-text-weight-bold has-text-grey-dark">{title}</div>
+        <div className="is-flex is-flex-direction-column is-gap-4">
+          {option?.map(item => (
+            <div className="is-flex is-size-7 is-justify-content-space-between py-2 is-align-items-center is-gap-2">
+              <div className="has-text-grey-dark has-text-weight-medium">{item.detail}</div>
+              <div className="assistancediary__date has-text-weight-medium">{item.date}</div>
+              <div className="assistancediary__widthstate p-1">
+                <div className="assistancediary__status has-text-centered" style={{backgroundColor: item.stateBackground}}>
+                  {item.state}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div>
+          <Button
+            label="Ver todo"
+            fill="unstyled"
+            icon="fa-solid fa-arrow-right"
+            trailingIcon={true}
+            className="is-size-7 has-text-weight-medium has-text-grey px-4 py-3"
+            onClick={() => onSeeAll && onSeeAll()}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Components/AverageAttended/AverageAttended.scss

@@ -0,0 +1,39 @@
+@import '/src/sass/utilities/variables';
+
+.elv-averageAttended{
+    .averageAttended{
+        flex-wrap: wrap;
+        padding: 20px;
+        border-radius: 16px;
+
+        @media (max-width: 640px){
+            padding: 10px;
+            gap: 24px !important;
+        }
+
+        &__option{
+            width: calc(33.33% - 16px);
+            gap: 30px;
+            @media (max-width: 920px){
+                width: calc(50% - 16px);
+            }
+            @media (max-width: 640px){
+                width: 100%;
+                
+            }
+        }
+
+        &__colorDark{
+            color: $darkText;
+        }
+
+        .badge{
+            
+            padding: 4px 8px;
+            @media (max-width: 950px){
+                max-width: 20px !important;
+                padding: 4px 4px;
+            }
+        }
+    }
+}

package/src/stories/Components/AverageAttended/AverageAttended.stories.tsx

@@ -0,0 +1,71 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {AverageAttended} from './AverageAttended';
+
+export default {
+  title: 'Components/AverageAttended',
+  component: AverageAttended,
+  args: {
+    Call: [
+      //{id: 2, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 15, 18, 0), serviceStartTime: new Date(2023, 11, 18, 14, 0)},
+      //{id: 3, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 15, 18, 0), serviceStartTime: new Date(2023, 11, 18, 14, 0)},
+      //{id: 4, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 18, 0), serviceStartTime: new Date(2023, 11, 18, 14, 0)},
+      {id: 1, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 30), serviceStartTime: new Date(2023, 11, 18, 12, 30)},
+      {id: 2, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 0), serviceStartTime: new Date(2023, 11, 18, 12, 0)},
+      {id: 3, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 0), serviceStartTime: new Date(2023, 11, 18, 12, 0)},
+      {id: 4, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 12, 30), serviceStartTime: new Date(2023, 11, 18, 12, 30)},
+      {id: 5, date: new Date(2023, 11, 18), arrivalTime: new Date(2023, 11, 18, 13, 0), serviceStartTime: new Date(2023, 11, 18, 13, 30)},
+      {id: 6, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
+      {id: 7, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
+      {id: 8, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
+      {id: 9, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
+      {id: 10, date: new Date(2023, 11, 29), arrivalTime: new Date(2023, 11, 29, 13, 0), serviceStartTime: new Date(2023, 11, 29, 13, 0)},
+    ],
+    option: [
+      {
+        status: 'Atendidos',
+        icon: 'fa-solid fa-users',
+        iconColor: '#124596',
+        amountCall: 0,
+        labelButtom: '▾',
+        labelTop: '▴+',
+        color: '#D4D4D4',
+        colorText: '#DC2626',
+        colorTextPositive: '#16A34A',
+        description: 'esta semana',
+      },
+    ],
+    option2: [
+      {
+        status: 'Promedio de espera',
+        icon: 'fa-regular fa-clock',
+        iconColor: '#124596',
+        amountCall: 'min',
+        labelTop: '▴+',
+        labelButtom: '▾',
+        color: '#D4D4D4',
+        colorText: '#DC2626',
+        colorTextPositive: '#16A34A',
+        description: 'esta semana',
+      },
+    ],
+    option3: [
+      {
+        status: 'Promedio de atención',
+        icon: 'fa-solid fa-stopwatch',
+        iconColor: '#124596',
+        amountCall: 'min',
+        labelTop: '▴+',
+        labelButtom: '▾',
+        color: '#D4D4D4',
+        colorText: '#DC2626',
+        description: 'esta semana',
+        colorTextPositive: '#16A34A',
+      },
+    ],
+  },
+} as ComponentMeta<typeof AverageAttended>;
+
+const Template: ComponentStory<typeof AverageAttended> = args => <AverageAttended {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};