From ab4697a70ddbcebf8274a1f6fc99634132fce761 Mon Sep 17 00:00:00 2001 From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com> Date: Fri, 4 Nov 2022 18:00:30 +0100 Subject: [PATCH] [solidjs-tailwinf] Add user profile card --- solidjs-tailwind/README.md | 2 +- solidjs-tailwind/package.json | 1 + solidjs-tailwind/pnpm-lock.yaml | 10 ++ .../src/components/Icons/TwitterIcon.jsx | 15 +++ .../src/components/Icons/index.js | 1 + .../src/components/UserProfile/OrgList.jsx | 19 ++++ .../components/UserProfile/UserProfile.jsx | 101 ++++++++++++++++++ .../UserProfile/UserProfile.spec.jsx | 30 ++++++ .../UserProfile/UserProfile.stories.jsx | 19 ++++ .../src/components/UserProfile/data.js | 18 ++++ .../src/components/UserProfile/index.js | 1 + solidjs-tailwind/src/components/index.js | 2 + 12 files changed, 218 insertions(+), 1 deletion(-) create mode 100644 solidjs-tailwind/src/components/Icons/TwitterIcon.jsx create mode 100644 solidjs-tailwind/src/components/Icons/index.js create mode 100644 solidjs-tailwind/src/components/UserProfile/OrgList.jsx create mode 100644 solidjs-tailwind/src/components/UserProfile/UserProfile.jsx create mode 100644 solidjs-tailwind/src/components/UserProfile/UserProfile.spec.jsx create mode 100644 solidjs-tailwind/src/components/UserProfile/UserProfile.stories.jsx create mode 100644 solidjs-tailwind/src/components/UserProfile/data.js create mode 100644 solidjs-tailwind/src/components/UserProfile/index.js diff --git a/solidjs-tailwind/README.md b/solidjs-tailwind/README.md index 145cefafe..e7a1fb991 100644 --- a/solidjs-tailwind/README.md +++ b/solidjs-tailwind/README.md @@ -85,7 +85,7 @@ git clone https://github.com/thisdot/starter.dev.git - `pnpm run dev` - Runs the development server on localhost port 3000 with HMR - `pnpm run test` - Runs the test suite -- `pnpm run storbook` - To showcase the component library +- `pnpm run storybook` - To showcase the component library - `pnpm run build` - Builds a production version of the app to deploy - `pnpm run serve` - Serves a production build on localhost port 4173 - `pnpm run lint` - Uses eslint to find potential issues in the codebase diff --git a/solidjs-tailwind/package.json b/solidjs-tailwind/package.json index d0218590b..a75efe4a4 100644 --- a/solidjs-tailwind/package.json +++ b/solidjs-tailwind/package.json @@ -47,6 +47,7 @@ "vitest": "0.24.3" }, "dependencies": { + "solid-heroicons": "^3.1.0", "solid-js": "1.6.0" }, "keywords": [ diff --git a/solidjs-tailwind/pnpm-lock.yaml b/solidjs-tailwind/pnpm-lock.yaml index efb730d6a..02a29ec72 100644 --- a/solidjs-tailwind/pnpm-lock.yaml +++ b/solidjs-tailwind/pnpm-lock.yaml @@ -23,6 +23,7 @@ specifiers: jsdom: 20.0.1 postcss: 8.4.18 prettier: 2.7.1 + solid-heroicons: ^3.1.0 solid-js: 1.6.0 solid-testing-library: 0.3.0 storybook-addon-mock: 3.2.0 @@ -33,6 +34,7 @@ specifiers: vitest: 0.24.3 dependencies: + solid-heroicons: 3.1.0_solid-js@1.6.0 solid-js: 1.6.0 devDependencies: @@ -12329,6 +12331,14 @@ packages: - supports-color dev: true + /solid-heroicons/3.1.0_solid-js@1.6.0: + resolution: {integrity: sha512-cOw5cxS3zgcoOChyvobvHZmHSCinnkkpsiyEiMW+irltb/6iwKq123CUD/W70astfwBvVopnixCQIF19JUzzMA==} + peerDependencies: + solid-js: '>= ^1.2.5' + dependencies: + solid-js: 1.6.0 + dev: false + /solid-js/1.6.0: resolution: {integrity: sha512-db5s65ErgZnBhapPx77qauzul8akHlMCvirS+Y86U4abMa3uizMVNW9ql3UxbO0yMzMGNpFJwUiOlXmJCbwVpA==} dependencies: diff --git a/solidjs-tailwind/src/components/Icons/TwitterIcon.jsx b/solidjs-tailwind/src/components/Icons/TwitterIcon.jsx new file mode 100644 index 000000000..8bb5a2924 --- /dev/null +++ b/solidjs-tailwind/src/components/Icons/TwitterIcon.jsx @@ -0,0 +1,15 @@ +function TwitterIcon(className) { + return ( + + + + + ); +} + +export default TwitterIcon; diff --git a/solidjs-tailwind/src/components/Icons/index.js b/solidjs-tailwind/src/components/Icons/index.js new file mode 100644 index 000000000..93e73e0cc --- /dev/null +++ b/solidjs-tailwind/src/components/Icons/index.js @@ -0,0 +1 @@ +export { default as TwitterIcon } from './TwitterIcon'; diff --git a/solidjs-tailwind/src/components/UserProfile/OrgList.jsx b/solidjs-tailwind/src/components/UserProfile/OrgList.jsx new file mode 100644 index 000000000..44072c242 --- /dev/null +++ b/solidjs-tailwind/src/components/UserProfile/OrgList.jsx @@ -0,0 +1,19 @@ +import { For } from 'solid-js'; +function OrgList(props) { + return ( +
+

Organizations

+
+ + {(props) => ( +
+ Organization +
+ )} + +
+
+ ); +} + +export default OrgList; diff --git a/solidjs-tailwind/src/components/UserProfile/UserProfile.jsx b/solidjs-tailwind/src/components/UserProfile/UserProfile.jsx new file mode 100644 index 000000000..2cc7ad7ab --- /dev/null +++ b/solidjs-tailwind/src/components/UserProfile/UserProfile.jsx @@ -0,0 +1,101 @@ +import { + users, + star, + buildingOffice, + mapPin, + link, +} from 'solid-heroicons/outline'; +import { Icon } from 'solid-heroicons'; +import { TwitterIcon } from '../Icons'; +import OrgList from './OrgList'; + +const UserProfile = (userProfileProps) => { + return ( +
+ Avatar +

+
+ {userProfileProps.name} +
+
+ {userProfileProps.username} +
+

+
{userProfileProps.bio}
+
+ + + + {userProfileProps.followers} + {' '} + followers + + · + + + {userProfileProps.following} + {' '} + following + + · + + + + {userProfileProps.starredRepos} + {' '} + +
+
+ {userProfileProps.company && ( +
+ + {userProfileProps.company} +
+ )} + {userProfileProps.location && ( +
+ + {userProfileProps.location} +
+ )} + {userProfileProps.websiteUrl && ( +
+ + + {userProfileProps.websiteUrl} + +
+ )} + {userProfileProps.twitterUsername && ( +
+ + + @{userProfileProps.twitterUsername} + +
+ )} +
+ {userProfileProps.organizations.length > 0 && ( + + )} +
+ ); +}; + +export default UserProfile; diff --git a/solidjs-tailwind/src/components/UserProfile/UserProfile.spec.jsx b/solidjs-tailwind/src/components/UserProfile/UserProfile.spec.jsx new file mode 100644 index 000000000..95054e474 --- /dev/null +++ b/solidjs-tailwind/src/components/UserProfile/UserProfile.spec.jsx @@ -0,0 +1,30 @@ +import { Router } from '@solidjs/router'; +import { render } from 'solid-testing-library'; +import { beforeEach, describe, expect, it } from 'vitest'; +import UserProfile from './UserProfile.jsx'; +import { userProfileProps } from './data'; + +describe('User profile card', () => { + let wrapper; + beforeEach(async () => { + wrapper = await render(() => ( + + + + )); + }); + + it('should mount', () => { + expect(wrapper).toBeTruthy(); + }); + + it('should show the user display name', async () => { + const fullName = await wrapper.getByText(userProfileProps.name); + expect(fullName).toBeVisible(); + }); + + it('should have a link for user profile picture', async () => { + const avatar = await wrapper.getByAltText('Avatar'); + expect(avatar).toBeVisible(); + }); +}); diff --git a/solidjs-tailwind/src/components/UserProfile/UserProfile.stories.jsx b/solidjs-tailwind/src/components/UserProfile/UserProfile.stories.jsx new file mode 100644 index 000000000..e1e97dd4f --- /dev/null +++ b/solidjs-tailwind/src/components/UserProfile/UserProfile.stories.jsx @@ -0,0 +1,19 @@ +import { Router } from '@solidjs/router'; +import { UserProfile } from '.'; +import { userProfileProps } from './data.js'; + +export default { + title: 'Components/User Profile Card', + component: UserProfile, +}; + +const Template = (args) => ( + + + +); +export const Default = Template.bind({}); + +Default.args = { + ...userProfileProps, +}; diff --git a/solidjs-tailwind/src/components/UserProfile/data.js b/solidjs-tailwind/src/components/UserProfile/data.js new file mode 100644 index 000000000..eb6df462c --- /dev/null +++ b/solidjs-tailwind/src/components/UserProfile/data.js @@ -0,0 +1,18 @@ +export const userProfileProps = { + avatarUrl: 'https://avatars.githubusercontent.com/u/2487968?v=4', + bio: `Senior Software Engineer @thisdot`, + company: '@thisdot', + followers: 24, + following: 20, + location: 'Washington, DC', + login: 'tvanantwerp', + name: 'Tom VanAntwerp', + twitterUsername: 'tvanantwerp', + websiteUrl: 'https://tomvanantwerp.com', + organizations: [ + { + avatarUrl: 'https://avatars.githubusercontent.com/u/22839396?v=4', + login: 'thisdot', + }, + ], +}; diff --git a/solidjs-tailwind/src/components/UserProfile/index.js b/solidjs-tailwind/src/components/UserProfile/index.js new file mode 100644 index 000000000..9281f73c1 --- /dev/null +++ b/solidjs-tailwind/src/components/UserProfile/index.js @@ -0,0 +1 @@ +export {default as UserProfile } from './UserProfile'; diff --git a/solidjs-tailwind/src/components/index.js b/solidjs-tailwind/src/components/index.js index 8b537425d..4e6cdfc93 100644 --- a/solidjs-tailwind/src/components/index.js +++ b/solidjs-tailwind/src/components/index.js @@ -1,4 +1,6 @@ export * from './CounterExample'; export * from './FetchExample'; +export * from './UserProfile'; +export * from './Icons'; export { default as PageHeader } from './PageHeader'; export { default as PageFooter } from './PageFooter';