@plusui/library 0.1.0

package/eslint/custom-element-eslint-rules.js

@@ -0,0 +1,467 @@
+import customElement from "eslint-plugin-custom-element";
+import html from "@html-eslint/eslint-plugin";
+import htmlParser from "@html-eslint/parser";
+
+export const rules = {
+  "custom-element/required-attrs": ["error"],
+
+  "custom-element/no-deprecated-attrs": ["warn"],
+
+  "custom-element/constrained-attrs": ["error"],
+
+  "custom-element/no-deprecated-tags": ["warn"],
+
+  "custom-element/no-boolean-attr-values": [
+    "error",
+    {
+      tag: "plus-avatar",
+      attr: "invert",
+    },
+    {
+      tag: "plus-button",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-button",
+      attr: "loading",
+    },
+    {
+      tag: "plus-button",
+      attr: "full-width",
+    },
+    {
+      tag: "plus-button-group",
+      attr: "override",
+    },
+    {
+      tag: "plus-button-group",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-button-group",
+      attr: "loading",
+    },
+    {
+      tag: "plus-tag",
+      attr: "invert",
+    },
+    {
+      tag: "plus-chip",
+      attr: "invert",
+    },
+    {
+      tag: "plus-chip",
+      attr: "dismiss",
+    },
+    {
+      tag: "plus-chip",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-link",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-link",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-link",
+      attr: "loading",
+    },
+    {
+      tag: "plus-link",
+      attr: "external",
+    },
+    {
+      tag: "plus-alert",
+      attr: "invert",
+    },
+    {
+      tag: "plus-alert",
+      attr: "dismissible",
+    },
+    {
+      tag: "plus-alert",
+      attr: "full-width",
+    },
+    {
+      tag: "plus-alert",
+      attr: "hidden",
+    },
+    {
+      tag: "plus-radio",
+      attr: "checked",
+    },
+    {
+      tag: "plus-radio",
+      attr: "error",
+    },
+    {
+      tag: "plus-radio",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-radio",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-radio",
+      attr: "required",
+    },
+    {
+      tag: "plus-segmented-picker-item",
+      attr: "checked",
+    },
+    {
+      tag: "plus-segmented-picker-item",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-radio-group",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-radio-group",
+      attr: "required",
+    },
+    {
+      tag: "plus-radio-group",
+      attr: "error",
+    },
+    {
+      tag: "plus-modal",
+      attr: "is-open",
+    },
+    {
+      tag: "plus-modal",
+      attr: "full-width",
+    },
+    {
+      tag: "plus-modal",
+      attr: "close-on-backdrop",
+    },
+    {
+      tag: "plus-modal",
+      attr: "close-on-esc",
+    },
+    {
+      tag: "plus-drawer",
+      attr: "is-open",
+    },
+    {
+      tag: "plus-accordion",
+      attr: "expand",
+    },
+    {
+      tag: "plus-accordion",
+      attr: "is-grouped",
+    },
+    {
+      tag: "plus-accordion",
+      attr: "is-last",
+    },
+    {
+      tag: "plus-accordion",
+      attr: "is-first",
+    },
+    {
+      tag: "plus-accordion",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-accordion-group",
+      attr: "multi",
+    },
+    {
+      tag: "plus-popover",
+      attr: "dismissable",
+    },
+    {
+      tag: "plus-popover",
+      attr: "statusIcon",
+    },
+    {
+      tag: "plus-popover",
+      attr: "showArrow",
+    },
+    {
+      tag: "plus-list-box-item",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-list-box-item",
+      attr: "selected",
+    },
+    {
+      tag: "plus-dropdown-item",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-dropdown-item",
+      attr: "selected",
+    },
+    {
+      tag: "plus-dropdown",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-input",
+      attr: "clearable",
+    },
+    {
+      tag: "plus-input",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-input",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-input",
+      attr: "required",
+    },
+    {
+      tag: "plus-input",
+      attr: "password-toggle",
+    },
+    {
+      tag: "plus-input",
+      attr: "password-visible",
+    },
+    {
+      tag: "plus-input",
+      attr: "autoFocus",
+    },
+    {
+      tag: "plus-input",
+      attr: "spellCheck",
+    },
+    {
+      tag: "plus-input",
+      attr: "error",
+    },
+    {
+      tag: "plus-input",
+      attr: "full-width",
+    },
+    {
+      tag: "plus-input",
+      attr: "isSelect",
+    },
+    {
+      tag: "plus-popconfirm",
+      attr: "status-icon",
+    },
+    {
+      tag: "plus-popconfirm",
+      attr: "show-arrow",
+    },
+    {
+      tag: "plus-checkbox",
+      attr: "checked",
+    },
+    {
+      tag: "plus-checkbox",
+      attr: "indeterminate",
+    },
+    {
+      tag: "plus-checkbox",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-checkbox",
+      attr: "error",
+    },
+    {
+      tag: "plus-checkbox-group",
+      attr: "vertical",
+    },
+    {
+      tag: "plus-checkbox-group",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-textarea",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-textarea",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-textarea",
+      attr: "required",
+    },
+    {
+      tag: "plus-textarea",
+      attr: "autoFocus",
+    },
+    {
+      tag: "plus-textarea",
+      attr: "error",
+    },
+    {
+      tag: "plus-textarea",
+      attr: "full-width",
+    },
+    {
+      tag: "plus-rating",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-rating",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-rating",
+      attr: "required",
+    },
+    {
+      tag: "plus-toast",
+      attr: "dismiss",
+    },
+    {
+      tag: "plus-toast",
+      attr: "status-icon",
+    },
+    {
+      tag: "plus-select-item",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-select-item",
+      attr: "selected",
+    },
+    {
+      tag: "plus-select",
+      attr: "error",
+    },
+    {
+      tag: "plus-select",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-select",
+      attr: "required",
+    },
+    {
+      tag: "plus-select",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-select",
+      attr: "clearable",
+    },
+    {
+      tag: "plus-toggle",
+      attr: "checked",
+    },
+    {
+      tag: "plus-toggle",
+      attr: "error",
+    },
+    {
+      tag: "plus-toggle",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-toggle",
+      attr: "readonly",
+    },
+    {
+      tag: "plus-toggle",
+      attr: "required",
+    },
+    {
+      tag: "plus-toggle",
+      attr: "full-width",
+    },
+    {
+      tag: "plus-tab",
+      attr: "active",
+    },
+    {
+      tag: "plus-tab",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-tab",
+      attr: "dismissible",
+    },
+    {
+      tag: "plus-tab",
+      attr: "truncate",
+    },
+    {
+      tag: "plus-tab",
+      attr: "animated",
+    },
+    {
+      tag: "plus-tab-panel",
+      attr: "active",
+    },
+    {
+      tag: "plus-tab-group",
+      attr: "disabled",
+    },
+    {
+      tag: "plus-tab-group",
+      attr: "dismissible",
+    },
+    {
+      tag: "plus-tab-group",
+      attr: "animated",
+    },
+  ],
+
+  "@html-eslint/no-duplicate-attrs": "off",
+  "@html-eslint/no-duplicate-id": "off",
+  "@html-eslint/no-inline-styles": "off",
+  "@html-eslint/no-obsolete-tags": "off",
+  "@html-eslint/no-restricted-attr-values": "off",
+  "@html-eslint/no-restricted-attrs": "off",
+  "@html-eslint/no-script-style-type": "off",
+  "@html-eslint/no-target-blank": "off",
+  "@html-eslint/require-attrs": "off",
+  "@html-eslint/require-button-type": "off",
+  "@html-eslint/require-closing-tags": "off",
+  "@html-eslint/require-doctype": "off",
+  "@html-eslint/require-li-container": "off",
+  "@html-eslint/require-meta-charset": "off",
+  "@html-eslint/no-multiple-h1": "off",
+  "@html-eslint/require-lang": "off",
+  "@html-eslint/require-meta-description": "off",
+  "@html-eslint/require-open-graph-protocol": "off",
+  "@html-eslint/require-title": "off",
+  "@html-eslint/no-abstract-roles": "off",
+  "@html-eslint/no-accesskey-attrs": "off",
+  "@html-eslint/no-aria-hidden-body": "off",
+  "@html-eslint/no-non-scalable-viewport": "off",
+  "@html-eslint/no-positive-tabindex": "off",
+  "@html-eslint/no-skip-heading-levels": "off",
+  "@html-eslint/require-frame-title": "off",
+  "@html-eslint/require-img-alt": "off",
+  "@html-eslint/require-meta-viewport": "off",
+  "@html-eslint/element-newline": "off",
+  "@html-eslint/id-naming-convention": "off",
+  "@html-eslint/indent": "off",
+  "@html-eslint/lowercase": "off",
+  "@html-eslint/no-extra-spacing-attrs": "off",
+  "@html-eslint/no-multiple-empty-lines": "off",
+  "@html-eslint/no-trailing-spaces": "off",
+  "@html-eslint/quotes": "off",
+  "@html-eslint/sort-attrs": "off",
+};
+
+export default {
+  rules,
+  recommendedConfig: {
+    files: ["**/*.html"],
+    languageOptions: {
+      parser: htmlParser,
+    },
+    plugins: { html, "custom-element": customElement },
+    rules,
+  },
+};

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@plusui/library",
+  "version": "0.1.0",
+  "description": "Plus UI Library is a great library that offers many features that you can use in any framework without any problems.",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "analyze": "cem analyze",
+    "analyze:dev": "cem analyze --watch",
+    "dev": "npm run clean && concurrently -k -r \"npm run analyze:dev\" \"npm run build:watch\" \"npm run preview\"",
+    "test": "web-test-runner --group default",
+    "build": "npm run clean && npm run analyze && npm run build:cdn",
+    "build:cdn": "tsc && rollup -c rollup.config.js",
+    "build:watch": "concurrently -k -r \"tsc --watch\" \"rollup -c rollup.config.js --watch\"",
+    "new": "plop",
+    "deploy": "npm run build && npm publish",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "format:eslint": "npx eslint --fix",
+    "format:prettier": "npx prettier . --write",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
+    "lint:eslint": "npx eslint",
+    "lint:prettier": "npx prettier . --check",
+    "prepare": "husky && npx playwright install-deps",
+    "preview": "node dev/server.js",
+    "clean": "rimraf cdn dist eslint public react types custom-elements.json web-types.json vscode.css-custom-data.json vscode.html-custom-data.json",
+    "docs:dev": "concurrently -k -r \"npm run analyze:dev\" \"npm run build:watch\" \"npx astro dev\"",
+    "docs:start": "npx astro dev",
+    "docs:build": "npx astro check && astro build",
+    "docs:preview": "npx astro preview",
+    "docs:astro": "npx astro"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "code-bubble": "^1.2.0",
+    "lit": "^3.2.1"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/lit": "^4.3.0",
+    "@astrojs/starlight": "^0.30.2",
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@eslint/js": "^9.17.0",
+    "@eslint/json": "^0.9.0",
+    "@eslint/markdown": "^6.2.1",
+    "@floating-ui/dom": "^1.6.13",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@open-wc/testing": "^4.0.0",
+    "@playwright/test": "^1.46.1",
+    "@rollup/plugin-multi-entry": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
+    "@types/mocha": "^10.0.2",
+    "@web/dev-server-esbuild": "^1.0.2",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "cem-plugin-custom-jsdoc-tags": "^1.1.2",
+    "cem-plugin-expanded-types": "^1.3.3",
+    "concurrently": "^9.1.0",
+    "custom-element-eslint-rule-generator": "^1.0.1",
+    "custom-element-jet-brains-integration": "^1.6.2",
+    "custom-element-jsx-integration": "^1.5.3",
+    "custom-element-lazy-loader": "^1.3.1",
+    "custom-element-react-wrappers": "^1.6.8",
+    "custom-element-solidjs-integration": "^1.8.2",
+    "custom-element-svelte-integration": "^1.1.2",
+    "custom-element-vs-code-integration": "^1.4.1",
+    "custom-element-vuejs-integration": "^1.3.3",
+    "custom-elements-manifest-deprecator": "^1.1.1",
+    "custom-elements-manifest-inheritance": "^1.1.1",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-lit-a11y": "^1.1.0-next.1",
+    "eslint-plugin-require-extensions": "^0.1.3",
+    "express": "^4.21.2",
+    "glob": "^11.0.0",
+    "globals": "^15.14.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "plop": "^4.0.1",
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.10",
+    "rollup": "^4.28.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-summary": "^3.0.0",
+    "starlight-image-zoom": "^0.10.0",
+    "starlight-links-validator": "^0.14.1",
+    "tailwind-variants": "^0.3.0",
+    "tailwindcss": "^4.0.0-beta.8",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.18.2"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.format:prettier": "prettier --write"
+  },
+  "files": [
+    "cdn",
+    "eslint",
+    "dist",
+    "react",
+    "types",
+    "index.d.ts",
+    "index.js",
+    "package.json",
+    "custom-elements.json",
+    "vscode.css-custom-data.json",
+    "vscode.html-custom-data.json",
+    "web-types.json"
+  ],
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "lit-element",
+    "typescript",
+    "lit"
+  ],
+  "engines": {
+    "node": ">=20.9.0",
+    "npm": ">=9.0.0"
+  }
+}

package/react/PlusAccordion.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import { PlusAccordion as PlusAccordionElement } from "../dist/components/accordion/index.js";
+
+export type { PlusAccordionElement };
+
+export interface PlusAccordionProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the accordion is expanded */
+  expand?: boolean;
+
+  /** Whether the accordion is part of a group */
+  isGrouped?: boolean;
+
+  /** Whether the accordion is the last item in a group */
+  isLast?: boolean;
+
+  /** Whether the accordion is the first item in a group */
+  isFirst?: boolean;
+
+  /** Whether the accordion is disabled */
+  disabled?: boolean;
+
+  /** The size of the accordion */
+  size?: PlusAccordionElement["size"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Emitted when the accordion is toggled */
+  onPlusAccordionToggle?: (event: CustomEvent) => void;
+}
+
+/**
+ * Accordion component for displaying collapsible content.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-accordion-toggle** - Emitted when the accordion is toggled
+ *
+ * ### **Slots:**
+ *  - **header** - The header content of the accordion
+ * - **helper** - Optional helper text displayed next to the header
+ * - **panel** - The content that is shown when the accordion is expanded
+ *
+ * ### **CSS Parts:**
+ *  - **header** - The header container
+ * - **panel** - The panel container
+ * - **icon** - The expand/collapse icon
+ * - **helper** - The helper text container
+ */
+export const PlusAccordion: React.ForwardRefExoticComponent<PlusAccordionProps>;