@albi_scando/as-design-system-threejs-lib 1.0.0

package/dist/types/constants/application.constant.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The name of the application.
+ */
+export declare const APPLICATION_NAME = "as-design-system-threejs-lib";

package/dist/types/constants/custom-messages.const.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file defines custom messages used across the library.
+ */
+export declare const CUSTOM_MESSAGES: {
+    LANGUAGE_CHANGE_CONFIRMED: string;
+};

package/dist/types/main.d.ts

@@ -0,0 +1,5 @@
+import { APPLICATION_NAME } from './constants/application.constant.ts';
+export { APPLICATION_NAME };
+export { WebComponentsRegistry } from './web-components/registry.ts';
+export { CUSTOM_MESSAGES } from './constants/custom-messages.const.ts';
+export * as LanguagePicker from './web-components/language-picker/main.ts';

package/dist/types/web-components/language-picker/component.d.ts

@@ -0,0 +1,75 @@
+import { Locales } from '@albi_scando/as-const-languages-lib';
+export interface LanguagePickerComponentOptions {
+    languages: Locales[];
+    selected?: Locales | undefined;
+}
+export declare class LanguagePickerComponent extends HTMLElement {
+    private static readonly _languagesAttribute;
+    private static readonly _selectedAttribute;
+    private readonly _shadowRoot;
+    private _container;
+    private _canvas;
+    private _camera;
+    private _renderer;
+    private _scene;
+    private _controls;
+    private _resizeObserver;
+    private _clock;
+    private _lastTime;
+    private _lights;
+    private _spotlight;
+    private _flagsGroup;
+    private _languages;
+    private _selectedLanguageIndex;
+    private _animationFrameId;
+    private _targetGroupRotation;
+    private _currentGroupRotation;
+    private _unwrappedGroupRotation;
+    private _introCameraStartPosition;
+    private _introCameraEndPosition;
+    private _introCameraElapsed;
+    private _introCameraMoveDuration;
+    private _introCameraHoldDuration;
+    private _isIntroCameraAnimating;
+    private _isIntroCameraHolding;
+    private _cameraLookAtY;
+    private _circleRadius;
+    private _wind;
+    private _menuContainer;
+    private _menuIntroStartScale;
+    private _barMenu;
+    private _languageButtons;
+    private _confirmationDialog;
+    private _currentVisibleButtonIndex;
+    private _isInitialized;
+    private _isInitializing;
+    static get observedAttributes(): string[];
+    constructor(options?: LanguagePickerComponentOptions);
+    private _initializeComponent;
+    attributeChangedCallback(name: string, newValue: string | null): void;
+    private _setupScene;
+    private _setupUI;
+    private _setupFlags;
+    private _computeIntroCameraEndPosition;
+    private _setupLanguageDialog;
+    /**
+     * Handles the confirmation of a language change.
+     *
+     * @returns {void}
+     */
+    private _handleConfirmation;
+    private _setupEventListeners;
+    private _checkVisibleButtonChange;
+    private _updateGroupRotationToLanguage;
+    private _updateGroupRotation;
+    private _updateIntroCamera;
+    private _setMenuIntroScale;
+    private _animate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    addLanguage(_language: string): void;
+    addLocales(_languages: string[]): void;
+    removeLanguage(_language: string): void;
+    removeLocales(_languages: string[]): void;
+    selectLanguage(_language: string): void;
+}

package/dist/types/web-components/language-picker/custom-messages.const.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file defines custom messages used by the component.
+ */
+export declare const COMPONENT_CUSTOM_MESSAGES: {
+    LANGUAGE_CHANGE_CONFIRMED: string;
+};

package/dist/types/web-components/language-picker/main.d.ts

@@ -0,0 +1,4 @@
+export { LanguagePickerComponent } from './component';
+export type { LanguagePickerComponentOptions } from './component';
+export { selector } from './selector';
+export { COMPONENT_CUSTOM_MESSAGES } from './custom-messages.const';

package/dist/types/web-components/language-picker/selector.d.ts

@@ -0,0 +1 @@
+export declare const selector = "as-language-picker";

package/dist/types/web-components/registry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A registry class that helps register custom web components with the browser.
+ * It registers all provided web components in a map, ensuring that no component
+ * is registered more than once. The class provides methods for registering individual
+ * components as well as batches of components.
+ *
+ * @example
+ * const registry = new WebComponentsRegistry(new Map([
+ *   ['my-custom-component-1', MyCustomComponent1Class],
+ *   ['my-custom-component-2', MyCustomComponent2Class],
+ * ]));
+ */
+export declare class WebComponentsRegistry {
+    /**
+     * Creates an instance of WebComponentsRegistry.
+     * Registers all custom elements provided in the map of components.
+     *
+     * @param {Map<string, CustomElementConstructor>} customElements - A map of component selectors (string keys)
+     *        and their corresponding custom element constructors. If no map is provided, an empty map is used.
+     */
+    constructor(customElements?: Map<string, CustomElementConstructor>);
+    /**
+     * Registers all the components provided in the map.
+     * It iterates over the map entries and registers each component individually.
+     *
+     * @param {Map<string, CustomElementConstructor>} customElements - A map of component selectors (string keys)
+     *        and their corresponding custom element constructors.
+     * @returns {void}
+     */
+    private registerAllComponents;
+    /**
+     * Registers an individual custom component with the browser.
+     * If the component is not already registered, it defines the component and logs a message.
+     * If the component is already registered, a warning is logged.
+     *
+     * @param {string} selector - The selector (tag name) of the custom component to be registered.
+     * @param {CustomElementConstructor} component - The constructor of the custom component to be registered.
+     * @returns {void}
+     */
+    private registerComponent;
+}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@albi_scando/as-design-system-threejs-lib",
+  "version": "1.0.0",
+  "description": "A library of reusable, strongly typed threejs Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/albertoscandolara/as-design-system-threejs-lib"
+  },
+  "author": "Alberto Scandolara",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/albertoscandolara/as-design-system-threejs-lib/issues"
+  },
+  "homepage": "https://github.com/albertoscandolara/as-design-system-threejs-lib#readme",
+  "main": "./dist/as-design-system-threejs-lib.umd.js",
+  "module": "./dist/as-design-system-threejs-lib.es.js",
+  "typings": "./dist/types/main.d.ts",
+  "scripts": {
+    "build": "tsc && vite build",
+    "commit": "cz",
+    "dev": "vite serve ./src/playground",
+    "docs:build": "typedoc",
+    "docs:serve": "npx http-server docs -o",
+    "formatter": "npm run prettier && npm run lint",
+    "formatter:fix": "npm run prettier:fix && npm run lint:fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepare": "husky",
+    "preview": "vite preview",
+    "prettier": "prettier . --check",
+    "prettier:fix": "prettier . --write",
+    "release": "semantic-release",
+    "release:dry": "semantic-release --dry-run",
+    "storybook": "storybook dev -p 6006",
+    "storybook-build": "storybook build"
+  },
+  "devDependencies": {
+    "@albi_scando/as-const-languages-lib": "^1.1.0",
+    "@albi_scando/as-const-lib": "^1.9.0",
+    "@albi_scando/as-design-system-lib": "^1.6.0",
+    "@albi_scando/as-threejs-flags-lib": "^2.3.2",
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@eslint/js": "^9.39.2",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.3",
+    "@semantic-release/npm": "^13.1.3",
+    "@storybook/addon-docs": "10.2.16",
+    "@storybook/html-vite": "10.2.16",
+    "@types/node": "^25.2.1",
+    "@types/numeric": "^1.2.6",
+    "@vitest/coverage-v8": "^4.0.18",
+    "branch-name-lint": "^3.0.1",
+    "commitizen": "^4.3.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-regexp": "^3.0.0",
+    "eslint-plugin-security": "^3.0.1",
+    "eslint-plugin-storybook": "10.2.16",
+    "globals": "^17.3.0",
+    "http-server": "^14.1.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "3.8.1",
+    "sass": "^1.97.3",
+    "semantic-release": "^25.0.3",
+    "storybook": "10.2.16",
+    "typedoc": "^0.28.16",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "validate-branch-name": "^1.3.2",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.2.0",
+    "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "@albi_scando/as-const-languages-lib": "^1.1.0",
+    "@albi_scando/as-const-lib": "^1.9.0",
+    "@albi_scando/as-design-system-lib": "^1.6.0",
+    "@albi_scando/as-threejs-flags-lib": "^2.3.2",
+    "@types/three": "^0.179.0",
+    "three": "^0.179.1"
+  },
+  "packageManager": "pnpm@10.28.2",
+  "engines": {
+    "node": ">=22.11.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "lint-staged": {
+    "*.ts": "prettier --write",
+    "*.{js,scss,css,md}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  }
+}