Create project card and some of the home screen

.github/workflows/test-lint.yaml

@@ -14,12 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: 18.x
           cache: "yarn"
       - run: yarn
-      - run: yarn workspaces run build
-      - run: yarn workspaces run test
-      - run: yarn workspaces run lint:formatting
-      - run: yarn workspaces run lint:eslint
+      - run: yarn build
+      - run: yarn test
+      - run: yarn lint:formatting
+      - run: yarn lint:eslint

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 .idea/
 config/
+.yarn/
 
 # macOS
 .DS_Store

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "description": "Root package of Lyra",
   "private": true,
+  "packageManager": "[email protected]",
   "engines": {
     "node": ">=16.0.0"
   },
@@ -12,15 +13,23 @@
     ]
   },
   "scripts": {
-    "build": "yarn workspaces run build",
-    "test": "yarn workspaces run test",
-    "lint:formatting": "yarn workspaces run lint:formatting",
-    "lint:eslint": "yarn workspaces run lint:eslint"
+    "build": "yarn workspaces foreach -A run build",
+    "test": "yarn workspaces foreach -A run test",
+    "lint:formatting": "yarn workspaces foreach -A run lint:formatting",
+    "lint:eslint": "yarn workspaces foreach -A run lint:eslint"
   },
   "keywords": [
     "lyra"
   ],
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.5",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/nextjs": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/test": "^8.0.10",
     "@types/mock-fs": "^4.13.4",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -40,6 +49,7 @@
     "jest": "^29.7.0",
     "mock-fs": "^5.2.0",
     "prettier": "^3.1.1",
+    "storybook": "^8.0.10",
     "ts-jest": "^29.1.2",
     "typescript": "^5"
   }

webapp/.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

webapp/.storybook/main.js

@@ -0,0 +1,28 @@
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/nextjs').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

webapp/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

webapp/package.json

@@ -10,7 +10,9 @@
     "lint:eslint": "eslint .",
     "lint:eslint-fix": "eslint . --fix",
     "lint": "next lint",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -23,5 +25,16 @@
     "simple-git": "^3.20.0",
     "yaml": "^2.3.3",
     "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.5",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/nextjs": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "storybook": "^8.0.10"
   }
 }

webapp/src/app/page.tsx

@@ -0,0 +1,57 @@
+import { Cache } from '@/Cache';
+import HomeDashboard from '@/components/HomeDashboard';
+import MessageAdapterFactory from '@/utils/adapters/MessageAdapterFactory';
+import { ProjectCardProps } from '@/components/ProjectCard';
+import { RepoGit } from '@/RepoGit';
+import { ServerConfig } from '@/utils/serverConfig';
+
+// Force dynamic rendering for this page. By default Next.js attempts to render
+// this page statically. That means that it tries to render the page at build
+// time instead of at runtime. That doesn't work: this page needs to fetch
+// project-specific config files and perform git operations. So this little
+// one-liner forces it into dynamic rendering mode.
+//
+// More info on dynamic vs static rendering at:
+// https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering
+//
+// More info on `export const dynamic` at:
+// https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
+export const dynamic = 'force-dynamic';
+
+export default async function Home() {
+  const serverConfig = await ServerConfig.read();
+  const projects = await Promise.all(
+    serverConfig.projects.map<Promise<ProjectCardProps>>(async (project) => {
+      await RepoGit.cloneIfNotExist(project);
+      const repoGit = await RepoGit.getRepoGit(project);
+      const lyraConfig = await repoGit.getLyraConfig();
+      const projectConfig = lyraConfig.getProjectConfigByPath(
+        project.projectPath,
+      );
+      const msgAdapter = MessageAdapterFactory.createAdapter(projectConfig);
+      const messages = await msgAdapter.getMessages();
+      const store = await Cache.getProjectStore(projectConfig);
+      const languages = await Promise.all(
+        projectConfig.languages.map(async (lang) => {
+          const translations = await store.getTranslations(lang);
+          return {
+            href: `/projects/${project.name}/${lang}`,
+            language: lang,
+            progress: translations
+              ? (Object.keys(translations).length / messages.length) * 100
+              : 0,
+          };
+        }),
+      );
+
+      return {
+        href: `/projects/${project.name}`,
+        languages,
+        messageCount: messages.length,
+        name: project.name,
+      };
+    }),
+  );
+
+  return <HomeDashboard projects={projects} />;
+}

webapp/src/components/HomeDashboard.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { Box, List, Typography } from '@mui/joy';
+import ProjectCard, { ProjectCardProps } from './ProjectCard';
+
+type HomeDashboardProps = {
+  projects: ProjectCardProps[];
+};
+
+/**
+ */
+const HomeDashboard: FC<HomeDashboardProps> = ({ projects }) => {
+  return (
+    <Box
+      alignItems="center"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      minHeight="97vh"
+    >
+      <Typography alignSelf="flex-start" color="primary" component="h1">
+        Your Lyra Projects
+      </Typography>
+      <List
+        sx={{
+          '@media (min-width: 600px)': {
+            alignContent: 'center',
+            columnGap: 2,
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 300px));',
+            justifyContent: 'center',
+          },
+          alignItems: 'center',
+          display: 'flex',
+          flex: 1,
+          flexDirection: 'column',
+          rowGap: 2,
+          width: '100%',
+        }}
+      >
+        {projects.map((project, i) => (
+          <ProjectCard key={i} {...project} />
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export default HomeDashboard;

webapp/src/components/MessageForm.tsx

@@ -10,14 +10,33 @@ import {
 } from '@mui/joy';
 import { FC, useEffect, useState } from 'react';
 
-type Props = {
+type MessageFormProps = {
+  /**
+   * The message to be edited.
+   */
   message: MessageData;
-  // eslint-disable-next-line no-unused-vars
+
+  /**
+   * Callback to save the edited message.
+   */
   onSave: (text: string) => void;
+
+  /**
+   * The current translation of the message.
+   */
   translation: string;
 };
 
-const MessageForm: FC<Props> = ({ message, onSave, translation }) => {
+/**
+ * The form translators use to edit a message. Displays the default message from
+ * the source code on the left for reference, and the current translation on the
+ * right.
+ */
+const MessageForm: FC<MessageFormProps> = ({
+  message,
+  onSave,
+  translation,
+}) => {
   const [text, setText] = useState(translation);
 
   useEffect(() => {