@julseb-lib/react 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/index.cjs.js +1128 -1128
  2. package/dist/index.es.js +5443 -5111
  3. package/dist/index.umd.js +653 -653
  4. package/dist/lib/Mixins.tsx +2 -2
  5. package/dist/lib/components/Header/Header.tsx +11 -2
  6. package/dist/lib/components/Header/HeaderNav.tsx +14 -9
  7. package/dist/lib/components/Header/subtypes.ts +2 -2
  8. package/dist/lib/components/Header/types.ts +11 -2
  9. package/dist/lib/context/Theme.context.tsx +3 -5
  10. package/dist/lib/context/Toaster/Toaster.context.tsx +4 -6
  11. package/dist/lib/context/Toaster/toast.reducer.ts +2 -2
  12. package/dist/lib/hooks/useClickOutside.tsx +2 -2
  13. package/dist/lib/hooks/useCopyToClipboard.tsx +1 -1
  14. package/dist/lib/hooks/useDebounce.tsx +1 -1
  15. package/dist/lib/hooks/useExportData.tsx +7 -2
  16. package/dist/lib/hooks/useFetch.tsx +1 -1
  17. package/dist/lib/hooks/useForm.tsx +2 -2
  18. package/dist/lib/hooks/useKeyPress.tsx +2 -2
  19. package/dist/lib/hooks/useMaxWidth.tsx +1 -1
  20. package/dist/lib/hooks/useMergeRefs.ts +2 -2
  21. package/dist/lib/hooks/useMinWidth.tsx +1 -1
  22. package/dist/lib/hooks/usePaginatedData.tsx +7 -2
  23. package/dist/lib/hooks/usePagination.tsx +2 -2
  24. package/dist/lib/hooks/useTouchScreen.tsx +1 -1
  25. package/dist/lib/hooks/useTranslation.tsx +1 -1
  26. package/dist/lib/icons/ArrowUp.tsx +2 -2
  27. package/dist/lib/icons/Bold.tsx +2 -2
  28. package/dist/lib/icons/Calendar.tsx +2 -2
  29. package/dist/lib/icons/CaretDown.tsx +2 -2
  30. package/dist/lib/icons/Check.tsx +2 -2
  31. package/dist/lib/icons/CheckCircle.tsx +2 -2
  32. package/dist/lib/icons/ChevronDown.tsx +2 -2
  33. package/dist/lib/icons/ChevronLeft.tsx +2 -2
  34. package/dist/lib/icons/ChevronRight.tsx +2 -2
  35. package/dist/lib/icons/ChevronUp.tsx +2 -2
  36. package/dist/lib/icons/Clipboard.tsx +2 -2
  37. package/dist/lib/icons/Clock.tsx +2 -2
  38. package/dist/lib/icons/Close.tsx +2 -2
  39. package/dist/lib/icons/CloseCircle.tsx +2 -2
  40. package/dist/lib/icons/Code.tsx +2 -2
  41. package/dist/lib/icons/CodeBlock.tsx +2 -2
  42. package/dist/lib/icons/Comment.tsx +2 -2
  43. package/dist/lib/icons/Drag.tsx +2 -2
  44. package/dist/lib/icons/Edit.tsx +2 -2
  45. package/dist/lib/icons/EditorCode.tsx +2 -2
  46. package/dist/lib/icons/EditorLive.tsx +2 -2
  47. package/dist/lib/icons/EditorPreview.tsx +2 -2
  48. package/dist/lib/icons/Hide.tsx +2 -2
  49. package/dist/lib/icons/Image.tsx +2 -2
  50. package/dist/lib/icons/Italic.tsx +2 -2
  51. package/dist/lib/icons/Link.tsx +2 -2
  52. package/dist/lib/icons/Minus.tsx +2 -2
  53. package/dist/lib/icons/OrderedList.tsx +2 -2
  54. package/dist/lib/icons/Plus.tsx +2 -2
  55. package/dist/lib/icons/Quote.tsx +2 -2
  56. package/dist/lib/icons/Search.tsx +2 -2
  57. package/dist/lib/icons/Send.tsx +2 -2
  58. package/dist/lib/icons/Separator.tsx +2 -2
  59. package/dist/lib/icons/Show.tsx +2 -2
  60. package/dist/lib/icons/Star.tsx +2 -2
  61. package/dist/lib/icons/StarFull.tsx +2 -2
  62. package/dist/lib/icons/Strikethrough.tsx +2 -2
  63. package/dist/lib/icons/Underline.tsx +2 -2
  64. package/dist/lib/icons/UnorderedList.tsx +2 -2
  65. package/dist/lib/lib-utils/append-styles.ts +1 -1
  66. package/dist/lib/lib-utils/get-icon-size-from-font.ts +1 -1
  67. package/dist/lib/lib-utils/round-icon-size.ts +1 -1
  68. package/dist/lib/lib-utils/transfom-search-keys.ts +1 -1
  69. package/dist/lib/utils/StyleSheetManager.tsx +4 -3
  70. package/dist/lib/utils/linkify-text.tsx +1 -1
  71. package/dist/lib/utils/set-default-theme.ts +1 -1
  72. package/package.json +2 -1
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Code({
6
+ export const Code = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function CodeBlock({
6
+ export const CodeBlock = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Comment({
6
+ export const Comment = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Drag({
6
+ export const Drag = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Edit({
6
+ export const Edit = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function EditorCode({
6
+ export const EditorCode = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function EditorLive({
6
+ export const EditorLive = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function EditorPreview({
6
+ export const EditorPreview = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Hide({
6
+ export const Hide = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Image({
6
+ export const Image = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Italic({
6
+ export const Italic = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Link({
6
+ export const Link = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Minus({
6
+ export const Minus = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function OrderedList({
6
+ export const OrderedList = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Plus({
6
+ export const Plus = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Quote({
6
+ export const Quote = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Search({
6
+ export const Search = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Send({
6
+ export const Send = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Separator({
6
+ export const Separator = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Show({
6
+ export const Show = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Star({
6
+ export const Star = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function StarFull({
6
+ export const StarFull = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function Strikethrough({
6
+ export const Strikethrough = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -7,13 +7,13 @@
7
7
  import { StyledIcon } from "./styles"
8
8
  import type { ILibIcon } from "./types"
9
9
 
10
- export function Underline({
10
+ export const Underline = ({
11
11
  "data-testid": testid,
12
12
  className,
13
13
  size = 64,
14
14
  color = "currentColor",
15
15
  ...rest
16
- }: ILibIcon) {
16
+ }: ILibIcon) => {
17
17
  return (
18
18
  <StyledIcon
19
19
  data-testid={testid}
@@ -3,13 +3,13 @@
3
3
  import { StyledIcon } from "./styles"
4
4
  import type { ILibIcon } from "./types"
5
5
 
6
- export function UnorderedList({
6
+ export const UnorderedList = ({
7
7
  "data-testid": testid,
8
8
  className,
9
9
  size = 64,
10
10
  color = "currentColor",
11
11
  ...rest
12
- }: ILibIcon) {
12
+ }: ILibIcon) => {
13
13
  return (
14
14
  <StyledIcon
15
15
  data-testid={testid}
@@ -2,7 +2,7 @@
2
2
 
3
3
  // Append styles to HTML head
4
4
 
5
- export function appendStyles(styles: string) {
5
+ export const appendStyles = (styles: string) => {
6
6
  const $style = document.createElement("style")
7
7
  document.head.appendChild($style)
8
8
  $style.textContent = styles
@@ -3,7 +3,7 @@
3
3
  import { LIB_TOKENS } from ".."
4
4
  import type { LibFontSizes } from "../types"
5
5
 
6
- export function getIconSizeFromFont(fontSize: LibFontSizes = "body") {
6
+ export const getIconSizeFromFont = (fontSize: LibFontSizes = "body") => {
7
7
  const getSize = (size: LibFontSizes) =>
8
8
  Number(LIB_TOKENS["font-sizes"][size].px.replace("px", ""))
9
9
 
@@ -2,6 +2,6 @@
2
2
 
3
3
  import { ICON_MULTIPLIER } from "../Variables"
4
4
 
5
- export function roundIconSize(size: number) {
5
+ export const roundIconSize = (size: number) => {
6
6
  return Number((size * ICON_MULTIPLIER).toFixed(2))
7
7
  }
@@ -1,6 +1,6 @@
1
1
  /*=============================================== Transform search keys ===============================================*/
2
2
 
3
- export function transformSearchKeys(keys: Array<string>) {
3
+ export const transformSearchKeys = (keys: Array<string>) => {
4
4
  return keys.map(key =>
5
5
  key.includes("Key")
6
6
  ? key.replace("Key", "")
@@ -1,5 +1,6 @@
1
1
  /*=============================================== StyleSheetManager ===============================================*/
2
2
 
3
+ import type { FC } from "react"
3
4
  import {
4
5
  StyleSheetManager as Manager,
5
6
  type IStyleSheetManager,
@@ -7,7 +8,7 @@ import {
7
8
  } from "styled-components"
8
9
  import isPropValid from "@emotion/is-prop-valid"
9
10
 
10
- export function shouldForwardProp(propName: string, target: WebTarget) {
11
+ export const shouldForwardProp = (propName: string, target: WebTarget) => {
11
12
  if (typeof target === "string") {
12
13
  // For HTML elements, forward the prop if it is a valid HTML attribute
13
14
  return isPropValid(propName)
@@ -16,11 +17,11 @@ export function shouldForwardProp(propName: string, target: WebTarget) {
16
17
  return true
17
18
  }
18
19
 
19
- export function StyleSheetManager({
20
+ export const StyleSheetManager: FC<IStyleSheetManager> = ({
20
21
  shouldForwardProp: shouldForwardPropFn = shouldForwardProp,
21
22
  enableVendorPrefixes = true,
22
23
  ...rest
23
- }: IStyleSheetManager) {
24
+ }) => {
24
25
  return (
25
26
  <Manager
26
27
  shouldForwardProp={shouldForwardPropFn}
@@ -6,7 +6,7 @@ import { uuid } from "ts-utils-julseb"
6
6
  export const URL_REGEX =
7
7
  /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm
8
8
 
9
- export function linkifyText(text: string, blank?: boolean) {
9
+ export const linkifyText = (text: string, blank?: boolean) => {
10
10
  const words: Array<string> = text?.split(" ")
11
11
 
12
12
  return words?.map((word: string) =>
@@ -7,7 +7,7 @@ import { COLORS_LIGHT } from "../Variables"
7
7
  * @description Sets ThemeLight as default for projects not using ThemeProvider
8
8
  * @param arr: Array<FC>
9
9
  */
10
- export function setDefaultTheme(arr: Array<FC>) {
10
+ export const setDefaultTheme = (arr: Array<FC>) => {
11
11
  return arr.forEach(
12
12
  component => (component.defaultProps = { theme: COLORS_LIGHT })
13
13
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -24,6 +24,7 @@
24
24
  "check-errors": "tsc --noEmit"
25
25
  },
26
26
  "dependencies": {
27
+ "@julseb-lib/utils": "^0.0.1",
27
28
  "classnames": "^2.5.1",
28
29
  "fuse.js": "^7.0.0",
29
30
  "markdown-to-jsx": "^7.5.0",