diff --git a/solidjs-tailwind/README.md b/solidjs-tailwind/README.md index 7e93aeda0..afa75b8a2 100644 --- a/solidjs-tailwind/README.md +++ b/solidjs-tailwind/README.md @@ -89,7 +89,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 48fd5ec1c..6939178b6 100644 --- a/solidjs-tailwind/package.json +++ b/solidjs-tailwind/package.json @@ -50,6 +50,7 @@ "@heroicons/react": "1.0.5" }, "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 a680ae44c..e4401d8b1 100644 --- a/solidjs-tailwind/pnpm-lock.yaml +++ b/solidjs-tailwind/pnpm-lock.yaml @@ -24,6 +24,7 @@ specifiers: jsdom: 20.0.1 postcss: 8.4.18 prettier: 2.7.1 + solid-heroicons: ^3.1.0 solid-icons: ^1.0.2 solid-js: 1.6.0 solid-testing-library: 0.3.0 @@ -35,6 +36,7 @@ specifiers: vitest: 0.24.3 dependencies: + solid-heroicons: 3.1.0_solid-js@1.6.0 solid-js: 1.6.0 devDependencies: @@ -12337,6 +12339,13 @@ 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-icons/1.0.2_solid-js@1.6.0: resolution: {integrity: sha512-Pockp4vkCFFW+uubuRpb50pqKZNzjLhUUDm5VPpcZJWSgDw7fOxnMLcO1fC2bK8l+kYbJOr52y+pB5fnoZXg3Q==} engines: {node: '>= 16'} 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 70f011b51..b6eda55dd 100644 --- a/solidjs-tailwind/src/components/index.js +++ b/solidjs-tailwind/src/components/index.js @@ -1,5 +1,7 @@ export * from './CounterExample'; export * from './FetchExample'; +export * from './UserProfile'; +export * from './Icons'; export * from './RepoFilter'; export * from './GistPanel'; export * from './RepoMeta';