Fixed the vite build issue (#16)

* added the compiler option in tsconfig * changed the nr-fsa-theme to nr-theme
bcgov · Sep 22, 2023 · 905d86e · 905d86e
1 parent 25865bc
commit 905d86e
Show file tree

Hide file tree

Showing 11 changed files with 9,475 additions and 13,861 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@aws-amplify/ui-react": "^5.0.0",
-    "@bcgov-nr/nr-fsa-theme": "^1.0.10",
+    "@bcgov-nr/nr-theme": "^1.0.10",
     "@carbon/pictograms-react": "^11.49.0",
     "@carbon/react": "^1.27.0",
     "@esbuild/linux-x64": "^0.19.0",

diff --git a/frontend/src/components/BCHeader/BCHeader.scss b/frontend/src/components/BCHeader/BCHeader.scss
@@ -1,5 +1,5 @@
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/variables.scss' as vars;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
 
 .spar-header {
   overflow: hidden;
@@ -34,31 +34,31 @@ button.#{vars.$bcgov-prefix}--header__action {
 }
 
 button.#{vars.$bcgov-prefix}--header__action--active {
-  background: var(--bcgov-layer-02);
+  background: var(--bx-layer-02);
   border: 0;
 }
 
 .#{vars.$bcgov-prefix}--header__global .#{vars.$bcgov-prefix}--btn--icon-only.#{vars.$bcgov-prefix}--header__action svg,
 button.#{vars.$bcgov-prefix}--header__action svg {
-  fill: var(--bcgov-icon-on-color) ;
+  fill: var(--bx-icon-on-color) ;
 }
 
 button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__action--active > svg,
 .#{vars.$bcgov-prefix}--popover-container button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__action--active > svg {
-  fill: var(--bcgov-icon-primary) ;
+  fill: var(--bx-icon-primary) ;
 }
 
 button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__menu-trigger:focus {
-  border-color: var(--bcgov-icon-on-color);
+  border-color: var(--bx-icon-on-color);
 }
 
 .#{vars.$bcgov-prefix}--header-panel--expanded.notifications-panel,
 .#{vars.$bcgov-prefix}--header-panel--expanded.profile-panel {
   z-index: 10000;
   width: 25rem;
   height: 100vh;
-  background-color: var(--bcgov-layer-02);
-  color: var(--bcgov-text-primary);
+  background-color: var(--bx-layer-02);
+  color: var(--bx-text-primary);
   transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
   will-change: width;
 }

diff --git a/frontend/src/components/BCHeaderwSide/BCHeaderwSide.scss b/frontend/src/components/BCHeaderwSide/BCHeaderwSide.scss
@@ -1,5 +1,5 @@
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/variables.scss' as vars;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
 
 .spar-header {
   overflow: hidden;
@@ -34,31 +34,31 @@ button.#{vars.$bcgov-prefix}--header__action {
 }
 
 button.#{vars.$bcgov-prefix}--header__action--active {
-  background: var(--bcgov-layer-02);
+  background: var(--bx-layer-02);
   border: 0;
 }
 
 .#{vars.$bcgov-prefix}--header__global .#{vars.$bcgov-prefix}--btn--icon-only.#{vars.$bcgov-prefix}--header__action svg,
 button.#{vars.$bcgov-prefix}--header__action svg {
-  fill: var(--bcgov-icon-on-color) ;
+  fill: var(--bx-icon-on-color) ;
 }
 
 button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__action--active > svg,
 .#{vars.$bcgov-prefix}--popover-container button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__action--active > svg {
-  fill: var(--bcgov-icon-primary) ;
+  fill: var(--bx-icon-primary) ;
 }
 
 button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__menu-trigger:focus {
-  border-color: var(--bcgov-icon-on-color);
+  border-color: var(--bx-icon-on-color);
 }
 
 .#{vars.$bcgov-prefix}--header-panel--expanded.notifications-panel,
 .#{vars.$bcgov-prefix}--header-panel--expanded.profile-panel {
   z-index: 10000;
   width: 25rem;
   height: 100vh;
-  background-color: var(--bcgov-layer-02);
-  color: var(--bcgov-text-primary);
+  background-color: var(--bx-layer-02);
+  color: var(--bx-text-primary);
   transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
   will-change: width;
 }

diff --git a/frontend/src/components/MyProfile/MyProfile.scss b/frontend/src/components/MyProfile/MyProfile.scss
@@ -1,4 +1,4 @@
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/variables.scss' as vars;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
 
 .user-info-section {
   padding: 1rem;

diff --git a/frontend/src/components/StandardCard/style.scss b/frontend/src/components/StandardCard/style.scss
@@ -1,4 +1,4 @@
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/variables.scss' as vars;
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
 @use '@carbon/type';
 
 .std-card-header {

diff --git a/frontend/src/components/ThemeToggle/ThemeToggle.scss b/frontend/src/components/ThemeToggle/ThemeToggle.scss
@@ -1,4 +1,4 @@
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
 .theme-toggle {
     width: 48px;
     height: 24px;

diff --git a/frontend/src/custom.scss b/frontend/src/custom.scss
@@ -1,9 +1,9 @@
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/light-theme.scss' as light;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/dark-theme.scss' as dark;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/colors.scss' as colors;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/type-family.scss' as types;
+@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as light;
+@use '@bcgov-nr/nr-theme/design-tokens/dark-theme.scss' as dark;
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
+@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss' as types;
 
-@use '@bcgov-nr/nr-fsa-theme/style-sheets/carbon-components-overrides.scss';
+@use '@bcgov-nr/nr-theme/style-sheets/carbon-components-overrides.scss';
 
 @use '@carbon/type/scss/_font-family.scss' with (
   $font-families: types.$type-family,
@@ -24,16 +24,16 @@
 // on the components
 // (Open issue: https://github.com/carbon-design-system/carbon/issues/12376)
 @use '@carbon/react/scss/components/button/tokens' as button-tokens;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/light-buttons.scss' as light-button-overrides;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/dark-buttons.scss' as dark-button-overrides;
+@use '@bcgov-nr/nr-theme/design-tokens/light-buttons.scss' as light-button-overrides;
+@use '@bcgov-nr/nr-theme/design-tokens/dark-buttons.scss' as dark-button-overrides;
 
 @use '@carbon/react/scss/components/tag/tokens' as tag-tokens;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/light-tags.scss' as light-tag-overrides;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/dark-tags.scss' as dark-tag-overrides;
+@use '@bcgov-nr/nr-theme/design-tokens/light-tags.scss' as light-tag-overrides;
+@use '@bcgov-nr/nr-theme/design-tokens/dark-tags.scss' as dark-tag-overrides;
 
 @use '@carbon/react/scss/components/notification/tokens' as notification-tokens;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/light-notifications.scss' as light-notification-overrides;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/dark-notifications.scss' as dark-notification-overrides;
+@use '@bcgov-nr/nr-theme/design-tokens/light-notifications.scss' as light-notification-overrides;
+@use '@bcgov-nr/nr-theme/design-tokens/dark-notifications.scss' as dark-notification-overrides;
 
 @use '@carbon/react';
 @use '@carbon/grid';

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -13,7 +13,7 @@ const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <ClassPrefix prefix='bcgov'>
+    <ClassPrefix prefix='bx'>
       <ThemePreference>
         <Provider store={store}>
           <App />

diff --git a/frontend/src/theme/components-overrides.scss b/frontend/src/theme/components-overrides.scss
@@ -126,7 +126,7 @@
 
 nav.#{variables.$bcgov-prefix}--side-nav {
   box-shadow: inset -1px 0 0 colors.$gray-20;
-  background-color: var(--bcgov-background-left-panel);
+  background-color: var(--bx-background-left-panel);
 }
 
 .#{variables.$bcgov-prefix}--side-nav__items {
@@ -172,7 +172,7 @@ nav.#{variables.$bcgov-prefix}--side-nav {
 }
 
 .#{variables.$bcgov-prefix}--header {
-  background-color: var(--bcgov-background-brand) !important;
+  background-color: var(--bx-background-brand) !important;
 }
 
 ul.#{variables.$bcgov-prefix}--accordion {
@@ -212,21 +212,21 @@ $types: 'error', 'info', 'success', 'warning';
 
 @each $notificationType in $types {
   div.#{variables.$bcgov-prefix}--inline-notification--#{$notificationType}{
-    border-left: 4px solid var(--bcgov-support-#{$notificationType}-inverse);}
+    border-left: 4px solid var(--bx-support-#{$notificationType}-inverse);}
   div.#{variables.$bcgov-prefix}--inline-notification--low-contrast.#{variables.$bcgov-prefix}--inline-notification--#{$notificationType}{
-    border-left: 4px solid var(--bcgov-support-#{$notificationType});}
+    border-left: 4px solid var(--bx-support-#{$notificationType});}
   div.#{variables.$bcgov-prefix}--inline-notification--low-contrast.#{variables.$bcgov-prefix}--inline-notification--#{$notificationType}::before{
-    border-color: var(--bcgov-notification-border-#{$notificationType});}
+    border-color: var(--bx-notification-border-#{$notificationType});}
 }
 
 @each $notificationType in $types {
   div.#{variables.$bcgov-prefix}--toast-notification--#{$notificationType}{
-    border-left: 4px solid var(--bcgov-support-#{$notificationType}-inverse);}
+    border-left: 4px solid var(--bx-support-#{$notificationType}-inverse);}
   div.#{variables.$bcgov-prefix}--toast-notification--low-contrast.#{variables.$bcgov-prefix}--toast-notification--#{$notificationType}{
-    border-left: 4px solid var(--bcgov-support-#{$notificationType});
-    border-top-color: var(--bcgov-notification-border-#{$notificationType});
-    border-bottom-color: var(--bcgov-notification-border-#{$notificationType});
-    border-right-color: var(--bcgov-notification-border-#{$notificationType})}
+    border-left: 4px solid var(--bx-support-#{$notificationType});
+    border-top-color: var(--bx-notification-border-#{$notificationType});
+    border-bottom-color: var(--bx-notification-border-#{$notificationType});
+    border-right-color: var(--bx-notification-border-#{$notificationType})}
 }
 
 .#{variables.$bcgov-prefix}--overflow-menu.bcgov--overflow-menu--open{

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["vite/client"],
     "target": "ESNext",
     "lib": [
       "dom",