v1.0.5

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "macros",
+    ["module-resolver", {
+      "root": ["./"],
+      "alias": {
+        "library-template": "./src/components"
+      }
+    }]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,49 @@
+// devDependencies required
+// - eslint
+// - eslint-config-next
+// - eslint-config-standard
+// - eslint-plugin-import
+// - eslint-plugin-n
+// - eslint-plugin-promise
+// - eslint-plugin-react
+// - eslint-plugin-tailwindcss
+
+// command yarn install
+
+// yarn add -D eslint eslint-config-next eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-tailwindcss eslint-plugin-n
+
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "standard",
+    "plugin:tailwindcss/recommended"
+  ],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "tailwindcss"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "error",
+    "camelcase": "off",
+    "react-hooks/rules-of-hooks": "off",
+    "object-curly-spacing": [2, "always"],
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1,
+        "flatTernaryExpressions": true
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,132 @@
+# ---> Node
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+# dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false,
+  "search.exclude": {
+    "package-lock.json": true
+  },
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },  
+  "cSpell.words": [
+    "headlessui"
+  ]
+}

create-component-packages.cjs

@@ -0,0 +1,27 @@
+const fs = require('fs')
+const path = require('path')
+
+const componentsDir = path.resolve(__dirname, 'dist/components')
+
+fs.readdir(componentsDir, { withFileTypes: true }, (err, entries) => {
+  if (err) {
+    console.error('Error al leer el directorio de componentes:', err)
+    process.exit(1)
+  }
+
+  entries.forEach(entry => {
+    if (entry.isDirectory()) {
+      const componentDirPath = path.join(componentsDir, entry.name)
+      const packageJson = {
+        name: `${entry.name}`,
+        private: true,
+        module: './index.js',
+        main: './index.js',
+        types: './index.d.ts'
+      }
+
+      fs.writeFileSync(path.join(componentDirPath, 'package.json'), JSON.stringify(packageJson, null, 2))
+      console.log(`package.json creado para el componente ${entry.name}`)
+    }
+  })
+})

dist/components/button/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    title: string;
+    onClick?: () => void;
+}
+declare const Button: ({ title, onClick }: ButtonProps) => any;
+export default Button;

dist/components/button/index.js

@@ -0,0 +1,2 @@
+import{cn as t}from"../../lib/utils.js";import e from"react";var r=function(r){var i=r.title,l=r.onClick;return e.createElement("div",{className:t("bg-blue-500","text-white"),onClick:l},i)};export{r as default};
+//# sourceMappingURL=index.js.map

dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\r\nimport React from 'react'\r\ninterface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  title: string\r\n  onClick?: () => void\r\n}\r\n\r\nconst Button = ({ title, onClick }: ButtonProps) => {\r\n  return (\r\n    <div className={cn(\r\n      'bg-blue-500',\r\n      'text-white'\r\n    )}\r\n    onClick={onClick}\r\n    >\r\n      {title}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Button"],"names":["Button","_ref","title","onClick","React","createElement","className","cn"],"mappings":"6DAQA,IAAMA,EAAS,SAAHC,GAAuC,IAAjCC,EAAKD,EAALC,MAAOC,EAAOF,EAAPE,QACvB,OACEC,EAAKC,cAAA,MAAA,CAAAC,UAAWC,EACd,cACA,cAEFJ,QAASA,GAEND,EAGP"}

dist/components/button/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "button",
+  "private": true,
+  "module": "./index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+declare const Input: () => any;
+export default Input;

dist/components/input/index.js

@@ -0,0 +1,2 @@
+import t from"react";var e=function(){return t.createElement("div",null,"Input")};export{e as default};
+//# sourceMappingURL=index.js.map

dist/components/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import React from 'react'\r\n\r\nconst Input = () => {\r\n  return (\r\n    <div>Input</div>\r\n  )\r\n}\r\n\r\nexport default Input"],"names":["Input","React","createElement"],"mappings":"qBAEA,IAAMA,EAAQ,WACZ,OACEC,EAAgBC,cAAA,MAAA,KAAA,QAEpB"}

dist/components/input/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "input",
+  "private": true,
+  "module": "./index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './components/button';
+export { default as Input } from './components/input';
+export * from './lib/utils';

dist/index.js

@@ -0,0 +1,2 @@
+export{default as Button}from"./components/button/index.js";export{default as Input}from"./components/input/index.js";export{cn}from"./lib/utils.js";
+//# sourceMappingURL=index.js.map

dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

dist/lib/utils.d.ts

@@ -0,0 +1 @@
+export declare function cn(...inputs: any[]): string;

dist/lib/utils.js

@@ -0,0 +1,2 @@
+import r from"@babel/runtime/helpers/toConsumableArray";import e from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/helpers/typeof";import{twMerge as n}from"tailwind-merge";function o(){for(var o=arguments.length,i=new Array(o),l=0;l<o;l++)i[l]=arguments[l];var a=i.filter((function(r){return r})).flatMap((function(r){return"object"===t(r)?Object.entries(r).filter((function(r){return e(r,2)[1]})).map((function(r){return e(r,1)[0]})):r.split(" ")}));return n.apply(void 0,r(a))}export{o as cn};
+//# sourceMappingURL=utils.js.map

dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { twMerge } from 'tailwind-merge'\r\n\r\nexport function cn (...inputs) {\r\n  const classes = inputs\r\n    .filter((input) => input)\r\n    .flatMap((input) =>\r\n      typeof input === 'object'\r\n        ? Object.entries(input).filter(([, value]) => value).map(([key]) => key)\r\n        : input.split(' ')\r\n    )\r\n\r\n  return twMerge(...classes)\r\n}\r\n"],"names":["cn","_len","arguments","length","inputs","Array","_key","classes","filter","input","flatMap","_typeof","Object","entries","_ref","_slicedToArray","map","_ref3","split","twMerge","apply","_toConsumableArray"],"mappings":"kMAEgB,SAAAA,IAAa,IAAA,IAAAC,EAAAC,UAAAC,OAANC,EAAMC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAANF,EAAME,GAAAJ,UAAAI,GAC3B,IAAMC,EAAUH,EACbI,QAAO,SAACC,GAAK,OAAKA,CAAK,IACvBC,SAAQ,SAACD,GAAK,MACI,WAAjBE,EAAOF,GACHG,OAAOC,QAAQJ,GAAOD,QAAO,SAAAM,GAAS,OAATC,EAAAD,EAAA,GAAS,EAAW,IAAEE,KAAI,SAAAC,GAAK,OAALF,EAAAE,EAAA,GAAK,EAAS,IACrER,EAAMS,MAAM,QAGpB,OAAOC,EAAOC,aAAAC,EAAId,GACpB"}

generateRollupConfig.js

@@ -0,0 +1,53 @@
+const typescript = require('@rollup/plugin-typescript')
+const babel = require('@rollup/plugin-babel')
+const postcss = require('rollup-plugin-postcss')
+const tailwind = require('rollup-plugin-tailwindcss')
+const autoprefixer = require('autoprefixer')
+const resolve = require('@rollup/plugin-node-resolve')
+const commonjs = require('@rollup/plugin-commonjs')
+const { terser } = require('rollup-plugin-terser')
+const pkg = require('./package.json')
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  /@babel\/runtime/
+]
+
+const rollupConfig = {
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'esm',
+    sourcemap: true,
+    preserveModules: true,
+    preserveModulesRoot: 'src'
+  },
+  external,
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      declaration: true,
+      noEmitOnError: true
+    }),
+    babel({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      babelHelpers: 'runtime',
+      include: ['src/**/*'],
+      plugins: ['@babel/plugin-transform-runtime']
+    }),
+    postcss({
+      plugins: [autoprefixer()],
+      sourceMap: true,
+      extract: true,
+      minimize: true
+    }),
+    tailwind({
+      input: './styles/globals.css'
+    }),
+    terser()
+  ]
+}
+
+module.exports = rollupConfig

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "library-template",
+  "version": "1.0.5",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./button": "./dist/components/button/index.js",
+    "./input": "./dist/components/input/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "prop-types": "^15",
+    "react": "^16",
+    "react-dom": "^16"
+  },
+  "scripts": {
+    "beforeUpdate": "node -e \"console.log('Para generar el css quitar type module de package json')\"",
+    "updateCss": "tailwindcss -i ./styles/globals.css -o ./styles/generated/output.css",
+    "generateRollupFile": "node generateRollupConfig.cjs",
+    "rollupPrebuild": "rimraf srs && rimraf dist",
+    "rollupBuild": "rollup -c --bundleConfigAsCjs",
+    "rollupBuildProd": "rollup -c --environment NODE_ENV:production",
+    "postbuild": "node create-component-packages.cjs",
+    "deploy": "git pull origin main && yarn rollupPrebuild && yarn rollupBuildProd && yarn postbuild && git add . && yarn version --patch && git push origin dev_ja && git push origin --tags"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.20.7",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "autoprefixer": "^10.4.17",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-tailwindcss": "^3.14.0",
+    "postcss": "^8.4.33",
+    "prop-types": "^15",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "require-context": "^1.1.0",
+    "rollup": "^4.9.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-tailwindcss": "^1.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.2.0",
+    "tslib": "^2.6.2"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
+  }
+}

rollup.config.js

@@ -0,0 +1,55 @@
+import fs from 'fs'
+import path from 'path'
+import typescript from '@rollup/plugin-typescript'
+import babel from '@rollup/plugin-babel'
+import postcss from 'rollup-plugin-postcss'
+import tailwind from 'rollup-plugin-tailwindcss'
+import autoprefixer from 'autoprefixer'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+
+const pkgPath = path.resolve('package.json')
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  /@babel\/runtime/
+]
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'esm',
+    sourcemap: true,
+    preserveModules: true,
+    preserveModulesRoot: 'src'
+  },
+  external,
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      declaration: true,
+      noEmitOnError: true
+    }),
+    babel({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      babelHelpers: 'runtime',
+      include: ['src/**/*'],
+      plugins: ['@babel/plugin-transform-runtime']
+    }),
+    postcss({
+      plugins: [autoprefixer()],
+      sourceMap: true,
+      extract: true,
+      minimize: true
+    }),
+    tailwind({
+      input: './styles/globals.css'
+    }),
+    terser()
+  ]
+}

src/components/button/index.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils'
+import React from 'react'
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  title: string
+  onClick?: () => void
+}
+
+const Button = ({ title, onClick }: ButtonProps) => {
+  return (
+    <div className={cn(
+      'bg-blue-500',
+      'text-white'
+    )}
+    onClick={onClick}
+    >
+      {title}
+    </div>
+  )
+}
+
+export default Button

src/components/input/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Input = () => {
+  return (
+    <div>Input</div>
+  )
+}
+
+export default Input

src/index.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './components/button';
+export { default as Input } from './components/input';
+export * from './lib/utils';

src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { twMerge } from 'tailwind-merge'
+
+export function cn (...inputs) {
+  const classes = inputs
+    .filter((input) => input)
+    .flatMap((input) =>
+      typeof input === 'object'
+        ? Object.entries(input).filter(([, value]) => value).map(([key]) => key)
+        : input.split(' ')
+    )
+
+  return twMerge(...classes)
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "react",
+    "strict": false,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}