@popsure/dirty-swan 0.30.7 → 0.31.0

package/dist/esm/index.js

@@ -16,7 +16,7 @@ export { default as AutoSuggestMultiSelect } from './components/input/autoSugges
 export { default as Chip } from './components/chip/index.js';
 export { default as AutoSuggestInput } from './components/input/autoSuggestInput/index.js';
 export { ComparisonTable } from './components/comparisonTable/index.js';
-export { default as SegmentedControl } from './components/segmentedControl/index.js';
+export { SegmentedControl } from './components/segmentedControl/index.js';
 export { default as Markdown } from './components/markdown/index.js';
 export { default as TableRating } from './components/comparisonTable/components/TableRating/index.js';
 export { default as TableTrueFalse } from './components/comparisonTable/components/TableTrueFalse.js';

package/dist/esm/lib/components/input/autoSuggestInput/index.d.ts

@@ -1,5 +1,6 @@
+import Autosuggest, { RenderInputComponentProps } from 'react-autosuggest';
 import { Option } from '../../../models/autoSuggestInput';
-declare const _default: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, wrapText, }: {
+declare const _default: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, wrapText, inputProps }: {
     currentOption: string;
     suggestions: Option[];
     handleSuggestionSelected: (value: Option) => void;
@@ -9,5 +10,6 @@ declare const _default: ({ currentOption, suggestions, handleSuggestionSelected,
     placeholder: string;
     className?: string | undefined;
     wrapText?: boolean | undefined;
+    inputProps?: Autosuggest.RenderInputComponentProps | undefined;
 }) => JSX.Element;
 export default _default;

package/dist/esm/lib/components/segmentedControl/index.d.ts

@@ -2,10 +2,11 @@ interface TitleWithSubtitle {
     title: string;
     subtitle: string;
 }
-declare const SegmentedControl: ({ className, values, selectedIndex, onChange, }: {
-    className?: string | undefined;
+export interface SegmentedControlProps {
+    className?: string;
     values: Array<TitleWithSubtitle> | Array<string>;
     selectedIndex: number;
     onChange: (selectedIndex: number) => void;
-}) => JSX.Element;
-export default SegmentedControl;
+}
+declare const SegmentedControl: ({ className, values, selectedIndex, onChange, }: SegmentedControlProps) => JSX.Element;
+export { SegmentedControl };

package/dist/esm/lib/components/segmentedControl/index.stories.d.ts

@@ -0,0 +1,41 @@
+import { SegmentedControlProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ className, values, selectedIndex, onChange, }: SegmentedControlProps) => JSX.Element;
+    argTypes: {
+        values: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        selectedIndex: {
+            description: string;
+        };
+        onChange: {
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+    };
+    args: {
+        values: string[];
+        selectedIndex: number;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const SegmentedControlStory: {
+    ({ onChange, selectedIndex, values }: SegmentedControlProps): JSX.Element;
+    storyName: string;
+};
+export declare const SegmentedControlWithSubtitle: ({ onChange, selectedIndex, values }: SegmentedControlProps) => JSX.Element;
+export default story;

package/dist/esm/lib/index.d.ts

@@ -13,7 +13,7 @@ import AutoSuggestMultiSelect from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';
 import AutoSuggestInput from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
-import SegmentedControl from './components/segmentedControl';
+import { SegmentedControl } from './components/segmentedControl';
 import Markdown from './components/markdown';
 export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, };
 export type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.30.7",
+  "version": "0.31.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -75,12 +75,12 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addons": "^6.5.16",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9",
+    "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.2",
@@ -112,6 +112,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-url": "^3.0.1",
+    "storybook-addon-designs": "^6.3.1",
+    "storybook-dark-mode": "^2.1.1",
     "tslib": "^2.3.0",
     "typescript": "4.2.2",
     "yargs": "^17.0.1"

package/src/lib/components/input/autoSuggestInput/index.stories.mdx

@@ -32,6 +32,7 @@ export interface Option {
 | placeholder                  | string   | Placeholder for DirtySwan Input component                                                 | n/a           | true     |
 | className                    | string   | Class name for the most parent element                                                    | undefined     | false    |
 | wrapText                     | boolean  | Wether or not wrap the entries in the dropdown or hide overflown text                     | false         | false    |
+| inputProps                   | InputHTMLAttributes  | Pass through arbitrary props to the input.                                    | n/a           | false    |
 
 ## Example
 

package/src/lib/components/input/autoSuggestInput/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import Autosuggest from 'react-autosuggest';
+import Autosuggest, { RenderInputComponentProps } from 'react-autosuggest';
 
 import styles from './style.module.scss';
 import { Option } from '../../../models/autoSuggestInput';
@@ -15,6 +15,7 @@ export default ({
   placeholder,
   className,
   wrapText,
+  inputProps
 }: {
   currentOption: string;
   suggestions: Option[];
@@ -25,6 +26,7 @@ export default ({
   placeholder: string;
   className?: string;
   wrapText?: boolean;
+  inputProps?: RenderInputComponentProps;
 }) => {
   const renderSuggestion = (suggestion: Option) => (
     <div className={`${styles['suggestion-option']}`}>
@@ -47,9 +49,9 @@ export default ({
 
   const getSuggestionValue = (suggestion: Option) => suggestion.value;
 
-  const renderInputComponent = (inputProps: Omit<InputProps, 'ref'>) => (
+  const renderInputComponent = (autoSuggestInputProps: Omit<InputProps, 'ref'>) => (
     <Input
-      {...inputProps}
+      {...autoSuggestInputProps}
       placeholder={placeholder}
       data-cy="suggest-multi-select-input"
     />
@@ -66,6 +68,7 @@ export default ({
         renderSuggestion={renderSuggestion}
         highlightFirstSuggestion={true}
         inputProps={{
+          ...inputProps,
           value: currentOption,
           onChange: (_, { newValue }) => {
             onChange(newValue);

package/src/lib/components/segmentedControl/index.stories.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { SegmentedControl, SegmentedControlProps } from '.';
+
+const story = {
+  title: 'JSX/SegmentedControl',
+  component: SegmentedControl,
+  argTypes: {
+    values: {
+      description: 'Array containing the text that needs to be displayed',
+      table: {
+        type: { 
+          summary: 'string[] OR { title: string; subtitle: string;}[]'
+        },
+      },
+    },
+    selectedIndex: {
+      description: 'The currently selected index',
+    },
+    onChange: {
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+  },
+  args: {
+    values: ['Earth', 'Sun', 'Moon'],
+    selectedIndex: 0,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
+      },
+    },
+  },
+};
+
+export const SegmentedControlStory = ({
+  onChange,
+  selectedIndex,
+  values
+}: SegmentedControlProps) => {
+  const [index, setIndex] = useState(selectedIndex);
+
+  const handleOnChange = (newIndex: number) => {
+    onChange?.(newIndex);
+    setIndex(newIndex);
+  };
+
+  return (
+    <SegmentedControl
+      values={values}
+      selectedIndex={index}
+      onChange={handleOnChange}
+    />
+  );
+};
+
+SegmentedControlStory.storyName = "SegmentedControl";
+
+export const SegmentedControlWithSubtitle = ({
+  onChange,
+  selectedIndex,
+  values
+}: SegmentedControlProps) => {
+  const [index, setIndex] = useState(selectedIndex);
+
+  const handleOnChange = (newIndex: number) => {
+    onChange?.(newIndex);
+    setIndex(newIndex);
+  };
+
+  return (
+    <SegmentedControl
+      values={[
+        { title: 'Basic', subtitle: '€288,65' },
+        { title: 'Premium', subtitle: '€288,65' },
+      ]}
+      selectedIndex={index}
+      onChange={handleOnChange}
+    />
+  );
+};
+
+export default story;

package/src/lib/components/segmentedControl/index.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '../../util/testUtils';
 
-import SegmentedControl from '.';
+import { SegmentedControl } from '.';
 
 const setup = (onChange: (selectedIndex: number) => void = () => {}) => {
   return render(

package/src/lib/components/segmentedControl/index.tsx

@@ -6,17 +6,19 @@ interface TitleWithSubtitle {
   subtitle: string;
 }
 
+export interface SegmentedControlProps {
+  className?: string;
+  values: Array<TitleWithSubtitle> | Array<string>;
+  selectedIndex: number;
+  onChange: (selectedIndex: number) => void;
+}
+
 const SegmentedControl = ({
   className = '',
   values,
   selectedIndex,
   onChange,
-}: {
-  className?: string;
-  values: Array<TitleWithSubtitle> | Array<string>;
-  selectedIndex: number;
-  onChange: (selectedIndex: number) => void;
-}) => {
+}: SegmentedControlProps) => {
   const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =
     useState<{
       left: number;
@@ -103,4 +105,4 @@ const SegmentedControl = ({
   );
 };
 
-export default SegmentedControl;
+export { SegmentedControl };

package/src/lib/index.tsx

@@ -36,7 +36,7 @@ import {
   TableInfoButton,
   TableHeader,
 } from './components/comparisonTable';
-import SegmentedControl from './components/segmentedControl';
+import { SegmentedControl } from './components/segmentedControl';
 import Markdown from './components/markdown';
 
 export {

package/src/lib/components/segmentedControl/index.stories.mdx

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import SegmentedControl from '.';
-
-<Meta title="JSX/SegmentedControl" />
-
-# SegmentedControl
-
-A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.
-
-| attribute     | unit                                              | description                                          | default value | required |
-| ------------- | ------------------------------------------------- | ---------------------------------------------------- | ------------- | -------- |
-| values        | string[] OR { title: string; subtitle: string;}[] | Array containing the text that needs to be displayed | n/a           | true     |
-| selectedIndex | number                                            | The currently selected index                         | n/a           | true     |
-| onChange      | (newSelectedIndex: number) => void;               | Callback when the select index changes               | n/a           | true     |
-
-export const SegmentedControlStory = () => {
-  const [selectedFirstIndex, setSelectedFirstIndex] = useState(0);
-  const [selectedSecondIndex, setSelectedSecondIndex] = useState(0);
-  return (
-    <Preview>
-      <>
-        <h1 className="p-h1">Single lined SegmentedControl</h1>
-        <SegmentedControl
-          className="mt8"
-          values={['Earth', 'Sun', 'Moon']}
-          selectedIndex={selectedFirstIndex}
-          onChange={(newIndex) => setSelectedFirstIndex(newIndex)}
-        />
-        <h1 className="p-h1 mt24">SegmentedControl with subtitle</h1>
-        <SegmentedControl
-          className="mt8"
-          values={[
-            { title: 'Basic', subtitle: '€288,65' },
-            { title: 'Premium', subtitle: '€288,65' },
-          ]}
-          selectedIndex={selectedSecondIndex}
-          onChange={(newIndex) => setSelectedSecondIndex(newIndex)}
-        />
-      </>
-    </Preview>
-  );
-};
-
-<SegmentedControlStory />