Vitepress documentation (#27)

* Update dependencies
Fix slack example path

* Vitepress docs WIP

* bump version

* add types export

* Bump version to 0.1.1

* v0.1.2 import `React` global

* Work on docs more

* run biome formatter

* Start working on api reference

* Add "Why this library page"

* Start date picker reference

* Refacto style changes

* example formatting

* disable source maps

* Rewrite why this lib, use badges

* Finalize DatePickerState docs
Implement `altDateFormat` prop

* run formatter

* Introduce use of typos-cli locally

* Update to actions/cache@v4 and actions/checkout@v4

* Update to oven-sh/setup-bun@v1.1.1 for Node ^20

* bump @happy-dom/global-registrator

* Enable sitemap.xml generation

* Fix linting

* add robots.txt

* Fix syntax error in example

* WIP rework workflows we'll see how it goes

* add npm link to docs

* Fix npm publish action

* Bump version to 0.1.5

* Update to actions/setup-node@v4

* Add og content and banner

* format

* add google verification meta tag

* Update dependencies

* fix bun version in workflow

* fix formatting

* exclude npm links from lychee to prevent rate limit

* finalize docs

.github/workflows/npm.yaml

@@ -6,24 +6,38 @@ on:
 
 jobs:
   build:
+    strategy:
+      matrix:
+        registry:
+          - url: 'https://registry.npmjs.org'
+            token: NPM_TOKEN
+          - url: 'https://npm.pkg.github.com'
+            token: GH_TOKEN
+
     runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
 
     steps:
       - name: 🛒 Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: ✨ Install bun
-        uses: oven-sh/setup-bun@v1
+        uses: oven-sh/setup-bun@v1.1.1
+        with:
+          bun-version: 1.0.35
+
+      - name: ✨ Install node
+        uses: actions/setup-node@v4
         with:
-          bun-version: 1.0.21
+          node-version: '20.x'
+          registry-url: '${{ matrix.registry.url }}'
 
-      - uses: actions/cache@v3
-        name: Setup deps cache
+      - uses: actions/cache@v4
+        name: 📦 Setup deps cache
         with:
-          path: ${{ env.STORE_PATH }}
+          path: node_modules
           key: ${{ runner.os }}-modules-${{ hashFiles('**/bun.lockb') }}
           restore-keys: |
             ${{ runner.os }}-modules-
@@ -37,4 +51,4 @@ jobs:
       - name: 🔖 Release
         run: npm publish
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPMJS_TOKEN}}
+          NODE_AUTH_TOKEN: ${{ secrets[matrix.registry.token] }}

.github/workflows/tests-and-static-analysis.yaml

@@ -0,0 +1,55 @@
+name: Tests and static analysis
+
+on:
+  push:
+    branches: ["dev"]
+  pull_request:
+    branches: ["dev"]
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+
+    steps:
+      - name: 🛒 Checkout branch
+        uses: actions/checkout@v4
+
+      - name: ✨ Install bun
+        uses: oven-sh/setup-bun@v1.1.1
+        with:
+          bun-version: 1.0.35
+
+      - uses: actions/cache@v4
+        name: 📦 Setup deps cache
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/bun.lockb') }}
+          restore-keys: |
+            ${{ runner.os }}-modules-
+
+      - name: ➕ Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: 📦 Build docs
+        run: bun run docs:build
+
+      - name: 🚨 Check formatting
+        run: bun run format
+
+      - name: 🚨 Lint
+        run: bun run lint
+
+      - name: 🧪 Tests
+        run: bun test
+
+      - name: 📖 Check for typos
+        uses: crate-ci/typos@master
+
+      - name: 📖 Check for broken links
+        uses: lycheeverse/lychee-action@v1.9.0
+        with:
+          fail: true
+          args: -v docs/.vitepress/dist docs/**/*.md docs/*.md https://date-picker.zuruh.dev README.md CONTRIBUTING.md --exclude npmjs.com
+          token: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/docs/.vitepress/dist
+/docs/.vitepress/cache

.ladle/components.tsx

@@ -1,6 +1,6 @@
 import '@fontsource/poppins';
 import type { GlobalProvider } from '@ladle/react';
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 
 import day from 'dayjs';
 import week from 'dayjs/plugin/weekOfYear';

.ladle/config.mjs

@@ -1,7 +1,9 @@
-import { resolve } from 'path';
+import { resolve } from 'node:path';
 
+/** @type {import('@ladle/react').UserConfig} */
 export default {
   viteConfig: resolve(process.cwd(), '.ladle', 'vite.config.ts'),
   outDir: 'preview',
   defaultStory: 'basic--simple',
+  stories: 'src/stories/**/*.stories.{js,jsx,ts,tsx,mdx}',
 };

CONTRIBUTING.md

@@ -1,11 +1,21 @@
-## Software requirements
+# Software requirements
 
-- [Bun](https://bun.sh) ^1.0.25
+- [Bun](https://bun.sh) ^1.0.35
+- [Typos CLI](https://github.com/crate-ci/typos)
+- [Lychee](https://github.com/lycheeverse/lychee)
 
 ## Installation
 
-Fork and clone the project locally, then install the dependencies with `bun install` and run the tests to ensure everythings works correctly (with `bun test`).
+Fork and clone the project locally, then install the dependencies with `bun install` and run the tests to ensure everything works correctly (with `bun test`).
 
 ## Linting & Formatting
 
-This project uses [Biome.js](https://biomejs.dev) both for formatting and linting. Use it with the scripts `bun lint` and `bun format`
+This project uses [Biome.js](https://biomejs.dev) both for formatting and linting. Use it with the scripts `bun lint:biome` and `bun format`
+
+## Typos
+
+We use the Typos CLI to check for typos in code and documentations. You can install it from their github repository
+
+## Broken links
+
+Lastly, Lychee is a broken link checker; it is used in the CI to ensure the docs work fine

README.md

@@ -1,10 +1,10 @@
 # Headless React Date Picker
 
-![npm](https://img.shields.io/static/v1?label=&message=@zuruuh/react-date-picker&color=CB3837&logo=npm&logoColor=white)
-
 A headless React date picker library for easily integrating date selection into your web applications.
 This library provides a flexible and highly customizable date picker, giving you complete control over the presentation and interaction with the .
 
+<!-- ![npm](https://img.shields.io/static/v1?label=&message=@zuruuh/react-date-picker&color=CB3837&logo=npm&logoColor=white) -->
+
 <!-- ![Demo](demo.gif) TODO: add slack date picker demo -->
 
 ## Features
@@ -20,3 +20,8 @@ This library provides a flexible and highly customizable date picker, giving you
 # Contribution
 
 Check the ![contribution guidelines](CONTRIBUTING.md) to contribute to this lib.
+
+## Special thanks
+
+- The [Twemoji](https://github.com/twitter/twemoji) for the great SVGs
+- The [DayJS](https://github.com/iamkun/dayjs) team for their awesome lib

biome.json

@@ -1,14 +1,38 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.5.2/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
   "organizeImports": {
     "enabled": true
   },
   "linter": {
     "enabled": true,
     "rules": {
       "recommended": true,
+      "correctness": {
+        "useHookAtTopLevel": "error",
+        "noUnusedImports": "warn"
+      },
       "style": {
-        "noNonNullAssertion": "off"
+        "noNonNullAssertion": "off",
+        "noNamespace": "error",
+        "noNegationElse": "warn",
+        "useNumberNamespace": "warn",
+        "useNodejsImportProtocol": "warn",
+        "useImportType": "warn",
+        "useExportType": "warn",
+        "useConsistentArrayType": {
+          "level": "warn",
+          "options": {
+            "syntax": "generic"
+          }
+        },
+        "useForOf": "warn",
+
+        "noRestrictedGlobals": {
+          "level": "error",
+          "options": {
+            "deniedGlobals": ["document"]
+          }
+        }
       }
     }
   },

docs/.vitepress/config.ts

@@ -0,0 +1,74 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  lang: 'en-US',
+  title: '@zuruuh/react-date-picker',
+  description: 'A fully customizable date picker component for React',
+  cleanUrls: true,
+  lastUpdated: true,
+
+  sitemap: {
+    hostname: 'https://date-picker.zuruh.dev',
+  },
+
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.svg' }],
+    ['meta', { name: 'theme-color', content: '#61DAFB' }],
+    ['meta', { name: 'og:type', content: 'website' }],
+    ['meta', { name: 'og:locale', content: 'en' }],
+    [
+      'meta',
+      { name: 'og:image', content: 'https://date-picker.zuruh.dev/og.png' },
+    ],
+    ['meta', { name: 'og:site_name', content: 'React Date Picker' }],
+    [
+      'meta',
+      {
+        name: 'google-site-verification',
+        content: 'LZC1PtnNXi67eyaRqSTOpaMrZudEdiwnPq8hB-CygX8',
+      },
+    ],
+  ],
+
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Getting Started', link: '/installation' },
+      { text: 'API Reference', link: '/reference' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Getting started',
+        items: [
+          { text: 'Installation', link: '/installation' },
+          { text: 'Philosophy', link: '/philosophy' },
+          { text: 'Why this library ?', link: '/why-this-library' },
+          { text: 'Examples', link: '/examples' },
+        ],
+      },
+      {
+        text: 'API Reference',
+        items: [
+          { text: 'Index', link: '/reference' },
+          { text: 'DatePicker', link: '/reference/date-picker' },
+          { text: 'Calendar', link: '/reference/calendar' },
+          { text: 'Week', link: '/reference/week' },
+          { text: 'Day', link: '/reference/day' },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Zuruuh/react-date-picker' },
+      {
+        icon: 'npm',
+        link: 'https://www.npmjs.com/package/@zuruuh/react-date-picker',
+      },
+    ],
+
+    search: {
+      provider: 'local',
+    },
+  },
+});