@edvisor/product-language 0.10.0 → 0.10.2

package/src/lib/components/date-picker/storybook/components.tsx

@@ -0,0 +1,259 @@
+import { Button, InputField, Label } from '@components'
+import { Padding } from '@foundations'
+import { isDefined } from '@helpers'
+import { OverflowPlayground as Playground } from '@stories'
+import styled from 'styled-components'
+import { DatePicker } from '../date-picker'
+import { datePickerFactory } from '../helpers/date-picker-factory'
+
+export const DatePickerExample = () => (
+  <Playground
+    code={`
+<DatePicker label='Start Date' />
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerFormatExample = () => (
+  <Playground
+    code={`
+const [value, setValue] = useState(new Date().toISOString());
+
+<>
+  <div>You Chose: {value}</div>
+  <DatePicker format={undefined}                     value={value} onChange={setValue} />
+  <DatePicker format='MMMM D, YYYY'                  value={value} onChange={setValue} />
+  <DatePicker format={({ date }) => 'Today is: ' + date} value={value} onChange={setValue} />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerAvailableDatesExample = () => (
+  <Playground
+    code={`
+const today = new Date().toISOString()
+const tomorrow = new Date(today)
+tomorrow.setDate(tomorrow.getDate() + 1)
+
+const isUnavailable = ({ date }) => new Date(date).getDay() === 6 || new Date(date).getDay() === 0;
+const isTomorrow = ({ date, isSameDate }) => isSameDate(date, tomorrow);
+
+<>
+  <div>No weekends, and we can do same day but not next day.</div>
+  <DatePicker min={today} isAvailable={(props) => !isUnavailable(props) && !isTomorrow(props)} />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerControlledExample = () => (
+  <Playground
+    code={`
+const [value, setValue] = useState(new Date().toISOString());
+
+<>
+  <div>You chose: {value}</div>
+  <DatePicker value={value} onChange={setValue} label='Start Date' />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerControlledOpenExample = () => (
+  <Playground
+    code={`
+const [open, setOpen] = useState(false);
+
+<>
+  <Button onClick={() => setOpen(!open)}>{open ? 'Close' : 'Open'} Sesame!</Button>
+  <DatePicker isOpen={open} onClick={() => setOpen(!open)} label='Start Date' />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Button,
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerCustomHandleExample = () => (
+  <Playground
+    code={`
+<DatePicker>
+  <DatePicker.Controls>
+    <Label>Click Me</Label>
+  </DatePicker.Controls>
+</DatePicker>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        Label,
+      },
+    }}
+  />
+)
+
+const Controls = styled.div`
+  padding: ${Padding.l};
+`
+
+export const DatePickerWithExtraStuffInTheCalendar = () => (
+  <Playground
+    code={`
+const [open, setOpen] = useState(false)
+const [value, setValue] = useState(new Date().toISOString())
+const [draft, setDraft] = useState(value);
+const publish = (date) => {
+  setValue(date)
+  setDraft(date)
+}
+
+const NULL_DATE = ''
+const format = ({ date, defaultFormatter }) => date === NULL_DATE 
+  ? 'Next Available' 
+  : defaultFormatter(date, 'MMMM D, YYYY');
+
+<>
+  <DatePicker 
+    format={format} 
+    value={draft} 
+    onChange={setDraft} 
+    label='Start Date'
+    isOpen={open}
+    onClick={setOpen}
+  >
+    <Controls>
+      <Button onClick={() => publish(NULL_DATE)}>Next Available</Button>
+      <Button onClick={() => { setDraft(value); setOpen(false) }}>Cancel</Button>
+      <Button onClick={() => { publish(draft); setOpen(false) }}>Confirm</Button>
+    </Controls>
+  </DatePicker>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        Controls,
+        Button,
+        InputField,
+      },
+    }}
+  />
+)
+
+const EpochDatePicker = datePickerFactory<number>({
+  toDate: (n) => new Date(n),
+  fromDate: (date) => isDefined(date) ? date.valueOf() : 0,
+  empty: (date) => date.valueOf() === 0,
+})
+
+export const DatePickerFactoryExample = () => (
+  <Playground
+    code={`
+const [open, setOpen] = useState(false)
+const [value, setValue] = useState(new Date().valueOf())
+const [draft, setDraft] = useState(value)
+const publish = (date) => {
+  setValue(date)
+  setDraft(date)
+}
+
+const format = ({ date, defaultFormatter }) => date.valueOf() === 0
+  ? 'Next Available' 
+  : defaultFormatter(date, 'MMMM D, YYYY');
+
+<>
+  You Chose: {value}
+  <EpochDatePicker 
+    format={format} 
+    value={draft} 
+    onChange={setDraft} 
+    label='Start Date'
+    isOpen={open}
+    onClick={setOpen}
+  >
+    <Controls>
+      <Button onClick={() => publish(0)}>Next Available</Button>
+      <Button onClick={() => { setDraft(value); setOpen(false) }}>Cancel</Button>
+      <Button onClick={() => { publish(draft); setOpen(false) }}>Confirm</Button>
+    </Controls>
+  </EpochDatePicker>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        EpochDatePicker,
+        Controls,
+        Button,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerFormExample = () => (
+  <Playground
+    code={`
+const [min, setMin] = useState(new Date().toISOString())
+const [max, setMax] = useState(new Date().toISOString());
+
+<form onSubmit={(e) => e.preventDefault()}>
+  <DatePicker max={max} label='min' value={min} onChange={setMin} />
+  <DatePicker min={min} label='max' value={max} onChange={setMax} />
+  <DatePicker 
+    label='Start Date'
+    required 
+    min={min}
+    max={max}
+  />
+  <Button primary type='submit'>Submit</Button>
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        Button,
+        InputField,
+        Label,
+      },
+    }}
+  />
+)

package/src/lib/components/date-picker/storybook/date-picker.stories.mdx

@@ -0,0 +1,133 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { AlertBanner } from 'components/alert-banner'
+import { 
+  DatePickerExample, 
+  DatePickerFormatExample,
+  DatePickerCustomHandleExample,
+  DatePickerRangeExample,
+  DatePickerControlledExample,
+  DatePickerControlledOpenExample,
+  DatePickerWithExtraStuffInTheCalendar,
+  DatePickerFactoryExample,
+  DatePickerAvailableDatesExample,
+  DatePickerFormExample,
+} from './components'
+import { DatePicker } from '../date-picker'
+
+<Meta title="Components/Date Picker"/>
+
+# Date Picker
+
+Date Pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Edvisor. For more details refer to <a href='https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7365&t=Cz5qnAbrJNBJj8b1-0'>figma</a>. 
+
+## How to Use It
+
+```tsx
+import { DatePicker } from '@edvisor/product-language'
+
+<DatePicker />
+```
+
+### Uncontrolled
+
+Drop it into your project uncontrolled.
+
+<DatePickerExample />
+
+### Controlled
+
+Add state to control the date picker. By default the DatePicker takes a string as value. 
+
+<DatePickerControlledExample />
+
+### Familiar HTML Input Interface
+
+Wrap it in a form and mark it required. Pass in a min/max to restrict input to that range.
+
+<DatePickerFormExample />
+
+### Specify Available Dates
+
+In addition to the min/max prop, you can pass in an `isAvailable` callback to apply specific restrictions.
+
+<DatePickerAvailableDatesExample />
+
+## Props
+
+extends `InputHTMLAttributes<HTMLInputElement>` except where described below.
+
+| Prop            | Type                        | Description                                       |
+| --------------- | --------------------------- | ------------------------------------------------- |
+| `value?`        | `string`                    | The date                                          |
+| `defaultValue?` | `string`                    | Provide a value for the uncontrolled component    |
+| `onChange?`     | `(change: string) => void`  | Receive the value when it changes                 |
+| `min?`          | `string`                    | The earliest date the user can choose             |
+| `max?`          | `string`                    | The latest date the user can choose               |
+| `isAvailable?`  | `(date: string) => boolean` | A predicate that determines if a date is disabled |
+
+## Customization
+
+The default is sufficient for most cases, but you can also customize the DatePicker.
+
+### Custom Open/Close
+
+By controlling the open state you can open or close the input from outside.
+
+<DatePickerControlledOpenExample />
+
+### Custom Format
+
+Pass in a format string or a custom formatting function. This only affects the visual format of the data.
+
+<DatePickerFormatExample />
+
+### Custom Input/Handle
+
+The input/handle can be replaced using the Controls slot.
+
+<DatePickerCustomHandleExample />
+
+### Custom Calendar Controls
+
+Children are rendered inside the calendar>
+
+<DatePickerWithExtraStuffInTheCalendar />
+
+### Props
+
+| Prop       | Type                     | Description                                      |
+| ---------- | ------------------------ | ------------------------------------------------ |
+| `isOpen?`  | `boolean`                | Determines if the Calendar is visible            |
+| `onClick?` | `() => void`             | Called when the input/handle is clicked          |
+| `format?`  | `string | DateFormatter` | Called to render the date visually in the handle |
+
+### Slots
+
+| Slot       | Description                                  |
+| ---------- | -------------------------------------------- |
+| `Controls` | Completely replaces the default input/handle |
+| `children` | Adds UI elements inside the Calendar         |
+
+## DatePicker Factory
+
+In all the previous examples, the date picker used string as input and output. You can create a DatePicker for any data type using datePickerFactory. For example, you could use number:
+
+```ts
+const EpochDatePicker = datePickerFactory<number>({
+  toDate: (n) => new Date(n),
+  fromDate: (date) => isDefined(date) ? date.valueOf() : 0,
+  empty: (date) => date.valueOf() === 0,
+})
+```
+
+This makes it relatively easy to use the DatePicker with date libraries like Luxon.
+
+<DatePickerFactoryExample />
+
+## Props
+
+| Prop       | Type                      | Description                                                                        |
+| ---------- | ------------------------- | ---------------------------------------------------------------------------------- |
+| `toDate`   | `(el: T) => Date`         | Maps your type to date                                                             |
+| `fromDate` | `(date: Date) => T`       | Maps date to your type                                                             |
+| `empty`    | `(date: Date) => boolean` | Returns true if you give it the empty element of your type (such as '' for string) |

package/src/lib/components/divider/divider-type-flags.tsx

@@ -0,0 +1,37 @@
+// this file was generated, but it is safe to modify
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+import { Borders } from '@foundations'
+
+const enum DividerType {
+  default = 1,
+  subdued = 2,
+}
+
+type DividerTypes<T> = MappedEnum<typeof DividerType, T>
+
+function toDividerType(n: number): DividerType {
+  switch (n) {
+    case DividerType.default:
+      return DividerType.default
+    case DividerType.subdued:
+      return DividerType.subdued
+    default:
+      return DividerType.default
+  }
+}
+
+const DividerTypeColor = {
+  [DividerType.default]: Borders.Default.Default,
+  [DividerType.subdued]: Borders.Default.Subdued,
+}
+
+export type DivideTypeProps = Partial<RequireOnlyOne<DividerTypes<boolean>>> &
+  PropsWithChildren
+
+export function getColor(props: DivideTypeProps): string {
+  return DividerTypeColor[
+    toDividerType(
+      bitwiseOr([props.default, props.subdued])
+    )
+  ]
+}

package/src/lib/components/divider/divider.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react'
+import { Divider } from './index'
+import { Borders } from '@foundations'
+
+describe('Divider Tests', () => {
+  describe('Divider Tests', () => {
+    it('should render the Divider with default color', async () => {
+      render(
+        <Divider/>
+      )
+
+      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
+      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Default}`)
+    })
+
+    it('should render the Divider with default color using parameter', async () => {
+      render(
+        <Divider default/>
+      )
+
+      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
+      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Default}`)
+    })
+
+    it('should render the Divider with subdued color', async () => {
+      render(
+        <Divider subdued/>
+      )
+
+      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
+      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Subdued}`)
+    })
+  })
+})

package/src/lib/components/divider/divider.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+import { FC } from '@helpers'
+import { DivideTypeProps, getColor } from './divider-type-flags'
+
+/** 
+ * @TODO I added flex here because without it the bottom margin was
+ * being collapsed with the next sibling (when I applied margins to the divider,
+ * which I expect we basically _always_ will)
+ * 
+ * I'm not confident with reasoning about margin-collapse so if you see
+ * this comment and feel like experimenting, go crazy. Check out the
+ * card stories for an example of the divider (it's way at the bottom)
+ */
+const DividerWrapper = styled.div`
+  position: relative;
+  width:100%;
+`
+
+const DividerLine = styled.hr<{ color: string }>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: unset;
+  border: 1px solid ${({ color }) => color};
+`
+
+type IProps = { className?: string } & DivideTypeProps
+
+export const Divider: FC<IProps> = (props) => {
+  const color = getColor(props)
+
+  return (
+    <DividerWrapper className={props.className}>
+      <DividerLine color={color} data-testid="divider-test"/>
+    </DividerWrapper>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './divider'

package/src/lib/components/divider/stories/components.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+import { Padding, Surface } from '@foundations'
+
+
+const WrapperStories = styled.div`
+  width: 390px;
+  padding: ${Padding.l};
+  background: ${Surface.Default.Default};
+`
+
+export {
+  WrapperStories
+}

package/src/lib/components/divider/stories/divider.stories.mdx

@@ -0,0 +1,44 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import { Divider } from '../index'
+import { WrapperStories, AvatarsWithText, AvatarsWithImage, WrapperStoriesWithLabel } from './components'
+
+<Meta
+  title="Components/Divider"
+  component={Divider}
+/>
+
+# Divider
+
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1194%3A1611)
+
+## How to use
+
+```javascript
+// Import the component
+import { Divider } from './index'
+
+
+// Render the component sending the parameters
+<Divider default/>
+
+//or
+
+<Divider subdued/>
+```
+
+## Examples
+
+Default Divider
+<Canvas>
+  <WrapperStories>
+    <Divider default/>
+  </WrapperStories>
+</Canvas>
+
+Subdued Divider
+<Canvas>
+  <WrapperStories>
+    <Divider subdued/>
+  </WrapperStories>
+</Canvas>
+

package/src/lib/components/flag/flag-size-flags.tsx

@@ -0,0 +1,55 @@
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+export const enum FlagSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+
+type FlagSizes<T> = MappedEnum<typeof FlagSize, T>
+
+function toFlag(n: number): FlagSize {
+  switch (n) {
+    case FlagSize.small:
+      return FlagSize.small
+    case FlagSize.medium:
+      return FlagSize.medium
+    case FlagSize.large:
+      return FlagSize.large
+    default:
+      return FlagSize.medium
+  }
+}
+
+const FlagWidthValues = {
+  [FlagSize.small]: '20',
+  [FlagSize.medium]: '20',
+  [FlagSize.large]: '32',
+}
+
+const FlagHeightValues = {
+  [FlagSize.small]: '20',
+  [FlagSize.medium]: '20',
+  [FlagSize.large]: '24',
+}
+
+export type FlagProps = Partial<RequireOnlyOne<FlagSizes<boolean>>> &
+  PropsWithChildren
+
+export function getHeigthBySize(props: FlagProps): string {
+  return FlagHeightValues[
+    getFlagSize(props)
+  ]
+}
+
+export function getWidthBySize(props: FlagProps): string {
+  return FlagWidthValues[
+    getFlagSize(props)
+  ]
+}
+
+export function getFlagSize(props: FlagProps) {
+  return toFlag(
+    bitwiseOr([props.small, props.medium, props.large])
+  )
+}