feat(tooling-explorer): Add apps-ui-kit to Explorer (#1960)

* feat(tooling-explorer): Install apps-ui-kit & ui-icons * feat(tooling-explorer): Configure apps-ui-kit in Explorer (Adds duplicated color config from @iota/core tailwind.config) * feat(tooling-explorer): Fix build and lint issues arisen from tailwind config modification
iotaledger · Aug 21, 2024 · c2380ca · c2380ca
1 parent cab5d43
commit c2380ca
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 9 deletions.
diff --git a/apps/explorer/package.json b/apps/explorer/package.json
@@ -27,11 +27,13 @@
         "@growthbook/growthbook": "^1.0.0",
         "@growthbook/growthbook-react": "^1.0.0",
         "@headlessui/react": "^1.7.15",
+        "@iota/apps-ui-kit": "workspace:*",
         "@iota/core": "workspace:*",
         "@iota/dapp-kit": "workspace:*",
         "@iota/icons": "workspace:*",
         "@iota/iota-sdk": "workspace:*",
         "@iota/ui": "workspace:*",
+        "@iota/ui-icons": "workspace:*",
         "@radix-ui/react-collapsible": "^1.0.3",
         "@radix-ui/react-dropdown-menu": "^2.0.5",
         "@radix-ui/react-popover": "^1.0.6",

diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
@@ -29,7 +29,7 @@ function Header(): JSX.Element {
                 isScrolled && 'shadow-effect-ui-regular',
             )}
         >
-            <div className="flex h-full max-w-[1440px] flex-1 items-center gap-5 px-5 2xl:p-0">
+            <div className="2xl:p-0 flex h-full max-w-[1440px] flex-1 items-center gap-5 px-5">
                 <LinkWithQuery
                     data-testid="nav-logo-button"
                     to="/"

diff --git a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
@@ -116,7 +116,7 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element {
                 </div>
             ) : (
                 <div className="relative flex h-full flex-col gap-4 overflow-auto text-left">
-                    <div className="flex min-h-14 w-full flex-col justify-between gap-y-3 border-b border-gray-45 max-sm:pb-3 max-sm:pt-5 sm:flex-row sm:items-center">
+                    <div className="max-sm:pb-3 max-sm:pt-5 flex min-h-14 w-full flex-col justify-between gap-y-3 border-b border-gray-45 sm:flex-row sm:items-center">
                         <Heading color="steel-darker" variant="heading4/semibold">
                             {coinBalanceHeader}
                         </Heading>

diff --git a/apps/explorer/src/components/owned-objects/OwnedObjects.tsx b/apps/explorer/src/components/owned-objects/OwnedObjects.tsx
@@ -158,7 +158,7 @@ export function OwnedObjects({ id }: OwnedObjectsProps): JSX.Element {
                 className={clsx('flex h-full overflow-hidden md:pl-10', !showPagination && 'pb-2')}
             >
                 <div className="relative flex h-full w-full flex-col gap-4">
-                    <div className="flex w-full flex-col items-start gap-3 border-b border-gray-45 max-sm:pb-3 sm:h-14 sm:min-h-14 sm:flex-row sm:items-center">
+                    <div className="max-sm:pb-3 flex w-full flex-col items-start gap-3 border-b border-gray-45 sm:h-14 sm:min-h-14 sm:flex-row sm:items-center">
                         <Heading color="steel-darker" variant="heading4/semibold">
                             Assets
                         </Heading>

diff --git a/apps/explorer/src/components/ui/ListboxSelect.tsx b/apps/explorer/src/components/ui/ListboxSelect.tsx
@@ -24,7 +24,7 @@ export function ListboxSelect<T extends string>({
                 <Listbox.Button className="group flex w-full flex-nowrap items-center gap-1 overflow-hidden text-hero-dark transition-all hover:text-hero-darkest">
                     <Text variant="body/semibold">{value}</Text>
                     <ChevronDown16
-                        className="text-gray-400 pointer-events-none h-4 w-4 text-steel transition-all group-hover:text-steel-dark"
+                        className="pointer-events-none h-4 w-4 text-gray-400 text-steel transition-all group-hover:text-steel-dark"
                         aria-hidden="true"
                     />
                 </Listbox.Button>

diff --git a/apps/explorer/src/components/ui/stories/TableCard.stories.tsx b/apps/explorer/src/components/ui/stories/TableCard.stories.tsx
@@ -34,7 +34,7 @@ const data = {
                     The below has a hover effect:{' '}
                     <ul>
                         <li>
-                            <i className="hover:text-red-900 cursor-pointer">Clupea harengus</i>
+                            <i className="cursor-pointer hover:text-red-900">Clupea harengus</i>
                         </li>
                     </ul>
                 </div>

diff --git a/apps/explorer/src/index.css b/apps/explorer/src/index.css
@@ -1,3 +1,5 @@
+@import '@iota/apps-ui-kit/styles';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/apps/explorer/src/pages/object-result/views/ObjectView.module.css b/apps/explorer/src/pages/object-result/views/ObjectView.module.css
@@ -80,7 +80,7 @@ div.display > div > div > figure > div > div {
 }
 
 table.description {
-    @apply mb-[3.75rem] w-full sm:w-[866px] 2xl:mb-0;
+    @apply mb-[3.75rem] w-full sm:w-[866px];
 }
 
 /* Description CSS */

diff --git a/apps/explorer/src/pages/transaction-result/TransactionData.tsx b/apps/explorer/src/pages/transaction-result/TransactionData.tsx
@@ -33,7 +33,7 @@ export function TransactionData({ transaction }: TransactionDataProps): JSX.Elem
 
     return (
         <div className="flex flex-wrap gap-3 pl-1 pr-2 md:gap-6">
-            <section className="flex w-96 flex-1 flex-col gap-3 max-md:min-w-[50%] md:gap-6">
+            <section className="max-md:min-w-[50%] flex w-96 flex-1 flex-col gap-3 md:gap-6">
                 <TransactionDetailCard
                     timestamp={summary?.timestamp}
                     sender={summary?.sender}

diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
@@ -3,9 +3,97 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import preset from '@iota/core/tailwind.config';
+import colors from 'tailwindcss/colors';
 import { type Config } from 'tailwindcss';
+import { uiKitStaticPreset } from '@iota/apps-ui-kit';
 
 export default {
-    content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@iota/ui/src/**/*.{js,jsx,ts,tsx}'],
-    presets: [preset],
+    presets: [preset, uiKitStaticPreset],
+    content: [
+        './src/**/*.{js,jsx,ts,tsx}',
+        './node_modules/@iota/ui/src/**/*.{js,jsx,ts,tsx}',
+        './node_modules/@iota/apps-ui-kit/dist/**/*.js',
+    ],
+    theme: {
+        // This COLOR are duplicated from @iota/core tailwind.config.ts!!!
+        // They are repeated here cause uiKitStaticPreset overwrites the colors, and they are still used throughout Explorer
+        // REMOVE THIS COLORS ONCE @iota/core TAILWIND IS NOT NEEDED ANYMORE
+        extend: {
+            colors: {
+                white: colors.white,
+                black: colors.black,
+                transparent: colors.transparent,
+                inherit: colors.inherit,
+
+                gray: {
+                    100: '#182435',
+                    95: '#2A3645',
+                    90: '#383F47',
+                    85: '#5A6573',
+                    80: '#636870',
+                    75: '#767A81',
+                    70: '#898D93',
+                    65: '#9C9FA4',
+                    60: '#C3C5C8',
+                    55: '#D7D8DA',
+                    50: '#E9EAEB',
+                    45: '#E3E6E8',
+                    40: '#F3F6F8',
+                    35: '#FEFEFE',
+                },
+
+                iota: {
+                    DEFAULT: '#6fbcf0',
+                    bright: '#2A38EB',
+                    light: '#E1F3FF',
+                    primaryBlue2023: '#4CA3FF',
+                    lightest: '#F1F8FD',
+                    dark: '#1F6493',
+                },
+
+                steel: {
+                    DEFAULT: '#A0B6C3',
+                    dark: '#758F9E',
+                    darker: '#566873',
+                },
+
+                issue: {
+                    DEFAULT: '#FF794B',
+                    dark: '#EB5A29',
+                    light: '#FFECE6',
+                },
+                hero: {
+                    DEFAULT: '#0284AD',
+                    dark: '#007195',
+                    darkest: '#15527B',
+                },
+                success: {
+                    DEFAULT: '#2DD7A7',
+                    dark: '#008C65',
+                    light: '#D5F7EE',
+                },
+                warning: {
+                    DEFAULT: '#F2BD24',
+                    dark: '#8D6E15',
+                    light: '#FFF8E2',
+                },
+                headerNav: '#2A4362',
+                search: {
+                    fill: '#162A43',
+                },
+                offwhite: '#fefefe',
+                offblack: '#111111',
+                ebony: '#101828',
+                avocado: {
+                    200: '#CBE5BE',
+                },
+            },
+        },
+        screens: {
+            sm: '600px',
+            md: '905px',
+            lg: '1240kpx',
+            xl: '1440px',
+        },
+    },
 } satisfies Partial<Config>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml