feat(date): use internal element builder

equinor · Oct 28, 2021 · e0a3ac7 · e0a3ac7
1 parent 4d0fd1b
commit e0a3ac7
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 32 deletions.
diff --git a/packages/date/README.md b/packages/date/README.md
@@ -1,17 +1 @@
-<!--prettier-ignore-start-->
-# @equinor/fusion-react-date 
-[![Published on npm](https://img.shields.io/npm/v/@equinor/fusion-react-date.svg)](https://www.npmjs.com/package/@equinor/fusion-react-date)
-
 [Storybook](https://equinor.github.io/fusion-react-components/?path=/docs/data-date)
-
-[Fusion Web Component](https://github.com/equinor/fusion-web-components/tree/main/packages/date)
-
-### Installation
-
-```sh
-npm install @equinor/fusion-react-date
-```
-
-## Example Usage
-
-TODO
diff --git a/packages/date/package.json b/packages/date/package.json
@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "@equinor/fusion-react-utils": "^1.2.1",
-    "@equinor/fusion-wc-date": "^0.2.12",
-    "@lit-labs/react": "^1.0.0"
+    "@equinor/fusion-wc-date": "^0.2.12"
   }
 }
diff --git a/packages/date/src/DateRange.tsx b/packages/date/src/DateRange.tsx
@@ -1,7 +1,22 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
+import { createComponent } from '@equinor/fusion-react-utils';
 import { DateRangeElement as HTMLDateRangeCustomElement, dateRangeTag } from '@equinor/fusion-wc-date';
 
-export const DateRange = createComponent(React, dateRangeTag, HTMLDateRangeCustomElement);
 export { HTMLDateRangeCustomElement };
+
+type ElementProps = React.PropsWithChildren<
+  Partial<
+    Pick<
+      HTMLDateRangeCustomElement,
+      'from' | 'to' | 'format' | 'suffix' | 'variant' | 'locale' | 'seconds' | 'weekstart' | 'capitalize'
+    >
+  >
+>;
+
+export const DateRange = createComponent<HTMLDateRangeCustomElement, ElementProps>(
+  HTMLDateRangeCustomElement,
+  dateRangeTag
+);
+
+export type DateRangeProps = React.ComponentProps<typeof DateRange>;
+
 export default DateRange;
diff --git a/packages/date/src/DateTime.tsx b/packages/date/src/DateTime.tsx
@@ -1,7 +1,15 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
+import { createComponent } from '@equinor/fusion-react-utils';
 import { DateTimeElement as HTMLDateTimeCustomElement, dateTimeTag } from '@equinor/fusion-wc-date';
 
-export const DateTime = createComponent(React, dateTimeTag, HTMLDateTimeCustomElement);
 export { HTMLDateTimeCustomElement };
+
+type ElementProps = React.PropsWithChildren<Partial<Pick<HTMLDateTimeCustomElement, 'date' | 'format' | 'locale'>>>;
+
+export const DateTime = createComponent<HTMLDateTimeCustomElement, ElementProps>(
+  HTMLDateTimeCustomElement,
+  dateTimeTag
+);
+
+export type DateTimeProps = React.ComponentProps<typeof DateTime>;
+
 export default DateTime;
diff --git a/storybook/src/stories/date/date.stories.mdx b/storybook/src/stories/date/date.stories.mdx
@@ -1,27 +1,25 @@
 import { Meta, Story, Canvas, ArgsTable,Description } from '@storybook/addon-docs';
-import ChangeLog from '../../components/ChangeLog';
+import { ChangeLog, PackageInfo, StoryExample } from '../../components';
 import DateRange from '@equinor/fusion-react-date/src/DateRange';
 import DateTime from '@equinor/fusion-react-date/src/DateTime';
 
 <Meta title="Data/Date" />
 
+<PackageInfo pkg={require('@equinor/fusion-react-date/package.json')} />
+
 <Description markdown={require('@equinor/fusion-react-date/README.md')} />
 
 ## DateTime
 
 <ArgsTable of={DateTime} />
 
-<Canvas withSource='open'>
-  <Story id="examples-datetime--component" />
-</Canvas>
+<StoryExample storyId="examples-datetime--component" showSource/>
 
 ## DateRange
 
 <ArgsTable of={DateRange} />
 
-<Canvas withSource='open'>
-  <Story id="examples-daterange--component" />
-</Canvas>
+<StoryExample storyId="examples-daterange--component" showSource/>
 
 ## Changelog
 

diff --git a/storybook/src/stories/date/daterange.stories.mdx b/storybook/src/stories/date/daterange.stories.mdx
@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable,Description } from '@storybook/addon-docs';
-import ChangeLog from '../../components/ChangeLog';
 import DateRange from '@equinor/fusion-react-date/src/DateRange';
 
 <Meta title="Examples/DateRange" component={DateRange} />