Add dates plugin (#387)

* add dates plugin * fix lint warnings for dates plugin * types: make format optional * changelogs * fix: add ts-ignore on Input * replace format with locale for dates * update size-limit * uncomment react-datepicker.css * remove unnecessary handler on dates-plugin Co-authored-by: David Bismut <[email protected]>
pmndrs · Oct 21, 2022 · 14a5605 · 14a5605 · vercel · Oct 21, 2022
1 parent 6d1781a
commit 14a5605
Show file tree

Hide file tree

Showing 24 changed files with 5,060 additions and 6,855 deletions.
diff --git a/.changeset/violet-apes-sit.md b/.changeset/violet-apes-sit.md
@@ -0,0 +1,5 @@
+---
+'@leva-ui/plugin-dates': major
+---
+
+feat: new date picker plugin
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,5 +1,7 @@
 {
-  "packages": ["packages/*"],
+  "packages": [
+    "packages/*"
+  ],
   "sandboxes": [
     "/demo/src/sandboxes/leva-minimal",
     "/demo/src/sandboxes/leva-busy",
@@ -11,6 +13,7 @@
     "/demo/src/sandboxes/leva-plugin-plot",
     "/demo/src/sandboxes/leva-plugin-bezier",
     "/demo/src/sandboxes/leva-plugin-spring",
+    "/demo/src/sandboxes/leva-plugin-dates",
     "/demo/src/sandboxes/leva-custom-plugin"
   ],
   "node": "14"

diff --git a/demo/package.json b/demo/package.json
@@ -17,7 +17,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.3.2",
-    "three": "^0.137.5",
+    "three": "^0.143.0",
     "wouter": "^2.7.5"
   },
   "devDependencies": {

diff --git a/demo/src/App.jsx b/demo/src/App.jsx
@@ -8,6 +8,7 @@ import Minimal from './sandboxes/leva-minimal/src/App'
 import PluginSpring from './sandboxes/leva-plugin-spring/src/App'
 import PluginPlot from './sandboxes/leva-plugin-plot/src/App'
 import PluginBezier from './sandboxes/leva-plugin-bezier/src/App'
+import PluginDates from './sandboxes/leva-plugin-dates/src/App'
 import Busy from './sandboxes/leva-busy/src/App'
 import AdvancedPanels from './sandboxes/leva-advanced-panels/src/App'
 import Scroll from './sandboxes/leva-scroll/src/App'
@@ -42,6 +43,7 @@ const links = {
   'leva-plugin-spring': PluginSpring,
   'leva-plugin-plot': PluginPlot,
   'leva-plugin-bezier': PluginBezier,
+  'leva-plugin-dates': PluginDates,
   'leva-custom-plugin': CustomPlugin,
 }
 

diff --git a/demo/src/sandboxes/leva-plugin-dates/package.json b/demo/src/sandboxes/leva-plugin-dates/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "leva-plugin-dates",
+  "version": "1.0.0",
+  "keywords": [],
+  "main": "src/index.jsx",
+  "dependencies": {
+    "@leva-ui/plugin-dates": "*",
+    "leva": "*",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "typescript": "^4.1.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/demo/src/sandboxes/leva-plugin-dates/public/index.html b/demo/src/sandboxes/leva-plugin-dates/public/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Leva Sandbox</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/demo/src/sandboxes/leva-plugin-dates/src/App.tsx b/demo/src/sandboxes/leva-plugin-dates/src/App.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { date } from '@leva-ui/plugin-dates'
+import { useControls } from 'leva'
+
+export default function App() {
+  const { birthday } = useControls({
+    birthday: date({
+      date: new Date(),
+      locale: 'en-UK',
+      inputFormat: 'dd.MM.yyyy',
+    }),
+  })
+
+  return <div className="App">{birthday.formattedDate}</div>
+}
diff --git a/demo/src/sandboxes/leva-plugin-dates/src/index.css b/demo/src/sandboxes/leva-plugin-dates/src/index.css
@@ -0,0 +1,19 @@
+body {
+  font-family: system-ui, sans-serif;
+  min-height: 100vh;
+  background: linear-gradient(140deg, rgb(165, 142, 251), rgb(233, 191, 248));
+  margin: 0;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+pre {
+  max-width: 720px;
+  margin: 20px;
+  padding: 20px;
+  border: 10px solid black;
+}
diff --git a/demo/src/sandboxes/leva-plugin-dates/src/index.tsx b/demo/src/sandboxes/leva-plugin-dates/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+import './index.css'
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  rootElement
+)
diff --git a/demo/src/sandboxes/leva-transient/package.json b/demo/src/sandboxes/leva-transient/package.json
@@ -9,7 +9,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
-    "three": "^0.128.0"
+    "three": "^0.143.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "ci:release": "yarn build && yarn changeset publish",
     "validate": "preconstruct validate",
     "tsc": "tsc --noEmit",
-    "size": "yarn size-limit",
+    "size": "yarn build && size-limit",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook --quiet",
     "cypress:open": "cypress open",
@@ -45,6 +45,11 @@
       "name": "Leva Plugin Spring",
       "limit": "3s",
       "path": "packages/plugin-spring/dist/leva-ui-plugin-spring.*.prod.js"
+    },
+    {
+      "name": "Leva Plugin Dates",
+      "limit": "3s",
+      "path": "packages/plugin-dates/dist/leva-ui-plugin-dates.*.prod.js"
     }
   ],
   "repository": {
@@ -65,6 +70,7 @@
     "@emotion/react": "^11.7.1",
     "@preconstruct/cli": "^2.1.5",
     "@radix-ui/react-icons": "^1.0.3",
+    "@size-limit/preset-big-lib": "^8.1.0",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
@@ -93,6 +99,7 @@
     "pretty-quick": "^3.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "size-limit": "^8.1.0",
     "start-server-and-test": "^1.14.0",
     "tsd": "^0.19.1",
     "typescript": "4.5.5"

diff --git a/packages/leva/src/components/Control/ControlInput.tsx b/packages/leva/src/components/Control/ControlInput.tsx
@@ -53,6 +53,7 @@ export function ControlInput({
         ...rest,
       }}>
       <StyledInputWrapper disabled={disabled}>
+        {/* @ts-ignore */}
         <Input />
       </StyledInputWrapper>
     </InputContext.Provider>

diff --git a/packages/leva/src/components/Folder/StyledFolder.ts b/packages/leva/src/components/Folder/StyledFolder.ts
@@ -32,7 +32,8 @@ export const StyledWrapper = styled('div', {
       isRoot: true,
       fill: false,
       css: {
-        overflowY: 'auto',
+        // TODO: fix for calendar popup
+        // overflowY: 'auto',
         // 20px accounts for top margin
         maxHeight: 'calc(100vh - 20px - $$titleBarHeight)',
       },

diff --git a/packages/plugin-dates/CHANGELOG.md b/packages/plugin-dates/CHANGELOG.md
@@ -0,0 +1 @@
+# @leva-ui/plugin-dates
diff --git a/packages/plugin-dates/README.md b/packages/plugin-dates/README.md
@@ -0,0 +1,19 @@
+## Leva Plot
+
+### Installation
+
+```bash
+npm i @leva-ui/plugin-plot
+```
+
+### Quick start
+
+```jsx
+import { useControls } from 'leva'
+import { plot } from '@leva-ui/plugin-plot'
+
+function MyComponent() {
+  const { y } = useControls({ y: plot({ expression: 'cos(x)', graph: true, boundsX: [-10, 10], boundsY: [0, 100] }) })
+  return y(Math.PI)
+}
+```
diff --git a/packages/plugin-dates/package.json b/packages/plugin-dates/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@leva-ui/plugin-dates",
+  "version": "0.9.15",
+  "main": "dist/leva-ui-plugin-dates.cjs.js",
+  "module": "dist/leva-ui-plugin-dates.esm.js",
+  "types": "dist/leva-ui-plugin-dates.cjs.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pmndrs/leva.git",
+    "directory": "packages/plugin-dates"
+  },
+  "bugs": "https://github.com/pmndrs/leva/issues",
+  "peerDependencies": {
+    "@use-gesture/react": "^10.0.0",
+    "leva": ">=0.9.15",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "react-datepicker": "^4.8.0"
+  },
+  "devDependencies": {
+    "@types/react-datepicker": "4.4.2"
+  }
+}
diff --git a/packages/plugin-dates/src/Date.stories.tsx b/packages/plugin-dates/src/Date.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import Reset from '../../leva/stories/components/decorator-reset'
+import { useControls } from '../../leva/src'
+
+import { date } from './index'
+import { DateInput } from './date-types'
+
+export default {
+  title: 'Plugins/Dates',
+  decorators: [Reset],
+} as Meta
+
+const Template: Story<DateInput> = (args) => {
+  const { birthday } = useControls({ birthday: date(args) })
+  return <div>{birthday.formattedDate}</div>
+}
+
+export const DefaultDate = Template.bind({})
+DefaultDate.args = { date: new Date() }
+
+export const CustomLocale = Template.bind({})
+CustomLocale.args = { date: new Date(), locale: 'en-US' }
+
+export const CustomInputFormat = Template.bind({})
+CustomInputFormat.args = { date: new Date(), inputFormat: 'yyyy-MM-dd' }
diff --git a/packages/plugin-dates/src/Date.tsx b/packages/plugin-dates/src/Date.tsx
@@ -0,0 +1,39 @@
+import { Components, useInputContext } from 'leva/plugin'
+import React, { forwardRef } from 'react'
+import DatePicker, { CalendarContainer } from 'react-datepicker'
+import 'react-datepicker/dist/react-datepicker.css'
+import { DateCalendarContainerProps, DateInputProps, DateProps } from './date-types'
+import { InputContainer, StyledInput, StyledWrapper } from './StyledDate'
+
+const { Label, Row } = Components
+
+const DateCalendarContainer = ({ children }: DateCalendarContainerProps) => {
+  return (
+    <CalendarContainer>
+      <StyledWrapper>{children}</StyledWrapper>
+    </CalendarContainer>
+  )
+}
+
+const DateInput = forwardRef<HTMLInputElement, Partial<DateInputProps>>(({ value, onClick, onChange }, ref) => {
+  return <StyledInput ref={ref} value={value} onClick={onClick} onChange={onChange} />
+})
+
+export function Date() {
+  const { label, value, onUpdate, settings } = useInputContext<DateProps>()
+
+  return (
+    <Row input>
+      <Label>{label}</Label>
+      <InputContainer>
+        <DatePicker
+          selected={value.date}
+          onChange={onUpdate}
+          dateFormat={settings.inputFormat}
+          calendarContainer={DateCalendarContainer}
+          customInput={<DateInput />}
+        />
+      </InputContainer>
+    </Row>
+  )
+}