@edvisor/product-language 0.2.0 → 0.3.0

package/src/lib/foundations/typography/typography.tsx

@@ -1,95 +1,100 @@
 import { css } from 'styled-components'
-import { getTextAspect, ITextAspectProps } from './text-aspect-flags'
+import { getTextAspect, ITransientTextAspectProps } from './text-aspect-flags'
 import { FontWeight, FontSize, LineHeight } from './constants'
 import { is } from '@helpers'
+import { InterFontFace } from './fonts'
 
-export type ITextProps = ITextAspectProps & { emphasis?: boolean }
+export type ILabelProps = ITransientTextAspectProps & {
+  default?: boolean,
+  subtle?: boolean,
+  strong?: boolean, 
+}
+
+export type IBodyProps = ITransientTextAspectProps & {
+  default?: boolean,
+  strong?: boolean, 
+}
 
 const LightText = css` 
   color: ${getTextAspect({ light: true })};
 `
 
-const Base = css<ITextProps>`
+const Base = css<ITransientTextAspectProps>`
   color: ${(props) => getTextAspect(props)};
+  ${InterFontFace}
   font-family: 'Inter';
 `
 
-const Display = css<ITextProps>`
+const Display = css<ITransientTextAspectProps>`
   ${Base}
   font-weight: ${FontWeight.Regular};
   font-size: ${FontSize.g};
   line-height: ${LineHeight.f};
 `
 
-const Heading1 = css<ITextProps>`
+const Heading1 = css<ITransientTextAspectProps>`
   ${Base}
   font-weight: ${FontWeight.SemiBold};
   font-size: ${FontSize.f};
   line-height: ${LineHeight.e};
 `
 
-const Heading2 = css<ITextProps>`
+const Heading2 = css<ITransientTextAspectProps>`
   ${Heading1}
   font-size: ${FontSize.e};
   line-height: ${LineHeight.d};
 `
 
-const Heading3 = css<ITextProps>`
+const Heading3 = css<ITransientTextAspectProps>`
   ${Heading1}
   font-size: ${FontSize.c};
   line-height: ${LineHeight.c};
 `
 
-const Heading4 = css<ITextProps>`
+const Heading4 = css<ITransientTextAspectProps>`
   ${Heading1}
   font-size: ${FontSize.b};
   line-height: ${LineHeight.b};
 `
 
-const BodyLarge = css<ITextProps>`
+const Body = css<IBodyProps>`
   ${Base}
-  font-weight: ${({ emphasis }) => is(emphasis) ? FontWeight.SemiBold : FontWeight.Regular};
-  font-size: ${FontSize.d};
-  line-height: ${LineHeight.d};
-`
-
-const Body = css<ITextProps>`
-  ${BodyLarge}
-  font-weight: ${({ emphasis }) => is(emphasis) ? FontWeight.Medium : FontWeight.Regular};
+  font-weight: ${({ strong }) => is(strong) ? FontWeight.Medium : FontWeight.Regular};
   font-size: ${FontSize.b};
   line-height: ${LineHeight.b};
 `
 
-const Caption = css<ITextProps>`
-  ${BodyLarge}
-  font-size: ${FontSize.a};
-  line-height: ${LineHeight.a};
-`
-
-const Label1 = css<ITextProps>`
-  ${BodyLarge}
-  font-weight: ${({ emphasis }) => is(emphasis) ? FontWeight.Medium : FontWeight.Regular};
-  font-size: ${FontSize.b};
-  line-height: ${LineHeight.b};
+const BodyLarge = css<IBodyProps>`
+  ${Base}
+  font-weight: ${({ strong }) => is(strong) ? FontWeight.SemiBold : FontWeight.Regular};
+  font-size: ${FontSize.d};
+  line-height: ${LineHeight.d};
 `
 
-const Label2 = css<ITextProps>`
-  ${BodyLarge}
+const Caption = css<ITransientTextAspectProps>`
+  ${Base}
+  font-weight: ${FontWeight.Regular};
   font-size: ${FontSize.a};
   line-height: ${LineHeight.a};
 `
 
+const Label = css<ILabelProps>`
+  ${Base}
+  font-weight:  ${({ strong }) => is(strong) ? FontWeight.Medium : FontWeight.Regular};
+  font-size: ${({ subtle }) => is(subtle) ? FontSize.a : FontSize.b};
+  line-height: ${({ subtle }) => is(subtle) ? LineHeight.a : LineHeight.b};
+`
+
 export const Typography = {
   Display,
   Heading1,
   Heading2,
   Heading3,
   Heading4,
-  BodyLarge,
   Body,
+  BodyLarge,
   Caption,
-  Label1,
-  Label2,
+  Label,
 }
 
 export const _Typography = {

package/src/lib/helpers/numbers.ts

@@ -51,3 +51,17 @@ export function concatHex(a: Hex, b: Hex): Hex {
 export function bitwiseOr(flags: unknown[]): number {
   return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
 }
+
+
+/** given a number, it returns the number formed by the rightmost set bit as 1 and the 0s that comes after it
+ * 
+ * ```ts
+ * getRightmostSetBitNumber(12) => 4 // 12(1100) => 4(100)
+ * getRightmostSetBitNumber(40) => 8 // 40(101000) => 8(1000)
+ * ```
+ * 
+ * */
+
+export function getRightmostSetBitNumber(n: number) {
+  return n & -n
+}

package/src/lib/helpers/safe-navigation.ts

@@ -32,3 +32,13 @@ export function is (pred?: boolean): boolean {
 export function safeArray<T>(arr: T[] | undefined | null): T[] {
   return isDefined(arr) ? arr : []
 }
+
+export function safeCallback <T>(f?: (e: T) => void, e?: T) {
+  if (isDefined(f)) {
+    if (isDefined(e)) {
+      f(e)
+    } else {
+      (f as () => void)()
+    }
+  }
+}

package/src/lib/helpers/slots.test.tsx

@@ -0,0 +1,98 @@
+import styled from 'styled-components'
+import { FC } from './generic-types'
+import { isReactElementOfType, Slot } from './slots'
+
+describe('isReactElementOfType', () => {
+  describe('class component', () => {
+    class Bob extends Slot {}
+
+    describe('both component and element are unstyled', () => {
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(Bob)(<Bob />)).toBe(true)
+      })
+    })
+
+    describe('component type is styled', () => {
+      const StyledBob = styled(Bob)``
+
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(StyledBob)(<Bob />)).toBe(true)
+      })
+    })
+
+    describe('element is styled', () => {
+      const StyledBob = styled(Bob)``
+
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(Bob)(<StyledBob />)).toBe(true)
+      })
+    })
+
+    describe('both component and element are styled', () => {
+      const StyledBob = styled(Bob)``
+
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(StyledBob)(<StyledBob />)).toBe(true)
+      })
+    })
+  })
+
+  describe('function component', () => {
+    const Bob: FC = () => <div />
+
+    describe('both component and element are unstyled', () => {
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(Bob)(<Bob />)).toBe(true)
+      })
+    })
+
+    describe('component type is styled', () => {
+      const StyledBob = styled(Bob)``
+
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(StyledBob)(<Bob />)).toBe(true)
+      })
+    })
+
+    describe('element is styled', () => {
+      const StyledBob = styled(Bob)``
+
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(Bob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(Bob)(<StyledBob />)).toBe(true)
+      })
+    })
+
+    describe('both component and element are styled', () => {
+      const StyledBob = styled(Bob)``
+
+      it('knows when they are different', () => {
+        expect(isReactElementOfType(StyledBob)(<div />)).toBe(false)
+      })
+      it('knows when they are the same', () => {
+        expect(isReactElementOfType(StyledBob)(<StyledBob />)).toBe(true)
+      })
+    })
+  })
+
+})

package/src/lib/helpers/slots.tsx

@@ -1,5 +1,7 @@
-import { Children, PureComponent, ReactElement, ReactNode } from 'react'
-import { PropsWithChildren } from './generic-types'
+import { Children, CSSProperties, PureComponent, ReactElement, ReactNode } from 'react'
+import { StyledComponent } from 'styled-components'
+import { FC, PropsWithChildren } from './generic-types'
+import { Nothing } from './nothing'
 import { isDefined, isNil } from './safe-navigation'
 
 /** 
@@ -22,17 +24,64 @@ function isReactElement (obj?: any): obj is ReactElement {
   return isDefined(obj) && obj.hasOwnProperty('type')
 }
 
+export const isReactElementOfType =
+  <P extends PropsWithChildren>(
+    // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+    component: (StyledComponent<FC<P>, any> | FC<P> | typeof Slot) & {
+      // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+      target?: any
+    }
+  ) =>
+  // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+  (element?: any): element is ReactElement<P> => {
+    /**
+     * I'm going to leave this as a big if/else instead of a compound expression to make
+     * it clear exactly what we are checking.
+     */
+    if (element?.type === component) {
+      // component is a function or a class, and element is an element of that type
+      return true
+    } else if (element?.type?.target === component) {
+      // element is a styled element of the given component
+      // so we have to look at what it is styling (its target)
+      return true
+    } else if (isDefined(component?.target) && element?.type === component?.target) {
+      // component is the type of a styled component 
+      // and element is an element of the original unstyled component, 
+      // so we have to look at the target of the component itself (what it styled) 
+      return true
+    } else if (
+      isDefined(component?.target) &&
+      element?.type?.target === component?.target
+    ) {
+      // element and component are both styled, possibly _differently_ 
+      // but their underlying component type is the same
+      return true
+    }
+
+    return false
+  }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isSlotOfType = <T extends typeof Slot>(type: T) => (obj?: any): obj is T => {
-  return isDefined(obj) && isReactElement(obj) && (Object.getPrototypeOf(obj.type) === type || obj.type === type)
+export const isSlotOfType = <T extends typeof Slot>(type: T | FC) => (obj?: any): obj is T => {
+  return (
+    (isDefined(obj) &&
+      isReactElement(obj) &&
+      isDefined(obj.type) &&
+      (Object.getPrototypeOf(obj.type) === type || obj.type === type)) ||
+    (isDefined(obj.type) &&
+      isDefined(obj.type.target) &&
+      (Object.getPrototypeOf(obj.type.target) === type ||
+        obj.type.target === type))
+  )
 }
 
-const findSlotByType = <T extends typeof Slot>(type: T, children?: ReactNode): ReactNode => {
-  return Children.toArray(children).find(isSlotOfType(type))
+const findSlotByType = <T extends typeof Slot>(type: T, children?: ReactNode): ReactElement => {
+  return Children.toArray(children).find(isSlotOfType(type)) as ReactElement
 }
 
-const filterSlotByType = <T extends typeof Slot>(type: T, children?: ReactNode): ReactNode[] => {
-  return Children.toArray(children).filter(isSlotOfType(type))
+const filterSlotByType = <T extends typeof Slot>(type: T, children?: ReactNode): ReactElement[] => {
+  return Children.toArray(children).filter(isSlotOfType(type)) as ReactElement[]
 }
 
 export class Slot<T = unknown> extends PureComponent<PropsWithChildren<T>> {
@@ -41,11 +90,18 @@ export class Slot<T = unknown> extends PureComponent<PropsWithChildren<T>> {
   }
 }
 
-export function getChildren(children?: ReactNode): ReactNode[] {
+export class StylableSlot extends Slot {
+  override render () {
+    return <div {...this.props}>{this.props.children}</div>
+  }
+}
+
+/** gets children that are _not_ slots */
+export function getOtherChildren(children?: ReactNode): ReactNode[] {
   return Children.toArray(children).filter((child) => !isSlotOfType(Slot)(child))
 }
 
-export function getSlots<T extends typeof Slot>(slot: T, children?: ReactNode): ReactNode[] {
+export function getSlots<T extends typeof Slot>(slot: T, children?: ReactNode): ReactElement[] {
   const result = filterSlotByType(slot, children)
 
   if (isNil(result)) {
@@ -61,11 +117,11 @@ function hasProps (obj: any): obj is { props: { children: ReactNode }} {
   return isDefined(obj) && obj.hasOwnProperty('props')
 }
 
-export function getSlot<T extends typeof Slot>(slot: T, children?: ReactNode): ReactNode {
+export function getSlot<T extends typeof Slot>(slot: T, children?: ReactNode): ReactElement {
   const result = findSlotByType(slot, children)
 
   if (isNil(result)) {
-    return undefined
+    return <Nothing />
   }
 
   if (hasProps(result)) {
@@ -73,4 +129,29 @@ export function getSlot<T extends typeof Slot>(slot: T, children?: ReactNode): R
   }
 
   return result
+}
+
+/** given a ReactElement, like a child, apply the given props to it */
+export function applyProps<T>(element: ReactElement<T>, props: Partial<T>): ReactElement {
+  return {
+    ...element,
+    props: {
+      ...element.props,
+      ...props,
+    }
+  }
+}
+
+/** given a ReactElement, like a child, apply the given styles to it, merging with the existing styles */
+export function applyStyle(element: ReactElement, style: CSSProperties): ReactElement {
+  return {
+    ...element,
+    props: {
+      ...element.props,
+      style: {
+        ...element.props.style,
+        ...style,
+      },
+    },
+  }
 }

package/.storybook/preview-head.html

@@ -1 +0,0 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;1,300&display=swap%7CLato:400,700" media="all"></link>

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/checkbox/components/components.tsx

@@ -1,59 +0,0 @@
-import styled, { css } from 'styled-components'
-import { Padding, Surface, Borders, Actions } from '@foundations'
-
-interface ICheckedProps {
-  checked: boolean;
-}
-
-export const getHoverStyles = () => css`
-  background: ${Surface.Default.Hover};
-`
-
-export const getDisabledStyles = () => css`
-  pointer-events: none;
-  background: ${(props: ICheckedProps) => (props.checked === true ? `${Borders.Default.Default}`: `${Surface.Default.Subdued}` )};
-  border-color: ${Borders.Default.Default};
-`
-
-export const getInvalidStyles = () => css`
-  background: ${(props: ICheckedProps) => (props.checked === true ? `${Actions.Critical.Default}`: `${Surface.Critical.Subdued}`)};
-  border: 2px solid ${Borders.Critical.Default};
-`
-
-export const HiddenCheckbox = styled.input`
-  border: 0;
-  clip: rect(0 0 0 0);
-  clippath: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: ${Padding.none};
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`
-
-export const Icon = styled.svg`
-  width: 100%;
-  height: 50%;
-`
-
-export const Wrapper = styled.div`
-  width: 18px;
-  height: 100%;
-`
-
-export const getTabIndexValue = (
-  disabled: boolean
-): number => {
-  return disabled ? -1 : 0
-}
-
-export const getCheckedIcon = () => (
-  <Icon width="10" height="8" viewBox="0 0 10 8">
-    <path
-      d="M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z"
-      fill="white"
-    />
-  </Icon>
-)

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

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

package/src/lib/components/molecules/input-checkbox/stories/index.tsx

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

package/src/lib/components/organisms/multi-choice-list/stories/index.tsx

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