@greghowe79/the-lib 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/components/button/button.qwik.cjs +31 -22
  2. package/lib/components/button/button.qwik.mjs +32 -23
  3. package/lib/components/button/button.utils.qwik.cjs +29 -0
  4. package/lib/components/button/button.utils.qwik.mjs +29 -0
  5. package/lib/components/hero/hero.qwik.cjs +6 -3
  6. package/lib/components/hero/hero.qwik.mjs +6 -3
  7. package/lib-types/components/button/button.d.ts +9 -0
  8. package/lib-types/components/button/button.utils.d.ts +2 -0
  9. package/lib-types/components/hero/hero.d.ts +2 -0
  10. package/lib-types/stories/button.stories.d.ts +7 -0
  11. package/lib-types/stories/hero.stories.d.ts +3 -0
  12. package/package.json +1 -1
package/lib/components/button/button.qwik.cjs CHANGED
@@ -5,32 +5,41 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/latin-500.css");
7
7
  const loader = require("../loader/loader.qwik.cjs");
8
- const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false }) => {
8
+ const button_utils = require("./button.utils.qwik.cjs");
9
+ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
9
10
  qwik.useStylesScoped$(styles);
10
11
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
11
- return /* @__PURE__ */ jsxRuntime.jsxs("button", {
12
- id,
13
- type,
14
- class: [
15
- `button-${variant}`,
16
- `button-${size}`,
17
- disabled && "button-disabled",
18
- active && "button-active"
19
- ].filter(Boolean).join(" "),
20
- disabled,
21
- "aria-disabled": disabled,
22
- "aria-label": ariaLabel || (icon ? label : void 0),
23
- onClick$,
24
- "preventdefault:click": !!onClick$,
12
+ const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border);
13
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
25
14
  children: [
26
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
27
- class: "button__icon",
28
- "aria-hidden": "true",
29
- children: typeof icon === "function" ? icon({}, null, 0) : icon
15
+ hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
16
+ dangerouslySetInnerHTML: button_utils.generateCustomCSS(id, customColors)
30
17
  }),
31
- /* @__PURE__ */ jsxRuntime.jsx("span", {
32
- class: "button__text",
33
- children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
18
+ /* @__PURE__ */ jsxRuntime.jsxs("button", {
19
+ id,
20
+ type,
21
+ class: [
22
+ `button-${variant}`,
23
+ `button-${size}`,
24
+ disabled && "button-disabled",
25
+ active && "button-active"
26
+ ].filter(Boolean).join(" "),
27
+ disabled,
28
+ "aria-disabled": disabled,
29
+ "aria-label": ariaLabel || (icon ? label : void 0),
30
+ onClick$,
31
+ "preventdefault:click": !!onClick$,
32
+ children: [
33
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
34
+ class: "button__icon",
35
+ "aria-hidden": "true",
36
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
37
+ }),
38
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
39
+ class: "button__text",
40
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
41
+ })
42
+ ]
34
43
  })
35
44
  ]
36
45
  });
package/lib/components/button/button.qwik.mjs CHANGED
@@ -1,34 +1,43 @@
1
- import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
1
+ import { jsxs, Fragment, jsx } from "@builder.io/qwik/jsx-runtime";
2
2
  import { component$, useStylesScoped$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/latin-500.css";
5
5
  import { Loader } from "../loader/loader.qwik.mjs";
6
- const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false }) => {
6
+ import { generateCustomCSS } from "./button.utils.qwik.mjs";
7
+ const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
7
8
  useStylesScoped$(styles);
8
9
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
9
- return /* @__PURE__ */ jsxs("button", {
10
- id,
11
- type,
12
- class: [
13
- `button-${variant}`,
14
- `button-${size}`,
15
- disabled && "button-disabled",
16
- active && "button-active"
17
- ].filter(Boolean).join(" "),
18
- disabled,
19
- "aria-disabled": disabled,
20
- "aria-label": ariaLabel || (icon ? label : void 0),
21
- onClick$,
22
- "preventdefault:click": !!onClick$,
10
+ const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border);
11
+ return /* @__PURE__ */ jsxs(Fragment, {
23
12
  children: [
24
- icon && /* @__PURE__ */ jsx("span", {
25
- class: "button__icon",
26
- "aria-hidden": "true",
27
- children: typeof icon === "function" ? icon({}, null, 0) : icon
13
+ hasCustomStyles && /* @__PURE__ */ jsx("style", {
14
+ dangerouslySetInnerHTML: generateCustomCSS(id, customColors)
28
15
  }),
29
- /* @__PURE__ */ jsx("span", {
30
- class: "button__text",
31
- children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
16
+ /* @__PURE__ */ jsxs("button", {
17
+ id,
18
+ type,
19
+ class: [
20
+ `button-${variant}`,
21
+ `button-${size}`,
22
+ disabled && "button-disabled",
23
+ active && "button-active"
24
+ ].filter(Boolean).join(" "),
25
+ disabled,
26
+ "aria-disabled": disabled,
27
+ "aria-label": ariaLabel || (icon ? label : void 0),
28
+ onClick$,
29
+ "preventdefault:click": !!onClick$,
30
+ children: [
31
+ icon && /* @__PURE__ */ jsx("span", {
32
+ class: "button__icon",
33
+ "aria-hidden": "true",
34
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
35
+ }),
36
+ /* @__PURE__ */ jsx("span", {
37
+ class: "button__text",
38
+ children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
39
+ })
40
+ ]
32
41
  })
33
42
  ]
34
43
  });
package/lib/components/button/button.utils.qwik.cjs ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ function generateCustomCSS(id, colors) {
4
+ const isGradient = (value) => value?.includes("gradient");
5
+ const gradientFix = `
6
+ background-origin: border-box !important;
7
+ background-clip: padding-box !important;
8
+ `;
9
+ const baseStyles = [
10
+ colors.bg && `background: ${colors.bg} !important;`,
11
+ colors.bg && isGradient(colors.bg) && gradientFix,
12
+ colors.text && `color: ${colors.text} !important;`,
13
+ colors.border && `border: 2px solid ${colors.border} !important;`
14
+ ].filter(Boolean).join("\n");
15
+ const hoverBg = colors.hoverBg || colors.bg;
16
+ const hoverText = colors.hoverText || colors.text;
17
+ const hoverBorder = colors.hoverBorder || colors.border;
18
+ const hoverStyles = [
19
+ hoverBg && `background: ${hoverBg} !important;`,
20
+ hoverBg && isGradient(hoverBg) && gradientFix,
21
+ hoverText && `color: ${hoverText} !important;`,
22
+ hoverBorder && `border: 2px solid ${hoverBorder} !important;`
23
+ ].filter(Boolean).join("\n");
24
+ return `
25
+ #${id} { ${baseStyles} }
26
+ #${id}:not(:disabled):hover { ${hoverStyles} }
27
+ `;
28
+ }
29
+ exports.generateCustomCSS = generateCustomCSS;
package/lib/components/button/button.utils.qwik.mjs ADDED
@@ -0,0 +1,29 @@
1
+ function generateCustomCSS(id, colors) {
2
+ const isGradient = (value) => value?.includes("gradient");
3
+ const gradientFix = `
4
+ background-origin: border-box !important;
5
+ background-clip: padding-box !important;
6
+ `;
7
+ const baseStyles = [
8
+ colors.bg && `background: ${colors.bg} !important;`,
9
+ colors.bg && isGradient(colors.bg) && gradientFix,
10
+ colors.text && `color: ${colors.text} !important;`,
11
+ colors.border && `border: 2px solid ${colors.border} !important;`
12
+ ].filter(Boolean).join("\n");
13
+ const hoverBg = colors.hoverBg || colors.bg;
14
+ const hoverText = colors.hoverText || colors.text;
15
+ const hoverBorder = colors.hoverBorder || colors.border;
16
+ const hoverStyles = [
17
+ hoverBg && `background: ${hoverBg} !important;`,
18
+ hoverBg && isGradient(hoverBg) && gradientFix,
19
+ hoverText && `color: ${hoverText} !important;`,
20
+ hoverBorder && `border: 2px solid ${hoverBorder} !important;`
21
+ ].filter(Boolean).join("\n");
22
+ return `
23
+ #${id} { ${baseStyles} }
24
+ #${id}:not(:disabled):hover { ${hoverStyles} }
25
+ `;
26
+ }
27
+ export {
28
+ generateCustomCSS
29
+ };
package/lib/components/hero/hero.qwik.cjs CHANGED
@@ -5,7 +5,7 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/latin-500.css");
7
7
  require("@fontsource/roboto-condensed/latin-400.css");
8
- const Hero = qwik.component$(({ title, content }) => {
8
+ const Hero = qwik.component$(({ title, content, highlightText, highlightColor = "#0095ae" }) => {
9
9
  qwik.useStylesScoped$(styles);
10
10
  return /* @__PURE__ */ jsxRuntime.jsx("div", {
11
11
  class: "hero",
@@ -28,8 +28,11 @@ const Hero = qwik.component$(({ title, content }) => {
28
28
  children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
29
29
  class: "title",
30
30
  children: [
31
- /* @__PURE__ */ jsxRuntime.jsx("span", {
32
- children: "Dummy text"
31
+ highlightText && /* @__PURE__ */ jsxRuntime.jsx("span", {
32
+ style: {
33
+ color: highlightColor
34
+ },
35
+ children: highlightText
33
36
  }),
34
37
  " ",
35
38
  title
package/lib/components/hero/hero.qwik.mjs CHANGED
@@ -3,7 +3,7 @@ import { component$, useStylesScoped$, Slot } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/latin-500.css";
5
5
  import "@fontsource/roboto-condensed/latin-400.css";
6
- const Hero = component$(({ title, content }) => {
6
+ const Hero = component$(({ title, content, highlightText, highlightColor = "#0095ae" }) => {
7
7
  useStylesScoped$(styles);
8
8
  return /* @__PURE__ */ jsx("div", {
9
9
  class: "hero",
@@ -26,8 +26,11 @@ const Hero = component$(({ title, content }) => {
26
26
  children: /* @__PURE__ */ jsxs("span", {
27
27
  class: "title",
28
28
  children: [
29
- /* @__PURE__ */ jsx("span", {
30
- children: "Dummy text"
29
+ highlightText && /* @__PURE__ */ jsx("span", {
30
+ style: {
31
+ color: highlightColor
32
+ },
33
+ children: highlightText
31
34
  }),
32
35
  " ",
33
36
  title
package/lib-types/components/button/button.d.ts CHANGED
@@ -3,6 +3,14 @@ import '@fontsource/roboto-condensed/latin-500.css';
3
3
  export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'icon' | 'tertiary' | 'tab';
4
4
  export type ButtonType = 'button' | 'submit' | 'reset';
5
5
  export type ButtonSize = 'sm' | 'md' | 'lg';
6
+ export interface CustomColors {
7
+ bg?: string;
8
+ hoverBg?: string;
9
+ text?: string;
10
+ hoverText?: string;
11
+ border?: string;
12
+ hoverBorder?: string;
13
+ }
6
14
  export interface ButtonProps {
7
15
  id: string;
8
16
  label?: string;
@@ -15,5 +23,6 @@ export interface ButtonProps {
15
23
  onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
16
24
  isLoading?: boolean | Signal<boolean>;
17
25
  active?: boolean;
26
+ customColors?: CustomColors;
18
27
  }
19
28
  export declare const Button: Component<ButtonProps>;
package/lib-types/components/button/button.utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { CustomColors } from './button';
2
+ export declare function generateCustomCSS(id: string, colors: CustomColors): string;
package/lib-types/components/hero/hero.d.ts CHANGED
@@ -3,5 +3,7 @@ import '@fontsource/roboto-condensed/latin-400.css';
3
3
  export interface HeroProps {
4
4
  title?: string;
5
5
  content?: string;
6
+ highlightText?: string;
7
+ highlightColor?: string;
6
8
  }
7
9
  export declare const Hero: import("@builder.io/qwik").Component<HeroProps>;
package/lib-types/stories/button.stories.d.ts CHANGED
@@ -6,3 +6,10 @@ type Story = StoryObj<ButtonProps>;
6
6
  export declare const Primary: Story;
7
7
  export declare const WithIcon: Story;
8
8
  export declare const WithLoader: Story;
9
+ export declare const CustomSolidColor: Story;
10
+ export declare const CustomGradient: Story;
11
+ export declare const CustomOutlined: Story;
12
+ export declare const CustomSuccess: Story;
13
+ export declare const CustomWarning: Story;
14
+ export declare const CustomWithIcon: Story;
15
+ export declare const CustomWithBorder: Story;
package/lib-types/stories/hero.stories.d.ts CHANGED
@@ -4,3 +4,6 @@ declare const meta: Meta<HeroProps>;
4
4
  export default meta;
5
5
  type Story = StoryObj<HeroProps>;
6
6
  export declare const HeroWithText: Story;
7
+ export declare const HeroWithHighlight: Story;
8
+ export declare const HeroWithGradientHighlight: Story;
9
+ export declare const HeroNoHighlight: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",