@edvisor/product-language 0.1.1 → 0.3.0

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

@@ -0,0 +1,157 @@
+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'
+
+/** 
+ * @TODO these aren't quiiiiite right
+ * 
+ * They all say they return ReactNode but I feel like JSX.Element or something
+ * is more accurate? The child type needs to include _anything react can render_
+ * but it should also allow the caller to cloneElement on the results so that
+ * they can do stuff like
+ * 
+ * const sections = getSlots(Section, children)
+ *  .map((el, i) => i === 0 ? cloneElement(el, { first: true }) : el)
+ * 
+ * Right? I want this...
+ * */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isReactElement (obj?: any): obj is ReactElement {
+  // eslint-disable-next-line no-prototype-builtins
+  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
+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): ReactElement => {
+  return Children.toArray(children).find(isSlotOfType(type)) as ReactElement
+}
+
+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>> {
+  override render () {
+    return this.props.children
+  }
+}
+
+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): ReactElement[] {
+  const result = filterSlotByType(slot, children)
+
+  if (isNil(result)) {
+    return []
+  }
+
+  return result
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function hasProps (obj: any): obj is { props: { children: ReactNode }} {
+  // eslint-disable-next-line no-prototype-builtins
+  return isDefined(obj) && obj.hasOwnProperty('props')
+}
+
+export function getSlot<T extends typeof Slot>(slot: T, children?: ReactNode): ReactElement {
+  const result = findSlotByType(slot, children)
+
+  if (isNil(result)) {
+    return <Nothing />
+  }
+
+  if (hasProps(result)) {
+    return result
+  }
+
+  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/src/lib/helpers/strings.test.ts

@@ -0,0 +1,47 @@
+import { toKebabCase } from './strings'
+
+describe('strings', () => {
+  describe('toKebabCase', () => {
+    it('sends camel case to kebab case', () => {
+      const result = toKebabCase('helloMyFriends')
+
+      expect(result).toBe('hello-my-friends')
+    })
+    
+    it('sends leading caps to kebab case', () => {
+      const result = toKebabCase('HelloMyFriends')
+
+      expect(result).toBe('hello-my-friends')
+    })
+
+    it('respects numbers', () => {
+      const result = toKebabCase('Section1IsGood')
+
+      expect(result).toBe('section-1-is-good')
+    })
+    
+    it('respects leading and trailing numbers', () => {
+      const result = toKebabCase('1Section1')
+
+      expect(result).toBe('1-section-1')
+    })
+
+    it('removes non-alphanumeric characters, such as whitespace and punctuation', () => {
+      const result = toKebabCase('Help Text. Lorem Ipsum')
+
+      expect(result).toBe('help-text-lorem-ipsum')
+    })
+
+    it('removes leading and trailing nonsense', () => {
+      const result = toKebabCase('__Foo_Bar__')
+
+      expect(result).toBe('foo-bar')
+    })
+
+    it('removes leading and trailing whitespace', () => {
+      const result = toKebabCase(' . Foo_Bar_ _ . ')
+
+      expect(result).toBe('foo-bar')
+    })
+  })
+})

package/src/lib/helpers/strings.ts

@@ -0,0 +1,16 @@
+import { isDefined } from './safe-navigation'
+
+export const toKebabCase = (str: string) => {
+  return isDefined(str)
+    ? str
+        .replace(/[^a-zA-Z0-9\\-]/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/([0-9]+)(.*)/g, '$1-$2')
+        .replace(/(.*)([0-9]+)/g, '$1-$2')
+        .replace(/^[\s_]+/g, '')
+        .replace(/[\s_]+$/g, '')
+        .replace(/[\s_]+/g, '-')
+        .replace(/[^a-zA-Z0-9\\-]/g, '')
+        .toLowerCase()
+    : ''
+}

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "./src/lib",
+    "paths": {
+      "@components": ["components/index.ts"],
+      "@foundations": ["foundations/index.ts"],
+      "@helpers": ["helpers/index.ts"],
+      "@stories": ["../helpers/index.ts"],
+    },
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "jest.setup.ts",
+    "src/helpers/**",
+    "**/storybook/**",
+    "**/stories/**",
+    "**/*.stories.*",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "jest.setup.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

package/index.d.ts

@@ -1,2 +0,0 @@
-export * from './lib/components';
-export * from './lib/foundations';