@julseb-lib/react 0.0.51 → 0.0.53

package/dist/styles-BCSPldCD.js

@@ -0,0 +1,16 @@
+import i from "styled-components";
+import { stringifyPx as o } from "@julseb-lib/utils";
+import { setDefaultTheme as e } from "./index.es.js";
+import "react";
+import "react-router-dom";
+const r = i.video`
+    display: block;
+    width: ${({ $width: t }) => o(t)};
+    height: ${({ $height: t }) => o(t)};
+    object-fit: ${({ $fit: t }) => t};
+    aspect-ratio: ${({ $aspectRatio: t }) => t};
+`;
+e([r]);
+export {
+  r as default
+};

package/dist/styles-CtcGw3Gv.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("@julseb-lib/utils"),o=require("./index.cjs.js");require("react");require("react-router-dom");const i=r.video`
+    display: block;
+    width: ${({$width:e})=>t.stringifyPx(e)};
+    height: ${({$height:e})=>t.stringifyPx(e)};
+    object-fit: ${({$fit:e})=>e};
+    aspect-ratio: ${({$aspectRatio:e})=>e};
+`;o.setDefaultTheme([i]);exports.default=i;

package/package.json

@@ -1,19 +1,17 @@
 {
     "name": "@julseb-lib/react",
-    "private": false,
-    "version": "0.0.51",
+    "version": "0.0.53",
     "type": "module",
+    "license": "MIT",
     "scripts": {
-        "dev": "vite",
-        "copy": "cp ./src/lib/index.css ./dist",
-        "clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg",
-        "copy-types": "cp -a ./src/lib/types ./types",
-        "build-types": "yarn copy-types && tsc --p tsconfig-types.json",
-        "move-types": "mv ./types ./dist",
-        "build": "tsc && vite build && yarn copy && yarn clean && yarn build-types && yarn move-types",
+        "dev": "vite --open",
+        "build": "tsc && vite build",
+        "lint": "./node_modules/.bin/eslint",
         "preview": "vite preview",
-        "lint": "npx eslint src/lib/**",
-        "lint:fix": "npx eslint src/lib/** --fix",
+        "copy": "cp ./src/lib/index.css ./dist",
+        "copy-lib": "cp -a ./src/lib ./dist && rm -rf ./dist/lib/components/*/__tests__ ./dist/lib/components/*/__preview__",
+        "clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg ./dist/icons-alt",
+        "build:lib": "rm -rf ./dist && mkdir ./dist && tsc && vite build && yarn copy && yarn copy-lib && yarn clean",
         "cy": "cypress",
         "cy:open": "cypress open",
         "cy:ct:run": "cypress run --component --browser electron",
@@ -34,37 +32,73 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-helmet-async": "^2.0.5",
-        "react-inlinesvg": "^4.1.4",
-        "react-router-dom": "^6.27.0",
-        "react-syntax-highlighter": "^15.6.1",
-        "styled-components": "^6.1.13"
+        "react-inlinesvg": "^4.1.3",
+        "react-router-dom": "^6.26.1",
+        "react-syntax-highlighter": "^15.5.0",
+        "styled-components": "^6.1.12"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.2.2",
-        "@eslint/js": "^9.14.0",
-        "@react-docgen/cli": "^2.0.4",
-        "@types/jest": "^29.5.14",
-        "@types/mocha": "^10.0.9",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@eslint/compat": "^1.1.1",
+        "@eslint/js": "^9.9.1",
+        "@react-docgen/cli": "^2.0.3",
+        "@types/jest": "^29.5.12",
+        "@types/mocha": "^10.0.7",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
         "@types/react-inlinesvg": "^1.0.0",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@types/styled-components": "^5.1.34",
-        "@vitejs/plugin-react": "^4.3.3",
-        "axios": "^1.7.7",
+        "@vitejs/plugin-react": "^4.3.1",
+        "axios": "^1.7.5",
         "cssjson-cli": "^1.0.1",
-        "cypress": "^13.15.1",
-        "eslint": "^9.14.0",
-        "eslint-plugin-react": "^7.37.2",
-        "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-plugin-react-refresh": "^0.4.14",
-        "globals": "^15.12.0",
+        "cypress": "^13.13.3",
+        "eslint": "^9.9.1",
+        "eslint-plugin-react": "^7.35.0",
+        "globals": "^15.9.0",
         "plop": "^4.0.1",
-        "typescript": "^5.6.3",
-        "typescript-eslint": "^8.12.2",
-        "vite": "^5.4.10",
-        "vite-plugin-checker": "^0.8.0",
-        "vite-plugin-dts": "^4.3.0"
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.3.0",
+        "vite": "^5.4.2",
+        "vite-plugin-checker": "^0.7.2",
+        "vite-plugin-dts": "^4.0.3"
+    },
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/julseb-lib-react.umd.js",
+    "module": "./dist/julseb-lib-react.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.umd.js",
+            "types": "./dist/lib/index.ts",
+            "default": "./dist/index.cjs.js"
+        },
+        "./index.css": {
+            "import": "./dist/index.css",
+            "require": "./dist/index.css",
+            "default": "./dist/index.css"
+        },
+        "./types": {
+            "import": "./dist/lib/types/index.ts",
+            "require": "./dist/lib/types/index.ts",
+            "types": "./dist/lib/types/index.ts",
+            "default": "./dist/lib/types/index.ts"
+        },
+        "./component-props": {
+            "import": "./dist/lib/types/components-props.ts",
+            "require": "./dist/lib/types/components-props.ts",
+            "types": "./dist/lib/types/components-props.ts",
+            "default": "./dist/lib/types/components-props.ts"
+        }
+    },
+    "typesVersions": {
+        "*": {
+            "types": [
+                "./dist/lib/types/index.d.ts"
+            ]
+        }
     }
 }

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-    "arrowParens": "avoid",
-    "semi": false,
-    "tabWidth": 4
-}

package/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

package/cypress/index.d.ts

@@ -1,5 +0,0 @@
-declare namespace Cypress {
-    interface Chainable {
-        dataTest(id?: string): Chainable<any>
-    }
-}

package/cypress/support/commands.ts

@@ -1,52 +0,0 @@
-/// <reference types="cypress" />
-
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-Cypress.Commands.add("dataTest", (id: string = "testid") =>
-    cy.get(`[data-testid="${id}"]`)
-)
-
-export {}
-
-// declare global {
-//     namespace Cypress {
-//         interface Chainable {
-//             dataTest: (id: string) => Chainable<void>
-//         }
-//     }
-// }

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <title>Components App</title>
-    </head>
-    <body>
-        <div data-cy-root></div>
-    </body>
-</html>

package/cypress/support/component.tsx

@@ -1,79 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands"
-import "../../src/lib/index.css"
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-import type { ReactNode } from "react"
-import { mount, type MountOptions, type MountReturn } from "cypress/react18"
-import { type MemoryRouterProps, MemoryRouter } from "react-router-dom"
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-    // eslint-disable-next-line
-    namespace Cypress {
-        interface Chainable {
-            mount(
-                component: ReactNode,
-                options?: MountOptions & { routerProps?: MemoryRouterProps }
-            ): Cypress.Chainable<MountReturn>
-            // before(el: ReactNode, property: string): Cypress.Chainable
-            before(
-                testid: Cypress.Chainable<any>,
-                propertyValue: string,
-                expectedValue: string | null
-            ): Cypress.Chainable
-        }
-    }
-}
-
-beforeEach(() => {
-    cy.viewport(1200, 800)
-})
-
-Cypress.Commands.add("mount", (components, options = {}) => {
-    const { routerProps = { initialEntries: ["/"] }, ...mountOptions } = options
-
-    const wrapped = (
-        <MemoryRouter {...routerProps}>
-            <div style={{ padding: 48 }}>{components}</div>
-        </MemoryRouter>
-    )
-
-    return mount(wrapped, mountOptions)
-})
-
-// Example use:
-// cy.mount(<MyComponent />)
-
-Cypress.Commands.add("before", (testid, propertyValue, expectedValue) => {
-    testid.within($el => {
-        cy.window().then(win => {
-            const before = win.getComputedStyle($el[0], "::before")
-            const property = before.getPropertyValue(propertyValue)
-            expect(property).to.equal(expectedValue)
-        })
-    })
-})
-
-// Example
-// cy.before(cy.dataTest(), "background-color", LIB_TOKENS.colors.light["secondary-500"].rgb)

package/cypress/tsconfig.json

@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "jsx": "react-jsx",
-        "types": [
-            "cypress",
-            "node"
-        ]
-    },
-}

package/cypress.config.ts

@@ -1,10 +0,0 @@
-const { defineConfig } = require("cypress")
-
-module.exports = defineConfig({
-    component: {
-        devServer: {
-            framework: "react",
-            bundler: "vite",
-        },
-    },
-})

package/eslint.config.js

@@ -1,82 +0,0 @@
-import globals from "globals"
-import pluginJs from "@eslint/js"
-import tseslint from "typescript-eslint"
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"
-import { fixupConfigRules } from "@eslint/compat"
-
-export default [
-    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
-    { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
-    { languageOptions: { globals: globals.browser } },
-    pluginJs.configs.recommended,
-    ...tseslint.configs.recommended,
-    ...fixupConfigRules(pluginReactConfig),
-    {
-        rules: {
-            "no-duplicate-imports": "error",
-            "react/react-in-jsx-scope": "off",
-            "react/no-unescaped-entities": "off",
-            "react/display-name": "off",
-            "@typescript-eslint/no-explicit-any": "off",
-            "no-case-declarations": "off",
-            "@typescript-eslint/no-unused-vars": [
-                "warn",
-                {
-                    vars: "all",
-                    args: "after-used",
-                    ignoreRestSiblings: true,
-                    destructuredArrayIgnorePattern: "[_]",
-                },
-            ],
-            "@typescript-eslint/ban-types": "off",
-            "no-constant-binary-expression": "off",
-            "@typescript-eslint/ban-ts-comment": "off",
-            "no-useless-escape": "off",
-            "no-irregular-whitespace": "off",
-            "@typescript-eslint/consistent-type-imports": "warn",
-            "@typescript-eslint/no-unused-expressions": "warn",
-            "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
-            "@typescript-eslint/consistent-indexed-object-style": "off",
-            "@typescript-eslint/no-inferrable-types": "off",
-
-            "react/function-component-definition": [
-                "warn",
-                {
-                    namedComponents: ["arrow-function"],
-                },
-            ],
-            "react/jsx-key": "warn",
-            "@typescript-eslint/consistent-type-definitions": "off",
-            "@typescript-eslint/array-type": [
-                "warn",
-                {
-                    default: "generic",
-                    readonly: "generic",
-                },
-            ],
-            "no-restricted-exports": [
-                "warn",
-                { restrictDefaultExports: { direct: true } },
-            ],
-            "react/prop-types": "off",
-            "no-empty-pattern": "warn",
-            "@typescript-eslint/no-empty-object-type": [
-                "warn",
-                { allowInterfaces: "with-single-extends" },
-            ],
-            // "prefer-arrow-callback": "warn",
-        },
-    },
-    {
-        ignores: [
-            "eslint.config.js",
-            "cypress.config.ts",
-            "plop/*",
-            "vite.config.ts",
-            "dist",
-        ],
-    },
-    {
-        files: ["src/*"],
-    },
-]

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -1,22 +0,0 @@
-/*=============================================== App ===============================================*/
-
-import type { FC } from "react"
-import { RouterProvider } from "react-router-dom"
-import {
-    ThemeProvider,
-    ToasterProviderWrapper,
-    useLibTheme,
-} from "./lib"
-import { router } from "./routes"
-
-export const App: FC = () => {
-    const { theme } = useLibTheme()
-
-    return (
-        <ThemeProvider theme={theme}>
-            <ToasterProviderWrapper>
-                <RouterProvider router={router} />
-            </ToasterProviderWrapper>
-        </ThemeProvider>
-    )
-}

package/src/components/BaseCard.tsx

@@ -1,20 +0,0 @@
-/*=============================================== BaseCard ===============================================*/
-
-import styled from "styled-components"
-import { Mixins, RADIUSES, SPACERS, setDefaultTheme } from "../lib"
-
-const BaseCard = styled.div`
-    width: 100%;
-    border: 1px solid ${({ theme }) => theme.GRAY_200};
-    border-radius: ${RADIUSES.M};
-    overflow: hidden;
-    padding: ${SPACERS.S};
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $gap: "s",
-    })};
-`
-
-setDefaultTheme([BaseCard])
-
-export { BaseCard }

package/src/components/BasePage.tsx

@@ -1,26 +0,0 @@
-/*=============================================== BasePage ===============================================*/
-
-import { Helmet } from "../lib"
-import { ResetScroll } from "./ResetScroll"
-import { SITE_DATA } from "../data"
-import type { ReactChildren } from "../lib/types"
-
-export interface BasePageProps {
-    title: string
-    children?: ReactChildren
-}
-
-export const BasePage = ({ title, children }: BasePageProps) => {
-    return (
-        <>
-            <Helmet
-                title={`${title} | ${SITE_DATA.TITLE}`}
-                favicon={SITE_DATA.FAVICON}
-            />
-
-            <ResetScroll />
-
-            {children}
-        </>
-    )
-}

package/src/components/ColorCard/ColorCard.tsx

@@ -1,41 +0,0 @@
-/*=============================================== ColorCard ===============================================*/
-
-import { Text } from "../../lib"
-import { StyledColorCard, Square, CardContent } from "./styles"
-import type { ColorCardProps } from "./types"
-
-export const ColorCard = ({ color, overlay }: ColorCardProps) => {
-    const name = color?.name || overlay?.name
-    const variable = color?.variable || overlay?.name
-    const css = color?.css || overlay?.css
-
-    const hex = color?.hex
-    const rgb = color?.rgb
-
-    const value = overlay?.value
-
-    const items: Array<{ title: string; content: string }> = [
-        { title: "Variable", content: variable! },
-        { title: "CSS", content: css! },
-        hex ? { title: "Hex", content: hex } : undefined,
-        rgb ? { title: "RGB", content: rgb } : undefined,
-        value ? { title: "Value", content: value } : undefined,
-    ].filter(v => v !== undefined)
-
-    return (
-        <StyledColorCard>
-            <Square $background={css!} />
-
-            <CardContent>
-                <Text tag="h5">{name}</Text>
-
-                {items.map(({ title, content }) => (
-                    <Text key={title}>
-                        <strong>{title}: </strong>
-                        {content}
-                    </Text>
-                ))}
-            </CardContent>
-        </StyledColorCard>
-    )
-}

package/src/components/ColorCard/index.ts

@@ -1,3 +0,0 @@
-/*=============================================== Exports ===============================================*/
-
-export * from "./ColorCard"

package/src/components/ColorCard/styles.tsx

@@ -1,28 +0,0 @@
-/*=============================================== ColorCard styles ===============================================*/
-
-import styled from "styled-components"
-import { Mixins, SPACERS, setDefaultTheme } from "../../lib"
-import { BaseCard } from "../BaseCard"
-
-const StyledColorCard = styled(BaseCard)``
-
-const SQUARE_SIZE = 120
-
-const Square = styled.span<{ $background: string }>`
-    width: ${SQUARE_SIZE}px;
-    height: ${SQUARE_SIZE}px;
-    background: ${({ $background }) => $background};
-    display: block;
-`
-
-const CardContent = styled.div`
-    width: calc(100% - ${SQUARE_SIZE}px - ${SPACERS.S});
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "stretch",
-    })}
-`
-
-setDefaultTheme([StyledColorCard, Square, CardContent])
-
-export { StyledColorCard, Square, CardContent }

package/src/components/ColorCard/types.ts

@@ -1,11 +0,0 @@
-/*=============================================== ColorCard types ===============================================*/
-
-import type { RequireAtLeastOne } from "../../lib/types"
-import type { Color, Variable } from "../../data/types"
-
-interface CardProps {
-    color?: Color
-    overlay?: Variable
-}
-
-export type ColorCardProps = RequireAtLeastOne<CardProps, "color" | "overlay">