(#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

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import path from "path";
 import { mergeConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
@@ -14,6 +15,17 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          include: [path.resolve(__dirname, '../src')],
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        },
+      }
+    },
   ],
   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: {

package.json

@@ -1,17 +1,41 @@
 {
   "name": "bbodek-ui",
-  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.48",
   "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": {
+    "@types/node": "20.8.10",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
   "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(
     <>

src/index.tsx → src/index.ts

@@ -11,4 +11,5 @@ export { default as GeneralTab } from "@/core/components/Tab/GeneralTab/GeneralT
 export { default as GeneralTabItem } from "@/core/components/Tab/GeneralTab/GeneralTabItem";
 export { default as TableTab } from "@/core/components/Tab/TableTab/TableTab";
 export { default as TableTabItem } from "@/core/components/Tab/TableTab/TableTabItem";
+export { default as Tooltip } from "@/core/components/Tooltip";
 export { default as Typography } from "@/core/components/Typography";

src/styles/bbodek-theme.css

@@ -0,0 +1,49 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .flex-h-stack {
+    @apply flex flex-row;
+  }
+
+  .flex-v-stack {
+    @apply flex flex-col;
+  }
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-display: swap;
+  src: local("Pretendard"),
+        url("./fonts/Pretendard-Regular.woff2") format("woff2"), 
+        url("./fonts/Pretendard-Regular.woff") format("woff"),
+        url("./fonts/Pretendard-Regular.otf") format("opentype"); 
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 500;
+  font-display: swap;
+  src: local("Pretendard"),
+        url("./fonts/Pretendard-Medium.woff2") format("woff2"), 
+        url("./fonts/Pretendard-Medium.woff") format("woff"),
+        url("./fonts/Pretendard-Medium.otf") format("opentype"); 
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 700;
+  font-display: swap;
+  src: local("Pretendard"),
+        url("./fonts/Pretendard-Bold.woff2") format("woff2"), 
+        url("./fonts/Pretendard-Bold.woff") format("woff"),
+        url("./fonts/Pretendard-Bold.otf") format("opentype"); 
+}
+
+@layer base {
+  html {
+    font-family: "Pretendard", system-ui, sans-serif;
+  }
+}

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import("tailwindcss").Config} */
 export default {
-  content: [ "./src/**/*.{ts,tsx}", "./src/**/*.stories.tsx" ],
+  content: [ "./src/**/*.{js,jsx,ts,tsx}", "./src/**/*.stories.tsx", "./node_modules/bbodek-ui/dist/**.{js,ts,jsx,tsx}" ],
   theme: {
     extend: {
       colors: {
@@ -197,7 +197,6 @@ export default {
           "100%": { transform: "translateY(0)" },
         },
       },
-      },
       borderRadius: {
         default: "1.25rem",
       },

tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+  },
+  "exclude": ["node_modules", "**/*.stories.tsx"]
+}

tsconfig.dev.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig",
+  "exclude": ["node_modules", "dist"]
+}