feat(generator.css): migration bootstrap to tailwindcss

ref:MANAGER-11981

Signed-off-by: stif59100 <[email protected]>

Author: stif59100

.stylelintrc.json

@@ -3,9 +3,14 @@
   "plugins": ["stylelint-scss"],
   "rules": {
     "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["tailwind"]
+      }
+    ],
     "function-calc-no-invalid": null,
     "prettier/prettier": true,
-    "scss/at-rule-no-unknown": true,
     "selector-type-no-unknown": [
       true,
       {

packages/manager/core/generator/app/conditional-templates/dashboard/[serviceName]/Tabs1.tsx

@@ -1,6 +1,6 @@
 import React, { lazy } from 'react';
 import { MscBillingTile } from '@ovhcloud/msc-react-billing-tile';
-import { useParams, } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useEnvironment } from '@ovh-ux/manager-react-core-application';
 import { Locale } from '@ovhcloud/msc-utils';
 
@@ -10,8 +10,20 @@ function Tabs1() {
   const { serviceName } = useParams();
 
   return (
-    <div className="dashboard-section pt-4">
-      <div>
+    <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 py-6">
+      <div className="p-3">
+        <MscBillingTile
+          servicePath={`{{this.apiPath}}/${serviceName}`}
+          locale={locale}
+        />
+      </div>
+      <div className="p-3">
+        <MscBillingTile
+          servicePath={`{{this.apiPath}}/${serviceName}`}
+          locale={locale}
+        />
+      </div>
+      <div className="p-3">
         <MscBillingTile
           servicePath={`{{this.apiPath}}/${serviceName}`}
           locale={locale}

packages/manager/core/generator/app/conditional-templates/dashboard/[serviceName]/Tabs1/TileExemple.tsx

@@ -10,7 +10,6 @@ import { Locale } from '@ovhcloud/msc-utils';
 import useGuideUtils from '@/components/GuideLink/guide-utils';
 import { OnboardingLayout } from '@/components/layout-helpers/Onboarding';
 import onboardingImgSrc from './onboarding-img.png';
-import './index.scss';
 
 export default function Onboarding() {
   const { t } = useTranslation('{{appName}}/onboarding');
@@ -56,7 +55,7 @@ export default function Onboarding() {
       moreInfoButtonLabel={t('moreInfoButtonLabel')}
       moreInfoHref={t('moreInfoButtonLink')}
     >
-      <aside className="tile-grid">
+      <aside className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 pt-12">
         {tileList.map((tile) => (
           <MscTile
             key={tile.tileTitle}

packages/manager/core/generator/app/conditional-templates/onboarding/index.scss

@@ -31,13 +31,13 @@
     "@ovhcloud/ods-common-theming": "^16.0.1",
     "@ovhcloud/ods-theme-blue-jeans": "^16.0.1",
     "@tanstack/react-query": "^4.29.3",
-    "bootstrap": "^5.3.0",
     "@tanstack/react-query-devtools": "^4.9.0",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-i18next": "^11.18.1",
     "react-router-dom": "^6.3.0",
-    "i18next": "^20.4.0"
+    "i18next": "^20.4.0",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
     "@ovh-ux/manager-vite-config": "*",

packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx.hbs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/manager/core/generator/app/templates/package.json.hbs

@@ -7,7 +7,6 @@ import {
   ODS_BUTTON_VARIANT,
 } from '@ovhcloud/ods-components/button';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import './ButtonTooltip.scss';
 
 interface TooltipItem {
   label: string;
@@ -62,10 +61,12 @@ const ButtonTooltip: React.FC<ButtonTooltipProps> = (props) => {
         />
       </OsdsButton>
       {showTooltip && (
-        <div ref={tooltipRef} className="tooltip">
-          <div className="tooltip-text">
+        <div ref={tooltipRef} className="relative inline-block left-[-80%]">
+          <div className="absolute bg-white rounded whitespace-nowrap mt-[-4px] right-[-100%] border-2 border-gray-300 text-left z-50">
             {tooltipContent.map((item: TooltipItem) => (
-              <div key={item.label}>{item.label}</div>
+              <div key={item.label} className="px-10 py-20 cursor-pointer">
+                {item.label}
+              </div>
             ))}
           </div>
         </div>

packages/manager/core/generator/app/templates/postcss.config.js

@@ -11,7 +11,6 @@ import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components/button';
 import { useShell } from '@ovh-ux/manager-react-core-application';
 
 import OOPS from '../../assets/error-banner-oops.png';
-import './error.scss';
 
 export const TRACKING_LABELS = {
   SERVICE_NOT_FOUND: 'service_not_found',
@@ -62,8 +61,8 @@ const ErrorBanner: React.FC<ErrorObject> = ({ error }) => {
   }, []);
 
   return (
-    <div className="manager-error-page p-5">
-      <div className="manager-error-page-image">
+    <div className="mx-auto w-full max-w-[600px] grid h-full overflow-hidden p-5">
+      <div className="w-full">
         <img src={OOPS} alt="OOPS" />
       </div>
 
@@ -91,7 +90,7 @@ const ErrorBanner: React.FC<ErrorObject> = ({ error }) => {
         </OsdsMessage>
       </div>
 
-      <div className="manager-error-page-footer py-2">
+      <div className="text-right overflow-hidden py-2">
         <OsdsButton
           color={ODS_THEME_COLOR_INTENT.primary}
           variant={ODS_BUTTON_VARIANT.ghost}

packages/manager/core/generator/app/templates/src/components/ButtonTooltip/ButtonTooltip.scss

@@ -9,8 +9,6 @@ import {
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components/text';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 
-import './Dashboard.scss';
-
 export type DashboardTabItemProps = {
   name: string;
   title: string;
@@ -37,8 +35,8 @@ const Dashboard: React.FC<DashboardLayoutProps> = ({ tabs }) => {
   }, [location.pathname]);
 
   return (
-    <div className="dashboard-layout-helpers">
-      <div className="dashboard-layout-subtitle py-4">
+    <>
+      <div className="py-4">
         <OsdsText
           level={ODS_TEXT_LEVEL.heading}
           color={ODS_THEME_COLOR_INTENT.text}
@@ -51,13 +49,15 @@ const Dashboard: React.FC<DashboardLayoutProps> = ({ tabs }) => {
         <OsdsTabBar slot="top">
           {tabs.map((tab: DashboardTabItemProps, key: number) => (
             <OsdsTabBarItem key={`osds-tab-bar-item-${key}`} panel={tab.name}>
-              <NavLink to={tab.to}>{tab.title}</NavLink>
+              <NavLink to={tab.to} className="no-underline">
+                {tab.title}
+              </NavLink>
             </OsdsTabBarItem>
           ))}
         </OsdsTabBar>
       </OsdsTabs>
       <Outlet />
-    </div>
+    </>
   );
 };