code7-leia 0.1.6 → 0.1.9

package/dist/code7-leia.cjs.development.js

@@ -92,25 +92,63 @@ Tabs.propTypes = {
   onChange: PropTypes.func.isRequired
 };
 
+var getLanguage = function getLanguage(language) {
+  var languages = {
+    en: {
+      files: 'Files',
+      test: 'Test'
+    },
+    'pt-br': {
+      files: 'Arquivos',
+      test: 'Teste'
+    },
+    es: {
+      files: 'Archivos',
+      test: 'Prueba'
+    }
+  };
+  return languages[language] || languages['pt-br'];
+};
+
+var FileArea = function FileArea() {
+  return React__default.createElement("div", null, "FILE AREA");
+};
+
+var TestArea = function TestArea() {
+  return React__default.createElement("div", null, "TEST AREA");
+};
+
 var Leia = function Leia(props) {
   var match = reactRouterDom.useRouteMatch();
   var _useLocation = reactRouterDom.useLocation(),
     pathname = _useLocation.pathname;
   var history = reactRouterDom.useHistory();
-  console.log('Props', props);
+  var t = getLanguage(props.language);
   var activeTab = React.useMemo(function () {
     return pathname.split('/')[5] || 'files';
   }, [pathname]);
-  return React__default.createElement(Tabs, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Tabs, {
     value: activeTab,
     onChange: function onChange(value) {
       return history.push(match.url + "/" + value);
     }
   }, React__default.createElement(Tab$1, {
     value: "files"
-  }, "Files"), React__default.createElement(Tab$1, {
+  }, t.files), React__default.createElement(Tab$1, {
     value: "test"
-  }, "Test"));
+  }, t.test)), React__default.createElement(React.Suspense, {
+    fallback: props.loading
+  }, React__default.createElement(reactRouterDom.Switch, null, React__default.createElement(reactRouterDom.Route, {
+    path: "" + match.path,
+    exact: true,
+    component: FileArea
+  }), React__default.createElement(reactRouterDom.Route, {
+    path: match.path + "/archives",
+    component: FileArea
+  }), React__default.createElement(reactRouterDom.Route, {
+    path: match.path + "/test",
+    component: TestArea
+  }))));
 };
 
 function Code7(props) {

package/dist/code7-leia.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"code7-leia.cjs.development.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  console.log('Props', props);\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <Tabs\n      value={activeTab}\n      onChange={(value) => history.push(`${match.url}/${value}`)}\n    >\n      <Tab value=\"files\">Files</Tab>\n      <Tab value=\"test\">Test</Tab>\n    </Tabs>\n  );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","isValidElement","Array","isArray","_child$props","props","_child$props2","cloneElement","_child$props3","onClick","_child$props4","number","Leia","match","useRouteMatch","_useLocation","useLocation","pathname","history","useHistory","console","log","activeTab","useMemo","split","push","url","Code7"],"mappings":"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"}
+{"version":3,"file":"code7-leia.cjs.development.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/components/FileArea/index.tsx","../src/components/TestArea/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","type Language = {\n  files: string;\n  test: string;\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n  const languages: Record<'en' | 'pt-br' | 'es', Language> = {\n    en: {\n      files: 'Files',\n      test: 'Test',\n    },\n    'pt-br': {\n      files: 'Arquivos',\n      test: 'Teste',\n    },\n    es: {\n      files: 'Archivos',\n      test: 'Prueba',\n    }\n  };\n\n  return languages[language] || languages['pt-br'];\n};\n","import React from 'react';\n\nexport const FileArea = () => {\n  return (\n    <div>FILE AREA</div>\n  );\n};","import React from 'react';\n\nexport const TestArea = () => {\n  return (\n    <div>TEST AREA</div>\n  );\n};","import React, { useMemo, Suspense } from 'react';\n\nimport { Route, useLocation, useRouteMatch, useHistory, Switch as SwitchRoute } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nimport { FileArea } from './components/FileArea';\nimport { TestArea } from './components/TestArea';\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  const t = getLanguage(props.language)\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <>\n      <Tabs\n        value={activeTab}\n        onChange={(value) => history.push(`${match.url}/${value}`)}\n      >\n        <Tab value=\"files\">{t.files}</Tab>\n        <Tab value=\"test\">{t.test}</Tab>\n      </Tabs>\n      <Suspense fallback={props.loading}>\n        <SwitchRoute>\n          <Route path={`${match.path}`} exact component={FileArea} />\n          <Route path={`${match.path}/archives`} component={FileArea} />\n          <Route path={`${match.path}/test`} component={TestArea} />\n        </SwitchRoute>\n      </Suspense>\n    </>\n  );\n};","import type { PropsWithChildren, ReactElement } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n  language: \"en\" | \"pt-br\" | \"es\";\n  loading: ReactElement\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","isValidElement","Array","isArray","_child$props","props","_child$props2","cloneElement","_child$props3","onClick","_child$props4","number","getLanguage","language","languages","en","files","test","es","FileArea","TestArea","Leia","match","useRouteMatch","_useLocation","useLocation","pathname","history","useHistory","t","activeTab","useMemo","split","push","url","Suspense","fallback","loading","SwitchRoute","Route","path","exact","component","Code7"],"mappings":"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"}

package/dist/code7-leia.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,r,t=require("react"),i=e(t),a=require("react-router-dom"),l=e(require("prop-types")),o=e(require("classcat")),u=e(require("styled-components"));function c(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)n.indexOf(r=a[t])>=0||(i[r]=e[r]);return i}function s(e,n){return n||(n=e.slice(0)),e.raw=n,e}var p=u.ul(n||(n=s(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n"]))),v=u.li(r||(r=s(["\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n"]))),d=["active","children"],f=["children","value","onChange"],m=function(e){var n=e.active,r=e.children,t=c(e,d);return i.createElement(v,Object.assign({className:o({active:n})},t),r)};m.propTypes={children:l.oneOfType([l.string,l.element,l.node]).isRequired,onChange:l.func,value:l.string,active:l.bool},m.defaultProps={onChange:function(){},value:"",active:!1};var h=function(e){var n=e.children,r=e.value,t=e.onChange,a=c(e,f),l=i.Children.map(n,(function(e){var n,a,l;return i.isValidElement(e)?Array.isArray(null==(n=e.props)?void 0:n.children)?i.cloneElement(e,{active:(null==(l=e.props)?void 0:l.value)===r,value:r,onChange:t}):i.cloneElement(e,{active:(null==(a=e.props)?void 0:a.value)===r,onClick:function(){var n;return t(null==(n=e.props)?void 0:n.value)}}):null}));return i.createElement(p,Object.assign({},a),l)};h.propTypes={children:l.node.isRequired,value:l.oneOfType([l.string,l.number]).isRequired,onChange:l.func.isRequired};var g=function(e){var n=a.useRouteMatch(),r=a.useLocation().pathname,l=a.useHistory();console.log("Props",e);var o=t.useMemo((function(){return r.split("/")[5]||"files"}),[r]);return i.createElement(h,{value:o,onChange:function(e){return l.push(n.url+"/"+e)}},i.createElement(m,{value:"files"},"Files"),i.createElement(m,{value:"test"},"Test"))};exports.Code7=function(e){return i.createElement(g,Object.assign({},e))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,r=require("react"),a=e(r),l=require("react-router-dom"),i=e(require("prop-types")),o=e(require("classcat")),u=e(require("styled-components"));function c(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n.indexOf(t=l[r])>=0||(a[t]=e[t]);return a}function s(e,n){return n||(n=e.slice(0)),e.raw=n,e}var p=u.ul(n||(n=s(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n"]))),v=u.li(t||(t=s(["\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n"]))),m=["active","children"],f=["children","value","onChange"],d=function(e){var n=e.active,t=e.children,r=c(e,m);return a.createElement(v,Object.assign({className:o({active:n})},r),t)};d.propTypes={children:i.oneOfType([i.string,i.element,i.node]).isRequired,onChange:i.func,value:i.string,active:i.bool},d.defaultProps={onChange:function(){},value:"",active:!1};var h=function(e){var n=e.children,t=e.value,r=e.onChange,l=c(e,f),i=a.Children.map(n,(function(e){var n,l,i;return a.isValidElement(e)?Array.isArray(null==(n=e.props)?void 0:n.children)?a.cloneElement(e,{active:(null==(i=e.props)?void 0:i.value)===t,value:t,onChange:r}):a.cloneElement(e,{active:(null==(l=e.props)?void 0:l.value)===t,onClick:function(){var n;return r(null==(n=e.props)?void 0:n.value)}}):null}));return a.createElement(p,Object.assign({},l),i)};h.propTypes={children:i.node.isRequired,value:i.oneOfType([i.string,i.number]).isRequired,onChange:i.func.isRequired};var g=function(){return a.createElement("div",null,"FILE AREA")},E=function(){return a.createElement("div",null,"TEST AREA")},b=function(e){var n,t=l.useRouteMatch(),i=l.useLocation().pathname,o=l.useHistory(),u=(n={en:{files:"Files",test:"Test"},"pt-br":{files:"Arquivos",test:"Teste"},es:{files:"Archivos",test:"Prueba"}})[e.language]||n["pt-br"],c=r.useMemo((function(){return i.split("/")[5]||"files"}),[i]);return a.createElement(a.Fragment,null,a.createElement(h,{value:c,onChange:function(e){return o.push(t.url+"/"+e)}},a.createElement(d,{value:"files"},u.files),a.createElement(d,{value:"test"},u.test)),a.createElement(r.Suspense,{fallback:e.loading},a.createElement(l.Switch,null,a.createElement(l.Route,{path:""+t.path,exact:!0,component:g}),a.createElement(l.Route,{path:t.path+"/archives",component:g}),a.createElement(l.Route,{path:t.path+"/test",component:E}))))};exports.Code7=function(e){return a.createElement(b,Object.assign({},e))};
 //# sourceMappingURL=code7-leia.cjs.production.min.js.map

package/dist/code7-leia.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"code7-leia.cjs.production.min.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  console.log('Props', props);\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <Tabs\n      value={activeTab}\n      onChange={(value) => history.push(`${match.url}/${value}`)}\n    >\n      <Tab value=\"files\">Files</Tab>\n      <Tab value=\"test\">Test</Tab>\n    </Tabs>\n  );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","_child$props2","isValidElement","Array","isArray","_child$props","props","cloneElement","_child$props3","onClick","_child$props4","number","Leia","match","useRouteMatch","pathname","useLocation","history","useHistory","console","log","activeTab","useMemo","split","push","url"],"mappings":"udAYO,IAAMA,EAAWC,EAAOC,GAAEC,IAAAA,EAAAC,2HAOpBC,EAAMJ,EAAOK,GAAEC,IAAAA,EAAAH,0pBCDfC,EAAM,SAAHG,OAAMC,EAAMD,EAANC,OAAQC,EAAQF,EAARE,SAAaC,EAAIC,EAAAJ,EAAAK,GAC7C,OACEC,gBAACC,iBAAMC,UAAWC,EAAG,CAAER,OAAAA,KAAeE,GACnCD,IAKPL,EAAIa,UAAY,CACdR,SAAUS,EAAUC,UAAU,CAC5BD,EAAUE,OACVF,EAAUG,QACVH,EAAUI,OACTC,WACHC,SAAUN,EAAUO,KACpBC,MAAOR,EAAUE,OACjBZ,OAAQU,EAAUS,MAGpBvB,EAAIwB,aAAe,CACjBJ,SAAU,aACVE,MAAO,GACPlB,QAAQ,GAGH,IAAMqB,EAAO,SAAHC,OAAgBC,EAAYD,EAAtBrB,SAAwBiB,EAAKI,EAALJ,MAAOF,EAAQM,EAARN,SAAad,EAAIC,EAAAmB,EAAAE,GAC/DvB,EAAWI,EAAMoB,SAASC,IAAIH,GAAc,SAACI,WAKPC,EAJ1C,OAAKvB,EAAMwB,eAAeF,GAItBG,MAAMC,eAAOC,EAACL,EAAMM,cAAND,EAAa/B,UACtBI,EAAM6B,aAAaP,EAAkC,CAC1D3B,eAAQ4B,EAAAD,EAAMM,cAANL,EAAaV,SAAUA,EAC/BA,MAAAA,EACAF,SAAAA,IAIGX,EAAM6B,aAAaP,EAAkC,CAC1D3B,eAAQmC,EAAAR,EAAMM,cAANE,EAAajB,SAAUA,EAC/BkB,QAAS,WAAA,IAAAC,EAAA,OAAMrB,SAAQqB,EAACV,EAAMM,cAANI,EAAanB,UAb9B,QAiBX,OAAOb,gBAACC,mBAAeJ,GAAOD,IAGhCoB,EAAKZ,UAAY,CACfR,SAAUS,EAAUI,KAAKC,WACzBG,MAAOR,EAAUC,UAAU,CAACD,EAAUE,OAAQF,EAAU4B,SAASvB,WACjEC,SAAUN,EAAUO,KAAKF,YC9DpB,IAAMwB,EAAO,SAACN,GACnB,IAAMO,EAAQC,kBACNC,EAAaC,gBAAbD,SACFE,EAAUC,eAEhBC,QAAQC,IAAI,QAASd,GAErB,IAAMe,EAAYC,WAAQ,WACxB,OAAOP,EAASQ,MAAM,KAAK,IAAM,UAChC,CAACR,IAEJ,OACErC,gBAACgB,GACCH,MAAO8B,EACPhC,SAAU,SAACE,GAAK,OAAK0B,EAAQO,KAAQX,EAAMY,QAAOlC,KAElDb,gBAACT,GAAIsB,MAAM,kBACXb,gBAACT,GAAIsB,MAAM,yCCfKe,GACpB,OAAO5B,gBAACkC,mBAASN"}
+{"version":3,"file":"code7-leia.cjs.production.min.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/components/FileArea/index.tsx","../src/components/TestArea/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","type Language = {\n  files: string;\n  test: string;\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n  const languages: Record<'en' | 'pt-br' | 'es', Language> = {\n    en: {\n      files: 'Files',\n      test: 'Test',\n    },\n    'pt-br': {\n      files: 'Arquivos',\n      test: 'Teste',\n    },\n    es: {\n      files: 'Archivos',\n      test: 'Prueba',\n    }\n  };\n\n  return languages[language] || languages['pt-br'];\n};\n","import React from 'react';\n\nexport const FileArea = () => {\n  return (\n    <div>FILE AREA</div>\n  );\n};","import React from 'react';\n\nexport const TestArea = () => {\n  return (\n    <div>TEST AREA</div>\n  );\n};","import React, { useMemo, Suspense } from 'react';\n\nimport { Route, useLocation, useRouteMatch, useHistory, Switch as SwitchRoute } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nimport { FileArea } from './components/FileArea';\nimport { TestArea } from './components/TestArea';\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  const t = getLanguage(props.language)\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <>\n      <Tabs\n        value={activeTab}\n        onChange={(value) => history.push(`${match.url}/${value}`)}\n      >\n        <Tab value=\"files\">{t.files}</Tab>\n        <Tab value=\"test\">{t.test}</Tab>\n      </Tabs>\n      <Suspense fallback={props.loading}>\n        <SwitchRoute>\n          <Route path={`${match.path}`} exact component={FileArea} />\n          <Route path={`${match.path}/archives`} component={FileArea} />\n          <Route path={`${match.path}/test`} component={TestArea} />\n        </SwitchRoute>\n      </Suspense>\n    </>\n  );\n};","import type { PropsWithChildren, ReactElement } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n  language: \"en\" | \"pt-br\" | \"es\";\n  loading: ReactElement\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","_child$props2","isValidElement","Array","isArray","_child$props","props","cloneElement","_child$props3","onClick","_child$props4","number","FileArea","TestArea","Leia","languages","match","useRouteMatch","pathname","useLocation","history","useHistory","t","en","files","test","pt-br","es","language","activeTab","useMemo","split","push","url","Suspense","fallback","loading","SwitchRoute","Route","path","exact","component"],"mappings":"udAYO,IAAMA,EAAWC,EAAOC,GAAEC,IAAAA,EAAAC,2HAOpBC,EAAMJ,EAAOK,GAAEC,IAAAA,EAAAH,0pBCDfC,EAAM,SAAHG,OAAMC,EAAMD,EAANC,OAAQC,EAAQF,EAARE,SAAaC,EAAIC,EAAAJ,EAAAK,GAC7C,OACEC,gBAACC,iBAAMC,UAAWC,EAAG,CAAER,OAAAA,KAAeE,GACnCD,IAKPL,EAAIa,UAAY,CACdR,SAAUS,EAAUC,UAAU,CAC5BD,EAAUE,OACVF,EAAUG,QACVH,EAAUI,OACTC,WACHC,SAAUN,EAAUO,KACpBC,MAAOR,EAAUE,OACjBZ,OAAQU,EAAUS,MAGpBvB,EAAIwB,aAAe,CACjBJ,SAAU,aACVE,MAAO,GACPlB,QAAQ,GAGH,IAAMqB,EAAO,SAAHC,OAAgBC,EAAYD,EAAtBrB,SAAwBiB,EAAKI,EAALJ,MAAOF,EAAQM,EAARN,SAAad,EAAIC,EAAAmB,EAAAE,GAC/DvB,EAAWI,EAAMoB,SAASC,IAAIH,GAAc,SAACI,WAKPC,EAJ1C,OAAKvB,EAAMwB,eAAeF,GAItBG,MAAMC,eAAOC,EAACL,EAAMM,cAAND,EAAa/B,UACtBI,EAAM6B,aAAaP,EAAkC,CAC1D3B,eAAQ4B,EAAAD,EAAMM,cAANL,EAAaV,SAAUA,EAC/BA,MAAAA,EACAF,SAAAA,IAIGX,EAAM6B,aAAaP,EAAkC,CAC1D3B,eAAQmC,EAAAR,EAAMM,cAANE,EAAajB,SAAUA,EAC/BkB,QAAS,WAAA,IAAAC,EAAA,OAAMrB,SAAQqB,EAACV,EAAMM,cAANI,EAAanB,UAb9B,QAiBX,OAAOb,gBAACC,mBAAeJ,GAAOD,IAGhCoB,EAAKZ,UAAY,CACfR,SAAUS,EAAUI,KAAKC,WACzBG,MAAOR,EAAUC,UAAU,CAACD,EAAUE,OAAQF,EAAU4B,SAASvB,WACjEC,SAAUN,EAAUO,KAAKF,YChEpB,ICHMwB,EAAW,WACtB,OACElC,yCCFSmC,EAAW,WACtB,OACEnC,yCCQSoC,EAAO,SAACR,GACnB,IHPMS,EGOAC,EAAQC,kBACNC,EAAaC,gBAAbD,SACFE,EAAUC,eAEVC,GHXAP,EAAqD,CACzDQ,GAAI,CACFC,MAAO,QACPC,KAAM,QAERC,QAAS,CACPF,MAAO,WACPC,KAAM,SAERE,GAAI,CACFH,MAAO,WACPC,KAAM,YGAYnB,EAAMsB,WHIEb,EAAU,SGFlCc,EAAYC,WAAQ,WACxB,OAAOZ,EAASa,MAAM,KAAK,IAAM,UAChC,CAACb,IAEJ,OACExC,gCACEA,gBAACgB,GACCH,MAAOsC,EACPxC,SAAU,SAACE,GAAK,OAAK6B,EAAQY,KAAQhB,EAAMiB,QAAO1C,KAElDb,gBAACT,GAAIsB,MAAM,SAAS+B,EAAEE,OACtB9C,gBAACT,GAAIsB,MAAM,QAAQ+B,EAAEG,OAEvB/C,gBAACwD,YAASC,SAAU7B,EAAM8B,SACxB1D,gBAAC2D,cACC3D,gBAAC4D,SAAMC,QAASvB,EAAMuB,KAAQC,SAAMC,UAAW7B,IAC/ClC,gBAAC4D,SAAMC,KAASvB,EAAMuB,iBAAiBE,UAAW7B,IAClDlC,gBAAC4D,SAAMC,KAASvB,EAAMuB,aAAaE,UAAW5B,+BCzBlCP,GACpB,OAAO5B,gBAACoC,mBAASR"}

package/dist/code7-leia.esm.js

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { useRouteMatch, useLocation, useHistory } from 'react-router-dom';
+import React, { useMemo, Suspense } from 'react';
+import { useRouteMatch, useLocation, useHistory, Switch, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import cc from 'classcat';
 import styled from 'styled-components';
@@ -85,25 +85,63 @@ Tabs.propTypes = {
   onChange: PropTypes.func.isRequired
 };
 
+var getLanguage = function getLanguage(language) {
+  var languages = {
+    en: {
+      files: 'Files',
+      test: 'Test'
+    },
+    'pt-br': {
+      files: 'Arquivos',
+      test: 'Teste'
+    },
+    es: {
+      files: 'Archivos',
+      test: 'Prueba'
+    }
+  };
+  return languages[language] || languages['pt-br'];
+};
+
+var FileArea = function FileArea() {
+  return React.createElement("div", null, "FILE AREA");
+};
+
+var TestArea = function TestArea() {
+  return React.createElement("div", null, "TEST AREA");
+};
+
 var Leia = function Leia(props) {
   var match = useRouteMatch();
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
   var history = useHistory();
-  console.log('Props', props);
+  var t = getLanguage(props.language);
   var activeTab = useMemo(function () {
     return pathname.split('/')[5] || 'files';
   }, [pathname]);
-  return React.createElement(Tabs, {
+  return React.createElement(React.Fragment, null, React.createElement(Tabs, {
     value: activeTab,
     onChange: function onChange(value) {
       return history.push(match.url + "/" + value);
     }
   }, React.createElement(Tab$1, {
     value: "files"
-  }, "Files"), React.createElement(Tab$1, {
+  }, t.files), React.createElement(Tab$1, {
     value: "test"
-  }, "Test"));
+  }, t.test)), React.createElement(Suspense, {
+    fallback: props.loading
+  }, React.createElement(Switch, null, React.createElement(Route, {
+    path: "" + match.path,
+    exact: true,
+    component: FileArea
+  }), React.createElement(Route, {
+    path: match.path + "/archives",
+    component: FileArea
+  }), React.createElement(Route, {
+    path: match.path + "/test",
+    component: TestArea
+  }))));
 };
 
 function Code7(props) {

package/dist/code7-leia.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"code7-leia.esm.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","import React, { useMemo } from 'react';\n\nimport { useLocation, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  console.log('Props', props);\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <Tabs\n      value={activeTab}\n      onChange={(value) => history.push(`${match.url}/${value}`)}\n    >\n      <Tab value=\"files\">Files</Tab>\n      <Tab value=\"test\">Test</Tab>\n    </Tabs>\n  );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","isValidElement","Array","isArray","_child$props","props","_child$props2","cloneElement","_child$props3","onClick","_child$props4","number","Leia","match","useRouteMatch","_useLocation","useLocation","pathname","history","useHistory","console","log","activeTab","useMemo","split","push","url","Code7"],"mappings":"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"}
+{"version":3,"file":"code7-leia.esm.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/components/FileArea/index.tsx","../src/components/TestArea/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","type Language = {\n  files: string;\n  test: string;\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n  const languages: Record<'en' | 'pt-br' | 'es', Language> = {\n    en: {\n      files: 'Files',\n      test: 'Test',\n    },\n    'pt-br': {\n      files: 'Arquivos',\n      test: 'Teste',\n    },\n    es: {\n      files: 'Archivos',\n      test: 'Prueba',\n    }\n  };\n\n  return languages[language] || languages['pt-br'];\n};\n","import React from 'react';\n\nexport const FileArea = () => {\n  return (\n    <div>FILE AREA</div>\n  );\n};","import React from 'react';\n\nexport const TestArea = () => {\n  return (\n    <div>TEST AREA</div>\n  );\n};","import React, { useMemo, Suspense } from 'react';\n\nimport { Route, useLocation, useRouteMatch, useHistory, Switch as SwitchRoute } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nimport { FileArea } from './components/FileArea';\nimport { TestArea } from './components/TestArea';\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  const t = getLanguage(props.language)\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <>\n      <Tabs\n        value={activeTab}\n        onChange={(value) => history.push(`${match.url}/${value}`)}\n      >\n        <Tab value=\"files\">{t.files}</Tab>\n        <Tab value=\"test\">{t.test}</Tab>\n      </Tabs>\n      <Suspense fallback={props.loading}>\n        <SwitchRoute>\n          <Route path={`${match.path}`} exact component={FileArea} />\n          <Route path={`${match.path}/archives`} component={FileArea} />\n          <Route path={`${match.path}/test`} component={TestArea} />\n        </SwitchRoute>\n      </Suspense>\n    </>\n  );\n};","import type { PropsWithChildren, ReactElement } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n  language: \"en\" | \"pt-br\" | \"es\";\n  loading: ReactElement\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","isValidElement","Array","isArray","_child$props","props","_child$props2","cloneElement","_child$props3","onClick","_child$props4","number","getLanguage","language","languages","en","files","test","es","FileArea","TestArea","Leia","match","useRouteMatch","_useLocation","useLocation","pathname","history","useHistory","t","activeTab","useMemo","split","push","url","Suspense","fallback","loading","SwitchRoute","Route","path","exact","component","Code7"],"mappings":"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"}

package/dist/components/FileArea/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FileArea: () => React.JSX.Element;

package/dist/components/TestArea/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TestArea: () => React.JSX.Element;

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 export declare type Props = PropsWithChildren<{
     id: string;
     activeTab: string;
+    language: "en" | "pt-br" | "es";
+    loading: ReactElement;
 }>;
 export declare function Code7(props: Props): React.JSX.Element;

package/dist/utils/getLanguage.d.ts

@@ -0,0 +1,6 @@
+declare type Language = {
+    files: string;
+    test: string;
+};
+export declare const getLanguage: (language: keyof Record<'en' | 'pt-br' | 'es', Language>) => Language;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.6",
+  "version": "0.1.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -18,10 +18,12 @@
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "deploy": "npm version patch && npm publish"
+    "deploy": "npm version patch && npm publish",
+    "dev": "npm --prefix ../code7-boteria-frontendv3 run dev"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-router-dom": ">=5"
   },
   "husky": {
     "hooks": {
@@ -51,18 +53,19 @@
     "@size-limit/preset-small-lib": "^11.0.2",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@types/react-router-dom": "^5.3.3",
     "husky": "^9.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "size-limit": "^11.0.2",
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@types/react-router-dom": "^5.3.3",
+    "react-router-dom": "^5.2.0"
   },
   "dependencies": {
     "classcat": "^5.0.4",
-    "react-router-dom": "^5.1.2",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.8",
+    "react-router-dom": "^5.2.0"
   }
 }

package/src/Leia.tsx

@@ -1,28 +1,42 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, Suspense } from 'react';
 
-import { useLocation, useRouteMatch, useHistory } from 'react-router-dom';
+import { Route, useLocation, useRouteMatch, useHistory, Switch as SwitchRoute } from 'react-router-dom';
 
 import type { Props } from './index';
 import { Tab, Tabs } from './components/Tabs'
 
+import { getLanguage } from './utils/getLanguage'
+
+import { FileArea } from './components/FileArea';
+import { TestArea } from './components/TestArea';
+
 export const Leia = (props: Props) => {
   const match = useRouteMatch();
   const { pathname } = useLocation();
   const history = useHistory();
 
-  console.log('Props', props);
+  const t = getLanguage(props.language)
 
   const activeTab = useMemo(() => {
     return pathname.split('/')[5] || 'files';
   }, [pathname]);
 
   return (
-    <Tabs
-      value={activeTab}
-      onChange={(value) => history.push(`${match.url}/${value}`)}
-    >
-      <Tab value="files">Files</Tab>
-      <Tab value="test">Test</Tab>
-    </Tabs>
+    <>
+      <Tabs
+        value={activeTab}
+        onChange={(value) => history.push(`${match.url}/${value}`)}
+      >
+        <Tab value="files">{t.files}</Tab>
+        <Tab value="test">{t.test}</Tab>
+      </Tabs>
+      <Suspense fallback={props.loading}>
+        <SwitchRoute>
+          <Route path={`${match.path}`} exact component={FileArea} />
+          <Route path={`${match.path}/archives`} component={FileArea} />
+          <Route path={`${match.path}/test`} component={TestArea} />
+        </SwitchRoute>
+      </Suspense>
+    </>
   );
 };

package/src/components/FileArea/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const FileArea = () => {
+  return (
+    <div>FILE AREA</div>
+  );
+};

package/src/components/TestArea/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const TestArea = () => {
+  return (
+    <div>TEST AREA</div>
+  );
+};

package/src/index.tsx

@@ -1,10 +1,12 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import { Leia } from './Leia';
 
 export type Props = PropsWithChildren<{
   id: string;
   activeTab: string;
+  language: "en" | "pt-br" | "es";
+  loading: ReactElement
 }>;
 
 export function Code7(props: Props) {

package/src/utils/getLanguage.tsx

@@ -0,0 +1,23 @@
+type Language = {
+  files: string;
+  test: string;
+};
+
+export const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {
+  const languages: Record<'en' | 'pt-br' | 'es', Language> = {
+    en: {
+      files: 'Files',
+      test: 'Test',
+    },
+    'pt-br': {
+      files: 'Arquivos',
+      test: 'Teste',
+    },
+    es: {
+      files: 'Archivos',
+      test: 'Prueba',
+    }
+  };
+
+  return languages[language] || languages['pt-br'];
+};