gsoft-inc · alexasselin008 · Oct 24, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -71,7 +71,7 @@
         "logrocket": "9.0.0",
         "react-docgen-typescript": "^2.2.2",
         "shiki": "^1.22.0",
-        "storybook": "8.3.5",
+        "storybook": "^8.3.5",
         "tsconfig-paths-webpack-plugin": "4.1.0",
         "typescript": "5.5.4"
     },

diff --git a/apps/samples/basic/.browserslistrc b/apps/samples/basic/.browserslistrc
@@ -0,0 +1 @@
+extends @workleap/browserslist-config
diff --git a/apps/samples/basic/.eslintignore b/apps/samples/basic/.eslintignore
@@ -0,0 +1,6 @@
+**/dist/*
+**/__snapshots__/*
+node_modules
+*.md
+*.yml
+*.yaml
diff --git a/apps/samples/basic/.eslintrc.json b/apps/samples/basic/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "root": true,
+    "extends": "plugin:@workleap/web-application"
+}
diff --git a/apps/samples/basic/.gitignore b/apps/samples/basic/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/samples/basic/package.json b/apps/samples/basic/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "basic",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "webpack serve --config webpack.dev.js",
+        "build": "webpack --config webpack.build.js",
+        "lint": "eslint ./src"
+    },
+    "dependencies": {
+        "@hopper-ui/components": "workspace:*",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-router-dom": "^6.26.2"
+    },
+    "devDependencies": {
+        "@swc/core": "1.7.26",
+        "@swc/helpers": "0.5.13",
+        "@types/react": "18.3.3",
+        "@types/react-dom": "18.3.0",
+        "@typescript-eslint/parser": "8.6.0",
+        "@workleap/browserslist-config": "2.0.1",
+        "@workleap/eslint-plugin": "3.2.2",
+        "@workleap/swc-configs": "2.2.3",
+        "@workleap/typescript-configs": "3.0.2",
+        "@workleap/webpack-configs": "1.5.1",
+        "browserslist": "4.23.3",
+        "eslint": "8.57.1",
+        "shelljs": "0.8.5",
+        "typescript": "5.5.4",
+        "webpack": "5.95.0",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "5.1.0"
+    }
+}
diff --git a/apps/samples/basic/public/favicon.png b/apps/samples/basic/public/favicon.png
diff --git a/apps/samples/basic/public/index.html b/apps/samples/basic/public/index.html
@@ -0,0 +1,14 @@
+<!-- <!doctype html> -->
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link href="favicon.png" rel="icon">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React app</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+
+</html>
diff --git a/apps/samples/basic/src/App.tsx b/apps/samples/basic/src/App.tsx
@@ -0,0 +1,16 @@
+
+import { Route, Routes } from "react-router-dom";
+import { Layout } from "./Layout.tsx";
+import { MainPage } from "./MainPage.tsx";
+import { StorePage } from "./StorePage.tsx";
+
+export function App() {
+    return (
+        <Routes>
+            <Route path="/" element={<Layout />}>
+                <Route index element={<MainPage />} />
+                <Route path="/store" element={<StorePage />} />
+            </Route>
+        </Routes>
+    );
+}
diff --git a/apps/samples/basic/src/Layout.tsx b/apps/samples/basic/src/Layout.tsx
@@ -0,0 +1,50 @@
+import { Button, Div, H1, HopperProvider, HtmlHeader, Link, Main, useColorSchemeContext } from "@hopper-ui/components";
+import { Outlet, useHref, useNavigate, type NavigateOptions } from "react-router-dom";
+
+declare module "react-aria-components" {
+    interface RouterConfig {
+        routerOptions: NavigateOptions;
+    }
+}
+
+export function Layout() {
+    const navigate = useNavigate();
+
+    return (
+        <HopperProvider locale="en-US" navigate={navigate} useHref={useHref} withBodyStyle defaultColorScheme="dark">
+            <InnerLayout />
+        </HopperProvider>
+    );
+}
+
+function InnerLayout() {
+    const { setColorScheme, colorScheme } = useColorSchemeContext();
+
+    return (
+        <Div>
+            <HtmlHeader borderBottom="neutral" padding="inset-sm">
+                <H1>React App</H1>
+                <Link href="/">Main Page</Link> &nbsp;
+                <Link href="/store">Store</Link>
+                <Div
+                    position="absolute"
+                    top="10px"
+                    right="10px"
+                    display="fixed"
+                    UNSAFE_width="200px"
+                >
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onPress={() => {
+                            setColorScheme(colorScheme === "light" ? "dark" : "light");
+                        }}
+                    >Change Theme</Button>
+                </Div>
+            </HtmlHeader>
+            <Main padding="inset-lg">
+                <Outlet />
+            </Main>
+        </Div>
+    );
+}
diff --git a/apps/samples/basic/src/MainPage.tsx b/apps/samples/basic/src/MainPage.tsx
@@ -0,0 +1,17 @@
+import { Checkbox, CheckboxGroup, H1, Stack, Text } from "@hopper-ui/components";
+
+export function MainPage() {
+    return (
+        <Stack>
+            <H1>MainPage</H1>
+            <Text>
+                This is the main page.
+                What is your role?
+            </Text>
+            <CheckboxGroup label="Roles">
+                <Checkbox value="developer">Developer</Checkbox>
+                <Checkbox value="designer">Designer</Checkbox>
+            </CheckboxGroup>
+        </Stack>
+    );
+}
diff --git a/apps/samples/basic/src/StorePage.tsx b/apps/samples/basic/src/StorePage.tsx
@@ -0,0 +1,18 @@
+import { H1, Select, SelectItem, Stack, Text } from "@hopper-ui/components";
+
+export function StorePage() {
+    return (
+        <Stack>
+            <H1>Store</H1>
+            <Text>
+                This is the store page.
+                What is do you want to buy?
+            </Text>
+            <Select label="Movies">
+                <SelectItem id="venom">Venom</SelectItem>
+                <SelectItem id="spider-man">Spider-man</SelectItem>
+                <SelectItem id="deadpool">Deadpool</SelectItem>
+            </Select>
+        </Stack>
+    );
+}
diff --git a/apps/samples/basic/src/index.css b/apps/samples/basic/src/index.css
@@ -0,0 +1 @@
+@import url("@hopper-ui/components/index.css")
diff --git a/apps/samples/basic/src/index.tsx b/apps/samples/basic/src/index.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App.tsx";
+import "./index.css";
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
+    <StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </StrictMode>
+);
diff --git a/apps/samples/basic/swc.build.js b/apps/samples/basic/swc.build.js
@@ -0,0 +1,7 @@
+// @ts-check
+
+import { browserslistToSwc, defineBuildConfig } from "@workleap/swc-configs";
+
+const targets = browserslistToSwc();
+
+export const swcConfig = defineBuildConfig(targets);
diff --git a/apps/samples/basic/swc.dev.js b/apps/samples/basic/swc.dev.js
@@ -0,0 +1,7 @@
+// @ts-check
+
+import { browserslistToSwc, defineDevConfig } from "@workleap/swc-configs";
+
+const targets = browserslistToSwc();
+
+export const swcConfig = defineDevConfig(targets);
diff --git a/apps/samples/basic/tsconfig.json b/apps/samples/basic/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@workleap/typescript-configs/web-application.json",
+  "exclude": ["dist", "node_modules"],
+  "include": ["**/*", "../../../types"],
+  "compilerOptions": {
+        "paths": {
+            "@hopper-ui/components": ["../../../packages/components/src/index.ts"],
+        }
+  }
+}
diff --git a/apps/samples/basic/webpack.build.js b/apps/samples/basic/webpack.build.js
@@ -0,0 +1,6 @@
+// @ts-check
+
+import { defineBuildConfig } from "@workleap/webpack-configs";
+import { swcConfig } from "./swc.build.js";
+
+export default defineBuildConfig(swcConfig);
diff --git a/apps/samples/basic/webpack.dev.js b/apps/samples/basic/webpack.dev.js
@@ -0,0 +1,5 @@
+// @ts-check
+import { defineDevConfig } from "@workleap/webpack-configs";
+import { swcConfig } from "./swc.dev.js";
+
+export default defineDevConfig(swcConfig);
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "doc:storybook": "pnpm --filter=docs storybook",
         "doc:build": "pnpm --filter=docs build",
         "doc:generate": "pnpm --filter=docs generate",
+        "dev:basic": "pnpm -r --filter=basic dev",
         "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
         "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm -r build",
         "test-storybook": "test-storybook",

diff --git a/packages/components/.eslintrc.json b/packages/components/.eslintrc.json
@@ -28,6 +28,10 @@
                             "name": "react",
                             "importNames": ["default"],
                             "message": "import React from \"react\" is no longer necessary and should be avoided. "
+                        },
+                        {
+                            "name": "@hopper-ui/components",
+                            "message": "import { anything } from \"@hopper-ui/components\" inside /src needs to be avoided. It should only be used in docs and tests."
                         }
                     ]
                 }]

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -49,6 +49,7 @@
     "dependencies": {
         "@hopper-ui/icons": "workspace:*",
         "@react-aria/utils": "^3.25.3",
+        "@react-stately/data": "^3.11.7",
         "@react-stately/utils": "^3.10.4",
         "@react-types/shared": "^3.25.0",
         "clsx": "^2.1.1"

diff --git a/packages/components/src/Form/src/Form.tsx b/packages/components/src/Form/src/Form.tsx
@@ -1,19 +1,3 @@
-import {
-    ButtonContext,
-    CheckboxContext,
-    CheckboxFieldContext,
-    CheckboxGroupContext,
-    ComboBoxContext,
-    LabelContext,
-    NumberFieldContext,
-    PasswordFieldContext,
-    RadioGroupContext,
-    SearchFieldContext,
-    SelectContext,
-    TagGroupContext,
-    TextAreaContext,
-    TextFieldContext
-} from "@hopper-ui/components";
 import {
     useResponsiveValue,
     useStyledSystem,
@@ -28,7 +12,14 @@ import {
     type FormProps as RACFormProps
 } from "react-aria-components";
 
-import { LinkButtonContext } from "../../buttons/index.ts";
+import { ButtonContext, LinkButtonContext } from "../../buttons/index.ts";
+import { CheckboxContext, CheckboxFieldContext, CheckboxGroupContext } from "../../checkbox/index.ts";
+import { ComboBoxContext } from "../../ComboBox/index.ts";
+import { NumberFieldContext, PasswordFieldContext, SearchFieldContext, TextAreaContext, TextFieldContext } from "../../inputs/index.ts";
+import { RadioGroupContext } from "../../radio/index.ts";
+import { SelectContext } from "../../Select/index.ts";
+import { TagGroupContext } from "../../tag/index.ts";
+import { LabelContext } from "../../typography/index.ts";
 import { cssModule, SlotProvider, type FieldSize, type NecessityIndicator } from "../../utils/index.ts";
 
 import { FormContext } from "./FormContext.ts";

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -27,12 +27,10 @@ export * from "./typography/OverlineText/index.ts";
 export * from "./typography/Text/index.ts";
 export * from "./utils/index.ts";
 
+export * from "@hopper-ui/styled-system";
+export { useAsyncList } from "@react-stately/data";
 export type { RouterOptions } from "@react-types/shared";
 export type { Orientation, Placement } from "react-aria";
-
 export { Collection, type ContextValue, type Key, type Selection, type ValidationResult } from "react-aria-components";
-export { useAsyncList } from "react-stately";
-
-export * from "@hopper-ui/styled-system";
 
 import "./index.css";
diff --git a/packages/components/src/overlays/Popover/src/Popover.tsx b/packages/components/src/overlays/Popover/src/Popover.tsx
@@ -1,20 +1,3 @@
-import {
-    ButtonContext,
-    ButtonGroupContext,
-    composeClassnameRenderProps,
-    ContentContext,
-    cssModule,
-    FooterContext,
-    HeadingContext,
-    HopperProvider,
-    isFunction,
-    isNil,
-    LinkButtonContext,
-    LinkContext,
-    ListBoxContext,
-    SlotProvider,
-    type BaseComponentDOMProps
-} from "@hopper-ui/components";
 import { useColorSchemeContext, useResponsiveValue, useStyledSystem, type ResponsiveProp, type StyledComponentProps, type StyledSystemProps } from "@hopper-ui/styled-system";
 import clsx from "clsx";
 import { forwardRef, type ForwardedRef } from "react";
@@ -27,6 +10,14 @@ import {
     type PopoverProps as RACPopoverProps
 } from "react-aria-components";
 
+import { ButtonContext, ButtonGroupContext, LinkButtonContext } from "../../../buttons/index.ts";
+import { HopperProvider } from "../../../HopperProvider/index.ts";
+import { ContentContext, FooterContext } from "../../../layout/index.ts";
+import { LinkContext } from "../../../Link/index.ts";
+import { ListBoxContext } from "../../../ListBox/index.ts";
+import { HeadingContext } from "../../../typography/index.ts";
+import { composeClassnameRenderProps, cssModule, isFunction, isNil, SlotProvider, type BaseComponentDOMProps } from "../../../utils/index.ts";
+
 import { PopoverContext } from "./PopoverContext.ts";
 
 import styles from "./Popover.module.css";

diff --git a/packages/components/src/typography/Heading/src/Heading.tsx b/packages/components/src/typography/Heading/src/Heading.tsx
@@ -1,5 +1,4 @@
-import type { ResponsiveProp, StyledComponentProps } from "@hopper-ui/components";
-import { slot as slotFn, useResponsiveValue, useStyledSystem } from "@hopper-ui/styled-system";
+import { slot as slotFn, useResponsiveValue, useStyledSystem, type ResponsiveProp, type StyledComponentProps } from "@hopper-ui/styled-system";
 import clsx from "clsx";
 import {
     forwardRef,