@prozilla-os/app-center 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sieben De Beule
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## About
+
+`@prozilla-os/app-center` is a ProzillaOS application for browsing and installing applications.
+
+## Installation
+
+`@prozilla-os/core` is required to run this application.
+
+```sh
+npm install @prozilla-os/core @prozilla-os/app-center
+yarn add @prozilla-os/core @prozilla-os/app-center
+pnpm add @prozilla-os/core @prozilla-os/app-center
+```
+
+## Usage
+
+### Basic setup
+
+```tsx
+import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
+import { appCenter } from "@prozilla-os/app-center";
+
+function App() {
+  return (
+    <ProzillaOS
+      systemName="Example"
+      tagLine="Powered by ProzillaOS"
+      config={{
+        apps: new AppsConfig({
+          apps: [ appCenter ]
+        })
+      }}
+    >
+      <Taskbar/>
+      <WindowsView/>
+      <ModalsView/>
+      <Desktop/>
+    </ProzillaOS>
+  );
+}
+```
+
+## Links
+
+- [Demo][demo]
+- [Docs][docs]
+- [GitHub][github]
+- [npm][npm]
+- [Discord][discord]
+- [Ko-fi][ko-fi]
+
+[demo]: https://os.prozilla.dev/app-center
+[docs]: https://os.prozilla.dev/docs/reference/apps/app-center
+[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/apps/app-center
+[npm]: https://www.npmjs.com/package/@prozilla-os/app-center
+[discord]: https://discord.gg/JwbyQP4tdz
+[ko-fi]: https://ko-fi.com/prozilla

package/dist/main.d.ts

@@ -0,0 +1,6 @@
+import { App } from '@prozilla-os/core';
+import { WindowProps } from '@prozilla-os/core';
+
+export declare const appCenter: App<WindowProps>;
+
+export { }

package/dist/main.js

@@ -0,0 +1,54 @@
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("._AppCenter_i8u9y_1{display:flex;gap:.5rem;flex-direction:column;height:100%}._Header_13ehb_1{display:flex;gap:.75rem;flex-wrap:nowrap;height:2rem;min-height:2rem;margin:1rem;overflow:hidden}._SearchInput_13ehb_11{flex:1;width:auto;max-width:100%;padding:.25rem .5rem;height:100%;background-color:var(--background-color-2);border:none;border-radius:var(--border-radius-1);outline:none;font-family:inherit;font-size:inherit}._CategoryInput_13ehb_25{flex:.25;width:auto;max-width:100%;padding:.25rem .5rem;height:100%;color:var(--text-color);background-color:var(--background-color-1);border:none;border-radius:var(--border-radius-1);outline:none;font-size:inherit;font-family:inherit}._CategoryInput_13ehb_25>*{color:inherit;background-color:inherit;border:none;border-radius:var(--border-radius-1);outline:none;font-family:inherit;font-size:inherit}._List_a8xt6_1{--gap: 1rem;--columns: 6;display:flex;gap:var(--gap);flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;margin:1rem;max-height:100%;overflow:auto}._App_a8xt6_16{display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;width:calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));height:auto;background-color:var(--background-color-1);border-radius:var(--border-radius-1);overflow:hidden;aspect-ratio:16 / 14;transition:background-color .2s ease-in-out;cursor:pointer}._App_a8xt6_16:hover,._App_a8xt6_16:focus-visible{background-color:var(--background-color-0)}._AppIcon_a8xt6_35{flex-grow:0;width:50%;height:auto;aspect-ratio:1;filter:drop-shadow(.1rem .1rem .2rem color-mix(in srgb,var(--black-4) 75%,transparent))}._AppIcon_a8xt6_35 div,._AppIcon_a8xt6_35 svg{width:100%;height:100%;aspect-ratio:inherit;border-radius:var(--border-radius-1)}._AppName_a8xt6_50{margin:0;font-size:1.25rem;font-weight:500}")),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { useSystemManager as h, APP_CATEGORIES as d, Image as _, App as C } from "@prozilla-os/core";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as u } from "react";
+const m = "_AppCenter_i8u9y_1", g = {
+  AppCenter: m
+}, y = "_Header_13ehb_1", I = "_SearchInput_13ehb_11", v = "_CategoryInput_13ehb_25", i = {
+  Header: y,
+  SearchInput: I,
+  CategoryInput: v
+};
+function N({ searchQuery: o, setSearchQuery: p, category: s, setCategory: a }) {
+  const { appsConfig: n } = h(), r = (e) => {
+    p(e.target.value);
+  }, A = (e) => {
+    a(e.target.value);
+  };
+  return /* @__PURE__ */ l("div", { className: i.Header, children: [
+    /* @__PURE__ */ t("input", { className: i.SearchInput, value: o, onChange: r, type: "text", placeholder: "Search..." }),
+    /* @__PURE__ */ l("select", { className: i.CategoryInput, value: s, onChange: A, children: [
+      /* @__PURE__ */ t("option", { value: "All", children: "All" }),
+      d.filter((e) => n.getAppsByCategory(e).length > 0).map(
+        (e) => /* @__PURE__ */ t("option", { value: e, children: e }, e)
+      )
+    ] })
+  ] });
+}
+const f = "_List_a8xt6_1", S = "_App_a8xt6_16", x = "_AppIcon_a8xt6_35", L = "_AppName_a8xt6_50", c = {
+  List: f,
+  App: S,
+  AppIcon: x,
+  AppName: L
+};
+function $({ apps: o, searchQuery: p, category: s }) {
+  return /* @__PURE__ */ t("div", { className: c.List, children: o.filter(({ name: a, id: n, category: r }) => (a.toLowerCase().includes(p) || n.toLowerCase().replaceAll("-", " ").includes(p)) && (s == "All" || r == s)).map(
+    ({ name: a, id: n, iconUrl: r }) => /* @__PURE__ */ l("div", { className: c.App, children: [
+      /* @__PURE__ */ t("div", { className: c.AppIcon, children: r && /* @__PURE__ */ t(_, { src: r }) }),
+      /* @__PURE__ */ t("p", { className: c.AppName, children: a })
+    ] }, n)
+  ) });
+}
+function H() {
+  const { appsConfig: o } = h(), [p, s] = u(""), [a, n] = u("All");
+  return /* @__PURE__ */ l("div", { className: g.AppCenter, children: [
+    /* @__PURE__ */ t(N, { searchQuery: p, setSearchQuery: s, category: a, setCategory: n }),
+    /* @__PURE__ */ t($, { apps: o.apps, searchQuery: p, category: a })
+  ] });
+}
+const P = new C("AppCenter", "app-center", H).setIconUrl("https://os.prozilla.dev/assets/apps/icons/app-center.svg").setPinnedByDefault(!0).setCategory("Utilities & tools");
+P.setMetadata({ name: "@prozilla-os/app-center", version: "1.0.0", author: "Prozilla" });
+export {
+  P as appCenter
+};
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/components/header/Header.tsx","../src/components/list/List.tsx","../src/components/AppCenter.tsx","../src/main.ts"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport styles from \"./Header.module.css\";\nimport { APP_CATEGORIES, useSystemManager } from \"@prozilla-os/core\";\nimport { CategoryType } from \"../AppCenter\";\n\ninterface HeaderProps {\n\tsearchQuery: string;\n\tsetSearchQuery: React.Dispatch<React.SetStateAction<string>>;\n\tcategory: CategoryType;\n\tsetCategory: React.Dispatch<React.SetStateAction<CategoryType>>;\n}\n\nexport function Header({ searchQuery, setSearchQuery, category, setCategory }: HeaderProps) {\n\tconst { appsConfig } = useSystemManager();\n\n\tconst handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n\t\tsetSearchQuery(event.target.value);\n\t};\n\n\tconst handleCategoryChange = (event: ChangeEvent<HTMLSelectElement>) => {\n\t\tsetCategory(event.target.value as CategoryType);\n\t};\n\n\treturn <div className={styles.Header}>\n\t\t<input className={styles.SearchInput} value={searchQuery} onChange={handleSearchChange} type=\"text\" placeholder=\"Search...\"/>\n\t\t<select className={styles.CategoryInput} value={category} onChange={handleCategoryChange}>\n\t\t\t<option value={\"All\"}>All</option>\n\t\t\t{APP_CATEGORIES.filter((category) => {\n\t\t\t\treturn appsConfig.getAppsByCategory(category).length > 0;\n\t\t\t}).map((category) =>\n\t\t\t\t<option key={category} value={category}>{category}</option>\n\t\t\t)}\n\t\t</select>\n\t</div>;\n}","import { App, Image } from \"@prozilla-os/core\";\nimport styles from \"./List.module.css\";\nimport { CategoryType } from \"../AppCenter\";\n\ninterface ListProps {\n\tapps: App[];\n\tsearchQuery: string;\n\tcategory: CategoryType;\n}\n\nexport function List({ apps, searchQuery, category }: ListProps) {\n\treturn <div className={styles.List}>\n\t\t{apps.filter(({ name, id, category: appCategory }) => {\n\t\t\treturn (name.toLowerCase().includes(searchQuery) || id.toLowerCase().replaceAll(\"-\", \" \").includes(searchQuery))\n\t\t\t\t&& (category == \"All\" || appCategory == category);\n\t\t}).map(({ name, id, iconUrl }) =>\n\t\t\t<div key={id} className={styles.App}>\n\t\t\t\t<div className={styles.AppIcon}>{iconUrl && <Image src={iconUrl}/>}</div>\n\t\t\t\t<p className={styles.AppName}>{name}</p>\n\t\t\t</div>\n\t\t)}\n\t</div>;\n}","import { useSystemManager, APP_CATEGORIES } from \"@prozilla-os/core\";\nimport styles from \"./AppCenter.module.css\";\nimport { Header } from \"./header/Header\";\nimport { List } from \"./list/List\";\nimport { useState } from \"react\";\n\nexport type CategoryType = typeof APP_CATEGORIES[number] | \"All\";\n\nexport function AppCenter() {\n\tconst { appsConfig } = useSystemManager();\n\tconst [searchQuery, setSearchQuery] = useState(\"\");\n\tconst [category, setCategory] = useState<CategoryType>(\"All\");\n\n\treturn <div className={styles.AppCenter}>\n\t\t<Header searchQuery={searchQuery} setSearchQuery={setSearchQuery} category={category} setCategory={setCategory}/>\n\t\t<List apps={appsConfig.apps} searchQuery={searchQuery} category={category}/>\n\t</div>;\n}","import { App } from \"@prozilla-os/core\";\nimport { AppCenter } from \"./components/AppCenter\";\n\nconst appCenter = new App(\"AppCenter\", \"app-center\", AppCenter)\n\t.setIconUrl(\"https://os.prozilla.dev/assets/apps/icons/app-center.svg\")\n\t.setPinnedByDefault(true)\n\t.setCategory(\"Utilities & tools\");\nappCenter.setMetadata({ name: \"@prozilla-os/app-center\", version: \"1.0.0\", author: \"Prozilla\" });\n\n\nexport { appCenter };"],"names":["Header","searchQuery","setSearchQuery","category","setCategory","appsConfig","useSystemManager","handleSearchChange","event","handleCategoryChange","jsxs","styles","jsx","APP_CATEGORIES","List","apps","name","id","appCategory","iconUrl","Image","AppCenter","useState","appCenter","App"],"mappings":";;;;;;;;;;AAYO,SAASA,EAAO,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,aAAAC,KAA4B;AACrF,QAAA,EAAE,YAAAC,MAAeC,KAEjBC,IAAqB,CAACC,MAAyC;AACrD,IAAAN,EAAAM,EAAM,OAAO,KAAK;AAAA,EAAA,GAG5BC,IAAuB,CAACD,MAA0C;AAC3D,IAAAJ,EAAAI,EAAM,OAAO,KAAqB;AAAA,EAAA;AAG/C,SAAQ,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,QAC7B,UAAA;AAAA,IAAC,gBAAAC,EAAA,SAAA,EAAM,WAAWD,EAAO,aAAa,OAAOV,GAAa,UAAUM,GAAoB,MAAK,QAAO,aAAY,YAAW,CAAA;AAAA,IAC3H,gBAAAG,EAAC,YAAO,WAAWC,EAAO,eAAe,OAAOR,GAAU,UAAUM,GACnE,UAAA;AAAA,MAAC,gBAAAG,EAAA,UAAA,EAAO,OAAO,OAAO,UAAG,OAAA;AAAA,MACxBC,EAAe,OAAO,CAACV,MAChBE,EAAW,kBAAkBF,CAAQ,EAAE,SAAS,CACvD,EAAE;AAAA,QAAI,CAACA,MACN,gBAAAS,EAAA,UAAA,EAAsB,OAAOT,GAAW,UAAAA,KAA5BA,CAAqC;AAAA,MACnD;AAAA,IAAA,GACD;AAAA,EACD,EAAA,CAAA;AACD;;;;;;;ACxBO,SAASW,EAAK,EAAE,MAAAC,GAAM,aAAAd,GAAa,UAAAE,KAAuB;AAChE,SAAQ,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,MAC5B,UAAAI,EAAK,OAAO,CAAC,EAAE,MAAAC,GAAM,IAAAC,GAAI,UAAUC,SAC3BF,EAAK,cAAc,SAASf,CAAW,KAAKgB,EAAG,cAAc,WAAW,KAAK,GAAG,EAAE,SAAShB,CAAW,OACzGE,KAAY,SAASe,KAAef,EACzC,EAAE;AAAA,IAAI,CAAC,EAAE,MAAAa,GAAM,IAAAC,GAAI,SAAAE,QAClB,gBAAAT,EAAA,OAAA,EAAa,WAAWC,EAAO,KAC/B,UAAA;AAAA,MAAC,gBAAAC,EAAA,OAAA,EAAI,WAAWD,EAAO,SAAU,eAAY,gBAAAC,EAAAQ,GAAA,EAAM,KAAKD,EAAA,CAAQ,EAAG,CAAA;AAAA,MAClE,gBAAAP,EAAA,KAAA,EAAE,WAAWD,EAAO,SAAU,UAAKK,GAAA;AAAA,IAAA,EAAA,GAF3BC,CAGV;AAAA,EAEF,EAAA,CAAA;AACD;ACdO,SAASI,IAAY;AACrB,QAAA,EAAE,YAAAhB,MAAeC,KACjB,CAACL,GAAaC,CAAc,IAAIoB,EAAS,EAAE,GAC3C,CAACnB,GAAUC,CAAW,IAAIkB,EAAuB,KAAK;AAE5D,SAAQ,gBAAAZ,EAAA,OAAA,EAAI,WAAWC,EAAO,WAC7B,UAAA;AAAA,IAAA,gBAAAC,EAACZ,GAAO,EAAA,aAAAC,GAA0B,gBAAAC,GAAgC,UAAAC,GAAoB,aAAAC,GAAyB;AAAA,sBAC9GU,GAAK,EAAA,MAAMT,EAAW,MAAM,aAAAJ,GAA0B,UAAAE,GAAmB;AAAA,EAC3E,EAAA,CAAA;AACD;ACdA,MAAMoB,IAAY,IAAIC,EAAI,aAAa,cAAcH,CAAS,EAC5D,WAAW,0DAA0D,EACrE,mBAAmB,EAAI,EACvB,YAAY,mBAAmB;AACjCE,EAAU,YAAY,EAAE,MAAM,2BAA2B,SAAS,SAAS,QAAQ,YAAY;"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@prozilla-os/app-center",
+  "description": "A ProzillaOS application for browsing and installing applications.",
+  "version": "1.0.1",
+  "homepage": "https://os.prozilla.dev/app-center",
+  "author": {
+    "name": "Prozilla",
+    "email": "business@prozilla.dev",
+    "url": "https://prozilla.dev/"
+  },
+  "funding": "https://ko-fi.com/prozilla",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+    "directory": "packages/apps/app-center"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.3.1",
+    "@prozilla-os/core": "1.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.5",
+    "@types/react": "^18.3.3",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "@prozilla-os/dev-tools": "1.1.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && vite build"
+  }
+}