@greghowe79/the-lib 0.0.1

package/README.md

@@ -0,0 +1,47 @@
+# Qwik Library ⚡️
+
+- [Qwik Docs](https://qwik.dev/)
+- [Discord](https://qwik.dev/chat)
+- [Qwik on GitHub](https://github.com/QwikDev/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+- [Partytown](https://partytown.builder.io/)
+- [Mitosis](https://github.com/BuilderIO/mitosis)
+- [Builder.io](https://www.builder.io/)
+
+---
+
+## Project Structure
+
+Inside your project, you'll see the following directories and files:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── index.ts
+```
+
+- `src/components`: Recommended directory for components.
+
+- `index.ts`: The entry point of your component library, make sure all the public components are exported from this file.
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). For Qwik during development, the `dev` command will also server-side render (SSR) the output. The client-side development modules are loaded by the browser.
+
+```
+npm run dev
+```
+
+> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
+
+## Production
+
+The production build should generate the production build of your component library in (./lib) and the typescript type definitions in (./lib-types).
+
+```
+npm run build
+```

package/lib/components/counter/counter.qwik.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const Counter = qwik.component$(() => {
+  const count = qwik.useSignal(0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", {
+        children: [
+          "Count: ",
+          count.value
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("button", {
+          onClick$: () => count.value++,
+          children: "Increment"
+        })
+      })
+    ]
+  });
+});
+exports.Counter = Counter;

package/lib/components/counter/counter.qwik.mjs

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal } from "@builder.io/qwik";
+const Counter = component$(() => {
+  const count = useSignal(0);
+  return /* @__PURE__ */ jsxs("div", {
+    children: [
+      /* @__PURE__ */ jsxs("p", {
+        children: [
+          "Count: ",
+          count.value
+        ]
+      }),
+      /* @__PURE__ */ jsx("p", {
+        children: /* @__PURE__ */ jsx("button", {
+          onClick$: () => count.value++,
+          children: "Increment"
+        })
+      })
+    ]
+  });
+});
+export {
+  Counter
+};

package/lib/components/logo/logo.qwik.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const Logo = qwik.component$(() => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    children: /* @__PURE__ */ jsxRuntime.jsx("a", {
+      href: "https://qwik.dev/",
+      children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+        alt: "Qwik Logo",
+        width: 400,
+        height: 147,
+        src: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
+      })
+    })
+  });
+});
+exports.Logo = Logo;

package/lib/components/logo/logo.qwik.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+const Logo = component$(() => {
+  return /* @__PURE__ */ jsx("div", {
+    children: /* @__PURE__ */ jsx("a", {
+      href: "https://qwik.dev/",
+      children: /* @__PURE__ */ jsx("img", {
+        alt: "Qwik Logo",
+        width: 400,
+        height: 147,
+        src: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
+      })
+    })
+  });
+});
+export {
+  Logo
+};

package/lib/index.qwik.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const logo = require("./components/logo/logo.qwik.cjs");
+const counter = require("./components/counter/counter.qwik.cjs");
+exports.Logo = logo.Logo;
+exports.Counter = counter.Counter;

package/lib/index.qwik.mjs

@@ -0,0 +1,6 @@
+import { Logo } from "./components/logo/logo.qwik.mjs";
+import { Counter } from "./components/counter/counter.qwik.mjs";
+export {
+  Counter,
+  Logo
+};

package/lib-types/components/button/button.d.ts

@@ -0,0 +1,16 @@
+import { JSXNode, QRL } from '@builder.io/qwik';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps {
+    id: string;
+    label: string;
+    variant?: ButtonVariant;
+    icon?: JSXNode;
+    disabled?: boolean;
+    ariaLabel?: string;
+    type?: ButtonType;
+    size?: ButtonSize;
+    onClick$?: QRL<() => void>;
+}
+export declare const Button: import("@builder.io/qwik").Component<ButtonProps>;

package/lib-types/components/button/styles.css.d.ts

@@ -0,0 +1,3 @@
+export declare const buttonVariants: Record<"primary" | "secondary" | "danger", string>;
+export declare const buttonSizeVariants: Record<"sm" | "md" | "lg", string>;
+export declare const disabledStyle: string;

package/lib-types/components/counter/counter.d.ts

@@ -0,0 +1 @@
+export declare const Counter: import("@builder.io/qwik").Component<unknown>;

package/lib-types/components/logo/logo.d.ts

@@ -0,0 +1 @@
+export declare const Logo: import("@builder.io/qwik").Component<unknown>;

package/lib-types/entry.dev.d.ts

@@ -0,0 +1,2 @@
+import { type RenderOptions } from "@builder.io/qwik";
+export default function (opts: RenderOptions): Promise<import("@builder.io/qwik").RenderResult>;

package/lib-types/entry.ssr.d.ts

@@ -0,0 +1,14 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { type RenderToStreamOptions } from "@builder.io/qwik/server";
+export default function (opts: RenderToStreamOptions): Promise<import("@builder.io/qwik/server").RenderToStreamResult>;

package/lib-types/index.d.ts

@@ -0,0 +1,2 @@
+export { Logo } from "./components/logo/logo";
+export { Counter } from "./components/counter/counter";

package/lib-types/root.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@builder.io/qwik").JSXOutput;
+export default _default;

package/lib-types/routes/styled-flower/flower.css.d.ts

@@ -0,0 +1,7 @@
+import { styled } from 'styled-vanilla-extract/qwik';
+export declare const header: string;
+export declare const pride: string;
+export declare const odd: string;
+export declare const Host: ReturnType<typeof styled.div>;
+export declare const Range: ReturnType<typeof styled.input>;
+export declare const Square: ReturnType<typeof styled.div>;

package/lib-types/routes/styled-flower/index.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from "@builder.io/qwik";
+import { DocumentHead } from "@builder.io/qwik-city";
+import { Range } from "./flower.css";
+type StoredInputProps<T, Cmp extends FunctionComponent, Name extends string = "value"> = Parameters<Cmp>[0] & {
+    store: {
+        [value in Name]?: T;
+    };
+    name?: Name;
+};
+export declare const RangeInput: <Name extends string = "value">({ store, name, ...props }: StoredInputProps<number, typeof Range, Name>) => import("@builder.io/qwik").JSXOutput;
+declare const _default: import("@builder.io/qwik").Component<unknown>;
+export default _default;
+export declare const head: DocumentHead;

package/lib-types/stories/button.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+import { type ButtonProps } from '../components/button/button';
+declare const meta: Meta<ButtonProps>;
+export default meta;
+type Story = StoryObj<ButtonProps>;
+export declare const Primary: Story;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@greghowe79/the-lib",
+  "version": "0.0.1",
+  "description": "Collection of fast components for Qwik",
+  "main": "./lib/index.qwik.mjs",
+  "qwik": "./lib/index.qwik.mjs",
+  "types": "./lib-types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.qwik.mjs",
+      "require": "./lib/index.qwik.cjs",
+      "types": "./lib-types/index.d.ts"
+    }
+  },
+  "files": [
+    "lib",
+    "lib-types"
+  ],
+  "engines": {
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+  },
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build-storybook": "storybook build",
+    "build.lib": "vite build --mode lib",
+    "build.types": "tsc --emitDeclarationOnly",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "np",
+    "start": "vite --open --mode ssr",
+    "storybook": "storybook dev -p 6006",
+    "test": "echo \"No test specified\" && exit 0",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "1.13.0",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/builder-vite": "^8.2.8",
+    "@storybook/html": "^8.2.8",
+    "@storybook/html-vite": "^8.2.8",
+    "@types/eslint": "8.56.10",
+    "@types/node": "20.14.11",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/parser": "7.16.1",
+    "@vanilla-extract/css": "^1.12.0",
+    "eslint": "8.57.0",
+    "eslint-plugin-qwik": "1.13.0",
+    "np": "^8.0.4",
+    "prettier": "3.3.3",
+    "storybook": "^8.2.8",
+    "storybook-framework-qwik": "^0.4.0",
+    "styled-vanilla-extract": "^0.5.4",
+    "typescript": "5.4.5",
+    "undici": "*",
+    "vite": "5.3.5",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "dependencies": {
+    "@vanilla-extract/vite-plugin": "^5.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}