@hmscodes/honey-core 1.0.18 → 1.0.20

package/projects/honey-core/src/lib/components/input-dropdown/hc-input-dropdown.component.scss

@@ -0,0 +1,67 @@
+.hc-input {
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 1rem 0;
+
+  input {
+    width: 100%;
+    padding: 1.2rem 0.8rem 0.4rem;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--hc-primary-500, var(--shc-primary-500));
+    }
+
+    &:focus + label,
+    &:not(:placeholder-shown) + label {
+      transform: translateY(-1rem);
+      font-size: 0.75rem;
+      color: var(--hc-primary-500, var(--shc-primary-500));
+    }
+  }
+
+  label {
+    position: absolute;
+    left: 0.8rem;
+    top: 1rem;
+    transition: all 0.2s ease;
+    pointer-events: none;
+    color: #666;
+    background-color: white;
+    padding: 0 0.2rem;
+  }
+}
+
+.hc-input-dropdown {
+  position: relative;
+
+  .dropdown-options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    z-index: 10;
+    max-height: 200px;
+    overflow-y: auto;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+
+    li {
+      padding: 0.6rem 0.8rem;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}

package/projects/honey-core/src/lib/components/input-dropdown/hc-input-dropdown.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, HostListener } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'hc-input-dropdown',
+  templateUrl: './hc-input-dropdown.component.html',
+  styleUrls: ['./hc-input-dropdown.component.scss'],
+  imports: [ReactiveFormsModule],
+  standalone: true
+})
+export class HcInputDropdownComponent {
+  @Input() control = new FormControl('');
+  @Input() label = 'Escolha uma opção';
+  @Input() id = 'input-dropdown';
+  @Input() options: string[] = [];
+
+  filteredOptions: string[] = [];
+  showOptions = false;
+
+  ngOnInit() {
+    this.filteredOptions = this.options;
+  }
+
+  filterOptions() {
+    const value = this.control.value?.toLowerCase() || '';
+    this.filteredOptions = this.options.filter(option =>
+      option.toLowerCase().includes(value)
+    );
+    this.showOptions = true;
+  }
+
+  selectOption(option: string) {
+    this.control.setValue(option);
+    this.showOptions = false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  handleClickOutside(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.hc-input-dropdown')) {
+      this.showOptions = false;
+    }
+  }
+}

package/projects/honey-core/src/lib/honey-core.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HoneyCoreComponent } from './honey-core.component';
+
+describe('HoneyCoreComponent', () => {
+  let component: HoneyCoreComponent;
+  let fixture: ComponentFixture<HoneyCoreComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HoneyCoreComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HoneyCoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/honey-core/src/lib/honey-core.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-honey-core',
+  imports: [],
+  template: `
+    <p>
+      honey-core works!
+    </p>
+  `,
+  styles: ``
+})
+export class HoneyCoreComponent {
+
+}

package/projects/honey-core/src/lib/honey-core.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HoneyCoreService } from './honey-core.service';
+
+describe('HoneyCoreService', () => {
+  let service: HoneyCoreService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HoneyCoreService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/honey-core/src/lib/honey-core.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HoneyCoreService {
+
+  constructor() { }
+}

package/{public-api.d.ts → projects/honey-core/src/public-api.ts}

@@ -1,4 +1,9 @@
+/*
+ * Public API Surface of honey-core
+ */
+
 export * from './lib/honey-core.service';
 export * from './lib/honey-core.component';
 export * from './lib/components/button/button.component';
 export * from './lib/components/input/input-floating-label.component';
+export * from './lib/components/input-dropdown/hc-input-dropdown.component';

package/projects/honey-core/src/stories/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": ["error", { "disallowTypeAnnotations": false }]
+  }
+}

package/projects/honey-core/src/stories/Colors.mdx

@@ -0,0 +1,40 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Colors" />
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.primary"
+    subtitle="Honey Core"
+    colors={{
+      '--hc-primary-500': 'var(--hc-primary-500)',
+      '--hc-primary-600': 'var(--hc-primary-600)',
+      '--hc-primary-700': 'var(--hc-primary-700)',
+		}}
+  />
+  <ColorItem
+    title="theme.color.secondary"
+    subtitle="Honey Core Secondary"
+    colors={{
+      '--hc-secondary-500': 'var(--hc-secondary-500)',
+      '--hc-secondary-600': 'var(--hc-secondary-600)',
+      '--hc-secondary-700': 'var(--hc-secondary-700)',
+		}}
+  />
+  <ColorItem
+    title="theme.color.brown"
+    subtitle="Honey Core Secondary"
+    colors={{
+      '--hc-brown-500': 'var(--hc-brown-500)',
+      '--hc-brown-600': 'var(--hc-brown-600)',
+		}}
+  />
+  <ColorItem
+    title="theme.color.greyscale"
+    subtitle="Some of the greys"
+    colors={{
+      '--hc-text-strong': 'var(--hc-text-strong)',
+      '--hc-text-light': 'var(--hc-text-light)',
+		}}
+  />
+</ColorPalette>

package/projects/honey-core/src/stories/Presentation.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Apresentação" />
+
+# Configure your project
+
+  HoneyCore is a reusable component library for Angular, crafted to bring consistency, efficiency, and style to personal projects. Inspired by the elegant structure of honeycombs, it’s built to scale and sweeten your workflow. 🐝

package/projects/honey-core/src/stories/button.component.stories.ts

@@ -0,0 +1,80 @@
+import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
+import { fn } from '@storybook/test';
+import { HcButtonComponent } from '../lib/components/button/button.component';
+
+type ButtonInputsAndCustomArgs = HcButtonComponent & { text: string };
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: Meta<ButtonInputsAndCustomArgs> = {
+  title: 'Example/Button',
+  component: HcButtonComponent,
+  tags: ['autodocs'],
+  args: {
+    text: 'Button',
+  },
+  render: ({ text, ...buttonArgs }: { text: string; [key: string]: any }) => ({
+    props: buttonArgs,
+    template: `
+        <hc-button ${argsToTemplate(buttonArgs)}>
+        ${text}
+        </hc-button>
+      `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<HcButtonComponent>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    style: 's-solid',
+  },
+};
+export const PrimaryDots: Story = {
+  args: {
+    style: 's-solid',
+    size: 'w-stretch',
+    loading: true,
+  },
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+};
+
+export const SecondarySolid: Story = {
+  args: {
+    style: 's-solid',
+    color: 'c-secondary',
+  },
+};
+
+export const Hollow: Story = {
+  args: {
+    style: 's-hollow',
+  },
+};
+
+export const Plain: Story = {
+  args: {
+    style: 's-plain',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    ...Primary.args,
+    size: 'h-small',
+  },
+};
+
+export const Stretch: Story = {
+  args: {
+    ...Primary.args,
+    size: 'w-stretch',
+  },
+};

package/projects/honey-core/src/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

package/projects/honey-core/src/stories/hc-input-dropdown.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { HcInputDropdownComponent } from '../lib/components/input-dropdown/hc-input-dropdown.component';
+
+type Story = StoryObj<HcInputDropdownComponent>;
+
+const meta: Meta<HcInputDropdownComponent> = {
+  title: 'Form/Input Dropdown',
+  component: HcInputDropdownComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [],
+      imports: [CommonModule, ReactiveFormsModule],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: { type: 'text' } },
+    options: {
+      control: {
+        type: 'object', // 'array' não é mais permitido diretamente
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    label: 'Fruta favorita',
+    options: ['Banana', 'Maçã', 'Uva', 'Abacaxi'],
+    control: new FormControl(''),
+  },
+};

package/projects/honey-core/src/stories/input-floating-label.component.stories.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { InputFloatingLabelComponent } from '../lib/components/input/input-floating-label.component';
+import { UntypedFormControl } from '@angular/forms';
+
+const meta: Meta<InputFloatingLabelComponent> = {
+  title: 'Form/Input Floating Label',
+  component: InputFloatingLabelComponent,
+  tags: ['autodocs'],
+  render: (args: InputFloatingLabelComponent) => ({
+    props: args,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<InputFloatingLabelComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'Nome completo',
+    id: 'nome',
+    required: true,
+    control: new UntypedFormControl('text-stories'),
+  },
+};

package/projects/honey-core/src/stories/user.ts

@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}

package/projects/honey-core/styles/hc-button.scss

@@ -0,0 +1,174 @@
+$hcButtonBorderRadius  : 12px !default;
+$hcButtonFontSize      : 14px !default;
+$hcButtonFontWeight    : normal !default;
+$hcButtonPadding       : 24px !default;
+
+/**
+ * Applies colors to the button
+ */
+@mixin colorButton($color, $background, $border) {
+  color                 : $color;
+  background            : $background;
+  border-color          : $border;
+}
+
+/**
+ *
+ */
+@mixin hcTypography($size, $color, $weight: normal) {
+  font-size             : $size;
+  color                 : $color;
+  font-weight           : $weight;
+}
+
+/**
+ *
+ */
+@mixin flex($justify, $align: center) {
+  display               : flex;
+  align-items           : $align;
+  justify-content       : $justify;
+}
+
+/**
+ * Base shared properties for hc-button styles
+ */
+%hc-button {
+  --color-button        : var(--color);
+  --color-button-hover  : var(--hover-color);
+  --width               : fit-content;
+  --height              : 36px;
+  --h-padding           : #{$hcButtonPadding};
+
+  @include flex(center);
+  @include hcTypography($hcButtonFontSize, var(--color-button), $hcButtonFontWeight);
+  gap                   : 8px;
+  box-sizing            : border-box;
+  width                 : var(--width);
+  height                : var(--height);
+  padding               : 0px var(--h-padding);
+  white-space           : nowrap;
+  outline               : none;
+  border                : 1px solid transparent;
+  border-radius         : $hcButtonBorderRadius;
+  transition            : background .2s, color .2s, box-shadow .2s;
+  cursor                : pointer;
+
+  &:disabled {
+    @include colorButton(var(--hc-disabled-text, var(--shc-disabled-text)), var(--hc-disabled-bg, var(--shc-disabled-bg)), var(--hc-disabled-bg, var(--shc-disabled-bg)));
+    cursor              : not-allowed;
+  }
+}
+
+/**
+ * Base colors
+ */
+.hc-button {
+  &.c-initial {
+    --color-button        : var(--hc-text-strong, var(--shc-text-strong));
+    --color-button-hover  : var(--hc-text-strong, var(--shc-text-strong));
+  }
+
+  &.c-primary {
+    --color-button        : var(--hc-background-primary, var(--shc-background-primary));
+    --color-button-hover  : var(--hc-background-primary-hover, var(--shc-background-primary-hover));
+  }
+
+  &.c-secondary {
+    color                 : var(--hc-brown-600, var(--shc-brown-600)) !important;
+    --color-button        : var(--hc-background-secondary, var(--shc-background-secondary));
+    --color-button-hover  : var(--hc-background-secondary-hover, var(--shc-background-secondary-hover));
+  }
+}
+
+
+/**
+ * Solid colored background button
+ */
+.hc-button.s-solid {
+  @extend %hc-button;
+  @include colorButton(var(--hc-background-main, var(--shc-background-main)), var(--color-button), transparent);
+
+  &:not(:disabled):hover {
+    background          : var(--color-button-hover);
+  }
+}
+
+/**
+ * Hollow button with colored border and text
+ */
+.hc-button.s-hollow {
+  @extend %hc-button;
+  @include colorButton(var(--color-button), transparent, var(--color-button));
+
+  &:not(:disabled):hover {
+    @include colorButton(var(--hc-background-main, var(--shc-background-main)), var(--color-button), transparent);
+  }
+
+  &:disabled {
+    background          : transparent;
+    color               : var(--hc-text-light, var(--shc-text-light));
+  }
+}
+
+/**
+ *  Text button
+ */
+.hc-button.s-plain {
+  --height              : 28px;
+  --h-padding           : 16px;
+
+  @extend %hc-button;
+  @include colorButton(var(--color-button), transparent, transparent);
+
+  &:not(:disabled):hover {
+    @include colorButton(var(--color-button-hover), transparent, transparent);
+  }
+
+  &:disabled {
+    @include colorButton(var(--hc-button-disabled-foreground, var(--shc-text-light)), transparent, transparent);
+  }
+}
+
+/**
+ * hc-button width classes
+ */
+.hc-button {
+  &.v-underlined {
+    text-decoration     : underline;
+  }
+
+  &.h-small {
+    --height            : 32px;
+    --h-padding         : 16px;
+    font-size           : 12px;
+  }
+
+  &.w-stretch {
+    --width             : 100%;
+  }
+}
+
+/**
+ * Overwrite buttons style on dark mode
+ */
+:root body[hc-theme='dark'] {
+  .s-solid {
+    &:disabled {
+      background        : hsla(var(--hc-primary-500-hsl), 0.5);
+    }
+  }
+
+  .hc-primary {
+    &:disabled {
+      @include colorButton(hsla(var(--hc-primary-400-hsl), 0.5), transparent, hsla(var(--hc-primary-400-hsl), 0.5));
+    }
+  }
+
+  .hc-button.s-solid {
+    &:disabled {
+      background        : hsla(var(--color-button-hsl), 0.5);
+      border-color      : transparent;
+    }
+  }
+}

package/projects/honey-core/styles/variables.css

@@ -0,0 +1,43 @@
+:root {
+    --shc-primary-500                : #FF7A00;
+    --shc-primary-600                : #E86B00;
+    --shc-primary-700                : #CC5D00;
+    --shc-secondary-500              : #FFC857;
+    --shc-secondary-600              : #f7a838;
+    --shc-secondary-700              : #d68d2a;
+    --shc-brown-500                  : #95570e;
+    --shc-brown-600                  : #753c00;
+    --shc-text-strong                : #2E282A;
+    --shc-text-light                 : #6C757D;
+    --shc-text-white                 : #FFFFFF;
+
+    --shc-background-main            : #f4f4f4;
+    --shc-disabled-bg                : #c7c7c7;
+    --shc-disabled-text              : #6C757D;
+    --shc-background-primary         : var(--shc-primary-500);
+    --shc-background-primary-hover   : var(--shc-primary-600);
+    --shc-background-secondary       : var(--shc-secondary-500);
+    --shc-background-secondary-hover : var(--shc-secondary-600);
+    --shc-background-linear          : linear-gradient(90deg, var(--shc-disabled-bg), var(--shc-secondary-600));
+
+    --hc-primary-500                 : var(--shc-primary-500);
+    --hc-primary-600                 : var(--shc-primary-600);
+    --hc-primary-700                 : var(--shc-primary-700);
+    --hc-secondary-500               : var(--shc-secondary-500);
+    --hc-secondary-600               : var(--shc-secondary-600);
+    --hc-secondary-700               : var(--shc-secondary-700);
+    --hc-brown-500                   : var(--shc-brown-500);
+    --hc-brown-600                   : var(--shc-brown-600);
+    --hc-text-strong                 : var(--shc-text-strong);
+    --hc-text-light                  : var(--shc-text-light);
+    --hc-text-white                  : var(--shc-text-white);
+
+    --hc-background-main             : var(--shc-background-main);
+    --hc-disabled-bg                 : var(--shc-disabled-bg);
+    --hc-disabled-text               : var(--shc-disabled-text);
+    --hc-background-primary          : var(--shc-background-primary);
+    --hc-background-primary-hover    : var(--shc-background-primary-hover);
+    --hc-background-secondary        : var(--shc-background-secondary);
+    --hc-background-secondary-hover  : var(--shc-background-secondary-hover);
+    --hc-background-linear           : var(--shc-background-linear);
+}

package/projects/honey-core/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* 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/projects/honey-core/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* 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/projects/honey-core/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* 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": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}