feat(packages): add a packages(next,ssr)

packages/travelmakers-design-next/.npmignore

@@ -0,0 +1,2 @@
+src/
+tsconfig.*

packages/travelmakers-design-next/README.md

@@ -0,0 +1,29 @@
+# @travelmakers/next
+
+## Installation
+```bash
+# With npm
+npm install @travelmakers/next
+
+# With yarn
+yarn add @travelmakers/next
+```
+
+## License
+@travelmakers/next is made available under the MIT License.
+
+## ✨ Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+<tr>
+      <td align="center"><a href="https://github.com/sgd122"><img src="https://avatars.githubusercontent.com/u/12554583?v=4?s=100" width="100px;" alt="Seong GiDong"/><br /><sub><b>Seong Gi Dong</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=sgd122" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/baegofda"><img src="https://avatars.githubusercontent.com/u/65588499?v=4" width="100px;" alt="Lee Junho"/><br /><sub><b> Lee Junho</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=baegofda" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/seoose"><img src="https://avatars.githubusercontent.com/u/118161196?v=4" width="100px;" alt="seoose"/><br /><sub><b>Seo Seyeong</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=roeniss" title="Code">💻</a></td>      
+      <td align="center"><a href="https://github.com/vvooXD"><img src="https://avatars.githubusercontent.com/u/24476559?v=4" width="100px;" alt="Woo Jeonghyun"/><br /><sub><b>Woo Jeonghyun</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=roeniss" title="Code">🎨</a></td>      
+    </tr>
+  </tbody>
+</table>

packages/travelmakers-design-next/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@travelmakers/next",
+  "version": "0.0.1",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "author": "Travelmakers. Inc.",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/travelmakers/dash.git",
+    "type": "git",
+    "directory": "packages/travelmakers-design-next"
+  },
+  "scripts": {
+    "build": "esno ../../scripts/build travelmakers-design-next"
+  },
+  "peerDependencies": {
+    "next": "*",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "dependencies": {
+    "@travelmakers/ssr": "^0.0.1"
+  }
+}

packages/travelmakers-design-next/src/createGetInitialProps.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import NextDocument, { DocumentContext } from "next/document";
+import { ServerStyles, createStylesServer } from "@travelmakers/ssr";
+
+export function createGetInitialProps() {
+  const stylesServer = createStylesServer();
+
+  return async function getInitialProps(ctx: DocumentContext) {
+    const initialProps = await NextDocument.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <ServerStyles html={initialProps.html} server={stylesServer} />
+        </>
+      ),
+    };
+  };
+}

packages/travelmakers-design-next/src/index.ts

@@ -0,0 +1,2 @@
+export * from "@travelmakers/ssr";
+export { createGetInitialProps } from "./createGetInitialProps";

packages/travelmakers-design-next/tsconfig.build.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+  "exclude": ["./lib", "./esm", "./cjs"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": ".",
+    "outDir": "lib",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "lib",
+    "composite": true,
+    "paths": {
+      "@travelmakers/ssr": ["../travelmakers-design-ssr/src"]
+    }
+  },
+  "references": [{ "path": "../travelmakers-design-ssr" }]
+}

packages/travelmakers-design-next/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+  "exclude": ["./lib", "./esm", "./cjs"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": ".",
+    "outDir": "lib",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "lib",
+    "composite": true,
+    "paths": {
+      "@travelmakers/ssr": ["../travelmakers-design-ssr/src"]
+    }
+  },
+  "references": [{ "path": "../travelmakers-design-ssr" }]
+}

packages/travelmakers-design-ssr/.npmignore

@@ -0,0 +1,2 @@
+src/
+tsconfig.*

packages/travelmakers-design-ssr/README.md

@@ -0,0 +1,31 @@
+# @travelmakers/ssr
+
+## Installation
+
+```bash
+# With npm
+npm install @travelmakers/ssr
+
+# With yarn
+yarn add @travelmakers/ssr
+```
+
+## License
+
+@travelmakers/ssr is made available under the MIT License.
+
+## ✨ Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+<tr>
+      <td align="center"><a href="https://github.com/sgd122"><img src="https://avatars.githubusercontent.com/u/12554583?v=4?s=100" width="100px;" alt="Seong GiDong"/><br /><sub><b>Seong Gi Dong</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=sgd122" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/baegofda"><img src="https://avatars.githubusercontent.com/u/65588499?v=4" width="100px;" alt="Lee Junho"/><br /><sub><b> Lee Junho</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=baegofda" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/seoose"><img src="https://avatars.githubusercontent.com/u/118161196?v=4" width="100px;" alt="seoose"/><br /><sub><b>Seo Seyeong</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=roeniss" title="Code">💻</a></td>      
+      <td align="center"><a href="https://github.com/vvooXD"><img src="https://avatars.githubusercontent.com/u/24476559?v=4" width="100px;" alt="Woo Jeonghyun"/><br /><sub><b>Woo Jeonghyun</b></sub></a><br /><a href="https://github.com/brave-people/Dev-Event/commits?author=roeniss" title="Code">🎨</a></td>      
+    </tr>
+  </tbody>
+</table>

packages/travelmakers-design-ssr/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@travelmakers/ssr",
+  "version": "0.0.1",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "author": "Travelmakers. Inc.",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/travelmakers/dash.git",
+    "type": "git",
+    "directory": "packages/travelmakers-design-ssr"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "scripts": {
+    "build": "esno ../../scripts/build travelmakers-design-ssr"
+  },
+  "dependencies": {
+    "@travelmakers/styles": "^0.0.7",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/serialize": "^1.0.2",
+    "@emotion/server": "^11.4.0",
+    "@emotion/utils": "^1.0.0",
+    "csstype": "^3.0.10",
+    "html-react-parser": "^1.4.3"
+  }
+}

packages/travelmakers-design-ssr/src/ServerStyles.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { EmotionServer } from '@emotion/server/create-instance';
+import htmlReactParser from 'html-react-parser';
+import { getSSRStyles } from './getSsrStyles';
+
+interface ServerStylesProps {
+  html: string;
+  server: EmotionServer;
+}
+
+export function ServerStyles({ html, server }: ServerStylesProps) {
+  const styles = getSSRStyles(html, server);
+  return <>{htmlReactParser(styles)}</>;
+}

packages/travelmakers-design-ssr/src/createStylesServer.ts

@@ -0,0 +1,6 @@
+import createEmotionServer from "@emotion/server/create-instance";
+import { getCache } from "@travelmakers/styles";
+
+export function createStylesServer() {
+  return createEmotionServer(getCache());
+}

packages/travelmakers-design-ssr/src/getSsrStyles.ts

@@ -0,0 +1,5 @@
+import type { EmotionServer } from '@emotion/server/create-instance';
+
+export function getSSRStyles(html: string, server: EmotionServer) {
+  return server.constructStyleTagsFromChunks(server.extractCriticalToChunks(html));
+}

packages/travelmakers-design-ssr/src/index.ts

@@ -0,0 +1,4 @@
+export { getSSRStyles } from './getSsrStyles';
+export { ServerStyles } from './ServerStyles';
+export { createStylesServer } from './createStylesServer';
+export { injectStylesIntoStaticMarkup } from './injectStylesIntoStaticMarkup';

packages/travelmakers-design-ssr/src/injectStylesIntoStaticMarkup.ts

@@ -0,0 +1,8 @@
+import { createStylesServer } from './createStylesServer';
+import { getSSRStyles } from './getSsrStyles';
+
+const server = createStylesServer();
+
+export function injectStylesIntoStaticMarkup(markup: string) {
+  return markup.replace('<head>', `<head>${getSSRStyles(markup, server)}`);
+}

packages/travelmakers-design-ssr/tsconfig.build.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+  "exclude": ["./lib", "./esm", "./cjs"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": ".",
+    "outDir": "lib",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "lib",
+    "composite": true,
+    "paths": {
+      "@travelmakers/styles": ["../travelmakers-design-styles/src"]
+    }
+  },
+  "references": [{ "path": "../travelmakers-design-styles" }]
+}

packages/travelmakers-design-ssr/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+  "exclude": ["./lib", "./esm", "./cjs"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": ".",
+    "outDir": "lib",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "lib",
+    "composite": true,
+    "paths": {
+      "@travelmakers/styles": ["../travelmakers-design-styles/src"]
+    }
+  },
+  "references": [{ "path": "../travelmakers-design-styles" }]
+}

yarn.lock

@@ -4988,6 +4988,11 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
+csstype@^3.0.10:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 csstype@^3.0.2, csstype@^3.0.9:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
@@ -5221,7 +5226,7 @@ domelementtype@^2.0.1, domelementtype@^2.2.0:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
-domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
+domhandler@4.3.1, domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
   integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
@@ -5364,6 +5369,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 entities@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
@@ -6721,6 +6731,14 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-1.2.0.tgz#8f689b835982ffbf245eda99730e92b8462c111e"
+  integrity sha512-2HIpFMvvffsXHFUFjso0M9LqM+1Lm22BF+Df2ba+7QHJXjk63pWChEnI6YG27eaWqUdfnh5/Vy+OXrNTtepRsg==
+  dependencies:
+    domhandler "4.3.1"
+    htmlparser2 "7.2.0"
+
 html-entities@^2.1.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
@@ -6744,6 +6762,16 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-react-parser@^1.4.3:
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-1.4.14.tgz#577b7a90be0c61eebbbc488d914ad08398c79ef5"
+  integrity sha512-pxhNWGie8Y+DGDpSh8cTa0k3g8PsDcwlfolA+XxYo1AGDeB6e2rdlyv4ptU9bOTiZ2i3fID+6kyqs86MN0FYZQ==
+  dependencies:
+    domhandler "4.3.1"
+    html-dom-parser "1.2.0"
+    react-property "2.0.0"
+    style-to-js "1.1.1"
+
 html-tags@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
@@ -6780,6 +6808,16 @@ html-webpack-plugin@^4.0.0:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
+[email protected]:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
+  integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.2"
+    domutils "^2.8.0"
+    entities "^3.0.1"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -9357,6 +9395,11 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+[email protected]:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
+  integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -10488,6 +10531,13 @@ style-loader@^1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+[email protected]:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.1.tgz#417786986cda61d4525c80aed9d1123a6a7af9b8"
+  integrity sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==
+  dependencies:
+    style-to-object "0.3.0"
+
 [email protected], style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"