Merge pull request #404 from Giphy/move-colors-to-own-package

Move colors to own package

.changeset/polite-mayflies-sleep.md

@@ -0,0 +1,7 @@
+---
+'@giphy/react-components': patch
+'@giphy/colors': patch
+---
+
+Add colors package
+Remove @giphy/js-brand from react-components, use colors

.gitignore

@@ -22,4 +22,5 @@ umd/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-.hintrc
+.hintrc
+.vscode/

package.json

@@ -57,7 +57,7 @@
         "publint": "^0.1.12",
         "ts-jest": "^29.1.0",
         "tsup": "^7.0.0",
-        "turbo": "^1.9.3",
+        "turbo": "1.10.11",
         "typescript": "^5.0.4"
     },
     "changelog": {

packages/colors/README.md

@@ -0,0 +1,3 @@
+# @giphy/colors
+
+Color values for GIPHY color palette

packages/colors/package.json

@@ -0,0 +1,37 @@
+{
+    "scripts": {
+        "lint": "run -T eslint . --ext .ts,.tsx",
+        "clean": "rm -rf ./dist",
+        "build": "run -T tsup src/index.ts --format cjs,esm --dts && run -T publint",
+        "prepublish": "npm run clean && npm run build"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.4"
+    },
+    "name": "@giphy/colors",
+    "version": "1.0.0",
+    "description": "GIPHY color palette",
+    "homepage": "https://github.com/Giphy/giphy-js/tree/master/packages/colors",
+    "main": "dist/index.cjs",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist/",
+        "src/**/*"
+    ],
+    "author": "giannif",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "source": true
+}

packages/colors/src/index.ts

@@ -0,0 +1,38 @@
+/* greys */
+export const giphyBlack = '#121212'
+export const giphyDarkestGrey = '#212121'
+export const giphyDarkGrey = '#2e2e2e'
+export const giphyDarkCharcoal = '#3e3e3e'
+export const giphyCharcoal = '#4a4a4a'
+export const giphyLightCharcoal = '#5c5c5c'
+export const giphyLightGrey = '#a6a6a6'
+export const giphyLightestGrey = '#d8d8d8'
+export const giphyWhiteSmoke = '#ececec'
+export const giphyWhite = '#ffffff'
+/* primary */
+export const giphyBlue = '#00ccff'
+export const giphyGreen = '#00ff99'
+export const giphyPurple = '#9933ff'
+export const giphyRed = '#ff6666'
+export const giphyYellow = '#fff35c'
+/* secondary */
+export const giphyAqua = '#00e6cc'
+export const giphyLightBlue = '#3191ff'
+export const giphyIndigo = '#6157ff'
+export const giphyPink = '#e646b6'
+/* social */
+export const facebookColor = '#3894fc'
+export const twitterColor = '#00ccff'
+export const pinterestColor = '#e54cb5'
+export const tumblrColor = '#529ecc'
+export const instagramColor = '#c23c8d'
+export const redditColor = '#fc6669'
+export const smsColor = '#00ff99'
+/* functional */
+export const errorColor = giphyRed
+export const deleteColor = giphyRed
+export const primaryCTA = giphyIndigo
+export const primaryCTADisabled = '#241F74'
+export const secondaryCTA = giphyCharcoal
+export const dimColor = `rgba(0, 0, 0, 0.8)`
+export const gifOverlayColor = `rgba(0, 0, 0, 0.4)`

packages/colors/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist"
+    },
+    "files": ["src/index.ts"]
+}

packages/react-components/cypress/stories/attribution.spec.tsx

@@ -1,26 +1,9 @@
 import { composeStories } from '@storybook/react'
 import * as React from 'react'
-
-import { Gif } from '../../src'
+import { Attribution } from '../../src'
 import * as stories from '../../stories/attribution.stories'
 
-const { Attribution } = composeStories(stories)
-
-const GIF_ID = 'l0HlyLQsbvhciAuKA'
-
-function getAttributionRoot() {
-    return cy.get('[data-cy-root] .giphy-attribution')
-}
-
-function getAttributionGifs() {
-    return cy.get(`[data-cy-root] .${Gif.className}[data-giphy-id="${GIF_ID}"]`)
-}
-
-function checkAttributionIsVisible() {
-    getAttributionRoot().should('be.visible')
-    getAttributionGifs().its('length').should('eq', 2)
-    getAttributionGifs().should('be.visible')
-}
+const { Default } = composeStories(stories)
 
 describe('Attribution', () => {
     let onClick: typeof Cypress.sinon.stub
@@ -30,27 +13,13 @@ describe('Attribution', () => {
     })
 
     it('Default', () => {
-        cy.mount(<Attribution />)
-        checkAttributionIsVisible()
-        cy.percySnapshot('Attribution / Default')
-        getAttributionRoot()
+        cy.mount(<Default />)
+        cy.get(`.${Attribution.className}`).should('be.visible')
+        cy.get(`.${Attribution.className}`)
             .click()
             .then(() => {
                 expect(window.open).be.calledWithMatch('https://giphy.com/haydiroket/', '_blank')
                 expect(onClick).be.not.be.called
             })
     })
-
-    it.skip('Custom OnClick Handler', () => {
-        // TODO: need to rewrite attribution story
-        // cy.mount(<Attribution onClick={onClick} />)
-        // checkAttributionIsVisible()
-        // cy.percySnapshot('Attribution / Custom OnClick Handler')
-        // getAttributionRoot()
-        //     .click()
-        //     .then(() => {
-        //         expect(window.open).not.be.called
-        //         expect(onClick).be.calledWithMatch({ id: GIF_ID })
-        //     })
-    })
 })

packages/react-components/package.json

@@ -46,7 +46,6 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "storybook": "^7.1.0",
-        "storybook-addon-jsx": "^7.3.14",
         "ts-loader": "^9.3.1",
         "typescript": "^5.0.4",
         "webpack": "^5.74.0"
@@ -76,8 +75,8 @@
     "dependencies": {
         "@emotion/react": "11.9.3",
         "@emotion/styled": "11.9.3",
+        "@giphy/colors": "*",
         "@giphy/js-analytics": "*",
-        "@giphy/js-brand": "*",
         "@giphy/js-fetch-api": "*",
         "@giphy/js-types": "*",
         "@giphy/js-util": "*",

packages/react-components/src/components/attribution/verified-badge.tsx

@@ -1,4 +1,4 @@
-import { giphyBlack } from '@giphy/js-brand'
+import { giphyBlack } from '@giphy/colors'
 import React from 'react'
 type Props = {
     className?: string

packages/react-components/src/components/emoji-variations-list.tsx

@@ -1,11 +1,11 @@
-import React, { ElementType, useEffect } from 'react'
 import styled from '@emotion/styled'
+import { giphyCharcoal, giphyDarkGrey } from '@giphy/colors'
+import type { NonPaginatedGifsResult } from '@giphy/js-fetch-api'
+import type { GifID, IGif, IUser } from '@giphy/js-types'
+import { getGifWidth } from '@giphy/js-util'
+import React, { ElementType, useEffect } from 'react'
 import useAsyncFn from 'react-use/lib/useAsyncFn'
 import useLatest from 'react-use/lib/useLatest'
-import { giphyDarkGrey, giphyCharcoal } from '@giphy/js-brand'
-import { getGifWidth } from '@giphy/js-util'
-import type { GifID, IGif, IUser } from '@giphy/js-types'
-import type { NonPaginatedGifsResult } from '@giphy/js-fetch-api'
 
 import FetchError from './fetch-error'
 import Gif, { EventProps } from './gif'

packages/react-components/src/components/fetch-error.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled'
-import { fontFamily, giphyBlue, giphyLightGrey } from '@giphy/js-brand'
+import { giphyBlue, giphyLightGrey } from '@giphy/colors'
 import React, { SyntheticEvent } from 'react'
 
 const Message = styled.div`
     color: ${giphyLightGrey};
     display: flex;
     justify-content: center;
     margin: 30px 0;
-    font-family: ${fontFamily.body};
+    font-family: interface, Helvetica Neue, helvetica, sans-serif;
     font-size: 16px;
     font-weight: 600;
     a {

packages/react-components/src/components/gif.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/js-brand'
+import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import { IGif, IUser, ImageAllTypes } from '@giphy/js-types'
 import { Logger, getAltText, getBestRendition, getGifHeight } from '@giphy/js-util'
 import 'intersection-observer'

packages/react-components/src/components/loader.tsx

@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
-import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/js-brand'
+import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import React from 'react'
 
 const bouncer = keyframes`

packages/react-components/src/components/search-bar/index.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { giphyBlack, giphyCharcoal, giphyIndigo, giphyLightGrey, giphyWhite } from '@giphy/js-brand'
+import { giphyBlack, giphyCharcoal, giphyIndigo, giphyLightGrey, giphyWhite } from '@giphy/colors'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import useDebounce from 'react-use/lib/useDebounce'
 import CancelIcon from './cancel-icon'

packages/react-components/src/components/search-bar/search-bar-channel.tsx

@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
-import { giphyCharcoal, giphyDarkCharcoal, giphyWhite, giphyWhiteSmoke } from '@giphy/js-brand'
+import { giphyCharcoal, giphyDarkCharcoal, giphyWhite, giphyWhiteSmoke } from '@giphy/colors'
 import React, { useContext } from 'react'
 import Avatar_ from '../attribution/avatar'
 import VerifiedBadge from '../attribution/verified-badge'

packages/react-components/src/components/search-bar/suggestion-bar/pills.tsx

@@ -1,12 +1,12 @@
-import { giphyDarkestGrey } from '@giphy/js-brand'
+import styled from '@emotion/styled'
+import { giphyDarkestGrey } from '@giphy/colors'
 import { IChannel } from '@giphy/js-types'
 import React, { useContext } from 'react'
 import Avatar_ from '../../attribution/avatar'
 import VerifiedBadge from '../../attribution/verified-badge'
 import { SearchContext } from '../context'
 import { getSize } from '../theme'
 import TrendingIcon_ from './trending-icon'
-import styled from '@emotion/styled'
 
 const margin = 9
 const ChannelPillContainer = styled.div`

packages/react-components/src/components/video/progress-bar.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { giphyWhite } from '@giphy/js-brand'
+import { giphyWhite } from '@giphy/colors'
 import React from 'react'
 import useRaf from 'react-use/lib/useRaf'