@edvisor/product-language 0.2.0 → 0.3.1

package/src/lib/components/README.md

@@ -1,49 +0,0 @@
-Components
-==========
-
-This folder contains the components that will be exported from the Product Language and used in the front-end.
-
-```
-/src
-  /lib
-    /components
-      /alert-banner
-      /card
-      index.ts
-```
-
-The index.ts file is a manifest and anything in the manifest will be available the clients.
-
-```
-/src
-  /lib
-    /components
-      /alert-banner
-      /card
-        /components
-        /helpers
-        index.tsx
-        card.tsx
-        card.stories.tsx
-        card.spec.ts
-      index.ts
-```
-
-inside of any component, like `card` you will find another index.ts file. This is a manifest and it should only declare the main file of the component as an export:
-
-```ts
-export * from './card'
-```
-
-None of the specs, stories, sub-components, helpers, or any other kind of thing should appear in the manifest. Using manifests like this allows us to give each component a rich eco-system of helpers and sub-components without needing to move everything to a global scope.
-
-For example, here is a helper in card/helpers.ts
-
-```ts
-// this is not a real helper, just an example
-export function makeCardTitle (title: string) {
-  return `Card: ${title}`
-}
-```
-
-This helper is obviously tightly coupled to the card "concern". It should not be declared in a global helpers file, that wouldn't make sense and it would lower cohesion in the app. In addition, it should not be exported from the manifest, since it is not intended for the client to use it.

package/src/lib/components/alert-banner/alert-banner.tsx

@@ -1,34 +0,0 @@
-import styled from 'styled-components'
-import { FC, Hex, PropsWithChildren } from '@helpers'
-import { AlertLevelProps, getBackgroundColor, getBorderColor } from './alert-level-flags'
-import { Padding } from '@foundations'
-import { CardFrame } from 'components/card/atoms'
-
-interface IAlertBannerProps extends PropsWithChildren {
-  /** @TODO can we get some examples of alert banner in card from figma? */
-  inCard?: boolean
-  dismissible?: boolean
-  className?: string
-}
-
-export type AlertBannerProps = IAlertBannerProps & AlertLevelProps
-
-const InCardFrame = styled(CardFrame).attrs({ as: 'div' })<{ background: Hex, border: Hex }>`
-  display: inline-block;
-  padding: ${Padding.m};
-  width: fill-available;
-
-  background: ${({ background }) => background};
-  border: 1px solid ${({ border }) => border};
-`
-
-export const AlertBanner: FC<AlertBannerProps> = (props) => {
-  const background = getBackgroundColor(props)
-  const border = getBorderColor(props)
-
-  return (
-    <InCardFrame background={background} border={border} className={props.className}>
-      {props.children}
-    </InCardFrame>
-  )
-}

package/src/lib/components/alert-banner/alert-level-flags.ts

@@ -1,77 +0,0 @@
-// this file was generated, but it is safe to modify
-import { Borders, Surface } from '@foundations'
-import { bitwiseOr, Hex, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
-
-const enum AlertLevel {
-  neutral = 1,
-  info = 2,
-  success = 4,
-  warning = 8,
-  critical = 16,
-}
-
-type AlertLevels<T> = MappedEnum<typeof AlertLevel, T>
-
-function toAlertLevel(n: number): AlertLevel {
-  switch (n) {
-    case AlertLevel.neutral:
-      return AlertLevel.neutral
-    case AlertLevel.info:
-      return AlertLevel.info
-    case AlertLevel.success:
-      return AlertLevel.success
-    case AlertLevel.warning:
-      return AlertLevel.warning
-    case AlertLevel.critical:
-      return AlertLevel.critical
-    default:
-      return AlertLevel.neutral
-  }
-}
-
-export type AlertLevelProps = Partial<RequireOnlyOne<AlertLevels<boolean>>> &
-  PropsWithChildren
-
-const AlertLevelBackgroundColors = {
-  [AlertLevel.neutral]: Surface.Neutral.Subdued,
-  [AlertLevel.info]: Surface.Highlight.Subdued,
-  [AlertLevel.success]: Surface.Success.Subdued,
-  [AlertLevel.warning]: Surface.Warning.Subdued,
-  [AlertLevel.critical]: Surface.Critical.Subdued,
-}
-
-const AlertLevelBorderColors = {
-  [AlertLevel.neutral]: Borders.Default.Default,
-  [AlertLevel.info]: Borders.Highlight.Subdued,
-  [AlertLevel.success]: Borders.Success.Subdued,
-  [AlertLevel.warning]: Borders.Warning.Subdued,
-  [AlertLevel.critical]: Borders.Critical.Subdued,
-}
-
-export function getBackgroundColor(props: AlertLevelProps): Hex {
-  return AlertLevelBackgroundColors[
-    toAlertLevel(
-      bitwiseOr([
-        props.neutral,
-        props.info,
-        props.success,
-        props.warning,
-        props.critical,
-      ])
-    )
-  ]
-}
-
-export function getBorderColor(props: AlertLevelProps): Hex {
-  return AlertLevelBorderColors[
-    toAlertLevel(
-      bitwiseOr([
-        props.neutral,
-        props.info,
-        props.success,
-        props.warning,
-        props.critical,
-      ])
-    )
-  ]
-}

package/src/lib/components/alert-banner/index.ts

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

package/src/lib/components/badge/badge-type-flags.ts

@@ -1,72 +0,0 @@
-// this file was generated, but it is safe to modify
-import { Hex, PropsWithChildren } from '@helpers'
-import { Surface } from '@foundations'
-
-const enum BadgeType {
-  neutral = 1,
-  info = 2,
-  success = 4,
-  warning = 8,
-  critical = 16,
-}
-
-export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
-T,
-Exclude<keyof T, Keys>
-> &
-{
-  [K in Keys]-?: Required<Pick<T, K>> &
-    Partial<Record<Exclude<Keys, K>, undefined>>;
-}[Keys];
-
-export type MappedEnum<E, T> = {
-  [key in keyof E]: T;
-}
-
-type BadgeTypes<T> = MappedEnum<typeof BadgeType, T>
-
-function toBadgeType(n: number): BadgeType {
-  switch (n) {
-    case BadgeType.neutral:
-      return BadgeType.neutral
-    case BadgeType.info:
-      return BadgeType.info
-    case BadgeType.success:
-      return BadgeType.success
-    case BadgeType.warning:
-      return BadgeType.warning
-    case BadgeType.critical:
-      return BadgeType.critical
-    default:
-      return BadgeType.neutral
-  }
-}
-
-const BadgeTypeColors = {
-  [BadgeType.neutral]: Surface.Neutral.Default,
-  [BadgeType.info]: Surface.Highlight.Default,
-  [BadgeType.success]: Surface.Success.Default,
-  [BadgeType.warning]: Surface.Warning.Default,
-  [BadgeType.critical]: Surface.Critical.Default,
-}
-
-export type BadgeTypeProps = Partial<RequireOnlyOne<BadgeTypes<boolean>>> &
-  PropsWithChildren
-
-function bitwiseOr(flags: unknown[]): number {
-  return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
-}
-
-export function getColor(props: BadgeTypeProps): Hex {
-  return BadgeTypeColors[
-    toBadgeType(
-      bitwiseOr([
-        props.neutral,
-        props.info,
-        props.success,
-        props.warning,
-        props.critical,
-      ])
-    )
-  ]
-}

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

@@ -1,16 +0,0 @@
-import { StoryComponent, talesOf } from '@stories'
-import { Badge } from './badge'
-
-const Story: StoryComponent = () => {
-  return (
-    <>
-      <Badge neutral>Neutral</Badge>
-      <Badge info>Informational</Badge>
-      <Badge warning>Warning</Badge>
-      <Badge success>Success</Badge>
-      <Badge critical>Critical</Badge>
-    </>
-  )
-}
-
-talesOf(__filename, module, Story)

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

@@ -1,29 +0,0 @@
-import { render } from '@testing-library/react'
-import { Badge } from './badge'
-
-describe('Badge', () => {
-  it('should render Neutral Badge successfully', () => {
-    const { baseElement } = render(<Badge neutral>Neutral</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should render Informational Badge successfully', () => {
-    const { baseElement } = render(<Badge info>Informational</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should render Warning Badge successfully', () => {
-    const { baseElement } = render(<Badge warning>Warning</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should render Success Badge successfully', () => {
-    const { baseElement } = render(<Badge success>Success</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should render Critical Badge successfully', () => {
-    const { baseElement } = render(<Badge critical>Critical</Badge>)
-    expect(baseElement).toBeTruthy()
-  })
-})

package/src/lib/components/badge/badge.tsx

@@ -1,31 +0,0 @@
-import styled from 'styled-components'
-import { Padding } from '@foundations'
-import { BadgeTypeProps, getColor } from './badge-type-flags'
-import { FC, PropsWithChildren } from '@helpers'
-import { Label2 } from 'components/typography'
-
-const BadgeFrame = styled.div<{color: string}>`
-  background: ${props => props.color};
-  display: flex;
-  flex-direction: row;
-  align-items:center;
-  gap: 8px;
-  padding: ${Padding.xxxs} ${Padding.s};
-  border-radius:100px;
-  width: fit-content;
-`
-
-type IBadgeProps = BadgeTypeProps & PropsWithChildren
-
-const Base: FC<IBadgeProps> = (props) => {
-  const color = getColor(props)
-
-
- return (
-    <BadgeFrame color={color}>
-      <Label2>{props.children}</Label2>
-    </BadgeFrame>
-  )
-}
-
-export const Badge = Base

package/src/lib/components/badge/index.ts

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

package/src/lib/components/card/atoms/index.ts

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

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

@@ -1,163 +0,0 @@
-import { Margin } from '@foundations'
-import { fireEvent, render, screen } from '@testing-library/react'
-import styled from 'styled-components'
-
-import { Card } from './card'
-
-describe('Card', () => {
-  it('renders with the heading', () => {
-    render(
-      <Card heading='Heading'>Contents</Card>
-    )
-
-    expect(screen.getByRole('heading')).toBeInTheDocument()
-    expect(screen.getByText('Heading')).toBeInTheDocument()
-    expect(screen.getByText('Contents')).toBeInTheDocument()
-  })
-
-  it('renders without the heading', () => {
-    render(
-      <Card>Contents</Card>
-    )
-
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument()
-    expect(screen.getByText('Contents')).toBeInTheDocument()
-  })
-
-  /** 
-   * this test just ensures that the programmer did not
-   * forget to add className? to the props and then pass
-   * it to the wrapping element so that users downstream
-   * can style the component
-   */
-  it('accepts styles', () => {
-    const NiceCard = styled(Card)`
-      margin-bottom: ${Margin.l};
-    `
-
-    const { container } = render(<NiceCard>Contents</NiceCard>)
-
-    expect(container.firstChild).toHaveStyle(`margin-bottom: ${Margin.l}`)
-    expect(screen.getByText('Contents')).toBeInTheDocument()
-  })
-
-  describe('slots', () => {
-    it('renders no regions if it has no headings', () => {
-      render(
-        <Card>Contents</Card>
-      )
-
-      expect(screen.queryByRole('region')).not.toBeInTheDocument()
-      expect(screen.getByText('Contents')).toBeInTheDocument()
-    })
-
-    it('renders one region if the card has a heading', () => {
-      render(
-        <Card heading='Heading'>Contents</Card>
-      )
-
-      expect(screen.getByRole('region')).toBeInTheDocument()
-      expect(screen.getAllByRole('region').length).toBe(1)
-      expect(screen.getByText('Contents')).toBeInTheDocument()
-    })
-
-    it('renders one region per heading', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section heading='Subheading 1'>Section 1</Card.Section>
-          <Card.Section heading='Subheading 2'>Section 2</Card.Section>
-          <Card.Section>Section 3</Card.Section>
-          <Card.Section>Section 4</Card.Section>
-        </Card>
-      )
-
-      expect(screen.getAllByRole('region').length).toBe(3)
-    })
-
-    it('renders all the given sections', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section heading='Subheading 1'>Section 1</Card.Section>
-          <Card.Section heading='Subheading 2'>Section 2</Card.Section>
-          <Card.Section>Section 3</Card.Section>
-          <Card.Section>Section 4</Card.Section>
-        </Card>
-      )
-
-      expect(screen.getByText('Section 1')).toBeInTheDocument()
-      expect(screen.getByText('Section 2')).toBeInTheDocument()
-      expect(screen.getByText('Section 3')).toBeInTheDocument()
-      expect(screen.getByText('Section 4')).toBeInTheDocument()
-    })
-
-    it('does not render plain children if you give it sections', () => {
-      render(
-        <Card>
-          <Card.Section>Section 1</Card.Section>
-          <div data-testid='plain-children'>PLAIN CHILDREN</div>
-        </Card>
-      )
-
-      expect(screen.getByText('Section 1')).toBeInTheDocument()
-      expect(screen.queryByTestId('plain-children')).not.toBeInTheDocument()
-    })
-
-    it('renders the heading actions if there is a heading', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section>Section 1</Card.Section>
-          <Card.HeadingAction>
-            <button>Click Me</button>
-          </Card.HeadingAction>
-        </Card>
-      )
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('does not render heading actions if there is no heading', () => {
-      render(
-        <Card>
-          <Card.Section>Section 1</Card.Section>
-          <Card.HeadingAction>
-            <button>Click Me</button>
-          </Card.HeadingAction>
-        </Card>
-      )
-
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    })
-
-    it('renders the controls when they are provided', () => {
-      render(
-        <Card heading='Heading'>
-          <Card.Section>Section 1</Card.Section>
-          <Card.Controls>
-            <button>Click Me</button>
-          </Card.Controls>
-        </Card>
-      )
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('does not stop the user from clicking the controls', () => {
-      const handleClick = jest.fn()
-
-      render(
-        <Card heading='Heading'>
-          <Card.Section>Section 1</Card.Section>
-          <Card.Controls>
-            <button onClick={handleClick}>Click Me</button>
-          </Card.Controls>
-        </Card>
-      )
-
-      fireEvent.click(screen.getByText('Click Me'), {
-        target: { value: 'JavaScript' },
-      })
-  
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-})

package/src/lib/components/card/card.tsx

@@ -1,78 +0,0 @@
-import styled from 'styled-components'
-import { isDefined, isEmpty, getSlots, getChildren, FC, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
-import { Padding, Margin, shadow } from '@foundations'
-import { CardFrame as CardFrameBase } from './atoms'
-import { Heading3 } from 'components/typography'
-import { SpaceBetween } from 'components/layout'
-import { CardAlertBannerSlot, CardControlsSlot, CardHeadingActionSlot, CardSectionSlot } from './components'
-import { HTMLAttributes } from 'react'
-
-const CardHeading = styled(SpaceBetween)`
-  margin: ${Margin.none} ${Margin.l} ${Margin.none} ${Margin.l};
-  padding-top: ${Padding.l};
-`
-
-/** remove the margin bottom here since the frame handles it */
-const CardHeadingText = styled(Heading3)`
-  margin-bottom: ${Margin.none};
-`
-
-const CardFrame = styled(CardFrameBase)`
-  ${shadow};
-
-  > section:nth-of-type(1) {
-    border: none;
-  }
-`
-
-export interface ICardProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
-  heading?: string
-}
-
-const SubComponents = {
-  Section: CardSectionSlot,
-  Controls: CardControlsSlot,
-  HeadingAction: CardHeadingActionSlot,
-  AlertBanner: CardAlertBannerSlot,
-}
-
-export const Card: FC<ICardProps, typeof SubComponents> = (props) => {
-  const { children, heading, ...htmlProps } = props
-
-  const sections = getSlots(CardSectionSlot, children)
-  const controls = getSlot(CardControlsSlot, children)
-  const headingAction = getSlot(CardHeadingActionSlot, children)
-  const alertBanners = getSlots(CardAlertBannerSlot, children)
-  const otherChildren = getChildren(children)
-
-  const headingId = isDefined(heading)
-    ? toKebabCase(heading)
-    : undefined
-
-  return (
-    <CardFrame
-      aria-labelledby={headingId}
-      {...htmlProps}
-    >
-      <If is={alertBanners}>{alertBanners}</If>
-      <If is={heading}>
-        <CardHeading>
-          <CardHeadingText id={headingId}>{heading}</CardHeadingText>
-          <If is={headingAction}>{headingAction}</If>
-        </CardHeading>
-      </If>
-      {isEmpty(sections) ? (
-        <CardSectionSlot>{otherChildren}</CardSectionSlot>
-      ) : (
-        sections
-      )}
-      <If is={controls}>{controls}</If>
-    </CardFrame>
-  )
-}
-
-/** export the slots and some sub-components */
-Card.Section = CardSectionSlot
-Card.Controls = CardControlsSlot
-Card.HeadingAction = CardHeadingActionSlot
-Card.AlertBanner = CardAlertBannerSlot

package/src/lib/components/card/components/card-alert-banner-slot.tsx

@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-import { Slot } from '@helpers'
-import { Margin } from '@foundations'
-import { AlertBanner, AlertBannerProps } from 'components/alert-banner'
-
-const CardAlertBanner = styled(AlertBanner)`
-  margin: ${Margin.l} ${Margin.l} ${Margin.none} ${Margin.l};
-`
-
-export class CardAlertBannerSlot extends Slot<AlertBannerProps> {
-  override render () {
-    return (
-      <CardAlertBanner {...this.props}>{this.props.children}</CardAlertBanner>
-    )
-  }
-}

package/src/lib/components/card/components/card-controls-slot.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-import { Slot, PropsWithChildren } from '@helpers'
-import { Padding } from '@foundations'
-import { Flex } from 'components/layout'
-
-const ControlsFrame = styled(Flex)`
-  justify-content: end;
-  padding: ${Padding.none} ${Padding.l} ${Padding.l} ${Padding.l};
-`
-
-export class CardControlsSlot extends Slot<PropsWithChildren> {
-  override render () {
-    return (
-      <ControlsFrame>
-        {this.props.children}
-      </ControlsFrame>
-    )
-  }
-}

package/src/lib/components/card/components/card-section-slot.tsx

@@ -1,51 +0,0 @@
-import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { isDefined, Slot, getChildren, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
-import { Borders, Padding, Margin } from '@foundations'
-import { Heading4 } from 'components/typography'
-import { SpaceBetween } from 'components/layout'
-
-export class CardHeadingActionSlot extends Slot {}
-
-interface ICardSectionProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
-  heading?: string
-}
-
-const Subheading = styled(Heading4)`
-  margin: ${Margin.none};
-`
-
-const SectionFrame = styled.section`
-  border-top: 1px solid ${Borders.Default.Subdued};
-
-  padding: ${Padding.l};
-`
-
-const SubheadingFrame = styled(SpaceBetween)`
-  margin: ${Margin.none} ${Margin.none} ${Margin.m} ${Margin.none};
-`
-
-export class CardSectionSlot extends Slot<ICardSectionProps> { 
-  override render () {
-    const headingAction = getSlot(CardHeadingActionSlot, this.props.children)
-    const children = getChildren(this.props.children)
-    const headingId = isDefined(this.props.heading)
-      ? toKebabCase(this.props.heading)
-      : undefined
-
-    return (
-      <SectionFrame
-        aria-labelledby={headingId}
-        {...this.props}
-      >
-        <If is={this.props.heading}>
-          <SubheadingFrame>
-            <Subheading id={headingId}>{this.props.heading}</Subheading>
-            <If is={headingAction}>{headingAction}</If>
-          </SubheadingFrame>
-        </If>
-        {children}
-      </SectionFrame>
-    )
-  }
-}

package/src/lib/components/card/components/index.ts

@@ -1,3 +0,0 @@
-export * from './card-alert-banner-slot'
-export * from './card-controls-slot'
-export * from './card-section-slot'

package/src/lib/components/card/index.ts

@@ -1,2 +0,0 @@
-export * from './card'
-export * from './molecules/left-right-card'

package/src/lib/components/card/molecules/index.ts

@@ -1 +0,0 @@
-export * from './left-right-card'