@luzmo/lucero 0.0.1

package/dist/package.json

@@ -0,0 +1,191 @@
+{
+  "name": "@luzmo/lucero",
+  "version": "0.0.1",
+  "homepage": "https://luzmo.com",
+  "description": "Lucero - The design system for Luzmo",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./accordion": {
+      "import": "./lib/accordion/index.js",
+      "require": "./lib/accordion/index.cjs"
+    },
+    "./action-bar": {
+      "import": "./lib/action-bar/index.js",
+      "require": "./lib/action-bar/index.cjs"
+    },
+    "./action-button": {
+      "import": "./lib/action-button/index.js",
+      "require": "./lib/action-button/index.cjs"
+    },
+    "./action-group": {
+      "import": "./lib/action-group/index.js",
+      "require": "./lib/action-group/index.cjs"
+    },
+    "./action-menu": {
+      "import": "./lib/action-menu/index.js",
+      "require": "./lib/action-menu/index.cjs"
+    },
+    "./avatar": {
+      "import": "./lib/avatar/index.js",
+      "require": "./lib/avatar/index.cjs"
+    },
+    "./button": {
+      "import": "./lib/button/index.js",
+      "require": "./lib/button/index.cjs"
+    },
+    "./button-group": {
+      "import": "./lib/button-group/index.js",
+      "require": "./lib/button-group/index.cjs"
+    },
+    "./checkbox": {
+      "import": "./lib/checkbox/index.js",
+      "require": "./lib/checkbox/index.cjs"
+    },
+    "./color-picker": {
+      "import": "./lib/color-picker/index.js",
+      "require": "./lib/color-picker/index.cjs"
+    },
+    "./divider": {
+      "import": "./lib/divider/index.js",
+      "require": "./lib/divider/index.cjs"
+    },
+    "./field-group": {
+      "import": "./lib/field-group/index.js",
+      "require": "./lib/field-group/index.cjs"
+    },
+    "./field-label": {
+      "import": "./lib/field-label/index.js",
+      "require": "./lib/field-label/index.cjs"
+    },
+    "./icon": {
+      "import": "./lib/icon/index.js",
+      "require": "./lib/icon/index.cjs"
+    },
+    "./infield-button": {
+      "import": "./lib/infield-button/index.js",
+      "require": "./lib/infield-button/index.cjs"
+    },
+    "./label": {
+      "import": "./lib/label/index.js",
+      "require": "./lib/label/index.cjs"
+    },
+    "./legend-position": {
+      "import": "./lib/legend-position/index.js",
+      "require": "./lib/legend-position/index.cjs"
+    },
+    "./menu": {
+      "import": "./lib/menu/index.js",
+      "require": "./lib/menu/index.cjs"
+    },
+    "./multi-language-field": {
+      "import": "./lib/multi-language-field/index.js",
+      "require": "./lib/multi-language-field/index.cjs"
+    },
+    "./number-field": {
+      "import": "./lib/number-field/index.js",
+      "require": "./lib/number-field/index.cjs"
+    },
+    "./overlay": {
+      "import": "./lib/overlay/index.js",
+      "require": "./lib/overlay/index.cjs"
+    },
+    "./picker": {
+      "import": "./lib/picker/index.js",
+      "require": "./lib/picker/index.cjs"
+    },
+    "./popover": {
+      "import": "./lib/popover/index.js",
+      "require": "./lib/popover/index.cjs"
+    },
+    "./progress-circle": {
+      "import": "./lib/progress-circle/index.js",
+      "require": "./lib/progress-circle/index.cjs"
+    },
+    "./radio": {
+      "import": "./lib/radio/index.js",
+      "require": "./lib/radio/index.cjs"
+    },
+    "./search": {
+      "import": "./lib/search/index.js",
+      "require": "./lib/search/index.cjs"
+    },
+    "./slider": {
+      "import": "./lib/slider/index.js",
+      "require": "./lib/slider/index.cjs"
+    },
+    "./swatch": {
+      "import": "./lib/swatch/index.js",
+      "require": "./lib/swatch/index.cjs"
+    },
+    "./switch": {
+      "import": "./lib/switch/index.js",
+      "require": "./lib/switch/index.cjs"
+    },
+    "./tags": {
+      "import": "./lib/tags/index.js",
+      "require": "./lib/tags/index.cjs"
+    },
+    "./text-field": {
+      "import": "./lib/text-field/index.js",
+      "require": "./lib/text-field/index.cjs"
+    },
+    "./toast": {
+      "import": "./lib/toast/index.js",
+      "require": "./lib/toast/index.cjs"
+    },
+    "./tooltip": {
+      "import": "./lib/tooltip/index.js",
+      "require": "./lib/tooltip/index.cjs"
+    },
+    "./unit-input": {
+      "import": "./lib/unit-input/index.js",
+      "require": "./lib/unit-input/index.cjs"
+    },
+    "./color-area": {
+      "import": "./lib/color-area/index.js",
+      "require": "./lib/color-area/index.cjs"
+    },
+    "./color-field": {
+      "import": "./lib/color-field/index.js",
+      "require": "./lib/color-field/index.cjs"
+    },
+    "./color-handle": {
+      "import": "./lib/color-handle/index.js",
+      "require": "./lib/color-handle/index.cjs"
+    },
+    "./color-loupe": {
+      "import": "./lib/color-loupe/index.js",
+      "require": "./lib/color-loupe/index.cjs"
+    },
+    "./color-menu": {
+      "import": "./lib/color-menu/index.js",
+      "require": "./lib/color-menu/index.cjs"
+    },
+    "./color-slider": {
+      "import": "./lib/color-slider/index.js",
+      "require": "./lib/color-slider/index.cjs"
+    }
+  },
+  "keywords": [
+    "Luzmo",
+    "design system",
+    "components",
+    "web components",
+    "lucero",
+    "analytics"
+  ],
+  "author": "Luzmo",
+  "publishConfig": {
+    "access": "restricted"
+  }
+}

package/eslint.config.js

@@ -0,0 +1,314 @@
+import importPlugin from 'eslint-plugin-import';
+import jsdocPlugin from 'eslint-plugin-jsdoc';
+import litPlugin from 'eslint-plugin-lit';
+import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
+import pluginUnicorn from 'eslint-plugin-unicorn';
+import wcPlugin from 'eslint-plugin-wc';
+import tseslint from 'typescript-eslint';
+
+const coreRules = {
+  'no-useless-constructor': 'off',
+  'arrow-body-style': 'error',
+  // region Layout & Formatting
+  'arrow-parens': ['off', 'always'],
+  'arrow-spacing': 'error',
+  'no-confusing-arrow': 'error',
+  'no-duplicate-imports': 'error',
+  // endregion
+  'brace-style': ['error', 'stroustrup'],
+  'space-before-blocks': ['error', 'always'],
+  'keyword-spacing': ['error', { after: true }],
+  'comma-dangle': 'warn',
+  'comma-spacing': 'error',
+  'key-spacing': 'error',
+  'space-in-parens': 'error',
+  complexity: 'off',
+  curly: 'error',
+  quotes: [2, 'single', { avoidEscape: true }],
+  'object-curly-spacing': ['error', 'always'],
+  'eol-last': 'error',
+  eqeqeq: ['error', 'smart'],
+  'guard-for-in': 'error',
+  'id-denylist': [
+    'error',
+    'any',
+    'Boolean',
+    'boolean',
+    'Undefined',
+    'undefined'
+  ],
+  'id-match': 'error',
+  'max-classes-per-file': 'off',
+  'max-len': [
+    'error',
+    {
+      code: 240,
+      ignoreStrings: true,
+      ignoreComments: true,
+      ignoreTemplateLiterals: true
+    }
+  ],
+  'new-parens': 'error',
+  'no-alert': 'error',
+  'no-bitwise': 'off',
+  'no-eval': 'error',
+  'no-caller': 'error',
+  'no-console': [
+    'error',
+    {
+      allow: ['error', 'warn']
+    }
+  ],
+  'no-empty': [
+    'error',
+    {
+      allowEmptyCatch: true
+    }
+  ],
+  'no-else-return': 'error',
+  'no-extra-bind': 'error',
+  'no-extra-label': 'error',
+  'no-lone-blocks': 'error',
+  'no-multi-spaces': ['error', { ignoreEOLComments: true }],
+  'no-multiple-empty-lines': [
+    'error',
+    {
+      max: 1
+    }
+  ],
+  'no-new': 'error',
+  'no-new-func': 'error',
+  'no-new-wrappers': 'error',
+  'no-sequences': 'error',
+  'no-throw-literal': 'error',
+  'no-trailing-spaces': 'error',
+  'no-undef-init': 'error',
+  'no-underscore-dangle': 'off',
+  'no-useless-call': 'error',
+  'no-useless-computed-key': 'error',
+  'no-useless-escape': 'off',
+  'no-useless-rename': 'error',
+  'no-proto': 'error',
+  'no-script-url': 'error',
+  'no-var': 'error',
+  'object-shorthand': 'error',
+  'one-var': ['error', 'never'],
+  'operator-linebreak': ['error', 'before'],
+  'padded-blocks': ['error', 'never'],
+  'prefer-const': 'error',
+  'prefer-rest-params': 'error',
+  'prefer-spread': 'error',
+  'rest-spread-spacing': ['error', 'never'],
+  'symbol-description': 'error',
+  'template-curly-spacing': 'error',
+  'quote-props': ['error', 'as-needed'],
+  radix: 'error',
+  'require-await': 'error',
+  'spaced-comment': [
+    'error',
+    'always',
+    {
+      markers: ['/']
+    }
+  ],
+  'wrap-iife': 'error',
+  yoda: 'error'
+};
+
+const tseslintRules = {
+  '@typescript-eslint/no-useless-constructor': 'error',
+  '@typescript-eslint/explicit-function-return-type': 'off',
+  '@typescript-eslint/no-this-alias': 'off',
+  '@typescript-eslint/no-unsafe-argument': 'off',
+  '@typescript-eslint/no-unsafe-member-access': 'off',
+  '@typescript-eslint/no-unsafe-call': 'off',
+  '@typescript-eslint/no-unsafe-assignment': 'off',
+  '@typescript-eslint/no-unsafe-return': 'off',
+  '@typescript-eslint/no-floating-promises': 'off',
+  '@typescript-eslint/no-explicit-any': 'off',
+  '@typescript-eslint/no-duplicate-type-constituents': 'off',
+  '@typescript-eslint/no-redundant-type-constituents': 'off', // TODO: olegpetriienko | 09/19/2023 | Delete this overriding and fix the ESLint errors
+  '@typescript-eslint/explicit-module-boundary-types': 'off',
+  '@typescript-eslint/restrict-plus-operands': 'off',
+  '@typescript-eslint/no-misused-promises': 'off',
+  '@typescript-eslint/restrict-template-expressions': [
+    'error',
+    {
+      allowAny: true
+    }
+  ],
+  '@typescript-eslint/array-type': [
+    'error',
+    {
+      default: 'array'
+    }
+  ],
+  '@typescript-eslint/consistent-type-assertions': 'error',
+  '@typescript-eslint/dot-notation': 'error',
+  '@typescript-eslint/explicit-member-accessibility': [
+    'off',
+    {
+      accessibility: 'explicit'
+    }
+  ],
+  '@typescript-eslint/member-ordering': 'off',
+  '@typescript-eslint/naming-convention': [
+    'warn',
+    {
+      selector: 'variableLike',
+      format: ['camelCase', 'snake_case'] // We allow snake_case for variables as there are some from the BE in such format
+    },
+    {
+      selector: 'typeLike',
+      format: ['PascalCase']
+    },
+    {
+      selector: 'enumMember',
+      format: ['PascalCase', 'snake_case'] // We allow snake_case for variables as there are some from the BE in such format
+    }
+  ],
+  '@typescript-eslint/no-empty-function': 'off',
+  '@typescript-eslint/no-inferrable-types': [
+    'error',
+    {
+      ignoreParameters: true
+    }
+  ],
+  '@typescript-eslint/no-parameter-properties': 'off',
+  '@typescript-eslint/no-shadow': [
+    'error',
+    {
+      hoist: 'all'
+    }
+  ],
+  '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }],
+  '@typescript-eslint/no-use-before-define': 'error',
+  '@typescript-eslint/no-empty-interface': [
+    'error',
+    { allowSingleExtends: true }
+  ],
+  '@typescript-eslint/no-var-requires': 'error',
+  '@typescript-eslint/prefer-for-of': 'warn',
+  '@typescript-eslint/prefer-function-type': 'error',
+  '@typescript-eslint/prefer-includes': 'error',
+  '@typescript-eslint/prefer-string-starts-ends-with': 'error',
+  '@typescript-eslint/triple-slash-reference': [
+    'error',
+    {
+      path: 'always',
+      types: 'prefer-import',
+      lib: 'always'
+    }
+  ],
+  '@typescript-eslint/unified-signatures': 'error',
+  '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+  '@typescript-eslint/no-deprecated': 'error',
+  '@typescript-eslint/no-empty-object-type': 'error'
+};
+
+const unicornRules = {
+  'unicorn/no-nested-ternary': 'off',
+  'unicorn/no-array-reduce': 'off',
+  'unicorn/no-array-for-each': 'off',
+  'unicorn/prefer-code-point': 'off',
+  'unicorn/prefer-event-target': 'off',
+  'unicorn/prefer-global-this': 'off',
+  'unicorn/no-array-method-this-argument': 'off',
+  'unicorn/empty-brace-spaces': 'off',
+  'unicorn/no-object-as-default-parameter': 'off',
+  'unicorn/no-null': 'off',
+  'unicorn/no-this-alias': 'off',
+  'unicorn/no-this-assignment': 'off',
+  'unicorn/prefer-top-level-await': 'off',
+  'unicorn/numeric-separators-style': [
+    'error',
+    {
+      onlyIfContainsSeparator: true
+    }
+  ],
+  'unicorn/prefer-switch': 'off',
+  'unicorn/prevent-abbreviations': 'off',
+  'unicorn/consistent-function-scoping': [
+    'error',
+    {
+      checkArrowFunctions: false
+    }
+  ]
+};
+
+const importRules = {
+  'import/no-deprecated': 'warn',
+  'import/order': 'error'
+};
+
+const jsdocRules = {
+  'jsdoc/check-alignment': 'error',
+  'jsdoc/check-indentation': 'error',
+  'jsdoc/no-types': 'error'
+};
+
+const litRules = {
+  'lit/no-invalid-html': 'error',
+  'lit/no-value-attribute': 'error',
+  'lit/attribute-value-entities': 'error',
+  'lit/binding-positions': 'error',
+  'lit/no-invalid-escape-sequences': 'error',
+  'lit/no-legacy-template-syntax': 'error',
+  'lit/no-private-properties': 'error',
+  'lit/no-template-arrow': 'warn',
+  'lit/no-template-map': 'warn',
+  'lit/no-useless-template-literals': 'error',
+  'lit/quoted-expressions': 'error',
+  'lit/value-after-constraints': 'error'
+};
+
+const wcRules = {
+  // Web Components rules
+  'wc/guard-super-call': 'error',
+  'wc/no-constructor-params': 'error',
+  'wc/no-typos': 'error'
+};
+
+export default tseslint.config(
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+    plugins: {
+      lit: litPlugin,
+      wc: wcPlugin,
+      jsdoc: jsdocPlugin,
+      import: importPlugin
+    },
+    languageOptions: {
+      ecmaVersion: 2021,
+      sourceType: 'module',
+      parser: tseslint.parser,
+      parserOptions: {
+        project: './tsconfig.json'
+      }
+    },
+    rules: {
+      ...coreRules,
+      ...importRules,
+      ...jsdocRules,
+      ...litRules,
+      ...wcRules,
+      ...tseslintRules
+    }
+  },
+  // region Unicorn configs
+  pluginUnicorn.configs['flat/recommended'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+    rules: {
+      ...unicornRules
+    }
+  },
+  {
+    files: ['**/*.html'],
+    rules: {
+      'unicorn/no-empty-file': 'off' // Had to added this rule as it was failing on the template files
+    }
+  },
+  eslintPluginPrettier
+);

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@luzmo/lucero",
+  "version": "0.0.1",
+  "author": "Luzmo",
+  "description": "Lucero - The design system for Luzmo",
+  "homepage": "https://luzmo.com",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "build": "vite build --config vite.config.component.ts --mode=production && npm run cem",
+    "build:dev": "vite build --config vite.config.component.ts --mode=development --watch",
+    "dev": "npm run build:dev",
+    "cem": "custom-elements-manifest analyze",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint 'src/**/*.{js,ts}'",
+    "lint:fix": "eslint 'src/**/*.{js,ts}' --fix",
+    "release": "npm version patch",
+    "publish": "npm run release && npm run build && (cd dist && npm publish); exit_code=$?; cd ..; exit $exit_code",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "web-test-runner src/**/tests/**/*.test.ts --node-resolve --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner src/**/tests/**/*.test.ts --node-resolve --playwright --browsers chromium firefox webkit --watch"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
+    "@ctrl/tinycolor": "^4.1.0",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@floating-ui/dom": "^1.6.12",
+    "@internationalized/number": "^3.6.0",
+    "@lit-labs/observers": "^2.0.4",
+    "@open-wc/testing": "^4.0.0",
+    "@playwright/test": "^1.49.1",
+    "@remcovaes/web-test-runner-vite-plugin": "^1.2.2",
+    "@storybook/addon-a11y": "^8.5.7",
+    "@storybook/addon-essentials": "^8.5.7",
+    "@storybook/addon-themes": "^8.5.7",
+    "@storybook/blocks": "^8.5.7",
+    "@storybook/builder-vite": "^8.5.7",
+    "@storybook/test": "^8.5.7",
+    "@storybook/theming": "^8.5.7",
+    "@storybook/web-components": "^8.5.7",
+    "@storybook/web-components-vite": "^8.5.7",
+    "@types/chai": "^5.0.1",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.13.4",
+    "@types/sinon": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "@web/test-runner-visual-regression": "^0.10.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "eslint-plugin-wc": "^2.2.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.2.0",
+    "magic-string": "^0.30.17",
+    "nouislider": "^15.8.1",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "sass": "^1.69.5",
+    "sinon": "^19.0.2",
+    "storybook": "^8.5.7",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.17.0",
+    "vite": "^6.0.6",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-cem": "^0.8.1",
+    "vite-plugin-dts": "^4.4.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "customElements": "dist/custom-elements.json",
+  "peerDependencies": {
+    "lit": "^3.2.1",
+    "@luzmo/icons": "^0.0.2"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    }
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ]
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});