Merge pull request #398 from shairez:pr-fluffy-experiment

WIP: first experiment of fluffy

Author: shairez

.eslintrc.json

@@ -9,7 +9,7 @@
         "@nx/enforce-module-boundaries": [
           "error",
           {
-            "enforceBuildableLibDependency": true,
+            "enforceBuildableLibDependency": false,
             "allow": [],
             "depConstraints": [
               {

.github/actions/test/action.yml

@@ -44,9 +44,9 @@ runs:
     #     storybookBuildDir: dist/storybook/headless
     #     zip: true
 
-    # - name: Build Tailwind Theme
+    # - name: Build the fluffy kit
     #   shell: bash
-    #   run: npx nx build tailwind
+    #   run: npx nx build fluffy
 
     # - name: Build
     #   shell: bash

.gitignore

@@ -1,6 +1,5 @@
 # Build
 dist
-lib
 lib-types
 /server
 

.npmrc

@@ -1,3 +1,4 @@
 save-exact = true
 auto-install-peers=true
+dedupe-peer-dependents=true
 public-hoist-pattern[]=@types*

.prettierignore

@@ -2,6 +2,7 @@
 **/*.log
 **/.DS_Store
 *.
+.vscode
 dist
 node_modules
 coverage

.prettierrc

@@ -2,5 +2,6 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 90
+  "printWidth": 90,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.verdaccio/config.yml

@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    maxage: 60m
+
+packages:
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+logs:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

.vscode/settings.json

@@ -1,6 +1,9 @@
 {
   "git.pullTags": false,
-  "conventionalCommits.scopes": ["tailwind"],
+  "conventionalCommits.scopes": ["fluffy", "headless", "docs"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
   "editor.codeActionsOnSave": {
     "source.removeUnusedImports": true
   }

CODING_STANDARDS.md

@@ -64,7 +64,7 @@ export type TooltipProps = QwikIntrinsicElements['div'] & {
 };
 ```
 
-For **Tailwind, Material and other components variations**, you can define the new props in a new type, named with the component name and the variation as prefix. For example:
+For **Fluffy, Material and other components variations**, you can define the new props in a new type, named with the component name and the variation as prefix. For example:
 
 ```ts
 type TailwindTooltipProps = {
@@ -104,12 +104,11 @@ return (
 - Use accessibility attributes whenever they are needed.
 - For simple primitive states use signals. For object state, use stores.
 
-## Example of headless button customisation with Tailwind
+## Example of headless button customization with Tailwind
 
 ```tsx
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton, ButtonProps as ButtonHeadlessProps } from '@qwik-ui/headless';
-import { clsq } from '@qwik-ui/shared';
 
 type TailwindButtonProps = { size?: 'sm' | 'md', ... };
 export type ButtonProps = ButtonHeadlessProps & TailwindButtonProps;
@@ -118,7 +117,7 @@ export const Button = component$(
   ({ size = 'md', class: classNames, ...rest }: ButtonProps) => {
     const { sizes, ... } = { sizes: { sm: 'btn-sm', md: 'btn-md', ... } };
     return (
-      <HeadlessButton {...rest} class={clsq('btn', sizes[size], classNames)}>
+      <HeadlessButton {...rest} class={['btn', sizes[size], classNames]}>
         <Slot />
       </HeadlessButton>
     );

apps/website/package.json

@@ -3,8 +3,10 @@
   "description": "The Qwik UI Website",
   "private": true,
   "dependencies": {
+    "@qwik-ui/cva": "workspace:*",
     "@qwik-ui/headless": "workspace:*",
     "@qwik-ui/tailwind": "workspace:*",
+    "@qwik-ui/fluffy": "workspace:*",
     "@qwik-ui/material": "workspace:*",
     "@qwik-ui/primitives": "workspace:*"
   }