Add vite to react lib

paybutton/package.json

@@ -3,6 +3,10 @@
   "version": "2.1.2",
   "description": "The easiest way to accept eCash online",
   "main": "dist/paybutton.js",
+  "dependencies": {
+    "camelcase": "^8.0.0",
+    "preact": "^10.10.0"
+  },
   "devDependencies": {
     "@paybutton/react": "link:../react",
     "@rollup/plugin-alias": "^5.1.0",
@@ -13,8 +17,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
-    "camelcase": "^8.0.0",
-    "preact": "^10.10.0",
+    "preact-jsx-runtime": "^1.2.0",
     "rollup": "^4.9.6",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-dotenv": "^0.5.0",
@@ -41,8 +44,8 @@
   ],
   "license": "MIT",
   "resolutions": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.19",
     "readable-stream": "^3.5.0"
   }
 }

paybutton/rollup.config.js

@@ -13,10 +13,14 @@ export default ( env ) => ({
   makeAbsoluteExternalsRelative: true,
 	preserveEntrySignatures: 'strict',
   input: 'src/index.tsx',
-  output: {
+  output:{
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDom'
+    },
     file: 'dist/paybutton.js',
     name: 'PayButton',
-    esModule: true,
+    format: 'umd',
     generatedCode: {
       reservedNamesAsProps: false
     },
@@ -48,6 +52,11 @@ export default ( env ) => ({
     nodePolyfills(),
     json(),
     typescript({ compilerOptions: {lib: ["es5", "es6", "dom", "esnext"], target: "esnext"}}),
-    ],
-    external: ['@types/currency-formatter', 'currency-formatter'],
-  });
+  ],
+  external: [
+    '@types/currency-formatter', 
+    'currency-formatter', 
+    'react', 
+    'react-dom',
+  ],
+});

paybutton/tsconfig.json

@@ -1,10 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "module": "commonjs",
     "lib": ["dom", "esnext"],
-    "jsx": "react",
-    "jsxFactory": "h",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "isolatedModules": false,
     "strict": true,
     "esModuleInterop": true,

react/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

react/.storybook/main.ts

@@ -1,20 +1,33 @@
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+import type { StorybookConfig } from '@storybook/react-vite';
+import { withoutVitePlugins } from '@storybook/builder-vite';
 
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-a11y",
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../lib/**/*.mdx',
+    '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
   ],
-
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {}
+    name: '@storybook/react-vite',
+    options: {},
   },
-
   docs: {
-    autodocs: true
+    autodocs: 'tag',
+  },
+  viteFinal: async config => {
+    return {
+      ...config,
+      plugins: await withoutVitePlugins(config.plugins, [
+        'vite:lib-inject-css',
+      ]),
+    };
   },
-};
+};
+export default config;

react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

react/src/components/BarChart/BarChart.stories.tsx → react/lib/components/BarChart/BarChart.stories.tsx

@@ -1,12 +1,12 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
-import BarChart, { BarChartProps } from './BarChart';
+import BarChart from './BarChart';
 
 export default {
   title: 'BarChart',
   component: BarChart,
   decorators: [
-    (Story: Story): React.ReactNode => (
+    (Story: StoryFn): React.ReactNode => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -20,10 +20,9 @@ export default {
   },
 };
 
-const Template: Story<BarChartProps> = props => <BarChart {...props} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  value: 34,
-  color: '#4bc846',
+export const Default = {
+  args: {
+    value: 34,
+    color: '#4bc846',
+  },
 };

react/lib/components/Button/Button.stories.tsx

@@ -0,0 +1,34 @@
+import { StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { ThemeName } from '../../themes';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+  decorators: [
+    (Story: StoryFn): React.ReactNode => (
+      <div style={{ margin: 'auto', maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    onClick: { table: { disable: true } },
+  },
+  parameters: {
+    jest: ['Button'],
+  },
+};
+
+export const Default = {
+  args: {},
+};
+
+export const OrangeTheme = {
+  args: {
+    theme: ThemeName.ORANGE,
+    animation: 'invert',
+  },
+};