show preview on project slug keyword only

also rename styles file to be an actual TS file with the confusing
.css.ts extention

Author: a-hariti

src/components/codeKeywords/codeKeywords.tsx

@@ -27,7 +27,8 @@ export function makeKeywordsClickable(children: React.ReactNode) {
     if (ORG_AUTH_TOKEN_REGEX.test(child)) {
       makeOrgAuthTokenClickable(arr, child);
     } else if (KEYWORDS_REGEX.test(child)) {
-      makeProjectKeywordsClickable(arr, child);
+      const isProjectKeyword = child.startsWith('"___PROJECT_SLUG___"');
+      makeProjectKeywordsClickable(arr, child, isProjectKeyword);
     } else {
       arr.push(child);
     }
@@ -42,13 +43,14 @@ function makeOrgAuthTokenClickable(arr: ChildrenItem[], str: string) {
   ));
 }
 
-function makeProjectKeywordsClickable(arr: ChildrenItem[], str: string) {
+function makeProjectKeywordsClickable(arr: ChildrenItem[], str: string, isProjectKeyword = false) {
   runRegex(arr, str, KEYWORDS_REGEX, (lastIndex, match) => (
     <KeywordSelector
       key={`project-keyword-${lastIndex}`}
       index={lastIndex}
       group={match[1] || 'PROJECT'}
       keyword={match[2]}
+      showPreview={isProjectKeyword}
     />
   ));
 }

src/components/codeKeywords/keyword.tsx

@@ -2,7 +2,7 @@
 
 import {MotionProps} from 'framer-motion';
 
-import {KeywordSpan} from './styles.css';
+import {KeywordSpan} from './styles';
 
 export function Keyword({
   initial = {opacity: 0, y: -10, position: 'absolute'},
@@ -17,14 +17,16 @@ export function Keyword({
     opacity: {duration: 0.15},
     y: {duration: 0.25},
   },
+  showPreview: hasPreview = false,
   ...props
-}: MotionProps) {
+}: MotionProps & {showPreview?: boolean}) {
   return (
     <KeywordSpan
       initial={initial}
       animate={animate}
       exit={exit}
       transition={transition}
+      hasPreview={hasPreview}
       {...props}
     />
   );

src/components/codeKeywords/keywordSelector.tsx

@@ -23,16 +23,17 @@ import {
   PositionWrapper,
   ProjectPreview,
   Selections,
-} from './styles.css';
+} from './styles';
 import {dropdownPopperOptions} from './utils';
 
 type KeywordSelectorProps = {
   group: string;
   index: number;
   keyword: string;
+  showPreview: boolean;
 };
 
-export function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
+export function KeywordSelector({keyword, group, index, showPreview}: KeywordSelectorProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [referenceEl, setReferenceEl] = useState<HTMLSpanElement | null>(null);
   const [dropdownEl, setDropdownEl] = useState<HTMLElement | null>(null);
@@ -146,11 +147,12 @@ export function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
               onAnimationStart={() => setIsAnimating(true)}
               onAnimationComplete={() => setIsAnimating(false)}
               key={currentSelectionIdx}
+              showPreview={showPreview}
             >
               {currentSelection[keyword]}
             </Keyword>
           </AnimatePresence>
-          {!isOpen && currentSelection?.title && (
+          {!isOpen && showPreview && currentSelection?.title && (
             <ProjectPreview className="no-copy">
               {currentSelection.title}
             </ProjectPreview>

src/components/codeKeywords/orgAuthTokenCreator.tsx

@@ -21,7 +21,7 @@ import {
   KeywordDropdown,
   PositionWrapper,
   Selections,
-} from './styles.css';
+} from './styles';
 import {dropdownPopperOptions} from './utils';
 
 type TokenState =

src/components/codeKeywords/styles.css.ts renamed to src/components/codeKeywords/styles.ts

@@ -154,11 +154,13 @@ export const KeywordIndicator = styled(ArrowDown, {
   top: -1px;
 `;
 
-export const KeywordSpan = styled(motion.span)`
+export const KeywordSpan = styled(motion.span)<{
+  hasPreview?: boolean;
+}>`
   grid-row: 1;
   grid-column: 1;
   display: inline-block;
-  margin-top: 24px;
+  margin-top: ${p => (p.hasPreview ? '24px' : '0')};
 `;
 
 export const KeywordSearchInput = styled('input')<{dark: boolean}>`