lilingxi01 / ams-date-picker

(WIP) Ams Date Picker - A modern, magical, and unstyled date picker for React. We have your favorite Time Machine and Input Supercharge out-of-box.

👋 Hi there! I'm Lingxi Li, 李凌熹. (CV / Resume)

PRONOUNS: He / Him

🎓 - I am currently a Computer Science master student at UMass Amherst. Expected to graduate in May 2024 and planning to be a PhD student in HCI. Open to any offer or discussion!!

🔬 - I am actively doing research in Human-Computer Interaction (HCI) field with passionate people at UMass BioNLP group.

👨‍💻 - I am working part-time as Software Engineer at ECA Solar LLC. There are infinite possibilities right there in ECA and in solar industry.

🌍 - Besides from my master program and my works, I have been doing multiple outstanding side-projects (ongoing) like Ams Date Picker. You are expected to see some of them coming next year.

🌃 - I extremely enjoy the outdoors especially exploring nature and stargazing. So when tired, I liked to drive my car out to a state park. Nature gives me the power of all-day coding. (I also take photos for them. You can find it in my instagram!! Link is at the bottom of the page.)

🛰️ Here are some memos for you to know more about me:

• Modern Full-Stack Software Engineer (2020 - now), experienced with Next.js (both pages and app dir), React, Postgres, React Native, WebSocket, and much more.

• Apple platform Software Engineer (2020 - now), working mainly with SwiftUI. This is what I love and enjoy to do!

• HCI Student Researcher (2022 - now), focusing on exploring HCI projects with NLP and medical fields.

• Software Architect (2021 - now), solved complex real-world questions like LLM-friendly CoT agent runner written in Python but scaling on TypeScript, and a multi-message conversation architecture served between users and LLMs.

• UX-oriented Software Crafter (2017 - now), concentrating on delivering the best ever experience to all of my projects, work or side.

• ML Software Engineer (2022 - 2023), familiar with PyTorch, Keras, Transformers, Numpy, Pandas, etc.

• I love to build a UI component library dedicately for the use of a company / a set of projects because different use cases have different needs. Full customization with Headless components is almost the best solution in UI library!

• Good at leading team, composing big project into pluggable sub-projects, and re-unite them like creating an art.

🙈 What can I do?

• Programming Languages: JavaScript (almost fully TypeScript), Python, Swift, C, Java, C#, SQL.

• Front-end Frameworks: Next.js, React, SwiftUI (iOS/iPadOS/macOS), pure HTML (with CSS), and more.

• Back-end Frameworks: TypeScript API architectures (like Bun server, tRPC, or simply Express), Django, Flask, FastAPI, Springboot, or any framework that is already working.

• Database: PostgreSQL, MySQL, MongoDB, and a lot of serverless options (PlanetScale, Neon).

• Others: CI/CD, Dockerize, UI/UX Design, native adaptation, 3D model integration, Git, Figma, and Unity.

💻 What am I currently aiming for? (What am I learning or doing?)

• Every startup needs a lot of money. So do mine (in the future).

• Publish my first HCI research paper by the end of 2023. Explore more HCI in NLP and medical fields in the future.

• Make a lot of great user-facing softwares that will be totally free and no-ads.

👌 What can I do for you or with you?

• Help you grow your business fast and efficiently by designing a state-of-the-art software development stack for you.

• Design and develop a dedicated UI component library (on nearly all programming languages and all platforms) for you that fits totally fantastic with your design language and amazingly scalable.

• Bring a small team up with my outstanding team-leading and collaborating skills in Computer Science and software development.

• Share brainstorming ideas, and make your dream project come true in the most detailed way. You will love what I create.

🐦 Where can you find me?

•   @ Lingxi Li

ams-date-picker's Issues

🛠️ Core Processor Unit Tests

Overview

Finish unit tests for the core processor of Ams Date Picker.

Needed Tests

TBD.

✨ Component-wise Dark Mode

Overview

The component should support dark mode out-of-box. To turn it on, there should be at least two ways: a class name (dark) and a prop.

Design

Instructions or Notes

We should use the dark theme configuration provided by Stitches.

⚛️ Temporary Placeholder Page

Description

Right now, our Ams Date Picker is still a work in progress. We do not want to confuse any people coming to our website before the release, so while we are building the core content of the site, we need a placeholder place for telling people that it is not available yet (and remove any inapplicable information).

This should sit in a separate branch and will never merge into main.

✨ TypeScript Rewrite

Overview

To make Ams Date Picker type-safe, we may need to rewrite the entire component with TypeScript. This is still a TBD event as we might not choose to do so in a sooner future.

Tasks

• Finish project configuration.
• Rewrite main algorithms in TypeScript.
• Rewrite main components in TypeScript.

🛠️ UI Tests Configuration

Overview

Use Cypress or Playwright to test the UI part (integration). It might not test the snapshot throughly (which may be hard or time-consuming), but has to test the UI functionality.

Needed Tests

TBD.

✨ Localization Formatting Support

Overview

To adopt a wider range of users, we need to support the localized format and we should ask users for their preferences of localization provider like MUI does.

Instructions or Notes

API is still TBD. The output should be creating localized format based on user's timezone (automatically, but still customizable).
The following libraries should be supported:

• JavaScript Date
• Date-fns
• Moment
• Day.js
• Luxon

✨ Input Finalization Detection with Localization

Overview

For now, we already have the input finalization detection feature in headless input component. However, when we are checking the date format, we only use the US format – not the local timezone one. It should be adopted as part of our localization support.

🚩 Roadmap - First Major Release

Description

I have already migrated the DatePicker component, which is created by me, from its original repository (by Indigo Development) to here following the open source rule. At the same time, I kept all old contributions from Git, so our original contributor, Yan, can still be an honor contributor of this project.

I am really glad to separate this out and make it reusable. But before releasing it formally, we need to make some changes. Because the original BPDatePicker is not headless and is using MUI as its root input component and its floating date picker panel, we will remove them and all unnecessary dependencies (e.g. MUI), and make it headless, so you can style it with your own needs.

This issue is a tracking issue of the first release. We will finish everything on here and then release. I will be very happy if you would like to join this project and contribute to it.

Rough Roadmap

• Add a README.
• Add ESLint and Lint-checking GitHub Actions.
• Remove MUI dependencies and replace it using raw HTML elements (or simple library).
• Separate the component into sections in order to make it headless.
• Build a center website.
• Build a little documentation site describing the features and module usage.
• Create a headful version of AmsDatePicker.
• Unit tests with Jest.
• Integration tests with Playwright.
• GitHub Action for tests.

Tasks

• #4
• #5
• #6
• #7
• #9
• #11
• #20
• #21
• #28

Tests

• #8
• #12

Website

• #17
• #15
• #16

✨ Migration: Headless Input Component

Overview

Migrating the input component from Indigo to Ams; convert all MUI dependencies into raw HTML element; and add needed APIs for headless input while using it independently. This view should be usable directly and independently and should have no style (no any visual part, including default outline) at all.

Features

The headless input component should have following features:

• Totally style-less.
• Callback onChange when the input is finalized.
• Input finalization detection.
  • When user hits enter.
  • When user blurs the input and the input is already in date format.
• Callback onError when there is an error.
• Throw no error at all (except wrong type, e.g. pass a string to the onChange).
• Support wild props properly (pass in and avoid conflict).
• Detect when should the selector be opened or be closed.
  • This feature is moved into the issue of Date Selector (#5) as it is associated to Selector's behavior.

🎨 New Component: Headful Date Picker

Overview

We are going to integrate all components together to become a headful (styled) date picker component that can be imported and used directly.

Notes

• The Ams User Manual component will be made as a separate component that can be used independently.

Sections

• Headless Input
• Headful Frame
• Date Selector Toggle
• Date Selector Integration

Design

⚛️ Placeholder Website Fixes

Description

There are a few issues in the placeholder website.

⚛️ Website - Documentation Page Layout

Description

I am planning to built-in the documentation into the website directly by using MDX. So we do not need a separate documentation system and have a full power of customization.

Design / Solution

• Embedding MDX.
• Sidebar navigation.
• Core typography (styles).
• Codesandbox integration.
• Report on GitHub button.

Additional Context

For the styling of core typography, we can refer to the documentation website of MUI or Radix UI.

✨ Support Input from Main Stream Date Libraries

Overview

Should support date type of most main stream libraries, not just JavaScript Date.

This support should match the following sections: the given value state and the onChange function – all types among these areas should be the same.

If we are passing a Moment.js object into the value prop, we are going to get a Moment.js object from onChange callback.

All changes of our processor will still happen under JavaScript Date, which is the most efficient solution (per this).

Date Libraries to be supported

• Moment
• Luxon
• Day.js

✨ Migration: Ams User Manual

Overview

Because not everyone knows how to use Ams Date Picker from day one, we are making this to introduce the feature (especially magic modifiers) and for users to check when needed. It should be a page-wise modal as it has fairly enough content to display.

This component should cover on the entire page as a sidebar and it should not block the mouse event on original body (if possible) as user may check the manual and do the input at the same time.

Instruction

The original version of DatePickerHelper is not formatted well (because it is using the pure HTML, which is inefficient on editing and maintaining). I am planning to separate the manual part to several Markdown files (and parse them in the Ams User Manual component) for maintainability.

Tasks

• Headless conversion.
• Complete version.

Design

⚛️ Website - Home Page

Description

In this repository, the root hierarchy is used for the website of Ams Date Picker. The library files are all under the package folder. Website is used to host the library for developing locally (so you can check how it looks and works in real time) and to deliver a live demo online at https://ams.lingxi.li/.

Design / Solution

The home page needs a live demo, and does not have a specific design prototype for now.

• Navigation bar.
• Footer.
• Hero text section.
• Live demo section.
• Introduction section.
• Install section (including install commands).

🎨 New Component: Ams Date Selector

Overview

In definition, we use "Ams Date Selector" (different from the definition of Ams Date Picker) to represent the floating selector of a date picker, which is a floating modal, having a list view to select the year, a calendar view to pick the date, and a scroll/drag view to select the time. We are using this new component to replace the old MUI static date picker, which is complicated, buggy, and test-unfriendly.

Feature Checklist

• Popover provider.
• Date/time section switch.
• Year selection.
• Year selection input.
• Month selection.
• Month selection input (with month+day input support).
• Time selection (hour, minute, and second).
• Time selection input.
• Integrate with headless input component.

Design

⚛️ Dark Mode Support

Description

All the dark mode support (including system support) to the website.
Note: not the component itself.

✨ Date Range Selection Support

Overview

In some cases, users need to select a date range rather than a specific date. We are going to make Ams Date Picker support this behavior and provide proper APIs.

This feature is planned into 0.2.0 release (not 0.1.0).

Design

TBA.

✨ Auto-release GitHub Action

Overview

Create a GitHub Action for auto-releasing while pushing/merging into the release branch.

✨ New Module: Command Engine

Overview

We need a new command engine to process all kinds of shortcut commands and modifiers. Writing a bunch of if statement is not a great idea for reusability and extensibility.

Engine Features

• Separate all different commands into a dedicated file as a list of JavaScript objects.
• Add validation support for all commands.
• Optimize the command engine file for extensibility.

✨ Migration: Ams Daylight Saving Conflict Resolver (DSCR)

Overview

This component is used to resolve the daylight saving time conflict (only occurring in some specific areas, e.g. US). It should give users two options when the following two requirements are both met:

• User is in an area that has the daylight saving time.
• The selected date and time is in the potential conflict range (e.g. for US: 1:00 AM on November 7, 2021).

Tasks

• Functionality rebuild.
• Styling.

Design

We have two different designs, we will use the first one for the first major release: