code7-leia 0.1.5 → 0.1.6

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

@@ -4,15 +4,117 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
+var reactRouterDom = require('react-router-dom');
+var PropTypes = _interopDefault(require('prop-types'));
+var cc = _interopDefault(require('classcat'));
+var styled = _interopDefault(require('styled-components'));
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+  strings.raw = raw;
+  return strings;
+}
+
+var _templateObject, _templateObject2;
+var TabsPane = /*#__PURE__*/styled.ul(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n"])));
+var Tab = /*#__PURE__*/styled.li(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
+
+var _excluded = ["active", "children"],
+  _excluded2 = ["children", "value", "onChange"];
+var Tab$1 = function Tab$1(_ref) {
+  var active = _ref.active,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return React__default.createElement(Tab, Object.assign({
+    className: cc({
+      active: active
+    })
+  }, rest), children);
+};
+Tab$1.propTypes = {
+  children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]).isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  active: PropTypes.bool
+};
+Tab$1.defaultProps = {
+  onChange: function onChange() {},
+  value: '',
+  active: false
+};
+var Tabs = function Tabs(_ref2) {
+  var childrenProp = _ref2.children,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var children = React__default.Children.map(childrenProp, function (child) {
+    var _child$props, _child$props3;
+    if (!React__default.isValidElement(child)) {
+      return null;
+    }
+    if (Array.isArray((_child$props = child.props) == null ? void 0 : _child$props.children)) {
+      var _child$props2;
+      return React__default.cloneElement(child, {
+        active: ((_child$props2 = child.props) == null ? void 0 : _child$props2.value) === value,
+        value: value,
+        onChange: onChange
+      });
+    }
+    return React__default.cloneElement(child, {
+      active: ((_child$props3 = child.props) == null ? void 0 : _child$props3.value) === value,
+      onClick: function onClick() {
+        var _child$props4;
+        return onChange((_child$props4 = child.props) == null ? void 0 : _child$props4.value);
+      }
+    });
+  });
+  return React__default.createElement(TabsPane, Object.assign({}, rest), children);
+};
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  value: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onChange: PropTypes.func.isRequired
+};
 
 var Leia = function Leia(props) {
+  var match = reactRouterDom.useRouteMatch();
+  var _useLocation = reactRouterDom.useLocation(),
+    pathname = _useLocation.pathname;
+  var history = reactRouterDom.useHistory();
   console.log('Props', props);
-  return React.createElement("div", null, "Aqui \xE9 a Leia, seu id \xE9 ", props.id);
+  var activeTab = React.useMemo(function () {
+    return pathname.split('/')[5] || 'files';
+  }, [pathname]);
+  return 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, {
+    value: "test"
+  }, "Test"));
 };
 
 function Code7(props) {
-  return React.createElement(Leia, Object.assign({}, props));
+  return React__default.createElement(Leia, Object.assign({}, props));
 }
 
 exports.Code7 = Code7;

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

@@ -1 +1 @@
-{"version":3,"file":"code7-leia.cjs.development.js","sources":["../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Props } from './index';\n\nexport const Leia = (props: Props) => {\n\n  console.log('Props', props);\n\n  return (\n    <div>Aqui é a Leia, seu id é {props.id}</div>\n  );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["Leia","props","console","log","React","id","Code7"],"mappings":";;;;;;;;AAIO,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAIC,KAAY;EAE/BC,OAAO,CAACC,GAAG,CAAC,OAAO,EAAEF,KAAK,CAAC;EAE3B,OACEG,mEAA8BH,KAAK,CAACI,EAAE,CAAO;AAEjD,CAAC;;SCHeC,KAAKA,CAACL,KAAY;EAChC,OAAOG,oBAACJ,IAAI,oBAAKC,KAAK,EAAI;AAC5B;;;;"}
+{"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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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=function(e){return console.log("Props",e),t.createElement("div",null,"Aqui é a Leia, seu id é ",e.id)};exports.Code7=function(e){return t.createElement(r,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,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))};
 //# 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/Leia.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Props } from './index';\n\nexport const Leia = (props: Props) => {\n\n  console.log('Props', props);\n\n  return (\n    <div>Aqui é a Leia, seu id é {props.id}</div>\n  );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["Leia","props","console","log","React","id"],"mappings":"gJAIaA,EAAO,SAACC,GAInB,OAFAC,QAAQC,IAAI,QAASF,GAGnBG,sDAA8BH,EAAMI,4BCDlBJ,GACpB,OAAOG,gBAACJ,mBAASC"}
+{"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"}

package/dist/code7-leia.esm.js

@@ -1,8 +1,109 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useRouteMatch, useLocation, useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import cc from 'classcat';
+import styled from 'styled-components';
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+  strings.raw = raw;
+  return strings;
+}
+
+var _templateObject, _templateObject2;
+var TabsPane = /*#__PURE__*/styled.ul(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n"])));
+var Tab = /*#__PURE__*/styled.li(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
+
+var _excluded = ["active", "children"],
+  _excluded2 = ["children", "value", "onChange"];
+var Tab$1 = function Tab$1(_ref) {
+  var active = _ref.active,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return React.createElement(Tab, Object.assign({
+    className: cc({
+      active: active
+    })
+  }, rest), children);
+};
+Tab$1.propTypes = {
+  children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]).isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  active: PropTypes.bool
+};
+Tab$1.defaultProps = {
+  onChange: function onChange() {},
+  value: '',
+  active: false
+};
+var Tabs = function Tabs(_ref2) {
+  var childrenProp = _ref2.children,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var children = React.Children.map(childrenProp, function (child) {
+    var _child$props, _child$props3;
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+    if (Array.isArray((_child$props = child.props) == null ? void 0 : _child$props.children)) {
+      var _child$props2;
+      return React.cloneElement(child, {
+        active: ((_child$props2 = child.props) == null ? void 0 : _child$props2.value) === value,
+        value: value,
+        onChange: onChange
+      });
+    }
+    return React.cloneElement(child, {
+      active: ((_child$props3 = child.props) == null ? void 0 : _child$props3.value) === value,
+      onClick: function onClick() {
+        var _child$props4;
+        return onChange((_child$props4 = child.props) == null ? void 0 : _child$props4.value);
+      }
+    });
+  });
+  return React.createElement(TabsPane, Object.assign({}, rest), children);
+};
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  value: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onChange: PropTypes.func.isRequired
+};
 
 var Leia = function Leia(props) {
+  var match = useRouteMatch();
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  var history = useHistory();
   console.log('Props', props);
-  return React.createElement("div", null, "Aqui \xE9 a Leia, seu id \xE9 ", props.id);
+  var activeTab = useMemo(function () {
+    return pathname.split('/')[5] || 'files';
+  }, [pathname]);
+  return 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, {
+    value: "test"
+  }, "Test"));
 };
 
 function Code7(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"code7-leia.esm.js","sources":["../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Props } from './index';\n\nexport const Leia = (props: Props) => {\n\n  console.log('Props', props);\n\n  return (\n    <div>Aqui é a Leia, seu id é {props.id}</div>\n  );\n};","import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["Leia","props","console","log","React","id","Code7"],"mappings":";;AAIO,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAIC,KAAY;EAE/BC,OAAO,CAACC,GAAG,CAAC,OAAO,EAAEF,KAAK,CAAC;EAE3B,OACEG,mEAA8BH,KAAK,CAACI,EAAE,CAAO;AAEjD,CAAC;;SCHeC,KAAKA,CAACL,KAAY;EAChC,OAAOG,oBAACJ,IAAI,oBAAKC,KAAK,EAAI;AAC5B;;;;"}
+{"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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"}

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

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+interface TabProps {
+    children: ReactNode;
+    active?: boolean;
+}
+interface ITabsProps {
+    children: ReactNode;
+    value: string | number;
+    onChange: (e: any) => void;
+    active?: boolean;
+}
+export declare const Tab: {
+    ({ active, children, ...rest }: TabProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        value: PropTypes.Requireable<string>;
+        active: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        onChange: () => void;
+        value: string;
+        active: boolean;
+    };
+};
+export declare const Tabs: {
+    ({ children: childrenProp, value, onChange, ...rest }: ITabsProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        value: PropTypes.Validator<string | number>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export {};

package/dist/components/Tabs/styles.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface TabProps {
+    children: ReactNode;
+}
+interface OptionProps {
+    children: ReactNode;
+    onClick: () => void;
+}
+export declare const TabsPane: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
+export declare const Tab: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, TabProps>>;
+export declare const DropdownContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Option: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, OptionProps>>;
+export {};

package/dist/index.d.ts

@@ -2,5 +2,6 @@ import type { PropsWithChildren } from 'react';
 import React from 'react';
 export declare type Props = PropsWithChildren<{
     id: string;
+    activeTab: string;
 }>;
 export declare function Code7(props: Props): React.JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -51,6 +51,7 @@
     "@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",
@@ -58,5 +59,10 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "classcat": "^5.0.4",
+    "react-router-dom": "^5.1.2",
+    "styled-components": "^6.1.8"
   }
 }

package/src/Leia.tsx

@@ -1,12 +1,28 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useLocation, useRouteMatch, useHistory } from 'react-router-dom';
 
 import type { Props } from './index';
+import { Tab, Tabs } from './components/Tabs'
 
 export const Leia = (props: Props) => {
+  const match = useRouteMatch();
+  const { pathname } = useLocation();
+  const history = useHistory();
 
   console.log('Props', props);
 
+  const activeTab = useMemo(() => {
+    return pathname.split('/')[5] || 'files';
+  }, [pathname]);
+
   return (
-    <div>Aqui é a Leia, seu id é {props.id}</div>
+    <Tabs
+      value={activeTab}
+      onChange={(value) => history.push(`${match.url}/${value}`)}
+    >
+      <Tab value="files">Files</Tab>
+      <Tab value="test">Test</Tab>
+    </Tabs>
   );
 };

package/src/components/Tabs/index.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import cc from 'classcat';
+
+import * as S from './styles';
+
+interface TabProps {
+  children: ReactNode;
+  active?: boolean;
+}
+
+interface ITabsProps {
+  children: ReactNode;
+  value: string | number;
+  onChange: (e: any) => void;
+  active?: boolean;
+}
+
+export const Tab = ({ active, children, ...rest }: TabProps) => {
+  return (
+    <S.Tab className={cc({ active })} {...rest}>
+      {children}
+    </S.Tab>
+  );
+};
+
+Tab.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.node,
+  ]).isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  active: PropTypes.bool,
+};
+
+Tab.defaultProps = {
+  onChange: () => {},
+  value: '',
+  active: false,
+};
+
+export const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {
+  const children = React.Children.map(childrenProp, (child) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+    if (Array.isArray(child.props?.children)) {
+      return React.cloneElement(child as React.ReactElement<any>, {
+        active: child.props?.value === value,
+        value,
+        onChange,
+      });
+    }
+
+    return React.cloneElement(child as React.ReactElement<any>, {
+      active: child.props?.value === value,
+      onClick: () => onChange(child.props?.value),
+    });
+  });
+
+  return <S.TabsPane {...rest}>{children}</S.TabsPane>;
+};
+
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onChange: PropTypes.func.isRequired,
+};

package/src/components/Tabs/styles.tsx

@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+import { ReactNode } from 'react';
+
+interface TabProps {
+  children: ReactNode;
+}
+
+interface OptionProps {
+  children: ReactNode;
+  onClick: () => void;
+}
+
+export const TabsPane = styled.ul`
+  width: max-content;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--neutral-1);
+`;
+
+export const Tab = styled.li<TabProps>`
+  padding: 12px;
+  color: var(--neutral-3);
+  font-size: 0.875rem;
+  font-weight: normal;
+  position: relative;
+  cursor: pointer;
+
+  svg {
+    fill: var(--neutral-3) !important;
+    margin-left: 8px;
+  }
+
+  &.active {
+    color: var(--primary-700-light);
+
+    svg {
+      fill: var(--primary-700-light) !important;
+    }
+
+    ::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: var(--primary-700-light);
+    }
+  }
+
+  &:not(:last-child) {
+    margin-right: 8px;
+  }
+`;
+
+export const DropdownContainer = styled.div`
+  position: absolute;
+  left: 0px;
+  top: 40px;
+  display: flex;
+  flex-direction: column;
+
+  background: #ffffff;
+
+  border: 1px solid #979aa5;
+  box-sizing: border-box;
+  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),
+    0px 8px 24px -4px rgba(24, 39, 75, 0.08);
+  border-radius: 4px;
+  padding: 8px;
+  z-index: 2;
+`;
+
+export const Option = styled.div<OptionProps>`
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: var(--primary-800-light);
+    color: white;
+  }
+`;

package/src/index.tsx

@@ -4,6 +4,7 @@ import { Leia } from './Leia';
 
 export type Props = PropsWithChildren<{
   id: string;
+  activeTab: string;
 }>;
 
 export function Code7(props: Props) {