From f4f032f53386d7fda288b58b1e13c645f2f287aa Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:01:49 +0900 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20tabbar=20lay?= =?UTF-8?q?out=20=EA=B5=AC=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TabLayout/index.tsx | 50 ++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/components/TabLayout/index.tsx diff --git a/src/components/TabLayout/index.tsx b/src/components/TabLayout/index.tsx new file mode 100644 index 00000000..6d33569a --- /dev/null +++ b/src/components/TabLayout/index.tsx @@ -0,0 +1,50 @@ +import { Children, ReactElement, useState } from 'react'; +import styled from 'styled-components'; + +interface TabLayoutProps { + tabs: string[]; + children: ReactElement; +} + +interface TabHeaderItemProps { + isSelected: boolean; +} + +const TabLayoutContainer = styled.div` + position: fixed; + bottom: 0; + display: flex; +`; + +const TabLayoutHeader = styled.div` + display: flex; +`; + +const TabHeaderItem = styled.div` + ${({ isSelected }) => isSelected && 'border-bottom: 3px solid blue'}; + cursor: pointer; +`; + +const TabLayout = ({ tabs, children }: TabLayoutProps) => { + const [selectIdx, setSelectIdx] = useState(0); + const selectedChildren = Children.toArray(children); + + return ( + + + {tabs.map((element, idx) => ( + setSelectIdx(idx)} + isSelected={idx === selectIdx} + > + {element} + + ))} + + {selectedChildren[selectIdx]} + + ); +}; + +export default TabLayout; From 3dc0054c5adced96b9c0c39261f6d793034add66 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:23:23 +0900 Subject: [PATCH 02/14] =?UTF-8?q?build:=20=EB=B9=8C=EB=93=9C=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitattributes | 1 + dist/cjs/components/Container/index.d.ts | 7 --- dist/cjs/components/Container/index.js | 27 ----------- dist/cjs/components/Container/index.js.map | 1 - dist/cjs/components/Flex/index.d.ts | 9 ---- dist/cjs/components/Flex/index.js | 31 ------------- dist/cjs/components/Flex/index.js.map | 1 - dist/cjs/components/FlexItem/index.d.ts | 6 --- dist/cjs/components/FlexItem/index.js | 22 --------- dist/cjs/components/FlexItem/index.js.map | 1 - dist/cjs/components/Grid/index.d.ts | 8 ---- dist/cjs/components/Grid/index.js | 28 ------------ dist/cjs/components/Grid/index.js.map | 1 - dist/cjs/components/GridItem/index.d.ts | 5 --- dist/cjs/components/GridItem/index.js | 19 -------- dist/cjs/components/GridItem/index.js.map | 1 - dist/cjs/index.d.ts | 10 ----- dist/cjs/index.js | 17 ------- dist/cjs/index.js.map | 1 - dist/esm/components/Container/index.d.ts | 6 +-- dist/esm/components/Container/index.js | 25 +++-------- dist/esm/components/Container/index.js.map | 2 +- dist/esm/components/Flex/index.js | 13 +----- dist/esm/components/Flex/index.js.map | 2 +- dist/esm/components/FlexItem/index.js | 13 +----- dist/esm/components/FlexItem/index.js.map | 2 +- dist/esm/components/Grid/index.js | 13 +----- dist/esm/components/Grid/index.js.map | 2 +- dist/esm/components/GridItem/index.d.ts | 2 +- dist/esm/components/GridItem/index.js | 13 +----- dist/esm/components/GridItem/index.js.map | 2 +- dist/esm/components/TabLayout/index.d.ts | 7 +++ dist/esm/components/TabLayout/index.js | 22 +++++++++ dist/esm/components/TabLayout/index.js.map | 1 + dist/esm/stories/Container.stories.d.ts | 1 - dist/esm/stories/Container.stories.js | 25 +++++------ dist/esm/stories/Container.stories.js.map | 2 +- dist/esm/stories/Flex.stories.d.ts | 1 - dist/esm/stories/Flex.stories.js | 52 +++++++++++++++------- dist/esm/stories/Flex.stories.js.map | 2 +- dist/esm/stories/Grid.stories.d.ts | 1 - dist/esm/stories/Grid.stories.js | 35 +++++++++------ dist/esm/stories/Grid.stories.js.map | 2 +- 43 files changed, 122 insertions(+), 320 deletions(-) create mode 100644 .gitattributes delete mode 100644 dist/cjs/components/Container/index.d.ts delete mode 100644 dist/cjs/components/Container/index.js delete mode 100644 dist/cjs/components/Container/index.js.map delete mode 100644 dist/cjs/components/Flex/index.d.ts delete mode 100644 dist/cjs/components/Flex/index.js delete mode 100644 dist/cjs/components/Flex/index.js.map delete mode 100644 dist/cjs/components/FlexItem/index.d.ts delete mode 100644 dist/cjs/components/FlexItem/index.js delete mode 100644 dist/cjs/components/FlexItem/index.js.map delete mode 100644 dist/cjs/components/Grid/index.d.ts delete mode 100644 dist/cjs/components/Grid/index.js delete mode 100644 dist/cjs/components/Grid/index.js.map delete mode 100644 dist/cjs/components/GridItem/index.d.ts delete mode 100644 dist/cjs/components/GridItem/index.js delete mode 100644 dist/cjs/components/GridItem/index.js.map delete mode 100644 dist/cjs/index.d.ts delete mode 100644 dist/cjs/index.js delete mode 100644 dist/cjs/index.js.map create mode 100644 dist/esm/components/TabLayout/index.d.ts create mode 100644 dist/esm/components/TabLayout/index.js create mode 100644 dist/esm/components/TabLayout/index.js.map delete mode 100644 dist/esm/stories/Container.stories.d.ts delete mode 100644 dist/esm/stories/Flex.stories.d.ts delete mode 100644 dist/esm/stories/Grid.stories.d.ts diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..176a458f --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto diff --git a/dist/cjs/components/Container/index.d.ts b/dist/cjs/components/Container/index.d.ts deleted file mode 100644 index af43faa9..00000000 --- a/dist/cjs/components/Container/index.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { PropsWithChildren } from 'react'; -interface ContainerProps extends PropsWithChildren { - maxWidth?: number; - minWidth?: number; -} -declare const Container: ({ minWidth, maxWidth, children, }: Partial) => import("react/jsx-runtime").JSX.Element; -export default Container; diff --git a/dist/cjs/components/Container/index.js b/dist/cjs/components/Container/index.js deleted file mode 100644 index 635fa045..00000000 --- a/dist/cjs/components/Container/index.js +++ /dev/null @@ -1,27 +0,0 @@ -"use strict"; -var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { - if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } - return cooked; -}; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var jsx_runtime_1 = require("react/jsx-runtime"); -var styled_components_1 = __importDefault(require("styled-components")); -var ContainerComponent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n"]))); -var ContainerContentComponent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", ";\n width: ", ";\n height: 100%;\n"], ["\n min-width: ", ";\n width: ", ";\n height: 100%;\n"])), function (_a) { - var maxWidth = _a.maxWidth, minWidth = _a.minWidth; - var maxWidthParams = !maxWidth ? '100%' : "".concat(maxWidth, "px"); - return "".concat(!minWidth ? maxWidthParams : "".concat(minWidth, "px")); -}, function (_a) { - var maxWidth = _a.maxWidth; - return (!maxWidth ? '100%' : "".concat(maxWidth, "px")); -}); -var Container = function (_a) { - var minWidth = _a.minWidth, maxWidth = _a.maxWidth, children = _a.children; - return ((0, jsx_runtime_1.jsx)(ContainerComponent, { children: (0, jsx_runtime_1.jsx)(ContainerContentComponent, { maxWidth: maxWidth, minWidth: minWidth, children: children }) })); -}; -exports.default = Container; -var templateObject_1, templateObject_2; -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/cjs/components/Container/index.js.map b/dist/cjs/components/Container/index.js.map deleted file mode 100644 index e708aeed..00000000 --- a/dist/cjs/components/Container/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Container/index.tsx"],"names":[],"mappings":";;;;;;;;;;AACA,wEAAuC;AAOvC,IAAM,kBAAkB,GAAG,2BAAM,CAAC,GAAG,gLAAA,6GAMpC,IAAA,CAAC;AAEF,IAAM,yBAAyB,GAAG,2BAAM,CAAC,GAAG,4HAAgB,iBAC7C,EAGZ,cACQ,EAAwD,sBAElE,KANc,UAAC,EAAsB;QAApB,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAChC,IAAM,cAAc,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC;IAC5D,OAAO,UAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAE,CAAC;AAC3D,CAAC,EACQ,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC;AAAtC,CAAsC,CAElE,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAIO;QAHxB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA;IAER,OAAO,CACL,uBAAC,kBAAkB,cACjB,uBAAC,yBAAyB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,YAC9D,QAAQ,GACiB,GACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"} \ No newline at end of file diff --git a/dist/cjs/components/Flex/index.d.ts b/dist/cjs/components/Flex/index.d.ts deleted file mode 100644 index 80e8c211..00000000 --- a/dist/cjs/components/Flex/index.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { PropsWithChildren } from 'react'; -interface FlexProps extends PropsWithChildren { - direction: 'row' | 'row-reverse' | 'column' | 'column-reverse'; - justify: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; - align: 'center' | 'start' | 'end'; - gap: number; -} -declare const Flex: ({ direction, justify, align, gap, children, }: Partial) => import("react/jsx-runtime").JSX.Element; -export default Flex; diff --git a/dist/cjs/components/Flex/index.js b/dist/cjs/components/Flex/index.js deleted file mode 100644 index 5360ea3a..00000000 --- a/dist/cjs/components/Flex/index.js +++ /dev/null @@ -1,31 +0,0 @@ -"use strict"; -var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { - if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } - return cooked; -}; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var jsx_runtime_1 = require("react/jsx-runtime"); -var styled_components_1 = __importDefault(require("styled-components")); -var FlexComponent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: ", ";\n gap: ", ";\n"], ["\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: ", ";\n gap: ", ";\n"])), function (_a) { - var direction = _a.direction; - return direction; -}, function (_a) { - var justify = _a.justify; - return justify; -}, function (_a) { - var align = _a.align; - return align; -}, function (_a) { - var gap = _a.gap; - return "".concat(gap, "px"); -}); -var Flex = function (_a) { - var _b = _a.direction, direction = _b === void 0 ? 'row' : _b, _c = _a.justify, justify = _c === void 0 ? 'start' : _c, _d = _a.align, align = _d === void 0 ? 'start' : _d, _e = _a.gap, gap = _e === void 0 ? 0 : _e, children = _a.children; - return ((0, jsx_runtime_1.jsx)(FlexComponent, { direction: direction, justify: justify, align: align, gap: gap, children: children })); -}; -exports.default = Flex; -var templateObject_1; -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/cjs/components/Flex/index.js.map b/dist/cjs/components/Flex/index.js.map deleted file mode 100644 index e07b6340..00000000 --- a/dist/cjs/components/Flex/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Flex/index.tsx"],"names":[],"mappings":";;;;;;;;;;AACA,wEAAuC;AAcvC,IAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,gLAAW,wCAEvB,EAA4B,wBAC3B,EAAwB,oBAC5B,EAAoB,YAC5B,EAAuB,KAC/B,KAJmB,UAAC,EAAa;QAAX,SAAS,eAAA;IAAO,OAAA,SAAS;AAAT,CAAS,EAC3B,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO;AAAP,CAAO,EAC5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,EAC5B,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,UAAG,GAAG,OAAI;AAAV,CAAU,CAC/B,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAMO;QALnB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,eAAiB,EAAjB,OAAO,mBAAG,OAAO,KAAA,EACjB,aAAe,EAAf,KAAK,mBAAG,OAAO,KAAA,EACf,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA,EACP,QAAQ,cAAA;IAER,OAAO,CACL,uBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,YAEP,QAAQ,GACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC"} \ No newline at end of file diff --git a/dist/cjs/components/FlexItem/index.d.ts b/dist/cjs/components/FlexItem/index.d.ts deleted file mode 100644 index af3eb883..00000000 --- a/dist/cjs/components/FlexItem/index.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { PropsWithChildren } from 'react'; -interface FlexItemProps extends PropsWithChildren { - align: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'; -} -declare const FlexItem: ({ align, children }: Partial) => import("react/jsx-runtime").JSX.Element; -export default FlexItem; diff --git a/dist/cjs/components/FlexItem/index.js b/dist/cjs/components/FlexItem/index.js deleted file mode 100644 index 59cb8c82..00000000 --- a/dist/cjs/components/FlexItem/index.js +++ /dev/null @@ -1,22 +0,0 @@ -"use strict"; -var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { - if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } - return cooked; -}; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var jsx_runtime_1 = require("react/jsx-runtime"); -var styled_components_1 = __importDefault(require("styled-components")); -var FlexItemComponent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-self: ", ";\n"], ["\n align-self: ", ";\n"])), function (_a) { - var align = _a.align; - return align; -}); -var FlexItem = function (_a) { - var _b = _a.align, align = _b === void 0 ? 'auto' : _b, children = _a.children; - return (0, jsx_runtime_1.jsx)(FlexItemComponent, { align: align, children: children }); -}; -exports.default = FlexItem; -var templateObject_1; -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/cjs/components/FlexItem/index.js.map b/dist/cjs/components/FlexItem/index.js.map deleted file mode 100644 index ea510bad..00000000 --- a/dist/cjs/components/FlexItem/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FlexItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;AACA,wEAAuC;AAMvC,IAAM,iBAAiB,GAAG,2BAAM,CAAC,GAAG,4FAAe,kBACnC,EAAoB,KACnC,KADe,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,CACnC,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,EAAoD;QAAlD,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAE,QAAQ,cAAA;IAC1C,OAAO,uBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAqB,CAAC;AACzE,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/dist/cjs/components/Grid/index.d.ts b/dist/cjs/components/Grid/index.d.ts deleted file mode 100644 index 13bf2eb4..00000000 --- a/dist/cjs/components/Grid/index.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { PropsWithChildren } from 'react'; -interface GridProps extends PropsWithChildren { - rows: number; - columns: number; - gap: number; -} -declare const Grid: ({ children, rows, columns, gap, }: Partial) => import("react/jsx-runtime").JSX.Element; -export default Grid; diff --git a/dist/cjs/components/Grid/index.js b/dist/cjs/components/Grid/index.js deleted file mode 100644 index 597bc3ee..00000000 --- a/dist/cjs/components/Grid/index.js +++ /dev/null @@ -1,28 +0,0 @@ -"use strict"; -var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { - if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } - return cooked; -}; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var jsx_runtime_1 = require("react/jsx-runtime"); -var styled_components_1 = __importDefault(require("styled-components")); -var GridComponent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n gap: ", ";\n grid-template-rows: ", ";\n"], ["\n display: grid;\n grid-template-columns: ", ";\n gap: ", ";\n grid-template-rows: ", ";\n"])), function (_a) { - var columns = _a.columns; - return "repeat(".concat(columns, ", ").concat((100 / columns).toFixed(2), "%)"); -}, function (_a) { - var gap = _a.gap; - return "".concat(gap, "px"); -}, function (_a) { - var rows = _a.rows; - return "repeat(".concat(rows, ", auto)"); -}); -var Grid = function (_a) { - var children = _a.children, _b = _a.rows, rows = _b === void 0 ? 10 : _b, _c = _a.columns, columns = _c === void 0 ? 10 : _c, _d = _a.gap, gap = _d === void 0 ? 0 : _d; - return ((0, jsx_runtime_1.jsx)(GridComponent, { rows: rows, columns: columns, gap: gap, children: children })); -}; -exports.default = Grid; -var templateObject_1; -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/cjs/components/Grid/index.js.map b/dist/cjs/components/Grid/index.js.map deleted file mode 100644 index 260c3a06..00000000 --- a/dist/cjs/components/Grid/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/index.tsx"],"names":[],"mappings":";;;;;;;;;;AACA,wEAAuC;AAQvC,IAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,oKAAW,+CAEhB,EAC6B,YAC/C,EAAuB,2BACR,EAAqC,KAC5D,KAJ0B,UAAC,EAAW;QAAT,OAAO,aAAA;IACjC,OAAA,iBAAU,OAAO,eAAK,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI;AAApD,CAAoD,EAC/C,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,UAAG,GAAG,OAAI;AAAV,CAAU,EACR,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,iBAAU,IAAI,YAAS;AAAvB,CAAuB,CAC5D,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAKO;QAJnB,QAAQ,cAAA,EACR,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA;IAEP,OAAO,CACL,uBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YAClD,QAAQ,GACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC"} \ No newline at end of file diff --git a/dist/cjs/components/GridItem/index.d.ts b/dist/cjs/components/GridItem/index.d.ts deleted file mode 100644 index a91a18db..00000000 --- a/dist/cjs/components/GridItem/index.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { PropsWithChildren } from 'react'; -interface GridItemProps extends PropsWithChildren { -} -declare const GridItem: ({ children }: GridItemProps) => import("react/jsx-runtime").JSX.Element; -export default GridItem; diff --git a/dist/cjs/components/GridItem/index.js b/dist/cjs/components/GridItem/index.js deleted file mode 100644 index c63af26c..00000000 --- a/dist/cjs/components/GridItem/index.js +++ /dev/null @@ -1,19 +0,0 @@ -"use strict"; -var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { - if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } - return cooked; -}; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var jsx_runtime_1 = require("react/jsx-runtime"); -var styled_components_1 = __importDefault(require("styled-components")); -var GridItemComponent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); -var GridItem = function (_a) { - var children = _a.children; - return (0, jsx_runtime_1.jsx)(GridItemComponent, { children: children }); -}; -exports.default = GridItem; -var templateObject_1; -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/cjs/components/GridItem/index.js.map b/dist/cjs/components/GridItem/index.js.map deleted file mode 100644 index f3d07b72..00000000 --- a/dist/cjs/components/GridItem/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/GridItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;AACA,wEAAuC;AAIvC,IAAM,iBAAiB,GAAG,2BAAM,CAAC,GAAG,qEAAA,EAAE,IAAA,CAAC;AAEvC,IAAM,QAAQ,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA;IAC1B,OAAO,uBAAC,iBAAiB,cAAE,QAAQ,GAAqB,CAAC;AAC3D,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/dist/cjs/index.d.ts b/dist/cjs/index.d.ts deleted file mode 100644 index 60ef0403..00000000 --- a/dist/cjs/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Container from './components/Container'; -import Grid from './components/Grid'; -import GridItem from './components/GridItem'; -import Flex from './components/Flex'; -import FlexItem from './components/FlexItem'; -export { Container }; -export { Grid }; -export { GridItem }; -export { Flex }; -export { FlexItem }; diff --git a/dist/cjs/index.js b/dist/cjs/index.js deleted file mode 100644 index 4043673a..00000000 --- a/dist/cjs/index.js +++ /dev/null @@ -1,17 +0,0 @@ -"use strict"; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.FlexItem = exports.Flex = exports.GridItem = exports.Grid = exports.Container = void 0; -var Container_1 = __importDefault(require("./components/Container")); -exports.Container = Container_1.default; -var Grid_1 = __importDefault(require("./components/Grid")); -exports.Grid = Grid_1.default; -var GridItem_1 = __importDefault(require("./components/GridItem")); -exports.GridItem = GridItem_1.default; -var Flex_1 = __importDefault(require("./components/Flex")); -exports.Flex = Flex_1.default; -var FlexItem_1 = __importDefault(require("./components/FlexItem")); -exports.FlexItem = FlexItem_1.default; -//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/cjs/index.js.map b/dist/cjs/index.js.map deleted file mode 100644 index a1213580..00000000 --- a/dist/cjs/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,qEAA+C;AAMtC,oBANF,mBAAS,CAME;AALlB,2DAAqC;AAM5B,eANF,cAAI,CAME;AALb,mEAA6C;AAMpC,mBANF,kBAAQ,CAME;AALjB,2DAAqC;AAM5B,eANF,cAAI,CAME;AALb,mEAA6C;AAMpC,mBANF,kBAAQ,CAME"} \ No newline at end of file diff --git a/dist/esm/components/Container/index.d.ts b/dist/esm/components/Container/index.d.ts index 7f054761..a91ecd6e 100644 --- a/dist/esm/components/Container/index.d.ts +++ b/dist/esm/components/Container/index.d.ts @@ -1,9 +1,9 @@ import { PropsWithChildren } from 'react'; import { CSSProperties } from 'styled-components'; interface ContainerProps extends PropsWithChildren { - maxWidth?: number; - minWidth?: number; + maxwidth?: number; + minwidth?: number; backgroundColor: CSSProperties['backgroundColor']; } -declare const Container: ({ minWidth, maxWidth, backgroundColor, children, }: Partial) => import("react/jsx-runtime").JSX.Element; +declare const Container: ({ minwidth, maxwidth, backgroundColor, children, }: Partial) => import("react/jsx-runtime").JSX.Element; export default Container; diff --git a/dist/esm/components/Container/index.js b/dist/esm/components/Container/index.js index 9d4470cf..d777b9ca 100644 --- a/dist/esm/components/Container/index.js +++ b/dist/esm/components/Container/index.js @@ -2,34 +2,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx } from "react/jsx-runtime"; import styled from 'styled-components'; var ContainerComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n"]))); var ContainerContentComponent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", ";\n width: ", ";\n background-color: ", ";\n height: 100%;\n"], ["\n min-width: ", ";\n width: ", ";\n background-color: ", ";\n height: 100%;\n"])), function (_a) { - var maxWidth = _a.maxWidth, minWidth = _a.minWidth; - var maxWidthParams = !maxWidth ? '100%' : "".concat(maxWidth, "px"); - return "".concat(!minWidth ? maxWidthParams : "".concat(minWidth, "px")); + var maxwidth = _a.maxwidth, minwidth = _a.minwidth; + var maxWidthParams = !maxwidth ? '100%' : "".concat(maxwidth, "px"); + return "".concat(!minwidth ? maxWidthParams : "".concat(minwidth, "px")); }, function (_a) { - var maxWidth = _a.maxWidth; - return (!maxWidth ? '100%' : "".concat(maxWidth, "px")); + var maxwidth = _a.maxwidth; + return (!maxwidth ? '100%' : "".concat(maxwidth, "px")); }, function (_a) { var backgroundColor = _a.backgroundColor; return backgroundColor; }); var Container = function (_a) { - var minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'transparent' : _b, children = _a.children; - return (_jsx(ContainerComponent, { children: _jsx(ContainerContentComponent, __assign({ maxWidth: maxWidth, minWidth: minWidth, backgroundColor: backgroundColor }, { children: children }), void 0) }, void 0)); + var minwidth = _a.minwidth, maxwidth = _a.maxwidth, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'transparent' : _b, children = _a.children; + return (_jsx(ContainerComponent, { children: _jsx(ContainerContentComponent, { maxwidth: maxwidth, minwidth: minwidth, backgroundColor: backgroundColor, children: children }) })); }; export default Container; var templateObject_1, templateObject_2; diff --git a/dist/esm/components/Container/index.js.map b/dist/esm/components/Container/index.js.map index f4ac8ddf..d0645dd0 100644 --- a/dist/esm/components/Container/index.js.map +++ b/dist/esm/components/Container/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Container/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,OAAO,MAAyB,MAAM,mBAAmB,CAAC;AAQ1D,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,gLAAA,6GAMpC,IAAA,CAAC;AAEF,IAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,uJAAgB,iBAC7C,EAGZ,cACQ,EAAwD,yBAC7C,EAAwC,sBAE7D,KAPc,UAAC,EAAsB;QAApB,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAChC,IAAM,cAAc,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC;IAC5D,OAAO,UAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAE,CAAC;AAC3D,CAAC,EACQ,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC;AAAtC,CAAsC,EAC7C,UAAC,EAAmB;QAAjB,eAAe,qBAAA;IAAO,OAAA,eAAe;AAAf,CAAe,CAE7D,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAKO;QAJxB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,uBAA+B,EAA/B,eAAe,mBAAG,aAAa,KAAA,EAC/B,QAAQ,cAAA;IAER,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,yBAAyB,aACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,gBAE/B,QAAQ,YACiB,WACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Container/index.tsx"],"names":[],"mappings":";;;;;AACA,OAAO,MAAyB,MAAM,mBAAmB,CAAC;AAQ1D,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,gLAAA,6GAMpC,IAAA,CAAC;AAEF,IAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,uJAAgB,iBAC7C,EAGZ,cACQ,EAAwD,yBAC7C,EAAwC,sBAE7D,KAPc,UAAC,EAAsB;QAApB,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAChC,IAAM,cAAc,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC;IAC5D,OAAO,UAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAE,CAAC;AAC3D,CAAC,EACQ,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC;AAAtC,CAAsC,EAC7C,UAAC,EAAmB;QAAjB,eAAe,qBAAA;IAAO,OAAA,eAAe;AAAf,CAAe,CAE7D,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAKO;QAJxB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,uBAA+B,EAA/B,eAAe,mBAAG,aAAa,KAAA,EAC/B,QAAQ,cAAA;IAER,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,yBAAyB,IACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,YAE/B,QAAQ,GACiB,GACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file diff --git a/dist/esm/components/Flex/index.js b/dist/esm/components/Flex/index.js index 3e00faf3..4f78e2f9 100644 --- a/dist/esm/components/Flex/index.js +++ b/dist/esm/components/Flex/index.js @@ -2,17 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx } from "react/jsx-runtime"; import styled from 'styled-components'; var FlexComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: ", ";\n gap: ", ";\n"], ["\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: ", ";\n gap: ", ";\n"])), function (_a) { @@ -30,7 +19,7 @@ var FlexComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTem }); var Flex = function (_a) { var _b = _a.direction, direction = _b === void 0 ? 'row' : _b, _c = _a.justify, justify = _c === void 0 ? 'start' : _c, _d = _a.align, align = _d === void 0 ? 'start' : _d, _e = _a.gap, gap = _e === void 0 ? 0 : _e, children = _a.children; - return (_jsx(FlexComponent, __assign({ direction: direction, justify: justify, align: align, gap: gap }, { children: children }), void 0)); + return (_jsx(FlexComponent, { direction: direction, justify: justify, align: align, gap: gap, children: children })); }; export default Flex; var templateObject_1; diff --git a/dist/esm/components/Flex/index.js.map b/dist/esm/components/Flex/index.js.map index 04b7a6e5..005521cd 100644 --- a/dist/esm/components/Flex/index.js.map +++ b/dist/esm/components/Flex/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Flex/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAcvC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,gLAAW,wCAEvB,EAA4B,wBAC3B,EAAwB,oBAC5B,EAAoB,YAC5B,EAAuB,KAC/B,KAJmB,UAAC,EAAa;QAAX,SAAS,eAAA;IAAO,OAAA,SAAS;AAAT,CAAS,EAC3B,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO;AAAP,CAAO,EAC5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,EAC5B,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,UAAG,GAAG,OAAI;AAAV,CAAU,CAC/B,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAMO;QALnB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,eAAiB,EAAjB,OAAO,mBAAG,OAAO,KAAA,EACjB,aAAe,EAAf,KAAK,mBAAG,OAAO,KAAA,EACf,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA,EACP,QAAQ,cAAA;IAER,OAAO,CACL,KAAC,aAAa,aACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,gBAEP,QAAQ,YACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Flex/index.tsx"],"names":[],"mappings":";;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAcvC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,gLAAW,wCAEvB,EAA4B,wBAC3B,EAAwB,oBAC5B,EAAoB,YAC5B,EAAuB,KAC/B,KAJmB,UAAC,EAAa;QAAX,SAAS,eAAA;IAAO,OAAA,SAAS;AAAT,CAAS,EAC3B,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO;AAAP,CAAO,EAC5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,EAC5B,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,UAAG,GAAG,OAAI;AAAV,CAAU,CAC/B,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAMO;QALnB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,eAAiB,EAAjB,OAAO,mBAAG,OAAO,KAAA,EACjB,aAAe,EAAf,KAAK,mBAAG,OAAO,KAAA,EACf,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA,EACP,QAAQ,cAAA;IAER,OAAO,CACL,KAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,YAEP,QAAQ,GACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"} \ No newline at end of file diff --git a/dist/esm/components/FlexItem/index.js b/dist/esm/components/FlexItem/index.js index 017857a9..e4640407 100644 --- a/dist/esm/components/FlexItem/index.js +++ b/dist/esm/components/FlexItem/index.js @@ -2,17 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx } from "react/jsx-runtime"; import styled from 'styled-components'; var FlexItemComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-self: ", ";\n"], ["\n align-self: ", ";\n"])), function (_a) { @@ -21,7 +10,7 @@ var FlexItemComponent = styled.div(templateObject_1 || (templateObject_1 = __mak }); var FlexItem = function (_a) { var _b = _a.align, align = _b === void 0 ? 'auto' : _b, children = _a.children; - return _jsx(FlexItemComponent, __assign({ align: align }, { children: children }), void 0); + return _jsx(FlexItemComponent, { align: align, children: children }); }; export default FlexItem; var templateObject_1; diff --git a/dist/esm/components/FlexItem/index.js.map b/dist/esm/components/FlexItem/index.js.map index 4c391175..d53ee55b 100644 --- a/dist/esm/components/FlexItem/index.js.map +++ b/dist/esm/components/FlexItem/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FlexItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,4FAAe,kBACnC,EAAoB,KACnC,KADe,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,CACnC,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,EAAoD;QAAlD,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAE,QAAQ,cAAA;IAC1C,OAAO,KAAC,iBAAiB,aAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,YAAqB,CAAC;AACzE,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FlexItem/index.tsx"],"names":[],"mappings":";;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,4FAAe,kBACnC,EAAoB,KACnC,KADe,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,CACnC,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,EAAoD;QAAlD,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAE,QAAQ,cAAA;IAC1C,OAAO,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAqB,CAAC;AACzE,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/dist/esm/components/Grid/index.js b/dist/esm/components/Grid/index.js index b466c792..2558b888 100644 --- a/dist/esm/components/Grid/index.js +++ b/dist/esm/components/Grid/index.js @@ -2,17 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx } from "react/jsx-runtime"; import styled from 'styled-components'; var GridComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n gap: ", ";\n grid-template-rows: ", ";\n"], ["\n display: grid;\n grid-template-columns: ", ";\n gap: ", ";\n grid-template-rows: ", ";\n"])), function (_a) { @@ -27,7 +16,7 @@ var GridComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTem }); var Grid = function (_a) { var children = _a.children, _b = _a.rows, rows = _b === void 0 ? 10 : _b, _c = _a.columns, columns = _c === void 0 ? 10 : _c, _d = _a.gap, gap = _d === void 0 ? 0 : _d; - return (_jsx(GridComponent, __assign({ rows: rows, columns: columns, gap: gap }, { children: children }), void 0)); + return (_jsx(GridComponent, { rows: rows, columns: columns, gap: gap, children: children })); }; export default Grid; var templateObject_1; diff --git a/dist/esm/components/Grid/index.js.map b/dist/esm/components/Grid/index.js.map index 700c110c..ad052075 100644 --- a/dist/esm/components/Grid/index.js.map +++ b/dist/esm/components/Grid/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,oKAAW,+CAEhB,EAC6B,YAC/C,EAAuB,2BACR,EAAqC,KAC5D,KAJ0B,UAAC,EAAW;QAAT,OAAO,aAAA;IACjC,OAAA,iBAAU,OAAO,eAAK,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI;AAApD,CAAoD,EAC/C,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,UAAG,GAAG,OAAI;AAAV,CAAU,EACR,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,iBAAU,IAAI,YAAS;AAAvB,CAAuB,CAC5D,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAKO;QAJnB,QAAQ,cAAA,EACR,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA;IAEP,OAAO,CACL,KAAC,aAAa,aAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,gBAClD,QAAQ,YACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Grid/index.tsx"],"names":[],"mappings":";;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,oKAAW,+CAEhB,EAC6B,YAC/C,EAAuB,2BACR,EAAqC,KAC5D,KAJ0B,UAAC,EAAW;QAAT,OAAO,aAAA;IACjC,OAAA,iBAAU,OAAO,eAAK,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI;AAApD,CAAoD,EAC/C,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,UAAG,GAAG,OAAI;AAAV,CAAU,EACR,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,iBAAU,IAAI,YAAS;AAAvB,CAAuB,CAC5D,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAKO;QAJnB,QAAQ,cAAA,EACR,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA;IAEP,OAAO,CACL,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YAClD,QAAQ,GACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"} \ No newline at end of file diff --git a/dist/esm/components/GridItem/index.d.ts b/dist/esm/components/GridItem/index.d.ts index 4edf98e8..f8b4460a 100644 --- a/dist/esm/components/GridItem/index.d.ts +++ b/dist/esm/components/GridItem/index.d.ts @@ -1,5 +1,5 @@ import { PropsWithChildren } from 'react'; -declare type GridBoundary = `${number}/${number}`; +type GridBoundary = `${number}/${number}`; interface GridItemProps extends PropsWithChildren { gridCol: GridBoundary | 'auto'; gridRow: GridBoundary | 'auto'; diff --git a/dist/esm/components/GridItem/index.js b/dist/esm/components/GridItem/index.js index d7a9a2f7..a8c5cb26 100644 --- a/dist/esm/components/GridItem/index.js +++ b/dist/esm/components/GridItem/index.js @@ -2,17 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx } from "react/jsx-runtime"; import styled from 'styled-components'; var GridItemComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-column: ", ";\n grid-row: ", ";\n"], ["\n grid-column: ", ";\n grid-row: ", ";\n"])), function (_a) { @@ -24,7 +13,7 @@ var GridItemComponent = styled.div(templateObject_1 || (templateObject_1 = __mak }); var GridItem = function (_a) { var _b = _a.gridRow, gridRow = _b === void 0 ? 'auto' : _b, _c = _a.gridCol, gridCol = _c === void 0 ? 'auto' : _c, children = _a.children; - return (_jsx(GridItemComponent, __assign({ gridRow: gridRow, gridCol: gridCol }, { children: children }), void 0)); + return (_jsx(GridItemComponent, { gridRow: gridRow, gridCol: gridCol, children: children })); }; export default GridItem; var templateObject_1; diff --git a/dist/esm/components/GridItem/index.js.map b/dist/esm/components/GridItem/index.js.map index 3645f0b1..ab1a1979 100644 --- a/dist/esm/components/GridItem/index.js.map +++ b/dist/esm/components/GridItem/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/GridItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,gHAAe,mBAClC,EAA8C,iBACjD,EAA8C,KAC3D,KAFgB,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAA7B,CAA6B,EACjD,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAA7B,CAA6B,CAC3D,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,EAIO;QAHvB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,QAAQ,cAAA;IAER,OAAO,CACL,KAAC,iBAAiB,aAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,gBAClD,QAAQ,YACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/GridItem/index.tsx"],"names":[],"mappings":";;;;;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,gHAAe,mBAClC,EAA8C,iBACjD,EAA8C,KAC3D,KAFgB,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAA7B,CAA6B,EACjD,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAA7B,CAA6B,CAC3D,CAAC;AAEF,IAAM,QAAQ,GAAG,UAAC,EAIO;QAHvB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,QAAQ,cAAA;IAER,OAAO,CACL,KAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAClD,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/dist/esm/components/TabLayout/index.d.ts b/dist/esm/components/TabLayout/index.d.ts new file mode 100644 index 00000000..776c0fbf --- /dev/null +++ b/dist/esm/components/TabLayout/index.d.ts @@ -0,0 +1,7 @@ +import { ReactElement } from 'react'; +interface TabLayoutProps { + tabs: string[]; + children: ReactElement; +} +declare const TabLayout: ({ tabs, children }: TabLayoutProps) => import("react/jsx-runtime").JSX.Element; +export default TabLayout; diff --git a/dist/esm/components/TabLayout/index.js b/dist/esm/components/TabLayout/index.js new file mode 100644 index 00000000..f1d3a4c9 --- /dev/null +++ b/dist/esm/components/TabLayout/index.js @@ -0,0 +1,22 @@ +var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { + if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } + return cooked; +}; +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { Children, useState } from 'react'; +import styled from 'styled-components'; +var TabLayoutContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n display: flex;\n"], ["\n position: fixed;\n bottom: 0;\n display: flex;\n"]))); +var TabLayoutHeader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"]))); +var TabHeaderItem = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n cursor: pointer;\n"], ["\n ", ";\n cursor: pointer;\n"])), function (_a) { + var isSelected = _a.isSelected; + return isSelected && 'border-bottom: 3px solid blue'; +}); +var TabLayout = function (_a) { + var tabs = _a.tabs, children = _a.children; + var _b = useState(0), selectIdx = _b[0], setSelectIdx = _b[1]; + var selectedChildren = Children.toArray(children); + return (_jsxs(TabLayoutContainer, { children: [_jsx(TabLayoutHeader, { children: tabs.map(function (element, idx) { return (_jsx(TabHeaderItem, { onClick: function () { return setSelectIdx(idx); }, isSelected: idx === selectIdx, children: element }, element)); }) }), selectedChildren[selectIdx]] })); +}; +export default TabLayout; +var templateObject_1, templateObject_2, templateObject_3; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/esm/components/TabLayout/index.js.map b/dist/esm/components/TabLayout/index.js.map new file mode 100644 index 00000000..35d3d322 --- /dev/null +++ b/dist/esm/components/TabLayout/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TabLayout/index.tsx"],"names":[],"mappings":";;;;;AAAA,OAAO,EAAE,QAAQ,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,2HAAA,wDAIpC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,yFAAA,sBAEjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,oGAAoB,MAChD,EAAiE,yBAEpE,KAFG,UAAC,EAAc;QAAZ,UAAU,gBAAA;IAAO,OAAA,UAAU,IAAI,+BAA+B;AAA7C,CAA6C,CAEpE,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAAkC;QAAhC,IAAI,UAAA,EAAE,QAAQ,cAAA;IAC3B,IAAA,KAA4B,QAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,QAAA,EAAE,YAAY,QAAe,CAAC;IAC9C,IAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,MAAC,kBAAkB,eACjB,KAAC,eAAe,cACb,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG,IAAK,OAAA,CAC1B,KAAC,aAAa,IAEZ,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,GAAG,CAAC,EAAjB,CAAiB,EAChC,UAAU,EAAE,GAAG,KAAK,SAAS,YAE5B,OAAO,IAJH,OAAO,CAKE,CACjB,EAR2B,CAQ3B,CAAC,GACc,EACjB,gBAAgB,CAAC,SAAS,CAAC,IACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file diff --git a/dist/esm/stories/Container.stories.d.ts b/dist/esm/stories/Container.stories.d.ts deleted file mode 100644 index cb0ff5c3..00000000 --- a/dist/esm/stories/Container.stories.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/esm/stories/Container.stories.js b/dist/esm/stories/Container.stories.js index 0cdcd49d..3925f506 100644 --- a/dist/esm/stories/Container.stories.js +++ b/dist/esm/stories/Container.stories.js @@ -1,19 +1,14 @@ -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -import { jsxs as _jsxs } from "react/jsx-runtime"; import Container from '../components/Container'; var meta = { title: 'Container', - component: Container -}, satisfies, Meta; -_jsxs("typeof", __assign({ Container: true }, { children: ["; export default meta; type Story = StoryObj", _jsxs("typeof", __assign({ meta: true }, { children: ["; export const Primary: Story = ", args, ": ", minWidth, ": 500, maxWidth: 1000, backgroundColor: 'skyblue', }, };"] }), void 0)] }), void 0); + component: Container, +}; +export default meta; +export var Primary = { + args: { + minwidth: 500, + maxwidth: 1000, + backgroundColor: 'skyblue', + }, +}; //# sourceMappingURL=Container.stories.js.map \ No newline at end of file diff --git a/dist/esm/stories/Container.stories.js.map b/dist/esm/stories/Container.stories.js.map index 60c19ea4..9c5256be 100644 --- a/dist/esm/stories/Container.stories.js.map +++ b/dist/esm/stories/Container.stories.js.map @@ -1 +1 @@ -{"version":3,"file":"Container.stories.js","sourceRoot":"","sources":["../../../src/stories/Container.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAEhD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACrB,EAAC,SAAS,EAAC,IAAI,CAAA;AAAA,2BAAQ,SAAS,uEAGZ,2BAAQ,IAAI,2DAG/B,IAAI,QACF,QAAQ,yEAKZ,aAAA,CAAA"} \ No newline at end of file +{"version":3,"file":"Container.stories.js","sourceRoot":"","sources":["../../../src/stories/Container.stories.tsx"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAEhD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACY,CAAC;AAEnC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC"} \ No newline at end of file diff --git a/dist/esm/stories/Flex.stories.d.ts b/dist/esm/stories/Flex.stories.d.ts deleted file mode 100644 index cb0ff5c3..00000000 --- a/dist/esm/stories/Flex.stories.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/esm/stories/Flex.stories.js b/dist/esm/stories/Flex.stories.js index 658a18d7..b7433d93 100644 --- a/dist/esm/stories/Flex.stories.js +++ b/dist/esm/stories/Flex.stories.js @@ -1,14 +1,3 @@ -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import Flex from '../components/Flex'; import FlexItem from '../components/FlexItem'; @@ -16,8 +5,41 @@ var meta = { title: 'Flex', component: Flex, decorators: [ - function (Story) { return (_jsx("div", __assign({ style: { height: '200px', width: '500px', backgroundColor: 'skyblue' } }, { children: _jsx(Story, {}, void 0) }), void 0)); }, - ] -}, satisfies, Meta; -_jsxs("typeof", __assign({ Flex: true }, { children: ["; export default meta; type Story = StoryObj", _jsxs("typeof", __assign({ meta: true }, { children: ["; interface FlexExampleProps ", isCustom, ": boolean; } const FlexExample = (", isCustom, ": FlexExampleProps) => ", , "return (", _jsxs(_Fragment, { children: [_jsx(FlexItem, __assign({ align: isCustom ? 'center' : 'auto' }, { children: "1" }), void 0), _jsx(FlexItem, { children: "2" }, void 0), _jsx(FlexItem, { children: "3" }, void 0)] }, void 0), "); }; export const Default: Story = ", args, ": ", children, ": ", _jsx(FlexExample, { isCustom: false }, void 0), ", }, }; export const Stack: Story = ", args, ": ", direction, ": 'column', justify: 'center', align: 'center', gap: 4, children: ", _jsx(FlexExample, { isCustom: false }, void 0), ", }, }; export const DirectionColumn: Story = ", args, ": ", direction, ": 'column', children: ", _jsx(FlexExample, { isCustom: false }, void 0), ", }, }; export const AlignSelf: Story = ", args, ": ", direction, ": 'column', justify: 'center', align: 'center', gap: 4, children: ", _jsx(FlexExample, { isCustom: true }, void 0), ", }, };"] }), void 0)] }), void 0); + function (Story) { return (_jsx("div", { style: { height: '200px', width: '500px', backgroundColor: 'skyblue' }, children: _jsx(Story, {}) })); }, + ], +}; +export default meta; +var FlexExample = function (_a) { + var isCustom = _a.isCustom; + return (_jsxs(_Fragment, { children: [_jsx(FlexItem, { align: isCustom ? 'center' : 'auto', children: "1" }), _jsx(FlexItem, { children: "2" }), _jsx(FlexItem, { children: "3" })] })); +}; +export var Default = { + args: { + children: _jsx(FlexExample, { isCustom: false }), + }, +}; +export var Stack = { + args: { + direction: 'column', + justify: 'center', + align: 'center', + gap: 4, + children: _jsx(FlexExample, { isCustom: false }), + }, +}; +export var DirectionColumn = { + args: { + direction: 'column', + children: _jsx(FlexExample, { isCustom: false }), + }, +}; +export var AlignSelf = { + args: { + direction: 'column', + justify: 'center', + align: 'center', + gap: 4, + children: _jsx(FlexExample, { isCustom: true }), + }, +}; //# sourceMappingURL=Flex.stories.js.map \ No newline at end of file diff --git a/dist/esm/stories/Flex.stories.js.map b/dist/esm/stories/Flex.stories.js.map index d21138e6..8469d87b 100644 --- a/dist/esm/stories/Flex.stories.js.map +++ b/dist/esm/stories/Flex.stories.js.map @@ -1 +1 @@ -{"version":3,"file":"Flex.stories.js","sourceRoot":"","sources":["../../../src/stories/Flex.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAE9C,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,UAAC,KAAK,IAAK,OAAA,CACT,uBACE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,gBAEtE,KAAC,KAAK,aAAG,YACL,CACP,EANU,CAMV;KACF;CACF,EAAC,SAAS,EAAC,IAAI,CAAA;AAAA,2BAAQ,IAAI,uEAGP,2BAAQ,IAAI,wDAG/B,QAAQ,wCAEa,QAAQ,6BAC7B,AADuD,cAErD,8BACE,KAAC,QAAQ,aAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,+BAAc,EAC3D,KAAC,QAAQ,4BAAa,EACtB,KAAC,QAAQ,4BAAa,YACrB,0CAIL,IAAI,QACF,QAAQ,QAAE,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,WAAI,0CAK5C,IAAI,QACF,SAAS,wEAIC,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,WAAI,oDAK5C,IAAI,QACF,SAAS,4BACC,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,WAAI,8CAK5C,IAAI,QACF,SAAS,wEAIC,KAAC,WAAW,IAAC,QAAQ,EAAE,IAAI,WAAI,wBAG7C,aAAA,CAAA"} \ No newline at end of file +{"version":3,"file":"Flex.stories.js","sourceRoot":"","sources":["../../../src/stories/Flex.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAE9C,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,UAAC,KAAK,IAAK,OAAA,CACT,cACE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,YAEtE,KAAC,KAAK,KAAG,GACL,CACP,EANU,CAMV;KACF;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAMpB,IAAM,WAAW,GAAG,UAAC,EAA8B;QAA5B,QAAQ,cAAA;IAC7B,OAAO,CACL,8BACE,KAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,kBAAc,EAC3D,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,IACrB,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,GAAI;KAC3C;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE,QAAQ;QACf,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,GAAI;KAC3C;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,KAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,GAAI;KAC3C;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE,QAAQ;QACf,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,KAAC,WAAW,IAAC,QAAQ,EAAE,IAAI,GAAI;KAC1C;CACF,CAAC"} \ No newline at end of file diff --git a/dist/esm/stories/Grid.stories.d.ts b/dist/esm/stories/Grid.stories.d.ts deleted file mode 100644 index cb0ff5c3..00000000 --- a/dist/esm/stories/Grid.stories.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/esm/stories/Grid.stories.js b/dist/esm/stories/Grid.stories.js index e4853925..ee8f0490 100644 --- a/dist/esm/stories/Grid.stories.js +++ b/dist/esm/stories/Grid.stories.js @@ -1,20 +1,27 @@ -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import Grid from '../components/Grid'; import GridItem from '../components/GridItem'; var meta = { title: 'Grid', - component: Grid -}, satisfies, Meta; -_jsxs("typeof", __assign({ Grid: true }, { children: ["; export default meta; type Story = StoryObj", _jsxs("typeof", __assign({ meta: true }, { children: ["; interface StoryGridItemsProps ", isCustom, ": boolean; } const StoryGridItems = (", isCustom, ": StoryGridItemsProps) => ", , "return (", _jsxs(_Fragment, { children: [_jsx(GridItem, __assign({ gridRow: isCustom ? '1/3' : 'auto' }, { children: "A" }), void 0), _jsx(GridItem, { children: "B" }, void 0), _jsx(GridItem, { children: "C" }, void 0), _jsx(GridItem, { children: "D" }, void 0), _jsx(GridItem, { children: "E" }, void 0)] }, void 0), "); }; export const Default: Story = ", args, ": ", columns, ": 3, gap: 10, children: ", _jsx(StoryGridItems, { isCustom: false }, void 0), ", }, }; export const Custom: Story = ", args, ": ", columns, ": 3, gap: 10, children: ", _jsx(StoryGridItems, { isCustom: true }, void 0), ", }, };"] }), void 0)] }), void 0); + component: Grid, +}; +export default meta; +var StoryGridItems = function (_a) { + var isCustom = _a.isCustom; + return (_jsxs(_Fragment, { children: [_jsx(GridItem, { gridRow: isCustom ? '1/3' : 'auto', children: "A" }), _jsx(GridItem, { children: "B" }), _jsx(GridItem, { children: "C" }), _jsx(GridItem, { children: "D" }), _jsx(GridItem, { children: "E" })] })); +}; +export var Default = { + args: { + columns: 3, + gap: 10, + children: _jsx(StoryGridItems, { isCustom: false }), + }, +}; +export var Custom = { + args: { + columns: 3, + gap: 10, + children: _jsx(StoryGridItems, { isCustom: true }), + }, +}; //# sourceMappingURL=Grid.stories.js.map \ No newline at end of file diff --git a/dist/esm/stories/Grid.stories.js.map b/dist/esm/stories/Grid.stories.js.map index f100664b..fe58cd33 100644 --- a/dist/esm/stories/Grid.stories.js.map +++ b/dist/esm/stories/Grid.stories.js.map @@ -1 +1 @@ -{"version":3,"file":"Grid.stories.js","sourceRoot":"","sources":["../../../src/stories/Grid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAE9C,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,EAAC,SAAS,EAAC,IAAI,CAAA;AAAA,2BAAQ,IAAI,uEAGP,2BAAQ,IAAI,2DAG/B,QAAQ,2CAEgB,QAAQ,gCAChC,AAD6D,cAE3D,8BACE,KAAC,QAAQ,aAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,+BAAc,EAC1D,KAAC,QAAQ,4BAAa,EACtB,KAAC,QAAQ,4BAAa,EACtB,KAAC,QAAQ,4BAAa,EACtB,KAAC,QAAQ,4BAAa,YACrB,0CAIL,IAAI,QACF,OAAO,8BAEG,KAAC,cAAc,IAAC,QAAQ,EAAE,KAAK,WAAI,2CAK/C,IAAI,QACF,OAAO,8BAEG,KAAC,cAAc,IAAC,QAAQ,EAAE,IAAI,WAAI,wBAGhD,aAAA,CAAA"} \ No newline at end of file +{"version":3,"file":"Grid.stories.js","sourceRoot":"","sources":["../../../src/stories/Grid.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAE9C,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CACY,CAAC;AAE9B,eAAe,IAAI,CAAC;AAMpB,IAAM,cAAc,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IAChC,OAAO,CACL,8BACE,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,kBAAc,EAC1D,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,IACrB,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,KAAC,cAAc,IAAC,QAAQ,EAAE,KAAK,GAAI;KAC9C;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,KAAC,cAAc,IAAC,QAAQ,EAAE,IAAI,GAAI;KAC7C;CACF,CAAC"} \ No newline at end of file From c20ba3f28bedc6e78d52183d1b2ef2e78beb3086 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:24:30 +0900 Subject: [PATCH 03/14] 1.1.3 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 677c59d5..335f5635 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "yunseong-layout-component", - "version": "1.1.2", + "version": "1.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "yunseong-layout-component", - "version": "1.1.2", + "version": "1.1.3", "license": "MIT", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index 4685ad20..ec29bb12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yunseong-layout-component", - "version": "1.1.2", + "version": "1.1.3", "description": "yunseong's layout components", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", From f0bee88df96b7e8957f9ede23a3bd120e7d79bd1 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:31:55 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20tab=20bar=20import=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.ts b/src/index.ts index 3611431f..7990bd83 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,9 +3,11 @@ import Grid from './components/Grid'; import GridItem from './components/GridItem'; import Flex from './components/Flex'; import FlexItem from './components/FlexItem'; +import TabLayout from './components/TabLayout'; export { Container }; export { Grid }; export { GridItem }; export { Flex }; export { FlexItem }; +export { TabLayout }; \ No newline at end of file From 1ad13f43848290bfb489641f38ccab2ef381cea4 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:32:11 +0900 Subject: [PATCH 05/14] 1.1.4 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 335f5635..d0b7bdfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "yunseong-layout-component", - "version": "1.1.3", + "version": "1.1.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "yunseong-layout-component", - "version": "1.1.3", + "version": "1.1.4", "license": "MIT", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index ec29bb12..e8d61f73 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yunseong-layout-component", - "version": "1.1.3", + "version": "1.1.4", "description": "yunseong's layout components", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", From e82ffbfcddb6aa76f646a3f73ef65553f44e8bde Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:33:51 +0900 Subject: [PATCH 06/14] =?UTF-8?q?build:=20=EB=B9=8C=EB=93=9C=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/esm/index.d.ts | 2 ++ dist/esm/index.js | 2 ++ dist/esm/index.js.map | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/dist/esm/index.d.ts b/dist/esm/index.d.ts index 60ef0403..2572664c 100644 --- a/dist/esm/index.d.ts +++ b/dist/esm/index.d.ts @@ -3,8 +3,10 @@ import Grid from './components/Grid'; import GridItem from './components/GridItem'; import Flex from './components/Flex'; import FlexItem from './components/FlexItem'; +import TabLayout from './components/TabLayout'; export { Container }; export { Grid }; export { GridItem }; export { Flex }; export { FlexItem }; +export { TabLayout }; diff --git a/dist/esm/index.js b/dist/esm/index.js index 8fe8063c..83b93fb2 100644 --- a/dist/esm/index.js +++ b/dist/esm/index.js @@ -3,9 +3,11 @@ import Grid from './components/Grid'; import GridItem from './components/GridItem'; import Flex from './components/Flex'; import FlexItem from './components/FlexItem'; +import TabLayout from './components/TabLayout'; export { Container }; export { Grid }; export { GridItem }; export { Flex }; export { FlexItem }; +export { TabLayout }; //# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/esm/index.js.map b/dist/esm/index.js.map index 184986d9..2ed54219 100644 --- a/dist/esm/index.js.map +++ b/dist/esm/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,SAAS,EAAE,CAAC"} \ No newline at end of file From dde18a0b3dc13535a9e576bfffa84eb85fce03b1 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:33:59 +0900 Subject: [PATCH 07/14] 1.1.5 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index d0b7bdfc..9fca0d32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "yunseong-layout-component", - "version": "1.1.4", + "version": "1.1.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "yunseong-layout-component", - "version": "1.1.4", + "version": "1.1.5", "license": "MIT", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index e8d61f73..ecf60633 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yunseong-layout-component", - "version": "1.1.4", + "version": "1.1.5", "description": "yunseong's layout components", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", From cf9c82e2c3cdfd4f2ad3996d1e73ea9d6742f4e1 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 17:55:46 +0900 Subject: [PATCH 08/14] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EB=B0=8F=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TabLayout/index.tsx | 20 ++++++++++++-------- src/stories/TabLayout.stories.tsx | 18 ++++++++++++++++++ 2 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 src/stories/TabLayout.stories.tsx diff --git a/src/components/TabLayout/index.tsx b/src/components/TabLayout/index.tsx index 6d33569a..9c835c30 100644 --- a/src/components/TabLayout/index.tsx +++ b/src/components/TabLayout/index.tsx @@ -1,19 +1,21 @@ import { Children, ReactElement, useState } from 'react'; -import styled from 'styled-components'; +import styled, { CSSProperties } from 'styled-components'; interface TabLayoutProps { tabs: string[]; - children: ReactElement; + children: ReactElement[]; + bordercolor: CSSProperties['color']; } interface TabHeaderItemProps { - isSelected: boolean; + isselected: boolean; + bordercolor: CSSProperties['color']; } const TabLayoutContainer = styled.div` - position: fixed; - bottom: 0; display: flex; + flex-direction: column; + width: 100%; `; const TabLayoutHeader = styled.div` @@ -21,11 +23,12 @@ const TabLayoutHeader = styled.div` `; const TabHeaderItem = styled.div` - ${({ isSelected }) => isSelected && 'border-bottom: 3px solid blue'}; + padding: 10px; + ${({ isselected, bordercolor }) => isselected && `border-bottom: 3px solid ${bordercolor}`}; cursor: pointer; `; -const TabLayout = ({ tabs, children }: TabLayoutProps) => { +const TabLayout = ({ tabs, children, bordercolor }: TabLayoutProps) => { const [selectIdx, setSelectIdx] = useState(0); const selectedChildren = Children.toArray(children); @@ -34,9 +37,10 @@ const TabLayout = ({ tabs, children }: TabLayoutProps) => { {tabs.map((element, idx) => ( setSelectIdx(idx)} - isSelected={idx === selectIdx} + isselected={idx === selectIdx} > {element} diff --git a/src/stories/TabLayout.stories.tsx b/src/stories/TabLayout.stories.tsx new file mode 100644 index 00000000..0bc78a54 --- /dev/null +++ b/src/stories/TabLayout.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import TabLayout from '../components/TabLayout'; + +const meta = { + title: 'TabLayout', + component: TabLayout +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default = { + render: () => ( +
콘텐츠 11
+
콘텐츠 22
+
콘텐츠 33
+) +}; \ No newline at end of file From 1053fe5d8e8d3598f507152a0214b5f4f662e4de Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 18:04:21 +0900 Subject: [PATCH 09/14] =?UTF-8?q?docs:=20TabLayout=20mdx=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/TabLayout.mdx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/stories/TabLayout.mdx diff --git a/src/stories/TabLayout.mdx b/src/stories/TabLayout.mdx new file mode 100644 index 00000000..f26d15a3 --- /dev/null +++ b/src/stories/TabLayout.mdx @@ -0,0 +1,30 @@ +import { Canvas, Meta } from "@storybook/blocks"; +import * as TabLayoutStories from "./TabLayout.stories"; + + + +# TabLayout + +## 설명 + +TabBar가 존재하는 레이아웃입니다. 상단의 Tab으로 이동할 수 있습니다. + +Tab Layout의 크기는 부모의 크기를 상속받습니다. + +## 속성 + +`tabs: string[]` : 요소를 선택해 콘텐츠를 이동할 수 있는 Tab Header에 표시될 문자열 배열 값입니다. + +`children: ReactElement` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다. + +## 사용 예시 + +```tsx + +
콘텐츠 11
+
콘텐츠 22
+
콘텐츠 33
+ +``` + + From 4681130386c10881dd735a58fe68e5739ab515b8 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 18:06:19 +0900 Subject: [PATCH 10/14] =?UTF-8?q?build:=20=EB=B9=8C=EB=93=9C=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/esm/components/TabLayout/index.d.ts | 6 ++++-- dist/esm/components/TabLayout/index.js | 12 ++++++------ dist/esm/components/TabLayout/index.js.map | 2 +- dist/esm/stories/TabLayout.stories.js | 11 +++++++++++ dist/esm/stories/TabLayout.stories.js.map | 1 + 5 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 dist/esm/stories/TabLayout.stories.js create mode 100644 dist/esm/stories/TabLayout.stories.js.map diff --git a/dist/esm/components/TabLayout/index.d.ts b/dist/esm/components/TabLayout/index.d.ts index 776c0fbf..463ae0ab 100644 --- a/dist/esm/components/TabLayout/index.d.ts +++ b/dist/esm/components/TabLayout/index.d.ts @@ -1,7 +1,9 @@ import { ReactElement } from 'react'; +import { CSSProperties } from 'styled-components'; interface TabLayoutProps { tabs: string[]; - children: ReactElement; + children: ReactElement[]; + bordercolor: CSSProperties['color']; } -declare const TabLayout: ({ tabs, children }: TabLayoutProps) => import("react/jsx-runtime").JSX.Element; +declare const TabLayout: ({ tabs, children, bordercolor }: TabLayoutProps) => import("react/jsx-runtime").JSX.Element; export default TabLayout; diff --git a/dist/esm/components/TabLayout/index.js b/dist/esm/components/TabLayout/index.js index f1d3a4c9..8c5cf1ef 100644 --- a/dist/esm/components/TabLayout/index.js +++ b/dist/esm/components/TabLayout/index.js @@ -5,17 +5,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Children, useState } from 'react'; import styled from 'styled-components'; -var TabLayoutContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n display: flex;\n"], ["\n position: fixed;\n bottom: 0;\n display: flex;\n"]))); +var TabLayoutContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"]))); var TabLayoutHeader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"]))); -var TabHeaderItem = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n cursor: pointer;\n"], ["\n ", ";\n cursor: pointer;\n"])), function (_a) { - var isSelected = _a.isSelected; - return isSelected && 'border-bottom: 3px solid blue'; +var TabHeaderItem = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 10px;\n ", ";\n cursor: pointer;\n"], ["\n padding: 10px;\n ", ";\n cursor: pointer;\n"])), function (_a) { + var isselected = _a.isselected, bordercolor = _a.bordercolor; + return isselected && "border-bottom: 3px solid ".concat(bordercolor); }); var TabLayout = function (_a) { - var tabs = _a.tabs, children = _a.children; + var tabs = _a.tabs, children = _a.children, bordercolor = _a.bordercolor; var _b = useState(0), selectIdx = _b[0], setSelectIdx = _b[1]; var selectedChildren = Children.toArray(children); - return (_jsxs(TabLayoutContainer, { children: [_jsx(TabLayoutHeader, { children: tabs.map(function (element, idx) { return (_jsx(TabHeaderItem, { onClick: function () { return setSelectIdx(idx); }, isSelected: idx === selectIdx, children: element }, element)); }) }), selectedChildren[selectIdx]] })); + return (_jsxs(TabLayoutContainer, { children: [_jsx(TabLayoutHeader, { children: tabs.map(function (element, idx) { return (_jsx(TabHeaderItem, { bordercolor: bordercolor, onClick: function () { return setSelectIdx(idx); }, isselected: idx === selectIdx, children: element }, element)); }) }), selectedChildren[selectIdx]] })); }; export default TabLayout; var templateObject_1, templateObject_2, templateObject_3; diff --git a/dist/esm/components/TabLayout/index.js.map b/dist/esm/components/TabLayout/index.js.map index 35d3d322..493e7ac9 100644 --- a/dist/esm/components/TabLayout/index.js.map +++ b/dist/esm/components/TabLayout/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TabLayout/index.tsx"],"names":[],"mappings":";;;;;AAAA,OAAO,EAAE,QAAQ,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,2HAAA,wDAIpC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,yFAAA,sBAEjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,oGAAoB,MAChD,EAAiE,yBAEpE,KAFG,UAAC,EAAc;QAAZ,UAAU,gBAAA;IAAO,OAAA,UAAU,IAAI,+BAA+B;AAA7C,CAA6C,CAEpE,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAAkC;QAAhC,IAAI,UAAA,EAAE,QAAQ,cAAA;IAC3B,IAAA,KAA4B,QAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,QAAA,EAAE,YAAY,QAAe,CAAC;IAC9C,IAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,MAAC,kBAAkB,eACjB,KAAC,eAAe,cACb,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG,IAAK,OAAA,CAC1B,KAAC,aAAa,IAEZ,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,GAAG,CAAC,EAAjB,CAAiB,EAChC,UAAU,EAAE,GAAG,KAAK,SAAS,YAE5B,OAAO,IAJH,OAAO,CAKE,CACjB,EAR2B,CAQ3B,CAAC,GACc,EACjB,gBAAgB,CAAC,SAAS,CAAC,IACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TabLayout/index.tsx"],"names":[],"mappings":";;;;;AAAA,OAAO,EAAE,QAAQ,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,MAAyB,MAAM,mBAAmB,CAAC;AAa1D,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,oIAAA,iEAIpC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,yFAAA,sBAEjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,sHAAoB,wBAEhD,EAAwF,yBAE3F,KAFG,UAAC,EAA2B;QAAzB,UAAU,gBAAA,EAAE,WAAW,iBAAA;IAAO,OAAA,UAAU,IAAI,mCAA4B,WAAW,CAAE;AAAvD,CAAuD,CAE3F,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAA+C;QAA7C,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IACxC,IAAA,KAA4B,QAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,QAAA,EAAE,YAAY,QAAe,CAAC;IAC9C,IAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,MAAC,kBAAkB,eACjB,KAAC,eAAe,cACb,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG,IAAK,OAAA,CAC1B,KAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EAExB,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,GAAG,CAAC,EAAjB,CAAiB,EAChC,UAAU,EAAE,GAAG,KAAK,SAAS,YAE5B,OAAO,IAJH,OAAO,CAKE,CACjB,EAT2B,CAS3B,CAAC,GACc,EACjB,gBAAgB,CAAC,SAAS,CAAC,IACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file diff --git a/dist/esm/stories/TabLayout.stories.js b/dist/esm/stories/TabLayout.stories.js new file mode 100644 index 00000000..63c8af07 --- /dev/null +++ b/dist/esm/stories/TabLayout.stories.js @@ -0,0 +1,11 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import TabLayout from '../components/TabLayout'; +var meta = { + title: 'TabLayout', + component: TabLayout +}; +export default meta; +export var Default = { + render: function () { return (_jsxs(TabLayout, { tabs: ['항목 1', '항목 2', '항목 3'], bordercolor: 'blue', children: [_jsx("div", { children: "\uCF58\uD150\uCE20 11" }), _jsx("div", { children: "\uCF58\uD150\uCE20 22" }), _jsx("div", { children: "\uCF58\uD150\uCE20 33" })] })); } +}; +//# sourceMappingURL=TabLayout.stories.js.map \ No newline at end of file diff --git a/dist/esm/stories/TabLayout.stories.js.map b/dist/esm/stories/TabLayout.stories.js.map new file mode 100644 index 00000000..3cbc5ad2 --- /dev/null +++ b/dist/esm/stories/TabLayout.stories.js.map @@ -0,0 +1 @@ +{"version":3,"file":"TabLayout.stories.js","sourceRoot":"","sources":["../../../src/stories/TabLayout.stories.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAEhD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACY,CAAC;AAEnC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,MAAM,EAAE,cAAM,OAAA,CAAC,MAAC,SAAS,IAAC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,EAAE,MAAM,aAC7E,kDAAiB,EACjB,kDAAiB,EACjB,kDAAiB,IACP,CAAC,EAJG,CAIH;CACZ,CAAC"} \ No newline at end of file From 08fe8683a98a4759162ed97ba5d267d2c4f12e77 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 18:07:12 +0900 Subject: [PATCH 11/14] =?UTF-8?q?docs:=20README=20=EC=B5=9C=EC=8B=A0?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index f9e57317..8dfdf49c 100644 --- a/README.md +++ b/README.md @@ -130,3 +130,27 @@ Grid 컴포넌트에 속하는 아이템입니다. 각 요소가 그리드에서 E ``` + +# TabLayout + +## 설명 + +TabBar가 존재하는 레이아웃입니다. 상단의 Tab으로 이동할 수 있습니다. + +Tab Layout의 크기는 부모의 크기를 상속받습니다. + +## 속성 + +`tabs: string[]` : 요소를 선택해 콘텐츠를 이동할 수 있는 Tab Header에 표시될 문자열 배열 값입니다. + +`children: ReactElement` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다. + +## 사용 예시 + +```tsx + +
콘텐츠 11
+
콘텐츠 22
+
콘텐츠 33
+ +``` \ No newline at end of file From cd611f15fc76130abeb64b429b4bf787054594c2 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 24 Sep 2023 18:12:19 +0900 Subject: [PATCH 12/14] 1.2.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9fca0d32..c8efb7b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "yunseong-layout-component", - "version": "1.1.5", + "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "yunseong-layout-component", - "version": "1.1.5", + "version": "1.2.0", "license": "MIT", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index ecf60633..9e124925 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yunseong-layout-component", - "version": "1.1.5", + "version": "1.2.0", "description": "yunseong's layout components", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", From 3639aa896dd106b7a8544c6b6fd3067e8df4fcd0 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 1 Oct 2023 01:21:04 +0900 Subject: [PATCH 13/14] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 +++++--- dist/esm/components/TabLayout/index.js | 8 ++++---- dist/esm/components/TabLayout/index.js.map | 2 +- src/components/TabLayout/index.tsx | 9 ++++++--- src/stories/TabLayout.mdx | 8 +++++--- 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 8dfdf49c..fa58f8d0 100644 --- a/README.md +++ b/README.md @@ -143,14 +143,16 @@ Tab Layout의 크기는 부모의 크기를 상속받습니다. `tabs: string[]` : 요소를 선택해 콘텐츠를 이동할 수 있는 Tab Header에 표시될 문자열 배열 값입니다. -`children: ReactElement` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다. +`children: ReactElement[]` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다. + +`bordercolor: CSSProperties['color']` : 탭바의 헤더의 밑줄의 색깔을 정의합니다. ## 사용 예시 ```tsx - +
콘텐츠 11
콘텐츠 22
콘텐츠 33
 -``` \ No newline at end of file +``` diff --git a/dist/esm/components/TabLayout/index.js b/dist/esm/components/TabLayout/index.js index 8c5cf1ef..d721a431 100644 --- a/dist/esm/components/TabLayout/index.js +++ b/dist/esm/components/TabLayout/index.js @@ -6,16 +6,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Children, useState } from 'react'; import styled from 'styled-components'; var TabLayoutContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"]))); -var TabLayoutHeader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"]))); +var TabLayoutHeader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n overflow-x: scroll;\n"], ["\n display: flex;\n width: 100%;\n overflow-x: scroll;\n"]))); var TabHeaderItem = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 10px;\n ", ";\n cursor: pointer;\n"], ["\n padding: 10px;\n ", ";\n cursor: pointer;\n"])), function (_a) { - var isselected = _a.isselected, bordercolor = _a.bordercolor; - return isselected && "border-bottom: 3px solid ".concat(bordercolor); + var $isselected = _a.$isselected, bordercolor = _a.bordercolor; + return $isselected && "border-bottom: 3px solid ".concat(bordercolor); }); var TabLayout = function (_a) { var tabs = _a.tabs, children = _a.children, bordercolor = _a.bordercolor; var _b = useState(0), selectIdx = _b[0], setSelectIdx = _b[1]; var selectedChildren = Children.toArray(children); - return (_jsxs(TabLayoutContainer, { children: [_jsx(TabLayoutHeader, { children: tabs.map(function (element, idx) { return (_jsx(TabHeaderItem, { bordercolor: bordercolor, onClick: function () { return setSelectIdx(idx); }, isselected: idx === selectIdx, children: element }, element)); }) }), selectedChildren[selectIdx]] })); + return (_jsxs(TabLayoutContainer, { children: [_jsx(TabLayoutHeader, { children: tabs.map(function (element, idx) { return (_jsx(TabHeaderItem, { bordercolor: bordercolor, onClick: function () { return setSelectIdx(idx); }, "$isselected": idx === selectIdx, children: element }, element)); }) }), selectedChildren[selectIdx]] })); }; export default TabLayout; var templateObject_1, templateObject_2, templateObject_3; diff --git a/dist/esm/components/TabLayout/index.js.map b/dist/esm/components/TabLayout/index.js.map index 493e7ac9..e3e7ffcb 100644 --- a/dist/esm/components/TabLayout/index.js.map +++ b/dist/esm/components/TabLayout/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TabLayout/index.tsx"],"names":[],"mappings":";;;;;AAAA,OAAO,EAAE,QAAQ,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,MAAyB,MAAM,mBAAmB,CAAC;AAa1D,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,oIAAA,iEAIpC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,yFAAA,sBAEjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,sHAAoB,wBAEhD,EAAwF,yBAE3F,KAFG,UAAC,EAA2B;QAAzB,UAAU,gBAAA,EAAE,WAAW,iBAAA;IAAO,OAAA,UAAU,IAAI,mCAA4B,WAAW,CAAE;AAAvD,CAAuD,CAE3F,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAA+C;QAA7C,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IACxC,IAAA,KAA4B,QAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,QAAA,EAAE,YAAY,QAAe,CAAC;IAC9C,IAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,MAAC,kBAAkB,eACjB,KAAC,eAAe,cACb,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG,IAAK,OAAA,CAC1B,KAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EAExB,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,GAAG,CAAC,EAAjB,CAAiB,EAChC,UAAU,EAAE,GAAG,KAAK,SAAS,YAE5B,OAAO,IAJH,OAAO,CAKE,CACjB,EAT2B,CAS3B,CAAC,GACc,EACjB,gBAAgB,CAAC,SAAS,CAAC,IACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TabLayout/index.tsx"],"names":[],"mappings":";;;;;AAAA,OAAO,EAAE,QAAQ,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,MAAyB,MAAM,mBAAmB,CAAC;AAa1D,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,oIAAA,iEAIpC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,gIAAA,6DAIjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,sHAAoB,wBAEhD,EACwD,yBAE3D,KAHG,UAAC,EAA4B;QAA1B,WAAW,iBAAA,EAAE,WAAW,iBAAA;IAC3B,OAAA,WAAW,IAAI,mCAA4B,WAAW,CAAE;AAAxD,CAAwD,CAE3D,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAA+C;QAA7C,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IACxC,IAAA,KAA4B,QAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,QAAA,EAAE,YAAY,QAAe,CAAC;IAC9C,IAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,MAAC,kBAAkB,eACjB,KAAC,eAAe,cACb,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG,IAAK,OAAA,CAC1B,KAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EAExB,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,GAAG,CAAC,EAAjB,CAAiB,iBACnB,GAAG,KAAK,SAAS,YAE7B,OAAO,IAJH,OAAO,CAKE,CACjB,EAT2B,CAS3B,CAAC,GACc,EACjB,gBAAgB,CAAC,SAAS,CAAC,IACT,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} \ No newline at end of file diff --git a/src/components/TabLayout/index.tsx b/src/components/TabLayout/index.tsx index 9c835c30..82a39b53 100644 --- a/src/components/TabLayout/index.tsx +++ b/src/components/TabLayout/index.tsx @@ -8,7 +8,7 @@ interface TabLayoutProps { } interface TabHeaderItemProps { - isselected: boolean; + $isselected: boolean; bordercolor: CSSProperties['color']; } @@ -20,11 +20,14 @@ const TabLayoutContainer = styled.div` const TabLayoutHeader = styled.div` display: flex; + width: 100%; + overflow-x: scroll; `; const TabHeaderItem = styled.div` padding: 10px; - ${({ isselected, bordercolor }) => isselected && `border-bottom: 3px solid ${bordercolor}`}; + ${({ $isselected, bordercolor }) => + $isselected && `border-bottom: 3px solid ${bordercolor}`}; cursor: pointer; `; @@ -40,7 +43,7 @@ const TabLayout = ({ tabs, children, bordercolor }: TabLayoutProps) => { bordercolor={bordercolor} key={element} onClick={() => setSelectIdx(idx)} - isselected={idx === selectIdx} + $isselected={idx === selectIdx} > {element} diff --git a/src/stories/TabLayout.mdx b/src/stories/TabLayout.mdx index f26d15a3..2a4b5cd9 100644 --- a/src/stories/TabLayout.mdx +++ b/src/stories/TabLayout.mdx @@ -1,5 +1,5 @@ -import { Canvas, Meta } from "@storybook/blocks"; -import * as TabLayoutStories from "./TabLayout.stories"; +import { Canvas, Meta } from '@storybook/blocks'; +import * as TabLayoutStories from './TabLayout.stories'; @@ -17,10 +17,12 @@ Tab Layout의 크기는 부모의 크기를 상속받습니다. `children: ReactElement` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다. +`bordercolor: CSSProperties['color']` : 탭바의 헤더의 밑줄의 색깔을 정의합니다. + ## 사용 예시 ```tsx - +
콘텐츠 11
콘텐츠 22
콘텐츠 33
From d0dcd35470120bb00ca09ec90ba3aec1fdc89a3d Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Sun, 1 Oct 2023 01:21:12 +0900 Subject: [PATCH 14/14] 1.2.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c8efb7b6..f44e4ff1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "yunseong-layout-component", - "version": "1.2.0", + "version": "1.2.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "yunseong-layout-component", - "version": "1.2.0", + "version": "1.2.1", "license": "MIT", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index 9e124925..0bee3302 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yunseong-layout-component", - "version": "1.2.0", + "version": "1.2.1", "description": "yunseong's layout components", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js",