@julseb-lib/react 0.0.49 → 0.0.51

package/src/data/index.ts

@@ -0,0 +1,9 @@
+/*=============================================== Exports ===============================================*/
+
+export * from "./site-data"
+export * from "./styles/all-colors"
+export * from "./styles/all-overlays"
+export * from "./styles/all-shadows"
+export * from "./styles/all-spacers"
+export * from "./styles/all-radiuses"
+export * from "./french-cities"

package/src/data/previews/layouts/Container.preview.tsx

@@ -0,0 +1,23 @@
+/*=============================================== ContainerPreview ===============================================*/
+
+import { Link } from "react-router-dom"
+import { unslugify } from "@julseb-lib/utils"
+import { Flexbox, Text } from "../../../lib"
+
+export const ContainerPreview = ({ demos }: { demos: Array<string> }) => {
+    return (
+        <Flexbox flexDirection="column" alignItems="stretch">
+            {demos.map(d => (
+                <Text key={d}>
+                    <Link
+                        to={`/demos/${d}`}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                    >
+                        {unslugify(d)}
+                    </Link>
+                </Text>
+            ))}
+        </Flexbox>
+    )
+}

package/src/data/previews/styles/Colors.preview.tsx

@@ -0,0 +1,29 @@
+/*=============================================== ColorsPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { ColorCard } from "../../../components"
+import { Flexbox } from "../../../lib"
+import { colorsLight, colorsDark } from "../.."
+
+const ColorsPreview = () => {
+    return (
+        <Flexbox gap="xs" flexDirection="column" alignItems="stretch">
+            {[...colorsLight, ...colorsDark].map((c, i) => (
+                <ColorCard color={c} key={i} />
+            ))}
+        </Flexbox>
+    )
+}
+
+export const colorsPreview: ComponentPreview<null> = {
+    name: "Colors",
+    category: "styles",
+    component: null,
+    import: null,
+    additionalImports: ["COLORS_LIGHT", "COLORS_DARK"],
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ previewTitle: "", demo: <ColorsPreview /> }],
+}

package/src/data/previews/styles/Overlays.preview.tsx

@@ -0,0 +1,29 @@
+/*=============================================== ColorsPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { ColorCard } from "../../../components"
+import { Flexbox } from "../../../lib"
+import { allOverlays } from "../.."
+
+const ColorsPreview = () => {
+    return (
+        <Flexbox gap="xs" flexDirection="column" alignItems="stretch">
+            {allOverlays.map(o => (
+                <ColorCard overlay={o} key={o.css} />
+            ))}
+        </Flexbox>
+    )
+}
+
+export const overlaysPreview: ComponentPreview<null> = {
+    name: "Overlays",
+    category: "styles",
+    component: null,
+    import: "OVERLAYS",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <ColorsPreview /> }],
+}

package/src/data/previews/styles/Radiuses.preview.tsx

@@ -0,0 +1,29 @@
+/*=============================================== RadiusesPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { StylesCard } from "../../../components"
+import { Grid } from "../../../lib"
+import { allRadiuses } from "../.."
+
+const RadiusesPreview = () => {
+    return (
+        <Grid col={2} gap="m">
+            {allRadiuses.map(s => (
+                <StylesCard variable={s} type="radius" key={s.name} />
+            ))}
+        </Grid>
+    )
+}
+
+export const radiusesPreview: ComponentPreview<null> = {
+    name: "Radiuses",
+    category: "styles",
+    component: null,
+    import: "RADIUSES",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <RadiusesPreview /> }],
+}

package/src/data/previews/styles/Shadows.preview.tsx

@@ -0,0 +1,29 @@
+/*=============================================== ShadowsPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { StylesCard } from "../../../components"
+import { Grid } from "../../../lib"
+import { allShadows } from "../.."
+
+const ShadowsPreview = () => {
+    return (
+        <Grid col={2} gap="m">
+            {allShadows.map(shadow => (
+                <StylesCard variable={shadow} type="shadow" key={shadow.css} />
+            ))}
+        </Grid>
+    )
+}
+
+export const shadowsPreview: ComponentPreview<null> = {
+    name: "Shadows",
+    category: "styles",
+    component: null,
+    import: "SHADOWS",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <ShadowsPreview /> }],
+}

package/src/data/previews/styles/Spacers.preview.tsx

@@ -0,0 +1,29 @@
+/*=============================================== SpacersPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { StylesCard } from "../../../components"
+import { Grid } from "../../../lib"
+import { allSpacers } from "../.."
+
+const SpacersPreview = () => {
+    return (
+        <Grid col={2} gap="m">
+            {allSpacers.map(s => (
+                <StylesCard variable={s} type="spacer" key={s.name} />
+            ))}
+        </Grid>
+    )
+}
+
+export const spacersPreview: ComponentPreview<null> = {
+    name: "Spacers",
+    category: "styles",
+    component: null,
+    import: "SPACERS",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <SpacersPreview /> }],
+}

package/src/data/previews/styles/ThemeProvider.preview.tsx

@@ -0,0 +1,28 @@
+/*=============================================== ThemeProviderPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { useLibTheme, Button, Text } from "../../../lib"
+
+const ThemeProviderPreview = () => {
+    const { selectedTheme, toggleTheme } = useLibTheme()
+
+    return (
+        <>
+            <Text>Selected theme: {selectedTheme}</Text>
+            <Button onClick={toggleTheme}>Toggle theme</Button>
+        </>
+    )
+}
+
+export const themeProviderPreview: ComponentPreview<null> = {
+    name: "Theme Provider",
+    category: "styles",
+    component: null,
+    import: "useLibTheme",
+    additionalImports: ["ThemeProviderWrapper"],
+    optionalImports: null,
+    propsImport: "ThemeContextProps",
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <ThemeProviderPreview /> }],
+}

package/src/data/previews/utils/Helpers.preview.tsx

@@ -0,0 +1,18 @@
+/*=============================================== HelpersPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { allHelpers } from "../../utils/all-helpers"
+import { RenderPreview } from "./RenderPreview"
+
+export const helpersPreview: ComponentPreview<null> = {
+    name: "Helpers",
+    category: "helpers",
+    component: null,
+    import: null,
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <RenderPreview data={allHelpers} /> }],
+}

package/src/data/previews/utils/Hooks.preview.tsx

@@ -0,0 +1,68 @@
+/*=============================================== HooksPreview ===============================================*/
+
+import {
+    PreviewUseClickOutside,
+    PreviewUseCopyToClipboard,
+    PreviewUseDebounce,
+    PreviewUseExportData,
+    PreviewUseFetch,
+    PreviewUseForm,
+    PreviewUseIsOverflow,
+    PreviewUseKeyPress,
+    PreviewUseMaxWidth,
+    PreviewUseMergeRefs,
+    PreviewUseMinWidth,
+    PreviewUsePaginatedData,
+    PreviewUsePagination,
+    PreviewUseTouchScreen,
+    PreviewUseTranslation,
+} from "./hooks"
+import type { ComponentPreview } from "../../components"
+
+export const hooksPreview: ComponentPreview<null> = {
+    name: "Hooks",
+    category: "helpers",
+    component: null,
+    import: null,
+    additionalImports: [
+        "useClickOutside",
+        "useCopyToClipboard",
+        "useDebounce",
+        "useExportData",
+        "useFetch",
+        "useForm",
+        "useIsOverflow",
+        "useKeyPress",
+        "useMaxWidth",
+        "useMergeRefs",
+        "useMinWidth",
+        "usePaginatedData",
+        "usePagination",
+        "useTouchScreen",
+        "useTranslation",
+    ],
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [
+        { previewTitle: "useClickOutside", demo: <PreviewUseClickOutside /> },
+        {
+            previewTitle: "useCopyToClipboard",
+            demo: <PreviewUseCopyToClipboard />,
+        },
+        { previewTitle: "useDebounce", demo: <PreviewUseDebounce /> },
+        { previewTitle: "useExportData", demo: <PreviewUseExportData /> },
+        { previewTitle: "useFetch", demo: <PreviewUseFetch /> },
+        { previewTitle: "useForm", demo: <PreviewUseForm /> },
+        { previewTitle: "useIsOverflow", demo: <PreviewUseIsOverflow /> },
+        { previewTitle: "useKeyPress", demo: <PreviewUseKeyPress /> },
+        { previewTitle: "useMaxWidth", demo: <PreviewUseMaxWidth /> },
+        { previewTitle: "useMergeRefs", demo: <PreviewUseMergeRefs /> },
+        { previewTitle: "useMinWidth", demo: <PreviewUseMinWidth /> },
+        { previewTitle: "usePaginatedData", demo: <PreviewUsePaginatedData /> },
+        { previewTitle: "usePagination", demo: <PreviewUsePagination /> },
+        { previewTitle: "useTouchScreen", demo: <PreviewUseTouchScreen /> },
+        { previewTitle: "useTranslation", demo: <PreviewUseTranslation /> },
+    ],
+}

package/src/data/previews/utils/JsUtils.preview.tsx

@@ -0,0 +1,67 @@
+/*=============================================== UtilsPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { allJsUtils } from "../../utils/all-js-utils"
+import { RenderPreview } from "./RenderPreview"
+
+export const utilsPreview: ComponentPreview<null> = {
+    name: "JsUtils",
+    category: "helpers",
+    component: null,
+    import: null,
+    additionalImports: [
+        "calculateAverage",
+        "calculateTotalSum",
+        "capitalize",
+        "convertDate",
+        "convertDateShort",
+        "convertPrice",
+        "convertToEmail",
+        "convertYoutube",
+        "deleteDuplicates",
+        "detectLanguage",
+        "disableScroll",
+        "enableScroll",
+        "filterObject",
+        "formatDate",
+        "formatHour",
+        "generateNumbers",
+        "getFirstName",
+        "getLastName",
+        "getPercentage",
+        "getRandom",
+        "getRandomAvatar",
+        "getRandomDate",
+        "getRandomNumber",
+        "getRandomString",
+        "getRandomTime",
+        "getTimeNow",
+        "getToday",
+        "getTomorrow",
+        "getYesterday",
+        "hexToRgb",
+        "emailRegex",
+        "passwordRegex",
+        "rgbToHex",
+        "scrollToTop",
+        "slugify",
+        "sortByFrequency",
+        "stringifyPx",
+        "toCamelCase",
+        "toConstantCase",
+        "toDotCase",
+        "toKebabCase",
+        "toPascalCase",
+        "toPathCase",
+        "toSentenceCase",
+        "toSnakeCase",
+        "toTitleCase",
+        "unslugify",
+        "uuid",
+    ],
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <RenderPreview data={allJsUtils} /> }],
+}

package/src/data/previews/utils/Mixins.preview.tsx

@@ -0,0 +1,18 @@
+/*=============================================== MixinsPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { allMixins } from "../../utils/all-mixins"
+import { RenderPreview } from "./RenderPreview"
+
+export const mixinsPreview: ComponentPreview<null> = {
+    name: "Mixins",
+    category: "helpers",
+    component: null,
+    import: "Mixins",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [{ demo: <RenderPreview data={allMixins} withCode /> }],
+}

package/src/data/previews/utils/OptionsMarkdown.tsx

@@ -0,0 +1,108 @@
+/*=============================================== OptionsMarkdownPreview ===============================================*/
+
+import { CodeContainer } from "../../../lib"
+import type { ComponentPreview } from "../../components"
+
+const optionsMarkdown = {
+    forceBlock: true,
+    wrapper: "div",
+    overrides: {
+        h1: {
+            component: "Text",
+            props: { tag: "h1" },
+        },
+
+        h2: {
+            component: "Text",
+            props: { tag: "h2" },
+        },
+
+        h3: {
+            component: "Text",
+            props: { tag: "h3" },
+        },
+
+        h4: {
+            component: "Text",
+            props: { tag: "h4" },
+        },
+
+        h5: {
+            component: "Text",
+            props: { tag: "h5" },
+        },
+
+        h6: {
+            component: "Text",
+            props: { tag: "h6" },
+        },
+
+        p: {
+            component: "Text",
+            props: { tag: "p" },
+        },
+
+        strong: {
+            component: "Text",
+            props: { tag: "strong" },
+        },
+
+        em: {
+            component: "Text",
+            props: { tag: "em" },
+        },
+
+        ul: {
+            component: "Text",
+            props: { tag: "ul" },
+        },
+
+        ol: {
+            component: "Text",
+            props: { tag: "ol" },
+        },
+
+        dl: {
+            component: "Text",
+            props: { tag: "dl" },
+        },
+
+        small: {
+            component: "Text",
+            props: { tag: "small" },
+        },
+
+        blockquote: {
+            component: "Text",
+            props: { tag: "blockquote" },
+        },
+
+        table: {
+            component: "Table",
+        },
+    },
+}
+
+export const optionsMarkdownPreview: ComponentPreview<null> = {
+    name: "OptionsMarkdown",
+    category: "helpers",
+    component: null,
+    import: "optionsMarkdown",
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: [
+        {
+            demo: (
+                <CodeContainer highlighterProps={{ language: "typescript" }}>
+                    {JSON.stringify(optionsMarkdown, null, "  ").replaceAll(
+                        '],\n  "',
+                        '],\n\n  "'
+                    )}
+                </CodeContainer>
+            ),
+        },
+    ],
+}

package/src/data/previews/utils/RenderPreview.tsx

@@ -0,0 +1,52 @@
+import { capitalize, uuid } from "@julseb-lib/utils"
+import { Table, CodeContainer } from "../../../lib"
+import type { ReactChildren } from "../../../lib/types"
+
+interface IRenderPreview {
+    data: Array<any>
+    withCode?: boolean
+}
+
+export const RenderPreview = ({ data, withCode }: IRenderPreview) => {
+    if (!data?.length) return null
+
+    const headers = Object.keys(data[0]).map(v => capitalize(v))
+    const tableData = data.map(u => Object.values(u).map(v => v))
+
+    const tableDataWithCode = data.map(u =>
+        Object.values(u).map((v: any, i) => {
+            if (i === Object.values(u).length - 1) {
+                return (
+                    <CodeContainer
+                        key={uuid()}
+                        highlighterProps={{ language: "typescript" }}
+                        hideCopyButton
+                        color="white"
+                        highlighterStyle={{ height: "100%" }}
+                    >
+                        {`${v}${
+                            typeof v === "string" &&
+                            v[0] !== "&" &&
+                            v[v.length - 1] !== ";"
+                                ? ";"
+                                : ""
+                        }`}
+                    </CodeContainer>
+                )
+            } else {
+                return v
+            }
+        })
+    )
+
+    if (!data.length) return null
+
+    if (withCode) return <Table headers={headers} data={tableDataWithCode} />
+
+    return (
+        <Table
+            headers={headers}
+            data={tableData as Array<Array<ReactChildren>>}
+        />
+    )
+}

package/src/data/previews/utils/Variables.preview.tsx

@@ -0,0 +1,51 @@
+/*=============================================== VariablesPreview ===============================================*/
+
+import type { ComponentPreview } from "../../components"
+import { allColors } from "../../styles/all-colors"
+import { allOverlays } from "../../styles/all-overlays"
+import { allFontFamilies } from "../../styles/all-font-families"
+import { allFontWeights } from "../../styles/all-font-weights"
+import { allFontSizes } from "../../styles/all-font-sizes"
+import { allLineHeights } from "../../styles/all-line-heights"
+import { allRadiuses } from "../../styles/all-radiuses"
+import { allShadows } from "../../styles/all-shadows"
+import { allSpacers } from "../../styles/all-spacers"
+import { allTransitions } from "../../styles/all-transition"
+import { allLayouts } from "../../styles/all-layouts"
+import type { Color, Variable } from "../../types"
+import { RenderPreview } from "./RenderPreview"
+
+interface List {
+    name: string
+    list: Array<Color | Variable | (Variable & { valueTablet: string })>
+}
+
+const lists: Array<List> = [
+    { name: "Colors", list: allColors },
+    { name: "Overlay", list: allOverlays },
+    { name: "Font families", list: allFontFamilies },
+    { name: "Font sizes", list: allFontSizes },
+    { name: "Font weights", list: allFontWeights },
+    { name: "Line heights", list: allLineHeights },
+    { name: "Shadows", list: allShadows },
+    { name: "Radiuses", list: allRadiuses },
+    { name: "Spacers", list: allSpacers },
+    { name: "Transitions", list: allTransitions },
+    { name: "Layouts", list: allLayouts },
+]
+
+export const variablesPreview: ComponentPreview<null> = {
+    name: "Variables",
+    category: "helpers",
+    component: null,
+    import: null,
+    additionalImports: null,
+    optionalImports: null,
+    propsImport: null,
+    additionalTypeImports: null,
+    extends: null,
+    previews: lists.map(list => ({
+        previewTitle: list.name,
+        demo: <RenderPreview data={list.list} />,
+    })),
+}

package/src/data/previews/utils/hooks/index.ts

@@ -0,0 +1,15 @@
+export * from "./useClickOutside.preview"
+export * from "./useCopyToClipboard.preview"
+export * from "./useDebounce.preview"
+export * from "./useExportData.preview"
+export * from "./useFetch.preview"
+export * from "./useForm.preview"
+export * from "./useIsOverflow.preview"
+export * from "./useKeyPress.preview"
+export * from "./useMaxWidth.preview"
+export * from "./useMergeRefs.preview"
+export * from "./useMinWidth.preview"
+export * from "./usePaginatedData.preview"
+export * from "./usePagination.preview"
+export * from "./useTouchScreen.preview"
+export * from "./useTranslation.preview"

package/src/data/previews/utils/hooks/useClickOutside.preview.tsx

@@ -0,0 +1,18 @@
+import { useRef, useState } from "react"
+import { useClickOutside, Button } from "../../../../lib"
+
+export const PreviewUseClickOutside = () => {
+    const [click, setClick] = useState<"nowhere" | "inside" | "outside">(
+        "nowhere"
+    )
+    const ref = useRef<HTMLButtonElement>(null)
+    useClickOutside(ref, () => setClick("outside"))
+
+    return (
+        <div>
+            <Button ref={ref as any} onClick={() => setClick("inside")}>
+                You clicked {click}
+            </Button>
+        </div>
+    )
+}

package/src/data/previews/utils/hooks/useCopyToClipboard.preview.tsx

@@ -0,0 +1,17 @@
+import { useCopyToClipboard, Flexbox, Button, Text } from "../../../../lib"
+
+export const PreviewUseCopyToClipboard = () => {
+    const [value, copy] = useCopyToClipboard()
+
+    return (
+        <Flexbox
+            flexDirection="column"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+        >
+            <Button onClick={() => copy("Prout")}>Copy this text</Button>
+
+            <Text>Copied: {value}</Text>
+        </Flexbox>
+    )
+}