Tailwind config as preset (#26)

* Tailwind config as preset

* Small changes to topbar

* Add props to topbar and fix sidebar dimensions

* bump

styleguide/README.md

@@ -76,5 +76,4 @@ For vanilla CSS, you can include it at the root directory and add it to the `fil
 ## Others
 
 > If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
-
 > NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

styleguide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lojaintegrada/admin-components",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,15 +69,15 @@
     "@cypress/webpack-dev-server": "^1.3.1",
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@size-limit/preset-small-lib": "^4.10.1",
-    "@storybook/addon-a11y": "^6.3.2",
-    "@storybook/addon-essentials": "^6.3.2",
+    "@storybook/addon-a11y": "^6.3.4",
+    "@storybook/addon-essentials": "^6.3.4",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addon-links": "^6.3.4",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.3.2",
-    "@storybook/react": "^6.3.2",
+    "@storybook/addons": "^6.3.4",
+    "@storybook/react": "^6.3.4",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/testing-react": "^0.0.18",
+    "@storybook/testing-react": "^0.0.21",
     "@testing-library/react": "^11.2.7",
     "@types/node": "^15.12.0",
     "@types/react": "^17.0.3",
@@ -108,7 +108,7 @@
     "react-dom": ">=17.0.1"
   },
   "dependencies": {
-    "@lojaintegrada/tailwindcss-config": "^0.0.8",
+    "@lojaintegrada/tailwindcss-config": "^1.0.1",
     "react-table": "^7.7.0",
     "react-toastify": "^7.0.4"
   }

styleguide/src/Indicators/Toast/Toast.tsx

@@ -44,11 +44,14 @@ const Container = () => {
           progressClassName[props?.type || 'info']
         }`
       }
-      closeButton={
-        <div className="-mt-3 -mr-2 cursor-pointer text-on-base hover:text-on-base-2">
+      closeButton={({ closeToast }) => (
+        <div
+          className="-mt-3 -mr-2 cursor-pointer text-on-base hover:text-on-base-2"
+          onClick={closeToast}
+        >
           <Icon icon="close" size={3} />
         </div>
-      }
+      )}
       position="top-right"
     />
   )

styleguide/src/Layout/Sidebar/Container.tsx

@@ -3,7 +3,7 @@ import { SidebarItemProps } from './Item'
 // import { Icon } from '../../Icons/Icon'
 
 const sidebarMenuClasses = `flex-col bottom-0 top-0 max-w-full bg-base-3 transition-all z-1 w-0 lg:w-64`
-const sidebarContentClasses = `max-h-screen h-full py-3 overflow-y-auto shadow-card z-1 scroll lg:shadow-none lg:overflow-y-hidden hover:overflow-y-auto`
+const sidebarContentClasses = `max-h-screen h-full py-2.5 overflow-y-auto shadow-card z-1 scroll lg:shadow-none lg:overflow-y-hidden hover:overflow-y-auto`
 
 export const Sidebar = React.memo(
   ({ children, className = '', fixed }: SidebarProps) => {

styleguide/src/Layout/Sidebar/Item.tsx

@@ -3,7 +3,7 @@ import { Icon, IconProps } from '../../Icons/Icon'
 import { safeCSSId } from '../../utils'
 import { SidebarSubItemProps } from './ItemSub'
 
-const sidebarItemBtnClasses = `flex items-center relative px-6 py-2 text-sm tracking-4 font-semibold duration-200 group-hover:text-on-base`
+const sidebarItemBtnClasses = `flex items-center relative px-6 py-3.5 lg:py-2.5 text-sm tracking-4 font-semibold duration-200 group-hover:text-on-base`
 const sidebarItemBtnActiveClasses = (active: boolean | undefined) =>
   active ? `text-on-base` : `text-on-base-2`
 const sidebarItemBtnIconClasses = `w-4 h-6 flex-shrink-0`

styleguide/src/Layout/Sidebar/ItemSub.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { safeCSSId } from '../../utils'
 
-const sidebarItemDropdownItemClasses = `flex items-center pl-14 pr-0 py-1 lg:py-1 text-on-base-2 text-f6 tracking-4 leading-6 duration-200 hover:text-on-base`
+const sidebarItemDropdownItemClasses = `flex items-center pl-14 pr-0 py-1.5 lg:py-1 text-on-base-2 text-f6 tracking-4 leading-6 duration-200 hover:text-on-base`
 const sidebarItemDropdownItemActiveClasses = (active: boolean | undefined) =>
   active ? `text-on-base font-semibold active` : `text-on-base-2`
 

styleguide/src/Layout/Topbar/Topbar.stories.tsx

@@ -7,6 +7,9 @@ import { Topbar, TopbarProps } from '.'
 export default {
   title: 'Layout/Topbar',
   component: Topbar,
+  parameters: {
+    layout: 'fullscreen',
+  }
 } as Meta
 
 const Template: Story<TopbarProps> = args => <Topbar {...args} />

styleguide/src/Layout/Topbar/Topbar.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+export const Topbar: React.FC<TopbarProps> = ({
+  logoHref = '//app.lojaintegrada.com.br/painel',
+  logoSrc = 'https://cdn.awsli.com.br/production/static/whitelabel/lojaintegrada/img/logo.svg',
+  logoTitle = 'Loja Integrada',
+  children,
+}) => (
+  <div className="flex fixed justify-between items-center top-0 pb-2 pt-2-safe lg:pb-4 lg:px-8-safe lg:pt-4-safe w-full z-20 bg-base-1 shadow h-16">
+    <div className="flex">
+      <a className="logo flex items-center text-base-1 text-sm" href={logoHref}>
+        <img
+          src={logoSrc}
+          alt={logoTitle}
+          style={{
+            width: '130px',
+          }}
+        />
+      </a>
+    </div>
+    <div className="flex items-center">{children}</div>
+  </div>
+)
+
+export interface TopbarProps {
+  /** Link of the logo
+   * @default '//app.lojaintegrada.com.br/painel'
+   */
+  logoHref?: string
+  /** Image link of the logo
+   * @default 'https://cdn.awsli.com.br/production/static/whitelabel/lojaintegrada/img/logo.svg'
+   */
+  logoSrc?: string
+  /** Title of the logo
+   * @default 'Loja Integrada'
+   */
+  logoTitle?: string
+  /**
+   * React children
+   * Also support render prop
+   */
+  children?: React.ReactNode | ((props: TopbarProps) => React.ReactNode)
+}

styleguide/src/Layout/Topbar/index.tsx

@@ -1,9 +1 @@
-import React from 'react'
-
-export const Topbar: React.FC<TopbarProps> = () => (
-  <div className="flex fixed justify-between items-center top-0 px-4 py-2 lg:px-8 lg:py-4 w-full z-20 bg-base-1 shadow h-16"></div>
-)
-
-export interface TopbarProps {
-  children?: any
-}
+export * from './Topbar'

styleguide/tailwind.config.js

@@ -1,7 +1,7 @@
-const defaultSettings = require('@lojaintegrada/tailwindcss-config/dist/defaultSettings')
-
 module.exports = {
-  ...defaultSettings,
+  presets: [
+    require('@lojaintegrada/tailwindcss-config/src/defaultPreset')
+  ],
   mode: 'jit',
   purge: [
     './src/**/*.{js,ts,jsx,tsx}',