@julseb-lib/react 0.0.49 → 0.0.51

package/.prettierrc

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

package/README.md

@@ -1,19 +1,50 @@
-# React components library
+# React + TypeScript + Vite
 
-A small components library for React.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Install in your project
+Currently, two official plugins are available:
 
-```
-npm i julseb-lib-react
-```
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-or
+## Expanding the ESLint configuration
 
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
 ```
-yarn add julseb-lib-react
-```
 
-## Full documentation
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
 
-Find the full documentation here: [https://julseb-lib-documentation.vercel.app/](https://julseb-lib-documentation.vercel.app/).
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "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

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

package/cypress/support/commands.ts

@@ -0,0 +1,52 @@
+/// <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

@@ -0,0 +1,12 @@
+<!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

@@ -0,0 +1,79 @@
+// ***********************************************************
+// 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

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

package/cypress.config.ts

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

package/eslint.config.js

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,13 @@
+<!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/package.json

@@ -1,17 +1,19 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.49",
+    "private": false,
+    "version": "0.0.51",
     "type": "module",
-    "license": "MIT",
     "scripts": {
-        "dev": "vite --open",
-        "build": "tsc && vite build",
-        "lint": "./node_modules/.bin/eslint",
-        "preview": "vite preview",
+        "dev": "vite",
         "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",
+        "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",
+        "preview": "vite preview",
+        "lint": "npx eslint src/lib/**",
+        "lint:fix": "npx eslint src/lib/** --fix",
         "cy": "cypress",
         "cy:open": "cypress open",
         "cy:ct:run": "cypress run --component --browser electron",
@@ -32,73 +34,37 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-helmet-async": "^2.0.5",
-        "react-inlinesvg": "^4.1.3",
-        "react-router-dom": "^6.26.1",
-        "react-syntax-highlighter": "^15.5.0",
-        "styled-components": "^6.1.12"
+        "react-inlinesvg": "^4.1.4",
+        "react-router-dom": "^6.27.0",
+        "react-syntax-highlighter": "^15.6.1",
+        "styled-components": "^6.1.13"
     },
     "devDependencies": {
-        "@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",
+        "@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",
         "@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.1",
-        "axios": "^1.7.5",
+        "@vitejs/plugin-react": "^4.3.3",
+        "axios": "^1.7.7",
         "cssjson-cli": "^1.0.1",
-        "cypress": "^13.13.3",
-        "eslint": "^9.9.1",
-        "eslint-plugin-react": "^7.35.0",
-        "globals": "^15.9.0",
+        "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",
         "plop": "^4.0.1",
-        "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"
-            ]
-        }
+        "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"
     }
 }

package/public/vite.svg

@@ -0,0 +1 @@
+<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

@@ -0,0 +1,22 @@
+/*=============================================== 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

@@ -0,0 +1,20 @@
+/*=============================================== 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

@@ -0,0 +1,26 @@
+/*=============================================== 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

@@ -0,0 +1,41 @@
+/*=============================================== 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

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

package/src/components/ColorCard/styles.tsx

@@ -0,0 +1,28 @@
+/*=============================================== 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

@@ -0,0 +1,11 @@
+/*=============================================== 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">