Skip to content

Commit

Permalink
Guide page setup (#31)
Browse files Browse the repository at this point in the history
* feat: add navigation

* feat: add footer

* fix: update types

* fix: attempt to fix font issue

* fix: coderabbit comments

* styling breadcrumbs and toc

* stylize breadcrumb sidenav prev next links and rebase

* add sentiment track block

* add icons

* rebase

* suppress prop type for swizzled files

* add aria label and remove unnecessary files

* refactor and add gif to prettier ignore

* remove unnecessary swizzled files

* fix preview

* remove files

* remove files

* add wrapper to toc

---------

Co-authored-by: Sohee Lim <[email protected]>
  • Loading branch information
nahbee10 and limsohee1002 authored Nov 18, 2024
1 parent 59d45bb commit ba6864f
Show file tree
Hide file tree
Showing 22 changed files with 471 additions and 54 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: {},
},
}
162 changes: 162 additions & 0 deletions src/components/Icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ export const Menu: FC<{
</svg>
)
}

export const Moon: FC<{
className?: string
color?: 'neutral-2'
Expand All @@ -186,6 +187,167 @@ export const Moon: FC<{
)
}

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 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 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 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 ba6864f

Please sign in to comment.