Restruct-Corporate-Advantage/Layout
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed compile errors, added publish scripts

Browse Source
This commit is contained in:
mohiit1502
2024-10-05 23:05:48 +05:30
parent 490e40306a
commit 1935652481
22 changed files with 13859 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
build-tools/build.sh Executable file
View File

@@ -0,0 +1,12 @@
#!/bin/bash
# Get the directory of the current script
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
rm -rf build
npx tsc
vite build
# Run Post processors: Update style imports in .js files, create component modules
node "$SCRIPT_DIR/post-processor.js" build/cjs
node "$SCRIPT_DIR/post-processor.js" build/es

31
build-tools/generate-module.js Normal file
View File

@@ -0,0 +1,31 @@
import { promises as fs } from "fs"
import { dirname, resolve } from "path"
import { fileURLToPath } from "url"
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
async function generateModule(fileName) {
if (fileName.endsWith(".js") && fileName.indexOf("-chunk") === -1 && fileName !== "index.js") {
const dir = fileName.slice(0, -3)
const name = `@armco/layout/${dir}`
const packageJsonContent = {
name,
main: `../cjs/${dir}.js`,
module: `../es/${dir}.js`,
types: `../types/${dir}.d.ts`,
}
const dirPath = resolve(__dirname, `../build/${dir}`)
try {
await fs.mkdir(dirPath, { recursive: true })
await fs.writeFile(
resolve(dirPath, "package.json"),
JSON.stringify(packageJsonContent, null, 2),
)
} catch (error) {
console.error(`Error processing directory ${dirPath}:`, error)
}
}
}
export default generateModule

23
build-tools/post-processor.js Normal file
View File

@@ -0,0 +1,23 @@
import { readdir } from "fs/promises"
import generateModule from "./generate-module.js"
async function postProcessor(dir) {
try {
const files = await readdir(dir)
await Promise.all(
files.map(async (file) => {
await generateModule(file, dir)
}),
)
} catch (error) {
console.error(`Error processing directory ${dir}:`, error)
}
}
const targetDir = process.argv[2]
if (targetDir) {
postProcessor(targetDir)
} else {
console.error("Please provide the build directory to run post processor on.")
process.exit(1)
}

13606
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

29
package.json
View File

@@ -1,17 +1,25 @@
{
"name": "@armco/layout",
"private": true,
"version": "0.0.0",
"version": "0.0.6",
"type": "module",
"main": "build/cjs/index.js",
"module": "build/es/index.js",
"types": "build/types/index.d.ts",
"scripts": {
"build": "tsc && vite build",
"test": "vitest",
"build": "./build-tools/build.sh",
"format": "prettier --write .",
"lint": "eslint ."
"lint": "eslint .",
"publish:sh": "./publish.sh",
"publish:local": "./publish-local.sh"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"@armco/icon": "^0.0.6",
"@armco/shared-components": "^0.0.53",
"@armco/types": "^0.0.11",
"@armco/utils": "^0.0.18",
"react": ">16.8.0",
"react-dom": ">16.8.0",
"uuid": "^10.0.0"
},
"devDependencies": {
"@testing-library/dom": "^9.2.0",
@@ -21,16 +29,22 @@
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/testing-library__jest-dom": "^5.14.5",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.0.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.2.1",
"glob": "^11.0.0",
"jsdom": "^21.1.0",
"prettier": "^2.7.1",
"prettier-config-nick": "^1.0.2",
"sass": "^1.63.4",
"typescript": "^5.0.2",
"vite": "^4.0.0",
"vite-plugin-dts": "^4.2.1",
"vite-plugin-externalize-deps": "^0.8.0",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite-plugin-svgr": "^4.2.0",
"vitest": "^0.30.1"
},
"eslintConfig": {
@@ -51,7 +65,6 @@
"react-dom": ">16.8.0"
},
"prettier": "prettier-config-nick",
"main": "index.tsx",
"repository": {
"type": "git",
"url": "git+https://github.com/ReStruct-Corporate-Advantage/layout.git"

16
publish-local.sh Executable file
View File

@@ -0,0 +1,16 @@
#!/bin/sh
semver=${1:-patch}
set -e
npm run build
cp package.json build/
sed -i '' -E 's/"build"/"*"/' build/package.json
sed -i '' 's#"build/cjs/Icon.js"#"cjs/Icon.js"#' build/package.json
sed -i '' 's#"build/es/Icon.js"#"es/Icon.js"#' build/package.json
sed -i '' 's#"build/types/Icon.d.ts"#"types/Icon.d.ts"#' build/package.json
cd build
npm pack --pack-destination ~/__Projects__/Common

16
publish.sh Executable file
View File

@@ -0,0 +1,16 @@
#!/bin/sh
semver=${1:-patch}
set -e
npm --no-git-tag-version version ${semver}
npm run build
cp package.json build/
sed -i '' -E 's/"build"/"*"/' build/package.json
sed -i '' 's#"build/cjs/index.js"#"cjs/index.js"#' build/package.json
sed -i '' 's#"build/es/index.js"#"es/index.js"#' build/package.json
sed -i '' 's#"build/types/index.d.ts"#"types/index.d.ts"#' build/package.json
cd build
npm publish --access public --loglevel verbose

100
src/BuilderLayout.tsx
View File

@@ -9,17 +9,13 @@ import {
SlotDescriptor,
SlotProps,
} from "@armco/types"
import {
GridHelper,
Slot,
DomHelper,
LoadableIcon,
Tooltip,
LayoutControlPanel,
useAppSelector,
getCurrentTheme,
useStateWithHistory,
} from "../.."
import Icon from "@armco/icon"
import Tooltip from "@armco/shared-components/Tooltip"
import { useTheme, useStateWithHistory } from "@armco/utils/hooks"
import { calculateRowHeights, checkIfAdjacent, generateGridAreaAndSizes, generateGridTemplate, generateGridToolbarSpecs, generateSlotConfigs, insertDimension, mergeHandler, removeHandler, selectCellsInSelectedRowCol, splitHandler } from "@armco/utils/gridHelper"
import { getDocumentElement, getWindowElement } from "@armco/utils/domHelper"
import Slot from "./Slot"
import LayoutControlPanel from "./LayoutControlPanel"
import "./BuilderLayout.component.scss"
const BuilderLayout = ({
@@ -68,12 +64,12 @@ const BuilderLayout = ({
minColumn: number
maxColumn: number
}>()
const theme = useAppSelector<string>(getCurrentTheme)
const {theme} = useTheme()
const cmdCtrl = useMemo(
() => (
<>
<LoadableIcon icon="ai.AiFillMacCommand" size="0.8rem" /> /
<LoadableIcon icon="md.MdOutlineKeyboardControlKey" size="0.8rem" />
<Icon icon="ai.AiFillMacCommand" attributes={{size: "0.8rem"}} /> /
<Icon icon="md.MdOutlineKeyboardControlKey" attributes={{size: "0.8rem"}} />
</>
),
[],
@@ -81,7 +77,7 @@ const BuilderLayout = ({
const isGrid = !displayMode || displayMode === "grid"
useEffect(() => {
const doc = DomHelper.getDocumentElement(demo)
const doc = getDocumentElement(demo)
const handleKeyDown = (event: KeyboardEvent) => {
if (showControls) {
if ((event.ctrlKey || event.metaKey) && event.key === "z") {
@@ -92,19 +88,19 @@ const BuilderLayout = ({
redoSlots()
} else if ((event.ctrlKey || event.metaKey) && event.key === "m") {
if (mergeEnabled && slots && minMaxSelections) {
GridHelper.mergeHandler(setSlots, slots, minMaxSelections)
mergeHandler(setSlots, slots, minMaxSelections)
}
} else if ((event.ctrlKey || event.metaKey) && event.key === "h") {
if (splitEnabled && slots) {
GridHelper.splitHandler(setSlots, slots, "horizontal", "after")
splitHandler(setSlots, slots, "horizontal", "after")
}
} else if ((event.ctrlKey || event.metaKey) && event.key === "v") {
if (splitEnabled && slots) {
GridHelper.splitHandler(setSlots, slots, "vertical", "after")
splitHandler(setSlots, slots, "vertical", "after")
}
} else if ((event.ctrlKey || event.metaKey) && event.key === "r") {
if (splitEnabled && slots && gridToolbarSpecs) {
GridHelper.insertDimension(
insertDimension(
"row",
gridToolbarSpecs,
slots,
@@ -114,7 +110,7 @@ const BuilderLayout = ({
}
} else if ((event.ctrlKey || event.metaKey) && event.key === "c") {
if (splitEnabled && slots && gridToolbarSpecs) {
GridHelper.insertDimension(
insertDimension(
"column",
gridToolbarSpecs,
slots,
@@ -164,7 +160,7 @@ const BuilderLayout = ({
setSlots(externalSlots)
} else if (externalGridTemplate) {
const { slotConfigs } =
GridHelper.generateSlotConfigs(externalGridTemplate)
generateSlotConfigs(externalGridTemplate)
setSlots(slotConfigs)
} else if (gridSpecs) {
let parsedGridSpecs = gridSpecs
@@ -204,7 +200,7 @@ const BuilderLayout = ({
useEffect(() => {
if (slots) {
if (slots.length !== prevSlotCount) {
const { gridArea, rowHeights } = GridHelper.generateGridAreaAndSizes(
const { gridArea, rowHeights } = generateGridAreaAndSizes(
slots,
externalRowHeights,
)
@@ -212,7 +208,7 @@ const BuilderLayout = ({
setRowHeights(rowHeights)
setPrevSlotsCount(slots.length)
}
const { areAdjacent, ...rest } = GridHelper.checkIfAdjacent(slots)
const { areAdjacent, ...rest } = checkIfAdjacent(slots)
setMinMaxSelections(rest)
enableSplit(slots.filter((sc) => sc.isSelected).length >= 1)
enableMerge(areAdjacent)
@@ -221,7 +217,7 @@ const BuilderLayout = ({
useEffect(() => {
if (gridArea) {
const gridTemplate = GridHelper.generateGridTemplate(
const gridTemplate = generateGridTemplate(
gridArea,
rowHeights,
colWidths,
@@ -236,13 +232,13 @@ const BuilderLayout = ({
if (specUpdateAction.current) {
setTimeout(() => {
requestAnimationFrame(() => {
const calculatedRowHeights = GridHelper.calculateRowHeights(
const calculatedRowHeights = calculateRowHeights(
slots,
rowHeights,
demo,
)
setGridToolbarSpecs(
GridHelper.generateGridToolbarSpecs(
generateGridToolbarSpecs(
gridArea,
calculatedRowHeights,
colWidths,
@@ -264,7 +260,7 @@ const BuilderLayout = ({
helpPanelRef.current.style.width = thisRect.width + "px"
}
if (ctrlPanelRef.current) {
const winObj = DomHelper.getWindowElement(demo)
const winObj = getWindowElement(demo)
ctrlPanelRef.current.style.bottom =
(winObj ? winObj.innerHeight - thisRect.top : 0) + "px"
ctrlPanelRef.current.style.left = thisRect.left + "px"
@@ -332,7 +328,7 @@ const BuilderLayout = ({
setTimeout(
() =>
setSlots(
GridHelper.selectCellsInSelectedRowCol(
selectCellsInSelectedRowCol(
gridToolbarSpecs,
slots,
selectForDelete,
@@ -362,7 +358,7 @@ const BuilderLayout = ({
setGridToolbarSpecs({ ...gridToolbarSpecs })
slots &&
setSlots(
GridHelper.selectCellsInSelectedRowCol(
selectCellsInSelectedRowCol(
gridToolbarSpecs,
slots,
selectForDelete,
@@ -377,7 +373,7 @@ const BuilderLayout = ({
slots &&
gridToolbarSpecs &&
setSlots(
GridHelper.removeHandler(
removeHandler(
slots,
gridToolbarSpecs,
"row",
@@ -391,7 +387,7 @@ const BuilderLayout = ({
slots &&
gridToolbarSpecs &&
setSlots(
GridHelper.removeHandler(
removeHandler(
slots,
gridToolbarSpecs,
"column",
@@ -440,22 +436,22 @@ const BuilderLayout = ({
}
horizontalSplitHandler={() =>
slots &&
GridHelper.splitHandler(setSlots, slots, "horizontal", "after")
splitHandler(setSlots, slots, "horizontal", "after")
}
verticalSplitHandler={() =>
slots &&
GridHelper.splitHandler(setSlots, slots, "vertical", "after")
splitHandler(setSlots, slots, "vertical", "after")
}
mergeHandler={() => {
slots &&
minMaxSelections &&
GridHelper.mergeHandler(setSlots, slots, minMaxSelections)
mergeHandler(setSlots, slots, minMaxSelections)
enableMerge(false)
}}
rowInsertHandler={(placement: "before" | "after") =>
slots &&
gridToolbarSpecs &&
GridHelper.insertDimension(
insertDimension(
"row",
gridToolbarSpecs,
slots,
@@ -466,7 +462,7 @@ const BuilderLayout = ({
columnInsertHandler={(placement: "before" | "after") =>
slots &&
gridToolbarSpecs &&
GridHelper.insertDimension(
insertDimension(
"column",
gridToolbarSpecs,
slots,
@@ -528,7 +524,7 @@ const BuilderLayout = ({
rowInsertHandler={(placement: "before" | "after") =>
slots &&
gridToolbarSpecs &&
GridHelper.insertDimension(
insertDimension(
"row",
gridToolbarSpecs,
slots,
@@ -583,7 +579,7 @@ const BuilderLayout = ({
) =>
slots &&
gridToolbarSpecs &&
GridHelper.insertDimension(
insertDimension(
"column",
gridToolbarSpecs,
slots,
@@ -621,7 +617,7 @@ const BuilderLayout = ({
selectionOnlyModeEnabled,
horizontalSplitHandler: (placement: "before" | "after") =>
slots &&
GridHelper.splitHandler(
splitHandler(
setSlots,
slots,
"horizontal",
@@ -630,7 +626,7 @@ const BuilderLayout = ({
),
verticalSplitHandler: (placement: "before" | "after") =>
slots &&
GridHelper.splitHandler(
splitHandler(
setSlots,
slots,
"vertical",
@@ -641,7 +637,7 @@ const BuilderLayout = ({
slots &&
minMaxSelections &&
mergeEnabled &&
GridHelper.mergeHandler(
mergeHandler(
setSlots,
slots,
minMaxSelections,
@@ -677,11 +673,15 @@ const BuilderLayout = ({
</span>
<span>
<Tooltip demo={demo}>
<LoadableIcon
classes="me-3"
color="white"
slot={ArPopoverSlots.ANCHOR}
<Icon
icon="fa.FaKeyboard"
slot={ArPopoverSlots.ANCHOR}
attributes={{
colors: {
fillColor: "white"
},
classes: "me-3"
}}
/>
<span slot={ArPopoverSlots.POPOVER} className="z-2">
<div className="row">
@@ -719,10 +719,14 @@ const BuilderLayout = ({
</span>
</Tooltip>
<Tooltip demo={demo}>
<LoadableIcon
slot={ArPopoverSlots.ANCHOR}
<Icon
icon="md.MdInfoOutline"
color={theme === ArThemes.DARK1 ? "black" : "white"}
slot={ArPopoverSlots.ANCHOR}
attributes={{
colors: {
fillColor: theme === ArThemes.DARK1 ? "black" : "white"
}
}}
/>
<span
className="ar-Layout__help-panel__help-content small z-2"

4
src/BuilderSlot.tsx
View File

@@ -1,6 +1,8 @@
import { useEffect, useRef, useState } from "react"
import { ArDndItemTypes, ArSlotViewMode, BuilderSlotProps } from "@armco/types"
import { Draggable, Droppable, SlotTools } from ".."
import Draggable from "@armco/shared-components/Draggable"
import Droppable from "@armco/shared-components/Droppable"
import SlotTools from "./SlotTools"
import "./BuilderSlot.component.scss"
const BuilderSlot = (props: BuilderSlotProps): JSX.Element => {

1
src/Layout.component.scss
View File

@@ -1 +0,0 @@
.ar-Layout {}

6
src/Layout.test.ts
View File

@@ -1,6 +0,0 @@
import React from "react"
import Layout from "./Layout"
describe("Layout", () => {
it("renders without error", () => {})
})

28
src/Layout.tsx
View File

@@ -1,14 +1,10 @@
import { v4 as uuid } from "uuid"
import { useEffect, useState } from "react"
import { ArAlertType, LayoutProps, SlotDescriptor } from "@armco/types"
import {
BuilderLayout,
ReleaseLayout,
Network,
useAppDispatch,
notify,
} from "../.."
import "./Layout.component.scss"
import BuilderLayout from "./BuilderLayout"
import ReleaseLayout from "./ReleaseLayout"
import { get } from "@armco/utils/network"
import { useNotification } from "@armco/utils/hooks"
const dummyGridSpecs = { rows: 5, columns: 5 }
@@ -16,6 +12,7 @@ const Layout = (props: LayoutProps) => {
const { mode, demo, gridSpecs, url } = props
const propsClone = { ...props }
propsClone.gridSpecs = demo ? gridSpecs || dummyGridSpecs : gridSpecs
const { notify } = useNotification()
const [localSlots, setLocalSlots] = useState<
Array<SlotDescriptor> | undefined
>()
@@ -24,7 +21,6 @@ const Layout = (props: LayoutProps) => {
>()
propsClone.slots = localSlots
propsClone.gridTemplate = localGridTemplate
const dispatch = useAppDispatch()
useEffect(() => {
JSON.stringify(props.slots) !== JSON.stringify(localSlots) &&
@@ -38,7 +34,7 @@ const Layout = (props: LayoutProps) => {
useEffect(() => {
!(localSlots || localGridTemplate) &&
url &&
Network.get(url)
get(url)
.then((res) => {
const component = Array.isArray(res.body) ? res.body[0] : res.body
component?.descriptor?.content &&
@@ -47,13 +43,11 @@ const Layout = (props: LayoutProps) => {
setLocalGridTemplate(component.descriptor.layout as string)
})
.catch((e) =>
dispatch(
notify({
message: "Failed to fetch descriptor for provided URL",
uid: uuid(),
type: ArAlertType.ERROR,
}),
),
notify({
message: "Failed to fetch descriptor for provided URL",
uid: uuid(),
type: ArAlertType.ERROR,
}),
)
}, [url])

8
src/LayoutControlPanel.tsx
View File

@@ -5,7 +5,9 @@ import {
FunctionType,
LayoutControlPanelProps,
} from "@armco/types"
import { LoadableIcon, Tooltip, getCurrentTheme, useAppSelector } from "../.."
import Icon from "@armco/icon"
import Tooltip from "@armco/shared-components/Tooltip"
import { useTheme } from "@armco/utils/hooks"
import "./LayoutControlPanel.component.scss"
const getControl = (
@@ -40,7 +42,7 @@ const getControl = (
onClick={isDisabled ? () => {} : handler}
style={{ backgroundColor: toggleColor }}
>
<LoadableIcon icon={icon} color={iconColor} />
<Icon icon={icon} attributes={{colors: {fillColor: iconColor}}} />
</span>
<span slot={ArPopoverSlots.POPOVER} style={{ whiteSpace: "normal" }}>
<div>{tooltip}</div>
@@ -75,7 +77,7 @@ const LayoutControlPanel = forwardRef(
undoHandler,
redoHandler,
} = props
const theme = useAppSelector<string>(getCurrentTheme)
const { theme } = useTheme()
const controls = [
[

3
src/ReleaseLayout.tsx
View File

@@ -1,6 +1,5 @@
import { ArSlotViewMode, ReleaseLayoutProps, SlotProps } from "@armco/types"
import { Slot } from ".."
import "./ReleaseLayout.component.scss"
import Slot from "./Slot"
const ReleaseLayout = (props: ReleaseLayoutProps): JSX.Element => {
const { classes, displayMode, gridTemplate, slots, slotRenderer } = props

1
src/ReleaseSlot.tsx
View File

@@ -1,5 +1,4 @@
import { ReleaseSlotProps } from "@armco/types"
import "./ReleaseSlot.component.scss"
const ReleaseSlot = (props: ReleaseSlotProps): JSX.Element => {
const { config, content } = props

15
src/Resizable.tsx
View File

@@ -1,29 +1,20 @@
import {
ComponentType,
ForwardRefExoticComponent,
LazyExoticComponent,
PropsWithoutRef,
ReactElement,
RefAttributes,
Suspense,
cloneElement,
lazy,
useCallback,
useEffect,
useRef,
useState,
} from "react"
import { ArDirections, ResizableProps } from "@armco/types"
import Slot from "./Slot"
import "./Resizable.component.scss"
type ComponentOrForwardRef =
| ComponentType<any>
| ForwardRefExoticComponent<PropsWithoutRef<any> & RefAttributes<any>>
const components: {
[key: string]: LazyExoticComponent<ComponentOrForwardRef>
[key: string]: (props: any) => JSX.Element
} = {
Slot: lazy(() => import("../Slot")),
Slot,
// Add more components as needed
}

35
src/Slot.tsx
View File

@@ -1,21 +1,24 @@
import { ReactNode, useEffect, useMemo, useState } from "react"
import { ReactNode, useEffect, useState } from "react"
import {
ArComponentResources,
ArSlotViewMode,
LibRepoType,
SlotDescriptor,
SlotProps,
} from "@armco/types"
import * as atoms from ".."
import * as molecules from "../../molecules"
import { BuilderSlot, GridHelper, Layout, ReleaseSlot } from "../.."
import "./Slot.component.scss"
import {
generateGridAreaAndSizes,
generateGridTemplate,
} from "@armco/utils/gridHelper"
import { lazyImport } from "@armco/utils/helper"
import Component_404 from "@armco/shared-components/Component_404"
import BuilderSlot from "./BuilderSlot"
import Layout from "./Layout"
import ReleaseSlot from "./ReleaseSlot"
const Slot = (props: SlotProps): JSX.Element => {
const { mode = ArSlotViewMode.PREVIEW, layoutMode = "preview" } = props
const [content, setContent] = useState<ReactNode>()
const config = props.config
const repo: LibRepoType = useMemo(() => ({ ...atoms, ...molecules }), [])
useEffect(() => {
const content = config.content as {
@@ -25,9 +28,13 @@ const Slot = (props: SlotProps): JSX.Element => {
props?: { [key: string]: any }
}
if (content) {
if (content.componentName && repo[content.componentName]) {
if (content.componentName) {
// const source = content.source || ArComponentResources.STUFFLE
const Component = repo[content.componentName]
// TODO: In Stuffle use component's source property to specify sources like @armco/icon, @armco/Calendar etc. and use them here
const Component = lazyImport(content.componentName, () => (
<Component_404 />
))
// repo[content.componentName]
const contentProps = content.props || {}
if (content.componentName === "Layout") {
contentProps.displayMode = config.props?.containerDisplayMode
@@ -45,14 +52,10 @@ const Slot = (props: SlotProps): JSX.Element => {
) {
const gaResponse =
content?.descriptor?.content &&
GridHelper.generateGridAreaAndSizes(
content?.descriptor?.content,
"auto",
)
generateGridAreaAndSizes(content?.descriptor?.content, "auto")
const layout =
gaResponse &&
GridHelper.generateGridTemplate(gaResponse.gridArea, "auto")
gaResponse && generateGridTemplate(gaResponse.gridArea, "auto")
setContent(
<Layout
@@ -70,11 +73,11 @@ const Slot = (props: SlotProps): JSX.Element => {
} else {
setContent(null)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
config.content,
layoutMode,
mode,
repo,
props.lastSelected,
props.hideBuildModePaddings,
])

3
src/SlotTools.tsx
View File

@@ -5,8 +5,7 @@ import {
SlotControlProps,
SlotToolsProps,
} from "@armco/types"
import { Tooltip } from ".."
import "./SlotTools.component.scss"
import Tooltip from "@armco/shared-components/Tooltip"
const staticSlotTools: Array<SlotControlProps> = [
{ class: "ar-Slot__overlay-btn" },

10
src/index.ts
View File

@@ -1,3 +1,7 @@
import Layout from "./Layout"
export default Layout
export { default } from "./Layout"
export { default as BuilderLayout } from "./BuilderLayout"
export { default as ReleaseLayout } from "./ReleaseLayout"
export { default as Slot } from "./Slot"
export { default as BuilderSlot } from "./BuilderSlot"
export { default as ReleaseSlot } from "./ReleaseSlot"
export { default as Resizable } from "./Resizable"

5
src/setupTests.ts
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom"

1
tsconfig.json
View File

@@ -6,6 +6,7 @@
"dom.iterable",
"esnext"
],
"outDir": "build",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,

42
vite.config.ts
View File

@@ -1,20 +1,40 @@
import { resolve } from "path"
import { glob } from "glob"
import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react"
import dts from "vite-plugin-dts"
import { libInjectCss } from "vite-plugin-lib-inject-css"
import { externalizeDeps } from "vite-plugin-externalize-deps"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
open: true,
},
plugins: [
react(),
libInjectCss(),
dts({ outDir: "build/types" }),
externalizeDeps(),
],
build: {
outDir: "build",
sourcemap: true,
},
test: {
globals: true,
environment: "jsdom",
setupFiles: "src/setupTests",
mockReset: true,
lib: {
entry: glob.sync(resolve(__dirname, "src/**/!(*.d).{ts,tsx}")),
},
rollupOptions: {
treeshake: true,
output: [
{
format: "es",
dir: "build/es",
entryFileNames: "[name].js",
chunkFileNames: "[name]-chunk.js",
},
{
format: "cjs",
dir: "build/cjs",
entryFileNames: "[name].js",
chunkFileNames: "[name]-chunk.js",
},
],
},
},
})