@iamgld/ui 0.0.1 → 1.0.1

package/lib/validators/must-match/must-match.validator.d.ts

@@ -0,0 +1,6 @@
+import { ValidatorFn } from '@angular/forms';
+export declare function mustMatchValidator({ controlName, mustMatchControlName, errorMessage, }: {
+    controlName: string;
+    mustMatchControlName: string;
+    errorMessage: string;
+}): ValidatorFn;

package/lib/validators/must-unmatch/must-unmatch.validator.d.ts

@@ -0,0 +1,6 @@
+import { ValidatorFn } from '@angular/forms';
+export declare function mustUnmatchValidator({ controlName, mustUnmatchControlName, errorMessage, }: {
+    controlName: string;
+    mustUnmatchControlName: string;
+    errorMessage: string;
+}): ValidatorFn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iamgld/ui",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -11,6 +11,16 @@
   "dependencies": {
     "tslib": "2.3.0"
   },
-  "sideEffects": false
-}
-
+  "sideEffects": false,
+  "module": "fesm2022/iamgld-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/iamgld-ui.mjs"
+    }
+  }
+}

package/public/styles/layers/_setting.scss

@@ -83,15 +83,16 @@
   --gld-orange: #f97315;
   --gld-orange-transparent--010: #{rgba(#f97315, 0.1)};
   --gld-orange-transparent--020: #{rgba(#f97315, 0.2)};
-  --gld-orange-transparent--020: #{rgba(#f97315, 0.3)};
+  --gld-orange-transparent--030: #{rgba(#f97315, 0.3)};
   --gld-pink: #ec4899;
   --gld-pink-transparent--010: #{rgba(#ec4899, 0.1)};
   --gld-pink-transparent--020: #{rgba(#ec4899, 0.2)};
   --gld-pink-transparent--030: #{rgba(#ec4899, 0.3)};
   --gld-gray: #b5b5b5;
-  --gld-gray-transparent--015: #{rgba(#b5b5b5, 0.15)};
+  --gld-gray-transparent--010: #{rgba(#b5b5b5, 0.1)};
+  --gld-gray-transparent--020: #{rgba(#b5b5b5, 0.2)};
   --gld-gray-transparent--050: #{rgba(#b5b5b5, 0.5)};
-  --gld-gray-transparent--075: #{rgba(#b5b5b5, 0.75)};
+  --gld-gray-transparent--060: #{rgba(#b5b5b5, 0.6)};
   --gld-white: #fff;
   --gld-whitelight: #f9fafb;
   --gld-whitelight-transparent--090: #{rgba(#f9fafb, 0.9)};
@@ -105,13 +106,16 @@
   --gld-darkblue-transparent--070: #{rgba(#101827, 0.7)};
   --gld-darkblue-transparent--060: #{rgba(#101827, 0.6)};
   --gld-darkblue-transparent--030: #{rgba(#101827, 0.3)};
+  --gld-darkblue-transparent--010: #{rgba(#101827, 0.1)};
 
   // Borders
-  --gld-border-size: 1px;
+  --gld-border-size: 2px;
+
   // Animations
   --gld-animation-time--150: 150ms;
   --gld-animation-time--250: 250ms;
   --gld-animation-time--10s: 10s;
+
   // General
   --gld-max-width: 1280px;
   --gld-navbar-height: 50px;

package/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/components';
+export * from './lib/validators';
+export * from './lib/utils';

package/.storybook/main.ts

@@ -1,16 +0,0 @@
-import type { StorybookConfig } from '@storybook/angular'
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
-  framework: {
-    name: '@storybook/angular',
-    options: {},
-  },
-}
-export default config

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/angular'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-}
-
-export default preview

package/.storybook/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig.lib.json",
-  "compilerOptions": {
-    "types": ["node"],
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true
-  },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
-  "include": ["../src/**/*.stories.*", "./preview.ts"],
-  "files": ["./typings.d.ts"]
-}
-

package/.storybook/typings.d.ts

@@ -1,4 +0,0 @@
-declare module '*.md' {
-  const content: string;
-  export default content;
-}

package/eslint.config.js

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

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/iamgld-ui",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "inlineStyleLanguage": "scss",
-  "assets": ["./public/**"]
-}
-

package/src/lib/components/buttons/button/button.component.html

@@ -1,10 +0,0 @@
-<button
-  id="{{ name() }}"
-  attr.aria-label="{{ name() }}"
-  class="Button Button--{{ color() }} Button--{{ size() }}"
-  [class.Button--disable]="disable()"
-  (click)="emitClick()">
-  <span>
-    <ng-content />
-  </span>
-</button>

package/src/lib/components/buttons/button/button.component.scss

@@ -1,128 +0,0 @@
-// @use 'styles';
-
-.Button {
-  --color: initial;
-  --border-color: initial;
-  --border: var(--gld-border-size) solid var(--border-color);
-  --background: initial;
-  --background--hover: initial;
-  --box-shadow-size: 2px;
-  --box-shadow-size--hover: 0;
-  --padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);
-  --radius: var(--gld-radius--xxs);
-  --font-size: var(--gld-font-size--normal);
-  --font: 600 var(--font-size) var(--gld-font--poppins);
-
-  outline: none;
-  border: var(--border);
-  padding: var(--padding);
-  border-radius: var(--radius);
-  font: var(--font);
-  cursor: pointer;
-  width: inherit;
-  color: var(--color);
-  background: var(--background);
-  box-shadow: 0 var(--box-shadow-size) 0 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--gld-spacing--xxxs);
-  will-change: background, color;
-  transition:
-    background var(--gld-animation-time--150),
-    box-shadow var(--gld-animation-time--150),
-    color var(--gld-animation-time--150);
-
-  &:hover,
-  &:focus {
-    --background: var(--background--hover);
-    --box-shadow-size: var(--box-shadow-size--hover);
-  }
-
-  span {
-    text-transform: capitalize;
-    user-select: none;
-  }
-
-  &--pink {
-    --color: var(--gld-pink);
-    --border-color: var(--gld-pink);
-    --background: var(--gld-pink-transparent--010);
-    --background--hover: var(--gld-pink-transparent--020);
-  }
-
-  &--purple {
-    --color: var(--gld-purple);
-    --border-color: var(--gld-purple);
-    --background: var(--gld-purple-transparent--010);
-    --background--hover: var(--gld-purple-transparent--020);
-  }
-
-  &--mustard {
-    --color: var(--gld-mustard);
-    --border-color: var(--gld-mustard);
-    --background: var(--gld-mustard-transparent--010);
-    --background--hover: var(--gld-mustard-transparent--020);
-  }
-
-  &--orange {
-    --color: var(--gld-orange);
-    --border-color: var(--gld-orange);
-    --background: var(--gld-orange-transparent--010);
-    --background--hover: var(--gld-orange-transparent--020);
-  }
-
-  &--blue {
-    --color: var(--gld-blue);
-    --border-color: var(--gld-blue);
-    --background: var(--gld-blue-transparent--010);
-    --background--hover: var(--gld-blue-transparent--020);
-  }
-
-  &--red {
-    --color: var(--gld-red);
-    --border-color: var(--gld-red);
-    --background: var(--gld-red-transparent--010);
-    --background--hover: var(--gld-red-transparent--020);
-  }
-
-  &--green {
-    --color: var(--gld-green);
-    --border-color: var(--gld-green);
-    --background: var(--gld-green-transparent--010);
-    --background--hover: var(--gld-green-transparent--020);
-  }
-
-  &--tiny {
-    --font-size: var(--gld-font-size--small);
-    --padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs);
-  }
-
-  &--small {
-    --font-size: var(--gld-font-size--small);
-    --padding: var(--gld-spacing--xxs);
-  }
-
-  &--normal {
-    --font-size: var(--gld-font-size--normal);
-    --padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);
-  }
-
-  &--medium {
-    --padding: var(--gld-spacing--xs) var(--gld-spacing--m);
-  }
-
-  &--large {
-    --font-size: var(--gld-font-size--heading-three);
-    --padding: var(--gld-spacing--xs) var(--gld-spacing--l);
-  }
-
-  &--disable {
-    --color: var(--gld-gray-transparent--075);
-    --border-color: var(--gld-gray-transparent--075);
-    --background: var(--gld-gray-transparent--015);
-    --background--hover: var(--gld-gray-transparent--015);
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-}

package/src/lib/components/buttons/button/button.component.spec.ts

@@ -1,21 +0,0 @@
-import { type ComponentFixture, TestBed } from '@angular/core/testing'
-
-import { ButtonComponent } from './button.component'
-
-describe('ButtonComponent', () => {
-  let component: ButtonComponent
-  let fixture: ComponentFixture<ButtonComponent>
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ButtonComponent],
-    })
-    fixture = TestBed.createComponent(ButtonComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
-
-  it('should create', () => {
-    expect(component).toBeTruthy()
-  })
-})

package/src/lib/components/buttons/button/button.component.stories.ts

@@ -1,91 +0,0 @@
-// Storybook Imports
-import { Meta, StoryObj } from '@storybook/angular'
-import { fn } from '@storybook/test'
-// This Component Imports
-import { ButtonComponent } from './button.component'
-
-const meta: Meta<ButtonComponent> = {
-  title: 'buttons/button',
-  component: ButtonComponent,
-  tags: ['autodocs'],
-  argTypes: {
-    name: {
-      description: 'Required name',
-      control: {
-        type: 'text',
-        accept: 'string',
-      },
-      table: {
-        type: { summary: 'Name' },
-        defaultValue: { summary: 'button name' },
-      },
-    },
-    color: {
-      description: 'Supported colors',
-      control: {
-        type: 'select',
-        accept: 'string',
-      },
-      options: ['pink', 'purple', 'mustard', 'orange', 'red', 'blue', 'green'],
-      table: {
-        type: { summary: 'ButtonColor' },
-        defaultValue: { summary: 'pink' },
-      },
-    },
-    size: {
-      description: 'Supported sizes',
-      control: {
-        type: 'select',
-        accept: 'string',
-      },
-      options: ['tiny', 'small', 'normal', 'medium', 'large'],
-      table: {
-        type: { summary: 'ButtonSize' },
-        defaultValue: { summary: 'normal' },
-      },
-    },
-    disable: {
-      control: {
-        type: 'boolean',
-        accept: 'boolean',
-      },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    clicked: {
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: '() => void' },
-      },
-    },
-  },
-  args: {
-    name: 'button',
-    color: 'pink',
-    size: 'normal',
-    disable: false,
-    clicked: fn(),
-  },
-  parameters: {},
-  render: (args) => ({
-    props: {
-      ...args,
-      ngContent: 'Button',
-    },
-    template: `
-    <gld-button [name]="name" [color]="color" [size]="size" [disable]="disable">
-      {{ ngContent }}
-    </gld-button>`,
-  }),
-}
-
-export default meta
-type Story = StoryObj<ButtonComponent>
-
-export const Pink: Story = {
-  args: {
-    color: 'pink',
-  },
-}

package/src/lib/components/buttons/button/button.component.ts

@@ -1,29 +0,0 @@
-// Angular Imports
-import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from '@angular/core'
-
-@Component({
-  selector: 'gld-button',
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.scss',
-  imports: [],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ButtonComponent {
-  name = input.required<string>()
-  disable = input<boolean, string | boolean>(false, { transform: booleanAttribute })
-  // hasIcon = input<boolean, string | boolean>(false, { transform: booleanAttribute })
-  // icon = input<Icons>(Icons.addLine)
-  // iconSize = input<keyof typeof IconsSize>(IconsSize.small)
-  // iconMoveTopToBottom = input<number, string | number>(0, { transform: numberAttribute })
-  // iconMoveLeftToRight = input<number, string | number>(0, { transform: numberAttribute })
-  color = input<ButtonColor>('pink')
-  size = input<ButtonSize>('normal')
-  clicked = output<void>()
-
-  emitClick() {
-    if (!this.disable()) this.clicked.emit()
-  }
-}
-
-export type ButtonColor = 'pink' | 'purple' | 'mustard' | 'orange' | 'red' | 'blue' | 'green'
-export type ButtonSize = 'tiny' | 'small' | 'normal' | 'medium' | 'large'

package/src/lib/components/buttons/index.ts

@@ -1 +0,0 @@
-export * from './button/button.component'

package/src/lib/components/index.ts

@@ -1 +0,0 @@
-export * from './buttons'

package/src/public-api.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of iamgld-ui
- */
-
-export * from './lib/components'
-

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": []
-  },
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
-}
-