Merge pull request #1 from qwikifiers/feat/flow-components

Flow components

.all-contributorsrc

@@ -2,7 +2,7 @@
   "projectName": "qwik-flow",
   "projectOwner": "qwikifiers",
   "repoType": "github",
-  "repoHost": "https://github.com",
+  "repoHost": "https://github.com/qwikifiers",
   "files": [
     "README.md"
   ],
@@ -24,6 +24,21 @@
         "review",
         "ideas"
       ]
+    },
+    {
+      "login": "keuller",
+      "name": "Keuller Magalhaes",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2074316?v=4",
+      "profile": "https://github.com/keuller",
+      "contributions": [
+        "code",
+        "test",
+        "infra",
+        "doc",
+        "maintenance",
+        "review",
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.eslintrc.json

@@ -4,7 +4,7 @@
   "plugins": ["@nrwl/nx"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
       "rules": {
         "@nrwl/nx/enforce-module-boundaries": [
           "error",

README.md

@@ -8,13 +8,13 @@
   <br><br>
 
   <a href='https://img.shields.io/npm/v/@qwikifiers/qwik-flow?label=npm%20version'>
-  <img src='https://img.shields.io/npm/v/@qwikifiers/qwik-flow?label=npm%20version' alt='@qwikifiers/qwik-flow npm'>
+    <img src='https://img.shields.io/npm/v/@qwikifiers/qwik-flow?label=npm%20version' alt='@qwikifiers/qwik-flow npm'>
   </a>
   <a href='https://opensource.org/licenses/MIT'>
-  <img src='https://img.shields.io/badge/License-MIT-green.svg' alt='MIT'>
+    <img src='https://img.shields.io/badge/License-MIT-green.svg' alt='MIT'>
   </a>
   <a href='#contributors'>
-  <img src='https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square' alt='All Contributors'>
+    <img src='https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square' alt='All Contributors'>
   </a>
 
 </div>
@@ -32,27 +32,54 @@
 - [License](#license)
 
 
-## Installation (NOT READY YET)
+## Installation
 
 ```console
 npm install -D @qwikifers/qwik-flow
 ```
 
-## Configuration
-
-```ts
-
-```
-
 ## Usage
 
-```ts
+`If` component.
+```tsx
+import { If } from '@qwikifers/qwik-flow';
 
+const toogle = useSignal<boolean>(false);
 
+<If condition={toogle.value}>
+  {() => <Info message="Lorem ipsum dolores avec mi" />}
+</If>
 ```
 
+`For` component:
+```tsx
+import { For } from '@qwikifers/qwik-flow';
+
+<For each={people.value} fallback={() => (<div>No data found</div>)}>
+  {(item, key) => <Card key={key} data={item} />}
+</For>
+```
 <br/>
 
+`Switch`/`Case` components for more complex rendering logic.
+```tsx
+import { Switch, Case } from '@qwikifers/qwik-flow';
+
+const option = useSignal<string>('1');
+
+<Switch default={() => <div>Invalid option</div>}>
+  <Case when={option.value === '1'}>
+    {() => <p>selected: 1 - Car</p>}
+  </Case>
+  <Case when={option.value === '2'}>
+    {() => <p>selected: 2 - Airplane</p>}
+  </Case>
+  <Case when={option.value === '3'}>
+    {() => <p>selected: 3 - Train</p>}
+  </Case>
+</Switch>
+```
+
 ## Contributing
 
 Want to contribute? Yayy! 🎉
@@ -69,22 +96,6 @@ Be kind to each other and please read our [code of conduct](CODE_OF_CONDUCT.md).
 
 <br/>
 
-## Contributors
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://hirez.io/?utm_source=github&utm_medium=link&utm_campaign=qwik-flow"><img src="https://avatars1.githubusercontent.com/u/1430726?v=4?s=100" width="100px;" alt="Shai Reznik"/><br /><sub><b>Shai Reznik</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-flow/commits?author=shairez" title="Code">💻</a> <a href="https://github.com/qwikifiers/qwik-flow/commits?author=shairez" title="Tests">⚠️</a> <a href="#infra-shairez" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/qwikifiers/qwik-flow/commits?author=shairez" title="Documentation">📖</a> <a href="#maintenance-shairez" title="Maintenance">🚧</a> <a href="https://github.com/qwikifiers/qwik-flow/pulls?q=is%3Apr+reviewed-by%3Ashairez" title="Reviewed Pull Requests">👀</a> <a href="#ideas-shairez" title="Ideas, Planning, & Feedback">🤔</a></td>
-    </tr>
-
-  </tbody>
-</table>
-
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 

apps/qwik-demo-app/.eslintrc.json → apps/demo-app/.eslintrc.json

@@ -7,7 +7,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": ["packages/qwik-demo-app/tsconfig.*?.json"],
+    "project": ["apps/demo-app/tsconfig.*?.json"],
     "ecmaVersion": 2021,
     "sourceType": "module",
     "ecmaFeatures": {
@@ -17,17 +17,9 @@
   "plugins": ["@typescript-eslint"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
     }
   ]
 }

apps/demo-app/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore",
+}

apps/demo-app/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "demo-app",
+  "scripts": {
+    "build": "qwik build",
+    "build.client": "vite build",
+    "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "dev": "vite --mode ssr",
+    "start": "vite --open --mode ssr",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8"
+  }
+}

apps/demo-app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/qwik-demo-app/project.json → apps/demo-app/project.json

@@ -1,17 +1,17 @@
 {
-  "name": "qwik-demo-app",
+  "name": "demo-app",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "sourceRoot": "packages/qwik-demo-app/src",
+  "sourceRoot": "apps/demo-app/src",
   "targets": {
     "build": {
       "executor": "qwik-nx:build",
       "options": {
         "runSequence": [
-          "qwik-demo-app:build.client",
-          "qwik-demo-app:build.ssr"
+          "demo-app:build.client",
+          "demo-app:build.ssr"
         ],
-        "outputPath": "dist/packages/qwik-demo-app"
+        "outputPath": "dist/apps/demo-app"
       },
       "configurations": {
         "preview": {}
@@ -20,15 +20,15 @@
     "build.client": {
       "executor": "@nrwl/vite:build",
       "options": {
-        "outputPath": "dist/packages/qwik-demo-app",
-        "configFile": "packages/qwik-demo-app/vite.config.ts"
+        "outputPath": "dist/apps/demo-app",
+        "configFile": "apps/demo-app/vite.config.ts"
       }
     },
     "build.ssr": {
       "executor": "@nrwl/vite:build",
       "defaultConfiguration": "preview",
       "options": {
-        "outputPath": "dist/packages/qwik-demo-app"
+        "outputPath": "dist/apps/demo-app"
       },
       "configurations": {
         "preview": {
@@ -40,36 +40,36 @@
     "preview": {
       "executor": "@nrwl/vite:preview-server",
       "options": {
-        "buildTarget": "qwik-demo-app:build"
+        "buildTarget": "demo-app:build"
       }
     },
     "test": {
       "executor": "@nrwl/vite:test",
-      "outputs": ["../../coverage/packages/qwik-demo-app"],
+      "outputs": ["../../coverage/apps/demo-app"],
       "options": {
         "passWithNoTests": true,
-        "reportsDirectory": "../../coverage/packages/qwik-demo-app"
+        "reportsDirectory": "../../coverage/apps/demo-app"
       }
     },
     "serve": {
       "executor": "@nrwl/vite:dev-server",
       "options": {
-        "buildTarget": "qwik-demo-app:build.client",
+        "buildTarget": "demo-app:build.client",
         "mode": "ssr"
       }
     },
     "serve.debug": {
       "executor": "nx:run-commands",
       "options": {
         "command": "node --inspect-brk ../../node_modules/vite/bin/vite.js --mode ssr --force",
-        "cwd": "packages/qwik-demo-app"
+        "cwd": "apps/demo-app"
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["packages/qwik-demo-app/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": ["apps/demo-app/**/*.{ts,tsx,js,jsx}"]
       }
     }
   },

apps/demo-app/src/components/header/header.tsx

@@ -0,0 +1,17 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { QwikLogo } from '../icons/qwik';
+import styles from './header.css?inline';
+
+export default component$(() => {
+  useStylesScoped$(styles);
+
+  return (
+    <header>
+      <div class="logo">
+        <a href="https://qwik.builder.io/" target="_blank">
+          <QwikLogo />
+        </a>
+      </div>
+    </header>
+  );
+});

apps/qwik-demo-app/src/components/icons/qwik.tsx → apps/demo-app/src/components/icons/qwik.tsx

@@ -1,11 +1,5 @@
 export const QwikLogo = () => (
-  <svg
-    width="100"
-    height="35"
-    viewBox="0 0 167 53"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="100" height="35" viewBox="0 0 167 53" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M81.9545 46.5859H75.5513V35.4045C73.4363 36.8579 71.0496 37.5749 68.4884 37.5749C65.0151 37.5749 62.4344 36.6253 60.8239 34.6487C59.2134 32.6915 58.3984 29.2034 58.3984 24.2231C58.3984 19.1266 59.3492 15.5997 61.2702 13.5456C63.23 11.4721 66.3734 10.4644 70.7004 10.4644C74.7946 10.4644 78.5201 11.0264 81.9545 12.131V46.5859ZM75.5513 16.278C74.096 15.8323 72.4661 15.6191 70.7004 15.6191C68.5272 15.6191 66.9749 16.1811 66.1017 17.3244C65.2479 18.4871 64.7823 20.6962 64.7823 23.9712C64.7823 27.0524 65.1897 29.1065 66.0435 30.2304C66.8973 31.335 68.3719 31.897 70.5452 31.897C73.3781 31.897 75.5513 30.7343 75.5513 29.2809V16.278Z"
       fill="black"

apps/demo-app/src/components/sub-header/index.tsx

@@ -0,0 +1,6 @@
+
+export const SubHeader = () => (
+  <h1 class="text-xl text-cyan-500">
+    Qwik-flow Demo <span class="lightning">⚡️</span>
+  </h1>
+)

apps/qwik-demo-app/src/entry.ssr.tsx → apps/demo-app/src/entry.ssr.tsx

@@ -1,15 +1,3 @@
-/**
- * WHAT IS THIS FILE?
- *
- * SSR entry point, in all cases the application is render outside the browser, this
- * entry point will be the common one.
- *
- * - Server (express, cloudflare...)
- * - npm run start
- * - npm run preview
- * - npm run build
- *
- */
 import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';

apps/qwik-demo-app/src/global.css → apps/demo-app/src/global.css

@@ -1,10 +1,6 @@
-/**
- * WHAT IS THIS FILE?
- *
- * Globally applied styles. No matter which components are in the page or matching route,
- * the styles in here will be applied to the Document, without any sort of CSS scoping.
- *
- */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --qwik-dark-blue: #006ce9;
@@ -102,25 +98,6 @@ footer a:hover {
   text-decoration: underline;
 }
 
-a.mindblow {
-  margin: 0 auto;
-  display: block;
-  background: var(--qwik-light-purple);
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: 0;
-  color: white;
-  text-decoration: none;
-  font-size: 20px;
-  width: fit-content;
-  border-bottom: 4px solid black;
-  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🤯</text></svg>")
-      16 0,
-    auto; /*!emojicursor.app*/
-}
-
-a.mindblow:hover {
-  border-bottom-width: 0px;
-  margin-bottom: 4px;
-  transform: translateY(4px);
+.btn {
+  @apply mx-2 my-2 bg-white transition duration-150 ease-in-out rounded text-gray-800 border border-gray-300 px-6 py-2 text-xs hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-gray-800;
 }

apps/qwik-demo-app/src/root.tsx → apps/demo-app/src/root.tsx

@@ -9,12 +9,6 @@ import { RouterHead } from './components/router-head/router-head';
 import globalStyles from './global.css?inline';
 
 export default component$(() => {
-  /**
-   * The root of a QwikCity site always start with the <QwikCityProvider> component,
-   * immediately followed by the document's <head> and <body>.
-   *
-   * Don't remove the `<head>` and `<body>` elements.
-   */
   useStyles$(globalStyles);
 
   return (