Merge pull request #295 from lifeomic/CHROM-194-number-format-storybook

CHROM-194 Add All Number Format Subcomponents to Storybook

src/components/NumberFormat/UnitNumberFormatField.tsx

@@ -12,6 +12,7 @@ const useStyles = makeStyles(
     textField: {
       marginTop: theme.spacing(2),
       marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(2),
     },
   }),
   { name: UnitNumberFormatFieldStylesKey }

stories/components/NumberFormat/PercentFormatField.stories.tsx

@@ -0,0 +1,39 @@
+import { Container } from '../../storyComponents/Container';
+import { PercentFormatField } from '../../../src/components/NumberFormat';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import md from './percentFormat.md';
+
+const PercentFormatFieldStory: React.FC = () => {
+  const [percent, setPercent] = React.useState(10);
+  const [percentMin, setPercentMin] = React.useState(10);
+  const [percentMax, setPercentMax] = React.useState(10);
+
+  return (
+    <Container containerStyles={{ flexWrap: 'wrap' }}>
+      <PercentFormatField
+        label="Percent"
+        value={percent}
+        onChange={(value) => setPercent(value)}
+      />
+      <PercentFormatField
+        label="Percent (min 5%)"
+        value={percentMin}
+        min={5}
+        onChange={(value) => setPercentMin(value)}
+      />
+      <PercentFormatField
+        label="Percent (max 75%)"
+        value={percentMax}
+        max={75}
+        onChange={(value) => setPercentMax(value)}
+      />
+    </Container>
+  );
+};
+
+storiesOf('Form Components/Number Format Field', module).add(
+  'Percent',
+  () => <PercentFormatFieldStory />,
+  { readme: { content: md } }
+);

stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx

@@ -18,8 +18,8 @@ const PhoneNumberFormatFieldStory: React.FC = () => {
   );
 };
 
-storiesOf('Form Components/Phone Input', module).add(
-  'Default',
+storiesOf('Form Components/Number Format Field', module).add(
+  'Phone Number',
   () => <PhoneNumberFormatFieldStory />,
   { readme: { content: defaultMd } }
 );

stories/components/NumberFormat/PriceFormatField.stories.tsx

@@ -0,0 +1,39 @@
+import { Container } from '../../storyComponents/Container';
+import { PriceFormatField } from '../../../src/components/NumberFormat';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import md from './priceFormat.md';
+
+const PriceFormatFieldStory: React.FC = () => {
+  const [price, setPrice] = React.useState(5000);
+  const [priceMin, setPriceMin] = React.useState(500);
+  const [priceMax, setPriceMax] = React.useState(10000);
+
+  return (
+    <Container containerStyles={{ flexWrap: 'wrap' }}>
+      <PriceFormatField
+        label="Price"
+        value={price}
+        onChange={(value) => setPrice(value)}
+      />
+      <PriceFormatField
+        label="Price (min $5.00)"
+        value={priceMin}
+        min={500}
+        onChange={(value) => setPriceMin(value)}
+      />
+      <PriceFormatField
+        label="Price (max $100.00)"
+        value={priceMax}
+        max={10000}
+        onChange={(value) => setPriceMax(value)}
+      />
+    </Container>
+  );
+};
+
+storiesOf('Form Components/Number Format Field', module).add(
+  'Price',
+  () => <PriceFormatFieldStory />,
+  { readme: { content: md } }
+);

stories/components/NumberFormat/UnitNumberFormatField.stories.tsx

@@ -0,0 +1,70 @@
+import { Container } from '../../storyComponents/Container';
+import { UnitNumberFormatField } from '../../../src/components/NumberFormat';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import md from './unitNumberFormat.md';
+
+const UnitNumberFormatFieldStory: React.FC = () => {
+  const [value, setValue] = React.useState(56);
+  const [min, setMin] = React.useState(20);
+  const [max, setMax] = React.useState(99);
+
+  return (
+    <Container containerStyles={{ flexWrap: 'wrap' }}>
+      <UnitNumberFormatField
+        label="Some Unit"
+        value={value}
+        units="unit"
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Shortform Unit"
+        value={value}
+        units="in"
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Longform Unit"
+        value={value}
+        units="inches"
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Prefix Unit"
+        value={value}
+        units="(in) "
+        prefixUnits
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="2 Decimal Places"
+        value={value}
+        units="mg"
+        decimalScale={2}
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Weight (min 10)"
+        value={min}
+        units="kg"
+        min={10}
+        onChange={(value) => setMin(value)}
+      />
+      <UnitNumberFormatField
+        label="Weight (max 100)"
+        value={max}
+        units="kg"
+        max={100}
+        onChange={(value) => setMax(value)}
+      />
+    </Container>
+  );
+};
+
+storiesOf('Form Components/Number Format Field', module).add(
+  'Unit',
+  () => <UnitNumberFormatFieldStory />,
+  {
+    readme: { content: md },
+  }
+);

stories/components/NumberFormat/percentFormat.md

@@ -0,0 +1,72 @@
+# Percent Format Field
+
+An input component for entering a number as a percent; it leverages the [Chroma Unit Input](https://lifeomic.github.io/chroma-react/?path=/story/form-components-number-format--unit-input) with '%' postfixed as the unit.
+
+<!-- STORY -->
+
+## Import
+
+```js
+import { PercentFormatField } from '@lifeomic/chroma-react/components/NumberFormat';
+```
+
+## Usage
+
+```jsx
+<PercentFormatField
+  label="Tax"
+  value={someValue}
+  onChange={(value) => {
+    handleChange(value);
+  }}
+/>
+```
+
+### Label
+
+The label to display for the element.
+
+```jsx
+<PercentFormatField label="Lose Rate" />
+```
+
+### Value
+
+Required prop; sets value variable from element value.
+
+```jsx
+<PercentFormatField value={someValue} />
+```
+
+### onChange
+
+Required prop; function that runs when the value changes.
+
+```jsx
+<PercentFormatField onChange={() => doSomething())} />
+```
+
+### Minimum Value
+
+Sets a min value for the element. Defaults to 0.
+
+```jsx
+<PercentFormatField min={10} />
+```
+
+### Maximum Value
+
+Sets a max value for the element. Defaults to Number.MAX_SAFE_INTEGER.
+
+```jsx
+<PercentFormatField max={100} />
+```
+
+### Accessibility
+
+- Similar to `<TextField />`, as it extends that component
+
+## Links
+
+- [Component Source](https://github.com/lifeomic/chroma-react/blob/master/src/components/NumberFormat/PercentFormatField.tsx)
+- [Story Source](https://github.com/lifeomic/chroma-react/blob/master/stories/components/NumberFormat/PercentFormatFieldStory.stories.tsx)

stories/components/NumberFormat/phoneNumberFormat.md

@@ -1,6 +1,6 @@
 # Phone Number Format Field
 
-An input component for entering a phone number, it extends the Chroma TextField component. Uses [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input#readme).
+An input component for entering a phone number, it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all).. Leverages [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input#readme).
 
 <!-- STORY -->
 
@@ -52,7 +52,11 @@ Caption, error text to display underneath the element when an error occurs. For
 the message to be displayed `hasError` must be set as well.
 
 ```jsx
-<PhoneNumberFormatField label="Phone" hasError errorMessage="This is required!" />
+<PhoneNumberFormatField
+  label="Phone"
+  hasError
+  errorMessage="This is required!"
+/>
 ```
 
 ### Disabled

stories/components/NumberFormat/priceFormat.md

@@ -0,0 +1,72 @@
+# Price Format Field
+
+An input component for entering a number as a monetary value in pennies; it leverages the [Chroma Unit Input](https://lifeomic.github.io/chroma-react/?path=/story/form-components-number-format--unit-input). Currently only implements \$USD, with '\$' prefixed as the unit.
+
+<!-- STORY -->
+
+## Import
+
+```js
+import { PriceFormatField } from '@lifeomic/chroma-react/components/NumberFormat';
+```
+
+## Usage
+
+```jsx
+<PriceFormatField
+  label="Monthly Costs"
+  value={someValue}
+  onChange={(value) => {
+    handleChange(value);
+  }}
+/>
+```
+
+### Label
+
+The label to display for the element.
+
+```jsx
+<PriceFormatField label="Groceries" />
+```
+
+### Value
+
+Required prop; sets value variable from element value.
+
+```jsx
+<PriceFormatField value={someValue} />
+```
+
+### onChange
+
+Required prop; function that runs when the value changes.
+
+```jsx
+<PriceFormatField onChange={() => doSomething())} />
+```
+
+### Minimum Value
+
+Sets a min value for the element. Defaults to 0.
+
+```jsx
+<PriceFormatField min={10} />
+```
+
+### Maximum Value
+
+Sets a max value for the element. Defaults to Number.MAX_SAFE_INTEGER.
+
+```jsx
+<PriceFormatField max={100} />
+```
+
+### Accessibility
+
+- Similar to `<TextField />`, as it extends that component
+
+## Links
+
+- [Component Source](https://github.com/lifeomic/chroma-react/blob/master/src/components/NumberFormat/PriceFormatField.tsx)
+- [Story Source](https://github.com/lifeomic/chroma-react/blob/master/stories/components/NumberFormat/PriceFormatFieldStory.stories.tsx)