Merge pull request #132 from fabien-ml/develop

chore: add solidhack message

.eslintrc.json

@@ -27,7 +27,7 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "tsconfigRootDir": "./",
-    "project": ["./tsconfig.eslint.json", "./apps/*/tsconfig.json", "./packages/*/tsconfig.json"],
+    "project": ["./tsconfig.json", "./apps/*/tsconfig.json", "./packages/*/tsconfig.json"],
     "ecmaVersion": 2021,
     "sourceType": "module",
     "ecmaFeatures": {
@@ -40,7 +40,7 @@
     },
     "import/resolver": {
       "typescript": {
-        "project": ["./tsconfig.eslint.json", "./apps/*/tsconfig.json", "./packages/*/tsconfig.json"],
+        "project": ["./tsconfig.json", "./apps/*/tsconfig.json", "./packages/*/tsconfig.json"],
         "alwaysTryTypes": true
       }
     }

.github/workflows/build-test.yml

@@ -32,6 +32,6 @@ jobs:
           cache: "pnpm"
       - name: pnpm install, build and test
         run: |
-          pnpm install --frozen-lockfile
+          pnpm install
           pnpm build
-          pnpm test:ci
+          pnpm test

CONTRIBUTING.md

@@ -52,4 +52,4 @@ packages/
 
 - `typecheck` – runs TypeScript typechecking with `tsc --noEmit` on all packages and docs
 - `lint` – runs ESLint on all packages and docs
-- `test` – runs tests with jest in watch mode
+- `test` – runs tests with jest

README.md

@@ -42,6 +42,8 @@ Hope UI is a composable and accessible component library that gives you the foun
 
 > ⚠️ Hope UI is still under development and is not ready for production.
 
+> ⚠️ The `main` branch of the repo will remain unchanged until the end of SolidHack voting (May 2nd).
+
 ## Documentation
 
 For full documentation, visit [hope-ui.com](https://hope-ui.com/).

packages/solid/ROADMAP.md → ROADMAP.md

@@ -44,7 +44,6 @@
 | PasswordInput    |             |            |       |           |      |
 | RadioGroup       |     ✅      |     ✅     |       |    ✅     |      |
 | Radio            |     ✅      |     ✅     |       |    ✅     |      |
-| NativeSelect     |             |            |       |           |      |
 | Select           |     ✅      |     ✅     |       |           |      |
 | MultiSelect      |     ✅      |     ✅     |       |           |      |
 | Slider           |             |            |       |           |      |
@@ -78,14 +77,14 @@
 
 ### Feedback
 
-|                  | Development | A11y check | Tests | Storybook | Docs |
-| ---------------- | :---------: | :--------: | :---: | :-------: | :--: |
-| Alert            |     ✅      |     ✅     |  ✅   |    ✅     |      |
-| CircularProgress |     ✅      |     ✅     |       |           |      |
-| Progress         |     ✅      |     ✅     |       |           |      |
-| Spinner          |     ✅      |     ✅     |       |           |      |
-| Skeleton         |     ✅      |    n/a     |       |           |      |
-| Toast            |             |            |       |           |      |
+|                      | Development | A11y check | Tests | Storybook | Docs |
+| -------------------- | :---------: | :--------: | :---: | :-------: | :--: |
+| Alert                |     ✅      |     ✅     |  ✅   |    ✅     |      |
+| CircularProgress     |     ✅      |     ✅     |       |           |      |
+| Progress             |     ✅      |     ✅     |       |           |      |
+| Spinner              |     ✅      |     ✅     |       |           |      |
+| Skeleton             |     ✅      |    n/a     |       |           |      |
+| Notification (Toast) |     ✅      |     ✅     |       |           |      |
 
 ### Overlay
 

apps/docs/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite --host",
-    "serve": "vite preview --port 3000"
+    "serve": "vite preview --port 3000",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@felte/solid": "1.1.5",
@@ -17,7 +18,7 @@
     "prismjs": "1.27.0",
     "solid-app-router": "0.2.1",
     "solid-js": "1.3.14",
-    "solid-transition-group": "0.0.8",
+    "solid-transition-group": "0.0.10",
     "yup": "0.32.11"
   }
 }

apps/docs/tsconfig.json

@@ -1,17 +1,12 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./",
+    "outDir": "dist",
+    "baseUrl": ".",
+    "rootDir": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@hope-ui/solid": ["../../packages/solid/src"],
-      "@hope-ui/solid/*": ["../../packages/solid/src/*"]
+      "@/*": ["src/*"]
     }
   },
-  "include": ["vite.config.*", "src/**/*"],
-  "references": [
-    {
-      "path": "../../packages/solid"
-    }
-  ]
+  "include": ["vite.config.*", "src/**/*"]
 }

apps/docs/vite.config.ts

@@ -15,7 +15,6 @@ export default defineConfig({
   resolve: {
     alias: {
       "@/": fileURLToPath(new URL("./src/", import.meta.url)),
-      "@hope-ui/solid": fileURLToPath(new URL("../../packages/solid/src", import.meta.url)),
     },
   },
   build: {

package.json

@@ -1,6 +1,5 @@
 {
   "name": "hope-ui",
-  "version": "0.0.1",
   "private": false,
   "description": "The SolidJS component library you've hoped for.",
   "keywords": [
@@ -41,10 +40,12 @@
     "format": "prettier . --write --ignore-path .gitignore && git update-index --again",
     "lint": "eslint . --ext .ts,.tsx --ignore-path .gitignore",
     "prepare": "husky install",
+    "publish": "pnpm --filter @hope-ui/solid publish",
+    "publish:next": "pnpm --filter @hope-ui/solid publish --tag next",
     "storybook": "pnpm --filter @hope-ui/solid storybook",
-    "test": "jest --watch",
-    "test:ci": "jest",
-    "typecheck": "tsc --noEmit"
+    "test": "pnpm --filter @hope-ui/solid test",
+    "test:watch": "pnpm --filter @hope-ui/solid test:watch",
+    "typecheck": "pnpm --filter @hope-ui/* typecheck"
   },
   "lint-staged": {
     "*.{md,json}": [
@@ -83,7 +84,6 @@
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/user-event": "14.0.4",
-    "@types/body-scroll-lock": "3.1.0",
     "@types/jest": "27.4.1",
     "@types/lodash.merge": "4.6.6",
     "@types/node": "17.0.23",
@@ -113,13 +113,13 @@
     "react-dom": "17.0.1",
     "solid-js": "1.3.14",
     "solid-testing-library": "0.3.0",
-    "solid-transition-group": "0.0.8",
+    "solid-transition-group": "0.0.10",
     "sort-package-json": "1.55.0",
     "storybook-dark-mode": "1.0.9",
     "ts-jest": "27.1.4",
     "typescript": "4.6.3",
     "vite": "2.9.1",
-    "vite-plugin-dts": "1.0.5",
+    "vite-plugin-dts": "^1.0.5",
     "vite-plugin-prismjs": "0.0.8",
     "vite-plugin-solid": "2.2.6",
     "webpack": "5.72.0"

jest.config.js → packages/solid/jest.config.js

@@ -1,5 +1,5 @@
 const repoRootPath = `<rootDir>`;
-const solidjsPath = `${repoRootPath}/node_modules/solid-js`;
+const solidjsPath = `${repoRootPath}/../../node_modules/solid-js`;
 
 module.exports = {
   preset: "ts-jest",

packages/solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hope-ui/solid",
-  "version": "0.4.2",
+  "version": "0.5.0-alpha.3",
   "private": false,
   "description": "The SolidJS component library you've hoped for.",
   "keywords": [
@@ -44,9 +44,10 @@
   ],
   "scripts": {
     "build": "vite build",
-    "build:storybook": "build-storybook",
-    "dev": "vite --host",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@floating-ui/dom": "0.4.4",
@@ -58,7 +59,7 @@
   "peerDependencies": {
     "@stitches/core": "^1.2.7",
     "solid-js": "^1.3.14",
-    "solid-transition-group": "^0.0.8"
+    "solid-transition-group": "^0.0.10"
   },
   "info": "Hope UI is a composable and accessible component library for SolidJS with a style props API, theming, dark mode and following WAI ARIA 1.2 design patterns"
 }

packages/solid/src/theme/color-mode.ts → packages/solid/src/color-mode.ts

@@ -1,8 +1,9 @@
 import { isServer } from "solid-js/web";
 
-import { __DEV__ } from "../utils/assertion";
-import { mockBody } from "../utils/object";
-import { ColorMode } from "./types";
+import { __DEV__ } from "./utils/assertion";
+import { mockBody } from "./utils/object";
+
+export type ColorMode = "light" | "dark" | "system";
 
 const hasLocalStorageSupport = () => typeof Storage !== "undefined";
 

packages/solid/src/components/accordion/__tests__/accordion.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, screen } from "solid-testing-library";
 
-import { renderWithHopeProvider } from "../../../utils/test-utils";
+import { renderWithHopeProvider } from "../../test-utils";
 import { Accordion } from "../accordion";
 import { AccordionButton } from "../accordion-button";
 import { AccordionItem } from "../accordion-item";
@@ -46,11 +46,17 @@ describe("Accordion", () => {
 
   //   const trigger = screen.getByText("Trigger");
 
+  //   expect(trigger).toHaveAttribute("aria-expanded", "false");
+
   //   // assert
   //   fireEvent.click(trigger);
+  //   await Promise.resolve();
+
   //   expect(trigger).toHaveAttribute("aria-expanded", "true");
 
   //   fireEvent.click(trigger);
+  //   await Promise.resolve();
+
   //   expect(trigger).toHaveAttribute("aria-expanded", "false");
   // });
 });

packages/solid/src/components/accordion/accordion-button.tsx

@@ -1,6 +1,6 @@
 import { JSX, splitProps } from "solid-js";
 
-import { useComponentStyleConfigs } from "../../theme/provider";
+import { useStyleConfig } from "../../hope-provider";
 import { isFunction } from "../../utils/assertion";
 import { classNames, createClassSelector } from "../../utils/css";
 import { callAllHandlers, callHandler } from "../../utils/function";
@@ -21,7 +21,7 @@ const hopeAccordionButtonClass = "hope-accordion__button";
  * that is appropriate for the information architecture of the page.
  */
 export function AccordionButton<C extends ElementType = "button">(props: AccordionButtonProps<C>) {
-  const theme = useComponentStyleConfigs().Accordion;
+  const theme = useStyleConfig().Accordion;
 
   const accordionItemContext = useAccordionItemContext();
 

packages/solid/src/components/accordion/accordion-icon.tsx

@@ -1,6 +1,6 @@
 import { splitProps } from "solid-js";
 
-import { useComponentStyleConfigs } from "../../theme/provider";
+import { useStyleConfig } from "../../hope-provider";
 import { classNames, createClassSelector } from "../../utils/css";
 import { IconProps } from "../icon/icon";
 import { IconCaretDown } from "../icons/IconCaretDown";
@@ -17,7 +17,7 @@ const hopeAccordionIconClass = "hope-accordion__icon";
  * It rotates `180deg` based on the open/close state.
  */
 export function AccordionIcon<C extends ElementType = "svg">(props: AccordionIconProps<C>) {
-  const theme = useComponentStyleConfigs().Accordion;
+  const theme = useStyleConfig().Accordion;
 
   const accordionItemContext = useAccordionItemContext();
 

packages/solid/src/components/accordion/accordion-item.tsx

@@ -1,7 +1,7 @@
 import { Accessor, createContext, createMemo, createUniqueId, JSX, Show, splitProps, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 
-import { useComponentStyleConfigs } from "../../theme/provider";
+import { useStyleConfig } from "../../hope-provider";
 import { classNames, createClassSelector } from "../../utils/css";
 import { normalizeEventKey } from "../../utils/dom";
 import { callHandler } from "../../utils/function";
@@ -69,7 +69,7 @@ const hopeAccordionItemClass = "hope-accordion__item";
 export function AccordionItem<C extends ElementType = "div">(props: AccordionItemProps<C>) {
   const defaultIdPrefix = `hope-accordion-item-${createUniqueId()}`;
 
-  const theme = useComponentStyleConfigs().Accordion;
+  const theme = useStyleConfig().Accordion;
 
   const accordionContext = useAccordionContext();
 

packages/solid/src/components/accordion/accordion-panel.tsx

@@ -1,6 +1,6 @@
 import { splitProps } from "solid-js";
 
-import { useComponentStyleConfigs } from "../../theme/provider";
+import { useStyleConfig } from "../../hope-provider";
 import { classNames, createClassSelector } from "../../utils/css";
 import { Box } from "../box/box";
 import { Collapse } from "../collapse/collapse";
@@ -19,7 +19,7 @@ const hopeAccordionPanelClass = "hope-accordion__panel";
  * It uses the `Collapse` component to animate its height.
  */
 export function AccordionPanel<C extends ElementType = "div">(props: AccordionPanelProps<C>) {
-  const theme = useComponentStyleConfigs().Accordion;
+  const theme = useStyleConfig().Accordion;
 
   const accordionItemContext = useAccordionItemContext();
 

packages/solid/src/components/accordion/accordion.tsx

@@ -1,8 +1,8 @@
 import { createContext, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 
+import { useStyleConfig } from "../../hope-provider";
 import { SystemStyleObject } from "../../styled-system/types";
-import { useComponentStyleConfigs } from "../../theme/provider";
 import { isArray } from "../../utils/assertion";
 import { classNames, createClassSelector } from "../../utils/css";
 import { getNextIndex, getPrevIndex } from "../../utils/number";
@@ -74,7 +74,7 @@ const hopeAccordionClass = "hope-accordion";
  * It wraps all accordion items in a `div` for better grouping.
  */
 export function Accordion<C extends ElementType = "div">(props: AccordionProps<C>) {
-  const theme = useComponentStyleConfigs().Accordion;
+  const theme = useStyleConfig().Accordion;
 
   const [buttons, setButtons] = createSignal<HTMLButtonElement[]>([]);
 

packages/solid/src/components/alert/__tests__/alert-description.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, screen } from "solid-testing-library";
 
-import { renderWithHopeProvider } from "../../../utils/test-utils";
+import { renderWithHopeProvider } from "../../test-utils";
 import { alertDescriptionStyles } from "../alert.styles";
 import { AlertDescription } from "../alert-description";
 

packages/solid/src/components/alert/__tests__/alert-icon.test.tsx

@@ -1,7 +1,7 @@
 import { JSX } from "solid-js";
 import { cleanup, screen } from "solid-testing-library";
 
-import { renderWithHopeProvider } from "../../../utils/test-utils";
+import { renderWithHopeProvider } from "../../test-utils";
 import { Alert } from "../alert";
 import { alertIconStyles } from "../alert.styles";
 import { AlertIcon } from "../alert-icon";

packages/solid/src/components/alert/__tests__/alert-title.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, screen } from "solid-testing-library";
 
-import { renderWithHopeProvider } from "../../../utils/test-utils";
+import { renderWithHopeProvider } from "../../test-utils";
 import { alertTitleStyles } from "../alert.styles";
 import { AlertTitle } from "../alert-title";
 

packages/solid/src/components/alert/__tests__/alert.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, screen } from "solid-testing-library";
 
-import { renderWithHopeProvider } from "../../../utils/test-utils";
+import { renderWithHopeProvider } from "../../test-utils";
 import { Alert } from "../alert";
 import { alertStyles, AlertVariants } from "../alert.styles";