Merge pull request #187 from vegaprotocol/task/componentize-stats

Task/componentize stats

libs/deal-ticket/src/deal-ticket.spec.tsx

@@ -46,7 +46,7 @@ const transactionStatus = 'default';
 
 function generateJsx() {
   return (
-    <VegaWalletContext.Provider value={{} as any}>
+    <VegaWalletContext.Provider value={{} as never}>
       <DealTicket
         defaultOrder={order}
         market={market}

libs/network-stats/src/components/good-threshold-indicator/good-threshold-indicator.tsx

@@ -1,21 +0,0 @@
-import type { value, goodThreshold } from '../../config/types';
-
-interface GoodThresholdIndicatorProps {
-  goodThreshold: goodThreshold | undefined;
-  value: value;
-}
-
-export const GoodThresholdIndicator = ({
-  goodThreshold,
-  value,
-}: GoodThresholdIndicatorProps) => {
-  return (
-    <div
-      className={`inline-block w-8 h-8 mb-[0.15rem] mr-8 rounded ${
-        (goodThreshold &&
-          (goodThreshold(value) ? 'bg-intent-success' : 'bg-intent-danger')) ||
-        'bg-current'
-      }`}
-    />
-  );
-};

libs/network-stats/src/components/good-threshold-indicator/index.ts

@@ -1 +0,0 @@
-export { GoodThresholdIndicator } from './good-threshold-indicator';

libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx

@@ -1,7 +1,8 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
 import { defaultFieldFormatter } from '../table-row';
-import { GoodThresholdIndicator } from '../good-threshold-indicator';
+import { Card, Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
+import { useMemo } from 'react';
 
 export const PromotedStatsItem = ({
   title,
@@ -10,17 +11,26 @@ export const PromotedStatsItem = ({
   value,
   description,
 }: StatFields) => {
+  const variant = useMemo(
+    () =>
+      goodThreshold
+        ? goodThreshold(value)
+          ? TailwindIntents.Success
+          : TailwindIntents.Danger
+        : TailwindIntents.Highlight,
+    [goodThreshold, value]
+  );
   return (
     <Tooltip description={description} align="start">
-      <div className="px-24 py-16 pr-64 border items-center">
+      <Card>
         <div className="uppercase text-[0.9375rem]">
-          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
+          <Indicator variant={variant} />
           <span>{title}</span>
         </div>
         <div className="mt-4 text-h4 leading-none">
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </div>
-      </div>
+      </Card>
     </Tooltip>
   );
 };

libs/network-stats/src/components/table-row/table-row.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
-import { GoodThresholdIndicator } from '../good-threshold-indicator';
+import { useMemo } from 'react';
+import { Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
 
 export const defaultFieldFormatter = (field: unknown) =>
   field === undefined ? 'no data' : field;
@@ -12,6 +13,15 @@ export const TableRow = ({
   value,
   description,
 }: StatFields) => {
+  const variant = useMemo(
+    () =>
+      goodThreshold
+        ? goodThreshold(value)
+          ? TailwindIntents.Success
+          : TailwindIntents.Danger
+        : TailwindIntents.Highlight,
+    [goodThreshold, value]
+  );
   return (
     <Tooltip description={description} align="start">
       <tr className="border">
@@ -20,7 +30,7 @@ export const TableRow = ({
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </td>
         <td className="py-4 px-8">
-          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
+          <Indicator variant={variant} />
         </td>
       </tr>
     </Tooltip>

libs/positions/src/lib/positions-table.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import type { ValueFormatterParams } from 'ag-grid-community';
 import {
   PriceCell,

libs/ui-toolkit/src/components/card/card.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Card } from './card';
+
+export default {
+  title: 'Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => {
+  return <Card>Test</Card>;
+};
+
+export const Default = Template.bind({});
+Default.args = {};

libs/ui-toolkit/src/components/card/card.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+}
+
+export function Card({ children }: CardProps) {
+  return (
+    <div className="px-24 py-16 pr-64 border items-center">{children}</div>
+  );
+}

libs/ui-toolkit/src/components/card/index.tsx

@@ -0,0 +1 @@
+export * from './card';

libs/ui-toolkit/src/components/indicator/index.tsx

@@ -0,0 +1 @@
+export * from './indicator';

libs/ui-toolkit/src/components/indicator/indicator.stories.tsx

@@ -0,0 +1,31 @@
+import type { Story, Meta } from '@storybook/react';
+import { Indicator } from './indicator';
+
+export default {
+  component: Indicator,
+  title: 'Indicator',
+} as Meta;
+
+const Template: Story = (args) => <Indicator {...args} />;
+
+export const Default = Template.bind({});
+
+export const Highlight = Template.bind({});
+Highlight.args = {
+  variant: 'highlight',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: 'danger',
+};

libs/ui-toolkit/src/components/indicator/indicator.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import type { TailwindIntents } from '../../utils/intent';
+import { getVariantBackground } from '../../utils/intent';
+
+export const Indicator = ({ variant }: { variant?: TailwindIntents }) => {
+  const names = classNames(
+    'inline-block w-8 h-8 mb-2 mr-8 rounded',
+    getVariantBackground(variant)
+  );
+  return <div className={names} />;
+};

libs/ui-toolkit/src/components/lozenge/lozenge.tsx

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
+import { getVariantBackground } from '../../utils/intent';
+import type { TailwindIntents } from '../../utils/intent';
 
 interface LozengeProps {
   children: ReactNode;
-  variant?: 'success' | 'warning' | 'danger' | 'highlight';
+  variant?: TailwindIntents;
   className?: string;
   details?: string;
 }
@@ -13,13 +15,10 @@ const getWrapperClasses = (className: LozengeProps['className']) => {
 };
 
 const getLozengeClasses = (variant: LozengeProps['variant']) => {
-  return classNames(['rounded-md', 'font-mono', 'leading-none', 'p-4'], {
+  return classNames(
-    'bg-intent-success text-black': variant === 'success',
+    ['rounded-md', 'font-mono', 'leading-none', 'p-4'],
-    'bg-intent-danger text-white': variant === 'danger',
+    getVariantBackground(variant)
-    'bg-intent-warning text-black': variant === 'warning',
+  );
-    'bg-intent-highlight text-black': variant === 'highlight',
-    'bg-intent-help text-white': !variant,
-  });
 };
 
 export const Lozenge = ({

libs/ui-toolkit/src/index.ts

@@ -21,6 +21,8 @@ export { ThemeSwitcher } from './components/theme-switcher';
 export { Dialog } from './components/dialog/dialog';
 export { VegaLogo } from './components/vega-logo';
 export { Tooltip } from './components/tooltip';
+export { Indicator } from './components/indicator';
+export { Card } from './components/card';
 
 // Utils
 export * from './utils/intent';

libs/ui-toolkit/src/utils/intent.ts

@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-
-export enum Intent {
-  Danger = 'danger',
-  Warning = 'warning',
-  Prompt = 'prompt',
-  Progress = 'progress',
-  Success = 'success',
-  Help = 'help',
-}
-
-export const getIntentShadow = (intent?: Intent) => {
-  return classNames('shadow-callout', {
-    'shadow-intent-danger': intent === Intent.Danger,
-    'shadow-intent-warning': intent === Intent.Warning,
-    'shadow-intent-prompt': intent === Intent.Prompt,
-    'shadow-black dark:shadow-white': intent === Intent.Progress,
-    'shadow-intent-success': intent === Intent.Success,
-    'shadow-intent-help': intent === Intent.Help,
-  });
-};

libs/ui-toolkit/src/utils/intent.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+
+export enum Intent {
+  Danger = 'danger',
+  Warning = 'warning',
+  Prompt = 'prompt',
+  Progress = 'progress',
+  Success = 'success',
+  Help = 'help',
+}
+
+export enum TailwindIntents {
+  Danger = 'danger',
+  Warning = 'warning',
+  Prompt = 'prompt',
+  Success = 'success',
+  Help = 'help',
+  Highlight = 'highlight',
+}
+
+export const getIntentShadow = (intent?: Intent) => {
+  return classNames('shadow-callout', {
+    'shadow-intent-danger': intent === Intent.Danger,
+    'shadow-intent-warning': intent === Intent.Warning,
+    'shadow-intent-prompt': intent === Intent.Prompt,
+    'shadow-black dark:shadow-white': intent === Intent.Progress,
+    'shadow-intent-success': intent === Intent.Success,
+    'shadow-intent-help': intent === Intent.Help,
+  });
+};
+
+export const getVariantBackground = (variant?: TailwindIntents) => {
+  return {
+    'bg-intent-danger text-white': variant === TailwindIntents.Danger,
+    'bg-intent-warning text-black': variant === TailwindIntents.Warning,
+    'bg-intent-prompt text-black': variant === TailwindIntents.Prompt,
+    'bg-intent-success text-black': variant === TailwindIntents.Success,
+    'bg-intent-help text-white': variant === TailwindIntents.Help,
+    'bg-intent-highlight text-black': variant === TailwindIntents.Highlight,
+  };
+};