-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: port pdl-live to react+patternfly+vite
Also - updates the typescript source style to "no-semi" - switches from npm to yarn - adds github action test that invokes the pdl-live `yarn test` - `yarn test` currently tests: a) type checking; b) linting; c) formatting Fixes #251 Signed-off-by: Nick Mitchell <[email protected]>
- Loading branch information
Showing
52 changed files
with
5,742 additions
and
1,425 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| name: Viewer Tests | ||
|
|
||
| on: | ||
| push: | ||
| branches: [ main ] | ||
| pull_request: | ||
| branches: [ main ] | ||
|
|
||
| # cancel any prior runs for this workflow and this PR (or branch) | ||
| concurrency: | ||
| group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} | ||
| cancel-in-progress: true | ||
|
|
||
| jobs: | ||
| viewer: | ||
| name: Test PDL live viewer | ||
| runs-on: ubuntu-latest | ||
| defaults: | ||
| run: | ||
| working-directory: ./pdl-live | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - name: Set up node | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 22 | ||
| - name: Install dependencies | ||
| run: yarn | ||
| - name: Build viewer | ||
| run: yarn test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,46 @@ | ||
| Install the dependencies: | ||
| ``` | ||
| npm install | ||
| ``` | ||
| # PDL Viewer | ||
|
|
||
| Update the type definitions (if needed): | ||
| ``` | ||
| npx json2ts ../src/pdl/pdl-schema.json src/pdl_ast.d.ts --unreachableDefinitions | ||
| ``` | ||
| To get started, make sure you have a recent version of | ||
| [NodeJS](https://nodejs.org/en/download) installed and | ||
| [Yarn](https://classic.yarnpkg.com/lang/en/docs/install). On MacOS, | ||
| these can be installed via `brew install node yarn`. | ||
|
|
||
| Automatically format the code | ||
| ``` | ||
| npm run fix | ||
| ## Implementation Details | ||
|
|
||
| The PDL Viewer uses [Vite](https://vite.dev/) for bundling, | ||
| [React](https://react.dev/) for the UI, | ||
| [PatternFly](https://www.patternfly.org/) for UI components, and is | ||
| written in [TypeScript](https://www.typescriptlang.org/). The React | ||
| components are written in [TSX](https://react.dev/learn/typescript) | ||
| (the Typescript variant of JSX). | ||
|
|
||
| ## Development | ||
|
|
||
| To install dependencies: | ||
| ```shell | ||
| yarn | ||
| ``` | ||
|
|
||
| Package the code: | ||
| To start the watcher: | ||
| ```shell | ||
| yarn dev | ||
| ``` | ||
| npm run build | ||
|
|
||
| Which will open up a local port which you can view in your favorite | ||
| browser. Edits to any source files will result in quick and automatic | ||
| updates to that running UI. | ||
|
|
||
| ## Tests | ||
|
|
||
| There are currently only simple tests for: linting, formatting, and | ||
| type checking. These can be run via: | ||
| ```shell | ||
| yarn test | ||
| ``` | ||
|
|
||
| Open the UI: | ||
| ## Production | ||
|
|
||
| This will generate production bundles in `dist/` | ||
| ```shell | ||
| yarn build | ||
| ``` | ||
| open index.html | ||
| ``` |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import js from '@eslint/js' | ||
| import globals from 'globals' | ||
| import reactHooks from 'eslint-plugin-react-hooks' | ||
| import reactRefresh from 'eslint-plugin-react-refresh' | ||
| import tseslint from 'typescript-eslint' | ||
|
|
||
| export default tseslint.config( | ||
| { ignores: ['dist'] }, | ||
| { | ||
| extends: [js.configs.recommended, ...tseslint.configs.recommended], | ||
| files: ['**/*.{ts,tsx}'], | ||
| languageOptions: { | ||
| ecmaVersion: 2020, | ||
| globals: globals.browser, | ||
| }, | ||
| plugins: { | ||
| 'react-hooks': reactHooks, | ||
| 'react-refresh': reactRefresh, | ||
| }, | ||
| rules: { | ||
| ...reactHooks.configs.recommended.rules, | ||
| '@typescript-eslint/no-unused-vars': [ | ||
| 'error', | ||
| { | ||
| "argsIgnorePattern": "^_", | ||
| "varsIgnorePattern": "^_", | ||
| "caughtErrorsIgnorePattern": "^_" | ||
| } | ||
| ], | ||
| 'react-refresh/only-export-components': [ | ||
| 'warn', | ||
| { allowConstantExport: true }, | ||
| ], | ||
| }, | ||
| }, | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,162 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>PDL Live</title> | ||
|
|
||
| <!-- Styling --> | ||
| <link rel="stylesheet" href="css/index.css"> | ||
| <style> | ||
| .pdl_block { | ||
| border-radius: 3px; | ||
| margin: 3px; | ||
| padding: 5px; | ||
| margin: 2px; | ||
| vertical-align: middle; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .pdl_show_result_false { | ||
| color: rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| .pdl_string { | ||
| background-color: antiquewhite; | ||
| } | ||
|
|
||
| .pdl_empty { | ||
| background-color: rgb(238, 184, 112); | ||
| } | ||
|
|
||
| .pdl_text { | ||
| background-color: rgb(219, 215, 250); | ||
| } | ||
|
|
||
| .pdl_lastOf { | ||
| background-color: rgb(186, 186, 190); | ||
| } | ||
|
|
||
| .pdl_object { | ||
| background-color: rgb(188, 188, 254); | ||
| } | ||
|
|
||
| .pdl_array { | ||
| background-color: rgb(149, 149, 241); | ||
| } | ||
|
|
||
| .pdl_model { | ||
| background-color: rgb(215, 250, 224); | ||
| } | ||
|
|
||
| .pdl_code { | ||
| background-color: rgb(250, 215, 225); | ||
| } | ||
|
|
||
| .pdl_api { | ||
| background-color: rgb(122, 246, 113); | ||
| } | ||
|
|
||
| .pdl_get { | ||
| background-color: rgb(125, 229, 243); | ||
| } | ||
|
|
||
| .pdl_data { | ||
| background-color: rgb(146, 181, 245); | ||
| } | ||
|
|
||
| .pdl_if { | ||
| background-color: rgb(253, 167, 5); | ||
| } | ||
|
|
||
| .pdl_repeat { | ||
| background-color: rgb(251, 201, 86); | ||
| } | ||
|
|
||
| .pdl_repeat_until { | ||
| background-color: rgb(243, 209, 77); | ||
| } | ||
|
|
||
| .pdl_for { | ||
| background-color: rgb(245, 241, 133); | ||
| } | ||
|
|
||
| .pdl_read { | ||
| background-color: rgb(5, 204, 61); | ||
| } | ||
|
|
||
| .pdl_include { | ||
| background-color: rgb(11, 251, 87); | ||
| } | ||
|
|
||
| .pdl_function { | ||
| background-color: rgb(77, 243, 132); | ||
| } | ||
| .pdl_call { | ||
| background-color: rgb(80, 243, 77); | ||
| } | ||
| .pdl_error { | ||
| background-color: rgb(243, 0, 0); | ||
| } | ||
| </style> | ||
|
|
||
| <!-- Main script --> | ||
| <script src="./dist/bundle.js"></script> | ||
|
|
||
| <!-- Multi column layout --> | ||
| <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css"> | ||
|
|
||
| <!-- Carbon design --> | ||
| <script type="module" | ||
| src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script> | ||
| <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <!-- Navigation bar --> | ||
| <cds-header id="navbar" aria-label="PDL" class="cds-theme-zone-g90"> | ||
| <cds-header-name>PDL viewer</cds-header-name> | ||
| </cds-header> | ||
|
|
||
| <!-- Main window --> | ||
| <div id="mainview"> | ||
|
|
||
| <!-- Load file --> | ||
| <input type="file" name="input_file" id="input_file"> | ||
| <script type="text/javascript"> | ||
| document.getElementById('input_file') | ||
| .addEventListener('change', function () { | ||
|
|
||
| let fr = new FileReader(); | ||
| fr.onload = function () { | ||
| data = JSON.parse(fr.result) | ||
| pdl_viewer.replace_div('doc', pdl_viewer.show_output(data)) | ||
| } | ||
|
|
||
| fr.readAsText(this.files[0]); | ||
| }) | ||
| </script> | ||
|
|
||
| <!-- Main window layout --> | ||
| <div id="layout" style="width: 95%; height: 900px;"></div> | ||
| <script type="module"> | ||
| import { w2layout } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js' | ||
|
|
||
| let pstyle = 'border: 1px solid #efefef; padding: 5px' | ||
| new w2layout({ | ||
| box: '#layout', | ||
| name: 'layout', | ||
| panels: [ | ||
| { type: 'left', size: 600, resizable: true, style: pstyle, html: '<div id="doc"></div>' }, | ||
| { type: 'main', style: pstyle, html: '<div id="code"></div>' } | ||
| ] | ||
| }) | ||
| </script> | ||
|
|
||
| </div> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/ai-governance--prompt.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>PDL Viewer</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.