feat: first stable release

.eslintrc.cjs

@@ -17,6 +17,7 @@ module.exports = {
  },
  rules: {
  '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-non-null-assertion': 'off',
  '@typescript-eslint/no-unused-vars': 'off',
  },
 };

.storybook/preview.tsx

@@ -0,0 +1,198 @@
+import { withThemeByClassName } from '@storybook/addon-styling';
+import {
+ Controls,
+ Description,
+ Primary,
+ Stories,
+ Subtitle,
+ Title,
+} from '@storybook/blocks';
+import type { Preview, StoryContext } from '@storybook/react';
+import { themes } from '@storybook/theming';
+import type { DecoratorFunction } from '@storybook/types';
+import { useEffect, useState } from 'react';
+import { Datepicker } from '../src/components/datepicker';
+import {
+ DayMonth,
+ DayYear,
+ Next,
+ Prev,
+ Today,
+ Toggle,
+} from '../src/components/datepicker/button/Button.stories';
+import { InputDateHour } from '../src/components/datepicker/input/Input.stories';
+import { DateItems } from '../src/components/datepicker/items/Items.stories';
+import {
+ DateHourPicker,
+ HourPicker,
+} from '../src/components/datepicker/picker/Picker.stories';
+import { config } from '../src/jalali/config';
+import { classNames } from '../src/utils/class-names';
+import { addProvider, storyToJsx } from '../src/utils/story';
+import '../src/style.css';
+
+const preview: Preview = {
+ parameters: {
+ layout: 'fullscreen',
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+ docs: {
+ theme: themes.dark,
+ page: () => (
+ <>
+ <Title />
+ <Subtitle />
+ <Description />
+ <Primary />
+ <Controls />
+ <Stories />
+ </>
+ ),
+ source: {
+ transform: (_code: string, storyContext: StoryContext) => {
+ const displayName = storyContext.component!.displayName || '';
+ const isRoot = displayName === 'Datepicker';
+
+ const code = storyToJsx(storyContext, {}, displayName, 0);
+
+ return isRoot ? code : addProvider(code);
+ },
+ },
+ },
+ options: {
+ storySort: {
+ order: [
+ 'GetStarted',
+ 'Datepicker',
+ [
+ 'Provider',
+ 'Picker',
+ ['Docs', 'Date Hour Picker', 'Date Picker', 'Hour Picker'],
+ 'Button',
+ 'Input',
+ 'Items',
+ 'Item',
+ ],
+ ],
+ includeNames: true,
+ },
+ },
+ jsx: {
+ showFunctions: true,
+ },
+ },
+ argTypes: {
+ children: {
+ control: false,
+ },
+ as: {
+ control: 'text',
+ },
+ },
+};
+
+export default preview;
+
+export const decorators: DecoratorFunction<any>[] = [
+ withThemeByClassName({
+ themes: {
+ light: 'light',
+ dark: 'dark',
+ },
+ defaultTheme: 'dark',
+ }),
+ (Story, { parameters }) => {
+ const [value, setVaue] = useState<Date | null>(new Date());
+
+ const [isJalali, setIsJalali] = useState(
+ localStorage.getItem('isJalali') == '1',
+ );
+
+ useEffect(() => {
+ localStorage.setItem('isJalali', isJalali ? '1' : '0');
+ }, [isJalali]);
+
+ if (parameters.showPreview === false) {
+ return (
+ <div className="h-[600px] flex justify-center items-start p-4">
+ <Story />
+ </div>
+ );
+ }
+
+ parameters.isJalali = isJalali;
+
+ return (
+ <div className="flex h-full">
+ <Datepicker
+ key={isJalali ? 'jalali' : 'normal'}
+ config={isJalali ? config : undefined}
+ startOfWeek={isJalali ? 6 : 0}
+ value={value}
+ onChange={setVaue}
+ >
+ <div
+ className="overflow-y-auto relative flex justify-center items-start flex-1 m-4"
+ dir={isJalali ? 'rtl' : 'ltr'}
+ >
+ <Story />
+ </div>
+ <div
+ className={classNames(
+ 'bg-zinc-700 p-2 border-gray-500 flex flex-col items-center space-y-4',
+ !parameters.showDatepicker && 'self-start',
+ )}
+ >
+ <div className="flex space-x-4">
+ <Datepicker.Input {...InputDateHour.args} />
+ <button
+ className="p-2 text-sm hover:bg-gray-700 hover:text-white ml-auto block border rounded-md border-gray-500"
+ onClick={() => setIsJalali(!isJalali)}
+ >
+ Toggle jalali
+ </button>
+ </div>
+ {parameters.showDatepicker && (
+ <>
+ <Datepicker.Picker {...DateHourPicker.args}>
+ {({ monthName, hour, minute, year }) => (
+ <>
+ <div className="flex w-full items-center justify-between space-x-6 py-2 rtl:space-x-reverse">
+ <Datepicker.Button {...Prev.args} />
+ <div className="flex">
+ <Datepicker.Button {...Toggle.args}>
+ {('0' + hour).slice(-2) +
+ ':' +
+ ('0' + minute).slice(-2)}
+ </Datepicker.Button>
+ <Datepicker.Button {...DayMonth.args}>
+ {monthName}
+ </Datepicker.Button>
+ <Datepicker.Button {...DayYear.args}>
+ {year}
+ </Datepicker.Button>
+ </div>
+ <Datepicker.Button {...Next.args} />
+ </div>
+ <Datepicker.Items {...DateItems.args} type={undefined} />
+ <Datepicker.Button {...Today.args} />
+ <Datepicker.Picker
+ {...HourPicker.args}
+ alwaysOpen={false}
+ />
+ </>
+ )}
+ </Datepicker.Picker>
+ </>
+ )}
+ </div>
+ </Datepicker>
+ </div>
+ );
+ },
+];

.yarnrc.yml

@@ -1,7 +1,3 @@
 nodeLinker: node-modules
 
-plugins:
- - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
- spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.6.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

README.md

@@ -1,9 +1,19 @@
 # React Date Picker
 
 [![npm version](https://badge.fury.io/js/@aliakbarazizi%2Fheadless-datepicker.svg)](https://badge.fury.io/js/@aliakbarazizi%2Fheadless-datepicker)
-![npm](https://img.shields.io/npm/dm/%40aliakbarazizi/headless-datepicker)
+[![npm](https://img.shields.io/npm/dm/%40aliakbarazizi/headless-datepicker)](https://www.npmjs.com/package/@aliakbarazizi/headless-datepicker)
 
-Headless datepicker and hourpicker for React
+The Headless Datepicker is a powerful and flexible tool designed for ReactJS applications.
+It allows developers to create customizable and visually appealing datepickers with ease.
+Unlike traditional datepickers, this component is "headless," meaning it provides the core functionality
+and logic while allowing developers to design their own user interface.
+
+## Features
+
+- Datepicker, Hourpicker, and Calendar Modes: The component supports multiple modes, including datepicker, hourpicker, and calendar modes, allowing users to select dates, hours, or navigate through a full calendar.
+- Headless Design: The component follows a headless architecture, separating the logic from the presentation layer. This enables developers to design and customize the user interface according to their application's specific needs.
+- Multi Picker Support: The component allows for nesting multiple pickers within each other, enabling advanced and complex selection scenarios.
+- Keyboard Navigation: Users can easily navigate and interact with the datepicker using keyboard shortcuts, enhancing accessibility and improving the user experience.
 
 ## Installation
 
@@ -32,12 +42,12 @@ import Datepicker from '@aliakbarazizi/headless-datepicker';
 ```jsx
 <Datepicker>
  <Datepicker.Input />
- <Datepicker.Picker>
- {({ monthName, hour, minute, mode, year }) => (
+ <Datepicker.Picker defaultType="day">
+ {({ monthName, hour, minute, year }) => (
  <>
  <Datepicker.Button action="prev">Prev</Datepicker.Button>
  <Datepicker.Button action="next">Next</Datepicker.Button>
- <Datepicker.Items type={mode}>
+ <Datepicker.Items>
  {({ items }) =>
  items.map((item) => (
  <Datepicker.Item key={item.key} item={item}>

package.json

@@ -107,5 +107,8 @@
  "@commitlint/config-conventional"
  ]
  },
- "packageManager": "yarn@3.6.0"
+ "resolutions": {
+ "markdown-to-jsx": "~7.1.8"
+ },
+ "packageManager": "yarn@3.6.1"
 }

src/GetStarted.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Markdown, Meta } from '@storybook/blocks';
+import ReadMe from '../README.md?raw';
+import * as ProviderStories from './components/datepicker/provider/Provider.stories';
+
+<Meta title="Get started" />
+
+<Markdown>{ReadMe.match(/#[^#]*/)[0]}</Markdown>
+
+<Canvas of={ProviderStories.DatePicker} meta={ProviderStories} />
+
+<Markdown>{ReadMe.replace(/#[^#]*/, '')}</Markdown>