diff --git a/README.md b/README.md index aef55a6..9d8d70b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -# PipelineUI + + + PipelineUI logo + Pipeline UI is a visual editor for creating and managing GitHub Actions workflows. Built with SolidStart, this tool simplifies the process of defining GitHub pipelines @@ -7,9 +10,14 @@ updates the YAML configuration files, ensuring seamless integration with GitHub. > [!NOTE] > -> This project has been made for [SolidHack 2024](https://www.solidjs.com/blog/solidhack-2024-announcement). +> This project has been built to partecipate in [SolidHack 2024](https://www.solidjs.com/blog/solidhack-2024-announcement) +> and [Appwrite’s Hacktoberfest 2024 Hackathon](https://appwrite.io/blog/post/appwrite-hacktoberfest-hackathon-2024). > -> Since October is the hacktoberfest month, this project use `AppWrite Cloud (Free tier)` for their [Appwrite’s Hacktoberfest 2024 Hackathon](https://appwrite.io/blog/post/appwrite-hacktoberfest-hackathon-2024). +> Although there are some alternative solutions that can help a lot writing workflow files +> directly from IDE, a core principle to this work was discovering new technologies and apply them for an MVP. +> +> The amount of time dedicated is very limited (around ~4 weekends, starting from 1st of October), and the features needed for a complete project are numerous. +> Therefore, some features will **undoubtedly be missing** and may be implemented in the future. ## Table of contents @@ -54,25 +62,28 @@ Workflow files are persisted into [AppWrite Cloud](https://appwrite.io/) and **a ## 🤖 Technical info -PipelineUI is entirely built with [Solid](https://github.com/solidjs/solid) and [SolidStart](https://github.com/solidjs/solid-start). +PipelineUI is entirely built with [Solid](https://github.com/solidjs/solid) and [SolidStart](https://github.com/solidjs/solid-start) +with enabled SSR. -There are a few core external dependencies that should be listed here for the awesome work. +A bref introduction with a list of some core external dependencies that should be listed here for the awesome work. -### UI +### User interface -The UI has been built with: +The user interface has been built with: -- [@kobalte/core](https://github.com/kobaltedev/kobalte): used to build accessible components in the UI +- [@kobalte/core](https://github.com/kobaltedev/kobalte): Accessible components for SolidJS - [@solid-primitives/\*](https://github.com/solidjs-community/solid-primitives): SolidJS primitives library -- [vanilla-extract](https://vanilla-extract.style/): Zero-runtime CSS in typescript - [corvu](https://corvu.dev/): UI primitives for SolidJS +- [vanilla-extract](https://vanilla-extract.style/): Zero-runtime CSS in typescript > [!WARNING] > -> The source code of [@vanilla-extract/vite-plugin](https://github.com/vanilla-extract-css/vanilla-extract/tree/master/packages/vite-plugin) has been altered -> in order to support solid start w/ vinxi for ssr/csr build. +> The source code of [@vanilla-extract/vite-plugin](https://github.com/vanilla-extract-css/vanilla-extract/tree/master/packages/vite-plugin) has been patched +> in order to support solid start w/ vinxi for multi-environment ssr/csr build. > -> [Patch file](./patches/@vanilla-extract__vite-plugin@4.0.17.patch) > [Custom app config](./packages/app/app.config.ts) +> [Patch file](./patches/@vanilla-extract__vite-plugin@4.0.17.patch) +> +> [Custom app config](./packages/app/app.config.ts) --- @@ -80,18 +91,17 @@ The UI has been built with: - [CodeMirror6](https://codemirror.net/): used to display the YAML editor and merge view. The LSP integration is an adapted fork of [codemirror-languageserver](https://github.com/FurqanSoftware/codemirror-languageserver), which was a - good starting point to integrate the GitHub workflow language server. - - [LSP Integration](./packages/app/src/components/Editor/YamlEditor/lsp) + good starting point to integrate the GitHub workflow language server. Portion of CodeMirror implementation is present in the [@pipelineui/yaml-editor](./packages/yaml-editor) - [actions/languageservices](https://github.com/actions/languageservices): The language service repo for GitHub workflows and expressions. This was used to parse the workflow files and validate them, and enhance the editor code through linting and hover-in code documentation. > [!WARNING] > -> The source code of @actions/workflow-parser has been altered in order to be built into node/browser without getting errors and to -> extend some functionalities that were not available before (e.g. expression parsing). +> The source code of @actions/workflow-parser has been patched and rebuilt in order to work on vite in node/browser environment without getting errors and to +> extend some functionalities needed to the workflow yaml parser and lsp that were not available before. > -> Currently @actions/languageserver has been wrapped to ship only browser compatible packages and the patche workflow-parser in order to skip all the used node dependencies. +> Currently @actions/languageserver has been wrapped to ship only browser compatible packages with the built-in workflow-parser patch. > > Read more about this in the package [README](./packages/workflow-parser/README.md). > @@ -103,9 +113,9 @@ The UI has been built with: ### Flow diagram -Flow diagram has been built from scratch taking advantage of some other dependencies: +The implemented Flow diagram is very limited and it has been built with solid taking advantage of some other dependencies: -- [elkjs](https://github.com/kieler/elkjs): Elk layout algorithm, used to calculate the flow item positions +- [elkjs](https://github.com/kieler/elkjs): ELK layout algorithm, used to calculate the flow item positions - [panzoom](https://github.com/anvaka/panzoom): Cross-browser compatible pan and zoom library - [@xyflow/system](https://github.com/xyflow/xyflow): Core of xyflow, currently used to build the smooth edge curve svg @@ -118,6 +128,11 @@ Flow diagram has been built from scratch taking advantage of some other dependen Backend has been built with [appwrite](https://appwrite.io/), which has been wrapped via solid server functions to provide authentication and the database persistence. +Used Appwrite features: + +- Auth +- Database + Most of the code is available into [packages/app/lib/server](packages/app/src/lib/server). --- diff --git a/docs/logo.svg b/docs/logo.svg new file mode 100644 index 0000000..7be6992 --- /dev/null +++ b/docs/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/logo_for_github_dark.svg b/docs/logo_for_github_dark.svg new file mode 100644 index 0000000..1a546fc --- /dev/null +++ b/docs/logo_for_github_dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/logo_for_github_white.svg b/docs/logo_for_github_white.svg new file mode 100644 index 0000000..1637cd1 --- /dev/null +++ b/docs/logo_for_github_white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/logo_full.svg b/docs/logo_full.svg new file mode 100644 index 0000000..5ef2264 --- /dev/null +++ b/docs/logo_full.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/package.json b/package.json index 0d0a227..def4bf0 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "pnpm": { "patchedDependencies": { "@actions/workflow-parser@0.3.13": "patches/@actions__workflow-parser@0.3.13.patch", - "@vanilla-extract/vite-plugin@4.0.17": "patches/@vanilla-extract__vite-plugin@4.0.17.patch" + "@vanilla-extract/vite-plugin@4.0.17": "patches/@vanilla-extract__vite-plugin@4.0.17.patch", + "solid-mdx": "patches/solid-mdx.patch" } } } diff --git a/packages/app/plugin/LICENSE b/packages/app/plugin/LICENSE deleted file mode 100644 index 3183b90..0000000 --- a/packages/app/plugin/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2021 SEEK - -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. \ No newline at end of file diff --git a/packages/app/plugin/README.md b/packages/app/plugin/README.md deleted file mode 100644 index 52f5481..0000000 --- a/packages/app/plugin/README.md +++ /dev/null @@ -1,95 +0,0 @@ -# 🧁 vanilla-extract - -**Zero-runtime Stylesheets-in-TypeScript.** - -Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time. - -Basically, it’s [“CSS Modules](https://github.com/css-modules/css-modules)-in-TypeScript” but with scoped CSS Variables + heaps more. - -🔥   All styles generated at build time — just like [Sass](https://sass-lang.com), [Less](http://lesscss.org), etc. - -✨   Minimal abstraction over standard CSS. - -🦄   Works with any front-end framework — or even without one. - -🌳   Locally scoped class names — just like [CSS Modules.](https://github.com/css-modules/css-modules) - -🚀   Locally scoped [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), `@keyframes` and `@font-face` rules. - -🎨   High-level theme system with support for simultaneous themes. No globals! - -🛠   Utils for generating variable-based `calc` expressions. - -💪   Type-safe styles via [CSSType.](https://github.com/frenic/csstype) - -🏃‍♂️   Optional runtime version for development and testing. - -🙈   Optional API for dynamic runtime theming. - ---- - -🌐 [Check out the documentation site for setup guides, examples and API docs.](https://vanilla-extract.style) - - - ---- - -🖥   [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/App.css.ts) - ---- - -**Write your styles in `.css.ts` files.** - -```ts -// styles.css.ts - -import { createTheme, style } from '@vanilla-extract/css'; - -export const [themeClass, vars] = createTheme({ - color: { - brand: 'blue' - }, - font: { - body: 'arial' - } -}); - -export const exampleStyle = style({ - backgroundColor: vars.color.brand, - fontFamily: vars.font.body, - color: 'white', - padding: 10 -}); -``` - -> 💡 Once you've [configured your build tooling,](https://vanilla-extract.style/documentation/getting-started/) these `.css.ts` files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc. - -**Then consume them in your markup.** - -```ts -// app.ts - -import { themeClass, exampleStyle } from './styles.css.ts'; - -document.write(` -
-

Hello world!

-
-`); -``` - ---- - -Want to work at a higher level while maximising style re-use? Check out 🍨 [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract. - ---- - -## Thanks - -- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for [treat](https://seek-oss.github.io/treat), the precursor to this library. -- [Stitches](https://stitches.dev/) for getting us excited about CSS-Variables-in-JS. -- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work. - -## License - -MIT. diff --git a/packages/app/plugin/package.json b/packages/app/plugin/package.json deleted file mode 100644 index 4beacf8..0000000 --- a/packages/app/plugin/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "@vanilla-extract/vite-plugin", - "version": "4.0.17", - "description": "Zero-runtime Stylesheets-in-TypeScript", - "main": "dist/vanilla-extract-vite-plugin.cjs.js", - "module": "dist/vanilla-extract-vite-plugin.esm.js", - "types": "dist/vanilla-extract-vite-plugin.cjs.d.ts", - "files": [ - "/dist" - ], - "repository": { - "type": "git", - "url": "https://github.com/vanilla-extract-css/vanilla-extract.git", - "directory": "packages/vite-plugin" - }, - "author": "SEEK", - "license": "MIT", - "dependencies": { - "@vanilla-extract/integration": "^7.1.10" - }, - "devDependencies": { - "vite": "^5.4.10" - }, - "peerDependencies": { - "vite": "^4.0.3 || ^5.0.0" - } -} diff --git a/packages/app/src/routes/about.tsx b/packages/app/src/routes/about.tsx index 4decf30..f52bf37 100644 --- a/packages/app/src/routes/about.tsx +++ b/packages/app/src/routes/about.tsx @@ -8,7 +8,6 @@ import * as styles from '~/components/About/about.css'; import mdxComponents from '~/components/Mdx/mdx-components'; import {createMemo, For, Show, Suspense} from 'solid-js'; -// @ts-expect-error No types import {MDXProvider} from 'solid-mdx'; import {HomeTitle} from '~/components/Home/HomeTitle/HomeTitle'; import {Icon} from '~/ui/components/Icon'; diff --git a/patches/solid-mdx.patch b/patches/solid-mdx.patch new file mode 100644 index 0000000..1641b05 --- /dev/null +++ b/patches/solid-mdx.patch @@ -0,0 +1,12 @@ +diff --git a/package.json b/package.json +index 99afc60d25b9c2592b3490dcd94720a024ab5653..a7931a99369b2b237c617e1d367264494aeb0e18 100644 +--- a/package.json ++++ b/package.json +@@ -10,6 +10,7 @@ + ], + "exports": { + ".": { ++ "types": "./types/index.d.ts", + "default": "./dist/index.mjs", + "import": "./dist/index.mjs", + "require": "./dist/index.js" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 590b987..f6c3a3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ patchedDependencies: '@vanilla-extract/vite-plugin@4.0.17': hash: i44zwkor6nbxyrubqgkogc6t64 path: patches/@vanilla-extract__vite-plugin@4.0.17.patch + solid-mdx: + hash: wongdwyww6mzxros5anf6ruhb4 + path: patches/solid-mdx.patch importers: @@ -156,7 +159,7 @@ importers: version: 1.1.4(solid-js@1.9.3) solid-mdx: specifier: ^0.0.7 - version: 0.0.7(solid-js@1.9.3)(vite@5.4.10(@types/node@22.8.5)(terser@5.34.1)) + version: 0.0.7(patch_hash=wongdwyww6mzxros5anf6ruhb4)(solid-js@1.9.3)(vite@5.4.10(@types/node@22.8.5)(terser@5.34.1)) statebuilder: specifier: ^0.6.2 version: 0.6.2 @@ -12293,7 +12296,7 @@ snapshots: dependencies: solid-js: 1.9.3 - solid-mdx@0.0.7(solid-js@1.9.3)(vite@5.4.10(@types/node@22.8.5)(terser@5.34.1)): + solid-mdx@0.0.7(patch_hash=wongdwyww6mzxros5anf6ruhb4)(solid-js@1.9.3)(vite@5.4.10(@types/node@22.8.5)(terser@5.34.1)): dependencies: solid-js: 1.9.3 vite: 5.4.10(@types/node@22.8.5)(terser@5.34.1)