Refactoring Repository Card Component and Adding Feed Cards Component

client/src/components/feed/feed-cards.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Stack from '@mui/material/Stack';
+
+import RepositoryCard from '../repository/repository-card';
+
+const FeedCards = ({ items }) => (
+  <Stack spacing={2}>
+    {items.map((item) => (
+      <RepositoryCard {...item} />
+    ))}
+  </Stack>
+);
+
+FeedCards.propTypes = {
+  items: PropTypes.array.isRequired,
+};
+
+export default FeedCards;

client/src/components/feed/feed.stories.js

@@ -0,0 +1,217 @@
+import Feed from './feed-cards'; // Assuming Feed is the component you want to create a story for
+
+const feedData = [
+  {
+    id: 10270250,
+    node_id: 'MDEwOlJlcG9zaXRvcnkxMDI3MDI1MA==',
+    name: 'react',
+    full_name: 'facebook/react',
+    private: false,
+    html_url: 'https://github.com/facebook/react',
+    description: 'The library for web and native user interfaces.',
+    fork: false,
+    url: 'https://api.github.com/repos/facebook/react',
+    languages_url: 'https://api.github.com/repos/facebook/react/languages',
+    created_at: '2013-05-24T16:15:54Z',
+    updated_at: '2024-03-17T02:37:45Z',
+    pushed_at: '2024-03-17T01:34:23Z',
+    homepage: 'https://react.dev',
+    size: 405436,
+    stargazers_count: 220201,
+    watchers_count: 220201,
+    language: 'JavaScript',
+    languageData: {
+      JavaScript: 4168197,
+      HTML: 120786,
+      CSS: 64424,
+      'C++': 44290,
+      TypeScript: 21136,
+      CoffeeScript: 17378,
+      C: 5227,
+      Shell: 2205,
+      Python: 259,
+      Makefile: 189,
+    },
+    forks_count: 44998,
+    open_issues_count: 1620,
+    license: {
+      key: 'mit',
+      name: 'MIT License',
+      spdx_id: 'MIT',
+      url: 'https://api.github.com/licenses/mit',
+      node_id: 'MDc6TGljZW5zZTEz',
+    },
+    topics: ['declarative', 'frontend', 'javascript', 'library', 'react', 'ui'],
+    subscribers_count: 6634,
+    owner: {
+      login: 'facebook',
+      id: 69631,
+      node_id: 'MDEyOk9yZ2FuaXphdGlvbjY5NjMx',
+      avatar_url: 'https://avatars.githubusercontent.com/u/69631?v=4',
+    },
+  },
+  {
+    id: 1296269,
+    node_id: 'MDEwOlJlcG9zaXRvcnkxMjk2MjY5',
+    name: 'Hello-World',
+    full_name: 'octocat/Hello-World',
+    private: false,
+    html_url: 'https://github.com/octocat/Hello-World',
+    description: 'This your first repo!',
+    fork: false,
+    url: 'https://api.github.com/repos/octocat/Hello-World',
+    homepage: 'https://github.com',
+    forks_count: 9,
+    forks: 9,
+    stargazers_count: 80,
+    watchers_count: 80,
+    watchers: 80,
+    size: 108,
+    default_branch: 'master',
+    open_issues_count: 0,
+    open_issues: 0,
+    is_template: false,
+    topics: ['octocat', 'atom', 'electron', 'api'],
+    has_issues: true,
+    has_projects: true,
+    has_wiki: true,
+    has_pages: false,
+    has_downloads: true,
+    has_discussions: false,
+    archived: false,
+    disabled: false,
+    visibility: 'public',
+    pushed_at: '2011-01-26T19:06:43Z',
+    created_at: '2011-01-26T19:01:12Z',
+    updated_at: '2011-01-26T19:14:43Z',
+    permissions: {
+      pull: true,
+      push: false,
+      admin: false,
+    },
+    allow_rebase_merge: true,
+    temp_clone_token: 'ABTLWHOULUVAXGTRYU7OC2876QJ2O',
+    allow_squash_merge: true,
+    allow_auto_merge: false,
+    delete_branch_on_merge: true,
+    allow_merge_commit: true,
+    subscribers_count: 42,
+    network_count: 0,
+    license: {
+      key: 'mit',
+      name: 'MIT License',
+      spdx_id: 'MIT',
+      url: 'https://api.github.com/licenses/mit',
+      node_id: 'MDc6TGljZW5zZW1pdA==',
+    },
+    organization: {
+      login: 'octocat',
+      id: 1,
+      node_id: 'MDQ6VXNlcjE=',
+      avatar_url: 'https://github.com/images/error/octocat_happy.gif',
+      gravatar_id: '',
+      url: 'https://api.github.com/users/octocat',
+      html_url: 'https://github.com/octocat',
+      followers_url: 'https://api.github.com/users/octocat/followers',
+      following_url: 'https://api.github.com/users/octocat/following{/other_user}',
+      gists_url: 'https://api.github.com/users/octocat/gists{/gist_id}',
+      starred_url: 'https://api.github.com/users/octocat/starred{/owner}{/repo}',
+      subscriptions_url: 'https://api.github.com/users/octocat/subscriptions',
+      organizations_url: 'https://api.github.com/users/octocat/orgs',
+      repos_url: 'https://api.github.com/users/octocat/repos',
+      events_url: 'https://api.github.com/users/octocat/events{/privacy}',
+      received_events_url: 'https://api.github.com/users/octocat/received_events',
+      type: 'Organization',
+      site_admin: false,
+    },
+  },
+  {
+    id: 1296269,
+    node_id: 'MDEwOlJlcG9zaXRvcnkxMjk2MjY5',
+    name: 'Hello-World-Template',
+    full_name: 'octocat/Hello-World-Template',
+    owner: {
+      login: 'octocat',
+      id: 1,
+      node_id: 'MDQ6VXNlcjE=',
+      avatar_url: 'https://github.com/images/error/octocat_happy.gif',
+      gravatar_id: '',
+      url: 'https://api.github.com/users/octocat',
+      html_url: 'https://github.com/octocat',
+      followers_url: 'https://api.github.com/users/octocat/followers',
+      following_url: 'https://api.github.com/users/octocat/following{/other_user}',
+      gists_url: 'https://api.github.com/users/octocat/gists{/gist_id}',
+      starred_url: 'https://api.github.com/users/octocat/starred{/owner}{/repo}',
+      subscriptions_url: 'https://api.github.com/users/octocat/subscriptions',
+      organizations_url: 'https://api.github.com/users/octocat/orgs',
+      repos_url: 'https://api.github.com/users/octocat/repos',
+      events_url: 'https://api.github.com/users/octocat/events{/privacy}',
+      received_events_url: 'https://api.github.com/users/octocat/received_events',
+      type: 'User',
+      site_admin: false,
+    },
+    private: false,
+    html_url: 'https://github.com/octocat/Hello-World-Template',
+    description: 'This your first repo!',
+    fork: false,
+    url: 'https://api.github.com/repos/octocat/Hello-World-Template',
+    git_url: 'git:github.com/octocat/Hello-World-Template.git',
+    homepage: 'https://github.com',
+    language: null,
+    forks: 9,
+    forks_count: 9,
+    stargazers_count: 80,
+    watchers_count: 80,
+    watchers: 80,
+    size: 108,
+    default_branch: 'master',
+    open_issues: 0,
+    open_issues_count: 0,
+    is_template: true,
+    license: {
+      key: 'mit',
+      name: 'MIT License',
+      url: 'https://api.github.com/licenses/mit',
+      spdx_id: 'MIT',
+      node_id: 'MDc6TGljZW5zZW1pdA==',
+      html_url: 'https://api.github.com/licenses/mit',
+    },
+    topics: ['octocat', 'atom', 'electron', 'api'],
+    has_issues: true,
+    has_projects: true,
+    has_wiki: true,
+    has_pages: false,
+    has_downloads: true,
+    archived: false,
+    disabled: false,
+    visibility: 'public',
+    pushed_at: '2011-01-26T19:06:43Z',
+    created_at: '2011-01-26T19:01:12Z',
+    updated_at: '2011-01-26T19:14:43Z',
+    permissions: {
+      admin: false,
+      push: false,
+      pull: true,
+    },
+    allow_rebase_merge: true,
+    temp_clone_token: 'ABTLWHOULUVAXGTRYU7OC2876QJ2O',
+    allow_squash_merge: true,
+    allow_auto_merge: false,
+    delete_branch_on_merge: true,
+    allow_merge_commit: true,
+    subscribers_count: 42,
+    network_count: 0,
+  },
+];
+
+export default {
+  title: 'gitstream/components/Feed',
+  component: Feed,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const Default = {
+  args: { items: feedData },
+};

client/src/components/repository/repository.jsx → client/src/components/repository/repository-card.jsx

@@ -9,7 +9,6 @@ import Card from '@mui/material/Card';
 import Chip from '@mui/material/Chip';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import MenuItem from '@mui/material/MenuItem';
 import StarIcon from '@mui/icons-material/Star';
@@ -18,15 +17,16 @@ import CardHeader from '@mui/material/CardHeader';
 import Typography from '@mui/material/Typography';
 import ShareIcon from '@mui/icons-material/Share';
 import TodayIcon from '@mui/icons-material/Today';
+import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
 import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
 
+
 const RepositoryCard = ({
   full_name = '',
   description = '',
@@ -57,31 +57,33 @@ const RepositoryCard = ({
   };
 
   return (
-    <Card>
+    <Card variant="outlined">
       <CardHeader
         avatar={<Avatar src={owner.avatar_url} />}
         title={full_name}
         subheader={timeSinceCreation}
       />
 
       <CardContent>
-        <Stack spacing={2}>
-          <Stack>
+        <Stack spacing={2} flexWrap="wrap">
+          <Stack flexWrap="wrap">
             <Typography variant="body2" color="text.secondary">
               {description}
             </Typography>
           </Stack>
-          <Stack direction="row" spacing={1} mt={1}>
+          <Stack direction="row" spacing={1} margin={1} flexWrap="wrap">
             {Object.entries(languageData).map(([lng, linesOfCode]) => (
-              <Chip
-                key={lng}
-                label={`${lng}: ${((linesOfCode / totalLinesOfCode) * 100).toFixed(2)}%`}
-                variant="outlined"
-                size="small"
-              />
+              <Box paddingTop={1}>
+                <Chip
+                  key={lng}
+                  label={`${lng}: ${((linesOfCode / totalLinesOfCode) * 100).toFixed(2)}%`}
+                  variant="outlined"
+                  size="small"
+                />
+              </Box>
             ))}
           </Stack>
-          <Stack direction="row" spacing={1} mt={1}>
+          <Stack direction="row" spacing={1} mt={1} flexWrap="wrap">
             {topics.map((topic) => (
               <Chip key={topic} label={topic} variant="outlined" size="small" />
             ))}
@@ -137,32 +139,27 @@ const RepositoryCard = ({
           </Stack>
         </Stack>
       </CardContent>
-      <CardContent>
-        <Stack direction="row">
-          <IconButton>
-            <ShareIcon />
-          </IconButton>
-          <IconButton>
-            <BookmarkIcon />
-          </IconButton>
-          <IconButton>
-            <ChatBubbleOutlineIcon />
-          </IconButton>
-          <IconButton>
-            <ThumbUpIcon />
-          </IconButton>
-          <IconButton onClick={handleClick}>
-            <MoreHorizIcon />
-          </IconButton>
-          <Button variant="text" endIcon={<ExpandCircleDownIcon />}>
-            Details
-          </Button>
-          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-            <MenuItem onClick={handleClose}>Option 1</MenuItem>
-            <MenuItem onClick={handleClose}>Option 2</MenuItem>
-          </Menu>
-        </Stack>
-      </CardContent>
+      <CardActions disableSpacing>
+        <IconButton>
+          <ShareIcon />
+        </IconButton>
+        <IconButton>
+          <BookmarkIcon />
+        </IconButton>
+        <IconButton>
+          <ChatBubbleOutlineIcon />
+        </IconButton>
+        <IconButton>
+          <ThumbUpIcon />
+        </IconButton>
+        <IconButton onClick={handleClick}>
+          <MoreHorizIcon />
+        </IconButton>
+        <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleClose}>Option 1</MenuItem>
+          <MenuItem onClick={handleClose}>Option 2</MenuItem>
+        </Menu>
+      </CardActions>
     </Card>
   );
 };