sbwb-ds 1.0.57 → 1.0.58

package/dist/index.d.ts

@@ -1,5 +1,12 @@
 import { Icons } from './src/main/helpers/functions/icons';
 import { sg } from './src/presentation/styles/styleGuide';
+import { Props } from './src/presentation/components/atoms/Tree';
+import { TooltipProps } from './src/presentation/components/atoms/Tooltip';
+import { ButtonProps } from './src/presentation/components/atoms/Button';
+import { InputProps } from './src/presentation/components/atoms/Input';
+import { AlertProps } from './src/presentation/components/atoms/Alert';
+import { TextareaProps } from './src/presentation/components/atoms/Textarea';
+import { SelectProps } from './src/presentation/components/atoms/Select';
 export { default as Accordion } from './src/presentation/components/atoms/Accordion';
 export { default as ActionButton } from './src/presentation/components/atoms/ActionButton';
 export { default as Actions } from './src/presentation/components/atoms/Actions';
@@ -42,4 +49,11 @@ export { default as Table } from './src/presentation/components/molecules/Table'
 export { default as HeaderTitle } from './src/presentation/components/molecules/HeaderTitle';
 export { TableProvider, useTableContext, } from './src/presentation/context/table/index';
 export type IconType = keyof typeof Icons;
+export type { Props as TreeProps };
+export type { TooltipProps };
+export type { ButtonProps };
+export type { InputProps };
+export type { AlertProps };
+export type { TextareaProps };
+export type { SelectProps };
 export { sg };

package/dist/sbwb-ds.js

@@ -52253,22 +52253,23 @@ const Uue = () => {
 }, ghe = ({
   title: e,
   content: r,
-  children: t,
+  childrens: t,
   onClickTitle: n,
   onClickContent: a,
-  disabled: i = !1
+  disabled: i = !1,
+  isOpenByDefault: o = !1
 }) => {
-  const [o, s] = Ne(!1), l = xt(null), c = () => {
+  const [s, l] = Ne(o), c = xt(null), u = () => {
     typeof n == "function" && !i && n(e);
-  }, u = () => {
+  }, h = () => {
     typeof a == "function" && !i && a(r);
   };
-  return /* @__PURE__ */ ue(che, { ref: l, children: [
-    /* @__PURE__ */ ue(uhe, { onClick: i ? void 0 : () => s(!o), children: [
+  return /* @__PURE__ */ ue(che, { ref: c, children: [
+    /* @__PURE__ */ ue(uhe, { onClick: i ? void 0 : () => l(!s), children: [
       /* @__PURE__ */ R(
         Qa,
         {
-          iconName: o ? "DoNotDisturbOnFill0Sm" : "AddCircleSm",
+          iconName: s ? "DoNotDisturbOnFill0Sm" : "AddCircleSm",
           color: i ? "#A6B0C4" : "#4E5666",
           customStyles: i ? { cursor: "not-allowed" } : {},
           width: "16px",
@@ -52279,32 +52280,32 @@ const Uue = () => {
         fhe,
         {
           disabled: i,
-          onClick: i ? void 0 : () => c(),
+          onClick: i ? void 0 : () => u(),
           children: e
         }
       )
     ] }),
-    o && /* @__PURE__ */ ue(hhe, { children: [
+    s && /* @__PURE__ */ ue(hhe, { children: [
       /* @__PURE__ */ R(
         phe,
         {
           title: e,
           content: r,
-          onClickContent: u,
+          onClickContent: h,
           disabled: i
         }
       ),
-      t == null ? void 0 : t.map((h, f) => /* @__PURE__ */ R(
+      t == null ? void 0 : t.map((f, d) => /* @__PURE__ */ R(
         ghe,
         {
-          title: h.title,
-          content: h.content,
-          children: h.children,
-          onClickTitle: c,
-          onClickContent: u,
-          disabled: h.disabled
+          title: f.title,
+          content: f.content,
+          childrens: f.childrens,
+          onClickTitle: u,
+          onClickContent: h,
+          disabled: f.disabled
         },
-        f
+        d
       ))
     ] })
   ] });

package/dist/sbwb-ds.umd.cjs

@@ -2298,7 +2298,7 @@ echarts.use([`+T+"]);":"Unknown series "+V))}return}if(h==="tooltip"){if(w){proc
   margin-left: 8px;
   color: ${({disabled:e})=>e?"#A6B0C4":"#4E5666"};
   cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
-`,moe=({title:e,content:r,onClickContent:t,disabled:n})=>{const[a,i]=$.useState(!1),o=$.useRef(null);return $.useEffect(()=>{const l=c=>{o.current&&!o.current.contains(c.target)&&i(!1)};return document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}},[]),ue(goe,{ref:o,onClick:()=>{typeof t=="function"&&!n&&(t(r),i(!0))},children:[N(ta,{iconName:a?"FiberManualRecordFill1Sm":"FiberManualRecordFILL0Sm",color:n?"#A6B0C4":"#4E5666",customStyles:n?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}),N(Coe,{disabled:n,children:r})]})},Zk=({title:e,content:r,children:t,onClickTitle:n,onClickContent:a,disabled:i=!1})=>{const[o,s]=$.useState(!1),l=$.useRef(null),c=()=>{typeof n=="function"&&!i&&n(e)},u=()=>{typeof a=="function"&&!i&&a(r)};return ue(foe,{ref:l,children:[ue(doe,{onClick:i?void 0:()=>s(!o),children:[N(ta,{iconName:o?"DoNotDisturbOnFill0Sm":"AddCircleSm",color:i?"#A6B0C4":"#4E5666",customStyles:i?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}),N(poe,{disabled:i,onClick:i?void 0:()=>c(),children:e})]}),o&&ue(voe,{children:[N(moe,{title:e,content:r,onClickContent:u,disabled:i}),t==null?void 0:t.map((h,f)=>N(Zk,{title:h.title,content:h.content,children:h.children,onClickTitle:c,onClickContent:u,disabled:h.disabled},f))]})]})},yoe=(e,r,t)=>($.useEffect(()=>{let n;return r&&e&&(n=setTimeout(()=>{t&&t()},r)),()=>{n&&clearTimeout(n)}},[e,r,t]),{}),woe=z.div`
+`,moe=({title:e,content:r,onClickContent:t,disabled:n})=>{const[a,i]=$.useState(!1),o=$.useRef(null);return $.useEffect(()=>{const l=c=>{o.current&&!o.current.contains(c.target)&&i(!1)};return document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}},[]),ue(goe,{ref:o,onClick:()=>{typeof t=="function"&&!n&&(t(r),i(!0))},children:[N(ta,{iconName:a?"FiberManualRecordFill1Sm":"FiberManualRecordFILL0Sm",color:n?"#A6B0C4":"#4E5666",customStyles:n?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}),N(Coe,{disabled:n,children:r})]})},Zk=({title:e,content:r,childrens:t,onClickTitle:n,onClickContent:a,disabled:i=!1,isOpenByDefault:o=!1})=>{const[s,l]=$.useState(o),c=$.useRef(null),u=()=>{typeof n=="function"&&!i&&n(e)},h=()=>{typeof a=="function"&&!i&&a(r)};return ue(foe,{ref:c,children:[ue(doe,{onClick:i?void 0:()=>l(!s),children:[N(ta,{iconName:s?"DoNotDisturbOnFill0Sm":"AddCircleSm",color:i?"#A6B0C4":"#4E5666",customStyles:i?{cursor:"not-allowed"}:{},width:"16px",height:"16px"}),N(poe,{disabled:i,onClick:i?void 0:()=>u(),children:e})]}),s&&ue(voe,{children:[N(moe,{title:e,content:r,onClickContent:h,disabled:i}),t==null?void 0:t.map((f,d)=>N(Zk,{title:f.title,content:f.content,childrens:f.childrens,onClickTitle:u,onClickContent:h,disabled:f.disabled},d))]})]})},yoe=(e,r,t)=>($.useEffect(()=>{let n;return r&&e&&(n=setTimeout(()=>{t&&t()},r)),()=>{n&&clearTimeout(n)}},[e,r,t]),{}),woe=z.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;

package/dist/src/data/mocks/mock-data.d.ts

@@ -1,7 +1,7 @@
 export interface TreeItem {
     title: string;
     content: string;
-    children?: TreeItem[];
+    childrens?: TreeItem[];
     disabled?: boolean;
 }
 export declare const mockData: TreeItem[];

package/dist/src/presentation/components/atoms/Alert/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface AlertElementProps {
 }
-interface AlertProps extends AlertElementProps {
+export interface AlertProps extends AlertElementProps {
     title: string;
     type: 'success' | 'warning' | 'error';
     description?: string;

package/dist/src/presentation/components/atoms/Textarea/index.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler } from 'react';
 export interface TextareaElementProps {
 }
-interface TextareaProps extends TextareaElementProps {
+export interface TextareaProps extends TextareaElementProps {
     id?: string;
     label?: string;
     placeholder?: string;

package/dist/src/presentation/components/atoms/Tree/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { TreeItem as TreeItemType } from '../../../../data/mocks/mock-data';
-interface Props {
+export interface Props {
     title: string;
     content: string;
-    children?: TreeItemType[];
+    childrens?: TreeItemType[];
     onClickTitle: (title: string) => void;
     onClickContent: (content: string) => void;
     disabled?: boolean;
+    isOpenByDefault?: boolean;
 }
 declare const Tree: React.FC<Props>;
 export default Tree;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/data/mocks/mock-data.ts

@@ -1,7 +1,7 @@
 export interface TreeItem {
   title: string;
   content: string;
-  children?: TreeItem[];
+  childrens?: TreeItem[];
   disabled?: boolean;
 }
 
@@ -19,9 +19,9 @@ const generateRandomItem = (depth: number): TreeItem => {
 
   if (depth > 1 && Math.random() > 0.5) {
     const numChildren = Math.floor(Math.random() * 3) + 1;
-    item.children = [];
+    item.childrens = [];
     for (let i = 1; i <= numChildren; i++) {
-      item.children.push(generateRandomItem(depth - 1));
+      item.childrens.push(generateRandomItem(depth - 1));
     }
   }
   return item;

package/src/presentation/components/atoms/Alert/index.tsx

@@ -3,7 +3,7 @@ import { useAlertHide } from './hooks/useAlertHide';
 import * as C from './styles';
 export interface AlertElementProps {}
 
-interface AlertProps extends AlertElementProps {
+export interface AlertProps extends AlertElementProps {
   title: string;
   type: 'success' | 'warning' | 'error';
   description?: string;

package/src/presentation/components/atoms/Textarea/index.tsx

@@ -6,7 +6,7 @@ import Tooltip from '../Tooltip';
 
 export interface TextareaElementProps {}
 
-interface TextareaProps extends TextareaElementProps {
+export interface TextareaProps extends TextareaElementProps {
   id?: string;
   label?: string;
   placeholder?: string;

package/src/presentation/components/atoms/Tree/Tree.stories.tsx

@@ -23,7 +23,7 @@ const mockDataMap = mockData.map((data) => {
   return {
     title: data.title,
     content: data.content,
-    children: data.children,
+    childrens: data.childrens,
     disabled: data.disabled,
   };
 });
@@ -38,7 +38,7 @@ const TreeList = (args) => (
         key={data.title + index}
         title={data.title}
         content={data.content}
-        children={data.children}
+        childrens={data.childrens}
         disabled={data.disabled}
       />
     ))}
@@ -52,4 +52,5 @@ export const Default = Template.bind({});
 Default.args = {
   onClickContent: () => {},
   onClickTitle: () => {},
+  isOpenByDefault: true,
 };

package/src/presentation/components/atoms/Tree/index.spec.tsx

@@ -6,7 +6,7 @@ describe('<Tree />', () => {
   const mockData = {
     title: 'TestTitle',
     content: 'TestContent',
-    children: [
+    childrens: [
       {
         title: 'Child1',
         content: 'ChildContent1',
@@ -55,17 +55,15 @@ describe('<Tree />', () => {
       <Tree
         title={mockData.title}
         content={mockData.content}
-        children={mockData.children}
+        childrens={mockData.childrens}
         onClickTitle={() => {}}
         onClickContent={() => {}}
       />
     );
 
-    expect(queryByText(mockData.children[0].title)).toBeNull();
-
     fireEvent.click(getByText(mockData.title));
 
-    expect(getByText(mockData.children[0].title)).toBeInTheDocument();
-    expect(getByText(mockData.children[1].title)).toBeInTheDocument();
+    expect(getByText(mockData.childrens[0].title)).toBeInTheDocument();
+    expect(getByText(mockData.childrens[1].title)).toBeInTheDocument();
   });
 });

package/src/presentation/components/atoms/Tree/index.tsx

@@ -3,13 +3,14 @@ import * as C from './styles';
 import Icon from '../Icon';
 import { TreeItem as TreeItemType } from '../../../../data/mocks/mock-data';
 
-interface Props {
+export interface Props {
   title: string;
   content: string;
-  children?: TreeItemType[];
+  childrens?: TreeItemType[];
   onClickTitle: (title: string) => void;
   onClickContent: (content: string) => void;
   disabled?: boolean;
+  isOpenByDefault?: boolean;
 }
 
 interface TreeItemProps {
@@ -68,12 +69,14 @@ const TreeItemComponent: React.FC<TreeItemProps> = ({
 const Tree: React.FC<Props> = ({
   title,
   content,
-  children,
+  childrens,
   onClickTitle,
   onClickContent,
   disabled = false,
+  isOpenByDefault = false,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(isOpenByDefault);
+
   const treeRef = useRef(null);
 
   const handleTitleClick = () => {
@@ -113,12 +116,12 @@ const Tree: React.FC<Props> = ({
             onClickContent={handleContentClick}
             disabled={disabled}
           />
-          {children?.map((item, index) => (
+          {childrens?.map((item, index) => (
             <Tree
               key={index}
               title={item.title}
               content={item.content}
-              children={item.children}
+              childrens={item.childrens}
               onClickTitle={handleTitleClick}
               onClickContent={handleContentClick}
               disabled={item.disabled}