Pkg
Stats

npm package discovery and stats viewer.

Discover Tips

General search
[free text search, go nuts!]
Package details
pkg:[package-name]
User packages
@[username]

Sponsor

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Twitter
@PkgStats
GitHub
pkgstats
Twitter
@ryanhefner
GitHub
ryanhefner
Site
ryanhefner.com

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

Framework
react / react-dom
Server
next / express / next-routes
Data Store
redux / react-redux / next-redux-wrapper / redux-thunk / redux-logger
Caching
lru-cache
CSS / Styling
next-page-transitions / styled-components
Typeface
@ibm/plex
Avatars
gravatar
Data Viz
chart.js / react-sparklines
Date formatting
dayjs
Infinite scrolling
react-scroll-trigger
Markdown rendering
react-markdown
Repository url parsing
hosted-git-info
User data
npm-user
Compiling
babel-plugin-module-resolver / babel-plugin-styled-components
Types
prop-types
Odds & Ends
es6-promise / isomorphic-fetch

© 2024 – Pkg Stats / Ryan Hefner

@procore/labs-comments

v1.2.2

Published

2 hours ago

A component to render comments, with avatar

Downloads

221

0High
0Medium
0Low

andreszorrilla-procore

amit.gurav-contractor

kuldeepsingh4556

karina.mendez-contractor

saurasumprocore

abhishekkumar123

aleh.haurylenia-contractor

viktoriia_azarovska

ashish.sharma2024

daniel-pierre-procore

mathenes_procore

vinoth.kuppusamy

mariia.solodovnik

cassianomatos-procore

alan.facchini-contractor

bohdan-horai-procore

fernandocamilotti

connie-feng-procore

ganesh.raghupathy

alyelashram_procore

stephanie.brereton

procore-oss-user

codyrobertsprocore

miguel.garcia-procore

mustafa-abdelrahman

elewando-procore

cody_schindler_procore

jamie-dugan-procore

hgouhierprocore

mike-arndt-procore

david-christensen-procore

chance.eakin.procore

ihor.diachenko_procore

pwhisenhunt-procore

dlameter-procore

abhijit-procore

mustafa-u-abdelrahman

rajatmenhdiratta

jacksonleach-procore

tatsiana.clifton

srichaitanya.peddinti

jgreene_procore

daniel.ferreira-contractor

dmccraw-procore

stevenliprocore

rodrigo.dejuana

sean.spearman.procore

kylemartinez-procore

andres-mendez-procore

gaurav.sharma.procore

victorbendeck-pc

evan.cerwonka.procore

ilya.dryha-contractor

matt.harris0223

andersonbispoprocore

scorgiat-procore

sateesh-kadiyala-procore

mehrdad-panahandeh

tyler.wasden.procore

dineshkumar.jayak

ryanfuentesprocore

brocktillotsonprocore

dtorres-procore

ajaykumar-procore

lalovar-procore

devin.cunningham.procore

abhijit.patwardhan

apcarroll_procore

allenanle.procore

jeremy.bouzigard

dev-account-admin

juliana.hernandez

procore-it-support

rachel.arkebauer

procore-npm-bot

james.dabbs-procore

laurenbrandsteinprocore

scottbieser-procore

zach.mckenzie.procore

shayonj_procore

derek-carter-procore

stephan-procore

aleclarsenprocore

Comments

The description.

Installation

yarn add @procore/labs-comments

Usage

import * as Comments from '@procore/labs-comments';

const MyComments = () => {
    const today = new Date();
    const comments = [
        {
            author: 'Evan Freymiller',
            title: 'Software Engineer',
            date: today.toString(),
            body: "This is good news, let's try to get the deal in by Friday.",
        },
        {
            author: 'Evan Freymiller',
            title: 'Software Engineer',
            date: today.toString(),
            body: "Sound good, I'll reach out today.",
        },
        {
            author: 'Evan Freymiller',
            title: 'Software Engineer',
            date: today.toString(),
            body: 'Please let me know by the close of business.',
        },
    ];
    return comments.map((comment, index) => (
        <Comment.Container border={index !== 0}>
            <Comment.Header>
                <Comment.Avatar>{comment.author}</Comment.Avatar>
                <Comment.Author date={comment.date}>
                    <Comment.AuthorName>{comment.author}</Comment.AuthorName>
                    <Comment.AuthorJobTitle>{comment.title}</Comment.AuthorJobTitle>
                </Comment.Author>
            </Comment.Header>
            <Comment.Body>{comment.body}</Comment.Body>
        </Comment.Container>
    ));
}

Components

<Container \/>

| props | type | | :------- | :-------- | | children | reactNode | | border | boolean |

<Body \/>

| props | type | | :------- | :-------- | | children | reactNode |

<Header \/>

| props | type | | :------- | :-------- | | children | reactNode |

<Author \/>

| props | type | | :------- | :------------- | | date | Date or string | | children | reactNode |

<AuthorName \/>

| props | type | | :------- | :-------- | | children | reactNode |

<AuthorJobTitle \/>

| props | type | | :------- | :-------- | | children | reactNode |

<AuthorDate \/>

| props | type | | :------- | :-------- | | children | reactNode |

<Avatar \/>

| props | type | | :------- | :----- | | children | string | | url | string |

<Actions \/>

| props | type | | :------- | :---------------- | | children | array of Action[] | | disabled | boolean | | onSelect | function |

<Action \/>

| props | type | | :------ | :------- | | onClick | function | | key | string |

<Attachment \/>

| props | type | | :------- | :----- | | fileUrl | string | | fileName | string |

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.