Feature: Input Details component (#25)

.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: CI
+on: [push]
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}
+    cancel-in-progress: true
+jobs:
+    ci:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Check out code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js environment
+              uses: actions/setup-node@v3
+              with:
+                  node-version: latest
+                  cache: 'yarn'
+
+            - name: Install Dependencies
+              run: yarn install --frozen-lockfile
+
+            - name: Code format check
+              run: yarn format:check
+
+            - name: Linting
+              run: yarn lint
+
+            - name: Run Tests
+              run: yarn test:ci

.gitignore

@@ -3,3 +3,4 @@
 dist
 node_modules
 storybook-static
+coverage

.prettierignore

@@ -0,0 +1,7 @@
+.next
+dist
+node_modules
+.storybook
+graphql
+contracts.ts
+**/rollups-wagmi/src/index.tsx

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-    "tabWidth": 4,
+    "tabWidth": 4,    
     "overrides": [
         {
             "files": "*.md",

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true,
+        "source.organizeImports": true
+    }
+}

apps/web/src/app/applications/[address]/page.tsx

@@ -1,8 +1,4 @@
 "use client";
-import { FC, useEffect, useState } from "react";
-import { useScrollIntoView } from "@mantine/hooks";
-import { pathOr } from "ramda";
-import { TbInbox } from "react-icons/tb";
 import {
     Anchor,
     Breadcrumbs,
@@ -14,14 +10,18 @@ import {
     Text,
     Title,
 } from "@mantine/core";
+import { useScrollIntoView } from "@mantine/hooks";
 import Link from "next/link";
-import { InputOrderByInput, useInputsQuery } from "../../../graphql";
+import { pathOr } from "ramda";
+import { FC, useEffect, useState } from "react";
+import { TbInbox } from "react-icons/tb";
 import Address from "../../../components/address";
+import InputRow from "../../../components/inputRow";
+import { InputOrderByInput, useInputsQuery } from "../../../graphql";
 import {
     limitBounds,
     usePaginationParams,
 } from "../../../hooks/usePaginationParams";
-import InputRow from "../../../components/inputRow";
 
 export type ApplicationPageProps = {
     params: { address: string };

apps/web/src/components/inputRow.tsx

@@ -1,11 +1,11 @@
 "use client";
+import { erc20PortalAddress, etherPortalAddress } from "@cartesi/rollups-wagmi";
 import {
     ActionIcon,
     Badge,
     Collapse,
     Group,
     JsonInput,
-    Stack,
     Table,
     Tabs,
     Text,
@@ -22,7 +22,6 @@ import {
     TbX,
 } from "react-icons/tb";
 import { Hex, formatUnits, getAddress, hexToString } from "viem";
-import { erc20PortalAddress, etherPortalAddress } from "@cartesi/rollups-wagmi";
 import { InputItemFragment } from "../graphql";
 import Address from "./address";
 

apps/workshop/.eslintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
     root: true,
     extends: ["cartesi"],
+    rules: {
+        "@next/next/no-img-element": 'off'
+    }
 };

apps/workshop/.storybook/main.ts

@@ -10,6 +10,7 @@ const config: StorybookConfig = {
         "@storybook/addon-interactions",
         "@storybook/addon-styling",
         "storybook-dark-mode",
+        "@storybook/addon-viewport",
     ],
     docs: {
         autodocs: "tag",

apps/workshop/README.md

@@ -4,14 +4,14 @@ This template provides a minimal setup to get React working in Vite with HMR and
 
 Currently, two official plugins are available:
 
--   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
--   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
 ## Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
--   Configure the top-level `parserOptions` property like this:
+- Configure the top-level `parserOptions` property like this:
 
 ```js
    parserOptions: {
@@ -22,6 +22,6 @@ If you are developing a production application, we recommend updating the config
    },
 ```
 
--   Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
--   Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
--   Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

apps/workshop/package.json

@@ -27,6 +27,7 @@
         "@storybook/addon-links": "^7.4.0",
         "@storybook/addon-onboarding": "^1.0.8",
         "@storybook/addon-styling": "^1.3.7",
+        "@storybook/addon-viewport": "^7.4.0",
         "@storybook/blocks": "^7.4.0",
         "@storybook/cli": "^7.4.0",
         "@storybook/preview-api": "^7.4.0",

apps/workshop/src/App.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
+import "./App.css";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
-import "./App.css";
 
 function App() {
     const [count, setCount] = useState(0);