From b5b7a03ce309688cdd4cda02c80a0efd226922e1 Mon Sep 17 00:00:00 2001 From: torki Date: Sat, 12 Jun 2021 06:17:36 +0430 Subject: [PATCH] feat: add some demos of picker by storybook --- .eslintrc | 1 - .storybook/main.js | 10 +- .storybook/preview.js | 6 + package-lock.json | 52 ++++- package.json | 8 +- src/components/WheelPicker/index.stories.tsx | 17 -- src/components/WheelPicker/index.styles.ts | 4 +- src/index.stories.tsx | 188 ++++++++++++++++++- src/index.styles.ts | 6 +- src/index.tsx | 2 +- 10 files changed, 247 insertions(+), 47 deletions(-) delete mode 100644 src/components/WheelPicker/index.stories.tsx diff --git a/.eslintrc b/.eslintrc index ce9c8cf..2e627a6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,4 @@ { - "extends": ["airbnb"], "plugins": ["react", "react-hooks", "@typescript-eslint"], "env": { "browser": true, diff --git a/.storybook/main.js b/.storybook/main.js index d80a104..7abc68c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -9,17 +9,9 @@ module.exports = { sourceLoaderOptions: null, }, }, + '@storybook/addon-viewport', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', ], - typescript: { - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: { - compilerOptions: { - allowSyntheticDefaultImports: false, - esModuleInterop: false, - }, - }, - }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index b285aac..d099e79 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,3 +1,9 @@ +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; + export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, + viewport: { + viewports: INITIAL_VIEWPORTS, + defaultViewport: 'iphone6', + }, }; diff --git a/package-lock.json b/package-lock.json index fdcefe6..695cdd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@persian-tools/persian-mobile-datepicker", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@persian-tools/persian-mobile-datepicker", - "version": "0.0.1", + "version": "0.0.2", "license": "MIT", "dependencies": { "date-fns-jalali": "^2.22.1-0", @@ -22,11 +22,14 @@ "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.14.5", "@babel/preset-react": "^7.14.5", + "@persian-tools/persian-tools": "^1.6.1", "@semantic-release/changelog": "^5.0.1", "@semantic-release/git": "^9.0.0", "@storybook/addon-actions": "^6.2.9", + "@storybook/addon-docs": "^6.2.9", "@storybook/addon-essentials": "^6.2.9", "@storybook/addon-links": "^6.2.9", + "@storybook/addon-viewport": "^6.2.9", "@storybook/addons": "^6.2.9", "@storybook/preset-create-react-app": "^3.1.7", "@storybook/react": "^6.2.9", @@ -62,7 +65,8 @@ "react-testing-library": "^5.9.0", "regenerator-runtime": "^0.13.7", "semantic-release": "^17.4.3", - "ts-jest": "^27.0.3" + "ts-jest": "^27.0.3", + "typescript": "^4.2.2" }, "engines": { "node": ">= 14.15.0" @@ -4309,6 +4313,15 @@ "node": ">= 6.0.0" } }, + "node_modules/@persian-tools/persian-tools": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@persian-tools/persian-tools/-/persian-tools-1.6.1.tgz", + "integrity": "sha512-eiK1GV6Z0e5tKNcQmp3Qv9LFZXB5FppICe91LjFGRZfzatJthIPPWyCCXtfFcMhYNgbrEcxlhCBLqDy41W8Idg==", + "dev": true, + "dependencies": { + "fastest-levenshtein": "^1.0.12" + } + }, "node_modules/@popperjs/core": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", @@ -17378,6 +17391,12 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "node_modules/fastest-levenshtein": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz", + "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==", + "dev": true + }, "node_modules/fastparse": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", @@ -41284,9 +41303,9 @@ } }, "node_modules/typescript": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", - "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz", + "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -47512,6 +47531,15 @@ "physical-cpu-count": "^2.0.0" } }, + "@persian-tools/persian-tools": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@persian-tools/persian-tools/-/persian-tools-1.6.1.tgz", + "integrity": "sha512-eiK1GV6Z0e5tKNcQmp3Qv9LFZXB5FppICe91LjFGRZfzatJthIPPWyCCXtfFcMhYNgbrEcxlhCBLqDy41W8Idg==", + "dev": true, + "requires": { + "fastest-levenshtein": "^1.0.12" + } + }, "@popperjs/core": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", @@ -57882,6 +57910,12 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "fastest-levenshtein": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz", + "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==", + "dev": true + }, "fastparse": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", @@ -76478,9 +76512,9 @@ } }, "typescript": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", - "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz", + "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index b0f1726..2518c99 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@persian-tools/persian-mobile-datepicker", - "version": "0.0.1", + "version": "0.0.2", "description": "Modern Persian mobile date picker", "publishConfig": { "access": "public" @@ -60,11 +60,14 @@ "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.14.5", "@babel/preset-react": "^7.14.5", + "@persian-tools/persian-tools": "^1.6.1", "@semantic-release/changelog": "^5.0.1", "@semantic-release/git": "^9.0.0", "@storybook/addon-actions": "^6.2.9", + "@storybook/addon-docs": "^6.2.9", "@storybook/addon-essentials": "^6.2.9", "@storybook/addon-links": "^6.2.9", + "@storybook/addon-viewport": "^6.2.9", "@storybook/addons": "^6.2.9", "@storybook/preset-create-react-app": "^3.1.7", "@storybook/react": "^6.2.9", @@ -100,7 +103,8 @@ "react-testing-library": "^5.9.0", "regenerator-runtime": "^0.13.7", "semantic-release": "^17.4.3", - "ts-jest": "^27.0.3" + "ts-jest": "^27.0.3", + "typescript": "^4.2.2" }, "resolutions": { "@babel/core": "^7.5.4" diff --git a/src/components/WheelPicker/index.stories.tsx b/src/components/WheelPicker/index.stories.tsx deleted file mode 100644 index 7126939..0000000 --- a/src/components/WheelPicker/index.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { WheelPicker } from './index'; -import { Story } from '@storybook/react/types-6-0'; -// Types -import type { Meta } from '@storybook/react/types-6-0'; -import type { WheelPickerProps } from './index.types'; - -export default { - title: 'Wheel Picker', - component: WheelPicker, - decorators: [(Story): JSX.Element => ], -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = {}; diff --git a/src/components/WheelPicker/index.styles.ts b/src/components/WheelPicker/index.styles.ts index d7a6443..a524bd4 100644 --- a/src/components/WheelPicker/index.styles.ts +++ b/src/components/WheelPicker/index.styles.ts @@ -13,7 +13,9 @@ export const StyledCaption = styled.div` color: #616161; padding-bottom: 5px; font-size: 1.1em; - border-bottom: 1px solid #e0e0e0; + &:not(:empty) { + border-bottom: 1px solid #e0e0e0; + } `; StyledCaption.displayName = 'PersianTools(WheelPicker)(Caption)'; diff --git a/src/index.stories.tsx b/src/index.stories.tsx index 6939c81..797a6b4 100644 --- a/src/index.stories.tsx +++ b/src/index.stories.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; -import Picker from './index'; +import { digitsEnToFa } from '@persian-tools/persian-tools'; +import { createDateInstance, DatePickerConfig, Picker } from './index'; import { PickerProps } from './index.types'; export default { - title: 'Base Picker', + title: 'Picker with Sheet modal', component: Picker, argTypes: { theme: { @@ -19,7 +20,184 @@ export default { const Template: Story = (args) => ; -export const Default = Template.bind({}); -Default.args = { - theme: 'android-light', +const pickerConfig: DatePickerConfig = { + year: {}, + month: {}, + day: {}, +}; + +export const Initial = Template.bind({}); +Initial.args = { + isOpen: true, + config: pickerConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 1 }), +}; + +export const HighlightWeekends = Template.bind({}); +HighlightWeekends.args = { + isOpen: true, + highlightWeekends: true, + config: pickerConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 6 }), +}; + +export const HighlightHolidays = Template.bind({}); +HighlightHolidays.args = { + isOpen: true, + highlightHolidays: true, + highlightWeekends: true, + config: pickerConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 1 }), +}; + +export const ColumnsCaption = Template.bind({}); +const ColumnsCaptionConfig: DatePickerConfig = { + year: { + caption: { + text: 'سال', + }, + }, + month: { + caption: { + text: 'ماه', + }, + }, + day: { + caption: { + text: 'روز', + }, + }, +}; +ColumnsCaption.args = { + isOpen: true, + highlightHolidays: true, + highlightWeekends: true, + config: ColumnsCaptionConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 1 }), +}; + +export const ColumnsCaptionWithCSSStyle = Template.bind({}); +const ColumnsCaptionWithStyleConfig: DatePickerConfig = { + year: { + caption: { + text: 'سال', + style: { + color: '#1672ec', + }, + }, + }, + month: { + caption: { + text: 'ماه', + style: { + color: '#1672ec', + }, + }, + }, + day: { + caption: { + text: 'روز', + style: { + color: '#1672ec', + }, + }, + }, +}; +ColumnsCaptionWithCSSStyle.args = { + isOpen: true, + highlightHolidays: true, + highlightWeekends: true, + config: ColumnsCaptionWithStyleConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 1 }), +}; + +export const ColumnsTextFormatter = Template.bind({}); +const ColumnsTextFormatterConfig: DatePickerConfig = { + year: { + caption: { + text: 'سال', + style: { + color: '#1672ec', + }, + }, + formatter(value) { + return digitsEnToFa(value.year); + }, + }, + month: { + caption: { + text: 'ماه', + style: { + color: '#1672ec', + }, + }, + }, + day: { + caption: { + text: 'روز', + style: { + color: '#1672ec', + }, + }, + formatter(value) { + return digitsEnToFa(value.day); + }, + }, +}; +ColumnsTextFormatter.args = { + isOpen: true, + highlightHolidays: true, + highlightWeekends: true, + config: ColumnsTextFormatterConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 1 }), +}; + +export const ColumnsWithStyles = Template.bind({}); +const ColumnsWithStylesConfig: DatePickerConfig = { + year: { + caption: { + text: 'سال', + }, + formatter(value) { + return digitsEnToFa(value.year); + }, + columnStyle: { + background: '#f5e2A0', + }, + selectedItemStyle: { + color: '#43a047', + }, + }, + month: { + caption: { + text: 'ماه', + }, + columnStyle: { + background: '#dbe9f8', + }, + itemStyle: { + color: '#1444d9', + }, + }, + day: { + caption: { + text: 'روز', + }, + formatter(value) { + return digitsEnToFa(value.day); + }, + columnStyle: { + background: '#dbe9f8', + }, + itemStyle: { + color: '#1444d9', + }, + }, +}; +ColumnsWithStyles.args = { + isOpen: true, + highlightHolidays: true, + highlightWeekends: true, + config: ColumnsWithStylesConfig, + initialValue: createDateInstance({ year: 1400, month: 1, day: 1 }), }; diff --git a/src/index.styles.ts b/src/index.styles.ts index 7b5c589..a158137 100644 --- a/src/index.styles.ts +++ b/src/index.styles.ts @@ -15,6 +15,7 @@ export const StyledSubmitButton = styled.button` font-size: 1rem; line-height: 1.5; -webkit-appearance: button; + margin-right: 15px; `; StyledSubmitButton.displayName = 'PersianTools(Picker)(SubmitButton)'; @@ -22,6 +23,7 @@ export const StyledCancelButton = styled(StyledSubmitButton)` color: #616161; background-color: transparent; border: 1px solid #c0c0c0; + margin-left: 15px; `; StyledCancelButton.displayName = 'PersianTools(Picker)(CancelButton)'; @@ -30,8 +32,8 @@ export const StyledFooter = styled.div` bottom: 0; right: 0; width: 100%; - height: 70px; - padding: 15px; + height: 40px; + padding: 15px 0; display: flex; justify-content: space-between; align-content: center; diff --git a/src/index.tsx b/src/index.tsx index 2901de7..c6fa3c4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -41,7 +41,7 @@ const Picker: React.FC = (props) => { handleClose()} - snapPoints={[385 + (props.title ? 55 : 0)]} + snapPoints={[400 + (props.title ? 55 : 0)]} initialSnap={0} >