(#53) NPM Publish

(#53) NPM Publish

.eslintignore

@@ -0,0 +1,2 @@
+dist/
+

.eslintrc.json

@@ -1,48 +1,46 @@
 {
- "env": {
- "browser": true,
- "es6": true,
- "node": true,
- "jest": true
- },
- "extends": [
- "plugin:@typescript-eslint/recommended"
- ],
- "parserOptions": {
- "ecmaVersion": "latest",
- "sourceType": "module"
- },
- "parser": "@typescript-eslint/parser",
- "plugins": [
- "@stylistic",
- "react"
- ],
- "rules": {
- "@stylistic/jsx-indent": ["error", 2],
- "@stylistic/quotes": ["error", "double"],
- "@stylistic/object-curly-spacing": ["error", "always"],
- "@stylistic/comma-dangle": ["error", "always-multiline"],
- "@stylistic/eol-last": ["error", "always"],
- "@stylistic/no-trailing-spaces": "error",
-// "@stylistic/no-var": "error",
- "@stylistic/no-multi-spaces": "error",
- "@stylistic/comma-spacing": ["error", { "before": false, "after": true }],
- "@stylistic/key-spacing": ["error", { "afterColon": true, "beforeColon": false }],
- "@stylistic/semi": ["error", "always"],
- "@stylistic/space-in-parens": ["error", "never"],
-// "@stylistic/curly": "error",
- "@stylistic/arrow-spacing": "error",
- "@stylistic/no-extra-semi": "error",
- "@stylistic/array-bracket-spacing": ["error","always",{"singleValue": false}],
- "@stylistic/comma-style": ["error","last"],
- "@stylistic/array-element-newline" : ["error","consistent"],
- "@stylistic/arrow-parens": ["error", "as-needed"],
- "@stylistic/block-spacing": "error",
- "@stylistic/brace-style": "error",
- "@stylistic/jsx-equals-spacing": [2, "always"],
- "@stylistic/function-call-argument-newline": ["error", "consistent"],
- "@stylistic/no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
- "react/jsx-first-prop-new-line": ["error", "multiline"],
- "@typescript-eslint/no-inferrable-types": "off"
- }
+ "env": {
+ "browser": true,
+ "es6": true,
+ "node": true,
+ "jest": true
+ },
+ "extends": [
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "parser": "@typescript-eslint/parser",
+ "plugins": [
+ "@stylistic",
+ "react"
+ ],
+ "rules": {
+ "@stylistic/jsx-indent": ["error", 2],
+ "@stylistic/quotes": ["error", "double"],
+ "@stylistic/object-curly-spacing": ["error", "always"],
+ "@stylistic/comma-dangle": ["error", "always-multiline"],
+ "@stylistic/eol-last": ["error", "always"],
+ "@stylistic/no-trailing-spaces": "error",
+ "@stylistic/no-multi-spaces": "error",
+ "@stylistic/comma-spacing": ["error", { "before": false, "after": true }],
+ "@stylistic/key-spacing": ["error", { "afterColon": true, "beforeColon": false }],
+ "@stylistic/semi": ["error", "always"],
+ "@stylistic/space-in-parens": ["error", "never"],
+ "@stylistic/arrow-spacing": "error",
+ "@stylistic/no-extra-semi": "error",
+ "@stylistic/array-bracket-spacing": ["error","always",{"singleValue": false}],
+ "@stylistic/comma-style": ["error","last"],
+ "@stylistic/array-element-newline" : ["error","consistent"],
+ "@stylistic/arrow-parens": ["error", "as-needed"],
+ "@stylistic/block-spacing": "error",
+ "@stylistic/brace-style": "error",
+ "@stylistic/jsx-equals-spacing": [2, "always"],
+ "@stylistic/function-call-argument-newline": ["error", "consistent"],
+ "@stylistic/no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
+ "react/jsx-first-prop-new-line": ["error", "multiline"],
+ "@typescript-eslint/no-inferrable-types": "off"
+ }
 }

.github/workflows/deploy-github-pages.yaml

@@ -0,0 +1,26 @@
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+ push:
+ branches:
+ - "chore/publish"
+
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+jobs:
+ deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: "16.x"
+ - uses: bitovi/[email protected]
+ with:
+ install_command: yarn install
+ build_command: yarn storybook:build
+ path: storybook-static
+ checkout: false

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+storybook-static

.storybook/main.ts

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
  "@storybook/addon-essentials",
  "@storybook/addon-onboarding",
  "@storybook/addon-interactions",
+ "@storybook/addon-storysource"
  ],
  framework: {
  name: "@storybook/react-vite",

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "../src/global.css";
+import "../src/styles/bbodek-theme.css";
 
 const preview: Preview = {
  parameters: {

README.md

@@ -1,27 +1,95 @@
-# React + TypeScript + Vite
+# bbodek-ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## 📦 Installation
 
-Currently, two official plugins are available:
+```bash
+# With npm
+npm install bbodek-ui
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+# With yarn
+yarn add bbodek-ui
+```
+
+## ⚙️ Setup
+Edit your `tailwind.config.ts` file:
+```ts
+// @ts-ignore
+import BbodekConfig from "bbodek-ui/tailwind.config.js";
+import type { Config } from 'tailwindcss';
 
-## Expanding the ESLint configuration
+const config: Config = {
+ ...BbodekConfig,
+ content: [
+ ...BbodekConfig.content,
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+}
+export default config
+```
+Edit your `_app.tsx` file:
+```tsx
+import "bbodek-ui/bbodek-theme.css"; // add bbodek-theme.css
+import type { AppProps } from 'next/app';
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+export default function App({ Component, pageProps }: AppProps) {
+ return <Component {...pageProps} />
+}
+```
 
-- Configure the top-level `parserOptions` property like this:
+## 🔗 Peer Dependencies
+bbodek-ui is designed to work alongside specific versions of certain peer dependencies. Ensure that your project has the following peer dependencies installed:
+```json
+"peerDependencies": {
+ "@types/react": "18.2.0",
+ "@types/react-dom": "18.2.0",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "tailwindcss": "3.3.5"
+}
+```
 
-```js
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
- tsconfigRootDir: __dirname,
- },
+### ✅ Resolving Peer Dependencies
+Add the following to your package.json to align your project with the required versions:
+```json
+"resolutions": {
+ "@types/react": "18.2.0",
+}
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## ✨ Usage
+```tsx
+import { Button } from "bbodek-ui";
+import { useState } from "react";
+
+export default function Home() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ <div id="modal"/>
+ <ModalPopUp 
+ className="w-[30rem] h-[30rem]" 
+ isOpen={isOpen} 
+ onClose={() => setIsOpen(false)}
+ >
+ Open ModalPopUp
+ </ModalPopUp>
+ <Button 
+ className="w-[20rem]" 
+ color="white" 
+ backgroundColor="primary-03" 
+ content="버튼 테스트" 
+ size="h-48" 
+ onClick={() => setIsOpen(true)}
+ />
+ <>
+ )
+}
+
+```
+
+## License
+
+bbodek-ui is made available under the MIT License.

package.json

@@ -1,17 +1,41 @@
 {
  "name": "bbodek-ui",
- "private": true,
- "version": "0.0.0",
+ "version": "0.0.52",
  "type": "module",
+ "author": "Bbodek",
+ "license": "MIT",
+ "files": [
+ "dist",
+ "tailwind.config.js",
+ "src/styles"
+ ],
+ "main": "dist/bbodek-ui.cjs.js",
+ "module": "dist/bbodek-ui.es.js",
+ "types": "dist/src/index.d.ts",
+ "exports": {
+ ".": {
+ "require": "./dist/bbodek-ui.cjs.js",
+ "import": "./dist/bbodek-ui.es.js"
+ },
+ "./bbodek-theme.css": "./src/styles/bbodek-theme.css",
+ "./tailwind.config.js": "./tailwind.config.js"
+ },
  "scripts": {
  "dev": "vite",
- "build": "tsc && vite build",
+ "build": "vite build && tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
  "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix",
  "preview": "vite preview",
  "storybook": "storybook dev -p 6006",
  "storybook:build": "storybook build"
  },
+ "peerDependencies": {
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "@types/react": "18.2.0",
+ "@types/react-dom": "18.2.0",
+ "tailwindcss": "3.3.5"
+ },
  "dependencies": {
  "autoprefixer": "10.4.16",
  "clsx": "2.0.0",
@@ -29,6 +53,7 @@
  "@storybook/addon-interactions": "7.5.2",
  "@storybook/addon-links": "7.5.2",
  "@storybook/addon-onboarding": "1.0.8",
+ "@storybook/addon-storysource": "7.5.3",
  "@storybook/blocks": "7.5.2",
  "@storybook/builder-vite": "7.5.2",
  "@storybook/react": "7.5.2",
@@ -50,8 +75,9 @@
  "eslint-plugin-react": "7.33.2",
  "eslint-plugin-react-hooks": "4.6.0",
  "eslint-plugin-storybook": "0.6.15",
- "storybook": "7.5.2",
+ "storybook": "7.5.3",
  "tailwind-merge": "2.0.0",
+ "tsc-alias": "1.8.8",
  "typescript": "5.0.2",
  "vite": "4.4.5",
  "vite-tsconfig-paths": "4.2.1"

src/core/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { JSX, PropsWithChildren, useId } from "react";
+import { PropsWithChildren, useId } from "react";
 import { PlacesType, Tooltip as ReactToolTip } from "react-tooltip";
 
 interface TooltipProps {
@@ -9,7 +9,7 @@ export default function Tooltip({
  tooltipContentText,
  placement = "top",
  children,
- }: PropsWithChildren<TooltipProps>): JSX.Element {
+ }: PropsWithChildren<TooltipProps>){
  const id = useId();
  return(
  <>