@3dsource/source-ui-native 0.0.1 → 1.0.0

package/eslint.config.js

@@ -1,37 +0,0 @@
-// @ts-check
-const tseslint = require('typescript-eslint');
-const rootConfig = require('../../../eslint.config.js');
-
-module.exports = tseslint.config(
-  ...rootConfig,
-  {
-    files: ['**/*.ts'],
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-      },
-    },
-    rules: {
-      '@angular-eslint/directive-selector': [
-        'error',
-        {
-          type: 'attribute',
-          prefix: 'lib',
-          style: 'camelCase',
-        },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'lib',
-          style: 'kebab-case',
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.html'],
-    rules: {},
-  },
-);

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/3dsource/source-ui-native",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/components/source-badge/components/source-badge.component.html

@@ -1,20 +0,0 @@
-<div
-  class="src-badge"
-  [ngClass]="classes"
-  [ngStyle]="
-    type
-      ? {}
-      : {
-          '--srcBadgeBorderColor': borderColor,
-          '--srcBadgeBackgroundColor': backgroundColor,
-          '--srcBadgeBorderWidth': borderWidth,
-          '--srcBadgeTextColor': textColor,
-        }
-  "
-  [attr.data-testid]="testID"
->
-  @if (number) {
-    {{ number }}
-  }
-  <ng-content></ng-content>
-</div>

package/src/lib/components/source-badge/components/source-badge.component.scss

@@ -1,76 +0,0 @@
-// source-badge.component.scss
-.src-badge {
-  --srcBadgeHeight: 18px;
-  --srcBadgeBorderWidth: 2px;
-  --srcBadgePadding: 2px 4px;
-  --srcBadgeBackgroundColor: var(--src-color-brand-500, darkgreen);
-  --srcBadgeBorderColor: var(--src-color-bg-default, #fff);
-  --srcBadgeTextColor: var(--src-color-text-inverse, #fff);
-  display: inline-block;
-  width: auto;
-  min-width: var(--srcBadgeHeight);
-  height: var(--srcBadgeHeight);
-  padding: var(--srcBadgePadding);
-  vertical-align: top;
-  text-align: center;
-  border-radius: 99px;
-  border: var(--srcBadgeBorderWidth) solid var(--srcBadgeBorderColor, #fff);
-  background: var(--srcBadgeBackgroundColor);
-  color: var(--srcBadgeTextColor);
-  font-size: 9px;
-  font-weight: 700;
-  line-height: 1;
-
-  &--small {
-    --srcBadgeHeight: 16px;
-    font-size: 8px;
-  }
-
-  &--large {
-    --srcBadgeHeight: 20px;
-    font-size: 10px;
-  }
-
-  &--neutral,
-  &--informational,
-  &--success,
-  &--warning,
-  &--attention,
-  &--critical {
-    --srcBadgeHeight: 20px;
-    --srcBadgeBorderWidth: 0px;
-    --srcBadgePadding: 2px 8px;
-    --srcBadgeBackgroundColor: var(--src-color-bg-strong);
-    --srcBadgeTextColor: var(--src-color-text-default, #1f2937);
-    text-align: center;
-    font-family: var(--src-font-family-sans);
-    font-size: var(--src-fs-small);
-    font-style: normal;
-    font-weight: var(--src-fw-medium, 500);
-    line-height: var(--src-lh-small);
-  }
-
-  &--neutral {
-    --srcBadgeBackgroundColor: var(--src-color-bg-strong);
-  }
-
-  &--informational {
-    --srcBadgeBackgroundColor: #a4e8f2;
-  }
-
-  &--success {
-    --srcBadgeBackgroundColor: #aee9d1;
-  }
-
-  &--warning {
-    --srcBadgeBackgroundColor: #ffd79d;
-  }
-
-  &--attention {
-    --srcBadgeBackgroundColor: #ffea8a;
-  }
-
-  &--critical {
-    --srcBadgeBackgroundColor: #ffb7b7;
-  }
-}

package/src/lib/components/source-badge/components/source-badge.component.ts

@@ -1,62 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  input,
-  OnInit,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  SourceBadgeSize,
-  SourceBadgeSizeValues,
-  SourceBadgeType,
-} from '../constants';
-import { NgClass, NgStyle } from '@angular/common';
-
-@Component({
-  selector: 'src-badge',
-  templateUrl: './source-badge.component.html',
-  styleUrls: ['./source-badge.component.scss'],
-  imports: [NgStyle, NgClass],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceBadgeComponent implements OnInit {
-  @Input() number = 0;
-  @Input() backgroundColor? = 'var(--src-color-icon-critical, #B91C1C)';
-  @Input() type: SourceBadgeType | string | null = null;
-  @Input() size?: SourceBadgeSizeValues | string = SourceBadgeSize.DEFAULT;
-  /**
-   * Custom class to be added to the badge.
-   */
-  @Input() customClass?: string | string[];
-  /**
-   * 2 px border around the badge to increase visibility.
-   */
-  @Input() borderColor? = 'var(--src-color-bg-default, #FFFFFF)';
-  /**
-   * It's not recommended to change the border width. If you're changing the width of the border, you should also change the size of the badge manually through scss.
-   * */
-  @Input() borderWidth? = '2px';
-  @Input() textColor? = 'var(--src-color-text-inverse, #FFFFFF)';
-  testID = input('', { alias: 'data-testid' });
-
-  classes: string[] = [];
-
-  ngOnInit() {
-    this.classes = [
-      this.type ? `src-badge--${this.type}` : '',
-      this.size && !this.type ? `src-badge--${this.size}` : '',
-    ];
-
-    if (this.customClass) {
-      if (Array.isArray(this.customClass)) {
-        this.classes.forEach((customClass) => {
-          this.classes.push(customClass);
-        });
-      } else {
-        this.classes.push(this.customClass);
-      }
-    }
-  }
-}

package/src/lib/components/source-badge/constants/sourceBadgeSize.ts

@@ -1,8 +0,0 @@
-export const SourceBadgeSize = {
-  SMALL: 'small',
-  DEFAULT: 'default',
-  LARGE: 'large',
-} as const;
-
-export type SourceBadgeSizeValues =
-  (typeof SourceBadgeSize)[keyof typeof SourceBadgeSize];

package/src/lib/components/source-badge/constants/sourceBadgeType.ts

@@ -1,11 +0,0 @@
-export const SourceBadgeType = {
-  NEUTRAL: 'neutral',
-  INFORMATIONAL: 'informational',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  ATTENTION: 'attention',
-  CRITICAL: 'critical',
-} as const;
-
-export type SourceBadgeType =
-  (typeof SourceBadgeType)[keyof typeof SourceBadgeType];

package/src/lib/components/source-banner/components/source-banner.component.html

@@ -1,10 +0,0 @@
-<div
-  class="src-banner"
-  [class.src-banner--compact]="isCompact()"
-  [ngClass]="type() !== 'default' ? 'src-banner--' + type() : ''"
-  [attr.data-testid]="testID"
->
-  <ng-content select="[srcIconPrefix]"></ng-content>
-  <ng-content></ng-content>
-  <ng-content select="[srcIconPostfix]"></ng-content>
-</div>

package/src/lib/components/source-banner/components/source-banner.component.scss

@@ -1,75 +0,0 @@
-// source-banner.component.scss
-.src-banner {
-  --srcBannerPadding: 20px;
-  --srcBannerBackgroundColor: var(--src-color-bg-default-subdued, #f9fafb);
-  --srcBannerBorderWidth: 1px;
-  --srcBannerBorderColor: var(--src-color-border-default, #e5e7eb);
-  --srcBannerTextColor: var(--src-color-text-default, #1f2937);
-  --srcBannerIconColor: var(--src-color-icon-default, #6b7280);
-  --srcBannerBorderRadius: var(--src-br-small, 4px);
-  --srcBannerIconMargin: 16px;
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  padding: var(--srcBannerPadding, 20px);
-  border: var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor, #fff);
-  border-radius: var(--srcBannerBorderRadius);
-  background: var(--srcBannerBackgroundColor);
-  color: var(--srcBannerTextColor);
-  font-size: var(--src-fs-base, 14px);
-  font-weight: normal;
-  line-height: var(--src-lh-base);
-
-  [srcIconPrefix] {
-    color: var(--srcBannerIconColor);
-  }
-
-  p {
-    margin: 0;
-  }
-
-  &--compact {
-    --srcBannerPadding: 16px;
-    --srcBannerIconMargin: 8px;
-  }
-
-  &--info {
-    --srcBannerBackgroundColor: #e8f0fd;
-    --srcBannerBorderColor: transparent;
-    --srcBannerIconColor: #2463bc;
-  }
-
-  &--success {
-    --srcBannerBackgroundColor: var(--src-color-green-50);
-    --srcBannerBorderColor: var(--src-color-green-500);
-    --srcBannerIconColor: var(--src-color-green-500);
-  }
-
-  &--critical {
-    --srcBannerBackgroundColor: var(--src-color-bg-critical-subdued);
-    --srcBannerBorderColor: var(--src-color-border-critical-strong);
-    --srcBannerIconColor: var(--src-color-icon-critical);
-  }
-
-  &--warning {
-    --srcBannerBackgroundColor: var(--src-color-yellow-50);
-    --srcBannerBorderColor: var(--src-color-yellow-700);
-    --srcBannerIconColor: var(--src-color-yellow-700);
-  }
-}
-
-.src-banner__icon {
-  margin-right: var(--srcBannerIconMargin, 8px);
-  color: var(--srcBannerIconColor);
-}
-
-.src-banner__close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  margin-left: auto;
-
-  button.src-icon-button {
-    --srcButtonBgColor: transparent;
-  }
-}

package/src/lib/components/source-banner/components/source-banner.component.ts

@@ -1,25 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { NgClass } from '@angular/common';
-import {
-  SourceBannerType,
-  SourceBannerTypeValues,
-} from '../constants/sourceBannerType';
-
-@Component({
-  selector: 'src-banner',
-  templateUrl: './source-banner.component.html',
-  styleUrls: ['./source-banner.component.scss'],
-  imports: [NgClass],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceBannerComponent {
-  type = input<SourceBannerTypeValues>(SourceBannerType.DEFAULT);
-  isCompact = input(false);
-  testID = input('', { alias: 'data-testid' });
-}

package/src/lib/components/source-banner/constants/sourceBannerType.ts

@@ -1,10 +0,0 @@
-export const SourceBannerType = {
-  DEFAULT: 'default',
-  INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  CRITICAL: 'critical',
-} as const;
-
-export type SourceBannerTypeValues =
-  (typeof SourceBannerType)[keyof typeof SourceBannerType];

package/src/lib/components/source-button/components/source-button.component.html

@@ -1,44 +0,0 @@
-<button
-  [type]="type"
-  class="src-button"
-  [ngClass]="classes"
-  [attr.form]="formID"
-  (click)="handleClick($event)"
-  (submit)="handleSubmit($event)"
-  [disabled]="isDisabled"
-  [attr.data-testid]="testID()"
->
-  <span [style.opacity]="isLoading ? 0 : 1">
-    @if (iconPrefix) {
-      <span class="src-button__icon">
-        <ng-content select="[srcIconPrefix]"></ng-content>
-      </span>
-    }
-
-    <ng-content></ng-content>
-
-    @if (hasDisclosure) {
-      <svg
-        class="disclosure-icon"
-        width="8"
-        height="5"
-        viewBox="0 0 8 5"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z"
-          fill="currentColor"
-        />
-      </svg>
-    }
-  </span>
-  @if (isLoading) {
-    <src-loading
-      [size]="16"
-      [progressStrokeColor]="'#6B7280'"
-      [strokeWidth]="2"
-      [data-testid]="testID() + '-loading-state'"
-    ></src-loading>
-  }
-</button>