From 19b90a3078e7ad2baa8976761d3c3a5268cd6e4b Mon Sep 17 00:00:00 2001 From: Muhammad Zeeshan Saqib Date: Tue, 22 Apr 2025 16:24:08 +0500 Subject: [PATCH 1/2] required change in input --- src/lib/DC-input/DC-input.tsx | 624 +++++++++++++------------- src/lib/DC-input/components/Input.tsx | 275 ++++++++---- src/lib/DC-input/dc-input.stories.tsx | 104 ++--- 3 files changed, 547 insertions(+), 456 deletions(-) diff --git a/src/lib/DC-input/DC-input.tsx b/src/lib/DC-input/DC-input.tsx index 971620c..954ea05 100644 --- a/src/lib/DC-input/DC-input.tsx +++ b/src/lib/DC-input/DC-input.tsx @@ -1,309 +1,315 @@ -import { $secondaryWithAlpha } from '../styleGuide' - -import cn from 'classnames' -import React, { InputHTMLAttributes } from 'react' -import styled, { css } from 'styled-components' - -import DCDatepicker from './components/DCDatepicker' -import Input from './components/Input' -import PasswordInput from './components/passwordInput' -import TypeAHead from './components/TypeAHead' - -export interface DcProps extends InputHTMLAttributes { - className?: string - inputClassName?: string - label?: string - name: string - error?: string - type?: string - shadow?: boolean - as?: string - isTextarea?: boolean - variant?: 'normal' | 'solid' | 'outline' | 'line' - dimension?: 'small' | 'medium' | 'big' - onChange?: any - value?: any - parentStyle?: any - isMakingInput?: boolean - startDate?: any - endDate?: any - labelKey?: any - noPadding?: boolean - children?: any - invalid?: boolean - showsearchicon?: any - placeholder?: string - isShowLabel?: boolean - customLabel?: string - isClearOnSelection?: boolean - inputSize?: 'sm' | 'lg' - onSelectedOption?: () => {} -} - -const variantClasses = { - normal: - 'bg-gray-100 border border-border-base rounded focus:shadow focus:bg-light focus:border-accent', - solid: - 'bg-gray-100 border border-border-100 rounded focus:bg-light focus:border-accent', - outline: 'border border-border-base rounded focus:border-accent', - line: 'ps-0 border-b border-border-base rounded-none focus:border-accent' -} - -const PixelInputContainer = styled.div<{ as: string }>` - position: relative; - width: 100%; - &.overFlowCustom { - overflow: visible !important; - & > * { - overflow: visible !important; - & > * { - input { - ${(props: DcProps) => - props.invalid === true && - css` - color: red !important; - `} - } - } - } - } - & > * { - overflow: visible !important; - } - textarea { - resize: none; - height: 150px; - min-width: 100%; - outline: none; - &::placeholder { - font-size: 16px; - padding: 2px; - } - } - .sc-jSMfEi { - min-height: 38px !important; - border-radius: 0.25rem !important; - overflow: hidden; - &:focus { - box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; - } - &:focus-within { - box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; - } - } - .eoOphk { - &:focus { - background: #00aeef; - } - } - .fdjKYC { - min-height: 38px !important; - border-radius: 0.25rem !important; - overflow: hidden; - &:focus { - box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; - } - } - .kvwrSX { - min-height: 38px !important; - border-radius: 0.25rem !important; - overflow: hidden; - box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; - } - label { - border-radius: 4px !important; - border: 1px solid #dee2e6 !important; - & + div { - z-index: 99999; - } - } - .covbmQ { - top: 13px !important; - } -` - -const InputError = styled.span` - font-size: 90%; - color: rgb(255 0 0 / 64%); -` -const sizeClasses = { - small: 'text-sm h-10', - medium: 'h-12', - big: 'h-14' -} - -export const DcInput = React.forwardRef( - ( - { - className, - label, - name, - error, - children, - variant = 'normal', - dimension = 'big', - shadow = false, - disabled = false, - isTextarea = false, - as = 'text', - type = 'text', - onChange, - value, - inputClassName, - isMakingInput = false, - parentStyle = {}, - startDate, - endDate, - labelKey, - noPadding = false, - invalid = false, - showsearchicon = 1, - placeholder = '', - isShowLabel = true, - customLabel = '', - isClearOnSelection = false, - onSelectedOption = () => {}, - inputSize, - ...rest - }, - ref - ) => { - const [showDatePicker, setShowDatePicker] = React.useState( - as === 'dateRange' ? null : false - ) - - if (as === 'textarea') { - rest['as'] = as - } - return ( - - - {as === 'datePicker' ? ( - - - onChange( - { target: { value: data.date } }, - setShowDatePicker(false) - ) - } - onFocusChange={(focusedInput) => - setShowDatePicker(focusedInput) - } - showDatepicker={showDatePicker} - /> - - ) : as === 'typeahead' ? ( - - ) : as === 'password' ? ( - - ) : ( - - )} - - - {error && ( - {error} - )} - - ) - } -) - -export default DcInput +import { $secondaryWithAlpha } from '../styleGuide' + +import cn from 'classnames' +import React, { InputHTMLAttributes } from 'react' +import styled, { css } from 'styled-components' + +import DCDatepicker from './components/DCDatepicker' +import Input from './components/Input' +import PasswordInput from './components/passwordInput' +import TypeAHead from './components/TypeAHead' + +export interface DcProps extends InputHTMLAttributes { + className?: string + inputClassName?: string + label?: string + name: string + error?: string + type?: string + shadow?: boolean + as?: string + isTextarea?: boolean + variant?: 'normal' | 'solid' | 'outline' | 'line' + dimension?: 'small' | 'medium' | 'big' + onChange?: any + value?: any + parentStyle?: any + isMakingInput?: boolean + startDate?: any + endDate?: any + labelKey?: any + noPadding?: boolean + children?: any + invalid?: boolean + showsearchicon?: any + placeholder?: string + isShowLabel?: boolean + customLabel?: string + isClearOnSelection?: boolean + inputSize?: 'sm' | 'lg' + onSelectedOption?: () => {} + isShowError?: boolean + errorMessage?: string +} + +const variantClasses = { + normal: + 'bg-gray-100 border border-border-base rounded focus:shadow focus:bg-light focus:border-accent', + solid: + 'bg-gray-100 border border-border-100 rounded focus:bg-light focus:border-accent', + outline: 'border border-border-base rounded focus:border-accent', + line: 'ps-0 border-b border-border-base rounded-none focus:border-accent' +} + +const PixelInputContainer = styled.div<{ as: string }>` + position: relative; + width: 100%; + &.overFlowCustom { + overflow: visible !important; + & > * { + overflow: visible !important; + & > * { + input { + ${(props: DcProps) => + props.invalid === true && + css` + color: red !important; + `} + } + } + } + } + & > * { + overflow: visible !important; + } + textarea { + resize: none; + height: 150px; + min-width: 100%; + outline: none; + &::placeholder { + font-size: 16px; + padding: 2px; + } + } + .sc-jSMfEi { + min-height: 38px !important; + border-radius: 0.25rem !important; + overflow: hidden; + &:focus { + box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; + } + &:focus-within { + box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; + } + } + .eoOphk { + &:focus { + background: #00aeef; + } + } + .fdjKYC { + min-height: 38px !important; + border-radius: 0.25rem !important; + overflow: hidden; + &:focus { + box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; + } + } + .kvwrSX { + min-height: 38px !important; + border-radius: 0.25rem !important; + overflow: hidden; + box-shadow: 0 0 0 0.25rem ${$secondaryWithAlpha('0.15')} !important; + } + label { + border-radius: 4px !important; + border: 1px solid #dee2e6 !important; + & + div { + z-index: 99999; + } + } + .covbmQ { + top: 13px !important; + } +` + +const InputError = styled.span` + font-size: 90%; + color: rgb(255 0 0 / 64%); +` +const sizeClasses = { + small: 'text-sm h-10', + medium: 'h-12', + big: 'h-14' +} + +export const DcInput = React.forwardRef( + ( + { + className, + label, + name, + error, + children, + variant = 'normal', + dimension = 'big', + shadow = false, + disabled = false, + isTextarea = false, + as = 'text', + type = 'text', + onChange, + value, + inputClassName, + isMakingInput = false, + parentStyle = {}, + startDate, + endDate, + labelKey, + noPadding = false, + invalid = false, + showsearchicon = 1, + placeholder = '', + isShowLabel = true, + customLabel = '', + isClearOnSelection = false, + onSelectedOption = () => { }, + inputSize, + isShowError = false, + errorMessage = '', + ...rest + }, + ref + ) => { + const [showDatePicker, setShowDatePicker] = React.useState( + as === 'dateRange' ? null : false + ) + + if (as === 'textarea') { + rest['as'] = as + } + return ( + + + {as === 'datePicker' ? ( + + + onChange( + { target: { value: data.date } }, + setShowDatePicker(false) + ) + } + onFocusChange={(focusedInput) => + setShowDatePicker(focusedInput) + } + showDatepicker={showDatePicker} + /> + + ) : as === 'typeahead' ? ( + + ) : as === 'password' ? ( + + ) : ( + + )} + + + {error && ( + {error} + )} + + ) + } +) + +export default DcInput diff --git a/src/lib/DC-input/components/Input.tsx b/src/lib/DC-input/components/Input.tsx index fc21678..65bbead 100644 --- a/src/lib/DC-input/components/Input.tsx +++ b/src/lib/DC-input/components/Input.tsx @@ -1,96 +1,179 @@ -import React from 'react' -import { $DCprimaryColor } from '../../styleGuide' -import styled, { css } from 'styled-components' -const Input = (props) => { - return ( - - - - - - ) -} -const InputContainer = styled.div<{ size?: string; display?: string }>` - &&::after { - position: absolute; - width: 25px; - height: 20px; - ${(props) => - props.size === 'sm' && - css` - width: 20px; - height: 20px; - `} - content: ''; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='5px' fill='%23D1D5DB' viewBox='0 0 712 712'%3E%3C!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z' /%3E%3C/svg%3E"); - background-repeat: no-repeat no-repeat; - background-position: center center; - background-size: cover; - top: 8px; - //add if props.size === 'sm' then top: 8px - ${(props) => - props.size === 'sm' && - css` - top: 8px !important; - `} - - left: 10px; - display: ${(props) => (props.display === 'true' ? 'block' : 'none')}; - } -` -const DCInput = styled.input<{ props }>` - padding: ${(props) => - props.size === 'sm' ? '2px 0.5rem' : '0.5625rem 1.125rem !important'}; - &:focus { - border: none; - outline: none; - box-shadow: none; - box-shadow: 0 0 0 1px ${$DCprimaryColor} !important; - } - ${(props) => - props.showsearchicon === 0 && - css` - padding-left: 35px !important; - `} - border: .0625rem solid #d2d4e4; - color: #43476b; - appearance: none; - background-clip: padding-box; - border-radius: 0.375rem; - display: block; - font-size: 0.875rem; - font-weight: 400; - - width: 100%; - line-height: 1.5rem; - ::placeholder { - color: #d1d5db; - font-size: 0.875rem; - } - background-color: #ffffff !important; - ${(props) => - props.height && - css` - height: ${props.height}; - `} -` -export default Input +"use client" + +import React, { useState } from "react" +import { $DCprimaryColor } from "../../styleGuide" +import styled, { css } from "styled-components" + +const Input = (props) => { + const [showTooltip, setShowTooltip] = useState(false) + console.log("Input props:", { isShowError: props.isShowError, errorMessage: props.errorMessage }) + + return ( + + + + {props.isShowError && ( + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + {showTooltip && {props.errorMessage}} + + )} + + + ) +} + +const InputContainer = styled.div<{ size?: string; display?: string; isShowError?: boolean }>` + position: relative; + + &&::after { + position: absolute; + width: 25px; + height: 20px; + ${(props) => + props.size === "sm" && + css` + width: 20px; + height: 20px; + `} + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='5px' fill='%23D1D5DB' viewBox='0 0 712 712'%3E%3C!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z' /%3E%3C/svg%3E"); + background-repeat: no-repeat no-repeat; + background-position: center center; + background-size: cover; + top: 8px; + //add if props.size === 'sm' then top: 8px + ${(props) => + props.size === "sm" && + css` + top: 8px !important; + `} + + left: 10px; + display: ${(props) => (props.display === "true" ? "block" : "none")}; + } +` + +const ErrorIcon = styled.div` + position: absolute; + width: 20px; + height: 20px; + top: 50%; + right: 10px; + transform: translateY(-50%); + cursor: pointer; + z-index: 5; + display: block !important; + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23EF4444'%3E%3C!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + display: block; + } +` + +const ErrorTooltip = styled.div` + position: absolute; + top: -40px; + right: 0; + background-color: #EF4444; + color: white; + padding: 5px 10px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + z-index: 10; + + &::after { + content: ''; + position: absolute; + bottom: -5px; + right: 10px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #EF4444; + } +` + +const DCInput = styled.input<{ + isShowError?: boolean + errorMessage?: string + showsearchicon?: number + size?: string + height?: string +}>` + padding: ${(props) => (props.size === "sm" ? "2px 0.5rem" : "0.5625rem 1.125rem !important")}; + &:focus { + border: none; + outline: none; + box-shadow: none; + box-shadow: 0 0 0 1px ${(props) => (props.isShowError ? "#EF4444" : $DCprimaryColor)} !important; + } + ${(props) => + props.showsearchicon === 0 && + css` + padding-left: 35px !important; + `} + ${(props) => + props.isShowError === true && + css` + padding-right: 35px !important; + background-color: #FEF2F2 !important; + border-color: #EF4444 !important; + `} + border: .0625rem solid ${(props) => (props.isShowError ? "#EF4444" : "#d2d4e4")}; + color: #43476b; + appearance: none; + background-clip: padding-box; + border-radius: 0.375rem; + display: block; + font-size: 0.875rem; + font-weight: 400; + + width: 100%; + line-height: 1.5rem; + ::placeholder { + color: #d1d5db; + font-size: 0.875rem; + } + background-color: ${(props) => (props.isShowError ? "#FEF2F2" : "#ffffff")} !important; + ${(props) => + props.height && + css` + height: ${props.height}; + `} +` + +export default Input diff --git a/src/lib/DC-input/dc-input.stories.tsx b/src/lib/DC-input/dc-input.stories.tsx index 5bf07fd..39c8bb5 100644 --- a/src/lib/DC-input/dc-input.stories.tsx +++ b/src/lib/DC-input/dc-input.stories.tsx @@ -1,51 +1,53 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react' - -import DcInput from './DC-input' - -export default { - title: 'DC Input', - component: DcInput -} as ComponentMeta -const Template: ComponentStory = (args) => { - const [value, setValue] = React.useState('') - - return ( - - { - setValue(e.target.value) - }} - value={value} - /> - - ) -} -export const Input = Template.bind({}) -Input.args = { - placeholder: 'Enter email' -} -export const InputAsDatePicker = Template.bind({}) -InputAsDatePicker.args = { - placeholder: 'DC Input As DatePicker', - as: 'datePicker', - showResetDate: true, - showClose: true, - value: new Date() -} -export const InputAsTextArea = Template.bind({}) -InputAsTextArea.args = { - placeholder: 'DC Input AS TextArea', - as: 'textarea' -} -export const Password = Template.bind({}) -Password.args = { - placeholder: 'DC Input password', - as: 'password' -} -export const TypeAhead = Template.bind({}) -TypeAhead.args = { - placeholder: 'DC Input TypeAhead', - as: 'typeahead' -} +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import DcInput from './DC-input' + +export default { + title: 'DC Input', + component: DcInput +} as ComponentMeta +const Template: ComponentStory = (args) => { + const [value, setValue] = React.useState('') + + return ( + + { + setValue(e.target.value) + }} + value={value} + /> + + ) +} +export const Input = Template.bind({}) +Input.args = { + placeholder: 'Enter email', + isShowError: true, + errorMessage: 'This field is required' +} +export const InputAsDatePicker = Template.bind({}) +InputAsDatePicker.args = { + placeholder: 'DC Input As DatePicker', + as: 'datePicker', + showResetDate: true, + showClose: true, + value: new Date() +} +export const InputAsTextArea = Template.bind({}) +InputAsTextArea.args = { + placeholder: 'DC Input AS TextArea', + as: 'textarea' +} +export const Password = Template.bind({}) +Password.args = { + placeholder: 'DC Input password', + as: 'password' +} +export const TypeAhead = Template.bind({}) +TypeAhead.args = { + placeholder: 'DC Input TypeAhead', + as: 'typeahead' +} From ceec3018e54fbccf83cf5c91320ccb925cb727f4 Mon Sep 17 00:00:00 2001 From: Muhammad Zeeshan Saqib Date: Tue, 22 Apr 2025 16:24:39 +0500 Subject: [PATCH 2/2] v update --- package.json | 270 +++++++++++++++++++++++++-------------------------- 1 file changed, 135 insertions(+), 135 deletions(-) diff --git a/package.json b/package.json index 8c42f84..6eba177 100644 --- a/package.json +++ b/package.json @@ -1,135 +1,135 @@ -{ - "name": "pixel-base", - "version": "1.9.3", - "description": "Common UI components for web.pixelone.app, Based on React Bootstrap", - "author": "muffrank", - "license": "MIT", - "repository": "https://github.com/pixelone-corp/pixel-base", - "main": "dist/index.js", - "module": "dist/index.modern.js", - "source": "src/index.ts", - "engines": { - "node": ">=10" - }, - "types": "pixel-base.d.ts", - "scripts": { - "build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment", - "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", - "prepare": "run-s build", - "test": "run-s test:unit test:lint test:build", - "test:build": "run-s build", - "test:lint": "eslint .", - "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", - "test:watch": "react-scripts test --env=jsdom", - "deploy": "gh-pages -d example/build", - "storybook": "start-storybook -p 6006", - "predeploy": "npm run build-storybook", - "deploy-storybook": "gh-pages -d docs", - "build-storybook": "build-storybook -o docs" - }, - "homepage": "https://pixelone-corp.github.io/pixel-base/", - "peerDependencies": { - "@datepicker-react/styled": "^2.8.4", - "@fortawesome/fontawesome-svg-core": "^6.1.1", - "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.1.18", - "@types/highcharts": "^5.0.22", - "bootstrap": "5.1.3", - "highcharts": "^8.1.2", - "highcharts-react-official": "^3.1.0", - "moment": "^2.29.1", - "notiflix": "^3.2.4", - "react": "^18.2.0", - "react-bootstrap": "^2.2.2", - "react-bootstrap-typeahead": "^6.0.0-alpha.11", - "react-data-table-component": "^7.4.7", - "react-dropzone": "^14.2.1", - "react-input-mask": "^2.0.4", - "react-router-dom": "^6.3.0", - "styled-components": "^5.3.3" - }, - "devDependencies": { - "@babel/core": "^7.18.6", - "@storybook/addon-actions": "^6.5.9", - "@storybook/addon-essentials": "^6.5.9", - "@storybook/addon-interactions": "^6.5.9", - "@storybook/addon-links": "^6.5.9", - "@storybook/builder-webpack4": "^6.5.9", - "@storybook/manager-webpack4": "^6.5.9", - "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^6.5.9", - "@storybook/testing-library": "^0.0.13", - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.5.0", - "@testing-library/user-event": "^7.2.1", - "@types/jest": "^25.1.4", - "@types/node": "^12.12.38", - "@types/react": "^18.0.12", - "@types/react-dom": "^18.0.5", - "@typescript-eslint/eslint-plugin": "^2.26.0", - "@typescript-eslint/parser": "^2.26.0", - "babel-eslint": "^10.0.3", - "babel-loader": "^8.2.5", - "cross-env": "^7.0.2", - "css-loader": "5.2.7", - "eslint": "^6.8.0", - "eslint-config-prettier": "^6.7.0", - "eslint-config-standard": "^14.1.0", - "eslint-config-standard-react": "^9.2.0", - "eslint-plugin-import": "^2.18.2", - "eslint-plugin-node": "^11.0.0", - "eslint-plugin-prettier": "^3.1.1", - "eslint-plugin-promise": "^4.2.1", - "eslint-plugin-react": "^7.17.0", - "eslint-plugin-standard": "^4.0.1", - "gh-pages": "^4.0.0", - "microbundle-crl": "^0.13.11", - "npm-run-all": "^4.1.5", - "prettier": "^2.0.4", - "react": "^18.2.0", - "react-dom": "^18.0.5", - "sass": "^1.53.0", - "sass-loader": "10.1.1", - "style-loader": "2.0.0", - "typescript": "^3.7.5" - }, - "files": [ - "dist" - ], - "dependencies": { - "@datepicker-react/styled": "^2.8.4", - "@floating-ui/react": "^0.27.5", - "@fortawesome/fontawesome-svg-core": "^6.1.1", - "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.1.18", - "@storybook/addon-contexts": "^5.3.21", - "@types/echarts": "^4.9.22", - "@types/highcharts": "^5.0.22", - "apexcharts": "^4.5.0", - "bootstrap": "5.1.3", - "date-fns": "^2.30.0", - "echarts": "^5.6.0", - "echarts-for-react": "^3.0.3", - "highcharts": "^8.1.2", - "highcharts-react-official": "^3.1.0", - "lucide-react": "^0.477.0", - "moment": "^2.29.1", - "notiflix": "^3.2.4", - "npm": "^10.1.0", - "react": "^18.2.0", - "react-bootstrap": "^2.2.2", - "react-bootstrap-typeahead": "^6.0.0-alpha.11", - "react-data-table-component": "^7.4.7", - "react-date-range": "^1.4.0", - "react-device-detect": "^2.2.2", - "react-dropzone": "^14.2.1", - "react-input-mask": "^2.0.4", - "react-router-dom": "^6.3.0", - "rechat-react-click-outside": "^1.1.1", - "scss": "^0.2.4", - "storybook": "^7.0.18", - "styled-components": "^5.3.3" - } -} +{ + "name": "pixel-base", + "version": "1.9.4", + "description": "Common UI components for web.pixelone.app, Based on React Bootstrap", + "author": "muffrank", + "license": "MIT", + "repository": "https://github.com/pixelone-corp/pixel-base", + "main": "dist/index.js", + "module": "dist/index.modern.js", + "source": "src/index.ts", + "engines": { + "node": ">=10" + }, + "types": "pixel-base.d.ts", + "scripts": { + "build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment", + "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", + "prepare": "run-s build", + "test": "run-s test:unit test:lint test:build", + "test:build": "run-s build", + "test:lint": "eslint .", + "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", + "test:watch": "react-scripts test --env=jsdom", + "deploy": "gh-pages -d example/build", + "storybook": "start-storybook -p 6006", + "predeploy": "npm run build-storybook", + "deploy-storybook": "gh-pages -d docs", + "build-storybook": "build-storybook -o docs" + }, + "homepage": "https://pixelone-corp.github.io/pixel-base/", + "peerDependencies": { + "@datepicker-react/styled": "^2.8.4", + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-regular-svg-icons": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.1.18", + "@types/highcharts": "^5.0.22", + "bootstrap": "5.1.3", + "highcharts": "^8.1.2", + "highcharts-react-official": "^3.1.0", + "moment": "^2.29.1", + "notiflix": "^3.2.4", + "react": "^18.2.0", + "react-bootstrap": "^2.2.2", + "react-bootstrap-typeahead": "^6.0.0-alpha.11", + "react-data-table-component": "^7.4.7", + "react-dropzone": "^14.2.1", + "react-input-mask": "^2.0.4", + "react-router-dom": "^6.3.0", + "styled-components": "^5.3.3" + }, + "devDependencies": { + "@babel/core": "^7.18.6", + "@storybook/addon-actions": "^6.5.9", + "@storybook/addon-essentials": "^6.5.9", + "@storybook/addon-interactions": "^6.5.9", + "@storybook/addon-links": "^6.5.9", + "@storybook/builder-webpack4": "^6.5.9", + "@storybook/manager-webpack4": "^6.5.9", + "@storybook/preset-scss": "^1.0.3", + "@storybook/react": "^6.5.9", + "@storybook/testing-library": "^0.0.13", + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.5.0", + "@testing-library/user-event": "^7.2.1", + "@types/jest": "^25.1.4", + "@types/node": "^12.12.38", + "@types/react": "^18.0.12", + "@types/react-dom": "^18.0.5", + "@typescript-eslint/eslint-plugin": "^2.26.0", + "@typescript-eslint/parser": "^2.26.0", + "babel-eslint": "^10.0.3", + "babel-loader": "^8.2.5", + "cross-env": "^7.0.2", + "css-loader": "5.2.7", + "eslint": "^6.8.0", + "eslint-config-prettier": "^6.7.0", + "eslint-config-standard": "^14.1.0", + "eslint-config-standard-react": "^9.2.0", + "eslint-plugin-import": "^2.18.2", + "eslint-plugin-node": "^11.0.0", + "eslint-plugin-prettier": "^3.1.1", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-react": "^7.17.0", + "eslint-plugin-standard": "^4.0.1", + "gh-pages": "^4.0.0", + "microbundle-crl": "^0.13.11", + "npm-run-all": "^4.1.5", + "prettier": "^2.0.4", + "react": "^18.2.0", + "react-dom": "^18.0.5", + "sass": "^1.53.0", + "sass-loader": "10.1.1", + "style-loader": "2.0.0", + "typescript": "^3.7.5" + }, + "files": [ + "dist" + ], + "dependencies": { + "@datepicker-react/styled": "^2.8.4", + "@floating-ui/react": "^0.27.5", + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-regular-svg-icons": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.1.18", + "@storybook/addon-contexts": "^5.3.21", + "@types/echarts": "^4.9.22", + "@types/highcharts": "^5.0.22", + "apexcharts": "^4.5.0", + "bootstrap": "5.1.3", + "date-fns": "^2.30.0", + "echarts": "^5.6.0", + "echarts-for-react": "^3.0.3", + "highcharts": "^8.1.2", + "highcharts-react-official": "^3.1.0", + "lucide-react": "^0.477.0", + "moment": "^2.29.1", + "notiflix": "^3.2.4", + "npm": "^10.1.0", + "react": "^18.2.0", + "react-bootstrap": "^2.2.2", + "react-bootstrap-typeahead": "^6.0.0-alpha.11", + "react-data-table-component": "^7.4.7", + "react-date-range": "^1.4.0", + "react-device-detect": "^2.2.2", + "react-dropzone": "^14.2.1", + "react-input-mask": "^2.0.4", + "react-router-dom": "^6.3.0", + "rechat-react-click-outside": "^1.1.1", + "scss": "^0.2.4", + "storybook": "^7.0.18", + "styled-components": "^5.3.3" + } +}