@edvisor/product-language 0.3.0 → 0.3.1

package/{src/lib/helpers/numbers.ts → lib/helpers/numbers.d.ts}

@@ -1,67 +1,50 @@
-export type Hex = `#${string}`
-
-export function clamp(a: number, b: number, c: number) {
-  return Math.max(a, Math.min(b, c))
-}
-
-export function toHex(n: number, length: number): Hex {
-  return `#${n.toString(16).padStart(length, '0').toUpperCase()}`
-}
-
-export function concatHex(a: Hex, b: Hex): Hex {
-  return `#${a.slice(1) + b.slice(1)}`
-}
-
-/** given an array of boolean flags, bitwiseOr interprets them as an unsigned integer
- * 
- * ```ts
- * bitwiseOr([false, true, false, true]) => 5 // 0b0101
- * ```
- * 
- * This is useful for indexing into an enum:
- * 
- * ```ts
- * const enum Level {
- *   default = 0,
- *   info = 0,
- *   danger = 1,
- *   warning = 2
- * }
- * 
- * interface IProps {
- *  info?: boolean
- *  danger?: boolean
- *  warning?: boolean
- * }
- * 
- * function toLevel(n: number): Level {
- *   switch (n) {
- *     case Level.info: return Level.info
- *     case Level.danger: return Level.danger
- *     case Level.warning: return Level.warning
- *     default: return Level.default
- *   }
- * }
- * 
- * const level = bitwiseOr([props.info, props.danger, props.warning])
- * 
- * const levelEnum = toLevel(level)
- * ```
-*/
-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
-}
+export declare type Hex = `#${string}`;
+export declare function clamp(a: number, b: number, c: number): number;
+export declare function toHex(n: number, length: number): Hex;
+export declare function concatHex(a: Hex, b: Hex): Hex;
+/** given an array of boolean flags, bitwiseOr interprets them as an unsigned integer
+ *
+ * ```ts
+ * bitwiseOr([false, true, false, true]) => 5 // 0b0101
+ * ```
+ *
+ * This is useful for indexing into an enum:
+ *
+ * ```ts
+ * const enum Level {
+ *   default = 0,
+ *   info = 0,
+ *   danger = 1,
+ *   warning = 2
+ * }
+ *
+ * interface IProps {
+ *  info?: boolean
+ *  danger?: boolean
+ *  warning?: boolean
+ * }
+ *
+ * function toLevel(n: number): Level {
+ *   switch (n) {
+ *     case Level.info: return Level.info
+ *     case Level.danger: return Level.danger
+ *     case Level.warning: return Level.warning
+ *     default: return Level.default
+ *   }
+ * }
+ *
+ * const level = bitwiseOr([props.info, props.danger, props.warning])
+ *
+ * const levelEnum = toLevel(level)
+ * ```
+*/
+export declare function bitwiseOr(flags: unknown[]): number;
+/** 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 declare function getRightmostSetBitNumber(n: number): number;

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

@@ -0,0 +1,15 @@
+/** even though we have null disabled in the repo,
+ * I still would not want isNil to skip checking null
+ * it is for juuuuust in case a third party sends us a null
+ * or something, and the types are not correct
+ */
+export declare function isNil<T>(value: T | undefined | null): value is undefined | null;
+export declare function isDefined<T>(value: T | undefined | null): value is T;
+export declare function defaultTo<T>(value: T | undefined | null, fallback: T): T;
+export declare function isEmpty<T extends {
+    length: number;
+}>(obj: T): boolean;
+/** used for evaluating tri-state logic (true | false | undefined) */
+export declare function is(pred?: boolean): boolean;
+export declare function safeArray<T>(arr: T[] | undefined | null): T[];
+export declare function safeCallback<T>(f?: (e: T) => void, e?: T): void;

package/lib/helpers/slots.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, PureComponent, ReactElement, ReactNode } from 'react';
+import { StyledComponent } from 'styled-components';
+import { FC, PropsWithChildren } from './generic-types';
+export declare const isReactElementOfType: <P extends {
+    children?: ReactNode;
+}>(component: (FC<P, {}> | typeof Slot | StyledComponent<FC<P, {}>, any, {}, never>) & {
+    target?: any;
+}) => (element?: any) => element is ReactElement<P, string | import("react").JSXElementConstructor<any>>;
+export declare const isSlotOfType: <T extends typeof Slot>(type: T | FC<{}, {}>) => (obj?: any) => obj is T;
+export declare class Slot<T = unknown> extends PureComponent<PropsWithChildren<T>> {
+    render(): PropsWithChildren<T>["children"] | undefined;
+}
+export declare class StylableSlot extends Slot {
+    render(): JSX.Element;
+}
+/** gets children that are _not_ slots */
+export declare function getOtherChildren(children?: ReactNode): ReactNode[];
+export declare function getSlots<T extends typeof Slot>(slot: T, children?: ReactNode): ReactElement[];
+export declare function getSlot<T extends typeof Slot>(slot: T, children?: ReactNode): ReactElement;
+/** given a ReactElement, like a child, apply the given props to it */
+export declare function applyProps<T>(element: ReactElement<T>, props: Partial<T>): ReactElement;
+/** given a ReactElement, like a child, apply the given styles to it, merging with the existing styles */
+export declare function applyStyle(element: ReactElement, style: CSSProperties): ReactElement;

package/lib/helpers/strings.d.ts

@@ -0,0 +1 @@
+export declare const toKebabCase: (str: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",
@@ -11,7 +11,10 @@
     "release": "release-it --disable-metrics"
   },
   "peerDependencies": {
-    "release": "*"
+    "release": "*",
+    "styled-components": "5.3.5",
+    "react": "18.2.0",
+    "@storybook/addon-docs": "^6.5.10"
   },
   "release-it": {
     "git": {
@@ -27,5 +30,10 @@
     "publishConfig": {
       "registry": "https://registry.npmjs.org"
     }
-  }
+  },
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "dependencies": {}
 }

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": [["styled-components", { "pure": true, "ssr": true }]]
-}

package/.eslintrc.json

@@ -1,147 +0,0 @@
-{
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "plugins": [
-    "no-null"
-  ],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "semi": ["error", "never"],
-        "quotes": ["error", "single"],
-        "no-console": "warn",
-        "react/jsx-no-useless-fragment": ["warn", { "allowExpressions": true }], 
-        "no-null/no-null": 2,
-        "no-duplicate-case": "warn",
-        "no-restricted-syntax": [
-          "error",
-          {
-            "selector": "ImportDeclaration[source.value=/[^@]foundations/i]",
-            "message": "Import from @foundations instead of using a relative path"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/FC/]",
-            "message": "Use `import { FC } from '@helpers'` instead"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/PropsWithChildren/]",
-            "message": "Use `import { PropsWithChildren } from '@helpers'` instead"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/forwardRef/]",
-            "message": "Use `import { forwardRef } from '@helpers'` instead"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/testing-library/i] ImportSpecifier[imported.name=/fireEvent/]",
-            "message": "Prefer `import userEvent from '@testing-library/user-event'` wherever possible.\n@see: https://edvisorio.atlassian.net/wiki/spaces/ENG/pages/235307017/First+contact+with+Testing+Library#Handling-Events"
-          },
-          {
-            "selector": "Literal[value=/[^&]#[a-zA-Z0-9]{1,6}/i]",
-            "message": "No hex literals, please import constants from @foundations"
-          },
-          {
-            "selector": "Literal[value=/padding.*: ([0-9]|')/i]",
-            "message": "No string pixel values for css padding, please import Padding from @foundations"
-          },
-          {
-            "selector": "TemplateElement[value.cooked=/[^&]#[a-zA-Z0-9]{1,6}/i]",
-            "message": "No hex literals, please import constants from @foundations"
-          },
-          {
-            "selector": "TemplateElement[value.cooked=/padding.*: ([0-9]|')/i]",
-            "message": "No ad-hoc padding, please import { Padding } from '@foundations'"
-          },
-          {
-            "selector": "TemplateElement[value.cooked=/margin.*: ([0-9]|')/i]",
-            "message": "No ad-hoc margins, please import { Margin } from '@foundations'"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parserOptions": {
-        "project": ["packages/product-language/tsconfig.*?.json", "packages/product-language/.storybook/tsconfig.json"]
-      },
-      "rules": {
-        "no-shadow": "off",
-        "@typescript-eslint/no-shadow": "warn",
-        "@typescript-eslint/no-explicit-any": "error",
-        "@typescript-eslint/no-invalid-void-type": "error",
-        "@typescript-eslint/ban-types": ["error", {
-          "types": {
-            "null": "Use 'undefined' instead of 'null'",
-            "React.FC": "Use `import { FC } from '@helpers'` instead",
-            "React.PropsWithChildren": "Use `import { PropsWithChildren } from '@helpers'` instead",
-            "React.forwardRef": "Use `import { forwardRef } from '@helpers'` instead"
-          }
-        }],
-        "@typescript-eslint/strict-boolean-expressions": ["error", {
-          "allowString": false,
-          "allowNumber": false,
-          "allowNullableObject": false
-        }]
-      }
-    },
-    {
-      "files": ["*.tsx"],
-      "parserOptions": {
-        "project": ["packages/product-language/tsconfig.*?.json"]
-      },
-      "rules": {
-        "no-restricted-syntax": [
-          "error",
-          {
-            "selector": "FunctionDeclaration[id.name=/^[A-Z]/]",
-            "message": "Components should be declared `const MyComponent: FC<IProps> = (props) => {`"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/[^@]foundations/i]",
-            "message": "Import from @foundations instead of using a relative path"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/FC/]",
-            "message": "Use `import { FC } from '@helpers'` instead"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/PropsWithChildren/]",
-            "message": "Use `import { Props } from '@helpers'` instead"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/forwardRef/]",
-            "message": "Use `import { forwardRef } from '@helpers'` instead"
-          },
-          {
-            "selector": "ImportDeclaration[source.value=/testing-library/i] ImportSpecifier[imported.name=/fireEvent/]",
-            "message": "Prefer `import userEvent from '@testing-library/user-event'` wherever possible.\n@see: https://edvisorio.atlassian.net/wiki/spaces/ENG/pages/235307017/First+contact+with+Testing+Library#Handling-Events"
-          },
-          {
-            "selector": "Literal[value=/[^&]#[a-zA-Z0-9]{1,6}/i]",
-            "message": "No hex literals, please import constants from @foundations"
-          },
-          {
-            "selector": "Literal[value=/padding.*: ([0-9]|')/i]",
-            "message": "No string pixel values for css padding, please import Padding from @foundations"
-          },
-          {
-            "selector": "TemplateElement[value.cooked=/[^&]#[a-zA-Z0-9]{1,6}/i]",
-            "message": "No hex literals, please import constants from @foundations"
-          },
-          {
-            "selector": "TemplateElement[value.cooked=/padding.*: ([0-9]|')/i]",
-            "message": "No ad-hoc padding, please import { Padding } from '@foundations'"
-          },
-          {
-            "selector": "TemplateElement[value.cooked=/margin.*: ([0-9]|')/i]",
-            "message": "No ad-hoc margins, please import { Margin } from '@foundations'"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

package/.storybook/main.js

@@ -1,57 +0,0 @@
-const rootMain = require('../../../.storybook/main')
-const path = require('path')
-const webpack = require('webpack')
-
-// we can't import from our design-system here
-// so I'm replicating the constant
-// eslint-disable-next-line no-restricted-syntax
-const backgroundDefault = '#F3F4F6'
-
-module.exports = {
-  ...rootMain,
-
-  core: { ...rootMain.core, builder: 'webpack5' },
-
-  stories: [
-    ...rootMain.stories,
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
-  staticDirs: [{from: '../src/assets', to:'/public'}],
-  webpackFinal: async (config, { configType }) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.js
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType })
-    }
-
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        Buffer: ['buffer', 'Buffer'],
-      }),
-    )
-
-    config.module.rules.push({
-      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
-      use: [
-        {
-          loader: require.resolve('file-loader'),
-          options: {
-            name: '[name].[ext]'
-          }
-        }
-      ],
-      include: path.resolve(__dirname, '../')
-    })
-
-    return config
-  },
-  previewHead: (head) => `
-  ${head}
-  <style>
-    html, body {
-      background: ${backgroundDefault};
-    }
-  </style>
-`,
-}

package/.storybook/manager.js

@@ -1,7 +0,0 @@
-import { addons } from '@storybook/addons'
-
-addons.setConfig({
-  sidebar: {
-    showRoots: true,
-  },
-})

package/.storybook/preview.js

@@ -1,15 +0,0 @@
-import { liveDecorator } from 'storybook-addon-jarle-monaco'
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
-
-export const decorators = [
-  liveDecorator
-]

package/.storybook/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "outDir": "",
-    "noEmit": true
-  },
-  "files": [
-    "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",
-    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../../node_modules/@nrwl/react/typings/image.d.ts"
-  ],
-
-  "exclude": [
-    "../**/*.spec.ts",
-    "../**/*.spec.js",
-    "../**/*.spec.tsx",
-    "../**/*.spec.jsx"
-  ],
-  "include": [
-    "../src/**/storybook/*",
-    "../src/**/stories/*",
-    "../src/**/*.stories.ts",
-    "../src/**/*.stories.js",
-    "../src/**/*.stories.jsx",
-    "../src/**/*.stories.tsx",
-    "../src/**/*.stories.mdx",
-    "*.js"
-  ]
-}

package/jest.config.ts

@@ -1,15 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'product-language',
-  preset: '../../jest.preset.js',
-  transform: {
-    '^.+\\.[tj]sx?$': 'babel-jest',
-  },
-  moduleNameMapper: {
-    '^.+\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': '<rootDir>/fileTransformer.js',
-    '^.+\\.(css)$': 'identity-obj-proxy',//we can remove if we dont have css files
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/packages/product-language',
-  setupFilesAfterEnv: ['./jest.setup.ts'],
-};

package/jest.setup.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom'
-import 'jest-axe/extend-expect'

package/project.json

@@ -1,96 +0,0 @@
-{
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/product-language/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nrwl/web:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/packages/product-language",
-        "tsConfig": "packages/product-language/tsconfig.lib.json",
-        "project": "packages/product-language/package.json",
-        "entryFile": "packages/product-language/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "packages/product-language/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
-    "dev": {
-      "executor": "@nrwl/web:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "watch": true,
-        "outputPath": "../react-web-client/product-language",
-        "tsConfig": "packages/product-language/tsconfig.lib.json",
-        "project": "packages/product-language/package.json",
-        "entryFile": "packages/product-language/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "packages/product-language/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
-    "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["packages/product-language/**/*.{ts,tsx,js,jsx}"]
-      }
-    },
-    "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/packages/product-language"],
-      "options": {
-        "jestConfig": "packages/product-language/jest.config.ts",
-        "passWithNoTests": true
-      }
-    },
-    "storybook": {
-      "executor": "@nrwl/storybook:storybook",
-      "options": {
-        "uiFramework": "@storybook/react",
-        "tsConfig": "packages/product-language/tsconfig.storybook.json",
-        "port": 4400,
-        "config": {
-          "configFolder": "packages/product-language/.storybook"
-        }
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    },
-    "build-storybook": {
-      "executor": "@nrwl/storybook:build",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "uiFramework": "@storybook/react",
-        "outputPath": "dist/storybook/product-language",
-        "config": {
-          "configFolder": "packages/product-language/.storybook"
-        }
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    }
-  }
-}

package/release-it.json

@@ -1,18 +0,0 @@
-{
-  "git": {
-    "requireCleanWorkingDir": false,
-    "commitMessage": "chore: release ${version}",
-    "tagName": "v${version}"
-  },
-  "github": {
-    "release": true,
-    "tokenRef": "BOB"
-  },
-  "npm": {
-    "publish": true,
-    "manifestPath": "./dist/packages/product-language/package.json"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  }
-}

package/src/README.md

@@ -1,61 +0,0 @@
-Directory Structure
-===================
-
-Manifest Files (index.ts)
--------------------------
-
-RWC, and now product-language, export components to be consumed by another system. Their API is a list of components that they export, and this API is declared in src/index.ts the “root manifest”.
-
-```ts
-// src/index.ts 
-export * from 'src/components'
-export * from 'src/foundations'
-```
-
-And then things get… recursive.
-
-The “components” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/index.ts
-
-```ts
-// src/components/index.ts
-export * from 'src/components/atoms'
-export * from 'src/components/molecules'
-```
-
-The “molecules” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/molecules/index.ts
-
-```ts
-// src/components/molecules/index.ts
-export * from 'src/components/molecules/button
-export * from 'src/components/molecules/card
-export * from 'src/components/molecules/input-field
-```
-
-The “button” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/molecules/button/index.ts
-
-This file, this index.ts file is the public API or public interface of the button module. A public interface should only expose public things. Private things should not be exported. So for example:
-
-```ts
-// src/components/molecules/button/index.ts
-
-export * from './stories' // NOPE! this is not public
-export * from './components' // Nope! don't expose implementation details
-
-// in most cases, this is all you need
-export * from './Button.tsx'
-```
-
-Within the Button module, we have to be careful to remember that these index files are the public api they are not to be consumed internally. So for example in a storybook file:
-
-```ts
-// src/components/molecules/button/stories/button.stories.mdx
-
-import { Button } from '../index' // Nope!
-import { Button } from '../Button' // yes!
-```
-
-Importing from the index file within the module that index file describes is a potential problem, it can cause cyclic dependencies which can be hard to debug.
-
-On a similar note: your stories and tests folders don’t need index files at all. They are just there to provide a place to put helpers specific to the stories and tests for the component. They are not modules that export components for other systems to use, so they do not need an index.ts file.
-
-On the other hand, the components folder in the Button module should have an index.ts file since it exposes a list of components that Button consumes. Doing this also makes it easier to lift a helper component from the Button module to a shared place if you discover you’ve created a helpful shared component.