Skip to content

Commit

Permalink
Merge branch 'main' into feat/home
Browse files Browse the repository at this point in the history
  • Loading branch information
limsohee1002 committed Nov 18, 2024
2 parents 96befd4 + ba6864f commit 1ec546a
Show file tree
Hide file tree
Showing 21 changed files with 468 additions and 52 deletions.
1 change: 1 addition & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
},
"plugins": ["typescript-sort-keys", "unused-imports"],
"rules": {
"react/prop-types": "off",
"typescript-sort-keys/string-enum": [
"error",
"asc",
Expand Down
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
**/.hg
*.mdx
*.md
*.hbs
*.hbs
*.gif
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@
"postcss": "^8.4.47",
"prettier": "3.3.3",
"tailwindcss": "^3.4.13",
"typescript": "^4.8.4"
"typescript": "^4.8.4",
"postcss-import": "^16.1.0"
},
"engines": {
"npm": "please-use-yarn",
Expand Down
8 changes: 8 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('postcss').PostcssConfig} */
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
},
}
161 changes: 161 additions & 0 deletions src/components/Icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,26 @@ export const Npm: FC<{ className?: string }> = ({ className }) => {
)
}

export const Edit: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icon">
<path
id="Vector"
d="M10.6667 14.5001H4C2.388 14.5001 1.5 13.6121 1.5 12.0001V5.33348C1.5 3.72148 2.388 2.83348 4 2.83348H6C6.276 2.83348 6.5 3.05748 6.5 3.33348C6.5 3.60948 6.276 3.83348 6 3.83348H4C2.94867 3.83348 2.5 4.28215 2.5 5.33348V12.0001C2.5 13.0515 2.94867 13.5001 4 13.5001H10.6667C11.718 13.5001 12.1667 13.0515 12.1667 12.0001V10.0001C12.1667 9.72415 12.3907 9.50015 12.6667 9.50015C12.9427 9.50015 13.1667 9.72415 13.1667 10.0001V12.0001C13.1667 13.6121 12.2787 14.5001 10.6667 14.5001ZM13.72 3.35348L12.6466 2.28016C12.2666 1.90682 11.66 1.90681 11.28 2.28681L10.38 3.19349L12.8067 5.62014L13.7133 4.72014C14.0933 4.34014 14.0933 3.73348 13.72 3.35348ZM9.67334 3.90015L5.33333 8.26016V10.6668H7.73999L12.1 6.32681L9.67334 3.90015Z"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/edit-icon:fill-light-neutral-1 group-hover/edit-icon:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
</g>
</svg>
)
}

export const HelpCircle: FC<{
className?: string
color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant'
Expand All @@ -370,6 +390,53 @@ export const HelpCircle: FC<{
)
}

export const Happy: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<circle
cx="10"
cy="10"
r="9"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/positive:stroke-light-neutral-1 group-hover/positive:dark:stroke-dark-neutral-1 group-[.selected]/positive:fill-light-status-success-1 group-[.selected]/positive:dark:fill-dark-status-success-1 group-[.selected]/positive:stroke-light-neutral-1 group-[.selected]/positive:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
strokeWidth="2"
/>
<circle
cx="7"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/positive:fill-light-neutral-1 group-hover/positive:dark:fill-dark-neutral-1 group-[.selected]/positive:fill-light-neutral-1 group-[.selected]/positive:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<circle
cx="13"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/positive:fill-light-neutral-1 group-hover/positive:dark:fill-dark-neutral-1 group-[.selected]/positive:fill-light-neutral-1 group-[.selected]/positive:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<path
d="M6 12C6 12 7.29032 14 10 14C12.7097 14 14 12 14 12"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/positive:stroke-light-neutral-1 group-hover/positive:dark:stroke-dark-neutral-1 group-[.selected]/positive:stroke-light-neutral-1 group-[.selected]/positive:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
)
}

export const Chat: FC<{
className?: string
color?: 'brown-vibrant'
Expand All @@ -386,6 +453,53 @@ export const Chat: FC<{
)
}

export const Neutral: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="none">
<circle
cx="10"
cy="10"
r="9"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/neutral:stroke-light-neutral-1 group-hover/neutral:dark:stroke-dark-neutral-1 group-[.selected]/neutral:fill-light-status-warning-1 group-[.selected]/neutral:dark:fill-dark-status-warning-1 group-[.selected]/neutral:stroke-light-neutral-1 group-[.selected]/neutral:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
strokeWidth="2"
/>
<circle
cx="7"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/neutral:fill-light-neutral-1 group-hover/neutral:dark:fill-dark-neutral-1 group-[.selected]/neutral:fill-light-neutral-1 group-[.selected]/neutral:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<circle
cx="13"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/neutral:fill-light-neutral-1 group-hover/neutral:dark:fill-dark-neutral-1 group-[.selected]/neutral:fill-light-neutral-1 group-[.selected]/neutral:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<path
d="M7 13C7 13 7.96774 13 10 13C12.0323 13 13 13 13 13"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/neutral:stroke-light-neutral-1 group-hover/neutral:dark:stroke-dark-neutral-1 group-[.selected]/neutral:stroke-light-neutral-1 group-[.selected]/neutral:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
)
}

export const Envelope: FC<{
className?: string
color?: 'pink-vibrant' | 'neutral-2'
Expand All @@ -403,6 +517,53 @@ export const Envelope: FC<{
)
}

export const Sad: FC<{
className?: string
color?: 'neutral-2'
}> = ({ className, color = 'neutral-2' }) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="none">
<circle
cx="10"
cy="10"
r="9"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/negative:stroke-light-neutral-1 group-hover/negative:dark:stroke-dark-neutral-1 group-[.selected]/negative:fill-light-status-critical-1 group-[.selected]/negative:dark:fill-dark-status-critical-1 group-[.selected]/negative:stroke-light-neutral-1 group-[.selected]/negative:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
strokeWidth="2"
/>
<circle
cx="7"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/negative:fill-light-neutral-1 group-hover/negative:dark:fill-dark-neutral-1 group-[.selected]/negative:fill-light-neutral-1 group-[.selected]/negative:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<circle
cx="13"
cy="8"
r="1"
className={cn({
'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/negative:fill-light-neutral-1 group-hover/negative:dark:fill-dark-neutral-1 group-[.selected]/negative:fill-light-neutral-1 group-[.selected]/negative:dark:fill-dark-neutral-1':
color === 'neutral-2',
})}
/>
<path
d="M14 13C14 13 12.7097 11 10 11C7.29032 11 6 13 6 13"
className={cn({
'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/negative:stroke-light-neutral-1 group-hover/negative:dark:stroke-dark-neutral-1 group-[.selected]/negative:stroke-light-neutral-1 group-[.selected]/negative:dark:stroke-dark-neutral-1':
color === 'neutral-2',
})}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
)
}

export type Icon = 'sun' | 'moon'

export const IconMap: FC<{
Expand Down
42 changes: 42 additions & 0 deletions src/components/SentimentTracking/SentimentButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react'
import { Sentiment } from '.'
import { TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, DocsSentiment, DocsSentimentSection, SharedEventName } from '@uniswap/analytics-events'
import cn from 'classnames'

interface SentimentButtonProps {
sentiment: Sentiment
icon: React.ReactNode
selected: boolean
onSelect: (sentiment: Sentiment) => void
analyticsSection: DocsSentimentSection
}

const SentimentButton: React.FC<SentimentButtonProps> = ({ sentiment, icon, selected, onSelect, analyticsSection }) => {
const sentimentMap: Record<Sentiment, DocsSentiment> = {
[Sentiment.POSITIVE]: DocsSentiment.POSITIVE_SENTIMENT,
[Sentiment.NEUTRAL]: DocsSentiment.NEUTRAL_SENTIMENT,
[Sentiment.NEGATIVE]: DocsSentiment.NEGATIVE_SENTIMENT,
}

const handleClick = () => onSelect(sentiment)

return (
<TraceEvent
element={sentimentMap[sentiment]}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
<button
onClick={handleClick}
className={cn(`group/${sentiment.toLowerCase()}`, { selected })}
aria-label={`Rate as ${sentiment.toLowerCase()}`}
>
{icon}
</button>
</TraceEvent>
)
}

export default SentimentButton
68 changes: 26 additions & 42 deletions src/components/SentimentTracking/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, DocsSentiment, DocsSentimentSection, SharedEventName } from '@uniswap/analytics-events'
import { DocsSentimentSection } from '@uniswap/analytics-events'
import React, { useCallback, useState } from 'react'
import { Frown, Meh, Smile } from 'react-feather'
import { Happy, Sad, Neutral } from '../Icons'
import SentimentButton from './SentimentButton'

enum Sentiment {
export enum Sentiment {
NEGATIVE = 'NEGATIVE',
NEUTRAL = 'NEUTRAL',
POSITIVE = 'POSITIVE',
Expand All @@ -18,47 +18,31 @@ export default function SentimentTracking({ analyticsSection }: { analyticsSecti
)

return (
<div>
<div>Helpful?</div>
<TraceEvent
element={DocsSentiment.POSITIVE_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
{/* <PositiveSentimentIcon
<div className="flex flex-row space-x-4">
<div className="Sentiment__question">Was this helpful?</div>
<div className="flex flex-row space-x-1">
<SentimentButton
sentiment={Sentiment.POSITIVE}
icon={<Happy className="h-5 w-5 group/positive" />}
selected={isSentimentSelected(Sentiment.POSITIVE)}
onClick={() => {
setSelectedSentiment(Sentiment.POSITIVE)
}}
/> */}
</TraceEvent>
<TraceEvent
element={DocsSentiment.NEUTRAL_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
{/* <NeutralSentimentIcon
onSelect={setSelectedSentiment}
analyticsSection={analyticsSection}
/>
<SentimentButton
sentiment={Sentiment.NEUTRAL}
icon={<Neutral className="h-5 w-5 group/neutral" />}
selected={isSentimentSelected(Sentiment.NEUTRAL)}
onClick={() => {
setSelectedSentiment(Sentiment.NEUTRAL)
}}
/> */}
</TraceEvent>
<TraceEvent
element={DocsSentiment.NEGATIVE_SENTIMENT}
name={SharedEventName.SENTIMENT_SUBMITTED}
events={[BrowserEvent.onClick]}
section={analyticsSection}
>
{/* <NegativeSentimentIcon
onSelect={setSelectedSentiment}
analyticsSection={analyticsSection}
/>
<SentimentButton
sentiment={Sentiment.NEGATIVE}
icon={<Sad className="h-5 w-5 group/negative" />}
selected={isSentimentSelected(Sentiment.NEGATIVE)}
onClick={() => {
setSelectedSentiment(Sentiment.NEGATIVE)
}}
/> */}
</TraceEvent>
onSelect={setSelectedSentiment}
analyticsSection={analyticsSection}
/>
</div>
</div>
)
}
Loading

0 comments on commit 1ec546a

Please sign in to comment.