@modul/mbui 0.0.28-beta-pv-53496-934863d9 → 0.0.28

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.28-beta-pv-53496-934863d9",
+  "version": "0.0.28",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,7 +8,7 @@
   "scripts": {
     "load-icons": "node scripts/icons/load-icons",
     "icons": "yarn load-icons && svgr icons_sources",
-    "build": "webpack",
+    "build": "tsc",
     "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",
@@ -17,6 +17,7 @@
   },
   "lintConfig": "./.eslintrc.json",
   "files": [
+    "src",
     "dist"
   ],
   "dependencies": {
@@ -35,7 +36,6 @@
     "@radix-ui/react-switch": "1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@swc/core": "^1.7.42",
     "@types/lodash": "4.17.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -60,14 +60,14 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.21.5",
     "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-interactions": "^8.4.1",
+    "@storybook/addon-links": "^8.4.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-webpack5": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/blocks": "^8.4.1",
+    "@storybook/react": "^8.4.1",
+    "@storybook/react-webpack5": "^8.4.1",
+    "@storybook/test": "^8.4.1",
     "@svgr/cli": "8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "18.11.9",
@@ -83,7 +83,7 @@
     "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "^4.0.0",
     "config": "3.3.9",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "date-fns": "^2.30.0",
@@ -94,7 +94,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.31.10",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.10.2",
     "glob": "^10.2.4",
     "html-webpack-plugin": "5.5.1",
     "image-minimizer-webpack-plugin": "^4.0.2",
@@ -110,7 +110,7 @@
     "prettier": "2.7.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.1",
     "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.4.2",

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/Alert/Alert.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { cn } from '../@/lib/utils'
+import { CheckCircleSolid, InfoSolid, Warning } from '../../src/Icon'
+import { ReactNode } from "react";
+
+const AleltIconClasses = '[&+div]:ml-[8px] shrink-0'
+const AlertIcons = {
+	info: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-primary')} width={24} height={24} />,
+	warning: <Warning aria-hidden={true} className={cn(AleltIconClasses, 'text-warning')} width={24} height={24} />,
+	success: <CheckCircleSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-success')} width={24} height={24} />,
+	critical: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-critical')} width={24} height={24} />
+}
+
+const Title = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+	<div
+		role="heading"
+		ref={ref}
+		className={cn('text-[14px] font-medium', className)}
+		{...props}
+	/>
+))
+
+const Description = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+	<p
+		ref={ref}
+		className={cn('text-[14px] [&>a]:text-primary [&>a]:underline', className)}
+		{...props}
+	/>
+))
+
+const getClass = (variant, type): string => {
+	const commonClasses = 'px-[8px] py-[16px] border rounded-md '
+	const variants = {
+		info: `${type !== 'text' ? `${commonClasses} bg-primary-light  border-primary` : 'text-primary'}`,
+		warning: `${type !== 'text' ? `${commonClasses} bg-warning-light  border-warning` : 'text-warning'}`,
+		success: `${type !== 'text' ? `${commonClasses} bg-success-light  border-success` : 'text-success'}`,
+		critical: `${type !== 'text' ? `${commonClasses} bg-critical-light  border-critical` : 'text-critical'}`,
+	}
+	return variants[variant]
+
+}
+
+interface IAlertComponents {
+	displayName: string;
+	Title: typeof Title;
+	Description: typeof Description;
+}
+
+interface IAlertProps {
+	className?: string;
+	variant?: string;
+	type?: string;
+	children: ReactNode;
+}
+
+type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+const Alert: React.FC<TAlertProps> & IAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
+	return (
+		<div
+			className={cn('flex', getClass(variant, type), className)}
+			role='alert'
+			{...props}
+		>
+			{AlertIcons[variant]}
+			<div className='pt-[2px]'>
+				{children}
+			</div>
+		</div>
+	)
+}
+
+Alert.displayName = 'Alert'
+
+Alert.Title = Title
+Alert.Title.displayName = 'Alert.Title'
+
+Alert.Description = Description
+Alert.Description.displayName = "Alert.Description"
+
+export { Alert }

package/src/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert'

package/src/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "../@/lib/utils"
+import { buttonVariants } from "../../src/Button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-dialog p-[16px] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({variant: 'primary'}), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline"}),
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/AlertDialog/index.ts

@@ -0,0 +1,13 @@
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+} from './AlertDialog'

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