From f8002d84317903935b61128976d7ab6ab1de5094 Mon Sep 17 00:00:00 2001 From: Pedro Sanches Date: Thu, 31 Aug 2023 14:04:07 -0400 Subject: [PATCH] Revert "initial quiz" --- index.html | 6 - package.json | 18 +- src/components/Quiz/Spinner.jsx | 41 ----- src/components/Quiz/constants.jsx | 233 ----------------------- src/components/Quiz/data.json | 114 ------------ src/components/Quiz/index.jsx | 232 ----------------------- src/components/Quiz/style-utils.js | 146 --------------- src/components/Quiz/styles.js | 287 ----------------------------- src/components/Quiz/utils.js | 72 -------- src/main.jsx | 21 +-- vite.config.js | 10 +- yarn.lock | 114 +----------- 12 files changed, 18 insertions(+), 1276 deletions(-) delete mode 100644 src/components/Quiz/Spinner.jsx delete mode 100644 src/components/Quiz/constants.jsx delete mode 100644 src/components/Quiz/data.json delete mode 100644 src/components/Quiz/index.jsx delete mode 100644 src/components/Quiz/style-utils.js delete mode 100644 src/components/Quiz/styles.js delete mode 100644 src/components/Quiz/utils.js diff --git a/index.html b/index.html index 7294724..7ee43e9 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,6 @@ display: grid; min-height: 100vh; place-items: center; - font-family: sans-serif; - } - - #app { - width: 100%; - height: 100%; } diff --git a/package.json b/package.json index 50a17f8..f202905 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,12 @@ "files": [ "dist" ], - "main": "./dist/audience-quiz.umd.cjs", - "module": "./dist/audience-quiz.js", + "main": "./dist/my-component.umd.cjs", + "module": "./dist/my-component.js", "exports": { ".": { - "import": "./dist/audience-quiz.js", - "require": "./dist/audience-quiz.umd.cjs" + "import": "./dist/my-component.js", + "require": "./dist/my-component.umd.cjs" } }, "scripts": { @@ -20,15 +20,9 @@ "preview": "vite preview" }, "dependencies": { - "array-shuffle": "^3.0.0", - "framer-motion": "^10.16.1", "goober": "^2.1.10", - "lodash.invert": "^4.3.0", - "preact": "^10.17.1", - "preact-custom-element": "^4.2.1", - "process": "^0.11.10", - "react-icons": "^4.10.1", - "react-responsive": "^9.0.2" + "preact": "^10.9.0", + "preact-custom-element": "^4.2.1" }, "devDependencies": { "@preact/preset-vite": "^2.3.0", diff --git a/src/components/Quiz/Spinner.jsx b/src/components/Quiz/Spinner.jsx deleted file mode 100644 index af0b009..0000000 --- a/src/components/Quiz/Spinner.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import {keyframes, styled} from "goober"; - -const rotate = keyframes` - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -`; - -const Wrapper = styled('div')` - width: 50px; - animation: ${rotate} 2s linear infinite; -`; - -const Background = styled('div')` - background: ${({ hideBackground }) => - hideBackground ? "transparent" : "rgba (255, 255, 255, 0.7)"}; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; -`; - -export default function Spinner({ hideBackground }) { - return ( - - - - - - - - ); -} diff --git a/src/components/Quiz/constants.jsx b/src/components/Quiz/constants.jsx deleted file mode 100644 index 2a787d5..0000000 --- a/src/components/Quiz/constants.jsx +++ /dev/null @@ -1,233 +0,0 @@ -import invert from "lodash.invert"; -import {styled} from "goober"; - -const EmojiWrapper = styled('span')` - position: relative; - display: inline-block; -`; -const EmojiColor = styled('span')` - position: absolute; - left: 0; - text-shadow: 0 0 0 ${({ color }) => color}; - color: transparent; - z-index: 1; - mix-blend-mode: hue; - top: 0; -`; -const Emoji = styled('span')` - display: block; - top: 0; - left: 0; -`; - -export const POST_TYPES = { - ARTICLE: "article", - PHOTO: "photo", - MUSIC: "music", - TWITTER: "twitter", - VIDEO: "video", - TV: "tv", -}; - -export const VERSION_DATES = { - v1: 1598227200000, - v2: 1605484800000, -}; - -export const MUSIC_PLAYER_TYPES = { - SPOTIFY: "spotify", -}; - -export const NARRATIVE_TYPES = { - VOTE_FOR_X: "Vote for X", - CAPITAL_AND_LABOR: "Capital & Labor", - SAFETY_NET: "Safety Net", - ROBIN_HOOD: "Robin Hood", - HELPING_HANDS: "Helping Hands", - THE_GRIND: "The Grind", - EQUITY_GAP: "Equity Gap", - NOT_LIKE_US: "Not Like Us", -}; - -export const NARRATIVE_TYPES_ARRAY = [ - NARRATIVE_TYPES.VOTE_FOR_X, - NARRATIVE_TYPES.CAPITAL_AND_LABOR, - NARRATIVE_TYPES.SAFETY_NET, - NARRATIVE_TYPES.ROBIN_HOOD, - NARRATIVE_TYPES.HELPING_HANDS, - NARRATIVE_TYPES.THE_GRIND, - NARRATIVE_TYPES.EQUITY_GAP, - NARRATIVE_TYPES.NOT_LIKE_US, -]; - -export const TOPICS = { - POVERTY: "Poverty", - COVID: "COVID", - BLM: "Black Lives Matter", -}; - -export const AUDIENCE_TYPES = { - PEOPLE_POWER: "People Power", - IF_YOU_SAY_SO: "If You Say So", - TOUGH_COOKIES: "Tough Cookies", - DONT_TREAD_ON_ME: "Don't Tread on Me", -}; - -export const AUDIENCE_TYPES_ARRAY = [ - AUDIENCE_TYPES.PEOPLE_POWER, - AUDIENCE_TYPES.IF_YOU_SAY_SO, - AUDIENCE_TYPES.TOUGH_COOKIES, - AUDIENCE_TYPES.DONT_TREAD_ON_ME, -]; - -export const AUDIENCE_EMOJI = { - PEOPLE_POWER: "✊", - IF_YOU_SAY_SO: "🙃", - TOUGH_COOKIES: "💪️", - DONT_TREAD_ON_ME: "⚡", -}; - -const audienceSlugMapping = { - "people-power": AUDIENCE_TYPES.PEOPLE_POWER, - "if-you-say-so": AUDIENCE_TYPES.IF_YOU_SAY_SO, - "tough-cookies": AUDIENCE_TYPES.TOUGH_COOKIES, - "dont-tread-on-me": AUDIENCE_TYPES.DONT_TREAD_ON_ME, -}; - -export const getAudienceSlug = (audience) => - invert(audienceSlugMapping)[audience]; - -export const getAudienceBySlug = (slug) => audienceSlugMapping[slug]; - -const narrativeSlugMapping = { - "vote-for-x": NARRATIVE_TYPES.VOTE_FOR_X, - "capital-and-labor": NARRATIVE_TYPES.CAPITAL_AND_LABOR, - "safety-net": NARRATIVE_TYPES.SAFETY_NET, - "robin-hood": NARRATIVE_TYPES.ROBIN_HOOD, - "helping-hands": NARRATIVE_TYPES.HELPING_HANDS, - "the-grind": NARRATIVE_TYPES.THE_GRIND, - "equity-gap": NARRATIVE_TYPES.EQUITY_GAP, - "not-like-us": NARRATIVE_TYPES.NOT_LIKE_US, -}; - -export const getNarrativeSlug = (narrative) => - invert(narrativeSlugMapping)[narrative]; - -export const getNarrativeBySlug = (slug) => narrativeSlugMapping[slug]; - -export const getAudienceEmoji = (audience, shouldTint = true) => { - let emoji, color; - switch (audience) { - case AUDIENCE_TYPES.PEOPLE_POWER: - emoji = AUDIENCE_EMOJI.PEOPLE_POWER; - color = "#FF99FF"; - break; - case AUDIENCE_TYPES.IF_YOU_SAY_SO: - emoji = AUDIENCE_EMOJI.IF_YOU_SAY_SO; - color = "#B3914D"; - break; - case AUDIENCE_TYPES.TOUGH_COOKIES: - emoji = AUDIENCE_EMOJI.TOUGH_COOKIES; - color = "#40B5BF"; - break; - case AUDIENCE_TYPES.DONT_TREAD_ON_ME: - emoji = AUDIENCE_EMOJI.DONT_TREAD_ON_ME; - color = "#FF6633"; - break; - } - return ( - - {shouldTint ? {emoji} : null} - {emoji} - - ); -}; - -export const getAudienceDescription = (audience) => { - if (audience === AUDIENCE_TYPES.PEOPLE_POWER) { - return "Community-minded, politically engaged, and ready to fight for system reform to solve social issues. "; - } - if (audience === AUDIENCE_TYPES.IF_YOU_SAY_SO) { - return "Independent realists who know the system is broken but are skeptical that there are real solutions to society's problems. "; - } - if (audience === AUDIENCE_TYPES.TOUGH_COOKIES) { - return "Family-first rule followers who believe that, while the system might be broken, hard work can create success. "; - } - if (audience === AUDIENCE_TYPES.DONT_TREAD_ON_ME) { - return "Achievement-oriented, conservatives who believe that equal opportunity already exists. "; - } -}; - -export const getNarrativeDescription = (narrative) => { - switch (narrative) { - case NARRATIVE_TYPES.VOTE_FOR_X: - return "Arguments for and against economic conditions and policies are rendered through the lens of electoral politics, with parties and candidates center stage. "; - case NARRATIVE_TYPES.CAPITAL_AND_LABOR: - return "An implied causal chain between a growing economy, abundant jobs, high wages, and individual financial well-being spotlights macro-economic indicators. "; - case NARRATIVE_TYPES.SAFETY_NET: - return "Government programs to mitigate the systemic effects of poverty take center stage in often abstract discussions of need, cost, efficacy, efficiency, and trade-offs. "; - case NARRATIVE_TYPES.ROBIN_HOOD: - return 'Finger pointing at businesses and billionaires who pile up profit, while the 99% struggle, suffer, and raise their voices to "eat the rich." '; - case NARRATIVE_TYPES.HELPING_HANDS: - return 'The heroes are the helpers in these feel-good, food-focused, sometimes religiously inflected accounts of people "giving back" to a proverbial, persistent "poor." '; - case NARRATIVE_TYPES.THE_GRIND: - return 'Dispatches from a daily struggle to "touch money" chronicle first-hand the trials and tribulations of repeatedly reaching for financial well-being. '; - case NARRATIVE_TYPES.EQUITY_GAP: - return "Intersectional stories of race and gender disparity illustrate how some people are more vulnerable to poverty and focus blame on inequitable systems. "; - case NARRATIVE_TYPES.NOT_LIKE_US: - return "Innuendo, association, and coded rhetoric conspire to cast people in poverty as bogeymen threatening society from a shadowy otherworld. "; - } -}; - -export const getLongNarrativeDescription = (narrative) => { - switch (narrative) { - case NARRATIVE_TYPES.VOTE_FOR_X: - return [ - "Arguments for and against economic conditions and policies are rendered through the lens of electoral politics, with parties and candidates center stage. ", - "In this narrative, people in poverty hardly figure, except as instruments in others’ political agendas. The solution to poverty is the policies of a particular party or candidate. ", - "The tone is generally advocating for or against candidates and parties. ", - ]; - case NARRATIVE_TYPES.CAPITAL_AND_LABOR: - return [ - "An implied causal chain between a growing economy, abundant jobs, high wages, and individual financial well-being spotlights macro-economic indicators. ", - "In this narrative, people in poverty don’t have good enough jobs, due to economic factors. The solution is businesses booming out an abundance of good, high-wage jobs. ", - "The tone is generally dry and stats-driven. ", - ]; - case NARRATIVE_TYPES.SAFETY_NET: - return [ - "Government programs to mitigate the systemic effects of poverty take center stage in often abstract discussions of need, cost, efficacy, efficiency, and trade-offs. ", - "In this narrative, people in poverty are victims of circumstance, who rely on a social safety net to survive. The solution is more effective, efficient, and well-resourced social programs. ", - "The tone is generally informative to advocating. ", - ]; - case NARRATIVE_TYPES.ROBIN_HOOD: - return [ - 'Finger pointing at businesses and billionaires who pile up profit, while the 99% struggle, suffer, and raise their voices to "eat the rich." ', - "In this narrative, people are unable to access necessary resources hoarded by the 1%. The solution is redistributing wealth through tax, higher wages, and direct stimulus. ", - "The tone is generally indignant and contemptuous of corporations and the rich. ", - ]; - case NARRATIVE_TYPES.HELPING_HANDS: - return [ - 'The heroes are the helpers in these feel-good, food-focused, sometimes religiously inflected accounts of people "giving back" to a proverbial, persistent "poor." ', - "In this narrative, people in poverty just need a little helping hand from everyday heroes. The solution is communities coming together to help meet people’s basic material needs, though poverty will always be with us. ", - "The tone is generally hero worship-y and heartwarming. ", - ]; - case NARRATIVE_TYPES.THE_GRIND: - return [ - 'Dispatches from a daily struggle to "touch money" chronicle first-hand the trials and tribulations of repeatedly reaching for financial well-being. ', - 'In this narrative, people should be doing whatever it takes to transcend poverty. The solution is perseverance, hard work, and a little luck to "strike it big." ', - "The tone is generally aspirational, resolute, and aimed at prosperity. ", - ]; - case NARRATIVE_TYPES.EQUITY_GAP: - return [ - "Intersectional stories of race and gender disparity illustrate how some people are more vulnerable to poverty and focus blame on inequitable systems. ", - "In this narrative, people in poverty are marginalized and don’t have a fair chance. The solution is everyone gaining access to the same resources, e.g. education, jobs, wealth. ", - "The tone is generally candid and earnest, advocating for justice. ", - ]; - case NARRATIVE_TYPES.NOT_LIKE_US: - return [ - "Innuendo, association, and coded rhetoric conspire to cast people in poverty as bogeymen threatening society from a shadowy otherworld. ", - 'In this narrative, people in poverty are sick, criminal, dirty, addicted, homeless, foreign, or otherwise not like "us." The solution is "poor people" just disappearing: they leave, get locked up, or deported. ', - "The tone is generally matter of fact, targeting fear and disgust. ", - ]; - } -}; diff --git a/src/components/Quiz/data.json b/src/components/Quiz/data.json deleted file mode 100644 index 3d19796..0000000 --- a/src/components/Quiz/data.json +++ /dev/null @@ -1,114 +0,0 @@ -[ - { - "title": "Everyone has different goals.", - "description": "Please click then drag the phrases below in order of ‘most important’ to ‘least important’", - "biggerRuler": "Most", - "smallerRuler": "Least", - "answers": [ - { - "index": 0, - "title": "Being loyal", - "selected": false - }, - { - "index": 1, - "title": "Being a leader", - "selected": false - }, - { - "index": 2, - "title": "Being unique", - "selected": false - }, - { - "index": 3, - "title": "Being wise", - "selected": false - } - ] - }, - { - "title": "Everyone has different goals.", - "description": "Please click then drag the phrases below in order of ‘most important’ to ‘least important’", - "biggerRuler": "Most", - "smallerRuler": "Least", - "answers": [ - { - "index": 0, - "title": "Politeness", - "selected": false - }, - { - "index": 1, - "title": "Reputation", - "selected": false - }, - { - "index": 2, - "title": "Fun", - "selected": false - }, - { - "index": 3, - "title": "Spirituality", - "selected": false - } - ] - }, - { - "title": "Everyone has different goals.", - "description": "Please click then drag the phrases below in order of ‘most important’ to ‘least important’", - "biggerRuler": "Most", - "smallerRuler": "Least", - "answers": [ - { - "index": 0, - "title": "Following the rules", - "selected": false - }, - { - "index": 1, - "title": "Achieving success", - "selected": false - }, - { - "index": 2, - "title": "Having adventures", - "selected": false - }, - { - "index": 3, - "title": "Helping others", - "selected": false - } - ] - }, - { - "title": "Everyone has different priorities.", - "description": "Please click then drag the phrases below in order of ‘most satisfying to ‘least satisfying’", - "biggerRuler": "Most", - "smallerRuler": "Least", - "answers": [ - { - "index": 0, - "title": "Honor the traditions of my family or my community", - "selected": false - }, - { - "index": 1, - "title": "Earn enough for me to buy nice things for me and my family", - "selected": false - }, - { - "index": 2, - "title": "Make the world a better place for everyone to live", - "selected": false - }, - { - "index": 3, - "title": "Give me new experiences and perspectives", - "selected": false - } - ] - } -] diff --git a/src/components/Quiz/index.jsx b/src/components/Quiz/index.jsx deleted file mode 100644 index ab13b88..0000000 --- a/src/components/Quiz/index.jsx +++ /dev/null @@ -1,232 +0,0 @@ -import { - Assessment, - Body, - Description, - PartTracker, - NextButton, - QuizContainer, - Title, -} from "./styles"; -import { IoMdArrowBack, IoMdArrowForward, IoMdClose } from "react-icons/io"; -import { Reorder, motion } from "framer-motion"; - -import { MdOutlineDragIndicator } from "react-icons/md"; -import Spinner from "./Spinner"; -import arrayShuffle from "array-shuffle"; -import { getAudienceSlug } from "./constants"; -import { getQuizResult } from "./utils"; -import originalQuestions from "./data.json"; -import { useMediaQuery } from "react-responsive"; -import { useState } from "preact/hooks"; - -export default function Quiz(props) { - const [questions, setQuestions] = useState( - JSON.parse(JSON.stringify(originalQuestions)) - ); - const [currentQuestion, setCurrentQuestion] = useState(0); - const [answers, setAnswers] = useState([]); // chosen answerss - const [chosenAnswers, setChosenAnswers] = useState([]); // chosen answers - const [loading, setLoading] = useState(false); - - const currentAnswers = arrayShuffle(questions[currentQuestion].answers); // current answers - const [availableAnswers, setAvailableAnswers] = useState(currentAnswers); // available answers - const isTabletOrMobile = useMediaQuery({ query: "(min-width: 480px)" }); - - // add answer to the list of chosen answers and remove from the list of available answers - const handleChooseAnswer = (answer) => { - setChosenAnswers([...chosenAnswers, answer]); - answer.selected = true; - }; - - const handleAnswerOptionClick = (chosenAnswers) => { - const finalAnswers = []; - chosenAnswers.map((answer) => finalAnswers.push(answer.index)); - setAnswers([...answers, finalAnswers]); - - const nextQuestion = currentQuestion + 1; - - if (nextQuestion < questions.length) { - setCurrentQuestion(nextQuestion); - restartQuestion(); - } - - if (nextQuestion === questions.length) { - setLoading(true); - setTimeout(() => { - doCalculationAndRedirect([...answers, finalAnswers]); - }, 1); - } - }; - - // restart question - const restartQuestion = () => { - const verification = currentQuestion >= questions.length && currentQuestion; - - if (verification < questions.length) { - setAvailableAnswers(questions[currentQuestion + 1].answers); - setChosenAnswers([]); - } - }; - - // calculation and redirect - const doCalculationAndRedirect = (values) => { - const result = getQuizResult(values); - - document.body.style.overflow = `unset`; - if (history) { - const audience = getAudienceSlug(result); - if (audience === AUDIENCE_TYPES.PEOPLE_POWER) { - history.pushState({}, "", props.ppURL); - } else if (audience === AUDIENCE_TYPES.IF_YOU_SAY_SO) { - history.pushState({}, "", props.iyssURL); - } else if (audience === AUDIENCE_TYPES.TOUGH_COOKIES) { - history.pushState({}, "", props.tcURL); - } else if (audience === AUDIENCE_TYPES.DONT_TREAD_ON_ME) { - history.pushState({}, "", props.dtomURL); - } - } - // router.push(`/audiences/${getAudienceSlug(result)}?quiz`); - }; - - // get random number - const getRandomInt = (min, max) => { - min = Math.ceil(min); - max = Math.floor(max); - return Math.floor(Math.random() * (max - min + 1)) + min; - }; - - return ( - <> - - - Part {currentQuestion + 1} / {questions.length} - - -
- {questions[currentQuestion].title} - {questions[currentQuestion].description} - - - {questions[currentQuestion].biggerRuler} - - - - - - - - {questions[currentQuestion].smallerRuler} - - - -
    -
  • -
    - 1. {questions[currentQuestion].biggerRuler} -
    -
    • -
  • -
    - 2 -
    -
    • -
  • -
    - 3 -
    -
    • -
  • -
    - 4. {questions[currentQuestion].smallerRuler} -
    -
    • -
- - {isTabletOrMobile ? ( - - {chosenAnswers.map((answer) => ( - - - - ))} - - ) : ( - - {chosenAnswers.map((answer) => ( - - - - ))} - - )} - - {chosenAnswers.length === availableAnswers.length ? ( - { - handleAnswerOptionClick(chosenAnswers); - loading && onExitClick(); - }} - > - {loading ? ( - - ) : ( - <> - {currentQuestion + 1 >= questions.length - ? "See Results" - : "Next Question"} - - - )} - - ) : ( -
    - {availableAnswers.map((answer, index) => ( - - - - ))} -
- )} - -
- - - ); -} diff --git a/src/components/Quiz/style-utils.js b/src/components/Quiz/style-utils.js deleted file mode 100644 index a6f5274..0000000 --- a/src/components/Quiz/style-utils.js +++ /dev/null @@ -1,146 +0,0 @@ -import { AUDIENCE_TYPES, NARRATIVE_TYPES } from './constants' - -export const BREAKPOINT = { - XS: `(max-width: 30em)`, - S: `(max-width: 40em)`, - M: `(max-width: 50em)`, - L: `(max-width: 60em)`, - XL: `(max-width: 70em)`, -} - -export const TYPE_SIZE = { - XL: '4rem', - L: '3rem', - M: ' 13px', - S: '0.9rem', -} - -export const COLORS = { - LIGHTEST_GRAY: '#F9F9F9', - GRAY: '#E5E5E5', - MEDIUM_GRAY: '#707070', - DARKEST_GRAY: '#43464b', - DARK_BLACK: '#000', - BLACK: '#222', - WHITE: '#FFFFFF', - - // Audience Colors - PEOPLE_POWER: '#FFAFFF', - IF_YOU_SAY_SO: '#AE8E5A', - TOUGH_COOKIES: '#3DA8A9', - DONT_TREAD_ON_ME: '#FF7D41', - - // Narrative Colors - SAFETY_NET: '#9E8EFA', - JOBS_GROWTH: '#7CFAC3', - HELPING_HANDS: '#70C8FA', - STRONG_TOGETHER: '#C4AE8E', - DAMAGED: '#FD9F9F', - - VOTE_FOR_X: '#9E8EFA', - CAPITAL_AND_LABOR: '#FFC8F0', - SAFETY_NET: '#7CFAC3', - ROBIN_HOOD: '#A7EFFF', - HELPING_HANDS: '#70C8FA', - THE_GRIND: '#FF5A5A', - EQUITY_GAP: '#969696', - NOT_LIKE_US: '#FFAB6D', - - // Color Palettes - // NOTE: These colors go lightest to darkest && added black as a filler color since palettes only go up-to 7 - PEOPLE_POWER_PALETTE: [ - '#FFE6FF', - '#FFCCFF', - '#FFB3FF', - '#FF99FF', - '#E052E0', - '#A329A3', - '#4C194D', - ], - IF_YOU_SAY_SO_PALETTE: [ - '#E0D3B8', - '#D1BD94', - '#C2A770', - '#B3914D', - '#8F743D', - '#6B572E', - '#473A1F', - ], - TOUGH_COOKIES_PALETTE: [ - '#B3E1E5', - '#8CD3D9', - '#66C4CC', - '#40B5BF', - '#339199', - '#266D73', - '#1A484C', - ], - DONT_TREAD_ON_ME_PALETTE: [ - '#FFD8CC', - '#FFB399', - '#FF8C66', - '#FF6633', - '#FF4000', - '#CC3300', - '#992600', - ], -} - -export const BORDER_RADIUS = 'border-radius: 15px;' -export const BORDER_RADIUS_SMALL = 'border-radius: 10px;' -export const BORDER_RADIUS_LARGE = 'border-radius: 20px;' -export const BORDER_RADIUS_XLARGE = 'border-radius: 25px;' -export const DEFAULT_BOX_SHADOW = - 'box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 2px 20px rgba(0, 0, 0, 0.05);' -export const DEFAULT_TRANSITION_ALL = ` - transition: all 300ms cubic-bezier(0.33, 1, 0.68, 1); - @media (prefers-reduced-motion) { - transition: none; - } -` - -export const getAudienceTypeColor = (audience) => { - switch (audience) { - case AUDIENCE_TYPES.PEOPLE_POWER: - return COLORS.PEOPLE_POWER - case AUDIENCE_TYPES.IF_YOU_SAY_SO: - return COLORS.IF_YOU_SAY_SO - case AUDIENCE_TYPES.TOUGH_COOKIES: - return COLORS.TOUGH_COOKIES - case AUDIENCE_TYPES.DONT_TREAD_ON_ME: - return COLORS.DONT_TREAD_ON_ME - } -} - -export const getNarrativeTypeColor = (narrative) => { - switch (narrative) { - case NARRATIVE_TYPES.SAFETY_NET: - return COLORS.SAFETY_NET - case NARRATIVE_TYPES.JOBS_GROWTH: - return COLORS.JOBS_GROWTH - case NARRATIVE_TYPES.HELPING_HANDS: - return COLORS.HELPING_HANDS - case NARRATIVE_TYPES.STRONG_TOGETHER: - return COLORS.STRONG_TOGETHER - case NARRATIVE_TYPES.DAMAGED: - return COLORS.DAMAGED - - case NARRATIVE_TYPES.VOTE_FOR_X: - return COLORS.VOTE_FOR_X - case NARRATIVE_TYPES.CAPITAL_AND_LABOR: - return COLORS.CAPITAL_AND_LABOR - case NARRATIVE_TYPES.SAFETY_NET: - return COLORS.SAFETY_NET - case NARRATIVE_TYPES.ROBIN_HOOD: - return COLORS.ROBIN_HOOD - case NARRATIVE_TYPES.HELPING_HANDS: - return COLORS.HELPING_HANDS - case NARRATIVE_TYPES.THE_GRIND: - return COLORS.THE_GRIND - case NARRATIVE_TYPES.EQUITY_GAP: - return COLORS.EQUITY_GAP - case NARRATIVE_TYPES.NOT_LIKE_US: - return COLORS.NOT_LIKE_US - } - return COLORS.LIGHTEST_GRAY -} diff --git a/src/components/Quiz/styles.js b/src/components/Quiz/styles.js deleted file mode 100644 index 9020897..0000000 --- a/src/components/Quiz/styles.js +++ /dev/null @@ -1,287 +0,0 @@ -import { BREAKPOINT } from './style-utils' -import { COLORS } from './style-utils' -import { styled } from "goober"; - -export const QuizContainer = styled("section")` - display: flex; - align-items: center; - justify-content: center; - position: relative; - - width: 100%; - height:100%; - - font-family: inherit; - - padding:10px; - box-sizing: border-box; - - background: ${COLORS.WHITE}; - - & > div { - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - position: relative; - flex-direction: column; - justify-content: space-between; - - - background: var(--harmony-white); - - } - - @media ${BREAKPOINT.XS} { - & > div { - width: 100%; - height: 100%; - border-radius: 0; - justify-content: unset; - background: ${COLORS.LIGHTEST_GRAY}; - padding: 18px 0 0 0; - overflow-y: scroll; - } - } -`; - -export const PartTracker = styled("span")` - border: 0; - position: absolute; - top: 0; - right: 0; - `; - -export const Title = styled('h2')` - color: #262626; - - line-height: 36px; - margin-bottom: 12px; - text-align: center; - - @media ${BREAKPOINT.XS} { - line-height: 40px; - margin: 88px 0 22px 2px; - padding: 0 18px; - } -` - -export const Description = styled('p')` - text-align: center; - - color: ${COLORS.DARK_BLACK}; - width: 100%; - - @media ${BREAKPOINT.XS} { - padding: 0 18px; - margin-left: 2px !important; - } -`; - -export const Assessment = styled('div')` - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 24px; - - line-height: 15px; - color: var(--harmony-black); - - & svg { - margin: 0 28px; - } - - @media ${BREAKPOINT.XS} { - display: none; - } -` - -export const Body = styled("div")` - height: 100%; - position: relative; - - button { - font-family: inherit; - display: flex; - align-items: center; - justify-content: center; - } - - ul { - gap: 12px; - padding:0; - - height: 100px; - display: grid; - grid-template-columns: repeat(4, 1fr); - - &:last-child { - margin-top: 12px; - } - - li { - width: 100%; - height: 100px; - color: #00000054; - line-height: 22px; - - border-radius: 15px; - display: flex; - justify-content: flex-start; - - &:hover { - cursor: pointer; - background: var(--harmony-orange); - } - - div { - padding: 10px; - } - - button { - border: 0; - width: 100%; - padding: 15px 8px; - border-radius: 15px; - - &:disabled { - background: #fcfcfc; - box-shadow: 1px 2px 8px 0px #0000000d inset; - } - } - } - } - - @media ${BREAKPOINT.XS} { - ul { - height: unset; - padding: 0 18px; - grid-template-columns: repeat(1, 1fr); - - li { - height: 50px; - align-items: center; - justify-content: center; - - div { - padding: 0; - display: flex; - align-items: center; - flex-direction: column; - } - } - } - } - - ul:nth-child(1) { - li { - color: ${COLORS.MEDIUM_GRAY}; - border: 1px dashed rgba(0, 0, 0, 0.1); - } - - @media ${BREAKPOINT.XS} { - } - } - - ul:nth-child(2) { - top: 0; - left: 0; - right: 0; - position: absolute; - - button { - height: 100px; - background: #262626; - color: ${COLORS.WHITE}; - } - - @media ${BREAKPOINT.XS} { - button { - height: 50px; - display: flex; - align-items: center; - justify-content: flex-start; - background: #474747; - padding: 15px; - - svg { - margin-right: 8px; - } - } - } - } - - ul:nth-child(3) { - button { - background: ${COLORS.LIGHTEST_GRAY}; - color: ${COLORS.BLACK}; - } - - li:nth-child(n + 4):nth-child(-n + 4) { - margin: 46px 0 0 0; - } - - li:nth-child(n + 2):nth-child(-n + 2) { - margin: 46px 0 0 0; - } - - @media ${BREAKPOINT.XS} { - left: 0; - right: 0; - bottom: -16px; - position: fixed; - padding: 14px 20px 12px 20px; - border-top: 1px solid #e1e1e1; - background: ${COLORS.LIGHTEST_GRAY}; - box-shadow: rgb(0 0 0 / 10%) 0px 2px 20px 0px; - - button { - background: ${COLORS.WHITE}; - - &:disabled { - display: none; - } - } - - li { - height: unset; - justify-content: flex-start; - - button { - max-width: 250px; - box-shadow: 0px 4px 4px 0px #0000000d; - } - } - - li:nth-child(n + 4):nth-child(-n + 4), - li:nth-child(n + 2):nth-child(-n + 2) { - margin: 0; - display: flex; - justify-content: flex-end; - } - } - } -`; - -export const NextButton = styled("button")` - border: 0; - width: 100%; - height: 146px; - - line-height: 15px; - border-radius: 15px; - color: ${COLORS.DARK_BLACK}; - background: ${COLORS.LIGHTEST_GRAY}; - position: relative; - - svg { - margin-left: 8px; - } - - @media ${BREAKPOINT.XS} { - height: 140px; - border-radius: unset; - background: ${COLORS.WHITE}; - border-top: 1px solid #e1e1e1; - } -`; diff --git a/src/components/Quiz/utils.js b/src/components/Quiz/utils.js deleted file mode 100644 index 7959f4e..0000000 --- a/src/components/Quiz/utils.js +++ /dev/null @@ -1,72 +0,0 @@ -import { AUDIENCE_TYPES } from "./constants"; - -// These weights were generated by the data science team -const responseWeights = [ - [0.19661324, -0.23336114, -0.39460518, 0.4313530798], // rank_goals_1_1 - [-0.0181344, 0.17770629, -0.16040073, 0.0008288423], // rank_goals_1_2 - [-0.4526589, 0.29743149, 0.3700687, -0.2148412927], // rank_goals_1_3 - [0.34663558, -0.30528848, 0.18921721, -0.2305643158], // rank_goals_1_4 - [-0.24243695, -0.31898312, 0.17159933, 0.3898207369], // rank_goals_2_1 - [0.21508206, -0.11027478, -0.01775387, -0.0870534123], // rank_goals_2_2 - [-0.37489239, 0.45585687, 0.38485537, -0.4658198411], // rank_goals_2_3 - [0.25624749, -0.07691627, -0.37637471, 0.1970434899], // rank_goals_2_4 - [0.09186467, -0.12034109, -0.55545396, 0.5839303762], // rank_goals_3_1 - [-0.10277331, 0.36407918, -0.04802435, -0.2132815249], // rank_goals_3_2 - [0.04743451, 0.39771277, 0.22259875, -0.6677460333], // rank_goals_3_3 - [-0.03874094, -0.80230519, 0.46201467, 0.3790314558], // rank_goals_3_4 - [0.95429889, -0.19356381, -0.93471181, 0.1739767287], // rank_goals_4_1 - [0.13073653, 0.43895003, -0.13593685, -0.4337497099], // rank_goals_4_2 - [-0.84001154, -0.55523845, 0.71753857, 0.6777114168], // rank_goals_4_3 - [-0.23913441, 0.38361303, 0.37223736, -0.516715985], // rank_goals_4_4 - [0.11577981, 1.87039342, -1.16283943, -0.8233338095], //intercept -]; - -// The ordering here corresponds to the ordering of weights above -const responseOrder = [ - AUDIENCE_TYPES.DONT_TREAD_ON_ME, - AUDIENCE_TYPES.IF_YOU_SAY_SO, - AUDIENCE_TYPES.PEOPLE_POWER, - AUDIENCE_TYPES.TOUGH_COOKIES, -]; - -function getConvertedValues(values) { - return values.map((v) => { - const out = []; - v.forEach((val, i) => { - out[val] = i; - }); - return out; - }); -} - -export const getQuizResult = (vals) => { - const values = getConvertedValues(vals); - // Calculate each response value by each column in the weights array. - // This outputs an array of lenght 4, where the ordering of the array - // matches responseOrder. - const result = values.flat().reduce((acc, val, i) => { - return [ - acc[0] + (4 - val) * responseWeights[i][0], - acc[1] + (4 - val) * responseWeights[i][1], - acc[2] + (4 - val) * responseWeights[i][2], - acc[3] + (4 - val) * responseWeights[i][3], - ]; - // Our initial values are equal to the intercept from the response - // weights matrix. This is essentially the same as adding in the - // weights at the beginning or end of the calculation. - }, responseWeights[responseWeights.length - 1]); - - // Get the index of the largest value in the result array. - let maxResponse = Number.NEGATIVE_INFINITY; - let maxResponseIndex = -1; - result.forEach((val, i) => { - if (val > maxResponse) { - maxResponse = val; - maxResponseIndex = i; - } - }); - - // Return the audience that maps to the largest value in the - // result array. - return responseOrder[maxResponseIndex]; -}; diff --git a/src/main.jsx b/src/main.jsx index 9e7e072..7de66ad 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,26 +1,11 @@ -import "process"; - -import { HelloWorld } from "./components/HelloWorld"; -import { KitchenSink } from "./components/KitchenSink"; -import Quiz from "./components/Quiz"; -import {h} from "preact"; // Be aware that every import will be included in the bundle even if Component isn't registered. import register from "preact-custom-element"; -import { setup } from "goober"; - -setup(h); +import { HelloWorld } from "./components/HelloWorld"; +import { KitchenSink } from "./components/KitchenSink"; // Register all your components and props here. register(HelloWorld, "hello-world", ["name"], { shadow: false }); register(KitchenSink, "kitchen-sink", ["name"], { shadow: false }); -register(Quiz, "audience-quiz", ["ppURL","iyssURL","tcURL","dtomURL"], { shadow: false }); // Replace with your web-component tag to preview with 'yarn dev' -export const Preview = () => ( - -); +export const Preview = () => ; diff --git a/vite.config.js b/vite.config.js index 427601a..4d36708 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,19 +1,17 @@ import { defineConfig } from "vite"; -import preact from "@preact/preset-vite"; import { resolve } from "path"; +import preact from "@preact/preset-vite"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [preact()], + build: { lib: { entry: resolve(__dirname, "src/main.jsx"), - name: "AudienceQuiz", + name: "MyComponent", // the proper extensions will be added - fileName: "audience-quiz", - }, - alias: { - react: "preact/compat", + fileName: "my-component", }, }, }); diff --git a/yarn.lock b/yarn.lock index dc3e1cb..1c25b13 100644 --- a/yarn.lock +++ b/yarn.lock @@ -226,18 +226,6 @@ "@babel/helper-validator-identifier" "^7.18.6" to-fast-properties "^2.0.0" -"@emotion/is-prop-valid@^0.8.2": - version "0.8.8" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" - integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== - dependencies: - "@emotion/memoize" "0.7.4" - -"@emotion/memoize@0.7.4": - version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" - integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== - "@esbuild/linux-loong64@0.14.54": version "0.14.54" resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028" @@ -338,11 +326,6 @@ ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" -array-shuffle@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/array-shuffle/-/array-shuffle-3.0.0.tgz#9a927cc2ca4c8ef4d71cddef7c9ee7b3b733d54b" - integrity sha512-rogEGxHOQPhslOhpg12LJkB+bbAl484/s2AJq0BxtzQDQfKl76fS2u9zWgg3p3b9ENcuvE7K8A7l5ddiPjCRnw== - babel-plugin-transform-hook-names@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/babel-plugin-transform-hook-names/-/babel-plugin-transform-hook-names-1.0.2.tgz#0d75c2d78e8bbcdb258241131562b9cf07f010f3" @@ -391,11 +374,6 @@ convert-source-map@^1.7.0: dependencies: safe-buffer "~5.1.1" -css-mediaquery@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" - integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q== - debug@^4.1.0, debug@^4.3.1: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" @@ -550,15 +528,6 @@ estree-walker@^2.0.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== -framer-motion@^10.16.1: - version "10.16.1" - resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.1.tgz#0ff5de554bbb35ee6605357d80f92b27d0271a94" - integrity sha512-K6TXr5mZtitC/dxQCBdg7xzdN0d5IAIrlaqCPKtIQVdzVPGC0qBuJKXggHX1vjnP5gPOFwB1KbCCTWcnFc3kWg== - dependencies: - tslib "^2.4.0" - optionalDependencies: - "@emotion/is-prop-valid" "^0.8.2" - fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" @@ -596,11 +565,6 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" -hyphenate-style-name@^1.0.0: - version "1.0.4" - resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" - integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== - is-core-module@^2.9.0: version "2.10.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed" @@ -608,7 +572,7 @@ is-core-module@^2.9.0: dependencies: has "^1.0.3" -"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: +js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -628,25 +592,6 @@ kolorist@^1.2.10: resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.5.1.tgz#c3d66dc4fabde4f6b7faa6efda84c00491f9e52b" integrity sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ== -lodash.invert@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/lodash.invert/-/lodash.invert-4.3.0.tgz#8ffe20d4b616f56bea8f1aa0c6ebd80dcf742aee" - integrity sha512-3CJmOxN5y47rd+g5XjdZNcq2SorJkvlSqBwPomT094p6LZ4p7b5bUoRzYYMjwsTGWTW77z/dFZlCzeVQxBrZVg== - -loose-envify@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" - integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== - dependencies: - js-tokens "^3.0.0 || ^4.0.0" - -matchmediaquery@^0.3.0: - version "0.3.1" - resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7" - integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ== - dependencies: - css-mediaquery "^0.1.2" - ms@2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" @@ -662,11 +607,6 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503" integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg== -object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== - path-parse@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" @@ -696,44 +636,10 @@ preact-custom-element@^4.2.1: resolved "https://registry.yarnpkg.com/preact-custom-element/-/preact-custom-element-4.2.1.tgz#a18752ef60823ea61199d9cdc1866e51139b3f46" integrity sha512-/fiEEAyC+MXRlCBRmv/owoN5BLpO2nF/MF3YBHLtp4C2lNqlhV+a4he74A5DhfDoRmxDHm0sYVgQzWFEyzTDsw== -preact@^10.17.1: - version "10.17.1" - resolved "https://registry.yarnpkg.com/preact/-/preact-10.17.1.tgz#0a1b3c658c019e759326b9648c62912cf5c2dde1" - integrity sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA== - -process@^0.11.10: - version "0.11.10" - resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" - integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== - -prop-types@^15.6.1: - version "15.8.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" - integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== - dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.13.1" - -react-icons@^4.10.1: - version "4.10.1" - resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500" - integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw== - -react-is@^16.13.1: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" - integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== - -react-responsive@^9.0.2: - version "9.0.2" - resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.2.tgz#34531ca77a61e7a8775714016d21241df7e4205c" - integrity sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ== - dependencies: - hyphenate-style-name "^1.0.0" - matchmediaquery "^0.3.0" - prop-types "^15.6.1" - shallow-equal "^1.2.1" +preact@^10.9.0: + version "10.10.2" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.10.2.tgz#3460d456d84c4701af33ac37e9bd3054271d5b1e" + integrity sha512-GUXSsfwq4NKhlLYY5ctfNE0IjFk7Xo4952yPI8yMkXdhzeQmQ+FahZITe7CeHXMPyKBVQ8SoCmGNIy9TSOdhgQ== resolve@^1.20.0, resolve@^1.22.1: version "1.22.1" @@ -761,11 +667,6 @@ semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -shallow-equal@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da" - integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA== - source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" @@ -788,11 +689,6 @@ to-fast-properties@^2.0.0: resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== -tslib@^2.4.0: - version "2.6.2" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" - integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== - update-browserslist-db@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"