chore: run prettier and setup CI pipeline

.github/workflows/ci.yaml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.0.3
+
+      - name: Install Prettier
+        run: npm install --save-dev prettier
+
+      - name: Run Prettier check
+        run: prettier --check .

.gitignore

@@ -10,6 +10,10 @@ build/
 .vite/
 .yarn/
 
+# Yarn Plug'n'Play
+.pnp.loader.mjs
+.pnp.cjs
+
 # Compiled Java class files
 *.class
 

.prettierrc

@@ -1,5 +1,13 @@
 {
     "singleQuote": true,
     "tabWidth": 4,
-    "printWidth": 120
+    "printWidth": 120,
+    "overrides": [
+        {
+            "files": ["*.yaml", "*.yml", "*.json"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
 }

LICENSE.md

@@ -2,9 +2,9 @@ Copyright (c) 2025 Kacper Podpora
 
 Portions of this repository are licensed as follows:
 
-* All software that resides under a "components-sdk/" directory is licensed under the license defined in "components-sdk/LICENSE.md".
+-   All software that resides under a "components-sdk/" directory is licensed under the license defined in "components-sdk/LICENSE.md".
 
-* All software outside the above-mentioned directories is available under the MIT license as set forth below.
+-   All software outside the above-mentioned directories is available under the MIT license as set forth below.
 
 MIT License
 

README.md

@@ -2,12 +2,11 @@
 
 This monorepo contains two main packages:
 
-- [website](/website/) – Open-source, public-facing website, licensed under [MIT](./website/LICENSE).
-- [components-sdk](/components-sdk/) – Source-available components SDK, licensed under the [PolyForm Noncommercial License 1.0.0](https://polyformproject.org/licenses/noncommercial/1.0.0/).
+-   [website](/website/) – Open-source, public-facing website, licensed under [MIT](./website/LICENSE).
+-   [components-sdk](/components-sdk/) – Source-available components SDK, licensed under the [PolyForm Noncommercial License 1.0.0](https://polyformproject.org/licenses/noncommercial/1.0.0/).
 
 ## 📦 Installation
 
-
 First, install the dependencies of the monorepo:
 
 ```bash
@@ -30,8 +29,8 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 ## ⚠️ Commercial use
 
-Although the `website/` project is licensed under the permissive MIT License, it depends on the `components-sdk/` package, which is **licensed under the PolyForm Noncommercial License 1.0.0**. 
+Although the `website/` project is licensed under the permissive MIT License, it depends on the `components-sdk/` package, which is **licensed under the PolyForm Noncommercial License 1.0.0**.
 
-This means that while the website code itself allows for commercial use, any distribution or deployment that includes or relies on `components-sdk/` is subject to the more restrictive non-commercial terms. 
+This means that while the website code itself allows for commercial use, any distribution or deployment that includes or relies on `components-sdk/` is subject to the more restrictive non-commercial terms.
 
 As a result, you **cannot use, deploy, or distribute the website for commercial purposes** unless you remove the dependency on `components-sdk/` or obtain a separate commercial license for it. Please review the license terms carefully before using this repository in a commercial context.

components-sdk/LICENSE.md

@@ -13,7 +13,7 @@ your licenses.
 The licensor grants you a copyright license for the
 software to do everything you might do with the software
 that would otherwise infringe the licensor's copyright
-in it for any permitted purpose.  However, you may
+in it for any permitted purpose. However, you may
 only distribute the software according to [Distribution
 License](#distribution-license) and make changes or new works
 based on the software according to [Changes and New Works
@@ -22,7 +22,7 @@ License](#changes-and-new-works-license).
 ## Distribution License
 
 The licensor grants you an additional copyright license
-to distribute copies of the software.  Your license
+to distribute copies of the software. Your license
 to distribute covers distributing the software with
 changes and new works permitted by [Changes and New Works
 License](#changes-and-new-works-license).
@@ -33,7 +33,7 @@ You must ensure that anyone who gets a copy of any part of
 the software from you also gets a copy of these terms or the
 URL for them above, as well as copies of any plain-text lines
 beginning with `Required Notice:` that the licensor provided
-with the software.  For example:
+with the software. For example:
 
 > Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
 
@@ -79,7 +79,7 @@ law. These terms do not limit them.
 
 These terms do not allow you to sublicense or transfer any of
 your licenses to anyone else, or prevent the licensor from
-granting licenses to anyone else.  These terms do not imply
+granting licenses to anyone else. These terms do not imply
 any other licenses.
 
 ## Patent Defense
@@ -97,15 +97,15 @@ violated any of these terms, or done anything with the software
 not covered by your licenses, your licenses can nonetheless
 continue if you come into full compliance with these terms,
 and take practical steps to correct past violations, within
-32 days of receiving notice.  Otherwise, all your licenses
+32 days of receiving notice. Otherwise, all your licenses
 end immediately.
 
 ## No Liability
 
-***As far as the law allows, the software comes as is, without
+**_As far as the law allows, the software comes as is, without
 any warranty or condition, and the licensor will not be liable
 to you for any damages arising out of these terms or the use
-or nature of the software, under any kind of legal claim.***
+or nature of the software, under any kind of legal claim._**
 
 ## Definitions
 
@@ -119,10 +119,10 @@ terms.
 **Your company** is any legal entity, sole proprietorship,
 or other kind of organization that you work for, plus all
 organizations that have control over, are under the control of,
-or are under common control with that organization.  **Control**
+or are under common control with that organization. **Control**
 means ownership of substantially all the assets of an entity,
 or the power to direct its management and policies by vote,
-contract, or otherwise.  Control can be direct or indirect.
+contract, or otherwise. Control can be direct or indirect.
 
 **Your licenses** are all the licenses granted to you for the
 software under these terms.

components-sdk/playground/App.tsx

@@ -1,39 +1,48 @@
-import {Capsule} from "../src/Capsule";
-import {Component, TextDisplayComponent} from "../src/utils/componentTypes";
-import {useMemo, useState} from "react";
-import {DummyStateManager} from "./StateManager.impl";
-import {DummyBetterInput} from "./BetterInput.impl";
-import {DummyEmojiPicker} from "./EmojiPicker.impl";
-import {DummyEmojiShow} from "./EmojiShow.impl";
+import { Capsule } from '../src/Capsule';
+import { Component, TextDisplayComponent } from '../src/utils/componentTypes';
+import { useMemo, useState } from 'react';
+import { DummyStateManager } from './StateManager.impl';
+import { DummyBetterInput } from './BetterInput.impl';
+import { DummyEmojiPicker } from './EmojiPicker.impl';
+import { DummyEmojiShow } from './EmojiShow.impl';
 
 function App() {
-    const stateManager = useMemo(()=> new DummyStateManager(), [])
+    const stateManager = useMemo(() => new DummyStateManager(), []);
 
-    const [state, setState] = useState<string | Component[]>([{
-      "type": 10,
-      "content": "Never trust a robot with a banana."
-    } as TextDisplayComponent])
+    const [state, setState] = useState<string | Component[]>([
+        {
+            type: 10,
+            content: 'Never trust a robot with a banana.',
+        } as TextDisplayComponent,
+    ]);
 
-    return <div>
-        {Array.isArray(state) && <Capsule
-            state={state}
-            key={JSON.stringify(state)}
-            stateManager={stateManager}
-            stateKey={[]}
-            BetterInput={DummyBetterInput}
-            EmojiPicker={DummyEmojiPicker}
-            EmojiShow={DummyEmojiShow}
-            getFile={undefined}
-            setFile={undefined}
-        />}
-        <textarea value={typeof state === "string" ? state : JSON.stringify(state, undefined, 4)} onChange={ev => {
-            try {
-                setState(JSON.parse(ev.target.value))
-            } catch (e) {
-                setState(ev.target.value)
-            }
-        }} />
-    </div>
+    return (
+        <div>
+            {Array.isArray(state) && (
+                <Capsule
+                    state={state}
+                    key={JSON.stringify(state)}
+                    stateManager={stateManager}
+                    stateKey={[]}
+                    BetterInput={DummyBetterInput}
+                    EmojiPicker={DummyEmojiPicker}
+                    EmojiShow={DummyEmojiShow}
+                    getFile={undefined}
+                    setFile={undefined}
+                />
+            )}
+            <textarea
+                value={typeof state === 'string' ? state : JSON.stringify(state, undefined, 4)}
+                onChange={(ev) => {
+                    try {
+                        setState(JSON.parse(ev.target.value));
+                    } catch (e) {
+                        setState(ev.target.value);
+                    }
+                }}
+            />
+        </div>
+    );
 }
 
 export default App;

components-sdk/playground/BetterInput.impl.tsx

@@ -1,12 +1,14 @@
-import {BetterInput} from "../src/polyfills/BetterInput";
+import { BetterInput } from '../src/polyfills/BetterInput';
 
-export const DummyBetterInput: BetterInput = ({onChange, value}) => {
-    return <textarea
-        // @ts-ignore this attribute works, and is used by CSS
-        type={'text'}
-        rows={1}
-        maxLength={2000}
-        onChange={onChange}
-        value={value}
-    />
-}
+export const DummyBetterInput: BetterInput = ({ onChange, value }) => {
+    return (
+        <textarea
+            // @ts-ignore this attribute works, and is used by CSS
+            type={'text'}
+            rows={1}
+            maxLength={2000}
+            onChange={onChange}
+            value={value}
+        />
+    );
+};

components-sdk/playground/EmojiPicker.impl.tsx

@@ -1,5 +1,5 @@
-import {EmojiPicker} from "../src/polyfills/EmojiPicker";
+import { EmojiPicker } from '../src/polyfills/EmojiPicker';
 
-export const DummyEmojiPicker: EmojiPicker = ({onSelect}) => {
-    return <div>lorem ipsum</div>
-}
+export const DummyEmojiPicker: EmojiPicker = ({ onSelect }) => {
+    return <div>lorem ipsum</div>;
+};

components-sdk/playground/EmojiShow.impl.tsx

@@ -1,5 +1,5 @@
-import {EmojiShow} from "../src/polyfills/EmojiShow";
+import { EmojiShow } from '../src/polyfills/EmojiShow';
 
 export const DummyEmojiShow: EmojiShow = ({}) => {
-    return <div>:o</div>
-}
+    return <div>:o</div>;
+};

components-sdk/playground/StateManager.impl.ts

@@ -1,23 +1,23 @@
-import {stateKeyType, StateManager} from "../src/polyfills/StateManager";
+import { stateKeyType, StateManager } from '../src/polyfills/StateManager';
 
 export class DummyStateManager implements StateManager {
     deleteKey(props: {
         key: stateKeyType;
         decoupleFrom?: string | undefined;
         removeKeyParent?: stateKeyType | undefined;
     }) {
-        console.log("deleteKey", props);
+        console.log('deleteKey', props);
     }
 
-    appendKey<T>(props: { key: stateKeyType; value: T; }) {
-        console.log("appendKey", props);
+    appendKey<T>(props: { key: stateKeyType; value: T }) {
+        console.log('appendKey', props);
     }
 
-    setKey<T>(props: { key: stateKeyType; value: T; }) {
-        console.log("setKey", props);
+    setKey<T>(props: { key: stateKeyType; value: T }) {
+        console.log('setKey', props);
     }
 
-    wrapKey<T>(props: { key: stateKeyType; toArray: boolean; innerKey: string; value: T; }) {
-        console.log("wrapKey", props);
+    wrapKey<T>(props: { key: stateKeyType; toArray: boolean; innerKey: string; value: T }) {
+        console.log('wrapKey', props);
     }
-}
+}

components-sdk/playground/index.css

@@ -11,12 +11,14 @@ body {
     background-color: #07080e;
     background-attachment: fixed;
     color: #b4b7b9;
-    font-family: "gg sans",Whitney,"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'gg sans', Whitney, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 1.4rem;
     padding: 0;
     overflow-x: hidden;
 }
 
-*, ::after, ::before {
-	box-sizing: border-box;
-}
+*,
+::after,
+::before {
+    box-sizing: border-box;
+}

components-sdk/playground/main.tsx

@@ -1,4 +1,4 @@
-import {createRoot} from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';