Merge pull request #10 from zolplay-cn/cali

Add react package

.github/workflows/tests.yml

@@ -0,0 +1,42 @@
+name: Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 16 ]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7.13.4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run builds
+        run: pnpm run build
+
+      - name: Run tests
+        run: pnpm run test

README.md

@@ -1,10 +1,12 @@
 # Zolplay Core
 
 ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/zolplay-cn/core/Release?label=release)
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/zolplay-cn/core/Tests?label=tests)
 
 ![npm](https://img.shields.io/npm/v/@zolplay/config?color=%23EEE&label=config)
 ![npm](https://img.shields.io/npm/v/@zolplay/cva?color=%23EEE&label=cva)
 ![npm](https://img.shields.io/npm/v/@zolplay/query?color=%23EEE&label=query)
+![npm](https://img.shields.io/npm/v/@zolplay/react?color=%23EEE&label=react)
 ![npm](https://img.shields.io/npm/v/@zolplay/tsconfig?color=%23EEE&label=tsconfig)
 ![npm](https://img.shields.io/npm/v/@zolplay/utils?color=%23EEE&label=utils)
 
@@ -16,11 +18,12 @@ This turborepo uses [pnpm](https://pnpm.io) as a package manager. It includes th
 
 ### Apps and Packages
 
-- [`config`](packages/config/README.md): boilerplate configs for frontend projects
-- [`cva`](packages/cva/README.md): An adapter for the awesome original package `class-variance-authority`
-- [`query`](packages/query/README.md): An adapter for the awesome original package `@tanstack/react-query`
-- [`tsconfig`](packages/tsconfig/README.md): `tsconfig.json`s for TypeScript projects
-- [`utils`](packages/utils/README.md): A collection of utility functions
+- [`config`](packages/config): boilerplate configs for frontend projects
+- [`cva`](packages/cva): An adapter for the awesome original package `class-variance-authority`
+- [`query`](packages/query): An adapter for the awesome original package `@tanstack/react-query`
+- [`react`](packages/react): shared React components and hooks
+- [`tsconfig`](packages/tsconfig): `tsconfig.json`s for TypeScript projects
+- [`utils`](packages/utils): A collection of utility functions
 
 ### Build
 

package.json

@@ -9,17 +9,19 @@
     "build": "turbo run build",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
+    "test": "turbo run test",
+    "test:watch": "turbo run test:watch",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "changeset": "changeset && changeset version",
     "release": "pnpm run build && changeset version && changeset publish"
   },
   "devDependencies": {
     "eslint": "^8.21.0",
-    "jest": "^29.2.1",
     "prettier": "latest",
     "tsup": "^6.3.0",
     "turbo": "latest",
-    "typescript": "^4.8.4"
+    "typescript": "^4.8.4",
+    "vitest": "^0.24.3"
   },
   "engines": {
     "node": ">=14.0.0"

packages/config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zolplay/config
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated config
+
 ## 0.1.1
 
 ### Patch Changes

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolplay/config",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "index.js",
   "license": "MIT",
   "files": [

packages/query/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @zolplay/query
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @zolplay/config@0.1.2
+
 ## 0.1.1
 
 ### Patch Changes

packages/query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolplay/query",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.mjs",

packages/react/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@zolplay/config/eslint/preset')

packages/react/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@zolplay/config/prettier/preset')

packages/react/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @zolplay/react
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @zolplay/config@0.1.2
+  - @zolplay/utils@1.3.0
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial release
+  - Added `<Stacked />` component

packages/react/README.md

@@ -0,0 +1,6 @@
+# @zolplay/react
+
+![npm](https://img.shields.io/npm/v/@zolplay/react?color=%23EEE)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/@zolplay/react)
+
+Shared React components and hooks.

packages/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@zolplay/react",
+  "version": "0.1.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "pnpm run build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "@zolplay/config": "workspace:*",
+    "@zolplay/utils": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.21",
+    "@vitejs/plugin-react": "^2.1.0",
+    "@zolplay/tsconfig": "workspace:*",
+    "jsdom": "^20.0.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.8"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

packages/react/src/Stacked/Stacked.test.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import { describe, expect, test } from 'vitest'
+
+import { Stacked, zLayers } from './Stacked'
+
+import { render, screen } from '@testing-library/react'
+
+describe('Stacked component', () => {
+  test('should render children', () => {
+    const content = 'lorem ipsum dolor sit amet'
+    render(
+      <Stacked layer="modal" as="p">
+        {content}
+      </Stacked>
+    )
+    expect(screen.getByText(content)).toBeTruthy()
+  })
+
+  test('should render primitives correctly', () => {
+    const content = 'lore ipsum dolor sit amet consectetur'
+    render(
+      <Stacked layer="modal" as="section">
+        {content}
+      </Stacked>
+    )
+    expect(screen.getByText(content).tagName.toLowerCase()).toBe('section')
+  })
+
+  test('should set z-index correctly', () => {
+    const [content1, content2] = ['lorem ipsum', 'sit amet consectetur']
+    render(
+      <>
+        <Stacked layer="modal">{content1}</Stacked>
+        <Stacked layer="ceiling">{content2}</Stacked>
+      </>
+    )
+    expect(screen.getByText(content1).style.zIndex).toBe(
+      zLayers.modal.toString()
+    )
+    expect(screen.getByText(content2).style.zIndex).toBe(
+      zLayers.ceiling.toString()
+    )
+  })
+
+  test('should set z-index correctly with `above`', () => {
+    const [content1, content2] = ['sit amet', 'consectetur adipiscing']
+    render(
+      <>
+        <Stacked layer="base" above>
+          {content1}
+        </Stacked>
+        <Stacked layer="base" above={3}>
+          {content2}
+        </Stacked>
+      </>
+    )
+    expect(screen.getByText(content1).style.zIndex).toBe(
+      (zLayers.base + 1).toString()
+    )
+    expect(screen.getByText(content2).style.zIndex).toBe(
+      (zLayers.base + 3).toString()
+    )
+  })
+
+  test('should set z-index correctly with `below`', () => {
+    const [content1, content2] = [
+      'lorem ipsum something',
+      'another lorem ipsum',
+    ]
+    render(
+      <>
+        <Stacked layer="offCanvas" below>
+          {content1}
+        </Stacked>
+        <Stacked layer="offCanvas" below={5}>
+          {content2}
+        </Stacked>
+      </>
+    )
+    expect(screen.getByText(content1).style.zIndex).toBe(
+      (zLayers.offCanvas - 1).toString()
+    )
+    expect(screen.getByText(content2).style.zIndex).toBe(
+      (zLayers.offCanvas - 5).toString()
+    )
+  })
+})

packages/react/src/Stacked/Stacked.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+
+import type { PrimitiveComponent } from '@/types'
+import { clsxm } from '@zolplay/utils'
+
+const LAYER_INCREMENT = 1
+
+export const zLayers = Object.freeze({
+  base: 0,
+  content: 50,
+  dropdown: 1000,
+  sticky: 2000,
+  modalBackdrop: 3000,
+  offCanvas: 4000,
+  modal: 5000,
+  popover: 6000,
+  tooltip: 7000,
+  ceiling: 10000,
+})
+
+export type StackedProps = {
+  layer: keyof typeof zLayers
+  above?: boolean | number
+  below?: boolean | number
+}
+export const Stacked: PrimitiveComponent<StackedProps> = ({
+  className,
+  children,
+  layer = 'content',
+  as,
+  above,
+  below,
+}) => {
+  React.useEffect(() => {
+    if (above && below) {
+      throw new Error('Cannot use both above and below props')
+    }
+  }, [above, below])
+
+  const zIndex = React.useMemo(() => {
+    const layerIndex = zLayers[layer]
+
+    if (above) {
+      return (
+        layerIndex + LAYER_INCREMENT * (typeof above === 'number' ? above : 1)
+      )
+    } else if (below) {
+      return (
+        layerIndex - LAYER_INCREMENT * (typeof below === 'number' ? below : 1)
+      )
+    }
+
+    return layerIndex
+  }, [layer, above, below])
+  const Element = as || 'div'
+
+  return (
+    <Element
+      className={clsxm('relative', className)}
+      style={{
+        zIndex,
+      }}
+    >
+      {children}
+    </Element>
+  )
+}

packages/react/src/Stacked/index.ts

@@ -0,0 +1 @@
+export * from './Stacked'

packages/react/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Stacked'
+export type { Component, PrimitiveComponent } from '@/types'

packages/react/src/types.d.ts

@@ -0,0 +1,22 @@
+import type { FC, PropsWithChildren } from 'react'
+
+// CSS custom variables
+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Component<P = {}> = FC<
+  PropsWithChildren<
+    {
+      className?: string
+    } & P
+  >
+>
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type PrimitiveComponent<P = {}> = Component<
+  P & { as?: keyof JSX.IntrinsicElements }
+>

packages/react/tests/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'