@tripie-pyotato/design-system 0.0.0

package/dist/src/components/index.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = exports.TripieImage = exports.Icon = exports.Container = exports.Card = exports.NoStyleButton = exports.MenuToggle = exports.AnimatedText = exports.AnimatedButton = exports.TextUnderLineAnimation = exports.TextFillAnimation = exports.Text = exports.Switch = exports.SplashScreen = exports.RotatingBlur = exports.ParticleField = exports.ParticleBackground = exports.MotionSlideUp = exports.List = exports.Link = exports.Headings = exports.Divider = exports.ChipMarker = exports.Chip = exports.Carousel = exports.Accordion = void 0;
+var Accordian_1 = require("./Accordian/Accordian");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordian_1.default; } });
+var Carousel_1 = require("./Carousel/Carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.default; } });
+var Chip_1 = require("./Chip/Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.default; } });
+var ChipMarker_1 = require("./ChipMarker");
+Object.defineProperty(exports, "ChipMarker", { enumerable: true, get: function () { return ChipMarker_1.default; } });
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.default; } });
+var Headings_1 = require("./Headings");
+Object.defineProperty(exports, "Headings", { enumerable: true, get: function () { return Headings_1.default; } });
+var Link_1 = require("./Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.default; } });
+var List_1 = require("./List/List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.default; } });
+var MotionSlideUp_1 = require("./MotionSlideUp");
+Object.defineProperty(exports, "MotionSlideUp", { enumerable: true, get: function () { return MotionSlideUp_1.default; } });
+var Background_1 = require("./Particle/Background");
+Object.defineProperty(exports, "ParticleBackground", { enumerable: true, get: function () { return Background_1.default; } });
+var Field_1 = require("./Particle/Field");
+Object.defineProperty(exports, "ParticleField", { enumerable: true, get: function () { return Field_1.default; } });
+var RotatingBlur_1 = require("./RotatingBlur");
+Object.defineProperty(exports, "RotatingBlur", { enumerable: true, get: function () { return RotatingBlur_1.default; } });
+var SplashScreen_1 = require("./SplashScreen/SplashScreen");
+Object.defineProperty(exports, "SplashScreen", { enumerable: true, get: function () { return SplashScreen_1.default; } });
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.default; } });
+var Text_1 = require("./Text/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.default; } });
+var TextFillAnimation_1 = require("./TextFill/TextFillAnimation");
+Object.defineProperty(exports, "TextFillAnimation", { enumerable: true, get: function () { return TextFillAnimation_1.default; } });
+var TextUnderlineAnimation_1 = require("./TextUnderlineAnimation");
+Object.defineProperty(exports, "TextUnderLineAnimation", { enumerable: true, get: function () { return TextUnderlineAnimation_1.default; } });
+var Animated_1 = require("./TripieButton/Animated");
+Object.defineProperty(exports, "AnimatedButton", { enumerable: true, get: function () { return Animated_1.default; } });
+Object.defineProperty(exports, "AnimatedText", { enumerable: true, get: function () { return Animated_1.default; } });
+var MenuToggle_1 = require("./TripieButton/MenuToggle");
+Object.defineProperty(exports, "MenuToggle", { enumerable: true, get: function () { return MenuToggle_1.default; } });
+var NoStyle_1 = require("./TripieButton/NoStyle");
+Object.defineProperty(exports, "NoStyleButton", { enumerable: true, get: function () { return NoStyle_1.default; } });
+var Card_1 = require("./TripieCard/Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.default; } });
+var TripieContainer_1 = require("./TripieContainer/TripieContainer");
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return TripieContainer_1.default; } });
+var Icon_1 = require("./TripieIcon/Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.default; } });
+var TripieImage_1 = require("./TripieImage/TripieImage");
+Object.defineProperty(exports, "TripieImage", { enumerable: true, get: function () { return TripieImage_1.default; } });
+var TripieSkeleton_1 = require("./TripieSkeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return TripieSkeleton_1.default; } });

package/dist/src/font.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var local_1 = require("next/font/local");
+var maruBuri = (0, local_1.default)({
+    src: [
+        {
+            path: './static/fonts/MaruBuri-Regular.woff2',
+            style: 'normal',
+        },
+    ],
+});
+exports.default = maruBuri;

package/dist/src/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useAppTheme"), exports);
+__exportStar(require("./useCycle"), exports);
+__exportStar(require("./useDrawer"), exports);

package/dist/src/hooks/useAppTheme.js

@@ -0,0 +1,33 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppTheme = void 0;
+var react_1 = require("react");
+var usehooks_ts_1 = require("usehooks-ts");
+var COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)';
+var THEME_MODE = {
+    DARK: 'dark',
+    LIGHT: 'light',
+    OS_DEFAULT: null,
+};
+var useAppTheme = function () {
+    var isDarkOS = (0, usehooks_ts_1.useMediaQuery)(COLOR_SCHEME_QUERY);
+    var _a = (0, usehooks_ts_1.useLocalStorage)('tripie-app-theme', THEME_MODE.OS_DEFAULT), themeMode = _a[0], setThemeMode = _a[1];
+    (0, react_1.useEffect)(function () {
+        var root = document === null || document === void 0 ? void 0 : document.documentElement;
+        if (themeMode == null) {
+            root.dataset.theme = isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT;
+        }
+        else {
+            root.dataset.theme = themeMode;
+        }
+    }, [themeMode, isDarkOS]);
+    return {
+        mode: themeMode,
+        toggle: function () {
+            setThemeMode(function (previous) { return (previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK); });
+        },
+        setMode: function (mode) { return setThemeMode(mode); },
+    };
+};
+exports.useAppTheme = useAppTheme;

package/dist/src/hooks/useCycle.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCycle = void 0;
+var react_1 = require("react");
+/**
+ * framer motion의 useCycle과 유사하게
+ * 가능한 스타일 states를 받아, 현재 스타일과 가능한 스타일들을 토글하는 기능을 합니다.
+ * 현재 스타일을 토글 시 인덱스로 가능한 스타일을 직접 접근해서 설정할 수 있습니다.
+ * ex.
+ * const [current, toggle] = useCycle(false,true,'custom');
+ * `current`은 false를 리턴하고, `toggle()`은  current를 true로, `toggle(2)`은'custom'로 설정합니다.
+ */
+var useCycle = function () {
+    var states = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        states[_i] = arguments[_i];
+    }
+    var possibleStates = (0, react_1.useState)(states)[0];
+    var _a = (0, react_1.useState)(possibleStates[0]), current = _a[0], setCurrent = _a[1];
+    var toggleState = function (index) {
+        if (index != null) {
+            setCurrent(current[index]);
+        }
+        else {
+            var filtered = possibleStates.filter(function (state) { return state !== current; });
+            setCurrent(filtered[0]);
+        }
+    };
+    return [current, toggleState];
+};
+exports.useCycle = useCycle;

package/dist/src/hooks/useDrawer.js

@@ -0,0 +1,21 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawer = void 0;
+var react_1 = require("react");
+var DRAWER_MODE = {
+    OPEN: true,
+    CLOSE: false,
+};
+var useDrawer = function () {
+    var _a = (0, react_1.useState)(DRAWER_MODE.CLOSE), isOpen = _a[0], setIsOpen = _a[1];
+    return {
+        isOpen: isOpen,
+        toggle: function () {
+            setIsOpen(function (previous) { return !previous; });
+        },
+        open: function () { return setIsOpen(DRAWER_MODE.OPEN); },
+        close: function () { return setIsOpen(DRAWER_MODE.CLOSE); },
+    };
+};
+exports.useDrawer = useDrawer;

package/dist/src/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./shared"), exports);

package/dist/src/shared/colors.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLORS = void 0;
+// 인라인으로 반드시 전해야할 스타일이나 프롭스로 써야할 경우에 상수로 참조
+exports.COLORS = {
+    0: '#ffffff',
+    30: '#d5ffcc40',
+    40: '#858585',
+    50: '#d3ffca',
+    100: '#102b1f',
+    200: '#0f0f0f',
+    300: '#d3ffca40',
+    400: '#232323',
+    500: '#080807',
+    600: '#22261e',
+    700: '#141712',
+    800: '#333333',
+    100000: '#08080700',
+};
+exports.default = exports.COLORS;

package/dist/src/shared/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./colors"), exports);
+__exportStar(require("./resource"), exports);
+__exportStar(require("./variants"), exports);

package/dist/src/shared/resource.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_RESOURCE = exports.RESOURCE = exports.ICON_URL = exports.LOADING_IMG = exports.PLACEHOLDER = void 0;
+exports.PLACEHOLDER = 'https://placehold.co/600x600?text=NO IMAGE';
+exports.LOADING_IMG = 'https://placehold.co/600x600?text=LOADING';
+exports.ICON_URL = '/icons';
+exports.RESOURCE = {
+    ARROW: '/arrow.png',
+    CHECK: '/check.png',
+    X: '/x.png',
+    REFRESH: '/refresh.png',
+    PLANE: '/plane.png',
+    CLOUD: '/cloud.png',
+    LOADING: '/loading.png',
+    TRAM: '/tram.png',
+    TRAIN: '/train.png',
+    WALK: '/walk.png',
+    SHIP: '/ship.png',
+    BUS: '/bus.png',
+    CAR: '/car.png',
+    FLAG: '/flag.png',
+    CURSOR: '/cursor.png',
+    NEXT: '/next.png',
+};
+var ICON_RESOURCE = function (key) { return exports.ICON_URL + exports.RESOURCE[key]; };
+exports.ICON_RESOURCE = ICON_RESOURCE;

package/dist/src/shared/variants.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHINE_VARIANT = exports.GLOW_VARIANT = exports.ACCORDIAN_VARIANTS = void 0;
+var colors_1 = require("./colors");
+var GLOW_VARIANT = {
+    rest: { boxShadow: 'none' },
+    glow: {
+        boxShadow: ["-2px 0px 10px 0px ".concat(colors_1.default[50]), "2px 0px 10px 0px ".concat(colors_1.default[50]), "0px 2px 10px 0px ".concat(colors_1.default[50])],
+        transition: {
+            duration: 0.8,
+            ease: 'circInOut',
+        },
+    },
+};
+exports.GLOW_VARIANT = GLOW_VARIANT;
+var SHINE_VARIANT = {
+    rest: { boxShadow: 'none' },
+    selected: {
+        backgroundColor: colors_1.default[100],
+        borderColor: colors_1.default[300],
+    },
+    shine: { backgroundColor: colors_1.default[100], borderColor: colors_1.default[300] },
+};
+exports.SHINE_VARIANT = SHINE_VARIANT;
+var ACCORDIAN_VARIANTS = {
+    DETAILS: {
+        closed: function () { return ({
+            height: '0%',
+            opacity: 0,
+        }); },
+        open: function () { return ({
+            transform: {
+                height: '100%',
+            },
+            transition: {
+                duration: 2,
+                bounce: 0,
+                damping: 2,
+                stiffness: 10,
+            },
+        }); },
+    },
+    BUTTON: {
+        closed: function () { return ({}); },
+        open: function () { return ({
+            rotate: '45deg',
+            transition: {
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+    },
+    DIVIDER: {
+        closed: function () { return ({
+            backgroundColor: colors_1.default[400],
+        }); },
+        open: function () { return ({
+            backgroundColor: colors_1.default[50],
+            transition: {
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+    },
+};
+exports.ACCORDIAN_VARIANTS = ACCORDIAN_VARIANTS;

package/dist/text/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./text";
+export * from "./typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/dist/text/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./text"), exports);
+__exportStar(require("./typography"), exports);

package/dist/text/text.d.ts

@@ -0,0 +1,47 @@
+import { PropsWithChildren } from "react";
+import { Property } from "csstype";
+import { MarginPadding } from "../common";
+interface Theme {
+    colors: {
+        mint: "#ffffff";
+        "my-color": "#fc0404";
+    };
+}
+interface GlobalSizes {
+    huge: "3rem";
+    large: "2.5rem";
+    big: "2rem";
+    tiny: "0.6rem";
+}
+export type TextProps = PropsWithChildren<{
+    alpha?: number;
+    bold?: boolean;
+    center?: boolean;
+    color?: keyof Theme["colors"] | string;
+    cursor?: Property.Cursor;
+    ellipsis?: boolean;
+    floated?: Property.Float;
+    inline?: boolean;
+    inlineBlock?: boolean;
+    letterSpacing?: number;
+    lineHeight?: number | string;
+    margin?: MarginPadding;
+    maxLines?: number;
+    padding?: MarginPadding;
+    size?: keyof GlobalSizes | number;
+    strikethrough?: boolean;
+    textAlign?: Property.TextAlign;
+    textStyle?: string;
+    underline?: boolean;
+    whiteSpace?: Property.WhiteSpace;
+    wordBreak?: Property.WordBreak;
+}>;
+export declare const Text: ({ children, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+interface TextTitleBaseProps {
+    margin?: MarginPadding;
+    as?: string;
+}
+export type TextTitleProps = PropsWithChildren<TextTitleBaseProps>;
+export declare function TextTitle({ children, margin, ...props }: TextTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=text.d.ts.map

package/dist/text/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,UAAU,KAAK;IACb,MAAM,EAAE;QACN,IAAI,EAAE,SAAS,CAAC;QAChB,UAAU,EAAE,SAAS,CAAC;KACvB,CAAC;CACH;AACD,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,QAAQ,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IACvC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,WAAW,GAAG,MAAM,CAAC;IAElC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC,CAAC;AAIH,eAAO,MAAM,IAAI,2BAA4B,SAAS,4CAOrD,CAAC;AAEF,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AAUnE,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAMvE"}

package/dist/text/text.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextTitle = exports.Text = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const text_module_scss_1 = __importDefault(require("./text.module.scss"));
+const style = bind_1.default.bind(text_module_scss_1.default);
+const Text = ({ children, ...props }) => {
+    // return <div className={style("text", { ...props })}>{children}</div>;
+    return ((0, jsx_runtime_1.jsx)("div", { className: style("text"), ...props, children: children }));
+};
+exports.Text = Text;
+const TextTitleBase = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: style("text-title-base"), ...props, children: children }));
+};
+function TextTitle({ children, margin, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(TextTitleBase, { as: "h1", margin: margin, ...props, children: children }));
+}
+exports.TextTitle = TextTitle;

package/dist/text/text.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./text";
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Custom: Story;
+export declare const StrikeThrough: Story;
+export declare const MaxLines: Story;
+//# sourceMappingURL=text.stories.d.ts.map

package/dist/text/text.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.stories.d.ts","sourceRoot":"","sources":["../../src/text/text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAW3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC"}

package/dist/text/text.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxLines = exports.StrikeThrough = exports.Custom = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const text_1 = require("./text");
+const meta = {
+    title: "tripie-ui/Text",
+    component: text_1.Text,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Text를 표현할때 사용하는 뷰 컴포넌트입니다.",
+            },
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    name: "default",
+    args: {
+        children: "텍스트",
+    },
+};
+exports.Custom = {
+    name: "custom",
+    args: {
+        bold: true,
+        color: "my-color",
+        size: 20,
+        children: "텍스트",
+    },
+};
+exports.StrikeThrough = {
+    name: "strike-through",
+    args: {
+        strikethrough: true,
+        bold: true,
+        color: "my-color",
+        size: 20,
+        children: "텍스트",
+    },
+};
+exports.MaxLines = {
+    args: {
+        maxLines: 2,
+        children: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\uAC01\uAE09 \uC120\uAC70\uAD00\uB9AC\uC704\uC6D0\uD68C\uB294 \uC120\uAC70\uC778\uBA85\uBD80\uC758 \uC791\uC131\uB4F1 \uC120\uAC70\uC0AC\uBB34\uC640 \uAD6D\uBBFC\uD22C\uD45C\uC0AC\uBB34\uC5D0 \uAD00\uD558\uC5EC \uAD00\uACC4 \uD589\uC815\uAE30\uAD00\uC5D0 \uD544\uC694\uD55C \uC9C0\uC2DC\uB97C \uD560 \uC218 \uC788\uB2E4. \uBAA8\uB4E0 \uAD6D\uBBFC\uC758 \uC7AC\uC0B0\uAD8C\uC740 \uBCF4\uC7A5\uB41C\uB2E4. \uADF8 \uB0B4\uC6A9\uACFC \uD55C\uACC4\uB294 \uBC95\uB960\uB85C \uC815\uD55C\uB2E4. \uAD6D\uD68C\uC758\uC6D0\uC740 \uD604\uD589\uBC94\uC778\uC778 \uACBD\uC6B0\uB97C \uC81C\uC678\uD558\uACE0\uB294 \uD68C\uAE30\uC911 \uAD6D\uD68C\uC758 \uB3D9\uC758\uC5C6\uC774 \uCCB4\uD3EC \uB610\uB294 \uAD6C\uAE08\uB418\uC9C0 \uC544\uB2C8\uD55C\uB2E4. \uB300\uBC95\uC6D0\uACFC \uAC01\uAE09\uBC95\uC6D0\uC758 \uC870\uC9C1\uC740 \uBC95\uB960\uB85C \uC815\uD55C\uB2E4. \uB300\uD55C\uBBFC\uAD6D\uC758 \uACBD\uC81C\uC9C8\uC11C\uB294 \uAC1C\uC778\uACFC \uAE30\uC5C5\uC758 \uACBD\uC81C\uC0C1\uC758 \uC790\uC720\uC640 \uCC3D\uC758\uB97C \uC874\uC911\uD568\uC744 \uAE30\uBCF8\uC73C\uB85C \uD55C\uB2E4." })),
+    },
+};

package/dist/text/typography.d.ts

@@ -0,0 +1,18 @@
+import * as CSS from "csstype";
+import { TextProps } from "./text";
+export type H1Props = TextProps & {
+    href?: string;
+    headline?: string;
+    emphasize?: boolean;
+    textAlign?: CSS.Property.TextAlign;
+};
+export type H2Props = TextProps;
+export type H3Props = TextProps;
+export type H4Props = TextProps;
+export type ParagraphProps = TextProps;
+export declare function H1({ href, headline, emphasize, textAlign, children, ...props }: H1Props): import("react/jsx-runtime").JSX.Element;
+export declare function H2({ children, ...props }: H2Props): import("react/jsx-runtime").JSX.Element;
+export declare function H3({ children, ...props }: H3Props): import("react/jsx-runtime").JSX.Element;
+export declare function H4({ children, ...props }: H4Props): import("react/jsx-runtime").JSX.Element;
+export declare function Paragraph({ children, ...props }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=typography.d.ts.map

package/dist/text/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/text/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,SAAS,CAAC;AAE/B,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,SAAS,CAAC;AAChC,MAAM,MAAM,OAAO,GAAG,SAAS,CAAC;AAChC,MAAM,MAAM,OAAO,GAAG,SAAS,CAAC;AAChC,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,wBAAgB,EAAE,CAAC,EACjB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,OAAO,2CAaT;AAED,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,2CAMjD;AAED,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,2CAMjD;AAED,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,2CAMjD;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAM/D"}

package/dist/text/typography.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paragraph = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const text_1 = require("./text");
+function H1({ href, headline, emphasize, textAlign, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [headline && ((0, jsx_runtime_1.jsx)(text_1.Text, { center: true, bold: true, size: "tiny", color: "primary", margin: { bottom: 3 }, children: headline })), (0, jsx_runtime_1.jsx)(text_1.Text, { bold: true, center: true, size: "huge", color: emphasize ? "blue" : "gray", children: children })] }));
+}
+exports.H1 = H1;
+function H2({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { size: "big", color: "gray", ...props, children: children }));
+}
+exports.H2 = H2;
+function H3({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { bold: true, size: "large", color: "gray", ...props, children: children }));
+}
+exports.H3 = H3;
+function H4({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { bold: true, size: "large", color: "blue", ...props, children: children }));
+}
+exports.H4 = H4;
+function Paragraph({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { lineHeight: 1.63, alpha: 0.9, ...props, children: children }));
+}
+exports.Paragraph = Paragraph;

package/dist/text/typography.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { H1 } from "./typography";
+declare const meta: Meta<typeof H1>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=typography.stories.d.ts.map

package/dist/text/typography.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.stories.d.ts","sourceRoot":"","sources":["../../src/text/typography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,CAWzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/text/typography.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const typography_1 = require("./typography");
+const meta = {
+    title: "tripie-ui/Typography",
+    component: typography_1.H1,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Typography를 표현할때 사용하는 뷰 컴포넌트입니다.",
+            },
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    name: "default",
+    args: {
+        children: "H1",
+        href: "/",
+        headline: "headline",
+        emphasize: true,
+        textAlign: "center",
+    },
+};

package/dist/turbo/generators/config.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = generator;
+// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+function generator(plop) {
+    // A simple generator to add a new React component to the internal UI library
+    plop.setGenerator('react-component', {
+        description: 'Adds a new react component',
+        prompts: [
+            {
+                type: 'input',
+                name: 'name',
+                message: 'What is the name of the component?',
+            },
+        ],
+        actions: [
+            {
+                type: 'add',
+                path: 'src/{{kebabCase name}}.tsx',
+                templateFile: 'templates/component.hbs',
+            },
+            {
+                type: 'append',
+                path: 'package.json',
+                pattern: /"exports": {(?<insertion>)/g,
+                template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+            },
+        ],
+    });
+}

package/jest.config.cjs

@@ -0,0 +1,21 @@
+const { jestConfig } = require('@tripie-pyotato/jest');
+
+module.exports = jestConfig({
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        diagnostics: false,
+        tsconfig: '../../tsconfig.jest.json',
+        babelConfig: true,
+        isolatedModules: true,
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['./jest.setup.cjs'],
+  resolver: require.resolve('@tripie-pyotato/jest/resolver'),
+});