@alegendstale/holly-components 0.2.8 → 0.2.10

package/dist/components/color-palette/menu/color-palette-reorder.js

@@ -1,108 +1,122 @@
-import u from "colorsea";
-import { css as m, LitElement as h, html as c } from "lit";
-import { query as b, property as d, customElement as g } from "lit/decorators.js";
-import { repeat as x } from "lit/directives/repeat.js";
-import { EventEmitter as f } from "../../../utils/EventEmitter.js";
-var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, o, s, e) => {
-  for (var r = e > 1 ? void 0 : e ? y(o, s) : o, n = t.length - 1, l; n >= 0; n--)
-    (l = t[n]) && (r = (e ? l(o, s, r) : l(r)) || r);
-  return e && r && k(o, s, r), r;
-}, i = /* @__PURE__ */ ((t) => (t.Hue = "Hue", t.Saturation = "Saturation", t.Lightness = "Lightness", t.Red = "Red", t.Green = "Green", t.Blue = "Blue", t.Alpha = "Alpha", t))(i || {});
-let a = class extends h {
-  constructor() {
-    super(...arguments), this.colors = [], this.emitter = new f();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  render() {
-    return c`
-			<menu>
-				${x(
-      Object.keys(i),
-      (t) => c`
-								<button
-									@click=${(o) => {
-        this.selectOption(t);
-      }}
-								>
-									<span>${t}</span>
-								</button>
-							`
-    )}
-			</menu>
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import colorsea from 'colorsea';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { EventEmitter } from '../../../utils/EventEmitter';
+var Reorder;
+(function (Reorder) {
+    Reorder["Hue"] = "Hue";
+    Reorder["Saturation"] = "Saturation";
+    Reorder["Lightness"] = "Lightness";
+    Reorder["Red"] = "Red";
+    Reorder["Green"] = "Green";
+    Reorder["Blue"] = "Blue";
+    Reorder["Alpha"] = "Alpha";
+})(Reorder || (Reorder = {}));
+let ColorPaletteReorder = class ColorPaletteReorder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.emitter = new EventEmitter();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emitter.clear();
+    }
+    render() {
+        return html `
+			<menu>
+				${repeat(Object.keys(Reorder), (item) => {
+            return html `
+								<button
+									@click=${(e) => {
+                this.selectOption(item);
+            }}
+								>
+									<span>${item}</span>
+								</button>
+							`;
+        })}
+			</menu>
 		`;
-  }
-  selectOption(t) {
-    const o = this.colors.map((e) => u(e));
-    let s = [];
-    switch (t) {
-      case "Hue":
-        s = o.sort((e, r) => e.hue() - r.hue()).map((e) => e.hex());
-        break;
-      case "Saturation":
-        s = o.sort((e, r) => e.saturation() - r.saturation()).map((e) => e.hex());
-        break;
-      case "Lightness":
-        s = o.sort((e, r) => e.lightness() - r.lightness()).map((e) => e.hex());
-        break;
-      case "Red":
-        s = o.sort((e, r) => e.red() - r.red()).map((e) => e.hex());
-        break;
-      case "Green":
-        s = o.sort((e, r) => e.green() - r.green()).map((e) => e.hex());
-        break;
-      case "Blue":
-        s = o.sort((e, r) => e.blue() - r.blue()).map((e) => e.hex());
-        break;
-      case "Alpha":
-        s = o.sort((e, r) => e.alpha() - r.alpha()).map((e) => e.hex());
-        break;
     }
-    this.emitter.emit("submit", s);
-  }
+    selectOption(item) {
+        // Create colorsea array
+        const csColors = this.colors.map((color) => {
+            return colorsea(color);
+        });
+        let colors = [];
+        switch (item) {
+            case Reorder.Hue:
+                colors = csColors.sort((a, b) => a.hue() - b.hue()).map((color) => color.hex());
+                break;
+            case Reorder.Saturation:
+                colors = csColors.sort((a, b) => a.saturation() - b.saturation()).map((color) => color.hex());
+                break;
+            case Reorder.Lightness:
+                colors = csColors.sort((a, b) => a.lightness() - b.lightness()).map((color) => color.hex());
+                break;
+            case Reorder.Red:
+                colors = csColors.sort((a, b) => a.red() - b.red()).map((color) => color.hex());
+                break;
+            case Reorder.Green:
+                colors = csColors.sort((a, b) => a.green() - b.green()).map((color) => color.hex());
+                break;
+            case Reorder.Blue:
+                colors = csColors.sort((a, b) => a.blue() - b.blue()).map((color) => color.hex());
+                break;
+            case Reorder.Alpha:
+                colors = csColors.sort((a, b) => a.alpha() - b.alpha()).map((color) => color.hex());
+                break;
+        }
+        this.emitter.emit('submit', colors);
+    }
 };
-a.styles = [
-  m`
-			:host {
-				display: block;
-			}
-			
-			menu {
-				display: flex;
-				flex-direction: column;
-				gap: .5rem;
-				background-color: rgb(27, 27, 27);
-				padding: .5rem;
-				border-radius: 5px;
-
-				button {
-					color: rgb(245, 245, 245);
-					background-color: transparent;
-					border: none;
-					padding: 4px 12px;
-					cursor: pointer;
-
-					&:hover {
-						background-color: rgb(75, 75, 75);
-					}
-
-					span {
-						font-size: 14px;
-					}
-				}
-			}
+ColorPaletteReorder.styles = [
+    css `
+			:host {
+				display: block;
+			}
+			
+			menu {
+				display: flex;
+				flex-direction: column;
+				gap: .5rem;
+				background-color: rgb(27, 27, 27);
+				padding: .5rem;
+				border-radius: 5px;
+
+				button {
+					color: rgb(245, 245, 245);
+					background-color: transparent;
+					border: none;
+					padding: 4px 12px;
+					cursor: pointer;
+
+					&:hover {
+						background-color: rgb(75, 75, 75);
+					}
+
+					span {
+						font-size: 14px;
+					}
+				}
+			}
 		`
 ];
-p([
-  b("absolute-container")
-], a.prototype, "absolute", 2);
-p([
-  d({ type: Array })
-], a.prototype, "colors", 2);
-a = p([
-  g("color-palette-reorder")
-], a);
-export {
-  a as ColorPaletteReorder
-};
+__decorate([
+    query('absolute-container')
+], ColorPaletteReorder.prototype, "absolute", void 0);
+__decorate([
+    property({ type: Array })
+], ColorPaletteReorder.prototype, "colors", void 0);
+ColorPaletteReorder = __decorate([
+    customElement('color-palette-reorder')
+], ColorPaletteReorder);
+export { ColorPaletteReorder };

package/dist/components/color-palette/menu/index.js

@@ -0,0 +1,2 @@
+import './color-palette-menu';
+import './color-palette-reorder';

package/dist/components/color-palette/storybook/color-palette-invalid.stories.js

@@ -0,0 +1,90 @@
+import { html } from 'lit';
+import { defaultSettings } from '../color-palette-utils';
+const meta = {
+    title: 'Color Palette/Palette/Invalid',
+    tags: ['autodocs'],
+    component: 'color-palette',
+    subcomponents: { ColorPaletteItem: 'color-palette-item' },
+    argTypes: {
+        direction: {
+            options: ['row', 'column'],
+            control: {
+                type: 'select',
+            }
+        },
+    }
+};
+export default meta;
+const Template = {
+    render: ({ colors, height, width, direction, gradient, preventHover, override, aliases }) => {
+        return html `
+			<color-palette
+				.colors=${colors}
+				height=${height || defaultSettings.height}
+				width=${width || defaultSettings.width}
+				direction=${direction || defaultSettings.direction}
+				?gradient=${gradient || defaultSettings.gradient}
+				?preventHover=${preventHover || defaultSettings.preventHover}
+				?override=${override || defaultSettings.override}
+				.aliases=${aliases}
+			>
+			</color-palette>
+		`;
+    },
+};
+export const InvalidColors = {
+    ...Template,
+    args: {
+        colors: [
+            '#444;',
+            '5'
+        ],
+    },
+};
+export const OneColorGradient = {
+    ...Template,
+    args: {
+        colors: [
+            '#444'
+        ],
+        gradient: true
+    }
+};
+export const NonOverriddenPalette = {
+    ...Template,
+    args: {
+        colors: [
+            'rgb(var(--ctp-peach))'
+        ],
+    }
+};
+export const InvalidSettings = {
+    ...Template,
+    args: {
+        colors: [
+            '#555'
+        ],
+        // @ts-expect-error
+        aliases: {}
+    }
+};
+export const InvalidColorsSettings = {
+    ...Template,
+    args: {
+        colors: [
+            '#5'
+        ],
+        // @ts-expect-error
+        aliases: {}
+    }
+};
+export const InvalidDirections = {
+    ...Template,
+    args: {
+        colors: [
+            '#555'
+        ],
+        // @ts-expect-error
+        direction: 'hello'
+    }
+};

package/dist/components/color-palette/storybook/color-palette-valid.stories.js

@@ -0,0 +1,295 @@
+import { html } from 'lit';
+import { defaultSettings, Direction } from '../color-palette-utils';
+const meta = {
+    title: 'Color Palette/Palette/Valid',
+    tags: ['autodocs'],
+    component: 'color-palette',
+    subcomponents: { ColorPaletteItem: 'color-palette-item' },
+    argTypes: {
+        direction: {
+            options: ['row', 'column'],
+            control: {
+                type: 'select',
+            }
+        },
+    }
+};
+export default meta;
+const Template = {
+    render: ({ colors, height, width, direction, gradient, preventHover, override, aliases }) => {
+        return html `
+			<color-palette
+				.colors=${colors}
+				height=${height || defaultSettings.height}
+				width=${width || defaultSettings.width}
+				direction=${direction || defaultSettings.direction}
+				?gradient=${gradient || defaultSettings.gradient}
+				?preventHover=${preventHover || defaultSettings.preventHover}
+				?override=${override || defaultSettings.override}
+				.aliases=${aliases}
+			>
+			</color-palette>
+		`;
+    },
+};
+export const Hex = {
+    ...Template,
+    args: {
+        colors: [
+            '#434',
+            '#F6F7D7'
+        ],
+    },
+};
+export const HSL = {
+    ...Template,
+    args: {
+        colors: [
+            'hsl(5, 20%, 70%);',
+            'hsl(5, 70%, 70%);'
+        ],
+    },
+};
+export const RGB = {
+    ...Template,
+    args: {
+        colors: [
+            'rgb(123, 555, 777);',
+            'rgb(122, 222, 772);'
+        ],
+    },
+};
+export const NamedColors = {
+    ...Template,
+    args: {
+        colors: [
+            'grey',
+            'pink'
+        ],
+    },
+};
+export const URLWithSettings = {
+    ...Template,
+    args: {
+        colors: [
+            'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
+        ],
+        gradient: true
+    },
+};
+export const HexHorizontalWithSettings = {
+    ...Template,
+    args: {
+        colors: [
+            '#434',
+            '#f6f7d7',
+            '#3EC1D3',
+            '#FF165D',
+            '#FF9A00',
+            '#f6f7d7'
+        ],
+        gradient: true
+    },
+};
+export const Semicolon = {
+    ...Template,
+    args: {
+        colors: [
+            '#111;',
+            '#555;',
+        ],
+    },
+};
+export const EightCharacterHex = {
+    ...Template,
+    args: {
+        colors: [
+            '#00444555',
+        ],
+    },
+};
+export const Black = {
+    ...Template,
+    args: {
+        colors: [
+            '#000',
+        ],
+    },
+};
+export const Hex_RGB_HSL = {
+    ...Template,
+    args: {
+        colors: [
+            '#667',
+            'rgb(200, 200, 100)',
+            'hsl(12, 66%, 99%)'
+        ],
+    },
+};
+export const HeightDirection = {
+    ...Template,
+    args: {
+        colors: [
+            '#434',
+            '#f6f7d7',
+            '#3EC1D3',
+            '#FF165D',
+            '#FF9A00',
+            '#f6f7d7'
+        ],
+        height: 300,
+        direction: Direction.Row
+    },
+};
+export const HorizontalGradient = {
+    ...Template,
+    args: {
+        colors: [
+            '#444',
+            '#545',
+        ],
+        gradient: true
+    },
+};
+export const VerticalGradient = {
+    ...Template,
+    args: {
+        colors: [
+            '#afc',
+            '#b31',
+        ],
+        gradient: true,
+        height: 300,
+        direction: Direction.Row
+    },
+};
+export const Aliases = {
+    ...Template,
+    args: {
+        colors: [
+            '#444',
+            '#222',
+            '#322'
+        ],
+        direction: Direction.Row,
+        aliases: [
+            'grey',
+            'black',
+            'brown'
+        ]
+    },
+};
+export const AliasesSkipColor = {
+    ...Template,
+    args: {
+        colors: [
+            'https://coolors.co/palette/606c38-283618-fefae0-dda15e-bc6c25',
+        ],
+        aliases: [
+            '',
+            'light green',
+        ]
+    },
+};
+export const Width = {
+    ...Template,
+    args: {
+        colors: [
+            '#999',
+            '#222'
+        ],
+        gradient: true,
+        height: 200,
+        direction: Direction.Column,
+        width: 400
+    },
+};
+export const PreventHover = {
+    ...Template,
+    args: {
+        colors: [
+            '#8ec178',
+            '#25136d'
+        ],
+        gradient: false,
+        direction: Direction.Column,
+        preventHover: true,
+    },
+};
+export const Override = {
+    ...Template,
+    args: {
+        colors: [
+            'var(--color-orange)',
+        ],
+        override: true,
+    },
+};
+export const RGBA_CSS_Variable = {
+    ...Template,
+    args: {
+        colors: [
+            'rgba(var(--color-green-rgb), .5)',
+        ],
+        override: true,
+    },
+};
+export const RGBSettings = {
+    ...Template,
+    args: {
+        colors: [
+            'rgb(123, 555, 777);',
+            'rgb(122, 222, 772);'
+        ],
+        gradient: true,
+    },
+};
+export const Others = {
+    ...Template,
+    args: {
+        colors: [
+            'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
+        ],
+        gradient: true,
+        direction: Direction.Column
+    },
+};
+export const WhiteBlue = {
+    ...Template,
+    args: {
+        colors: [
+            '#fff',
+            '#000fff00'
+        ],
+        gradient: true,
+    },
+};
+export const OrangeBlue = {
+    ...Template,
+    args: {
+        colors: [
+            'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
+        ],
+        gradient: true,
+    },
+};
+export const GreyGradient = {
+    ...Template,
+    args: {
+        colors: [
+            '#444',
+            '#555',
+            '#666',
+            '#777'
+        ],
+        gradient: true,
+    },
+};
+export const URL = {
+    ...Template,
+    args: {
+        colors: [
+            'https://coolors.co/2c2423-1e5f7b-839199-64abbb-88cc67-a0713e-dc6bad-bd93f9-f2647c-edcb79'
+        ],
+    }
+};

package/dist/components/color-palette/storybook/color-palette.stories.js

@@ -0,0 +1,76 @@
+import { html } from 'lit';
+import { defaultSettings, Direction } from '../color-palette-utils';
+import { pluginToPaletteSettings } from '../../../utils/basicUtils';
+const meta = {
+    title: 'Color Palette/Palette',
+    tags: ['autodocs'],
+    component: 'color-palette',
+    subcomponents: { ColorPaletteItem: 'color-palette-item' },
+    argTypes: {
+        direction: {
+            options: ['row', 'column'],
+            control: {
+                type: 'select',
+            }
+        },
+    }
+};
+export default meta;
+const colors = [
+    '#E6C47D',
+    '#DEB052',
+    '#D59C28',
+    '#AA7D20',
+    '#7F5D18'
+];
+const settings = { ...pluginToPaletteSettings(defaultSettings), aliases: ['', '', 'test', '', ''] };
+const Template = {
+    render: ({ colors, height, width, direction, gradient, preventHover, override, aliases }) => {
+        const palette = document.createElement('color-palette');
+        palette.colors = colors;
+        palette.settings = { height, width, direction, gradient, preventHover, override, aliases };
+        return html `
+			${palette}
+		`;
+    },
+};
+export const Empty = {
+    ...Template,
+    args: {
+        colors: [],
+        ...settings
+    },
+};
+export const OneItem = {
+    ...Template,
+    args: {
+        colors: [colors[0]],
+        ...settings
+    },
+};
+export const ManyItems = {
+    ...Template,
+    args: {
+        colors,
+        height: 150,
+        width: 700,
+        direction: Direction.Column,
+        gradient: false,
+        preventHover: false,
+        override: false,
+        aliases: ['', '', 'test', '', '']
+    },
+};
+export const Gradient = {
+    ...Template,
+    args: {
+        colors,
+        height: 150,
+        width: 700,
+        direction: Direction.Column,
+        gradient: true,
+        preventHover: false,
+        override: false,
+        aliases: ['', '', 'test', '', '']
+    },
+};