@loja-integrada/admin-components 0.18.9 → 0.18.10

package/dist/tailwind.css

@@ -0,0 +1 @@
+.tippy-box{--bg-color:rgb(var(--color-inverted-1)/100);background-color:var(--bg-color);border-radius:3px;color:rgb(var(--color-base-1)/100);font-size:12px;letter-spacing:-.4px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}.tippy-box [data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-box .tippy-arrow{color:var(--bg-color);height:15px;width:15px}.tippy-box .tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-box .tippy-content{padding:12px 8px;position:relative;z-index:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.18.9",
+  "version": "0.18.10",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,13 +91,13 @@
     "@types/react-modal": "^3.12.1",
     "@types/react-table": "^7.7.1",
     "@types/react-text-mask": "^5.4.8",
-    "@types/styled-components": "^5.1.14",
     "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-name-mapper": "^1.2.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "chromatic": "^6.5.4",
+    "css-loader": "5.2.6",
     "cypress": "^9.6.0",
     "cypress-sonarqube-reporter": "^1.11.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -106,16 +106,21 @@
     "identity-obj-proxy": "^3.0.0",
     "postcss": "^8.4.12",
     "postcss-loader": "^4.2.0",
+    "postcss-nesting": "^11.2.1",
     "prettier": "^2.6.2",
     "react-is": "^18.1.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.59.3",
+    "sass-loader": "10.1.1",
     "size-limit": "^7.0.8",
     "storybook-addon-designs": "^6.3.1",
+    "storybook-dark-mode": "^2.1.1",
+    "style-loader": "2.0.0",
     "tailwindcss": "^3.1.2",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
-    "webpack": "^5.72.0",
+    "webpack": "^5.76.0",
     "webpack-dev-server": "^4.9.0"
   },
   "peerDependency": {
@@ -125,7 +130,7 @@
     "tailwindcss": ">=3.1.0"
   },
   "dependencies": {
-    "@loja-integrada/tailwindcss-config": "^1.6.3",
+    "@loja-integrada/tailwindcss-config": "^1.7.0",
     "@tippyjs/react": "^4.2.5",
     "@types/react-select": "^4.0.17",
     "babel-jest": "^29.2.2",
@@ -138,7 +143,6 @@
     "react-table": "^7.7.0",
     "react-text-mask": "^5.4.3",
     "react-toastify": "^7.0.4",
-    "sonarqube-scanner": "^2.8.2",
-    "styled-components": "^5.3.1"
+    "sonarqube-scanner": "^2.8.2"
   }
 }

package/src/Components/SidebarFixed/SidebarFixed.tsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react'
 import { Icon } from '../../Icons'
 
 const backgroundShadowEffect = [
-  '[background:linear-gradient(#FFFFFF_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),#FFFFFF_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]',
+  '[background:linear-gradient(theme(colors.base-1/100)_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),theme(colors.base-1/100)_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]',
   '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]',
   '[background-attachment:local,local,scroll,scroll]',
   '[background-repeat:no-repeat]',
-  '[background-color:#FFFFFF]',
+  '[background-color:theme(colors.base-1/100]',
   '[&_.form-group_.bg-base-1]:bg-transparent',
 ]
 

package/src/Forms/Dropdown/Dropdown.tsx

@@ -123,7 +123,7 @@ const CustomControl = (
   variant: DropdownVariant,
   errorMessage?: string
 ) => {
-  const controlClasses = `cursor-pointer transition-all flex itens-center border  ${
+  const controlClasses = `cursor-pointer transition-all flex itens-center border bg-base-1  ${
     errorMessage ? varianErrorClasses[variant] : variantControlClasses[variant]
   } ${sizeClasses[size]} ${
     props.menuIsOpen ? variantSelectedClasses[variant] : ''
@@ -142,11 +142,11 @@ const IconOption = (
   const { isSelected, isDisabled, data } = optionDefaultProps
 
   const optionClasses = `${
-    isSelected && markSelectedOption ? 'text-inverted-1' : 'text-inverted-2 '
-  } text-sm first:pt-0 last:pb-0 p-2 ${
+    isSelected && markSelectedOption ? 'text-inverted-1' : 'text-inverted-2'
+  } text-sm first:mt-2 last:mb-2 py-2 px-5 font-semibold transition-colors ${
     isDisabled
-      ? 'opacity-80 cursor-not-allowed'
-      : 'hover:bg-transparent hover:text-on-base font-semibold cursor-pointer'
+      ? 'opacity-50 cursor-not-allowed'
+      : 'hover:text-on-base hover:bg-inverted-2/5 cursor-pointer'
   }`
 
   return (
@@ -175,7 +175,7 @@ const formatGroupLabel = (
 const CustomGroupHeading = (props: any) => (
   <GroupHeading
     {...props}
-    className="p-2 pt-0 pb-3 text-card-stroke uppercase font-bold text-xs"
+    className="p-2 pt-0 pb-3 text-inverted-1 uppercase font-bold text-xs"
   />
 )
 
@@ -272,8 +272,8 @@ const DropdownComponent = (
             return {
               ...base,
               width: menuWidth,
+              backgroundColor: 'rgb(var(--color-base-1) / 100)',
               zIndex: 999,
-              padding: 20,
               ...(menuHorizontalPlacement &&
                 menuHorizontalPlacement === 'left' && { left: 0 }),
               ...(menuHorizontalPlacement &&
@@ -302,6 +302,7 @@ const DropdownComponent = (
               ...base,
               fontSize: '0.875rem',
               letterSpacing: '-0.025rem',
+              color: 'rgb(var(--color-on-base) / 100)',
             }
           },
         }}

package/src/Indicators/Tooltip/Tooltip.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
-
 import Tippy, { TippyProps } from '@tippyjs/react'
-
-import styled from 'styled-components'
+import './style.scss'
 
 const TooltipComponent = (props: TooltipProps) => {
   const [mounted, setMounted] = React.useState(false)
@@ -30,7 +28,7 @@ const TooltipComponent = (props: TooltipProps) => {
   }
 
   return (
-    <StyledTooltipComponent
+    <Tippy
       {...computedProps}
       appendTo={props?.appendTo || 'parent'}
       hideOnClick={props?.hideOnClick || false}
@@ -39,114 +37,10 @@ const TooltipComponent = (props: TooltipProps) => {
       duration={props?.duration || 150}
       placement={window?.innerWidth < 1024 ? 'top' : props?.placement || 'top'}
       interactive={props?.interactive || false}
-      theme={props?.theme || 'dark'}
     />
   )
 }
 
-const theme: Record<string, Record<string, string>> = {
-  light: {
-    background: '#fff',
-    color: '#371E56',
-  },
-  dark: {
-    background: '#371E56',
-    color: '#fff',
-  },
-}
-
-const StyledTooltipComponent = styled(Tippy)<{
-  theme: string
-}>`
-  --bg-color: ${(props) => theme[props.theme].background};
-  position: relative;
-  background-color: var(--bg-color);
-  color: ${(props) => theme[props.theme].color};
-  border-radius: 3px;
-  font-size: 12px;
-  letter-spacing: -0.4px;
-  line-height: 1.4;
-  outline: 0;
-  transition-property: transform, visibility, opacity;
-
-  &[data-animation='fade'][data-state='hidden'] {
-    opacity: 0;
-  }
-
-  [data-tippy-root] {
-    max-width: calc(100vw - 10px);
-  }
-
-  &[data-placement^='top'] > .tippy-arrow {
-    bottom: 0;
-  }
-
-  &[data-placement^='top'] > .tippy-arrow:before {
-    bottom: -7px;
-    left: 0;
-    border-width: 8px 8px 0;
-    border-top-color: initial;
-    transform-origin: center top;
-  }
-
-  &[data-placement^='bottom'] > .tippy-arrow {
-    top: 0;
-  }
-
-  &[data-placement^='bottom'] > .tippy-arrow:before {
-    top: -7px;
-    left: 0;
-    border-width: 0 8px 8px;
-    border-bottom-color: initial;
-    transform-origin: center bottom;
-  }
-
-  &[data-placement^='left'] > .tippy-arrow {
-    right: 0;
-  }
-
-  &[data-placement^='left'] > .tippy-arrow:before {
-    border-width: 8px 0 8px 8px;
-    border-left-color: initial;
-    right: -7px;
-    transform-origin: center left;
-  }
-
-  &[data-placement^='right'] > .tippy-arrow {
-    left: 0;
-  }
-
-  &[data-placement^='right'] > .tippy-arrow:before {
-    left: -7px;
-    border-width: 8px 8px 8px 0;
-    border-right-color: initial;
-    transform-origin: center right;
-  }
-
-  &[data-inertia][data-state='visible'] {
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-  }
-
-  .tippy-arrow {
-    width: 15px;
-    height: 15px;
-    color: var(--bg-color);
-  }
-
-  .tippy-arrow:before {
-    content: '';
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .tippy-content {
-    position: relative;
-    padding: 12px 8px;
-    z-index: 1;
-  }
-`
-
 export const Tooltip = React.memo(TooltipComponent)
 
 export interface TooltipProps extends TippyProps {
@@ -179,6 +73,7 @@ export interface TooltipProps extends TippyProps {
    * */
   interactive?: TippyProps['interactive']
   /** Tooltip theme
+   * @deprecated Not implemented
    * @default dark
    * */
   theme?: 'light' | 'dark'

package/src/Indicators/Tooltip/style.scss

@@ -0,0 +1,89 @@
+.tippy-box {
+  --bg-color: theme('colors.inverted-1' / 100);
+  position: relative;
+  background-color: var(--bg-color);
+  color: theme('colors.base-1' / 100);
+  border-radius: 3px;
+  font-size: 12px;
+  letter-spacing: -0.4px;
+  line-height: 1.4;
+  outline: 0;
+  transition-property: transform, visibility, opacity;
+
+  &[data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+
+  [data-tippy-root] {
+    max-width: calc(100vw - 10px);
+  }
+
+  &[data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+
+  &[data-placement^='top'] > .tippy-arrow:before {
+    bottom: -7px;
+    left: 0;
+    border-width: 8px 8px 0;
+    border-top-color: initial;
+    transform-origin: center top;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow:before {
+    top: -7px;
+    left: 0;
+    border-width: 0 8px 8px;
+    border-bottom-color: initial;
+    transform-origin: center bottom;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow:before {
+    border-width: 8px 0 8px 8px;
+    border-left-color: initial;
+    right: -7px;
+    transform-origin: center left;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow:before {
+    left: -7px;
+    border-width: 8px 8px 8px 0;
+    border-right-color: initial;
+    transform-origin: center right;
+  }
+
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+
+.tippy-arrow {
+  width: 15px;
+  height: 15px;
+  color: var(--bg-color);
+}
+
+.tippy-arrow:before {
+  content: '';
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tippy-content {
+  position: relative;
+  padding: 12px 8px;
+  z-index: 1;
+}
+}

package/src/tailwind.scss

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import '@loja-integrada/tailwindcss-config/src/_variables.scss';
+
+body {
+  @apply antialiased;
+}