diff --git a/packages/components/src/Icons/register.ts b/.storybook/helpers/icons.js similarity index 100% rename from packages/components/src/Icons/register.ts rename to .storybook/helpers/icons.js diff --git a/.storybook/helpers/webpack.config.js b/.storybook/helpers/webpack.config.js new file mode 100644 index 00000000..2c6b47c7 --- /dev/null +++ b/.storybook/helpers/webpack.config.js @@ -0,0 +1,34 @@ +const path = require('path'); + +module.exports.append = (config) => { + config.module.rules.push({ + test: /\.(ts|tsx)$/, + include: [path.join(__dirname, '../../packages'), path.join(__dirname, '../../stories')], + use: [ + { + loader: require.resolve('awesome-typescript-loader'), + options: { + configFileName: 'tsconfig.json', + }, + }, + { + loader: require.resolve('react-docgen-typescript-loader'), + }, + ], + }); + config.resolve.extensions.push('.ts', '.tsx', '.mdx', '.json'); + config.resolve.alias = { + ...config.resolve.alias, + '@treejs/components': path.join(__dirname, '../../packages/components/src'), + '@treejs/api': path.join(__dirname, '../../packages/api/src'), + '@treejs/auth': path.join(__dirname, '../../packages/auth/src'), + '@treejs/constants': path.join(__dirname, '../../packages/constants/src'), + '@treejs/forms': path.join(__dirname, '../../packages/forms/src'), + '@treejs/hooks': path.join(__dirname, '../../packages/hooks/src'), + '@treejs/localization': path.join(__dirname, '../../packages/localization/src'), + '@treejs/styles': path.join(__dirname, '../../packages/styles/src'), + '@treejs/types': path.join(__dirname, '../../packages/types/src'), + '@treejs/utils': path.join(__dirname, '../../packages/utils/src'), + }; + return config; +}; diff --git a/.storybook/main.js b/.storybook/main.js index 9687c087..67a3761c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,7 +1,12 @@ -const appendWebpackConfig = require('./webpack.config').append; +const appendWebpackConfig = require('./helpers/webpack.config').append; module.exports = { stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-postcss'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-docs', + '@storybook/addon-essentials', + '@storybook/addon-postcss', + ], webpackFinal: (config) => appendWebpackConfig(config), }; diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..807f0482 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js index 203611b0..effd14b5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,11 +1,9 @@ import '../packages/styles/src/global.css'; +import './helpers/icons'; + export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, + actions: { + argTypesRegex: '^on[A-Z].*', }, }; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index ac6d2f62..00000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,34 +0,0 @@ -const path = require('path'); - -module.exports.append = (config) => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - include: [path.join(__dirname, '../packages'), path.join(__dirname, '../stories')], - use: [ - { - loader: require.resolve('awesome-typescript-loader'), - options: { - configFileName: 'tsconfig.json', - }, - }, - { - loader: require.resolve('react-docgen-typescript-loader'), - }, - ], - }); - config.resolve.extensions.push('.ts', '.tsx', '.json'); - config.resolve.alias = { - ...config.resolve.alias, - '@treejs/components': path.join(__dirname, '../packages/components/src'), - '@treejs/api': path.join(__dirname, '../packages/api/src'), - '@treejs/auth': path.join(__dirname, '../packages/auth/src'), - '@treejs/constants': path.join(__dirname, '../packages/constants/src'), - '@treejs/forms': path.join(__dirname, '../packages/forms/src'), - '@treejs/hooks': path.join(__dirname, '../packages/hooks/src'), - '@treejs/localization': path.join(__dirname, '../packages/localization/src'), - '@treejs/styles': path.join(__dirname, '../packages/styles/src'), - '@treejs/types': path.join(__dirname, '../packages/types/src'), - '@treejs/utils': path.join(__dirname, '../packages/utils/src'), - }; - return config; -}; diff --git a/package.json b/package.json index 11600757..b59b5d58 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "devDependencies": { "@babel/core": "^7.13.14", "@storybook/addon-actions": "^6.3.2", + "@storybook/addon-docs": "^6.3.2", "@storybook/addon-essentials": "^6.3.2", "@storybook/addon-links": "^6.3.2", "@storybook/addon-postcss": "^2.0.0", diff --git a/packages/components/src/Button/index.tsx b/packages/components/src/Button/index.tsx index 9c5e52b8..faa35fa9 100644 --- a/packages/components/src/Button/index.tsx +++ b/packages/components/src/Button/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import React, { ReactNode, useCallback } from 'react'; import cx from 'classnames'; @@ -6,7 +6,7 @@ import { STATUS } from '@treejs/types/common'; export type ButtonType = { disabled?: boolean; - label: string | React.ReactElement; + label: string | ReactNode; onClick?: () => void; /** * Define color diff --git a/packages/components/src/Calendar/components/Calendar.tsx b/packages/components/src/Calendar/components/Calendar.tsx index 4a605bba..d83d0ef9 100644 --- a/packages/components/src/Calendar/components/Calendar.tsx +++ b/packages/components/src/Calendar/components/Calendar.tsx @@ -17,7 +17,7 @@ export type CalendarType = { /** * Custom component for show detail, used for view */ - detailComponent?: React.FunctionComponent; + detail?: React.FunctionComponent; /** * Show color when mouse cursor move over cell */ @@ -26,7 +26,7 @@ export type CalendarType = { /** * When type is WEEK, then use this prop for time column on left side */ - timeColumnComponent?: React.FunctionComponent; + timeColumn?: React.FunctionComponent; title?: string; type?: CALENDAR_VIEW; value?: Date; @@ -35,7 +35,7 @@ export type CalendarType = { const todayDate: Date = new Date(); const Calendar: React.FC = (props) => { - const { value, onChange, type = CALENDAR_VIEW.MONTH, title, detailComponent, timeColumnComponent, hover } = props; + const { value, onChange, type = CALENDAR_VIEW.MONTH, title, detail, timeColumn, hover } = props; const [currentDate, setCurrentDate] = useState(isValid(new Date(value)) ? new Date(value) : todayDate); @@ -68,6 +68,7 @@ const Calendar: React.FC = (props) => { }, [todayDate]); const handleClickDay = useCallback((date) => { + setCurrentDate(date); if (!isNilOrEmpty(onChange)) { onChange(date); } @@ -102,7 +103,7 @@ const Calendar: React.FC = (props) => { >
- {type === CALENDAR_VIEW.WEEK && timeColumnComponent &&
} + {type === CALENDAR_VIEW.WEEK && timeColumn &&
} {WEEK_DAYS_SHORT.map((day, i) => (
{day} @@ -112,16 +113,16 @@ const Calendar: React.FC = (props) => { {range(weekStart, weekEnd).map((i: number) => (
- {type === CALENDAR_VIEW.WEEK && - timeColumnComponent && - React.createElement(timeColumnComponent)} + {type === CALENDAR_VIEW.WEEK && timeColumn + ? React.createElement(timeColumn) + : null} diff --git a/packages/components/src/Calendar/components/CalendarCell.tsx b/packages/components/src/Calendar/components/CalendarCell.tsx index 9bbc3451..1a69189d 100644 --- a/packages/components/src/Calendar/components/CalendarCell.tsx +++ b/packages/components/src/Calendar/components/CalendarCell.tsx @@ -25,7 +25,7 @@ const CalendarCell: React.FC = (props) => { return (
= (props) => { if (!isNilOrEmpty(day)) { newDate = setDate(currentDate, day); } - setValue(newDate); if (!isNilOrEmpty(onChange)) { onChange(newDate); } diff --git a/packages/documentation/src/pages/ButtonPage/components/__tests__/__snapshots__/index-test.tsx.snap b/packages/documentation/src/pages/ButtonPage/components/__tests__/__snapshots__/index-test.tsx.snap deleted file mode 100644 index 5a5d26f7..00000000 --- a/packages/documentation/src/pages/ButtonPage/components/__tests__/__snapshots__/index-test.tsx.snap +++ /dev/null @@ -1,151 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`(component) ButtonPage should match snapshot 1`] = ` - - - Button - - -
- - - -
-
- - - -
-
- - - -
- - -`; diff --git a/packages/documentation/src/pages/ButtonPage/components/__tests__/index-test.tsx b/packages/documentation/src/pages/ButtonPage/components/__tests__/index-test.tsx deleted file mode 100644 index e868123b..00000000 --- a/packages/documentation/src/pages/ButtonPage/components/__tests__/index-test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import { shallow } from 'enzyme'; - -import ButtonPage from '../'; - -describe('(component) ButtonPage', () => { - it('should match snapshot', () => { - expect(shallow()).toMatchSnapshot(); - }); -}); diff --git a/packages/documentation/src/pages/ButtonPage/components/index.tsx b/packages/documentation/src/pages/ButtonPage/components/index.tsx deleted file mode 100644 index 37ba8f64..00000000 --- a/packages/documentation/src/pages/ButtonPage/components/index.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; - -import Button from '@treejs/components/Button'; -import { Grid, GridCol } from '@treejs/components/Grid'; -import Section from '@treejs/components/Section'; -import Title from '@treejs/components/Title'; -import { TITLE_SPACE_ENUM } from '@treejs/components/Title/types'; -import { getMessage } from '@treejs/localization/message'; -import { STATUS } from '@treejs/types/common'; -import { noop } from '@treejs/utils'; - -import API from 'documentation/components/API'; -import Code from 'documentation/components/Code'; -import { ButtonLocalization } from 'documentation/localization/button'; -import { MenuLocalization } from 'documentation/localization/menu'; -import { generateDocumentationObject } from 'documentation/utils/documentation'; - -import { children, groups } from '../typedoc.json'; - -const propDefinition = generateDocumentationObject(groups, children); - -const ButtonPage = (): React.ReactElement => { - return ( - <> - - {getMessage(MenuLocalization.button)} - - - - -
- - - -
- -
- - - -
- -
- - - -
- - - - ); -}; - -export default ButtonPage; diff --git a/packages/documentation/src/pages/CalendarPage/components/Calendar.tsx b/packages/documentation/src/pages/CalendarPage/components/Calendar.tsx deleted file mode 100644 index 15ab6254..00000000 --- a/packages/documentation/src/pages/CalendarPage/components/Calendar.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useCallback, useState } from 'react'; - -import Calendar from '@treejs/components/Calendar/components/Calendar'; -import { CALENDAR_VIEW } from '@treejs/components/Calendar/types'; -import { Grid, GridCol } from '@treejs/components/Grid'; -import { GRID_SIZE_ENUM } from '@treejs/components/Grid/types'; -import Section from '@treejs/components/Section'; -import Title from '@treejs/components/Title'; -import { TITLE_SPACE_ENUM } from '@treejs/components/Title/types'; -import { getMessage } from '@treejs/localization/message'; - -import API from 'documentation/components/API'; -import Code from 'documentation/components/Code'; -import { MenuLocalization } from 'documentation/localization/menu'; -import { CustomDayInWeek } from 'documentation/pages/CalendarPage/components/CustomDayInWeek'; -import { generateDocumentationObject } from 'documentation/utils/documentation'; - -import { children, groups } from '../typedoc.json'; -import CalendarTimeColumn from './CalendarTimeColumn'; -import { CustomDayInMonth } from './CustomDayInMonth'; - -const propDefinition = generateDocumentationObject(groups, children); -const customDetailPropDefinition = generateDocumentationObject(groups, children, 'DetailComponentProps'); - -const CalendarPage = (): React.ReactElement => { - const [calendar, setCalendar] = useState(new Date()); - - const handleChangeCalendar = useCallback((value) => { - setCalendar(value); - }, []); - - return ( - <> - - {getMessage(MenuLocalization.calendar)} - - - - - - - - -
- - - - - - - -
- -
- - -
- - - -
- - - - -
- - - -
- - -
- - - - - - ); -}; - -export default CalendarPage; diff --git a/packages/documentation/src/pages/CalendarPage/components/CalendarHourCell.tsx b/packages/documentation/src/pages/CalendarPage/components/CalendarHourCell.tsx deleted file mode 100644 index e967d09d..00000000 --- a/packages/documentation/src/pages/CalendarPage/components/CalendarHourCell.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import cx from 'classnames'; - -type IProps = { - children?: any; - className?: string; - onClick?: (event: any) => void; - value: Date; -}; - -const CalendarHourCell: React.FC = (props) => { - const { className, onClick, children } = props; - return ( -
- {children} -
- ); -}; - -export default CalendarHourCell; diff --git a/packages/documentation/src/pages/CalendarPage/components/CalendarTimeColumn.tsx b/packages/documentation/src/pages/CalendarPage/components/CalendarTimeColumn.tsx deleted file mode 100644 index d9edef91..00000000 --- a/packages/documentation/src/pages/CalendarPage/components/CalendarTimeColumn.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { times } from 'ramda'; - -import { addMinutes, format } from 'date-fns'; - -import CalendarHourCell from './CalendarHourCell'; - -const CalendarTimeColumn: React.FC = () => { - return ( -
-
- {times( - (i) => ( - - {format(addMinutes(new Date(0, 0, 0, 8, 0), 30 * i), 'kk:mm')} -
-
- - ), - 16 - )} -
- ); -}; - -export default CalendarTimeColumn; diff --git a/packages/documentation/src/pages/CalendarPage/components/CustomDayInMonth.tsx b/packages/documentation/src/pages/CalendarPage/components/CustomDayInMonth.tsx deleted file mode 100644 index 23bfb504..00000000 --- a/packages/documentation/src/pages/CalendarPage/components/CustomDayInMonth.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useMemo } from 'react'; -import { times } from 'ramda'; - -import { format } from 'date-fns'; - -import CalendarCell from '@treejs/components/Calendar/components/CalendarCell'; -import { DetailComponentProps } from '@treejs/components/Calendar/types'; - -export const CustomDayInMonth: React.FC = (props) => { - const { value, isToday, isSelected, onClick } = props; - - const todayDay = format(value, 'dd'); - - const agenda = useMemo<{ [key: string]: React.ReactElement }>(() => { - const list: { [key: string]: React.ReactElement } = {}; - times((i) => { - list[todayDay] = ( -
-
todo
-
- ); - }, Math.round(Math.random())); - return list; - }, [todayDay, todayDay]); - - return ( - -
-
{format(value, 'dd')}
- {agenda[todayDay]} -
- - ); -}; diff --git a/packages/documentation/src/pages/CalendarPage/components/CustomDayInWeek.tsx b/packages/documentation/src/pages/CalendarPage/components/CustomDayInWeek.tsx deleted file mode 100644 index f065fe33..00000000 --- a/packages/documentation/src/pages/CalendarPage/components/CustomDayInWeek.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import { times } from 'ramda'; - -import cx from 'classnames'; -import { addMinutes, format } from 'date-fns'; - -import CalendarCell from '@treejs/components/Calendar/components/CalendarCell'; -import { DetailComponentProps } from '@treejs/components/Calendar/types'; -import { isNilOrEmpty } from '@treejs/utils'; - -import CalendarHourCell from 'documentation/pages/CalendarPage/components/CalendarHourCell'; - -export const CustomDayInWeek: React.FC = (props) => { - const { value, isToday, onClick, hover } = props; - - const handleClick = useCallback( - (value) => () => { - if (!isNilOrEmpty(onClick)) { - onClick(value); - } - }, - [onClick] - ); - - const agenda = useMemo(() => { - return times((i) => { - const value = addMinutes(new Date(props.value).setHours(8, 0, 0, 0), 30 * i); - if (Math.round(Math.random())) { - return ( - - ); - } else { - return ( - -
event
- - ); - } - }, 16); - }, [props.value]); - - return ( - - {format(value, 'dd')} - {agenda} - - ); -}; diff --git a/stories/Introduction.stories.mdx b/stories/Introduction.stories.mdx index 9e2015a8..9ac45d2c 100644 --- a/stories/Introduction.stories.mdx +++ b/stories/Introduction.stories.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from "@storybook/addon-docs/blocks"; diff --git a/stories/components/Button/Button.stories.mdx b/stories/components/Button/Button.stories.mdx new file mode 100644 index 00000000..639b7ac0 --- /dev/null +++ b/stories/components/Button/Button.stories.mdx @@ -0,0 +1,41 @@ +import Button from "@treejs/components/Button"; +import { STATUS } from "@treejs/types/common"; +import { ArgsTable, Story, Preview, Primary } from "@storybook/addon-docs"; +import { action } from "@storybook/addon-actions"; + + + +# Button + +`import Button from '@treejs/components/Button';` + + +export const Template = (args) =>