fix: docs and website (#172)

* fix: add missing devDependency

* chore: fix className --> class

* docs: fix run library command

Author: gioboa

CONTRIBUTING.md

@@ -60,7 +60,7 @@ git checkout -b my-fix-branch main
 
 - From the root of the project run `pnpm install`.
 
-- Then run `pnpm run dev --workspace=apps/website`.
+- Then run `npx nx@latest serve website`.
 
 - Visit the URL printed in the console and you'll have a page opened with the suite of widgets.
 

apps/website/src/routes/docs/headless/rating/index.tsx

@@ -28,7 +28,7 @@ export default component$(() => {
 
 export const MyStarIcon = component$(() => <>💩</>);
 export const MyHeartIcon = component$(() => (
-  <div className="text-red-500 text-4xl">♥️</div>
+  <div class="text-red-500 text-4xl">♥️</div>
 ));
 export const MyComponentIcon = component$(() => (
   <div class="bg-green-400 rounded-xl w-8 h-8 p-1 m-1 flex justify-center items-center" />

package.json

@@ -20,6 +20,7 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@cypress/code-coverage": "3.10.0",
     "@cypress/vite-dev-server": "^2.2.1",
+    "@floating-ui/dom": "1.0.10",
     "@jscutlery/semver": "^2.30.1",
     "@nrwl/cli": "15.7.1",
     "@nrwl/cypress": "15.7.1",

packages/daisy/src/components/rating/rating.tsx

@@ -1,43 +1,39 @@
-import { component$, createContext, useContext, useContextProvider, useStore, useStyles$ } from '@builder.io/qwik';
 import {
-  Rating as HeadlessRating, RatingProps,
-} from '@qwik-ui/headless';
+  component$,
+  createContext,
+  useContext,
+  useContextProvider,
+  useStore,
+  useStyles$,
+} from '@builder.io/qwik';
+import { Rating as HeadlessRating, RatingProps } from '@qwik-ui/headless';
 import styles from './rating.css?inline';
 
-
 export type DaisyRatingProps = {
   /**
    * Daisy Custom mask
    * https://daisyui.com/components/mask/
    */
   mask?: string;
-} & RatingProps
+} & RatingProps;
 
 export const ContextService = createContext<{ mask: string }>('my-context');
 
-export const Rating = component$(
-  (props: DaisyRatingProps) => {
-    useStyles$(styles)
-    const { mask = 'mask-star bg-yellow-500', ...rest } = props;
-
-    const state = useStore({ mask });
-    useContextProvider(ContextService, state);
-
-    return (
-      <div className="rating gap-1">
-        <HeadlessRating
-          {...rest}
-          icon={props.icon || DaisyIcon}
-        />
-      </div>
-    );
-  }
-);
+export const Rating = component$((props: DaisyRatingProps) => {
+  useStyles$(styles);
+  const { mask = 'mask-star bg-yellow-500', ...rest } = props;
 
+  const state = useStore({ mask });
+  useContextProvider(ContextService, state);
 
-export const DaisyIcon = component$(
-  () => {
-    const state = useContext(ContextService);
-    return <div className={`w-4 h-4 mask ${state.mask} `} />
-  })
+  return (
+    <div class="rating gap-1">
+      <HeadlessRating {...rest} icon={props.icon || DaisyIcon} />
+    </div>
+  );
+});
 
+export const DaisyIcon = component$(() => {
+  const state = useContext(ContextService);
+  return <div class={`w-4 h-4 mask ${state.mask} `} />;
+});