refactor: story refactor

mrksbnc · Dec 31, 2024 · ad948ea · ad948ea
1 parent eaadf69
commit ad948ea
Show file tree

Hide file tree

Showing 19 changed files with 93 additions and 107 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -20,16 +20,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install pnpm
-        run: |
-          npm install -g pnpm
+      - name: Setup Node.js 22
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
 
       - name: Install dependencies
         run: |
-          pnpm install
+          npm install
 
       - id: build-publish
         uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
         with:
           path: static
-          build_command: pnpm run build:storybook
+          build_command: npm run build:storybook
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,12 +20,8 @@ jobs:
         with:
           node-version: 22
 
-      - name: Install pnpm
-        run: |
-          npm install -g pnpm
-
       - name: Install Dependencies
-        run: pnpm install
+        run: npm install
 
       - name: Create Release Pull Request
         uses: changesets/action@v1

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,14 +11,15 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install pnpm
-        run: |
-          npm install -g pnpm
+      - name: Setup Node.js 22
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
 
       - name: Install dependencies
         run: |
-          pnpm install
+          npm install
 
       - name: Run tests
         run: |
-          pnpm test
+          npm run test
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+npm-debug.log*
 lerna-debug.log*
 
 node_modules

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -4,20 +4,20 @@ repos:
       - id: lint
         name: Lint
         language: system
-        entry: pnpm run lint:oxlint
+        entry: npm run lint:oxlint
         stages: [pre-commit]
         pass_filenames: false
 
       - id: type-check
         name: Type Check
         language: system
-        entry: pnpm run type-check
+        entry: npm run type-check
         stages: [pre-commit]
         pass_filenames: false
 
       - id: test
         name: Test
         language: system
-        entry: pnpm run type-check
+        entry: npm run type-check
         stages: [pre-commit]
         pass_filenames: false
diff --git a/chromatic.config.json b/chromatic.config.json
@@ -1,8 +1,9 @@
 {
-	"$schema": "https://www.chromatic.com/config-file.schema.json",
-	"zip": true,
-	"onlyChanged": true,
-	"projectId": "Project:64d94a837fda91d800320b66",
-	"autoAcceptChanges": "main",
-	"exitOnceUploaded": true
+  "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "zip": true,
+  "onlyChanged": true,
+  "projectId": "Project:64d94a837fda91d800320b66",
+  "autoAcceptChanges": "main",
+  "exitOnceUploaded": true,
+  "buildScriptName": "build:storybook"
 }
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "lint": "run-s lint:*",
     "format": "prettier --write src/",
     "storybook": "storybook dev -p 6006",
-    "build": "NODE_ENV=production run-p type-check \"build-only {@}\" && pnpm build:css:min",
+    "build": "NODE_ENV=production run-p type-check \"build-only {@}\" && npm build:css:min",
     "build:storybook": "storybook build -o static",
     "build:css:min": "NPM_ENV=production npx postcss src/lib.css  > dist/lib.min.css",
     "build:css": "NPM_ENV=development npx postcss src/lib.css  > dist/lib.css"

diff --git a/src/components/bo_avatar/__stories__/bo_avatar.stories.ts b/src/components/bo_avatar/__stories__/bo_avatar.stories.ts
@@ -171,10 +171,10 @@ export const Sizes: Story = {
 			return { sizes, ...args }
 		},
 		template: `
-			<div class="flex gap-4"> 
+			<div class="flex gap-4">
 				<span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-avatar :type="type" :initials-data="initialsData" :size="size"/>
-					<span class="text-small text-gray-500 font-medium">{{ size }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ size }}</span>
 				</span>
 			</div>
 		`,
@@ -195,10 +195,10 @@ export const Shapes: Story = {
 			return { shapes, ...args }
 		},
 		template: `
-			<div class="flex gap-4"> 
+			<div class="flex gap-4">
 				<span v-for="shape in shapes" :key="shape" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-avatar :type="type" :initials-data="initialsData" :shape="shape"/>
-					<span class="text-small text-gray-500 font-medium">{{ shape }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ shape }}</span>
 				</span>
 			</div>
 		`,

diff --git a/src/components/bo_badge/__stories__/bo_badge.stories.ts b/src/components/bo_badge/__stories__/bo_badge.stories.ts
@@ -137,7 +137,7 @@ export const Sizes: Story = {
 			<div class="flex flex-row gap-1">
                 <span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2 m-1">
                     <bo-badge :label="label" :size="size"/>
-                    <span class="text-small text-gray-500 font-medium">{{ size }}</span>
+                    <span class="text-sm text-gray-500 font-medium">{{ size }}</span>
                 </span>
 			</div>
 		`,
@@ -158,13 +158,13 @@ export const SizesWithIcons: Story = {
 			<div class="flex flex-row gap-1">
                 <span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2 m-1">
                     <bo-badge :label="label" :size="size" :prefix-icon="prefixIcon"/>
-                    <span class="text-small text-gray-500 font-medium">{{ size }}</span>
+                    <span class="text-sm text-gray-500 font-medium">{{ size }}</span>
                 </span>
 			</div>
             <div class="flex flex-row gap-1">
                 <span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2 m-1">
                     <bo-badge :label="label" :size="size" :suffix-icon="suffixIcon"/>
-                    <span class="text-small text-gray-500 font-medium">{{ size }}</span>
+                    <span class="text-sm text-gray-500 font-medium">{{ size }}</span>
                 </span>
 			</div>
 		`,

diff --git a/src/components/bo_button/__stories__/bo_button.stories.ts b/src/components/bo_button/__stories__/bo_button.stories.ts
@@ -195,7 +195,7 @@ export const Sizes: Story = {
 			<div class="flex flex-col gap-4">
 				<span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :label="label" :variant="variant" :type="type" :size="size" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ size }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ size }}</span>
 				</span>
 			</div>
 		`,
@@ -218,7 +218,7 @@ export const Shapes: Story = {
 			<div class="flex flex-col gap-4">
 				<span v-for="shape in shapes" :key="shape" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :label="label" :variant="variant" :shape="shape" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ shape }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ shape }}</span>
 				</span>
 			</div>
 		`,
@@ -241,7 +241,7 @@ export const Variants: Story = {
 			<div class="flex flex-col gap-4">
 				<span v-for="variant in variants" :key="variant" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :label="label" :variant="variant" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ variant }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ variant }}</span>
 				</span>
 			</div>
 		`,
@@ -266,7 +266,7 @@ export const ShapesAndVariants: Story = {
 				<span v-for="shape in shapes" :key="shape" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<span v-for="variant in variants" :key="variant" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 						<bo-button :label="label" :variant="variant" :shape="shape" :type="type" class="m-1"/>
-						<span class="text-small text-gray-500 font-medium">{{ variant }} {{ shape }}</span>
+						<span class="text-sm text-gray-500 font-medium">{{ variant }} {{ shape }}</span>
 					</span>
 				</span>
 			</div>
@@ -289,7 +289,7 @@ export const WithPrefixIcon: Story = {
 			<div class="flex flex-col gap-4 w">
 				<span class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :label="label" :prefix-icon="prefixIcon" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">prefix-icon</span>
+					<span class="text-sm text-gray-500 font-medium">prefix-icon</span>
 				</span>
 			</div>
 		`,
@@ -312,7 +312,7 @@ export const WithSuffixIcon: Story = {
 			<div class="flex flex-col gap-4 w">
 				<span class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :label="label" :suffix-icon="suffixIcon" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">suffix-icon</span>
+					<span class="text-sm text-gray-500 font-medium">suffix-icon</span>
 				</span>
 			</div>
 		`,
@@ -335,7 +335,7 @@ export const IconOnlyButton: Story = {
 			<div class="flex flex-col gap-4 w">
 				<span class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :prefix-icon="prefixIcon" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">prefix-icon</span>
+					<span class="text-sm text-gray-500 font-medium">prefix-icon</span>
 				</span>
 			</div>
 		`,
@@ -358,7 +358,7 @@ export const IconOnlySizes: Story = {
 			<div class="flex flex-row gap-4">
 				<span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :prefix-icon="prefixIcon" :size="size" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ size }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ size }}</span>
 				</span>
 			</div>
 		`,
@@ -381,7 +381,7 @@ export const IconOnlyVariants: Story = {
 			<div class="flex flex-row gap-4">
 				<span v-for="variant in variants" :key="variant" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-button :prefix-icon="prefixIcon" :variant="variant" :type="type" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ variant }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ variant }}</span>
 				</span>
 			</div>
 		`,

diff --git a/src/components/bo_divider/__stories__/bo_divider.stories.ts b/src/components/bo_divider/__stories__/bo_divider.stories.ts
@@ -79,19 +79,19 @@ export const Variants: Story = {
 		template: `
 			<div class="flex flex-col gap-4 bg-white p-4">
 				<bo-divider v-bind="args" />
-                <span class="text-small text-gray-500 font-medium">default</span>
-                
+                <span class="text-sm text-gray-500 font-medium">default</span>
+
 				<bo-divider v-bind="args" :variant="variants[1]" />
-                <span class="text-small text-gray-500 font-medium">{{ variants[1] }}</span>
-				
+                <span class="text-sm text-gray-500 font-medium">{{ variants[1] }}</span>
+
                 <bo-divider v-bind="args" :variant="variants[2]" />
-				<span class="text-small text-gray-500 font-medium">{{ variants[2] }}</span>
+				<span class="text-sm text-gray-500 font-medium">{{ variants[2] }}</span>
 
                 <bo-divider v-bind="args" :variant="variants[3]" />
-                <span class="text-small text-gray-500 font-medium">{{ variants[3] }}</span>
-				
+                <span class="text-sm text-gray-500 font-medium">{{ variants[3] }}</span>
+
                 <bo-divider v-bind="args" :variant="variants[4]" />
-                <span class="text-small text-gray-500 font-medium">{{ variants[4] }}</span>
+                <span class="text-sm text-gray-500 font-medium">{{ variants[4] }}</span>
 			</div>
 		`,
 	}),
@@ -112,7 +112,7 @@ export const Types: Story = {
 			<div class="flex flex-col gap-4 bg-white p-4">
                 <span v-for="type in types" :key="type">
 				    <bo-divider :type="type" />
-                    <span class="text-small text-gray-500 font-medium">{{ type }}</span>
+                    <span class="text-sm text-gray-500 font-medium">{{ type }}</span>
                 </span>
 			</div>
 		`,

diff --git a/src/components/bo_icon/__stories__/bo_icon.stories.ts b/src/components/bo_icon/__stories__/bo_icon.stories.ts
@@ -77,8 +77,8 @@ export const Sizes: Story = {
 			<div class="flex flex-row gap-2">
 				<span v-for="size in sizes" :key="size" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-icon :icon="icon" :size="size" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ size }}</span>
-					
+					<span class="text-sm text-gray-500 font-medium">{{ size }}</span>
+
 				</span>
 			</div>
 		`,
@@ -109,7 +109,7 @@ export const Colors: Story = {
 			<div class="flex flex-row gap-2">
 				<span v-for="color in colors" :key="color" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-icon :icon="icon" :color="color" class="m-1"/>
-					<span class="text-small text-gray-500 font-medium">{{ color }}</span>
+					<span class="text-sm text-gray-500 font-medium">{{ color }}</span>
 				</span>
 			</div>
 		`,
@@ -127,10 +127,10 @@ export const AllIcons: Story = {
 			return { icons, Icon }
 		},
 		template: `
-			<div class="grid grid-cols-6 gap-2"> 
+			<div class="grid grid-cols-6 gap-2">
 				<span v-for="icon in icons" :key="icon" class="flex flex-col justify-center items-center gap-2 border border-gray-300 rounded-lg p-2">
 					<bo-icon :icon="icon" size="${BoSize.large}" class="m-1"/>
-						<span class="text-small text-gray-500 font-medium">{{ icon }}</span>
+						<span class="text-sm text-gray-500 font-medium">{{ icon }}</span>
 					</span>
 			</div>
 		`,

diff --git a/src/components/bo_input/BoInput.vue b/src/components/bo_input/BoInput.vue
@@ -216,53 +216,53 @@ const inputSizeClasses = computed<string>(() => {
 	if (prefixIcon.value != null && suffixIcon.value != null) {
 		switch (size.value) {
 			case BoInputSize.small:
-				return /*tw*/ 'flex w-full h-[32px] text-bo-sm'
+				return /*tw*/ 'flex w-full min-h-[24px] text-xs'
 			case BoInputSize.default:
 			default:
-				return /*tw*/ 'flex w-full h-[40px] px-8 text-bo-base'
+				return /*tw*/ 'flex w-full h-[32px] px-8 text-base'
 			case BoInputSize.large:
-				return /*tw*/ 'flex w-full px-8 text-bo-xl'
+				return /*tw*/ 'flex w-full h-[40px] px-8 text-xl'
 		}
 	}
 
 	if (prefixIcon.value != null) {
 		switch (size.value) {
 			case BoInputSize.small:
-				return /*tw*/ 'flex w-full h-[32px] pl-6 pr-4 text-bo-sm'
+				return /*tw*/ 'flex w-full h-[24px] pl-6 pr-4 text-xs'
 			case BoInputSize.default:
 			default:
-				return /*tw*/ 'flex w-full h-[40px] pl-8 pr-4 text-bo-base'
+				return /*tw*/ 'flex w-full h-[32px] pl-8 pr-4 text-sm'
 			case BoInputSize.large:
-				return /*tw*/ 'flex w-full h-[48px] pl-8 pr-4 text-bo-xl'
+				return /*tw*/ 'flex w-full h-[40px] pl-8 pr-4 text-base'
 		}
 	}
 
 	if (suffixIcon.value != null) {
 		switch (size.value) {
 			case BoInputSize.small:
 				return isLoading.value
-					? /*tw*/ 'flex w-full h-[32px] pl-4 pr-6 text-bo-sm'
-					: /*tw*/ 'flex w-full h-[32px] pl-4 pr-14 text-bo-sm'
+					? /*tw*/ 'flex w-full h-[24px] pl-4 pr-6 text-xs'
+					: /*tw*/ 'flex w-full h-[24px] pl-4 pr-14 text-xs'
 			case BoInputSize.default:
 			default:
 				return isLoading.value
-					? /*tw*/ 'flex w-full h-[40px] pl-4 pr-8 text-bo-base'
-					: /*tw*/ 'flex w-full h-[40px] pl-4 pr-14 text-bo-base'
+					? /*tw*/ 'flex w-full h-[32px] pl-4 pr-8 text-sm'
+					: /*tw*/ 'flex w-full h-[32px] pl-4 pr-14 text-sm'
 			case BoInputSize.large:
 				return isLoading.value
-					? /*tw*/ 'flex w-full h-[48px] pl-4 pr-8 text-bo-xl'
-					: /*tw*/ 'flex w-full h-[48px] pl-4 pr-14 text-bo-xl'
+					? /*tw*/ 'flex w-full h-[40px] pl-4 pr-8 text-base'
+					: /*tw*/ 'flex w-full h-[40px] pl-4 pr-14 text-base'
 		}
 	}
 
 	switch (size.value) {
 		case BoInputSize.small:
-			return /*tw*/ 'flex w-full h-[32px] px-3 text-bo-sm'
+			return /*tw*/ 'flex w-full h-[24px] px-3 text-xs'
 		case BoInputSize.default:
 		default:
-			return /*tw*/ 'flex w-full h-[40px] px-3 text-bo-base'
+			return /*tw*/ 'flex w-full h-[32px] px-3 text-sm'
 		case BoInputSize.large:
-			return /*tw*/ 'flex w-full h-[48px] px-3 text-bo-xl'
+			return /*tw*/ 'flex w-full h-[40px] px-3 text-base'
 	}
 })