@galaxy-ds/core 2.0.5 → 2.0.6

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/src/DatePicker/DatePicker.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import DatePicker from './DatePicker';
-import DatePickerExample from './support/DatePickerExample.js';
+import DatePickerExample from './support/DatePickerExample';
 
 <Meta title="Form Elements/Calendars/DatePicker" component={DatePicker} />
 
@@ -12,15 +12,16 @@ import DatePickerExample from './support/DatePickerExample.js';
       docs: {
         source: {
           code: `
-function DatePickerExample() {
-  const [date, setDate] = useState(null);
-  return (
-    <DatePicker
-      onChange={(item) => setDate(item)}
-      date={date}
-    ></DatePicker>
-  );
-}
+import React, { useState } from 'react';
+import { DatePicker } from '@galaxy-ds/core';
+const DatePickerExample: React.FC = () => {
+  const [date, setDate] = useState<Date>(new Date());
+  const handleChange = (item: Date) => {
+    console.log(item);
+    setDate(item);
+  };
+  return <DatePicker onChange={handleChange} date={date}></DatePicker>;
+};
           `
           }
         }

package/src/DatePicker/support/DatePickerExample.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { DatePicker } from '../';
+
+const DatePickerExample: React.FC = () => {
+  const [date, setDate] = useState<Date>(new Date());
+  const handleChange = (item: Date) => {
+    console.log(item);
+    setDate(item);
+  };
+
+  return <DatePicker onChange={handleChange} date={date} />;
+};
+
+export default DatePickerExample;

package/src/DateRangePicker/DateRangePicker.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import DateRangePicker from './DateRangePicker';
-import DateRangePickerExample from './support/DateRangePickerExample.js';
+import DateRangePickerExample from './support/DateRangePickerExample';
 
 <Meta title="Form Elements/Calendars/DateRangePicker" component={DateRangePicker} />
 
@@ -16,22 +16,28 @@ Date range picker with default 2 months side by side.
           code: `
 import React, { useState } from 'react';
 import { DateRangePicker } from '@galaxy-ds/core';
-function DateRangePickerExample({months}) {
-  const [state, setState] = useState([
+import type { DateRangePickerProps, Range, RangeKeyDict } from '@galaxy-ds/core';
+const DateRangePickerExample: React.FC<DateRangePickerProps> = () => {
+  const [selectionRange, setSelectionRange] = useState<Range>(
     {
       startDate: new Date(),
+      endDate: new Date(),
       key: 'selection',
     },
-  ]);
+  );
+  const handleSelect = (ranges: RangeKeyDict) => {
+    console.table(ranges);
+    setSelectionRange(ranges['selection'])
+  }
   return (
     <DateRangePicker
-      onChange={(item) => setState([item.selection])}
-      ranges={state}
+      onChange={handleSelect}
+      ranges={[selectionRange]}
       months={2}
       dateDisplayFormat='dd MMMM yyyy'
-    ></DateRangePicker>
+    />
   );
-}
+};
           `
           }
         }
@@ -69,24 +75,30 @@ Show just a single month with `months={1}`.
       docs: {
         source: {
           code: `
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import { DateRangePicker } from '@galaxy-ds/core';
-function DateRangePickerExample({months}) {
-  const [state, setState] = useState([
+import type { DateRangePickerProps, Range, RangeKeyDict } from '@galaxy-ds/core';
+const DateRangePickerExample: React.FC<DateRangePickerProps> = () => {
+  const [selectionRange, setSelectionRange] = useState<Range>(
     {
       startDate: new Date(),
+      endDate: new Date(),
       key: 'selection',
     },
-  ]);
+  );
+  const handleSelect = (ranges: RangeKeyDict) => {
+    console.table(ranges);
+    setSelectionRange(ranges['selection'])
+  }
   return (
     <DateRangePicker
-      onChange={(item) => setState([item.selection])}
-      ranges={state}
+      onChange={handleSelect}
+      ranges={[selectionRange]}
       months={1}
       dateDisplayFormat='dd MMMM yyyy'
-    ></DateRangePicker>
+    />
   );
-}
+};
           `
           }
         }

package/src/DateRangePicker/DateRangePicker.test.tsx

@@ -3,5 +3,10 @@ import { render } from '@testing-library/react';
 import DateRangePicker from './DateRangePicker';
 
 test('DateRangePicker', () => {
-  render(<DateRangePicker />);
+  const ranges = {
+    startDate: new Date(),
+    endDate: new Date(),
+    key: 'selection',
+  };
+  render(<DateRangePicker ranges={[ranges]} />);
 });

package/src/DateRangePicker/DateRangePicker.types.ts

@@ -1,3 +1,13 @@
-import { DateRangePickerProps as ReactDateRangePickerProps } from 'react-date-range';
+import type {
+  DateRangePickerProps as ReactDateRangePickerProps,
+  Range,
+  RangeFocus,
+  RangeKeyDict,
+  Preview,
+  StaticRange,
+  InputRange,
+} from 'react-date-range';
 
 export interface DateRangePickerProps extends ReactDateRangePickerProps {}
+
+export { Range, RangeFocus, RangeKeyDict, Preview, StaticRange, InputRange };

package/src/DateRangePicker/support/DateRangePickerExample.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { DateRangePicker } from '../';
+import type {
+  DateRangePickerProps,
+  Range,
+  RangeKeyDict,
+} from '../DateRangePicker.types';
+
+const DateRangePickerExample: React.FC<DateRangePickerProps> = ({ months }) => {
+  const [selectionRange, setSelectionRange] = useState<Range>({
+    startDate: new Date(),
+    endDate: new Date(),
+    key: 'selection',
+  });
+
+  const handleSelect = (ranges: RangeKeyDict) => {
+    console.table(ranges);
+    setSelectionRange(ranges['selection']);
+  };
+
+  return (
+    <DateRangePicker
+      onChange={handleSelect}
+      ranges={[selectionRange]}
+      months={months}
+      dateDisplayFormat="dd MMMM yyyy"
+    />
+  );
+};
+
+export default DateRangePickerExample;

package/src/RibbonButton/RibbonButton.stories.mdx

@@ -1,6 +1,12 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-import { NewEntryRibbonIcon, MatterFolderRibbonIcon } from "../Icons/leap";
-import { RibbonButton } from "./RibbonButton"
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { 
+  NewEntryRibbonIcon, 
+  CalendarRibbonIcon, 
+  DeleteRibbonIcon, 
+  MatterFolderRibbonIcon 
+} from "../Icons/leap";
+import { Divider } from "../Divider";
+import { RibbonButton } from "./RibbonButton";
 
 <Meta title="components/Buttons/RibbonButton" component={RibbonButton} />
 
@@ -36,4 +42,22 @@ import { RibbonButton } from "./RibbonButton"
   </Story>
 </Canvas>
 
+<Canvas withToolbar>
+  <Story
+    name="Toolbar"
+  >
+    {() => (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <RibbonButton icon={<NewEntryRibbonIcon />} label="New Entry" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<CalendarRibbonIcon />} label="11th October" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<DeleteRibbonIcon />} label="Delete" />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" isWrapped />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
 <ArgsTable story="Default" />

package/src/RibbonButton/RibbonButton.styled.tsx

@@ -49,12 +49,11 @@ export const RibbonLabelStyled = styled(Typography)({
 export const RibbonContentStyled = styled('div', {
   shouldForwardProp: (prop) => prop !== 'isWrapped',
 })<{ isWrapped?: boolean }>(({ isWrapped }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: '100%',
   ...(isWrapped && {
-    height: '80px',
     width: '54px',
-    p: {
-      position: 'relative',
-      bottom: '8px',
-    },
   }),
 }));

package/src/RibbonButton/RibbonButton.tsx

@@ -8,8 +8,9 @@ import { RibbonButtonProps, RibbonButtonRef } from './RibbonButton.types';
 
 export const RibbonButton = forwardRef<RibbonButtonRef, RibbonButtonProps>(
   function RibbonMenuListButton(props, ref) {
+    const { isWrapped, icon, label, ...rest } = props;
     return (
-      <RibbonButtonStyled ref={ref} variant="outlined" {...props}>
+      <RibbonButtonStyled ref={ref} variant="outlined" {...rest}>
         <RibbonContentStyled isWrapped={props.isWrapped}>
           {props.icon}
           <RibbonLabelStyled variant="body2">{props.label}</RibbonLabelStyled>

package/src/RibbonButtonGroup/RibbonButtonGroup.stories.mdx

@@ -1,5 +1,12 @@
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"
-import { MatterFolderRibbonIcon, NewEntryRibbonIcon } from "../Icons/leap";
+import { 
+  NewEntryRibbonIcon, 
+  CalendarRibbonIcon, 
+  DeleteRibbonIcon, 
+  MatterFolderRibbonIcon 
+} from "../Icons/leap";
+import { Divider } from "../Divider";
+import { RibbonButton } from "../RibbonButton";
 import { RibbonButtonGroup } from "./RibbonButtonGroup"
 import { RibbonButtonGroupMenuExample } from "./RibbonButtonGroupMenuExample"
 
@@ -22,7 +29,25 @@ import { RibbonButtonGroupMenuExample } from "./RibbonButtonGroupMenuExample"
     name="Wrapped"
   >
     {() => (
-      <RibbonButtonGroup icon={<MatterFolderRibbonIcon />} label="Open Matter"  isWrapped/>
+      <RibbonButtonGroup icon={<MatterFolderRibbonIcon />} label="Open Matter"  isWrapped />
+    )}
+  </Story>
+</Canvas>
+
+<Canvas withToolbar>
+  <Story
+    name="Toolbar"
+  >
+    {() => (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <RibbonButtonGroup icon={<NewEntryRibbonIcon />} label="New Entry" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<CalendarRibbonIcon />} label="11th October" isWrapped />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<DeleteRibbonIcon />} label="Delete" />
+          <Divider orientation="vertical" sx={{ '&.MuiDivider-root': { height: '70px' }}} />
+        <RibbonButton icon={<MatterFolderRibbonIcon />} label="Open Matter" isWrapped />
+      </div>
     )}
   </Story>
 </Canvas>

package/src/RibbonButtonGroup/RibbonButtonGroup.tsx

@@ -14,14 +14,14 @@ export const RibbonButtonGroup = forwardRef<
   RibbonButtonGroupRef,
   RibbonButtonGroupProps
 >(function RibbonButtonGroup(props, ref) {
-  const { icon, label, isWrapped, onToggle, onClick } = props;
+  const { icon, label, isWrapped, onToggle, onClick, ...rest } = props;
 
   return (
     <RibbonButtonGroupStyled
       variant="outlined"
       disableRipple
       ref={ref}
-      {...props}
+      {...rest}
     >
       <RibbonButtonStyled
         variant="outlined"

package/src/RibbonButtonGroup/RibbonButtonGroup.types.ts

@@ -1,18 +1,17 @@
 import { ButtonGroupProps as MuiButtonGroupProps } from '@mui/material';
 import { RibbonButtonProps } from '../RibbonButton/RibbonButton.types';
 
-type ButtonGroupProps = MuiButtonGroupProps;
+type ButtonGroupProps = MuiButtonGroupProps & RibbonButtonProps;
 
-export type RibbonButtonGroupProps = ButtonGroupProps &
-  RibbonButtonProps & {
-    /**
-     * Primary Action
-     * */
-    onClick?: () => void;
-    /**
-     * Secondary Action
-     * */
-    onToggle?: () => void;
-  };
+export interface RibbonButtonGroupProps extends ButtonGroupProps {
+  /**
+   * Primary Action
+   * */
+  onClick?: () => void;
+  /**
+   * Secondary Action
+   * */
+  onToggle?: () => void;
+}
 
 export type RibbonButtonGroupRef = HTMLDivElement;

package/src/DatePicker/support/DatePickerExample.js

@@ -1,15 +0,0 @@
-import React, {useState} from 'react';
-import DatePicker from '../DatePicker';
-
-function DatePickerExample() {
-  const [date, setDate] = useState(null);
-
-  return (
-    <DatePicker
-      onChange={(item) => setDate(item)}
-      date={date}
-    ></DatePicker>
-  );
-}
-
-export default DatePickerExample;

package/src/DateRangePicker/support/DateRangePickerExample.js

@@ -1,22 +0,0 @@
-import React, {useState} from 'react';
-import DateRangePicker from '../DateRangePicker';
-
-function DateRangePickerExample({months}) {
-  const [state, setState] = useState([
-    {
-      startDate: new Date(),
-      key: 'selection',
-    },
-  ]);
-
-  return (
-    <DateRangePicker
-      onChange={(item) => setState([item.selection])}
-      ranges={state}
-      months={months}
-      dateDisplayFormat='dd MMMM yyyy'
-    ></DateRangePicker>
-  );
-}
-
-export default DateRangePickerExample;