merge: pull request #1 from zuramai in project-structure branch

feat: use monorepo and pnpm workspace

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx',"../packages/**/*.stories.tsx"],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
+  ],
+  typescript: {
+    check: false
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import "tailwindcss/tailwind.css";
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -11,23 +11,22 @@
     "node": ">=10"
   },
   "scripts": {
-    "start": "set NODE_OPTIONS=--openssl-legacy-provider && tsdx watch",
-    "build": "set NODE_OPTIONS=--openssl-legacy-provider && tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "build": "pnpm run -r --filter packages/* build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint ./**/*.ts --fix",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "set NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
-    "build-storybook": "set NODE_OPTIONS=--openssl-legacy-provider && build-storybook",
-    "chromatic": "npx chromatic --project-token=chpt_f2040c498eb8da3"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "bumpp package.json packages/*/package.json --tag --commit --push && pnpm -r publish --access public"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "npm run lint"
     }
   },
   "prettier": {
@@ -52,35 +51,46 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.21.3",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-essentials": "^7.6.0-alpha.4",
+    "@storybook/addon-interactions": "^7.6.0-alpha.4",
+    "@storybook/addon-links": "^7.6.0-alpha.4",
+    "@storybook/addon-mdx-gfm": "^7.6.0-alpha.4",
+    "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@types/react-dom": "^18.0.11",
+    "@storybook/blocks": "^7.6.0-alpha.4",
+    "@storybook/react": "^7.6.0-alpha.4",
+    "@storybook/react-vite": "^7.6.0-alpha.4",
+    "@storybook/test": "^7.6.0-alpha.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "autoprefixer": "^10.4.14",
-    "babel-loader": "^9.1.2",
-    "chromatic": "^7.6.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "postcss": "^8.4.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-is": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.4",
+    "storybook": "^7.0.26",
     "tailwindcss": "^3.3.0",
-    "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.1"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@tailwindcss/forms": "^0.5.6"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "[email protected]"
+  "_id": "[email protected]",
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
 }

packages/avatar/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bootwind/button",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14"
+  }
+}

stories/Avatar.stories.tsx → packages/avatar/stories/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import Avatar, { AvatarProps } from '../src/components/Avatar';
+import { Meta } from '@storybook/react';
+import Avatar, { AvatarProps } from '../src/index';
 
 export default {
   title: 'Components/Avatar',
@@ -28,14 +28,14 @@ export const Avatars = (args: AvatarProps) => (
   <div className="flex space-x-4">
     <Avatar
       src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-      alt="User 1"
       {...args}
+      alt="User 1"
     />
     <Avatar
       src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-      alt="User 2"
       {...args}
+      alt="User 2"
     />
-    <Avatar showPlaceholder={true} alt="User 2" {...args} />
+    <Avatar showPlaceholder={true} {...args} alt="User 2"  />
   </div>
 );

packages/avatar/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": ["../../tsconfig.json"],
+    "include": ["src"]
+}

packages/button/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bootwind/button",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14"
+  }
+}

src/components/Button/index.tsx → packages/button/src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { ReactNode } from 'react';
 
 type ButtonVariant = 'primary' | 'secondary' | 'ghost';
@@ -10,16 +10,17 @@ export interface ButtonProps
   size?: ButtonSize;
   hasArrow?: boolean;
   icon?: ReactNode;
+  children?: ReactNode
 }
 
-export const Button: React.FC<ButtonProps> = ({
+export const Button = ({
   variant = 'primary',
   size = 'md',
   hasArrow = false,
   icon,
   children,
   ...props
-}) => {
+}: ButtonProps) => {
   const baseStyles =
     'inline-flex items-center rounded-lg border border-transparent font-semibold';
 
@@ -41,10 +42,12 @@ export const Button: React.FC<ButtonProps> = ({
   const buttonStyles = `${baseStyles} ${sizeStyles[size]} ${colorStyles[variant]}`;
 
   return (
+    <>
     <button type="button" className={buttonStyles} {...props}>
       {icon && <span className="mr-2">{icon}</span>}
       {children}
       {hasArrow && <span className="ml-2">→</span>}
     </button>
+    </>
   );
 };

stories/Button.stories.tsx → packages/button/stories/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import { Button, ButtonProps } from '../src/components/Button';
+import { Meta } from '@storybook/react';
+import { Button, ButtonProps } from '../src/index';
 
 import { FaRegEnvelope } from 'react-icons/fa6'; // Import ikon dari react-icons atau dari sumber lain
 
@@ -53,4 +53,4 @@ export const Sizes = (args: ButtonProps) => (
       <Button size="lg">Large</Button>
     </div>
   </div>
-);
+);

packages/button/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": ["../../tsconfig.json"],
+    "include": ["src"]
+}

packages/checkbox/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bootwind/button",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14"
+  }
+}

stories/Checkbox.stories.tsx → packages/checkbox/stories/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import Checkbox, { CheckboxProps } from '../src/components/Checkbox';
+import { Meta } from '@storybook/react';
+import Checkbox, { CheckboxProps } from '../src/index';
 
 export default {
   title: 'Components/Checkbox',

packages/checkbox/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": ["../../tsconfig.json"],
+    "include": ["src"]
+}

packages/toggle/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bootwind/button",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.14"
+  }
+}

src/components/Toggle/index.tsx → packages/toggle/src/index.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
 import { Switch } from '@headlessui/react';
 
-function classNames(...classes) {
+function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ');
 }
 
 export interface ToggleProps {
-  onToggle: (isEnabled: boolean) => void;
-  color: 'primary' | 'secondary';
-  iconOn: React.ReactNode;
-  iconOff: React.ReactNode;
+  onToggle?: (isEnabled: boolean) => void
+  color: 'primary' | 'secondary'
+  iconOn?: React.ReactNode
+  iconOff?: React.ReactNode
 }
 
 const Toggle: React.FC<ToggleProps> = ({ color, iconOn, iconOff }) => {

stories/Toggle.stories.tsx → packages/toggle/stories/Toggle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Meta } from '@storybook/react/types-6-0';
-import Toggle, { ToggleProps } from '../src/components/Toggle';
+import { Meta } from '@storybook/react';
+import Toggle, { ToggleProps } from '../src/index';
 
 import { FaMoon, FaSun } from 'react-icons/fa6';
 
@@ -39,4 +39,4 @@ export const ToggleDark = (args: ToggleProps) => (
       color="secondary"
     />
   </div>
-);
+);

packages/toggle/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": ["../../tsconfig.json"],
+    "include": ["src"]
+}