Skip to content

Commit

Permalink
feat: shield component and tests stats
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 29, 2021
1 parent 04f9cd3 commit 8733a1e
Show file tree
Hide file tree
Showing 31 changed files with 1,212 additions and 706 deletions.
32 changes: 31 additions & 1 deletion plugins/addon-catalog/src/Catalog/__snapshots__/Catalog.test.ts.snap
View file
Expand Up @@ -107,6 +107,36 @@ exports[`Catalog overview snapshot 1`] = `
>
Least commented
</option>
<option
value="passing_desc"
>
Most passing tests
</option>
<option
value="passing_asc"
>
Least passing tests
</option>
<option
value="failed_desc"
>
Most failed tests
</option>
<option
value="failed_asc"
>
Least failed tests
</option>
<option
value="coverage_desc"
>
Highest tests coverage
</option>
<option
value="coverage_asc"
>
Lowest tests coverage
</option>
</select>
<svg
class="css-1swud1q"
Expand Down Expand Up @@ -151,7 +181,7 @@ exports[`Catalog overview snapshot 1`] = `
/>
</div>
<div
class="css-nj7jql-ComponentCard"
class="css-18hcion-ComponentCard"
>
<div
class="css-14a8v30-PackageLink"
Expand Down
85 changes: 29 additions & 56 deletions plugins/addon-catalog/src/ComponentCard/ComponentCard.tsx
View file
Expand Up @@ -44,7 +44,6 @@ export const ComponentCard: FC<ComponentCardProps & BoxProps> = ({
const pckg = component.package
? store.packages[component.package]
: undefined;
const { browse } = pckg?.repository || {};
const title = getStoryTitle(doc, component);
const description = component.info?.description || story?.description;
return (
Expand Down Expand Up @@ -73,6 +72,7 @@ export const ComponentCard: FC<ComponentCardProps & BoxProps> = ({
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
Expand All @@ -83,7 +83,34 @@ export const ComponentCard: FC<ComponentCardProps & BoxProps> = ({
)}
<CommitsPopover component={component} />
</div>

{component.fileInfo && (
<div
sx={{
display: 'flex',
flexDirection: 'row',
my: 1,
justifyContent: 'space-between',
}}
>
<Value
label="created:"
value={
component.fileInfo.dateCreated
? format(component.fileInfo.dateCreated)
: 'N/A'
}
/>
<Value
label="updated:"
value={
component.fileInfo.dateModified
? format(component.fileInfo.dateModified)
: 'N/A'
}
/>
</div>
)}
<ComponentStats component={component} />
<div sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.125)', my: 2 }} />
{description && <Markdown>{description}</Markdown>}
{store.stories[id] && (
Expand All @@ -107,60 +134,6 @@ export const ComponentCard: FC<ComponentCardProps & BoxProps> = ({
/>
</div>
)}

{component.fileInfo && (
<div sx={{ borderTop: '1px solid rgba(0, 0, 0, 0.125)', my: 2 }}>
{component.fileName && (
<div
sx={{
display: 'flex',
flexDirection: 'row',
my: 1,
justifyContent: 'center',
}}
>
<div sx={{ mr: 1, fontWeight: 'bold', fontSize: 2 }}>
{browse ? (
<Link
href={browse}
aria-label="visit component repository source "
>
{component.fileName}
</Link>
) : (
component.fileName
)}
</div>
</div>
)}
<div
sx={{
display: 'flex',
flexDirection: 'row',
my: 1,
justifyContent: 'space-between',
}}
>
<Value
label="created:"
value={
component.fileInfo.dateCreated
? format(component.fileInfo.dateCreated)
: 'N/A'
}
/>
<Value
label="updated:"
value={
component.fileInfo.dateModified
? format(component.fileInfo.dateModified)
: 'N/A'
}
/>
</div>
<ComponentStats component={component} variant="fixed" />
</div>
)}
</Card>
);
};
188 changes: 116 additions & 72 deletions plugins/addon-catalog/src/ComponentCard/__snapshots__/ComponentCard.test.ts.snap
View file
Expand Up @@ -67,7 +67,7 @@ exports[`ComponentCard overview snapshot 1`] = `
</div>
</div>
<div
class="css-nj7jql-ComponentCard"
class="css-18hcion-ComponentCard"
>
<div />
<div
Expand All @@ -94,102 +94,146 @@ exports[`ComponentCard overview snapshot 1`] = `
</div>
</div>
<div
class="css-1akfoys-ComponentCard"
/>
<div
variant="styles.p"
class="css-1lguarf-ComponentCard"
>
Markdown
<strong>
descripton
</strong>
for
<em>
component
</em>
.
<div
class="css-zf8zhj"
>
<span
class="css-13o2efz"
>
created:
</span>
<span
class="css-uv6qe8"
>
N/A
</span>
</div>
<div
class="css-zf8zhj"
>
<span
class="css-13o2efz"
>
updated:
</span>
<span
class="css-uv6qe8"
>
N/A
</span>
</div>
</div>
<div
class="css-pfgifj-ComponentCard"
class="css-1b2gf4v"
>
<div
class="css-1lguarf-ComponentCard"
class="css-ncjsai"
title="total lines of code"
>
<div
class="css-zf8zhj"
class="css-7ucnu2-Shield"
>
<span
class="css-13o2efz"
>
created:
</span>
<span
class="css-uv6qe8"
>
N/A
</span>
loc
</div>
<div
class="css-zf8zhj"
class="css-o4rdbs-Shield"
>
<span
class="css-13o2efz"
>
updated:
</span>
<span
class="css-uv6qe8"
>
N/A
</span>
25
</div>
</div>
<div
class="css-1xa7s2f"
class="css-ncjsai"
title="percentage comments to lines of code"
>
<div
class="css-zf8zhj"
class="css-7ucnu2-Shield"
>
<span
class="css-13o2efz"
>
source lines:
</span>
<span
class="css-uv6qe8"
>
25
</span>
comments
</div>
<div
class="css-loy9lz-ComponentStats"
class="css-38njz9-Shield"
>
<span
class="css-13o2efz"
>
comments %:
</span>
<span
class="css-uv6qe8"
>
4
</span>
4%
</div>
</div>
<div
class="css-ncjsai"
title="total todo comments"
>
<div
class="css-loy9lz-ComponentStats"
class="css-7ucnu2-Shield"
>
<span
class="css-13o2efz"
>
todo lines:
</span>
<span
class="css-uv6qe8"
>
5
</span>
todos
</div>
<div
class="css-o4rdbs-Shield"
>
5
</div>
</div>
<div
class="css-ncjsai"
title="number of passed tests"
>
<div
class="css-7ucnu2-Shield"
>
passed
</div>
<div
class="css-14o9xde-Shield"
>
7
</div>
</div>
<div
class="css-ncjsai"
title="number of failed tests"
>
<div
class="css-7ucnu2-Shield"
>
failed
</div>
<div
class="css-1os9rn1-Shield"
>
1
</div>
</div>
<div
class="css-ncjsai"
title="tests coverage by branches"
>
<div
class="css-7ucnu2-Shield"
>
coverage
</div>
<div
class="css-otdzg2-Shield"
>
67%
</div>
</div>
</div>
<div
class="css-1akfoys-ComponentCard"
/>
<div
variant="styles.p"
>
Markdown
<strong>
descripton
</strong>
for
<em>
component
</em>
.
</div>
</div>
</DocumentFragment>
Expand Down
6 changes: 6 additions & 0 deletions plugins/addon-catalog/src/ComponentFilter/ComponentFilter.tsx
View file
Expand Up @@ -16,6 +16,12 @@ const sortOptions: Record<ComponentCatalogOrder, string> = {
commits_asc: 'Least commits',
comments_desc: 'Most commented',
comments_asc: 'Least commented',
passing_desc: 'Most passing tests',
passing_asc: 'Least passing tests',
failed_desc: 'Most failed tests',
failed_asc: 'Least failed tests',
coverage_desc: 'Highest tests coverage',
coverage_asc: 'Lowest tests coverage',
};
export const ComponentFilter: FC<BoxProps> = props => {
const context = useContext(ComponentCatalogContext);
Expand Down

0 comments on commit 8733a1e

Please sign in to comment.