platformscode-new-react 0.0.4 → 0.0.5

package/src/assets/styles/base/_base.scss

@@ -1,29 +0,0 @@
-*,
-*::after,
-*::before {
-  margin: 0;
-  padding: 0;
-  box-sizing: inherit;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  // This defines what 1rem is
-  font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
-
-  @include responsive(tab-port) {
-    // width < 900?
-    font-size: 75%;
-  }
-}
-
-body {
-  box-sizing: border-box;
-  // direction: rtl;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-}

package/src/assets/styles/base/_typography.scss

@@ -1,73 +0,0 @@
-@font-face {
-  font-family: 'IBMPlexSansArabic';
-  src:
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff2') format('woff2'),
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'IBMPlexSansArabic';
-  src:
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff2') format('woff2'),
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff') format('woff');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'IBMPlexSansArabic';
-  src:
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2'),
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff') format('woff');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'IBMPlexSansArabic';
-  src:
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff2') format('woff2'),
-    url('/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff') format('woff');
-  font-weight: 700;
-  font-style: normal;
-  font-display: auto;
-}
-
-$main-font: 'IBMPlexSansArabic';
-
-body {
-  font-family: $main-font;
-}
-
-a,
-a:active,
-a:focus {
-  color: inherit;
-  text-decoration: none;
-}
-
-// headings h1, h2, h3, h4
-
-//----------------------
-//--- typo utilities ---
-//----------------------
-
-$typo-verients: ('regular' 400, 'medium' 500, 'semibold' 600, 'bold' 700);
-$typo-desplays: ('2xl' 72px 90px, 'xl' 60px 72px, 'lg' 48px 60px, 'md' 36px 44px, 'sm' 30px 38px, 'xs' 24px 32px);
-$typo-text: ('xl' 20px 30px, 'lg' 18px 28px, 'md' 16px 24px, 'sm' 14px 20px, 'xs' 12px 18px, '2xs' 10px 14px);
-
-@each $verient, $value in $typo-verients {
-  @each $display, $size, $ln-height in $typo-desplays {
-    .display-#{$display}-#{$verient} {
-      font: $value #{$size}/#{$ln-height} $main-font;
-    }
-  }
-
-  @each $display, $size, $ln-height in $typo-text {
-    .text-#{$display}-#{$verient} {
-      font: $value #{$size}/#{$ln-height} $main-font;
-    }
-  }
-}

package/src/assets/styles/base/_utilities.scss

@@ -1,260 +0,0 @@
-// spacings
-$spacings: (
-  0,
-  2,
-  4,
-  8,
-  12,
-  16,
-  24,
-  32,
-  40,
-  48,
-  56,
-  64,
-  72,
-  80,
-  88,
-  96,
-  104,
-  112,
-  120
-);
-
-@each $value in $spacings {
-  .spacing-hor-#{$value} {
-    height: #{$value}px;
-  }
-
-  .spacing-vert-#{$value} {
-    width: #{$value}px;
-  }
-
-  .p-#{$value} {
-    padding: #{$value}px;
-  }
-
-  .px-#{$value} {
-    padding-inline: #{$value}px;
-  }
-
-  .py-#{$value} {
-    padding-block: #{$value}px;
-  }
-
-  .pl-#{$value} {
-    padding-left: #{$value}px;
-  }
-
-  .pr-#{$value} {
-    padding-right: #{$value}px;
-  }
-
-  .pt-#{$value} {
-    padding-top: #{$value}px;
-  }
-
-  .pb-#{$value} {
-    padding-bottom: #{$value}px;
-  }
-
-  .mx-#{$value} {
-    margin-inline: #{$value}px;
-  }
-
-  .my-#{$value} {
-    margin-block: #{$value}px;
-  }
-
-  .ml-#{$value} {
-    margin-left: #{$value}px;
-  }
-
-  .mr-#{$value} {
-    margin-right: #{$value}px;
-  }
-
-  .mt-#{$value} {
-    margin-top: #{$value}px;
-  }
-
-  .mb-#{$value} {
-    margin-bottom: #{$value}px;
-  }
-}
-
-$radiuses: (
-  small: 2,
-  medium: 4,
-  large: 8,
-  xlarge: 12,
-);
-
-@each $varient, $value in $radiuses {
-  // radius small
-  .radius-#{$varient} {
-    border-radius: #{$value}px;
-  }
-
-  .radius-#{$varient}-t {
-    border-radius: #{$value}px #{$value}px 0 0;
-  }
-
-  .radius-#{$varient}-tl {
-    border-radius: #{$value}px 0px 0 0;
-  }
-
-  .radius-#{$varient}-tr {
-    border-radius: 0px #{$value}px 0 0;
-  }
-
-  .radius-#{$varient}-b {
-    border-radius: 0 0 #{$value}px #{$value}px;
-  }
-
-  .radius-#{$varient}-bl {
-    border-radius: 0 0 #{$value}px 0px;
-  }
-
-  .radius-#{$varient}-br {
-    border-radius: 0 0 0px #{$value}px;
-  }
-}
-
-.radius-none {
-  border-radius: 0px;
-}
-
-.radius-circular {
-  border-radius: 100%;
-}
-
-// flexs
-.flex {
-  display: flex;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-center-y {
-  display: flex;
-  align-items: center;
-}
-
-.flex-center-x {
-  display: flex;
-  justify-content: center;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-align-stretch {
-  align-items: stretch;
-}
-
-.flex-align-start {
-  align-items: flex-start;
-}
-
-.flex-align-end {
-  align-items: flex-end;
-}
-
-.flex-justify-end {
-  justify-content: flex-end;
-}
-
-.flex-justify-start {
-  justify-content: flex-start;
-}
-
-//text align
-$aligns: (right, left, center);
-
-@each $align in $aligns {
-  .text-#{$align} {
-    text-align: $align;
-  }
-}
-
-// shadows utilities
-.shadow-xs {
-  box-shadow: var(--shadow-xs);
-}
-
-.shadow-sm {
-  box-shadow: var(--shadow-sm);
-}
-
-.shadow-md {
-  box-shadow: var(--shadow-md);
-}
-
-.shadow-lg {
-  box-shadow: var(--shadow-lg);
-}
-
-.shadow-xl {
-  box-shadow: var(--shadow-xl);
-}
-
-.shadow-2xl {
-  box-shadow: var(--shadow-2xl);
-}
-
-.shadow-3xl {
-  box-shadow: var(--shadow-3xl);
-}
-
-// colors utilities
-
-// other utis
-.ver-divider {
-  width: 1px;
-  height: 48px;
-  background: hsla(var(--colors-alpha-black) / 20%);
-  margin-inline: var(--spacing-xl);
-}
-
-// responsive utils
-@include responsive(phone) {
-  .xs-hide {
-    display: none;
-  }
-}
-
-$position: (start, end, center, between, around);
-@each $position in $position {
-  .flex-justify-#{$position} {
-    justify-content: $position;
-  }
-}
-
-$align: (start, end, center, stretch);
-@each $align in $align {
-  .flex-align-#{$align} {
-    align-items: $align;
-  }
-}
-
-@mixin add-dynamic-class($key, $value) {
-  .#{$key}-#{$value} {
-    content: "#{$key}: #{$value}";
-  }
-}

package/src/assets/styles/components/_accordions.scss

@@ -1,184 +0,0 @@
-.accordion {
-  // background-color: #ccc;
-
-  &-list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    display: inline-block;
-    width: 100%;
-
-    &__item {
-      &:last-child {
-        border-bottom: 1px solid var(--border-neutral-primary);
-      }
-    }
-  }
-}
-
-.accordion {
-  &-item {
-    border-top: 1px solid var(--border-neutral-primary);
-    width: 100%; //to be edited
-    min-width: 366px;
-    z-index: 1;
-    position: relative;
-
-    &__header {
-      display: flex;
-      padding: var(--spacing-xl);
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--spacing-xl);
-      cursor: pointer;
-      border: 2px solid transparent;
-      // transition: background .2s ease-in-out;
-
-      &:hover {
-        background: var(--button-background-neutral-hovered);
-        mix-blend-mode: multiply;
-      }
-    }
-
-    &__title {
-      color: var(--text-default);
-      width: 100%;
-      @extend .text-md-semibold;
-    }
-
-    &__arrow {
-      transition: transform 0.3s ease-in-out;
-      &,
-      & > dga-icon {
-        width: 16px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    &__body {
-      display: flex;
-      align-items: flex-start;
-      padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);
-      gap: var(--spacing-md);
-      color: var(--text-primary-paragraph);
-      @extend .text-md-regular;
-      max-height: 0;
-      overflow: hidden;
-      // will-change: max-height;
-      opacity: 0;
-      transition: all 0.3s ease-in-out;
-    }
-
-    &.active &__body {
-      padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);
-      opacity: 1;
-    }
-
-    &.active &__arrow {
-      transform: rotate(180deg);
-    }
-
-    &.focused &__header,
-    &__header:focus {
-      background-color: transparent;
-      border: 2px solid var(--border-black);
-      outline: none;
-      position: relative;
-      z-index: 1;
-    }
-
-    &__header:active {
-      background-color: var(--button-background-neutral-pressed);
-      outline: none;
-    }
-
-    &.disabled &__header:active,
-    &.disabled &__header:focus,
-    &.disabled &__header:hover {
-      background-color: transparent;
-      outline: none;
-      border: 2px solid transparent;
-    }
-
-    &.disabled &__title,
-    &.disabled &__arrow,
-    &.disabled &__arrow path,
-    //to be edited when add icons
-    &.disabled &__body {
-      color: var(--text-default-disabled) !important;
-      stroke: var(--text-default-disabled) !important; //to be edited when add icons
-    }
-
-    &--lg {
-      .accordion-item__header {
-        padding: var(--spacing-xl);
-      }
-
-      .accordion__body {
-      }
-    }
-
-    &--md {
-      .accordion-item__header {
-        padding: var(--spacing-lg) var(--spacing-xl);
-      }
-
-      .accordion__body {
-      }
-    }
-
-    &--sm {
-      .accordion-item__header {
-        padding: var(--spacing-md) var(--spacing-xl);
-      }
-
-      .accordion__body {
-      }
-    }
-
-    &--flush {
-      width: 100%;
-      position: relative;
-      border-top: 0;
-      /* Create the "cut" border effect */
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%);
-      }
-    }
-
-    &--icon-leading {
-      .accordion-item__body {
-        padding: 0 var(--spacing-none) 0 var(--spacing-6xl);
-      }
-
-      &.active .accordion-item__body {
-        padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl);
-      }
-    }
-  }
-}
-
-:is(html[lang='ar'], html[dir='rtl']) .accordion-item .accordion-item__body {
-  padding: 0 var(--spacing-xl) 0 var(--spacing-6xl);
-}
-
-:is(html[lang='ar'], html[dir='rtl']) .accordion-item--icon-leading .accordion-item__body {
-  padding: 0 var(--spacing-6xl) 0 var(--spacing-none);
-}
-
-:is(html[lang='ar'], html[dir='rtl']) .accordion-item.active .accordion-item__body {
-  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl);
-}
-
-:is(html[lang='ar'], html[dir='rtl']) .accordion-item--icon-leading.active .accordion-item__body {
-  padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none);
-}

package/src/assets/styles/components/_avatar.scss

@@ -1,87 +0,0 @@
-$avatar_sizes: (
-  120: (
-    'display-md-regular',
-    80,
-  ),
-  80: (
-    'display-sm-regular',
-    56,
-  ),
-  68: (
-    'text-xl-medium',
-    40,
-  ),
-  48: (
-    'text-md-medium',
-    32,
-  ),
-  40: (
-    'text-sm-semibold',
-    32,
-  ),
-  32: (
-    'text-xs-semibold',
-    24,
-  ),
-  24: (
-    'text-2xs-bold',
-    16,
-  ),
-);
-
-.avatar {
-  border-radius: var(--radius-full);
-  border: 2px solid var(--border-white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--button-background-neutral-default);
-  overflow: hidden;
-
-  &--initials {
-    // border: 4px solid var(--colors-border-white, #FFF);
-  }
-
-  &--image {
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-  &--icon {
-  }
-  &--square {
-    border-radius: var(--radius-8);
-  }
-
-  @each $size, $properties in $avatar_sizes {
-    $text: nth($properties, 1);
-    $icon_size: nth($properties, 2);
-
-    &--#{$size} {
-      width: #{$size}px;
-      height: #{$size}px;
-
-      @if ($size == 120) {
-        border-width: 4px;
-      }
-
-      & .avatar__text {
-        @extend .#{$text};
-        text-transform: uppercase;
-      }
-      & .avatar__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: #{$icon_size}px;
-        height: #{$icon_size}px;
-        & > * {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-}

package/src/assets/styles/components/_breadcrumbs.scss

@@ -1,63 +0,0 @@
-@media only screen and (max-width: 768px) {
-  .breadcrumb {
-    justify-content: center;
-  }
-}
-
-.breadcrumb {
-  display: flex;
-  align-items: center;
-
-  &-item {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--size-4, 4px);
-    color: var(--link-neutral);
-    cursor: pointer;
-    padding-right: var(--size-4, 4px);
-
-    &.active {
-      color: var(--text-default-disabled);
-    }
-
-    &:first-child {
-    }
-
-    &:not(:first-child) {
-      display: flex;
-      align-items: center;
-      // gap: 8px;
-    }
-    & .disabled-link {
-      cursor: not-allowed;
-      &:hover {
-        text-decoration: none;
-        & .link__label {
-          text-decoration: none;
-        }
-      }
-    }
-
-    &.ellipsis .link {
-      align-items: flex-end;
-    }
-  }
-
-  &-icon {
-    color: var(--text-default-disabled);
-    width: 16px;
-    height: 16px;
-    font-size: 20px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-:is(html[lang="ar"], html[dir="rtl"]) .breadcrumb-item:first-child {
-  padding-right: 0;
-  padding-left: 4px;
-}
-
-:is(html[lang="ar"], html[dir="rtl"]) .breadcrumb-icon {
-  transform: rotate(180deg);
-}