feat: Datepicker to stable [BAU-699] (contentful#2204)

* feat: datepicker stable release 🎉 * refactor: remove export hack for Parcel bundler * chore: add changeset
Wake1st · Oct 5, 2022 · a12f9ad · a12f9ad
1 parent 9855e77
commit a12f9ad
Show file tree

Hide file tree

Showing 22 changed files with 32 additions and 37 deletions.
diff --git a/.changeset/proud-cups-tie.md b/.changeset/proud-cups-tie.md
@@ -0,0 +1,6 @@
+---
+'@contentful/f36-datepicker': minor
+'@contentful/f36-components': minor
+---
+
+Release Datepicker stable version, include Datepicker to the umbrella @contentful/f36-components pkg
diff --git a/packages/components/datepicker/README.mdx b/packages/components/datepicker/README.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Datepicker'
-status: 'beta'
-isBeta: true
+status: 'stable'
+isNew: true
 slug: /components/datepicker/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker'
 storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-datepicker'
@@ -30,6 +30,8 @@ yarn add @contentful/f36-datepicker@beta
 ## Import
 
 ```jsx static=true
+import { Datepicker } from '@contentful/f36-components';
+// or
 import { Datepicker } from '@contentful/f36-datepicker';
 ```
 

diff --git a/packages/components/datepicker/examples/Calendar/Basic.tsx b/packages/components/datepicker/examples/Calendar/Basic.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Calendar } from '@contentful/f36-datepicker';
+import { Calendar } from '@contentful/f36-components';
 
 export default function BasicExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());

diff --git a/packages/components/datepicker/examples/Calendar/CustomDayContent.tsx b/packages/components/datepicker/examples/Calendar/CustomDayContent.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Calendar, DayContent } from '@contentful/f36-datepicker';
+import { Calendar, DayContent } from '@contentful/f36-components';
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 

diff --git a/packages/components/datepicker/examples/Calendar/Indicator.tsx b/packages/components/datepicker/examples/Calendar/Indicator.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Calendar } from '@contentful/f36-datepicker';
+import { Calendar } from '@contentful/f36-components';
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 

diff --git a/packages/components/datepicker/examples/Calendar/MinMax.tsx b/packages/components/datepicker/examples/Calendar/MinMax.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Calendar } from '@contentful/f36-datepicker';
+import { Calendar } from '@contentful/f36-components';
 
 export default function MinMaxExample() {
   const today = new Date();

diff --git a/packages/components/datepicker/examples/Calendar/MultiMonths.tsx b/packages/components/datepicker/examples/Calendar/MultiMonths.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Calendar } from '@contentful/f36-datepicker';
+import { Calendar } from '@contentful/f36-components';
 
 export default function MultiMonthsExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());

diff --git a/packages/components/datepicker/examples/Datepicker/Basic.tsx b/packages/components/datepicker/examples/Datepicker/Basic.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Datepicker } from '@contentful/f36-datepicker';
+import { Datepicker } from '@contentful/f36-components';
 
 export default function BasicExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());

diff --git a/packages/components/datepicker/examples/Datepicker/Custom.tsx b/packages/components/datepicker/examples/Datepicker/Custom.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { Calendar } from '@contentful/f36-datepicker';
+import { Calendar } from '@contentful/f36-components';
 import { TextInput } from '@contentful/f36-forms';
 import { format, parse, isValid } from 'date-fns';
 import { Popover } from '@contentful/f36-popover';

diff --git a/packages/components/datepicker/examples/Datepicker/DefaultOpen.tsx b/packages/components/datepicker/examples/Datepicker/DefaultOpen.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Datepicker } from '@contentful/f36-datepicker';
+import { Datepicker } from '@contentful/f36-components';
 
 export default function BasicExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());

diff --git a/packages/components/datepicker/examples/Datepicker/Format.tsx b/packages/components/datepicker/examples/Datepicker/Format.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Flex, Box } from '@contentful/f36-components';
-import { Datepicker } from '@contentful/f36-datepicker';
+import { Datepicker } from '@contentful/f36-components';
 
 export default function FormatExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());

diff --git a/packages/components/datepicker/examples/Datepicker/VisualStates.tsx b/packages/components/datepicker/examples/Datepicker/VisualStates.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SectionHeading } from '@contentful/f36-components';
-import { Datepicker } from '@contentful/f36-datepicker';
+import { Datepicker } from '@contentful/f36-components';
 
 export default function VisualStatesExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());

diff --git a/packages/components/datepicker/examples/Datepicker/WithFormControl.tsx b/packages/components/datepicker/examples/Datepicker/WithFormControl.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Datepicker } from '@contentful/f36-datepicker';
+import { Datepicker } from '@contentful/f36-components';
 import { FormControl } from '@contentful/f36-forms';
 
 export default function BasicExample() {

diff --git a/packages/components/datepicker/package.json b/packages/components/datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-datepicker",
-  "version": "4.1.0-beta.8",
+  "version": "4.1.0",
   "description": "Forma 36: Datepicker component",
   "scripts": {
     "build": "tsup"

diff --git a/packages/components/datepicker/src/Calendar/README.mdx b/packages/components/datepicker/src/Calendar/README.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Calendar'
-status: 'beta'
-isBeta: true
+status: 'stable'
+isNew: true
 slug: /components/calendar/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker/src/Calendar'
 storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-datepicker-calendar--default'
@@ -30,6 +30,8 @@ yarn add @contentful/f36-datepicker@beta
 ## Import
 
 ```jsx static=true
+import { Calendar } from '@contentful/f36-components';
+// or
 import { Calendar } from '@contentful/f36-datepicker';
 ```
 

diff --git a/packages/components/datepicker/src/Calendar/index.ts b/packages/components/datepicker/src/Calendar/index.ts
@@ -1,16 +1,3 @@
-import {
-  Day as _Day,
-  DayContent as _DayContent,
-  useDayPicker as _useDayPicker,
-  DayProps,
-  DayContentProps,
-} from 'react-day-picker';
-
 export * from './Calendar';
-
-// Hack for Parcel bundler, to build a valid commonJS dist
-const Day = _Day;
-const DayContent = _DayContent;
-const useDayPicker = _useDayPicker;
-export { Day, DayContent, useDayPicker };
-export type { DayProps, DayContentProps };
+export { Day, DayContent, useDayPicker } from 'react-day-picker';
+export type { DayProps, DayContentProps } from 'react-day-picker';
diff --git a/packages/forma-36-react-components/package.json b/packages/forma-36-react-components/package.json
@@ -31,6 +31,7 @@
     "@contentful/f36-copybutton": "^4.17.0",
     "@contentful/f36-core": "^4.17.0",
     "@contentful/f36-datetime": "^4.17.0",
+    "@contentful/f36-datepicker": "^4.1.0",
     "@contentful/f36-drag-handle": "^4.17.0",
     "@contentful/f36-entity-list": "^4.17.0",
     "@contentful/f36-forms": "^4.17.0",

diff --git a/packages/forma-36-react-components/src/index.ts b/packages/forma-36-react-components/src/index.ts
@@ -8,6 +8,7 @@ export * from '@contentful/f36-collapse';
 export * from '@contentful/f36-copybutton';
 export * from '@contentful/f36-core';
 export * from '@contentful/f36-datetime';
+export * from '@contentful/f36-datepicker';
 export * from '@contentful/f36-drag-handle';
 export * from '@contentful/f36-entity-list';
 export * from '@contentful/f36-forms';

diff --git a/packages/website/components/LiveEditor/ComponentSource.tsx b/packages/website/components/LiveEditor/ComponentSource.tsx
@@ -10,7 +10,6 @@ import { css, cx } from 'emotion';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import tokens from '@contentful/f36-tokens';
 import * as f36Components from '@contentful/f36-components';
-import * as datepickerComponents from '@contentful/f36-datepicker';
 import * as f36utils from '@contentful/f36-utils';
 import { useForm, useController } from 'react-hook-form';
 import { MdAccessAlarm } from 'react-icons/md';
@@ -33,7 +32,6 @@ const liveProviderScope = {
   ...f36icons,
   ...f36Components,
   ...f36utils,
-  ...datepickerComponents,
   css,
   f36icons,
   tokens,

diff --git a/packages/website/components/Playground/SandpackRenderer.tsx b/packages/website/components/Playground/SandpackRenderer.tsx
@@ -60,7 +60,6 @@ export function SandpackRenderer({
           'react-dom': '^17.0.0',
           'react-scripts': '^4.0.0',
           '@contentful/f36-components': '^4.0.0',
-          '@contentful/f36-datepicker': 'beta', //TODO: Remove when not in beta
           '@contentful/f36-tokens': '^4.0.0',
           '@contentful/f36-icons': '^4.0.0',
           emotion: '^10.0.17',

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -11,7 +11,6 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "0.18.1",
     "@contentful/f36-components": "^4.14.0",
-    "@contentful/f36-datepicker": "^4.1.0-beta.6",
     "@contentful/f36-docs-utils": "^4.0.1",
     "@contentful/f36-icon": "^4.11.0",
     "@contentful/f36-icons": "^4.11.0",

diff --git a/packages/website/utils/sidebarLinks.json b/packages/website/utils/sidebarLinks.json
@@ -126,7 +126,7 @@
     {
       "title": "Calendar",
       "slug": "/components/calendar/",
-      "isBeta": true
+      "isNew": true
     },
     {
       "title": "Date utilities",
@@ -135,7 +135,7 @@
     {
       "title": "Datepicker",
       "slug": "/components/datepicker/",
-      "isBeta": true
+      "isNew": true
     },
     {
       "title": "DateTime",