perf(ui): improve ui

package.json

@@ -56,7 +56,7 @@
     "@tabler/icons": "1.118.0",
     "@tanstack/react-query": "4.10.3",
     "@tanstack/react-table": "8.2.6",
-    "@tremor/react": "^2.11.0",
+    "@tremor/react": "^3.0.0",
     "@trpc/client": "10.0.0-proxy-beta.15",
     "@trpc/next": "10.0.0-proxy-beta.15",
     "@trpc/react": "10.0.0-proxy-beta.15",
@@ -162,4 +162,4 @@
   "resolutions": {
     "graphql": "16.3.0"
   }
-}
+}

src/components/IDE/ToolBar/index.tsx

@@ -9,7 +9,6 @@ import { AiOutlineFileText } from 'react-icons/ai';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 import { INSTANCE_STATUS } from '@/components/JSONTable/FieldRender';
 import toast from 'react-hot-toast';
-
 interface ToolBar extends BoxProps {}
 
 const ToolBar = (props: ToolBar) => {
@@ -25,14 +24,13 @@ const ToolBar = (props: ToolBar) => {
   const { onOpen, onClose, isOpen } = useDisclosure();
 
   const curProjectStatus = INSTANCE_STATUS[instances.curInstance?.f_state || 0];
-
   return (
     <Box position={'fixed'} h="100%" overflow={'auto'}>
       <Flex minW="200px" h="100%" direction="column" align="center" p="14px" bg="#fff" {...props}>
         <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
           <PopoverTrigger>
             {curProject ? (
-              <Flex w="168px" cursor={'pointer'} borderRadius={'8px'} px="14px" py="8px" alignItems={'center'} mb="20px" border={'1px solid #EDEDED'}>
+              <Flex w="168px" cursor={'pointer'} borderRadius={'10px'} px="14px" py="6px" alignItems={'center'} mb="20px" border={'1px solid #EDEDED'}>
                 <Box flex="none" mr="8px" w={'6px'} h="6px" borderRadius={'50%'} bg={curProjectStatus?.color}></Box>
                 <Text mr="10px" w="130px" fontSize={'14px'} color={curProjectStatus?.color} whiteSpace={'nowrap'} overflow={'hidden'} textOverflow={'ellipsis'}>
                   {projectDetail.loading.value ? <Spinner w="10px" h="10px" /> : curProject?.name}
@@ -44,12 +42,12 @@ const ToolBar = (props: ToolBar) => {
             )}
           </PopoverTrigger>
           <PopoverContent
-            bg="#F8F8FA"
+            bg="#ffffff"
+            border="1px solid #EDEDED"
             w="168px"
             overflow={'auto'}
             px="14px"
             outline={'none'}
-            border="none"
             css={{
               '.project-item': {
                 '&:last-child': {

src/components/JSONMetricsView/ProgressCard/index.tsx

@@ -37,7 +37,7 @@ export const ProgressCard = ({ title, data }: ProgressCard) => {
                       </Box>
                     </Flex>
                     {/* <Progress mt="5px" value={item.currentValue} min={0} max={item.total} colorScheme="purple" size="sm" {...progressPros} /> */}
-                    <ProgressBar percentageValue={percentageValue} color="purple" className="mt-3" />
+                    <ProgressBar value={percentageValue} color="purple" className="mt-3" />
                   </Box>
                 </Box>
               );

src/components/JSONMetricsView/TimeRangePick/index.tsx

@@ -1,7 +1,8 @@
 import { ValueState } from '@/store/standard/base';
-import { Select, SelectProps } from '@chakra-ui/react';
+// import { Select, SelectProps } from '@chakra-ui/react';
 import { observer } from 'mobx-react-lite';
-import { SelectBox, SelectBoxItem } from '@tremor/react';
+import { Select, SelectItem, SelectProps } from '@tremor/react';
+
 export interface TimeRangePick {
   props?: SelectProps;
   value: any;
@@ -11,18 +12,18 @@ export interface TimeRangePick {
 export const TimeRangePick = observer(({ props, value, onChange }: TimeRangePick) => {
   return (
     <div className="max-w-sm  space-y-3">
-      <SelectBox
+      <Select
         className="w-4"
         defaultValue={value}
         onValueChange={(v) => {
           onChange(v);
         }}
       >
-        <SelectBoxItem value="hour" text="Hourly" />
-        <SelectBoxItem value="day" text="Daily" />
-        <SelectBoxItem value="week" text="Weekly" />
-        <SelectBoxItem value="month" text="Monthly" />
-      </SelectBox>
+        <SelectItem value="hour">Hourly</SelectItem>
+        <SelectItem value="day">Daily</SelectItem>
+        <SelectItem value="week">Weekly</SelectItem>
+        <SelectItem value="month">Monthly</SelectItem>
+      </Select>
     </div>
   );
 });

src/components/JSONMetricsView/index.tsx

@@ -16,7 +16,7 @@ const components = {
 
 export const JSONMetricsView = ({ data }: { data: JSONMetricsView[] }) => {
   return (
-    <Grid numCols={1} numColsSm={1} numColsLg={2} numColsMd={2} className="gap-2">
+    <Grid numItems={1} numItemsSm={1} numItemsLg={2} numItemsMd={2} className="gap-2">
       {data.map((item) => {
         let Component = components[item.type];
         //@ts-ignore

src/server/routers/env.ts

@@ -48,7 +48,7 @@ export const envRouter = t.router({
         return {
           blockChains,
           w3bstreamVersion,
-          studioVersion: pkg.version,
+          studioVersion: 'v' + pkg.version,
           httpURL: process.env.NEXT_PUBLIC_GATEWAY_HTTP_URL || 'https://dev.w3bstream.com/api/w3bapp/event/:projectName',
           mqttURL: process.env.NEXT_PUBLIC_GATEWAY_MQTT_URL || 'mqtt://dev.w3bstream.com:1883'
         };

src/store/lib/w3bstream/schema/metrics.ts

@@ -44,7 +44,7 @@ export default class MetricsModule {
 
   timeRangePick: { data: TimeRangePick } = {
     data: {
-      props: {},
+      // props: {},
       value: 'day',
       onChange: (value: 'day' | 'week' | 'month') => {
         const now = dayjs();

tailwind.config.js

@@ -1,11 +1,89 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@tremor/**/*.{js,ts,jsx,tsx}' // Tremor module
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@tremor/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {}
+    transparent: 'transparent',
+    current: 'currentColor',
+    extend: {
+      colors: {
+        // light mode
+        tremor: {
+          brand: {
+            faint: '#eff6ff', // blue-50
+            muted: '#bfdbfe', // blue-200
+            subtle: '#60a5fa', // blue-400
+            DEFAULT: '#3b82f6', // blue-500
+            emphasis: '#1d4ed8', // blue-700
+            inverted: '#ffffff' // white
+          },
+          background: {
+            muted: '#f9fafb', // gray-50
+            subtle: '#f3f4f6', // gray-100
+            DEFAULT: '#ffffff', // white
+            emphasis: '#374151' // gray-700
+          },
+          border: {
+            DEFAULT: '#e5e7eb' // gray-200
+          },
+          ring: {
+            DEFAULT: '#e5e7eb' // gray-200
+          },
+          content: {
+            subtle: '#9ca3af', // gray-400
+            DEFAULT: '#6b7280', // gray-500
+            emphasis: '#374151', // gray-700
+            strong: '#111827', // gray-900
+            inverted: '#ffffff' // white
+          }
+        }
+      },
+      boxShadow: {
+        // light
+        'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        // dark
+        'dark-tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'dark-tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'dark-tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+      },
+      borderRadius: {
+        'tremor-small': '0.375rem',
+        'tremor-default': '0.5rem',
+        'tremor-full': '9999px'
+      },
+      fontSize: {
+        'tremor-label': ['0.75rem'],
+        'tremor-default': ['0.875rem', { lineHeight: '1.25rem' }],
+        'tremor-title': ['1.125rem', { lineHeight: '1.75rem' }],
+        'tremor-metric': ['1.875rem', { lineHeight: '2.25rem' }]
+      }
+    }
   },
-  plugins: []
+  safelist: [
+    {
+      pattern: /bg-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900)/,
+      variants: ['hover', 'ui-selected']
+    },
+    {
+      pattern: /text-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900)/,
+      variants: ['hover', 'ui-selected']
+    },
+    {
+      pattern: /border-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900)/,
+      variants: ['hover', 'ui-selected']
+    },
+    {
+      pattern: /ring-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900)/
+    },
+    {
+      pattern:
+        /stroke-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/
+    },
+    {
+      pattern: /fill-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/
+    }
+  ],
+  plugins: [require('@headlessui/tailwindcss')]
 };