@liner-fe/prism 1.0.2

package/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/lib/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  objectToArray: () => objectToArray
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils/object.ts
+var objectToArray = /* @__PURE__ */ __name((obj) => {
+  return Object.entries(obj);
+}, "objectToArray");
+/*! For license information please see index.cjs.LEGAL.txt */
+//# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/utils/object.ts"],
+  "sourcesContent": ["export * from './utils/object';\n", "export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n  return Object.entries(obj);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;",
+  "names": []
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './utils/object';

package/lib/index.mjs

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/utils/object.ts
+var objectToArray = /* @__PURE__ */ __name((obj) => {
+  return Object.entries(obj);
+}, "objectToArray");
+export {
+  objectToArray
+};
+/*! For license information please see index.mjs.LEGAL.txt */
+//# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utils/object.ts"],
+  "sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n  return Object.entries(obj);\n};\n"],
+  "mappings": ";;;;AAAO,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;",
+  "names": []
+}

package/lib/utils/object.d.ts

@@ -0,0 +1 @@
+export declare const objectToArray: <T extends Record<string, any>>(obj: T) => [string, any][];

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@liner-fe/prism",
+  "version": "1.0.2",
+  "packageManager": "yarn@3.6.0",
+  "scripts": {
+    "dev": "next dev",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "nanobundle build",
+    "build:package": "yarn build",
+    "prepack": "yarn build"
+  },
+  "dependencies": {
+    "@liner-fe/design-token": "workspace:^",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.13",
+    "next": "^13.4.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.7",
+    "@storybook/addon-interactions": "^8.1.7",
+    "@storybook/addon-links": "^8.1.7",
+    "@storybook/addon-onboarding": "^8.1.7",
+    "@storybook/blocks": "^8.1.7",
+    "@storybook/nextjs": "^8.1.7",
+    "@storybook/react": "^8.1.7",
+    "@storybook/test": "^8.1.7",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "autoprefixer": "^10.4.14",
+    "chromatic": "^11.5.3",
+    "nanobundle": "^1.6.0",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "sass": "^1.77.6",
+    "storybook": "^8.1.7",
+    "typescript": "^5.1.6"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "main": "./lib/index.cjs",
+  "types": "./lib/index.d.ts",
+  "maintainers": [
+    {
+      "name": "jake-liner",
+      "email": "jake@linercorp.com"
+    }
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "./lib/index.mjs"
+  }
+}

package/src/Configure.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/blocks';
+import Image from 'next/image';
+
+import Styling from './assets/design-token-cover.png';
+
+<Meta title="Liner 디자인 시스템 온보딩 문서" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Liner Design System에 오신 것을 환영합니다.
+
+    Liner Design System은 지속가능한 방식으로 디자인의 구성요소를 만듭니다.
+
+  </div>
+  <div>
+    <div>
+      <Image
+        src={Styling}
+        alt="A wall of logos representing different styling technologies"
+        width={200}
+        height={0}
+        style={{ width: '100%', height: 'auto', borderRadius: "10px" }}
+      />
+    </div>
+  </div>
+
+<h2 style={{ marginTop: '40px' }}>developer Guide</h2>
+
+    `npm i @liner-fe/design-token`
+
+  <p>마지막 수정자: 엘리엇 (2024. 06. 13)</p>
+</div>

package/src/design-token/border-radius/index.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SizeStories from './index.stories.ts';
+
+<Meta of={SizeStories} />
+
+<div>
+  <h1>Design Token: Border Radius 개발자 가이드</h1>
+</div>

package/src/design-token/border-radius/index.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Color } from './index';
+
+const meta = {
+  title: 'DesignToken/BorderRadius',
+  component: Color,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Color>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const All: Story = {};

package/src/design-token/border-radius/index.tsx

@@ -0,0 +1,29 @@
+import { radius } from '@liner-fe/design-token';
+
+import { objectToArray } from '../../utils/object';
+
+export const Color = () => (
+  <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+    {objectToArray(radius).map(([key, value]) => {
+      return (
+        <div
+          style={{
+            backgroundColor: '#ededed',
+            borderRadius: `${value}px`,
+            width: '150px',
+            height: '150px',
+            justifyContent: 'center',
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: '12px',
+            fontWeight: 'bold',
+          }}
+        >
+          <div>{key}</div>
+          <div style={{ fontSize: '12px' }}>{value}px</div>
+        </div>
+      );
+    })}
+  </div>
+);

package/src/design-token/color/index.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SizeStories from './index.stories.ts';
+
+<Meta of={SizeStories} />
+
+<div>
+  <h1>Design Token: Color 개발자 가이드</h1>
+</div>
+
+primitve, system로 위계가 나뉩니다.
+
+```ts
+const color = {
+  primitive,
+  system,
+};
+```
+
+primitive는 원시 값(hex값과 같은 실제 값)을 매핑 하고 있습니다. system은 시멘틱한 네이밍으로 primitive를 매핑하고 있습니다.
+
+그래서 대부분의 경우에는 system값을 사용해야하며, 불가피하게 primitive 값을 사용할 때는 프론트엔드 플래닛에 공유해주시길 바랍니다.
+
+<h2>스타일링 라이브러리</h2>
+
+<h3>CSS, SCSS</h3>
+
+플랫폼: liner-space
+
+<h3>CSS-in-js</h3>
+
+플랫폼: liner-web, liner-be
+
+<h3>React Native</h3>
+
+플랫폼: liner-mobile
+확인하지 않음
+
+<h2>DarkMode를 구현하는 방법</h2>

package/src/design-token/color/index.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Color } from './index';
+import { color } from '@liner-fe/design-token';
+
+const meta = {
+  title: 'DesignToken/Color',
+  component: Color,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Color>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const System: Story = {
+  args: {
+    type: 'system',
+  },
+};
+
+export const Primitive: Story = {
+  args: {
+    type: 'primitive',
+  },
+};

package/src/design-token/color/index.tsx

@@ -0,0 +1,30 @@
+import { objectToArray } from '@/utils/object';
+import { color, useDarkTheme, vars } from '@liner-fe/design-token';
+import { useEffect } from 'react';
+
+interface IProps {
+  type: 'primitive' | 'system';
+}
+
+export const Color = ({ type }: IProps) => {
+  const { toggleTheme } = useDarkTheme();
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', justifyContent: 'center', margin: '20px 0' }}>
+      <div>
+        <button onClick={toggleTheme}>Dark theme</button>
+        {document.documentElement.getAttribute('color-theme')}
+      </div>
+
+      {objectToArray(type === 'primitive' ? color.color.primitive : color.color.system).map(([key, value]) => (
+        <div
+          key={key}
+          style={{ width: 200, height: 250, border: '1px solid #ededed', borderRadius: 10, textAlign: 'center' }}
+        >
+          <div style={{ backgroundColor: value, height: 150, borderRadius: '10px 10px 0 0' }}></div>
+          {key} {value}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/design-token/opacity/index.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SizeStories from './index.stories.ts';
+
+<Meta of={SizeStories} />
+
+<div>
+  <h1>Design Token: Opacity 개발자 가이드</h1>
+</div>

package/src/design-token/opacity/index.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Opacity } from './index';
+
+const meta = {
+  title: 'DesignToken/Opacity',
+  component: Opacity,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Opacity>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const All: Story = {};

package/src/design-token/opacity/index.tsx

@@ -0,0 +1,3 @@
+import { color } from '@liner-fe/design-token';
+
+export const Opacity = () => <div></div>;

package/src/design-token/size/index.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SizeStories from './index.stories.ts';
+
+<Meta of={SizeStories} />
+
+<div>
+  <h1>Design Token: Size 개발자 가이드</h1>
+</div>

package/src/design-token/size/index.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Size } from './index';
+
+const meta = {
+  title: 'DesignToken/Size',
+  component: Size,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Size>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const All: Story = {};

package/src/design-token/size/index.tsx

@@ -0,0 +1,24 @@
+import { objectToArray } from '@/utils/object';
+import { size } from '@liner-fe/design-token';
+
+export const Size = () => (
+  <div>
+    {objectToArray(size).map(([key, value]) => {
+      return (
+        <div
+          style={{
+            backgroundColor: '#ededed',
+            width: `${value}px`,
+            height: `${value}px`,
+            justifyContent: 'center',
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: '12px',
+            fontWeight: 'bold',
+          }}
+        ></div>
+      );
+    })}
+  </div>
+);

package/src/design-token/typography/index.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SizeStories from './index.stories.ts';
+
+<Meta of={SizeStories} />
+
+<div>
+  <h1>Design Token: Typography 개발자 가이드</h1>
+</div>

package/src/design-token/typography/index.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from './index';
+
+const meta = {
+  title: 'DesignToken/Typography',
+  component: Typography,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const All: Story = {};

package/src/design-token/typography/index.tsx

@@ -0,0 +1,16 @@
+import { objectToArray } from '@/utils/object';
+import { Display, font } from '@liner-fe/design-token';
+
+export const Typography = () => (
+  <div>
+    {/* {objectToArray(font.size).map(([key, value]) => (
+      <div>
+        {key} {value}
+      </div>
+    ))} */}
+
+    <p style={{ fontSize: '16px', fontWeight: 500, fontFamily: 'pretendard', lineHeight: 26 }}>Blah Blah</p>
+
+    <Display type={'accent'}>Blah Blah</Display>
+  </div>
+);

package/src/index.ts

@@ -0,0 +1 @@
+export * from './utils/object';

package/src/utils/object.ts

@@ -0,0 +1,3 @@
+export const objectToArray = <T extends Record<string, any>>(obj: T) => {
+  return Object.entries(obj);
+};