Merge pull request chakra-ui#26 from chakra-ui/refactor/structure

refactor: update package structure

.eslintrc

@@ -45,6 +45,7 @@
     "import/no-named-as-default": "off",
     "prefer-object-spread": "off",
     "arrow-body-style": "off",
+    "import/namespace": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

.github/workflows/pr.yml

@@ -71,4 +71,4 @@ jobs:
         uses: preactjs/compressed-size-action@v2
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          pattern: "**/dist/**/*.prod.js"
+          pattern: "**/dist/**/*.mjs"

.gitignore

@@ -162,4 +162,5 @@ temp/
 # End of https://www.toptal.com/developers/gitignore/api/node,yarn,jetbrains,visualstudiocode
 
 # System files
-.DS_Store 
+.DS_Store
+.ultra.cache.json

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "printWidth": 120,
+  "proseWrap": "always",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/next-ts/components/state-visualizer.tsx

@@ -1,5 +1,5 @@
 import { Machine } from "@ui-machines/core"
-import { isDom } from "tiny-guard"
+import { isDom } from "@ui-machines/utils"
 
 type StateVisualizerProps = {
   state: Record<string, any>

examples/next-ts/next.config.js

@@ -1,2 +1,15 @@
-const withPreconstruct = require("@preconstruct/next")
-module.exports = withPreconstruct({})
+module.exports = {
+  experimental: {
+    externalDir: true,
+  },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.m?js$/,
+      type: "javascript/auto",
+      resolve: {
+        fullySpecified: false,
+      },
+    })
+    return config
+  },
+}

examples/next-ts/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "with-typescript",
+  "name": "next-ts",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -12,23 +12,21 @@
   "dependencies": {
     "@emotion/core": "^11.0.0",
     "@emotion/styled": "^11.3.0",
-    "@reach/auto-id": "^0.15.0",
-    "@reach/portal": "^0.16.0",
+    "@reach/auto-id": "^0.16.0",
+    "@reach/portal": "^0.16.2",
     "@ui-machines/core": "0.0.0",
     "@ui-machines/react": "0.0.0",
-    "next": "latest",
+    "next": "^12.0.4",
     "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-spinners": "^0.11.0"
   },
   "devDependencies": {
-    "@preconstruct/next": "^3.0.0",
     "@types/node": "16.9.1",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "regenerator-runtime": "^0.13.9",
     "typescript": "4.4.3"
   },
   "license": "MIT"

examples/next-ts/pages/accordion.tsx

@@ -1,5 +1,5 @@
+import { accordion } from "@ui-machines/accordion"
 import { useMachine } from "@ui-machines/react"
-import { accordion } from "@ui-machines/web"
 import { StateVisualizer } from "components/state-visualizer"
 import { useControls } from "hooks/use-controls"
 import { useMount } from "hooks/use-mount"

examples/next-ts/pages/combobox.tsx

@@ -1,9 +1,7 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import { combobox } from "@ui-machines/web"
-import { useMachine } from "@ui-machines/react"
-
 import * as styled from "@emotion/styled"
-
+import { combobox } from "@ui-machines/combobox"
+import { useMachine } from "@ui-machines/react"
 import { StateVisualizer } from "components/state-visualizer"
 import { useMount } from "hooks/use-mount"
 import { comboboxData } from "../../../shared/data"

examples/next-ts/pages/dialog.tsx

@@ -1,6 +1,6 @@
 import { Portal } from "@reach/portal"
+import { dialog } from "@ui-machines/dialog"
 import { useMachine, useSetup } from "@ui-machines/react"
-import { dialog } from "@ui-machines/web"
 import { StateVisualizer } from "components/state-visualizer"
 import { useRef } from "react"
 

examples/next-ts/pages/editable.tsx

@@ -1,5 +1,5 @@
+import { editable } from "@ui-machines/editable"
 import { useMachine, useSetup } from "@ui-machines/react"
-import { editable } from "@ui-machines/web"
 import { StateVisualizer } from "components/state-visualizer"
 import { useControls } from "hooks/use-controls"
 

examples/next-ts/pages/menu.tsx

@@ -1,6 +1,6 @@
 import { Global } from "@emotion/react"
 import { useMachine } from "@ui-machines/react"
-import { menu } from "@ui-machines/web"
+import { menu } from "@ui-machines/menu"
 import { StateVisualizer } from "components/state-visualizer"
 import { useMount } from "hooks/use-mount"
 import { menuStyle } from "../../../shared/style"

examples/next-ts/pages/nested-menu.tsx

@@ -1,10 +1,12 @@
 import { useMachine } from "@ui-machines/react"
-import { menu, mergeProps } from "@ui-machines/web"
+import { menu } from "@ui-machines/menu"
+import { mergeProps } from "@ui-machines/core"
 // import { StateVisualizer } from "components/state-visualizer"
 import { useMount } from "hooks/use-mount"
 import { useEffect } from "react"
-import { nextTick } from "tiny-fn"
-import { Styles } from "./menu"
+import { nextTick } from "@ui-machines/dom-utils"
+import { menuStyle } from "../../../shared/style"
+import { Global } from "@emotion/react"
 
 export default function Page() {
   const [state, send, machine] = useMachine(menu.machine)
@@ -51,7 +53,8 @@ export default function Page() {
   const triggerItem2Props = mergeProps(sub.getItemProps({ id: sub2.triggerProps.id }), sub2.triggerProps)
 
   return (
-    <Styles>
+    <>
+      <Global styles={menuStyle} />
       <button ref={rootRef} data-testid="trigger" {...root.triggerProps}>
         Click me
       </button>
@@ -119,6 +122,6 @@ export default function Page() {
       {/* <StateVisualizer state={state} label="Root Machine" style={{ maxWidth: 320 }} />
       <StateVisualizer state={subState} label="Sub Machine" style={{ maxWidth: 320, right: 420 }} />
       <StateVisualizer state={sub2State} label="Sub2 Machine" style={{ maxWidth: 320, right: 800 }} /> */}
-    </Styles>
+    </>
   )
 }

examples/next-ts/pages/number-input.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import { mergeProps, numberInput } from "@ui-machines/web"
+import { mergeProps } from "@ui-machines/core"
+import { numberInput } from "@ui-machines/number-input"
 import { useMachine } from "@ui-machines/react"
-
 import { StateVisualizer } from "components/state-visualizer"
-import { useMount } from "hooks/use-mount"
 import { useControls } from "hooks/use-controls"
+import { useMount } from "hooks/use-mount"
 
 export default function Page() {
   const controls = useControls({

examples/next-ts/pages/pin-input.tsx

@@ -1,10 +1,9 @@
-import { pinInput } from "@ui-machines/web"
+import { Global } from "@emotion/react"
+import { pinInput } from "@ui-machines/pin-input"
 import { useMachine } from "@ui-machines/react"
-
 import { StateVisualizer } from "components/state-visualizer"
-import { useMount } from "hooks/use-mount"
 import { useControls } from "hooks/use-controls"
-import { Global } from "@emotion/react"
+import { useMount } from "hooks/use-mount"
 import { pinInputStyle } from "../../../shared/style"
 
 export default function Page() {

examples/next-ts/pages/popover.tsx

@@ -1,7 +1,7 @@
 import { Global } from "@emotion/react"
 import { Portal } from "@reach/portal"
+import { popover } from "@ui-machines/popover"
 import { useMachine } from "@ui-machines/react"
-import { popover } from "@ui-machines/web"
 import { StateVisualizer } from "components/state-visualizer"
 import { useControls } from "hooks/use-controls"
 import { useMount } from "hooks/use-mount"

examples/next-ts/pages/range-slider.tsx

@@ -1,14 +1,12 @@
-import { rangeSlider } from "@ui-machines/web"
-import { useMachine } from "@ui-machines/react"
-
-import serialize from "form-serialize"
 import * as styled from "@emotion/styled"
-
+import { rangeSlider } from "@ui-machines/range-slider"
+import { useMachine } from "@ui-machines/react"
 import { StateVisualizer } from "components/state-visualizer"
+import serialize from "form-serialize"
 import { useMount } from "hooks/use-mount"
 import { rangeSliderStyle } from "../../../shared/style"
 
-const Styles = styled.default(`div`)(rangeSliderStyle as styled.CSSObject)
+const Styles = styled.default(`div`)(rangeSliderStyle)
 
 export default function Page() {
   const [state, send] = useMachine(

examples/next-ts/pages/rating.tsx

@@ -1,6 +1,5 @@
-import { rating } from "@ui-machines/web"
+import { rating } from "@ui-machines/rating"
 import { useMachine } from "@ui-machines/react"
-
 import { StateVisualizer } from "components/state-visualizer"
 import { useMount } from "hooks/use-mount"
 

examples/next-ts/pages/slider.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import * as styled from "@emotion/styled"
 import { useMachine } from "@ui-machines/react"
-import { slider } from "@ui-machines/web"
+import { slider } from "@ui-machines/slider"
 import { StateVisualizer } from "components/state-visualizer"
 import serialize from "form-serialize"
 import { useMount } from "hooks/use-mount"

examples/next-ts/pages/split-view.tsx

@@ -1,8 +1,6 @@
-import { splitView } from "@ui-machines/web"
-import { useMachine } from "@ui-machines/react"
-
 import * as styled from "@emotion/styled"
-
+import { useMachine } from "@ui-machines/react"
+import { splitView } from "@ui-machines/split-view"
 import { StateVisualizer } from "components/state-visualizer"
 import { useMount } from "hooks/use-mount"
 import { splitViewStyle } from "../../../shared/style"

examples/next-ts/pages/tabs.tsx

@@ -1,8 +1,8 @@
-import { tabs } from "@ui-machines/web"
 import { useMachine } from "@ui-machines/react"
+import { tabs } from "@ui-machines/tabs"
 import { StateVisualizer } from "components/state-visualizer"
-import { useMount } from "hooks/use-mount"
 import { useControls } from "hooks/use-controls"
+import { useMount } from "hooks/use-mount"
 
 const tabsData = [
   {

examples/next-ts/pages/tags-input.tsx

@@ -1,12 +1,10 @@
-import { tagsInput } from "@ui-machines/web"
-import { useMachine } from "@ui-machines/react"
-
 import * as styled from "@emotion/styled"
-
+import { useMachine } from "@ui-machines/react"
+import { tagsInput } from "@ui-machines/tags-input"
 import { StateVisualizer } from "components/state-visualizer"
+import { useControls } from "hooks/use-controls"
 import { useMount } from "hooks/use-mount"
 import { tagsInputStyle } from "../../../shared/style"
-import { useControls } from "hooks/use-controls"
 
 const Styles = styled.default(`div`)(tagsInputStyle as styled.CSSObject)
 

examples/next-ts/pages/toast.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Global } from "@emotion/react"
 import { useActor, useMachine } from "@ui-machines/react"
-import { toast, ToastMachine } from "@ui-machines/web"
+import { toast, ToastMachine } from "@ui-machines/toast"
 import { StateVisualizer } from "components/state-visualizer"
 import { useMount } from "hooks/use-mount"
 import { useRef } from "react"
@@ -19,7 +19,6 @@ const Toast = ({ actor }: { actor: ToastMachine }) => {
     <pre className="toast" {...t.containerProps}>
       <progress max={ctx.progress?.max} value={ctx.progress?.value} />
       <p>{ctx.title}</p>
-      {/* @ts-expect-error */}
       <p>{ctx.type === "loading" ? <BeatLoader /> : null}</p>
       <button onClick={t.dismiss}>Close</button>
     </pre>

examples/next-ts/pages/tooltip.tsx

@@ -1,5 +1,5 @@
 import { useMachine, useSetup } from "@ui-machines/react"
-import { tooltip } from "@ui-machines/web"
+import { tooltip } from "@ui-machines/tooltip"
 
 function Tooltip(props: { id?: string }) {
   const [state, send] = useMachine(tooltip.machine)

examples/next-ts/tsconfig.json

@@ -18,11 +18,8 @@
     "strict": false,
     "target": "esnext",
     "baseUrl": ".",
-    "paths": {
-      "@ui-machines/core": ["../../packages/core/src"],
-      "@ui-machines/react": ["../../packages/frameworks/react/src"]
-    }
+    "incremental": true
   },
   "exclude": ["node_modules"],
-  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts"]
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
 }

examples/solid-ts/package.json

@@ -2,6 +2,7 @@
   "name": "solid-ts",
   "version": "0.0.0",
   "description": "",
+  "private": true,
   "scripts": {
     "clean": "echo 'clean'",
     "dev": "vite",

examples/solid-ts/src/components/state-visualizer.tsx

@@ -1,4 +1,4 @@
-import { isDom } from "tiny-guard"
+import { isDom } from "@ui-machines/utils"
 import { Machine } from "@ui-machines/core"
 
 type StateVisualizerProps = {

examples/solid-ts/src/pages/accordion.tsx

@@ -1,4 +1,4 @@
-import { accordion } from "@ui-machines/web"
+import { accordion } from "@ui-machines/accordion"
 import { normalizeProps, useMachine, useSetup, SolidPropTypes } from "@ui-machines/solid"
 import { createMemo } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"

examples/solid-ts/src/pages/combobox.tsx

@@ -1,4 +1,4 @@
-import { combobox } from "@ui-machines/web"
+import { combobox } from "@ui-machines/combobox"
 import { normalizeProps, useMachine, useSetup, SolidPropTypes } from "@ui-machines/solid"
 
 import { createMemo, For } from "solid-js"

examples/solid-ts/src/pages/editable.tsx

@@ -1,4 +1,4 @@
-import { editable } from "@ui-machines/web"
+import { editable } from "@ui-machines/editable"
 import { normalizeProps, useMachine, useSetup, SolidPropTypes } from "@ui-machines/solid"
 import { createMemo } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"

examples/solid-ts/src/pages/menu.tsx

@@ -1,4 +1,4 @@
-import { menu } from "@ui-machines/web"
+import { menu } from "@ui-machines/menu"
 import { normalizeProps, useMachine, useSetup, SolidPropTypes } from "@ui-machines/solid"
 
 import { createMemo } from "solid-js"

examples/solid-ts/src/pages/number-input.tsx

@@ -1,8 +1,7 @@
-import { mergeProps, numberInput } from "@ui-machines/web"
-import { normalizeProps, useMachine, useSetup, SolidPropTypes } from "@ui-machines/solid"
-
+import { mergeProps } from "@ui-machines/core"
+import { numberInput } from "@ui-machines/number-input"
+import { normalizeProps, SolidPropTypes, useMachine, useSetup } from "@ui-machines/solid"
 import { createMemo } from "solid-js"
-
 import { StateVisualizer } from "../components/state-visualizer"
 
 export default function Page() {

examples/solid-ts/src/pages/pin-input.tsx

@@ -1,4 +1,4 @@
-import { pinInput } from "@ui-machines/web"
+import { pinInput } from "@ui-machines/pin-input"
 import { normalizeProps, useMachine, useSetup, SolidPropTypes } from "@ui-machines/solid"
 
 import { createMemo } from "solid-js"