Skip to content

Commit

Permalink
Merge pull request #193 from NIAEFEUP/feature/actions
Browse files Browse the repository at this point in the history 
Add CI
  • Loading branch information
@toni-santos
toni-santos authored Sep 28, 2024
2 parents 24ebe74 + 71d5c19 commit 5921500
Show file tree
Hide file tree
Showing 5 changed files with 242 additions and 149 deletions.
59 changes: 59 additions & 0 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
name: CI

on:
push: # Run on pushes to "develop"
branches:
- develop
pull_request: # Run on PRs to "develop"
branches:
- develop
types: [opened, reopened, synchronize, ready_for_review]

jobs:
prettier:
if: ${{ github.event.pull_request.draft == false }}

name: Check Javascript code style
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Enable Corepack
run: corepack enable

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 21
cache: yarn

- name: Install dependencies
run: yarn install

- name: Run Prettier
run: yarn format

eslint:
if: ${{ github.event.pull_request.draft == false }}

name: Lint Javascript code
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Enable Corepack
run: corepack enable

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 21
cache: yarn

- name: Install dependencies
run: yarn install

- name: Run Eslint
run: yarn lint
2 changes: 1 addition & 1 deletion content-scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ const functionsToExecute = [
{ name: "courseUnitPage", func: courseUnitPage },
{ name: "injectOverrideFunctions", func: injectOverrideFunctions },
{ name: "addStarIconToCard", func: addStarIconToCard },
{ name: "componentsPage", func: createComponentsPage },
];


const init = async () => {
// Inject user preferences
const data = await getStorage(userPreferences);
Expand Down
188 changes: 109 additions & 79 deletions content-scripts/pages/components_page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import jsx from "texsaur";
import Button from "../components/Button";
import { Table } from "../components/Table";
Expand All @@ -6,68 +7,94 @@ import Icon from "../components/Icon";
const components = ["Icon", "Button", "Table"];

export function createComponentsPage() {
if (!document.location.href.toLowerCase().includes("components")) {
return;
}
document.body.innerHTML = "";
document.title = "Components";
if (!document.location.href.toLowerCase().includes("components")) {
return;
}
document.body.innerHTML = "";
document.title = "Components";

const sidebarItems = components.map((component) => (
<a href={`#${component}`} key={component}>
<li className="se-sidebar-item">
{component}
</li>
</a>
));
const sidebarItems = components.map((component) => (
<a href={`#${component}`} key={component}>
<li className="se-sidebar-item">{component}</li>
</a>
));

const page = (
<div className="se-docs-container">
{/* Sidebar */}
<div className="se-sidebar">
<img src={chrome.runtime.getURL("images/logo/extended.png")} alt="NitSig Logo" width="100" />
<ul>{sidebarItems}</ul>
</div>
const page = (
<div className="se-docs-container">
{/* Sidebar */}
<div className="se-sidebar">
<img
src={chrome.runtime.getURL("images/logo/extended.png")}
alt="NitSig Logo"
width="100"
/>
<ul>{sidebarItems}</ul>
</div>

{/* Main Content */}
<div className="se-main-content">
<h1>NitSig Components</h1>
<div className="introduction">
<p>These components were created by the NitSig team in order to use them across the Sigarra pages.</p>
<p>If you find something in your Sigarra that would be interesting to change by one of the following components, send an email to <a href="mailto:[email protected]">[email protected]</a>.</p>
<p>Interesting to see the extension code base? Check our open source <a href="https://github.com/NIAEFEUP/nitsig" target="_blank" rel="noopener noreferrer">GitHub Repository</a>!</p>
</div>
{/* Main Content */}
<div className="se-main-content">
<h1>NitSig Components</h1>
<div className="introduction">
<p>
These components were created by the NitSig team in
order to use them across the Sigarra pages.
</p>
<p>
If you find something in your Sigarra that would be
interesting to change by one of the following
components, send an email to{" "}
<a href="mailto:[email protected]">[email protected]</a>.
</p>
<p>
Interesting to see the extension code base? Check our
open source{" "}
<a
href="https://github.com/NIAEFEUP/nitsig"
target="_blank"
rel="noopener noreferrer"
>
GitHub Repository
</a>
!
</p>
</div>

{/* Icon */}
<Component name="Icon"
description="Talking about icons, we exclusive use the Remix Icon library, the outlined style! Check remixicon.com for all the available icons."
code={`
{/* Icon */}
<Component
name="Icon"
description="Talking about icons, we exclusive use the Remix Icon library, the outlined style! Check remixicon.com for all the available icons."
code={`
<Icon name="ri-notification-line" />
`}
>
<Icon name="ri-notification-line" />
</Component>
>
<Icon name="ri-notification-line" />
</Component>

{/* Button */}
<Component name="Button"
description="Our button abstraction that can be used to create buttons with icons and text."
code={`
{/* Button */}
<Component
name="Button"
description="Our button abstraction that can be used to create buttons with icons and text."
code={`
<Button
name="my_button"
text="Click me"
icon="ri-notification-line"
onclick={() => alert("Button was clicked")}
/>
`}
>
<Button
title="my_button"
icon="ri-notification-line"
onclick={() => alert("Button was clicked")}
/>
</Component>

>
<Button title="my_button" icon="ri-notification-line" onclick={() => alert("Button was clicked")} />
</Component>


{/* Table */}
<Component name="Table"
description="A simple table design with sorting capabilities on column headers."
code={`
{/* Table */}
<Component
name="Table"
description="A simple table design with sorting capabilities on column headers."
code={`
<Table
name="my_table"
headers={[
Expand All @@ -81,42 +108,45 @@ export function createComponentsPage() {
]}
/>
`}
>
<Table
name="my_table"
headers={[
["Component", "Component"],
["Description", "Description"],
["Status", "Status"]
]}
data={[
["Button", "A button that can be clicked", "In progress"],
["Input", "A text input field", "Complete"]
]}
/>
</Component>
</div>
</div>
);
>
<Table
name="my_table"
headers={[
["Component", "Component"],
["Description", "Description"],
["Status", "Status"],
]}
data={[
[
"Button",
"A button that can be clicked",
"In progress",
],
["Input", "A text input field", "Complete"],
]}
/>
</Component>
</div>
</div>
);

document.body.appendChild(page);
document.body.appendChild(page);
}

interface ComponentProps {
name: string;
description: string;
code: string;
name: string;
description: string;
code: string;
}

const Component: JSX.Component<ComponentProps> = ({ name, description, code }, children) => (
<div id={name} className="se-component-section" >
<h2>{name}</h2>
<p>{description}</p>
<div className="se-component-show">
{children}
const Component: JSX.Component<ComponentProps> = (
{ name, description, code },
children,
) => (
<div id={name} className="se-component-section">
<h2>{name}</h2>
<p>{description}</p>
<div className="se-component-show">{children}</div>
<pre className="se-code-block">{code}</pre>
</div>
<pre className="se-code-block">
{code}
</pre>
</div>
);
);
Loading

0 comments on commit 5921500

Please sign in to comment.