From c1e1fb63dac8c9ec62f738393388e64466a5a37b Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Thu, 27 Oct 2022 17:28:36 +0100 Subject: [PATCH 1/3] chore: repo card with story and test --- solidjs-tailwind/README.md | 4 ++ solidjs-tailwind/package.json | 2 + solidjs-tailwind/pnpm-lock.yaml | 17 ++++++ .../PrivacyBadge/PrivacyBadge.stories.jsx | 15 +++++ .../src/components/PrivacyBadge/index.jsx | 12 ++++ .../src/components/RepoCard/RepoCard.spec.jsx | 51 +++++++++++++++++ .../components/RepoCard/RepoCard.stories.jsx | 38 +++++++++++++ .../src/components/RepoCard/data.js | 16 ++++++ .../src/components/RepoCard/index.jsx | 57 +++++++++++++++++++ .../src/components/RepoMeta/index.jsx | 40 +++++++++++++ solidjs-tailwind/src/components/index.js | 3 + .../src/helper/getFriendlyDate.js | 12 ++++ 12 files changed, 267 insertions(+) create mode 100644 solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx create mode 100644 solidjs-tailwind/src/components/PrivacyBadge/index.jsx create mode 100644 solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx create mode 100644 solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx create mode 100644 solidjs-tailwind/src/components/RepoCard/data.js create mode 100644 solidjs-tailwind/src/components/RepoCard/index.jsx create mode 100644 solidjs-tailwind/src/components/RepoMeta/index.jsx create mode 100644 solidjs-tailwind/src/helper/getFriendlyDate.js diff --git a/solidjs-tailwind/README.md b/solidjs-tailwind/README.md index 145cefafe..7e93aeda0 100644 --- a/solidjs-tailwind/README.md +++ b/solidjs-tailwind/README.md @@ -56,6 +56,10 @@ Signals can live outside of components. Each relevant component subscribes to it Demonstrates how to retrieve data from a third-party API by using `createResource`. +#### Other Resources + +- [Solidjs Icons](https://www.npmjs.com/package/solid-icons) + ## Installation ### CLI (Recommended) diff --git a/solidjs-tailwind/package.json b/solidjs-tailwind/package.json index d0218590b..195f5b22f 100644 --- a/solidjs-tailwind/package.json +++ b/solidjs-tailwind/package.json @@ -32,12 +32,14 @@ "@testing-library/jest-dom": "5.16.5", "@typescript-eslint/parser": "5.41.0", "autoprefixer": "10.4.12", + "dayjs": "^1.11.6", "eslint": "8.26.0", "eslint-plugin-solid": "0.7.4", "eslint-plugin-unused-imports": "2.0.0", "jsdom": "20.0.1", "postcss": "8.4.18", "prettier": "2.7.1", + "solid-icons": "^1.0.2", "solid-testing-library": "0.3.0", "storybook-addon-mock": "3.2.0", "tailwindcss": "3.2.1", diff --git a/solidjs-tailwind/pnpm-lock.yaml b/solidjs-tailwind/pnpm-lock.yaml index efb730d6a..a680ae44c 100644 --- a/solidjs-tailwind/pnpm-lock.yaml +++ b/solidjs-tailwind/pnpm-lock.yaml @@ -17,12 +17,14 @@ specifiers: '@testing-library/jest-dom': 5.16.5 '@typescript-eslint/parser': 5.41.0 autoprefixer: 10.4.12 + dayjs: ^1.11.6 eslint: 8.26.0 eslint-plugin-solid: 0.7.4 eslint-plugin-unused-imports: 2.0.0 jsdom: 20.0.1 postcss: 8.4.18 prettier: 2.7.1 + solid-icons: ^1.0.2 solid-js: 1.6.0 solid-testing-library: 0.3.0 storybook-addon-mock: 3.2.0 @@ -52,12 +54,14 @@ devDependencies: '@testing-library/jest-dom': 5.16.5 '@typescript-eslint/parser': 5.41.0_wyqvi574yv7oiwfeinomdzmc3m autoprefixer: 10.4.12_postcss@8.4.18 + dayjs: 1.11.6 eslint: 8.26.0 eslint-plugin-solid: 0.7.4_wyqvi574yv7oiwfeinomdzmc3m eslint-plugin-unused-imports: 2.0.0_eslint@8.26.0 jsdom: 20.0.1 postcss: 8.4.18 prettier: 2.7.1 + solid-icons: 1.0.2_solid-js@1.6.0 solid-testing-library: 0.3.0_solid-js@1.6.0 storybook-addon-mock: 3.2.0 tailwindcss: 3.2.1_postcss@8.4.18 @@ -6998,6 +7002,10 @@ packages: whatwg-url: 11.0.0 dev: true + /dayjs/1.11.6: + resolution: {integrity: sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==} + dev: true + /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -12329,6 +12337,15 @@ packages: - supports-color dev: true + /solid-icons/1.0.2_solid-js@1.6.0: + resolution: {integrity: sha512-Pockp4vkCFFW+uubuRpb50pqKZNzjLhUUDm5VPpcZJWSgDw7fOxnMLcO1fC2bK8l+kYbJOr52y+pB5fnoZXg3Q==} + engines: {node: '>= 16'} + peerDependencies: + solid-js: '*' + dependencies: + solid-js: 1.6.0 + dev: true + /solid-js/1.6.0: resolution: {integrity: sha512-db5s65ErgZnBhapPx77qauzul8akHlMCvirS+Y86U4abMa3uizMVNW9ql3UxbO0yMzMGNpFJwUiOlXmJCbwVpA==} dependencies: diff --git a/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx b/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx new file mode 100644 index 000000000..b49e0378f --- /dev/null +++ b/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx @@ -0,0 +1,15 @@ +import PrivacyBadge from '.'; + +export default { + title: 'Components/PrivacyBadge', + argTypes: { + visibility: {}, + }, +}; + +const Template = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + visibility: 'Public', +}; diff --git a/solidjs-tailwind/src/components/PrivacyBadge/index.jsx b/solidjs-tailwind/src/components/PrivacyBadge/index.jsx new file mode 100644 index 000000000..0e101b706 --- /dev/null +++ b/solidjs-tailwind/src/components/PrivacyBadge/index.jsx @@ -0,0 +1,12 @@ +import { splitProps } from 'solid-js'; + +const PrivacyBadge = (props) => { + const [local] = splitProps(props, ['visibility']); + return ( + + {local.visibility} + + ); +}; + +export default PrivacyBadge; diff --git a/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx new file mode 100644 index 000000000..709006115 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx @@ -0,0 +1,51 @@ +import { Router } from '@solidjs/router'; +import { render } from 'solid-testing-library'; +import { beforeEach, describe, expect, it } from 'vitest'; +import { RepoCard } from '.'; +import { repoCardProps } from './data'; + +describe('RepoCard for profilepage', () => { + let wrapper; + beforeEach(async () => { + wrapper = await render(() => ( + + + + )); + }); + + it('should mount', () => { + expect(wrapper).toBeTruthy(); + }); + + it('a tag text should contain only name', async () => { + const repoName = await wrapper.getByText(repoCardProps.name); + expect(repoName).toBeVisible(); + }); +}); +describe('RepoCard for non profile page', () => { + let wrapper; + const notProfileData = { + ...repoCardProps, + isProfilePage: false, + }; + + beforeEach(async () => { + wrapper = await render(() => ( + + + + )); + }); + + it('should mount', () => { + expect(wrapper).toBeTruthy(); + }); + + it('a tag text should contain owner/name', async () => { + const repowithOwner = await wrapper.getByText( + `${notProfileData.owner.login}/${notProfileData.name}` + ); + expect(repowithOwner).toBeVisible(); + }); +}); diff --git a/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx new file mode 100644 index 000000000..4104a4b1e --- /dev/null +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx @@ -0,0 +1,38 @@ +import { Router } from '@solidjs/router'; +import { RepoCard } from '.'; + +export default { + title: 'Components/Repo Card', + component: RepoCard, + argTypes: { + name: {}, + description: {}, + primaryLanguage: {}, + owner: {}, + isProfilePage: {}, + stargazerCount: {}, + }, +}; + +const Template = (args) => ( + + + +); + +export const Default = Template.bind({}); + +Default.args = { + name: 'cowrywise-unsplashed', + owner: { login: 'hdjerry' }, + isProfilePage: true, + stargazerCount: 2, + visibility: 'Private', + primaryLanguage: { + color: 'yellow', + name: 'Javascript', + }, + description: + 'Using basic pull requests to add your name and github link to BE A MEMBER of ZTM-ng', + updatedAt: '23 Sep 2020', +}; diff --git a/solidjs-tailwind/src/components/RepoCard/data.js b/solidjs-tailwind/src/components/RepoCard/data.js new file mode 100644 index 000000000..c85599066 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoCard/data.js @@ -0,0 +1,16 @@ +export const repoCardProps = { + name: 'cowrywise-unsplashed', + owner: { + login: 'hdjerry', + }, + isProfilePage: true, + stargazerCount: 2, + visibility: 'Private', + primaryLanguage: { + color: 'yellow', + name: 'Javascript', + }, + description: + 'Using basic pull requests to add your name and github link to BE A MEMBER of ZTM-ng', + updatedAt: '23 Sep 2020', +}; diff --git a/solidjs-tailwind/src/components/RepoCard/index.jsx b/solidjs-tailwind/src/components/RepoCard/index.jsx new file mode 100644 index 000000000..82185fe1e --- /dev/null +++ b/solidjs-tailwind/src/components/RepoCard/index.jsx @@ -0,0 +1,57 @@ +import { Link } from '@solidjs/router'; +import { Show, splitProps } from 'solid-js'; +import RepoMeta from '../RepoMeta'; +import { OcStar2 } from 'solid-icons/oc'; +import PrivacyBadge from '../PrivacyBadge'; + +export const RepoCard = (props) => { + const [local] = splitProps(props, [ + 'name', + 'description', + 'primaryLanguage', + 'stargazerCount', + 'owner', + 'isProfilePage', + 'updatedAt', + 'visibility', + ]); + const repoNameWithOwnerLink = () => + `${local.owner?.login || ''}/${local.name || ''}`; + const repoNameWithOwner = () => + `${!local.isProfilePage ? `${local.owner?.login || ''}/` : ''}${ + local.name || '' + }`; + + return ( +
+
+

+ + + {repoNameWithOwner()} + + + +

+ +
+ {local.description} +
+ + +
+
+ +
+
+ ); +}; diff --git a/solidjs-tailwind/src/components/RepoMeta/index.jsx b/solidjs-tailwind/src/components/RepoMeta/index.jsx new file mode 100644 index 000000000..d46cea575 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoMeta/index.jsx @@ -0,0 +1,40 @@ +import { Show, splitProps } from 'solid-js'; +import { OcStar2 } from 'solid-icons/oc'; +import getFriendlyDate from '../../helper/getFriendlyDate'; + +const RepoMeta = (props) => { + const [local] = splitProps(props, [ + 'primaryLanguage', + 'stargazerCount', + 'updatedAt', + ]); + + const friendlyUpdatedAt = () => getFriendlyDate(local.updatedAt); + + return ( +
+ +
+ + {local.primaryLanguage.name} +
+ + +
+ + + + {local.stargazerCount} +
+ + Updated {friendlyUpdatedAt()} +
+ ); +}; + +export default RepoMeta; diff --git a/solidjs-tailwind/src/components/index.js b/solidjs-tailwind/src/components/index.js index 8b537425d..081d91eb5 100644 --- a/solidjs-tailwind/src/components/index.js +++ b/solidjs-tailwind/src/components/index.js @@ -1,4 +1,7 @@ export * from './CounterExample'; export * from './FetchExample'; +export * from './RepoMeta'; +export * from './RepoCard'; +export * from './PrivacyBadge'; export { default as PageHeader } from './PageHeader'; export { default as PageFooter } from './PageFooter'; diff --git a/solidjs-tailwind/src/helper/getFriendlyDate.js b/solidjs-tailwind/src/helper/getFriendlyDate.js new file mode 100644 index 000000000..51a0a8936 --- /dev/null +++ b/solidjs-tailwind/src/helper/getFriendlyDate.js @@ -0,0 +1,12 @@ +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; + +const getFriendlyDate = (dateStr) => { + dayjs.extend(relativeTime); + + const formatted = dayjs(dateStr).fromNow(); + + return formatted; +}; + +export default getFriendlyDate; From 15a18879f1d2b04e55cb14bc92aadfc3349c84ae Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Mon, 31 Oct 2022 09:00:26 +0100 Subject: [PATCH 2/3] fix comments --- .../PrivacyBadge/{index.jsx => PrivacyBadge.jsx} | 0 .../src/components/PrivacyBadge/index.js | 1 + .../RepoCard/{index.jsx => RepoCard.jsx} | 4 ++-- .../src/components/RepoCard/RepoCard.stories.jsx | 14 ++------------ solidjs-tailwind/src/components/RepoCard/index.js | 1 + .../RepoMeta/{index.jsx => RepoMeta.jsx} | 0 solidjs-tailwind/src/components/RepoMeta/index.js | 1 + 7 files changed, 7 insertions(+), 14 deletions(-) rename solidjs-tailwind/src/components/PrivacyBadge/{index.jsx => PrivacyBadge.jsx} (100%) create mode 100644 solidjs-tailwind/src/components/PrivacyBadge/index.js rename solidjs-tailwind/src/components/RepoCard/{index.jsx => RepoCard.jsx} (94%) create mode 100644 solidjs-tailwind/src/components/RepoCard/index.js rename solidjs-tailwind/src/components/RepoMeta/{index.jsx => RepoMeta.jsx} (100%) create mode 100644 solidjs-tailwind/src/components/RepoMeta/index.js diff --git a/solidjs-tailwind/src/components/PrivacyBadge/index.jsx b/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.jsx similarity index 100% rename from solidjs-tailwind/src/components/PrivacyBadge/index.jsx rename to solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.jsx diff --git a/solidjs-tailwind/src/components/PrivacyBadge/index.js b/solidjs-tailwind/src/components/PrivacyBadge/index.js new file mode 100644 index 000000000..b351cd746 --- /dev/null +++ b/solidjs-tailwind/src/components/PrivacyBadge/index.js @@ -0,0 +1 @@ +export { default as PrivacyBadge } from './PrivacyBadge'; diff --git a/solidjs-tailwind/src/components/RepoCard/index.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.jsx similarity index 94% rename from solidjs-tailwind/src/components/RepoCard/index.jsx rename to solidjs-tailwind/src/components/RepoCard/RepoCard.jsx index 82185fe1e..8b315226a 100644 --- a/solidjs-tailwind/src/components/RepoCard/index.jsx +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.jsx @@ -1,8 +1,8 @@ import { Link } from '@solidjs/router'; import { Show, splitProps } from 'solid-js'; -import RepoMeta from '../RepoMeta'; +import RepoMeta from '../RepoMeta/RepoMeta'; import { OcStar2 } from 'solid-icons/oc'; -import PrivacyBadge from '../PrivacyBadge'; +import PrivacyBadge from '../PrivacyBadge/PrivacyBadge'; export const RepoCard = (props) => { const [local] = splitProps(props, [ diff --git a/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx index 4104a4b1e..90845974d 100644 --- a/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx @@ -1,5 +1,6 @@ import { Router } from '@solidjs/router'; import { RepoCard } from '.'; +import { repoCardProps } from './data'; export default { title: 'Components/Repo Card', @@ -23,16 +24,5 @@ const Template = (args) => ( export const Default = Template.bind({}); Default.args = { - name: 'cowrywise-unsplashed', - owner: { login: 'hdjerry' }, - isProfilePage: true, - stargazerCount: 2, - visibility: 'Private', - primaryLanguage: { - color: 'yellow', - name: 'Javascript', - }, - description: - 'Using basic pull requests to add your name and github link to BE A MEMBER of ZTM-ng', - updatedAt: '23 Sep 2020', + ...repoCardProps, }; diff --git a/solidjs-tailwind/src/components/RepoCard/index.js b/solidjs-tailwind/src/components/RepoCard/index.js new file mode 100644 index 000000000..dda4f06a3 --- /dev/null +++ b/solidjs-tailwind/src/components/RepoCard/index.js @@ -0,0 +1 @@ +export { default as RepoCard } from './RepoCard'; diff --git a/solidjs-tailwind/src/components/RepoMeta/index.jsx b/solidjs-tailwind/src/components/RepoMeta/RepoMeta.jsx similarity index 100% rename from solidjs-tailwind/src/components/RepoMeta/index.jsx rename to solidjs-tailwind/src/components/RepoMeta/RepoMeta.jsx diff --git a/solidjs-tailwind/src/components/RepoMeta/index.js b/solidjs-tailwind/src/components/RepoMeta/index.js new file mode 100644 index 000000000..12b089b8a --- /dev/null +++ b/solidjs-tailwind/src/components/RepoMeta/index.js @@ -0,0 +1 @@ +export { default as RepoMeta } from './RepoMeta'; From 89e9c613ace9b32c1cc472106d04c02545a0449c Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Mon, 31 Oct 2022 09:17:24 +0100 Subject: [PATCH 3/3] fix coment --- .../src/components/PrivacyBadge/PrivacyBadge.stories.jsx | 2 +- solidjs-tailwind/src/components/RepoCard/RepoCard.jsx | 5 ++++- solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx | 2 +- .../src/components/RepoCard/RepoCard.stories.jsx | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx b/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx index b49e0378f..d689f1d65 100644 --- a/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx +++ b/solidjs-tailwind/src/components/PrivacyBadge/PrivacyBadge.stories.jsx @@ -1,4 +1,4 @@ -import PrivacyBadge from '.'; +import PrivacyBadge from './PrivacyBadge'; export default { title: 'Components/PrivacyBadge', diff --git a/solidjs-tailwind/src/components/RepoCard/RepoCard.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.jsx index 8b315226a..001d7d053 100644 --- a/solidjs-tailwind/src/components/RepoCard/RepoCard.jsx +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.jsx @@ -4,7 +4,7 @@ import RepoMeta from '../RepoMeta/RepoMeta'; import { OcStar2 } from 'solid-icons/oc'; import PrivacyBadge from '../PrivacyBadge/PrivacyBadge'; -export const RepoCard = (props) => { +const RepoCard = (props) => { const [local] = splitProps(props, [ 'name', 'description', @@ -55,3 +55,6 @@ export const RepoCard = (props) => { ); }; + + +export default RepoCard; diff --git a/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx index 709006115..73c862d58 100644 --- a/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.spec.jsx @@ -1,7 +1,7 @@ import { Router } from '@solidjs/router'; import { render } from 'solid-testing-library'; import { beforeEach, describe, expect, it } from 'vitest'; -import { RepoCard } from '.'; +import RepoCard from './RepoCard'; import { repoCardProps } from './data'; describe('RepoCard for profilepage', () => { diff --git a/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx b/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx index 90845974d..d621d0f98 100644 --- a/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx +++ b/solidjs-tailwind/src/components/RepoCard/RepoCard.stories.jsx @@ -1,5 +1,5 @@ import { Router } from '@solidjs/router'; -import { RepoCard } from '.'; +import RepoCard from './RepoCard'; import { repoCardProps } from './data'; export default {