(#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,27 @@
+# Workflow name
+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/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": {
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "@types/node": "20.8.10",
+ "@types/react": "18.2.0",
+ "@types/react-dom": "18.2.0"
+ },
  "dependencies": {
  "autoprefixer": "10.4.16",
  "clsx": "2.0.0",
@@ -50,8 +74,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"]
+}

tsconfig.json

@@ -1,23 +1,22 @@
 {
  "compilerOptions": {
+ "declaration": true,
  "target": "es2017",
  "lib": ["dom", "dom.iterable", "esnext"],
  "allowJs": true,
  "skipLibCheck": true,
  "strict": true,
- "noEmit": true,
+ "noEmit": false,
  "esModuleInterop": true,
  "module": "esnext",
  "moduleResolution": "bundler",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "jsx": "preserve",
- "incremental": true,
  "paths": {
  "@/*": ["./src/*"],
  "~/*": ["./public/*"]
  }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
 }