@hmscodes/honey-core 1.0.0

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,59 @@
+# HoneyCore
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.4.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "honey-core": {
+      "projectType": "library",
+      "root": "projects/honey-core",
+      "sourceRoot": "projects/honey-core/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/honey-core/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/honey-core/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/honey-core/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/honey-core/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": "projects/honey-core/.storybook",
+            "browserTarget": "honey-core:build",
+            "compodoc": false,
+            "port": 6006,
+            "styles": [
+              "projects/honey-core/src/styles/variables.scss"
+            ]
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": "projects/honey-core/.storybook",
+            "browserTarget": "honey-core:build",
+            "compodoc": false,
+            "outputDir": "storybook-static"
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@hmscodes/honey-core",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "storybook": "ng run honey-core:storybook",
+    "build-storybook": "ng run honey-core:build-storybook"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.8",
+    "@angular/cli": "^19.2.4",
+    "@angular/compiler-cli": "^19.2.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/angular": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^19.2.0",
+    "sass": "^1.87.0",
+    "storybook": "^8.6.12",
+    "typescript": "~5.7.2"
+  }
+}

package/projects/honey-core/.storybook/main.ts

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

package/projects/honey-core/.storybook/preview.ts

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

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

@@ -0,0 +1,11 @@
+{
+  "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/projects/honey-core/.storybook/typings.d.ts

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

package/projects/honey-core/README.md

@@ -0,0 +1,63 @@
+# HoneyCore
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build honey-core
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/honey-core
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/honey-core/ng-package.json

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

package/projects/honey-core/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "honey-core",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/honey-core/src/lib/components/button/button.component.html

@@ -0,0 +1,8 @@
+<button
+  type="button"
+  [class]="classes"
+  [disabled]="disabled"
+  (click)="onClick.emit($event)"
+>
+  <ng-content />
+</button>

package/projects/honey-core/src/lib/components/button/button.component.scss

@@ -0,0 +1,47 @@
+.hc-button {
+  display             : inline-block;
+  cursor              : pointer;
+  border              : 0;
+  border-radius       : 4px;
+  font-weight         : 700;
+  line-height         : 1;
+  font-family         : 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+
+  &:disabled {
+    cursor            : not-allowed;
+    background        : var(--hc-disabled-bg);
+    color             : var(--hc-disabled-text);
+
+    &:hover {
+      background      : var(--hc-disabled-bg);
+      color           : var(--hc-disabled-text);
+    } 
+  }
+}
+
+.hc-primary {
+  background-color    : var(--hc-background-primary);
+  color               : white;
+
+  &:hover {
+    background-color  : var(--hc-background-primary-hover);
+  }
+}
+
+.hc-secondary {
+  background-color    : var(--hc-secondary-500);
+  color               : white;
+}
+.hc-small {
+  padding             : 10px 16px;
+  font-size           : 12px;
+}
+.hc-medium {
+  padding             : 10px 20px;
+  font-size           : 14px;
+}
+.hc-large {
+  padding             : 12px 24px;
+  font-size           : 16px;
+}

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

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

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

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'hc-button',
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+  imports: [],
+  standalone: true,
+})
+export class ButtonComponent {
+  /** Is this the principal call to action on the page? */
+  @Input()
+  variant: 'primary' | 'secondary'  = 'primary';
+
+  /** What background color to use */
+  @Input()
+  backgroundColor?: string;
+
+  /** How large should the button be? */
+  @Input()
+  size: 'small' | 'medium' | 'large' = 'medium';
+
+  /**
+   * Button contents
+   *
+   * @required
+   */
+  @Input()
+  label = 'Button';
+
+  /**
+   * Disabled state of the button
+   */
+  @Input()
+  disabled = false;
+
+  /** Optional click handler */
+  @Output()
+  onClick = new EventEmitter<Event>();
+
+  public get classes(): string[] {
+    return ['hc-button', `hc-${this.size}`, `hc-${this.variant}`];
+  }
+}

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/projects/honey-core/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of honey-core
+ */
+
+export * from './lib/honey-core.service';
+export * from './lib/honey-core.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': '#F55638',
+			'--hc-primary-600': '#F57738',
+			'--hc-primary-700': '#F59838',
+		}} 
+  />
+  <ColorItem 
+    title="theme.color.secondary" 
+    subtitle="Honey Core Secondary" 
+    colors={{ 
+			'--hc-secondary-500': '#FFC857',
+			'--hc-secondary-600': '#f7a838',
+			'--hc-secondary-700': '#d68d2a',
+		}} 
+  />
+  <ColorItem 
+    title="theme.color.brown" 
+    subtitle="Honey Core Secondary" 
+    colors={{ 
+			'--hc-brown-500': '#95570e',
+			'--hc-brown-600': '#753c00',
+		}} 
+  />
+  <ColorItem
+    title="theme.color.greyscale"
+    subtitle="Some of the greys"
+    colors={{
+			'--hc-text-strong': '#2E282A',
+			'--hc-text-light': '#6C757D',
+		}}
+  />
+</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,67 @@
+import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
+import { fn } from '@storybook/test';
+import { ButtonComponent } from '../lib/components/button/button.component';
+
+type ButtonInputsAndCustomArgs = ButtonComponent & { 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: ButtonComponent,
+  tags: ['autodocs'],
+  args: {
+    text: 'Button',
+  },
+  render: ({ text, ...buttonArgs }) => ({
+    props: buttonArgs,
+    template: `
+        <hc-button ${argsToTemplate(buttonArgs)}>
+        ${text}
+        </hc-button>
+      `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    variant: 'primary',
+    disabled: true,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    variant: 'primary',
+    size: 'large',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    variant: 'primary',
+    size: 'small',
+  },
+};

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/header.component.ts

@@ -0,0 +1,75 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import type { User } from './user';
+import { ButtonComponent } from '../lib/components/button/button.component';
+
+@Component({
+  selector: 'storybook-header',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  template: `<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fillRule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      <div *ngIf="user">
+        <span class="welcome">
+          Welcome, <b>{{ user.name }}</b
+          >!
+        </span>
+        <hc-button
+          *ngIf="user"
+          size="small"
+          (onClick)="onLogout.emit($event)"
+          label="Log out"
+        ></hc-button>
+      </div>
+      <div *ngIf="!user">
+        <hc-button
+          *ngIf="!user"
+          size="small"
+          class="margin-left"
+          (onClick)="onLogin.emit($event)"
+          label="Log in"
+        ></hc-button>
+        <hc-button
+          *ngIf="!user"
+          size="small"
+          class="margin-left"
+          (onClick)="onCreateAccount.emit($event)"
+          label="Sign up"
+        ></hc-button>
+      </div>
+    </div>
+  </div>
+</header>`,
+  styleUrls: ['./header.css'],
+})
+export class HeaderComponent {
+  @Input()
+  user: User | null = null;
+
+  @Output()
+  onLogin = new EventEmitter<Event>();
+
+  @Output()
+  onLogout = new EventEmitter<Event>();
+
+  @Output()
+  onCreateAccount = new EventEmitter<Event>();
+}

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

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { fn } from '@storybook/test';
+
+import { HeaderComponent } from './header.component';
+
+const meta: Meta<HeaderComponent> = {
+  title: 'Example/Header',
+  component: HeaderComponent,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<HeaderComponent>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

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

@@ -0,0 +1,82 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HeaderComponent } from './header.component';
+import type { User } from './user';
+
+@Component({
+  selector: 'storybook-page',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent],
+  template: `<article>
+  <storybook-header
+    [user]="user"
+    (onLogout)="doLogout()"
+    (onLogin)="doLogin()"
+    (onCreateAccount)="doCreateAccount()"
+  ></storybook-header>
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span> Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fillRule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>`,
+  styleUrls: ['./page.css'],
+})
+export class PageComponent {
+  user: User | null = null;
+
+  doLogout() {
+    this.user = null;
+  }
+
+  doLogin() {
+    this.user = { name: 'Jane Doe' };
+  }
+
+  doCreateAccount() {
+    this.user = { name: 'Jane Doe' };
+  }
+}

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

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { expect, userEvent, within } from '@storybook/test';
+
+import { PageComponent } from './page.component';
+
+const meta: Meta<PageComponent> = {
+  title: 'Example/Page',
+  component: PageComponent,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<PageComponent>;
+
+export const LoggedOut: Story = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

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

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

package/projects/honey-core/src/styles/variables.scss

@@ -0,0 +1,18 @@
+:root {
+    --hc-primary-500                : #F55638;
+    --hc-primary-600                : #F57738;
+    --hc-primary-700                : #F59838;
+    --hc-secondary-500              : #FFC857;
+    --hc-secondary-600              : #f7a838;
+    --hc-secondary-700              : #d68d2a;
+    --hc-brown-500                  : #95570e;
+    --hc-brown-600                  : #753c00;
+    --hc-text-strong                : #2E282A;
+    --hc-text-light                 : #6C757D;
+
+    --hc-disabled-bg                : #c7c7c7;
+    --hc-disabled-text              : #6C757D;
+    --hc-background-primary         : var(--hc-primary-500);
+    --hc-background-primary-hover   : var(--hc-primary-600);
+}
+  

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"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+/* 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. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "paths": {
+      "honey-core": [
+        "./dist/honey-core"
+      ]
+    },
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}