@modul/mbui 0.0.1 → 0.0.2-beta-pv-52768-9b2131f6

package/package.json

@@ -1,26 +1,52 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.1",
+  "version": "0.0.2-beta-pv-52768-9b2131f6",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {
+    "load-icons": "node scripts/icons/load-icons",
+    "icons": "yarn load-icons && svgr icons_sources",
     "build:demo": "webpack --config ./demo/webpack.config.js",
     "dev:demo": "webpack serve --config ./demo/webpack.config.js --open",
-    "demo": "yarn dlx http-server demo/dist -so -c-1"
+    "demo": "yarn dlx http-server demo/dist -so -c-1",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build"
   },
   "lintConfig": "./.eslintrc.json",
   "files": [
     "src"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "input-otp": "1.2.4",
+    "lucide-react": "^0.400.0",
     "react-datepicker": "4.16.0",
-    "react-imask": "7.1.3"
+    "react-imask": "7.1.3",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.21.5",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20.1.4",
     "@types/react": "^18.2.6",
     "@types/react-datepicker": "4.15.0",
@@ -28,6 +54,8 @@
     "@typescript-eslint/eslint-plugin": "5.39.0",
     "@typescript-eslint/parser": "5.39.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "10.4.19",
+    "axios": "1.7.2",
     "babel": "^6.23.0",
     "babel-loader": "^9.1.2",
     "classnames": "^2.3.2",
@@ -35,6 +63,7 @@
     "config": "3.3.9",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
+    "date-fns": "^2.30.0",
     "eslint": "8.25.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-angular": "4.1.0",
@@ -42,11 +71,16 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.31.10",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "glob": "^10.2.4",
     "html-webpack-plugin": "5.5.1",
+    "listr": "0.14.3",
+    "postcss": "^8.4.39",
+    "postcss-loader": "^8.1.1",
     "prettier": "2.7.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
+    "storybook": "^7.4.0",
     "style-loader": "^3.3.3",
     "stylus": "^0.59.0",
     "stylus-loader": "^7.1.3",
@@ -59,6 +93,7 @@
   },
   "peerDependencies": {
     "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

package/src/@/config/button.ts

@@ -0,0 +1,89 @@
+export default {
+	textColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: 'var(--btn-secondary)',
+			success: 'var(--btn-success)',
+			ghost: 'var(--btn-ghost)',
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	backgroundColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	borderColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+			}
+		}
+	}
+}

package/src/@/config/index.ts

@@ -0,0 +1,99 @@
+import button from "./button"
+
+export default {
+		container: {},
+		extend: {
+			colors: {
+				primary: {
+					DEFAULT: 'var(--primary)',
+					hover: 'var(--primary-hover)',
+					focus: 'var(var(--primary-focus)',
+					active: 'var(--primary-active)',
+				},
+				success: {
+					DEFAULT: 'var(--success)',
+					hover: 'var(--success-hover)',
+					focus: 'var(var(--success-focus)',
+					active: 'var(--success-active)',
+				},
+				secondary: {
+					DEFAULT: 'var(--secondary)',
+					hover: 'var(--secondary-hover)',
+					focus: 'var(var(--secondary-focus)',
+					active: 'var(--secondary-active)',
+				},
+				transparent: 'transparent',
+				current: 'currentColor',
+			},
+			...button,
+			// textColor: {
+				// base: 'var(--text-cl)',
+				// 'btn-primary': 'var(--btn-primary-cl)',
+				// 'btn-success': 'var(--btn-success-cl)',
+				// primary: 'var(--btn-txt-primary)',
+				// 'primary-hover': 'var(--btn-txt-primary-hover)',
+				// 'primary-focus': 'var(--btn-txt-primary-focus)',
+				// 'primary-active': 'var(--btn-txt-primary-active)',
+			// },
+
+			// border: {
+			// 	'btn-primary-outline': '2px solid red'
+			// },
+
+			// colors: {
+			// 	border: 'hsl(var(--border))',
+			// 	input: 'hsl(var(--input))',
+			// 	ring: 'hsl(var(--ring))',
+			// 	background: 'hsl(var(--background))',
+			// 	foreground: 'hsl(var(--foreground))',
+			// 	primary: {
+			// 		DEFAULT: 'hsl(var(--primary))',
+			// 		foreground: 'hsl(var(--primary-foreground))',
+			// 	},
+			// 	secondary: {
+			// 		DEFAULT: 'hsl(var(--secondary))',
+			// 		foreground: 'hsl(var(--secondary-foreground))',
+			// 	},
+			// 	destructive: {
+			// 		DEFAULT: 'hsl(var(--destructive))',
+			// 		foreground: 'hsl(var(--destructive-foreground))',
+			// 	},
+			// 	muted: {
+			// 		DEFAULT: 'hsl(var(--muted))',
+			// 		foreground: 'hsl(var(--muted-foreground))',
+			// 	},
+			// 	accent: {
+			// 		DEFAULT: 'hsl(var(--accent))',
+			// 		foreground: 'hsl(var(--accent-foreground))',
+			// 	},
+			// 	popover: {
+			// 		DEFAULT: 'hsl(var(--popover))',
+			// 		foreground: 'hsl(var(--popover-foreground))',
+			// 	},
+			// 	card: {
+			// 		DEFAULT: 'hsl(var(--card))',
+			// 		foreground: 'hsl(var(--card-foreground))',
+			// 	},
+			// },
+			// borderRadius: {
+			// 	lg: `var(--radius)`,
+			// 	md: `calc(var(--radius) - 2px)`,
+			// 	sm: 'calc(var(--radius) - 4px)',
+			// },
+
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' },
+				},
+				'accordion-up': {
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' },
+				},
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+			},
+		},
+	}

package/src/@/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+

package/src/Audio/Audio.styl

@@ -0,0 +1,115 @@
+
+.player
+    display flex
+    align-items center
+
+    &__btn
+        position relative
+        margin-right 12px
+        width 40px
+        height @width
+        font-size $fz-large
+        color $cl-white
+        background-color $cl-green-3
+        border 0
+        border-radius 50%
+        outline 0
+        transition background-color .3s ease-in-out
+
+        &:hover
+        &:focus
+            background-color $cl-green-4
+
+        &:active
+            background-color $cl-green-2
+
+        [class*=icon]
+            position absolute
+            top 50%
+            left 53%
+            transform translate(-50%, -50%)
+
+    &__progress
+        position relative
+        flex-grow 1
+
+        &-buffer
+            position absolute
+            top 0
+            left 0
+            height 2px
+            background-color $ca-graphite-5
+            border-radius 1px
+
+        .ant-slider-rail
+            cursor pointer
+            height 2px
+            background-color $ca-graphite-5
+            border-radius 1px
+
+        .ant-slider-track
+            position absolute
+            top 0
+            left 0
+            height 2px
+            background-color $cl-green-2
+            border-radius 1px
+
+        .ant-slider-handle
+            margin 0
+            cursor pointer
+            position absolute
+            top -4px
+            width 10px
+            height @width
+            border-radius 0
+            border 0
+            background-color transparent
+            transform translateX(-50%)
+            &::before
+                position absolute
+                display block
+                content ''
+                width 2px
+                height 8px
+                left 50%
+                top 50%
+                transform translate(-50%, -50%)
+                background-color $cl-green-2
+                border-radius 1px
+
+        .player__time
+            margin-top 14px
+
+        & + .player__time
+            margin-left 12px
+
+    &__range
+        position relative
+        height 2px
+        border-radius 1px
+
+    &__slider
+        position absolute
+        top 50%
+        left 0
+        margin-left -5px
+        width 10px
+        height @width
+        transform translateY(-50%)
+
+        &::after
+            content ''
+            position absolute
+            top 1px
+            left 50%
+            width 2px
+            height 8px
+            background-color $cl-green-2
+            border-radius 1px
+            transform translateX(-50%)
+
+    &__time
+        line-height 1
+        font-size 12px
+        color $cl-text-success