maru_design2 0.0.1

package/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic" }
+    ],
+    ["@babel/preset-typescript"]
+  ],
+}

package/.eslintrc.json

@@ -0,0 +1,110 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["react", "@typescript-eslint", "prettier", "simple-import-sort"],
+  "rules": {
+    "no-tabs": [
+      "error",
+      {
+        "allowIndentationTabs": true
+      }
+    ],
+    "no-mixed-spaces-and-tabs": 0,
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        "groups": [
+          ["^react", "^(?!src)(?=@?\\w)"],
+          [
+            "constants",
+            "hooks",
+            "reducers",
+            "routes",
+            "store",
+            "types",
+            "utils"
+          ],
+          [
+            "views",
+            "^\\.\\.(?!/?$)",
+            "^\\.\\./?$",
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$",
+            "components"
+          ],
+          ["assets", "^.+\\.s?css$"]
+        ]
+      }
+    ],
+    "import/order": "off",
+    "import/extensions": [
+      "off",
+      {
+        "ts": "always",
+        "tsx": "always",
+        "js": "always",
+        "jsx": "always"
+      }
+    ],
+    "import/no-unresolved": "off",
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [".ts", ".tsx"]
+      }
+    ],
+    "react/destructuring-assignment": 0,
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "optionalDependencies": true,
+        "peerDependencies": true
+      }
+    ],
+    "linebreak-style": "off",
+    "object-curly-newline": "off",
+    "comma-dangle": "off",
+    "react/prop-types": "off",
+    "operator-linebreak": "off",
+    "import/prefer-default-export": "warn",
+    "no-console": "off",
+    "implicit-arrow-linebreak": "off",
+    "react/jsx-curly-newline": "off",
+    "no-param-reassign": [
+      "error",
+      {
+        "props": false
+      }
+    ],
+    "@typescript-eslint/ban-types": "warn",
+    "no-nested-ternary": "off",
+    "indent": "off",
+    "camelcase": "off",
+    "no-confusing-arrow": "off",
+    "function-paren-newline": "off",
+    "@typescript-eslint/no-empty-function": "warn",
+    "no-plusplus": "warn",
+    "react/jsx-wrap-multilines": "off",
+    "no-restricted-syntax": "off",
+    "no-await-in-loop": "off",
+    "react/require-default-props": [
+      1,
+      {
+        "functions": "ignore"
+      }
+    ],
+    "jsx-a11y/label-has-associated-control": [
+    2,
+    {
+      "labelAttributes": ["htmlFor"]
+    }
+    ]
+  }
+}

package/.github/workflows/chromatic.yml

@@ -0,0 +1,19 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic-release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: yarn
+      - uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80
+}

package/build-storybook.log

@@ -0,0 +1,29 @@
+yarn run v1.22.22
+$ storybook build --output-dir /var/folders/px/wfswfhnj2_96379m3pn48snm0000gn/T/chromatic--60662-3uZghrajfe3J
+@storybook/cli v8.0.6
+
+info => Cleaning outputDir: ../../../../../var/folders/px/wfswfhnj2_96379m3pn48snm0000gn/T/chromatic--60662-3uZghrajfe3J
+info => Loading presets
+info => Building manager..
+info => Manager built (106 ms)
+info => Building preview..
+WARN No story files found for the specified pattern: src/**/*.mdx
+info Addon-docs: using MDX3
+info => Using implicit CSS loaders
+info => Using default Webpack5 setup
+info Using tsconfig paths for react-docgen
+WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
+WARN This can impact web performance.
+WARN Assets: 
+WARN   841.8b90d07c.iframe.bundle.js (1.51 MiB)
+WARN   589.80a80dfc.iframe.bundle.js (628 KiB)
+WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+WARN Entrypoints:
+WARN   main (1.53 MiB)
+WARN       runtime~main.fb7a63fd.iframe.bundle.js
+WARN       841.8b90d07c.iframe.bundle.js
+WARN       main.26a48fe5.iframe.bundle.js
+WARN 
+info => Preview built (5.97 s)
+info => Output directory: /var/folders/px/wfswfhnj2_96379m3pn48snm0000gn/T/chromatic--60662-3uZghrajfe3J
+Done in 8.54s.

package/dist/components/atoms/button/Button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    /**
+     * this is color
+     */
+    color?: 'primary' | 'danger';
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/atoms/button/index.d.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/dist/hooks/useCombineRef.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from "react";
+/**
+ * 파라미터로 들어온 ref들을 generic type을 가진 ref로 바꾸는 hook
+ * ex. refs(주로 부모 refs)가 HTMLInputElement인 RefObject일 때,
+ * combineRef를 선언한 컴포넌트의 ref<T>로 바꿀때 사용.
+ * 참고 : RefObejct는 default로 null을 가지고, MutableRefObject는 그 외 다른 값을 가짐
+ * @param refs RefObject or function
+ * @returns RefObject
+ */
+declare const useCombineRef: <T>(...refs: (Ref<T> | undefined)[]) => import("react").RefObject<T>;
+export default useCombineRef;

package/dist/hooks/useCreatePortal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface CreatePortalProps {
+    parent: HTMLElement;
+    children: React.ReactNode;
+}
+declare const CreatePortal: ({ parent, children }: CreatePortalProps) => React.ReactPortal;
+export { CreatePortal };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components/atoms/button";

package/dist/index.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(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);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _b = _a.color,
+    color = _b === void 0 ? 'primary' : _b;
+  return jsx("button", __assign({
+    ref: ref,
+    type: "button",
+    style: {
+      backgroundColor: color === 'primary' ? 'skyblue' : 'pink'
+    }
+  }, {
+    children: children
+  }));
+});
+
+export { Button };

package/dist/utils/format.d.ts

@@ -0,0 +1,2 @@
+declare const noSpace: (text: string) => string;
+export { noSpace };

package/dist/utils/highlight.d.ts

@@ -0,0 +1,3 @@
+declare const setHighlightTextOnData: <T>(cb: (func: unknown) => void, data: T[], targetKey: string, compareText: string) => void;
+declare const setHighlightTextOnDataExceptSpace: <T>(data: T[], targetKey: string, compareText: string, autoExcept?: boolean) => typeof data;
+export { setHighlightTextOnData, setHighlightTextOnDataExceptSpace };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "maru_design2",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "author": "zena-42maru",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@storybook/addon-actions": "^8.0.6",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-webpack5": "^8.0.6",
+    "@storybook/test": "^8.0.6",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "chromatic": "^11.3.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^9.0.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "postcss": "^8.4.16",
+    "postcss-url": "^10.1.3",
+    "prettier": "^3.2.5",
+    "rollup": "^2.77.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "storybook": "^8.0.6",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.4"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rollup -c",
+    "release": "rm -rf dist && yarn build && mv README.md temp.md && yarn publish && mv temp.md README.md"
+  }
+}