@reitwagen/design-components 0.0.1 → 0.0.2

package/dist/index.css

@@ -267,12 +267,21 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .table {
     display: table;
   }
+  .h-px {
+    height: 1px;
+  }
   .min-h-\[34px\] {
     min-height: 34px;
   }
@@ -282,6 +291,9 @@
   .min-h-\[52px\] {
     min-height: 52px;
   }
+  .w-full {
+    width: 100%;
+  }
   .min-w-\[200px\] {
     min-width: 200px;
   }
@@ -297,6 +309,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -312,6 +327,9 @@
   .gap-1\.5 {
     gap: calc(var(--spacing) * 1.5);
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .gap-5 {
     gap: calc(var(--spacing) * 5);
   }
@@ -367,6 +385,9 @@
   .px-\[24px\] {
     padding-inline: 24px;
   }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .py-\[8px\] {
     padding-block: 8px;
   }
@@ -502,6 +523,9 @@
     letter-spacing: var(--tw-tracking, var(--text-subtitle2--letter-spacing));
     font-weight: var(--tw-font-weight, var(--text-subtitle2--font-weight));
   }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
   .text-blue-300 {
     color: var(--color-blue-300);
   }
@@ -511,6 +535,9 @@
   .text-gray-300 {
     color: var(--color-gray-300);
   }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
   .text-gray-600 {
     color: var(--color-gray-600);
   }

package/dist/stories/Typography/Typography.d.ts

@@ -0,0 +1,2 @@
+export declare function Typography(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/stories/Typography/Typography.tsx"],"names":[],"mappings":"AAqDA,wBAAgB,UAAU,4CAwBzB"}

package/dist/stories/Typography/Typography.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = Typography;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("../../utils/style");
+const headings = {
+    "text-heading1": ["Heading1", 24, 1.4, "-2%", 600, "text-heading1"],
+    "text-heading2": ["Heading2", 22, 1.4, "-2%", 700, "text-heading2"],
+    "text-heading3": ["Heading3", 20, 1.4, "-2%", 700, "text-heading3"],
+    "text-heading4": ["Heading4", 18, 1.4, "-2%", 700, "text-heading4"],
+    "text-heading5": ["Heading5", 16, 1.4, "-2%", 700, "text-heading5"],
+};
+const subTitles = {
+    "text-subtitle1": ["Subtitle1", 16, 1.48, "-2%", 600, "text-subtitle1"],
+    "text-subtitle2": ["Subtitle2", 14, 1.48, "-2%", 600, "text-subtitle2"],
+};
+const bodys = {
+    "text-body1": ["Body1", 18, 1.48, "-4%", 500, "text-body1"],
+    "text-body2": ["Body2", 18, 1.48, "-4%", 400, "text-body2"],
+    "text-body3": ["Body3", 16, 1.48, "-4%", 500, "text-body3"],
+    "text-body4": ["Body4", 16, 1.48, "-4%", 400, "text-body4"],
+    "text-body5": ["Body5", 14, 1.48, "-4%", 500, "text-body5"],
+    "text-body6": ["Body6", 14, 1.48, "-4%", 400, "text-body6"],
+    "text-body7": ["Body7", 12, 1.48, "-4%", 500, "text-body7"],
+    "text-body8": ["Body8", 12, 1.48, "-4%", 400, "text-body8"],
+};
+const buttons = {
+    "text-button1": ["Button1", 16, 1.4, "-2%", 600, "text-button1"],
+    "text-button2": ["Button2", 14, 1.48, "-2%", 600, "text-button2"],
+};
+const captions = {
+    "text-caption1": ["Caption1", 12, 1.45, "-2%", 400, "text-caption1"],
+    "text-caption2": ["Caption2", 10, 1.45, "-2%", 400, "text-caption2"],
+    "text-caption3": ["Caption3", 10, 1.45, "-2%", 500, "text-caption3"],
+};
+function Rows({ data }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(data).map(([className, values]) => ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-6", children: values.map((value) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_1.cn)(className, "py-1"), children: value }, value))) }, className))) }));
+}
+function Divider() {
+    return (0, jsx_runtime_1.jsx)("div", { className: "h-px w-full bg-gray-100 my-3" });
+}
+function Typography() {
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-6 text-gray-500 text-[15px]", children: [(0, jsx_runtime_1.jsx)("span", { children: "Token" }), (0, jsx_runtime_1.jsx)("span", { children: "Font Size" }), (0, jsx_runtime_1.jsx)("span", { children: "Line Height" }), (0, jsx_runtime_1.jsx)("span", { children: "Letter Spacing" }), (0, jsx_runtime_1.jsx)("span", { children: "Font Weight" }), (0, jsx_runtime_1.jsx)("span", { children: "ClassName" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(Rows, { data: headings }), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(Rows, { data: subTitles }), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(Rows, { data: bodys }), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(Rows, { data: buttons }), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)(Rows, { data: captions })] })] }));
+}

package/dist/stories/Typography/Typography.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from "@storybook/react";
+import { Typography } from "./Typography";
+declare const meta: {
+    title: string;
+    component: typeof Typography;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Pretendard: Story;
+//# sourceMappingURL=Typography.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Typography/Typography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI;;;;;;;;;;;;CA4ByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC"}

package/dist/stories/Typography/Typography.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pretendard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("./Typography");
+const meta = {
+    title: "Foundation/Typography",
+    component: Typography_1.Typography,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+라이트바겐은 가독성이 높은 폰트를 사용해 유저들의 접근성을 강화하여 콘텐츠를 쉽게 이해할 수 있도록 합니다.
+
+Reitwagen uses highly readable fonts to enhance users' accessibility, making it easier to understand content.
+
+## <b>Font</b>
+
+라이트바겐은 기본 글꼴로 한국어, 영어를 모두 지원하는 Pretendard를 사용합니다.
+
+Reitwagen uses Pretendard as the primary typeface, supporting both Korean and English.
+
+## <b>Style<b>
+
+라이트바겐 타이포그래피는 5단계 위계에서 총 21개 하위 위계를 가지고 있습니다.
+
+Reitwagen typography has a total of 20 subhierarchies in five tiers.
+`,
+            },
+        },
+    },
+    argTypes: {},
+};
+exports.default = meta;
+exports.Pretendard = {
+    render: (props) => (0, jsx_runtime_1.jsx)(Typography_1.Typography, {}),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reitwagen/design-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "sideEffects": [
     "**/*.css"
   ],