chore(commit): commit temp

bleu · Jan 4, 2024 · 3796357 · 3796357
1 parent 75e98d5
commit 3796357
Show file tree

Hide file tree

Showing 13 changed files with 5,318 additions and 2,815 deletions.
diff --git a/declarations.d.ts b/declarations.d.ts
@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module 'rollup-plugin-peer-deps-external' {
+  const content: any;
+  export default content;
+}
diff --git a/package.json b/package.json
@@ -10,8 +10,9 @@
     "url": ""
   },
   "scripts": {
-    "dev": "concurrently \"yarn build --watch\" \"yarn storybook\" \"yarn test\" ",
-    "build": "tsup --onSuccess \"yarn link:self\"",
+    "dev": "concurrently \"yarn build:dev\" \"yarn storybook\" \"yarn test\" ",
+    "build:dev": "rollup -cw --bundleConfigAsCjs --watch.onBundleEnd \"yalc push\"",
+    "build": "rollup -c --bundleConfigAsCjs && yalc push",
     "type-check": "tsc",
     "lint": "eslint --ignore-path .gitignore \"{src,tests}/**/*.+(ts|js|tsx)\"",
     "lint:fix": "yarn lint --fix && prettier --write .",
@@ -25,29 +26,12 @@
     "release": "yarn build && yarn release-it",
     "link:self": "yarn yalc publish && yarn link"
   },
-  "main": "dist/index.js",
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "treeshake": true,
-    "sourcemap": "inline",
-    "minify": true,
-    "clean": true,
-    "dts": true,
-    "splitting": false,
-    "format": [
-      "cjs",
-      "esm"
-    ],
-    "external": [
-      "react"
-    ],
-    "injectStyle": false
-  },
+  "module": "dist/index.mjs",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
@@ -87,68 +71,86 @@
     "node": ">=14.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
-    "@babel/preset-env": "7.23.2",
-    "@babel/preset-react": "7.22.15",
-    "@babel/preset-typescript": "7.23.2",
-    "@commitlint/cli": "18.2.0",
-    "@commitlint/config-conventional": "18.1.0",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "7.23.7",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
+    "@commitlint/cli": "18.4.4",
+    "@commitlint/config-conventional": "18.4.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-url": "^8.0.2",
     "@ryansonshine/commitizen": "4.2.8",
     "@ryansonshine/cz-conventional-changelog": "3.3.4",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-interactions": "7.5.1",
-    "@storybook/addon-links": "7.5.1",
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-interactions": "7.6.7",
+    "@storybook/addon-links": "7.6.7",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/addon-themes": "^7.5.1",
-    "@storybook/blocks": "7.5.1",
-    "@storybook/react": "7.5.1",
-    "@storybook/react-webpack5": "7.5.1",
+    "@storybook/addon-styling-webpack": "^0.0.6",
+    "@storybook/addon-themes": "^7.6.7",
+    "@storybook/blocks": "7.6.7",
+    "@storybook/react": "7.6.7",
+    "@storybook/react-webpack5": "7.6.7",
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "20.8.9",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
-    "@types/react-test-renderer": "18.0.5",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
-    "@typescript-eslint/parser": "6.9.0",
-    "@vitejs/plugin-react": "^4.1.0",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
+    "@types/react-test-renderer": "18.0.7",
+    "@types/rollup-plugin-peer-deps-external": "^2",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/parser": "6.17.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.1.2",
+    "autoprefixer": "^10.4.16",
     "babel-loader": "9.1.3",
     "concurrently": "8.2.2",
     "css-loader": "^6.8.1",
-    "eslint": "8.52.0",
+    "esbuild": "^0.19.11",
+    "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-prettier": "5.0.1",
+    "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sort-class-members": "^1.19.0",
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-typescript-sort-keys": "3.1.0",
     "eslint-plugin-unused-imports": "3.0.0",
     "husky": "8.0.3",
-    "jsdom": "^22.1.0",
-    "lint-staged": "15.0.2",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^7.3.3",
-    "prettier": "3.0.3",
+    "jsdom": "^23.0.1",
+    "lint-staged": "15.2.0",
+    "postcss": "^8.4.32",
+    "postcss-loader": "^7.3.4",
+    "prettier": "3.1.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
-    "release-it": "16.2.1",
-    "storybook": "7.5.1",
+    "release-it": "17.0.1",
+    "rollup": "^4.9.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "7.6.7",
     "style-loader": "^3.3.3",
-    "tailwindcss": "^3.3.5",
-    "tsup": "7.2.0",
-    "typescript": "5.2.2",
-    "vitest": "^0.34.6",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tslib": "^2.6.2",
+    "tsup": "8.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.2",
+    "webpack": "^5.89.0",
     "yalc": "1.0.0-pre.53"
   },
   "peerDependencies": {
@@ -165,7 +167,10 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "autoprefixer": "^10.4.16",
-    "client-only": "^0.0.1"
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/themes": "^2.0.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,62 @@
+import { DEFAULT_EXTENSIONS } from '@babel/core';
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import svgr from '@svgr/rollup';
+import autoprefixer from 'autoprefixer';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import typescript from 'rollup-plugin-typescript2';
+import tailwind from 'tailwindcss';
+
+const packageJson = require('./package.json');
+
+/** @type {import('rollup').RollupOptions} */
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+      },
+    ],
+    external: ['react', 'react-dom'],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      svgr(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        extensions: [...DEFAULT_EXTENSIONS, '.ts', 'tsx'],
+      }),
+      postcss({
+        config: {
+          path: './postcss.config.js',
+        },
+        plugins: [
+          autoprefixer(),
+          tailwind({
+            config: './tailwind.config.js',
+          }),
+        ],
+      }),
+      terser({
+        compress: true,
+        mangle: true,
+        output: {
+          preamble: '/* eslint-disable */',
+          comments: false,
+        },
+      }),
+    ],
+  },
+];
diff --git a/src/Button.tsx b/src/Button.tsx
@@ -0,0 +1,55 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from './lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/src/Example.tsx b/src/Example.tsx
@@ -1,5 +1,3 @@
-import 'client-only';
-
 import './Example.css';
 
 import React from 'react';
@@ -14,8 +12,7 @@ export function Example(props: ExampleProps) {
     <button
       onClick={() => setCount(count + 1)}
       type="button"
-      id="example-button"
-      className="ui-bg-blue-500 ui-font-bold"
+      className="bg-blue-500 font-bold text-xs"
     >
       {`${props.text} ${count}`}
     </button>

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -0,0 +1,4 @@
+import './tailwind.css';
+
+export * from './Button';
+export * from './Example';
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
 import './tailwind.css';
 
+export * from './Button';
 export * from './Example';
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));