8 | We prepared a TLDR for you inside 9 |
my comment
', 8 | author, 9 | createdAt: new Date(2017, 1, 10, 0, 0).toISOString(), 10 | permalink: 'https://daily.dev', 11 | numUpvotes: 0, 12 | }; 13 | 14 | export default comment; 15 | -------------------------------------------------------------------------------- /packages/shared/__tests__/helpers/tanstack-query.tsx: -------------------------------------------------------------------------------- 1 | import type { QueryClientConfig } from '@tanstack/react-query'; 2 | 3 | export const defaultQueryClientTestingConfig: QueryClientConfig = { 4 | defaultOptions: { 5 | queries: { 6 | retry: false, 7 | }, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/shared/custom.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css'; 2 | 3 | type SvgrComponent = React.FC
9 |
10 |
12 |
13 | );
14 | }
15 |
16 | export default FeedErrorScreen;
17 |
--------------------------------------------------------------------------------
/packages/shared/src/components/LoaderOverlay.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement } from 'react';
2 | import React from 'react';
3 | import type { LoaderProps } from './Loader';
4 | import { Loader } from './Loader';
5 |
6 | export function LoaderOverlay({ ...props }: LoaderProps): ReactElement {
7 | return (
8 |
9 |
11 | );
12 | }
13 |
14 | export default LoaderOverlay;
15 |
--------------------------------------------------------------------------------
/packages/shared/src/components/MainFeedLayout.module.css:
--------------------------------------------------------------------------------
1 | .welcome {
2 | max-width: 23rem;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/shared/src/components/auth/AuthOptions.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement } from 'react';
2 | import React from 'react';
3 | import { AuthDataProvider } from '../../contexts/AuthDataContext';
4 | import AuthOptionsInner from './AuthOptionsInner';
5 | import type { AuthOptionsProps } from './common';
6 |
7 | function AuthOptions({
8 | initialEmail = '',
9 | ...props
10 | }: AuthOptionsProps): ReactElement {
11 | return (
12 |
8 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/packages/shared/src/components/feeds/index.ts:
--------------------------------------------------------------------------------
1 | export * from './FeedContainer';
2 | export * from './PreparingYourFeed';
3 | export * from './FeedCustomPreview';
4 | export * from './FeedCustomActions';
5 | export * from './FeedPreviewControls';
6 |
--------------------------------------------------------------------------------
/packages/shared/src/components/fields/Dropdown.module.css:
--------------------------------------------------------------------------------
1 | .dropdown {
2 | & button {
3 | & :global(.icon) {
4 | font-size: 1.5rem;
5 | margin-right: 0.5rem;
6 | }
7 |
8 | &:focus,
9 | &[aria-expanded='true'] {
10 | color: var(--theme-text-primary);
11 | background: transparent;
12 | outline: none;
13 | box-shadow: inset 0 0 0 0.0625rem var(--theme-text-primary);
14 |
15 | & .chevron {
16 | color: var(--theme-text-primary);
17 | }
18 | }
19 | }
20 | }
21 |
22 | .item:global(.h-auto) > * {
23 | height: auto !important;
24 | }
25 |
--------------------------------------------------------------------------------
/packages/shared/src/components/fields/form/common.tsx:
--------------------------------------------------------------------------------
1 | export enum WriteFormTab {
2 | Share = 'Share a link',
3 | NewPost = 'New post',
4 | }
5 |
6 | export const WriteFormTabToFormID = {
7 | [WriteFormTab.Share]: 'write-post-link',
8 | [WriteFormTab.NewPost]: 'write-post-freeform',
9 | };
10 |
--------------------------------------------------------------------------------
/packages/shared/src/components/fields/form/index.ts:
--------------------------------------------------------------------------------
1 | export * from './FormWrapper';
2 |
--------------------------------------------------------------------------------
/packages/shared/src/components/filters/Test.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement } from 'react';
2 | import React from 'react';
3 |
4 | export default function Test(): ReactElement {
5 | return Testing inside sidebar component
;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/shared/src/components/footer/index.ts:
--------------------------------------------------------------------------------
1 | export * from './FooterLinks';
2 |
--------------------------------------------------------------------------------
/packages/shared/src/components/header/index.ts:
--------------------------------------------------------------------------------
1 | export * from './BreadCrumbs';
2 | export * from './FeedExploreHeader';
3 |
--------------------------------------------------------------------------------
/packages/shared/src/components/icons/AddUser/index.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement } from 'react';
2 | import React from 'react';
3 | import type { IconProps } from '../../Icon';
4 | import Icon from '../../Icon';
5 | import FilledIcon from './filled.svg';
6 | import OutlinedIcon from './outlined.svg';
7 |
8 | export const AddUserIcon = (props: IconProps): ReactElement => (
9 |
9 |
11 | );
12 |
13 | export const NewSquadIcon = (props: IconProps): ReactElement => (
14 |
15 | Joined
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/packages/shared/src/components/profile/ProfileForm.module.css:
--------------------------------------------------------------------------------
1 | .optionalFields {
2 | &[open] {
3 | padding-bottom: 0.75rem;
4 | }
5 | }
6 |
7 | .optionalSummary + .sectionHeading {
8 | margin-top: 0.75rem;
9 | }
10 |
11 | .optionalFields + .sectionHeading {
12 | margin-top: 2.5rem;
13 | }
14 |
15 | .sectionHeading + .formSwitch {
16 | margin-top: -0.25rem;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/shared/src/components/profile/common.module.css:
--------------------------------------------------------------------------------
1 | .commentContent {
2 | max-height: 3.75rem;
3 | -webkit-line-clamp: 3;
4 |
5 | @screen tablet {
6 | max-width: 19.25rem;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/shared/src/components/profile/devcard/index.ts:
--------------------------------------------------------------------------------
1 | export * from './DevCard';
2 | export * from './DevCardTwitterCover';
3 | export * from './DevCardStats';
4 | export * from './DevCardStatsSection';
5 | export * from './DevCardFooter';
6 | export * from './DevCardContainer';
7 | export * from './common';
8 |
--------------------------------------------------------------------------------
/packages/shared/src/components/profile/source/index.ts:
--------------------------------------------------------------------------------
1 | export * from './SourceShortInfo';
2 | export * from './SourceAvatar';
3 |
--------------------------------------------------------------------------------
/packages/shared/src/components/referral/index.ts:
--------------------------------------------------------------------------------
1 | export * from './InviteLinkInput';
2 |
--------------------------------------------------------------------------------
/packages/shared/src/components/search/SearchMessage.module.css:
--------------------------------------------------------------------------------
1 | @keyframes caretBlink {
2 | from,
3 | to {
4 | background: transparent;
5 | }
6 | 50% {
7 | background: var(--theme-accent-cabbage-default);
8 | }
9 | }
10 |
11 | /* blink caret and the end of last element */
12 | .caret > *:last-child:after {
13 | content: "";
14 | display: inline-block;
15 | width: 8px;
16 | height: 1rem;
17 | vertical-align: text-bottom;
18 | animation: caretBlink 400ms step-end infinite;
19 | margin-left: 2px;
20 | background: var(--theme-accent-cabbage-default);
21 | }
22 |
--------------------------------------------------------------------------------
/packages/shared/src/components/search/SearchPanel/SearchPanelInputContainer.tsx:
--------------------------------------------------------------------------------
1 | import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
2 | import React from 'react';
3 |
4 | export type SearchPanelItemContainerProps = {
5 | children?: ReactNode;
6 | } & HTMLAttributes
9 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/packages/shared/src/components/squads/Members/index.ts:
--------------------------------------------------------------------------------
1 | export * from './BlockedMembersPlaceholder';
2 |
--------------------------------------------------------------------------------
/packages/shared/src/components/squads/index.ts:
--------------------------------------------------------------------------------
1 | export * from '../cards/squad/SquadGrid';
2 |
--------------------------------------------------------------------------------
/packages/shared/src/components/squads/settings/index.ts:
--------------------------------------------------------------------------------
1 | export * from './SquadSettingsSection';
2 |
--------------------------------------------------------------------------------
/packages/shared/src/components/streak/popup/StreakSection.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement } from 'react';
2 | import React from 'react';
3 |
4 | interface StreakSectionProps {
5 | streak: number;
6 | label: string;
7 | }
8 |
9 | export function StreakSection({
10 | streak,
11 | label,
12 | }: StreakSectionProps): ReactElement {
13 | return (
14 |
15 | {streak}
16 | No blocked members found
11 |{label}
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /packages/shared/src/components/streak/popup/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ReadingStreakPopup'; 2 | export * from './StreakSection'; 3 | export * from './DayStreak'; 4 | -------------------------------------------------------------------------------- /packages/shared/src/components/tabs/common.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react'; 2 | 3 | export type RenderTab = ({ 4 | label, 5 | isActive, 6 | }: { 7 | label: string; 8 | isActive: boolean; 9 | }) => ReactNode | null; 10 | -------------------------------------------------------------------------------- /packages/shared/src/components/tags/common.tsx: -------------------------------------------------------------------------------- 1 | import type { Tag } from '../../graphql/feedSettings'; 2 | 3 | export type OnSelectTagProps = { 4 | tag: Tag; 5 | action: 'follow' | 'unfollow'; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/shared/src/components/text/Anchor.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactElement } from 'react'; 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | 5 | export function Anchor({ 6 | className, 7 | children, 8 | ...props 9 | }: JSX.IntrinsicElements['a']): ReactElement { 10 | return ( 11 | 18 | {children} 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/shared/src/components/text/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Anchor'; 2 | -------------------------------------------------------------------------------- /packages/shared/src/components/tooltips/index.ts: -------------------------------------------------------------------------------- 1 | export * from './SimpleTooltip'; 2 | -------------------------------------------------------------------------------- /packages/shared/src/components/tooltips/notifications/index.ts: -------------------------------------------------------------------------------- 1 | export * from './NotificationPreferenceMenu'; 2 | -------------------------------------------------------------------------------- /packages/shared/src/components/tooltips/utils.ts: -------------------------------------------------------------------------------- 1 | import classed from '../../lib/classed'; 2 | 3 | export const Bubble = classed( 4 | 'span', 5 | 'absolute flex justify-center items-center min-w-[1.25rem] min-h-[1.25rem] font-normal text-white rounded-8 bg-accent-cabbage-default typo-subhead', 6 | ); 7 | 8 | export const Badge = classed( 9 | 'span', 10 | 'flex flex-row justify-center items-center p-1 px-2 mr-2 rounded-full bg-accent-cabbage-default typo-caption1', 11 | ); 12 | -------------------------------------------------------------------------------- /packages/shared/src/components/utilities/index.ts: -------------------------------------------------------------------------------- 1 | export * from './common'; 2 | export * from './Divider'; 3 | export * from './SelectableLink'; 4 | export * from './DateFormat'; 5 | -------------------------------------------------------------------------------- /packages/shared/src/components/utilities/loaders/common.ts: -------------------------------------------------------------------------------- 1 | import classed from '../../../lib/classed'; 2 | import { ElementPlaceholder } from '../../ElementPlaceholder'; 3 | 4 | export const Pill = classed(ElementPlaceholder, 'h-8 rounded-12'); 5 | -------------------------------------------------------------------------------- /packages/shared/src/components/utilities/loaders/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './common'; 2 | export * from './generic'; 3 | -------------------------------------------------------------------------------- /packages/shared/src/components/utilities/utilities.module.css: -------------------------------------------------------------------------------- 1 | .pageContainer { 2 | max-width: $pageMaxWidth; 3 | margin: auto; 4 | 5 | @screen laptop { 6 | width: $pageMaxWidth; 7 | margin-left: calc(50% - (($pageMaxWidth / 2) - 3rem)); 8 | } 9 | 10 | @screen laptopL { 11 | width: $pageMaxWidth; 12 | margin: auto; 13 | } 14 | 15 | &:global(.modal-post) { 16 | margin: unset; 17 | } 18 | } 19 | 20 | .feedPage { 21 | &.notReady { 22 | & > * { 23 | visibility: hidden; 24 | } 25 | } 26 | } 27 | 28 | .activeTabIndicator { 29 | border-radius: 0.063rem; 30 | } 31 | -------------------------------------------------------------------------------- /packages/shared/src/components/video/common.ts: -------------------------------------------------------------------------------- 1 | import classed from '../../lib/classed'; 2 | 3 | export const YoutubeVideoContainer = classed( 4 | 'div', 5 | 'relative w-full overflow-hidden rounded-16 pt-[56.25%]', 6 | ); 7 | 8 | export const YoutubeVideoBackground = classed( 9 | 'div', 10 | 'absolute inset-0 z-1 flex flex-col bg-surface-float p-6', 11 | ); 12 | -------------------------------------------------------------------------------- /packages/shared/src/components/widgets/PostToc.module.css: -------------------------------------------------------------------------------- 1 | .details { 2 | &[open] { 3 | padding-bottom: 0.75rem; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/shared/src/components/widgets/common.ts: -------------------------------------------------------------------------------- 1 | import classed from '../../lib/classed'; 2 | import { ElementPlaceholder } from '../ElementPlaceholder'; 3 | 4 | export const widgetClasses = 5 | 'border border-border-subtlest-tertiary rounded-16'; 6 | 7 | export const WidgetContainer = classed('div', widgetClasses); 8 | 9 | export const TextPlaceholder = classed( 10 | ElementPlaceholder, 11 | 'h-3 rounded-12 my-0.5', 12 | ); 13 | 14 | export const PlaceholderSeparator = classed( 15 | 'div', 16 | 'h-px bg-border-subtlest-tertiary', 17 | ); 18 | -------------------------------------------------------------------------------- /packages/shared/src/contexts/WriteCommentContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | import type { UseMutateCommentResult } from '../hooks/post/useMutateComment'; 3 | 4 | interface WriteCommentContextProp { 5 | mutateComment: UseMutateCommentResult; 6 | } 7 | 8 | export const WriteCommentContext = createContext