@modul/mbui 0.0.1-beta-pv-50528-277b7dcf → 0.0.2-beta-storybook-9d462616

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.1-beta-pv-50528-277b7dcf",
+  "version": "0.0.2-beta-storybook-9d462616",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {
     "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": [
@@ -14,14 +16,21 @@
   ],
   "dependencies": {
     "react-datepicker": "4.16.0",
-    "react-imask": "7.1.3",
-    "react-modal": "3.16.1"
+    "react-imask": "7.1.3"
   },
   "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",
     "@types/node": "^20.1.4",
     "@types/react": "^18.2.6",
     "@types/react-datepicker": "4.15.0",
@@ -43,11 +52,13 @@
     "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",
     "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",

package/src/DatePicker/DatePicker.styl

@@ -0,0 +1,5 @@
+.react-datepicker-wrapper
+  background red
+  padding 30px
+  &::before
+    content 'ТИМУР НЕ БЕЙ, Я ТЕСТИЛ'

package/src/DatePicker/index.tsx

@@ -1,4 +1,5 @@
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
+import './DatePicker.styl'
 
 export { DatePicker }

package/src/index.ts

@@ -2,7 +2,5 @@ import { Button } from './Base/Buttons'
 import { TextLink } from './Base/Links'
 import { DatePicker } from './DatePicker'
 import { Input } from './Base/Input'
-//
-import { Popup } from './Popup'
 
-export { Button, TextLink, DatePicker, Input, Popup }
+export { Button, TextLink, DatePicker, Input }

package/src/stories/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { DatePicker } from '../../DatePicker'
+
+const meta: Meta<typeof DatePicker> = {
+	component: DatePicker,
+}
+
+export default meta
+type Story = StoryObj<typeof DatePicker>
+
+const DefaultDatePickerWrapper = (props) => {
+	const [startDate, setStartDate] = useState(new Date())
+	return (
+		<DatePicker
+			selected={startDate}
+			locale='ru-RU'
+			onChange={(date) => setStartDate(date)}
+			{...props}
+		/>
+	)
+}
+export const Default: Story = {
+	args: {
+		dateFormat: 'dd.MM.yyyy',
+		disabled: false,
+		dateFormatCalendar: 'dd.MM.yyyy',
+	},
+	render: (args) => <DefaultDatePickerWrapper {...args} />,
+}
+
+export const TimePicker: Story = {
+	args: {
+		...Default.args,
+		dateFormat: 'hh:mm',
+		timeCaption: 'Выберите время:',
+		timeIntervals: 30,
+		timeFormat: 'hh:mm',
+	},
+	render: (args) => (
+		<DefaultDatePickerWrapper
+			showTimeSelect
+			showTimeSelectOnly
+			{...args}
+		/>
+	),
+}

package/src/stories/Input/Input.stories.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Input } from '../../Base/Input'
+
+const meta: Meta<typeof Input> = {
+	component: Input,
+}
+type Story = StoryObj<typeof Input>
+
+const DefaultInputWrapper = (props) => {
+	const [val, setVal] = useState<string>('')
+	return (
+		<Input
+			value={val}
+			onChange={(e) => setVal(e)}
+			type="text"
+			{...props}
+		/>
+	)
+}
+
+export const Default: Story = {
+	args: {
+		disabled: false,
+		placeholder: 'placeholder...',
+	},
+	render: (args) => <DefaultInputWrapper {...args} />,
+}
+
+export default meta

package/src/Popup/BaseModal.tsx

@@ -1,53 +0,0 @@
-import classNames from 'classnames'
-import React, { FC } from 'react'
-import Modal from 'react-modal'
-import { IBaseModal } from './types'
-
-const BaseModal: FC<IBaseModal> = ({
-	shouldCloseOnOverlayClick = true,
-	children,
-	isOpen,
-	appElement,
-	onAfterOpen,
-	onRequestClose,
-	overlayClassName,
-}) => {
-	const handleOverlayOnClick = () => {
-		if (shouldCloseOnOverlayClick) {
-			onRequestClose?.()
-		}
-	}
-
-	//FIXME: из-за portalCreate у нас события клика всплывают с модального окна в компонент где он был замуонтин
-	const preventEvents = (e: React.MouseEvent) => {
-		e.stopPropagation()
-	}
-
-	const overlayClasses = classNames('popup_overlay', overlayClassName)
-
-	return (
-		<Modal
-			isOpen={isOpen}
-			contentLabel=""
-			appElement={appElement}
-			onRequestClose={onRequestClose}
-			shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-			onAfterOpen={onAfterOpen}
-			className="popup_table"
-			overlayClassName={overlayClasses}
-		>
-			<div
-				className="popup_cell"
-				onClick={preventEvents}
-			>
-				{children}
-				<div
-					className="popup_backdrop"
-					onClick={handleOverlayOnClick}
-				/>
-			</div>
-		</Modal>
-	)
-}
-
-export default BaseModal

package/src/Popup/Popup.tsx

@@ -1,45 +0,0 @@
-import React, { FC } from 'react'
-import BaseModal from './BaseModal'
-import { IPopup } from './types'
-
-const Popup: FC<IPopup> = ({
-	shouldCloseOnOverlayClick = true,
-	children,
-	isOpen,
-	appElement = document.getElementsByTagName('body')[0],
-	onAfterOpen,
-	onRequestClose,
-	overlayClassName,
-	layerClassName,
-	disableClose,
-	...props
-}) => {
-	const handleRequestClose = () => {
-		onRequestClose()
-	}
-
-	const classNames = ['popup_layer', layerClassName || ''].join(' ')
-
-	return (
-		<BaseModal
-			{...props}
-			isOpen={isOpen}
-			appElement={appElement}
-			onAfterOpen={onAfterOpen}
-			shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-			onRequestClose={handleRequestClose}
-		>
-			<div className={classNames}>
-				{!disableClose && (
-					<button
-						className="popup_close icon-close"
-						onClick={handleRequestClose}
-					/>
-				)}
-				{children}
-			</div>
-		</BaseModal>
-	)
-}
-
-export default Popup

package/src/Popup/index.ts

@@ -1,3 +0,0 @@
-import Popup from './Popup'
-
-export { Popup }

package/src/Popup/types.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react'
-
-export interface IBaseModal {
-	isOpen: boolean //modal state
-	shouldCloseOnOverlayClick?: boolean // When shouldCloseOnOverlayClick is true. it requires the onRequestClose to be defined in order to close.
-	children?: ReactNode
-	appElement?: object
-	onAfterOpen?: () => void // This event helps to trigger a function just after the modal opens
-	onRequestClose?: () => void
-	overlayClassName?: string
-}
-
-export interface IPopup extends IBaseModal {
-	layerClassName?: string
-	disableClose?: boolean
-}