chore: move Badge to components package (#7050)

alexnm · web-flow · commit 942d385e9e42 · 2022-10-26T11:02:42.000+03:00
diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json
@@ -27,6 +27,10 @@
         "port": 8000,
         "prLink": "redirect"
       }
+    },
+    "storybook": {
+      "name": "Run storybook",
+      "command": "cd packages/components && yarn start:storybook"
     }
   },
   "setupTasks": [
diff --git a/packages/app/src/app/components/CloudBetaBadge.tsx b/packages/app/src/app/components/CloudBetaBadge.tsx
diff --git a/packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx b/packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx
@@ -1,12 +1,12 @@
 import {
+  Badge,
   Text,
   Stack,
   Element,
   IconButton,
   SkeletonText,
   ThemeProvider,
 } from '@codesandbox/components';
-import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import { useActions, useAppState } from 'app/overmind';
 import React, { ReactNode, useState, useEffect } from 'react';
 import { TabStateReturn, useTabState } from 'reakit/Tab';
@@ -333,7 +333,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                   >
                     <Stack gap={2}>
                       <span>Cloud templates</span>
-                      <CloudBetaBadge hideIcon />
+                      <Badge>Beta</Badge>
                     </Stack>
                   </Tab>
 
diff --git a/packages/app/src/app/components/CreateSandbox/FromTemplate.tsx b/packages/app/src/app/components/CreateSandbox/FromTemplate.tsx
@@ -1,7 +1,7 @@
 import { useAppState } from 'app/overmind';
-import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import React, { useState } from 'react';
 import {
+  Badge,
   Stack,
   Element,
   Checkbox,
@@ -53,7 +53,7 @@ export const FromTemplate: React.FC<FromTemplateProps> = ({
         >
           New from template
         </Text>
-        {isV2 && <CloudBetaBadge />}
+        {isV2 && <Badge icon="cloud">Beta</Badge>}
       </Stack>
 
       <Element
diff --git a/packages/app/src/app/components/CreateSandbox/Import/FromRepo.tsx b/packages/app/src/app/components/CreateSandbox/Import/FromRepo.tsx
@@ -1,6 +1,7 @@
 import { useAppState } from 'app/overmind';
 import React, { useEffect } from 'react';
 import {
+  Badge,
   Button,
   Element,
   Icon,
@@ -12,7 +13,6 @@ import {
 } from '@codesandbox/components';
 import styled, { keyframes } from 'styled-components';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import { GithubRepoToImport } from './types';
 import { StyledSelect } from '../elements';
 import { useGithubOrganizations } from './useGithubOrganizations';
@@ -120,7 +120,7 @@ export const FromRepo: React.FC<FromRepoProps> = ({ repository, onCancel }) => {
         >
           Create new fork
         </Text>
-        <CloudBetaBadge />
+        <Badge icon="cloud">Beta</Badge>
       </Stack>
       <Element
         as="form"
diff --git a/packages/app/src/app/components/CreateSandbox/TemplateCard.tsx b/packages/app/src/app/components/CreateSandbox/TemplateCard.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Stack, Text } from '@codesandbox/components';
+import { Badge, Stack, Text } from '@codesandbox/components';
 import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
-import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import { TemplateFragment } from 'app/graphql/types';
 import { VisuallyHidden } from 'reakit/VisuallyHidden';
 import { TemplateButton } from './elements';
@@ -53,7 +52,7 @@ export const TemplateCard = ({
           css={{ justifyContent: 'space-between', alignItems: 'flex-start' }}
         >
           <UserIcon />
-          {isV2 && <CloudBetaBadge />}
+          {isV2 && <Badge icon="cloud">Beta</Badge>}
         </Stack>
         <Stack direction="vertical" gap={1}>
           <Text
diff --git a/packages/app/src/app/components/WorkspaceSelect/WorkspaceSelect.tsx b/packages/app/src/app/components/WorkspaceSelect/WorkspaceSelect.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
 import { useActions, useAppState } from 'app/overmind';
-import { Text, Menu, Stack, Icon, Tooltip } from '@codesandbox/components';
+import {
+  Badge,
+  Text,
+  Menu,
+  Stack,
+  Icon,
+  Tooltip,
+} from '@codesandbox/components';
 import { sortBy } from 'lodash-es';
 import { TeamAvatar } from 'app/components/TeamAvatar';
-import { Badge } from 'app/components/Badge';
 
 interface WorkspaceSelectProps {
   disabled?: boolean;
diff --git a/packages/app/src/app/pages/Dashboard/Components/Header/index.tsx b/packages/app/src/app/pages/Dashboard/Components/Header/index.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAppState, useActions } from 'app/overmind';
-import { Stack, Text, Button, Icon } from '@codesandbox/components';
+import { Stack, Text, Button, Icon, Badge } from '@codesandbox/components';
 import css from '@styled-system/css';
-import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import { v2DraftBranchUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { Breadcrumbs, BreadcrumbProps } from '../Breadcrumbs';
 import { FilterOptions } from '../Filters/FilterOptions';
@@ -94,7 +93,7 @@ export const Header = ({
             albumId={albumId}
           />
         )}
-        {showBetaBadge && <CloudBetaBadge />}
+        {showBetaBadge && <Badge icon="cloud">Beta</Badge>}
       </Stack>
       <Stack gap={4} align="center">
         {location.pathname.includes('/sandboxes') && (
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { RepoFragmentDashboardFragment } from 'app/graphql/types';
 import {
+  Badge,
   Stack,
   Text,
   Input,
@@ -11,7 +12,6 @@ import {
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { shortDistance } from '@codesandbox/common/lib/utils/short-distance';
-import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import { SandboxItemComponentProps } from './types';
 
 const useImageLoaded = (url: string) => {
@@ -370,7 +370,7 @@ const Thumbnail = ({
         )}
       </div>
       <Stack gap={1} css={{ position: 'absolute', top: 6, right: 6 }}>
-        {showBetaBadge && <CloudBetaBadge />}
+        {showBetaBadge && <Badge icon="cloud">Beta</Badge>}
         <div
           style={{
             width: 18,
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/UpgradeToolTip.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/WorkspaceName/UpgradeToolTip.tsx
@@ -2,11 +2,10 @@ import * as React from 'react';
 
 import track from '@codesandbox/common/lib/utils/analytics';
 import { Link as RouterLink } from 'react-router-dom';
-import { Text, Link, Stack } from '@codesandbox/components';
+import { Text, Link, Stack, Badge } from '@codesandbox/components';
 import Tooltip, {
   SingletonTooltip,
 } from '@codesandbox/common/lib/components/Tooltip';
-import { Badge } from 'app/components/Badge';
 
 const UpgradeToolTip: React.FC = () => (
   <Stack>
diff --git a/packages/components/src/components/Badge/index.stories.tsx b/packages/components/src/components/Badge/index.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Badge } from '.';
+import { Stack } from '../Stack';
+
+export default {
+  title: 'components/Badge',
+  component: Badge,
+};
+
+export const Examples = () => (
+  <Stack align="flex-start" gap={2} direction="vertical">
+    <Badge>Neutral</Badge>
+    <Badge color="accent">Accent</Badge>
+    <Badge icon="bell">With icon</Badge>
+    <Badge icon="bell" color="accent">
+      Accent with icon
+    </Badge>
+  </Stack>
+);
diff --git a/packages/components/src/components/Badge/index.tsx b/packages/components/src/components/Badge/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Icon, IconNames, Stack, Text } from '@codesandbox/components';
+import { Icon, IconNames } from '../Icon';
+import { Stack } from '../Stack';
+import { Text } from '../Text';
 
 export interface BadgeProps {
   color?: 'accent' | 'neutral';
   icon?: IconNames;
 }
 
-// TODO: Move to component system
 export const Badge: React.FC<BadgeProps> = ({
   color = 'neutral',
   icon,
@@ -23,7 +24,6 @@ export const Badge: React.FC<BadgeProps> = ({
       backgroundColor: color === 'accent' ? '#653FFD80' : '#2e2e2e',
       color: color === 'accent' ? '#fff' : 'inherit',
       fontSize: 11,
-      lineHeight: 16,
     }}
     gap={1}
   >
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -4,6 +4,7 @@ export * from './components/ThemeProvider';
 
 // atoms
 export * from './components/Avatar';
+export * from './components/Badge';
 export * from './components/Button';
 export * from './components/Checkbox';
 export * from './components/Icon';

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,10 @@`
`27`	`27`	`"port": 8000,`
`28`	`28`	`"prLink": "redirect"`
`29`	`29`	`}`
	`30`	`+ },`
	`31`	`+ "storybook": {`
	`32`	`+ "name": "Run storybook",`
	`33`	`+ "command": "cd packages/components && yarn start:storybook"`
`30`	`34`	`}`
`31`	`35`	`},`
`32`	`36`	`"setupTasks": [`