feat(component): basic card

package.json

@@ -121,8 +121,10 @@
     "@headlessui/react": "^1.7.17",
     "@nrwl/react": "^17.1.2",
     "@tailwindcss/forms": "^0.5.6",
+    "clsx": "^2.0.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^2.0.0"
   },
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]",

packages/card/src/lib/card.stories.tsx

@@ -1,24 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Card } from './card';
-
+import { Card, CardProps } from './card';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
 const meta: Meta<typeof Card> = {
   component: Card,
-  title: 'Card',
+  title: 'Components/Card',
 };
 export default meta;
 type Story = StoryObj<typeof Card>;
 
-export const Primary = {
-  args: {},
-};
-
-export const Heading: Story = {
-  args: {},
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByText(/Welcome to Card!/gi)).toBeTruthy();
-  },
-};
+export const Basic = (args: CardProps) => {
+  return (
+    <>
+      <div className="grid grid-cols-3">
+        <Card
+          cardTitle="Daily Visits"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, distinctio necessitatibus deserunt debitis doloremque molestias consequuntur eos, quasi nobis impedit et illo eveniet natus ipsam excepturi, cupiditate a ipsum minus.
+        </Card>
+      </div>
+    </>
+  )
+}

packages/card/src/lib/card.tsx

@@ -1,10 +1,30 @@
-/* eslint-disable-next-line */
-export interface CardProps {}
+import { ReactNode } from "react";
 
-export function Card(props: CardProps) {
+/* eslint-disable-next-line */
+export interface CardProps {
+  cardTitle?: string | ReactNode
+  cardOptions?: string | ReactNode 
+  children?: string | ReactNode
+  className?: string
+}
+import { cn } from '@bootwind/common'
+export function Card({
+  cardOptions,
+  cardTitle,
+  children,
+  className
+}: CardProps) {
   return (
-    <div className="p-5 shadow-lg rounded-lg">
-      <h1>Welcome to Card!</h1>
+    <div className={cn("shadow-xl rounded-[20px]", className)}>
+      <div className="card-header  p-5 flex justify-between">
+        <h4 className="card-title font-normal text-slate-500 leading-normal">{ cardTitle }</h4>
+        <div className="card-options">
+          { cardOptions }
+        </div>
+      </div>
+      <div className="card-body p-5 pt-0">
+        { children }
+      </div>
     </div>
   );
 }

packages/card/tsconfig.lib.json

@@ -18,10 +18,6 @@
     "src/**/*.test.js",
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js",
-    "**/*.stories.jsx",
-    "**/*.stories.tsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/common/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/common/README.md

@@ -0,0 +1,3 @@
+# common
+
+This library was generated with [Nx](https://nx.dev).

packages/common/project.json

@@ -0,0 +1,16 @@
+{
+  "name": "@bootwind/common",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/common/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/common/**/*.ts"]
+      }
+    }
+  },
+  "tags": []
+}

packages/common/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/cn'

packages/common/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

packages/common/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

packages/common/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

packages/ui/.storybook/preview.ts

@@ -5,6 +5,15 @@ import type { Preview } from '@storybook/react';
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: {
+      default: 'bootwind',
+      values: [
+        {
+          name: 'bootwind',
+          value: 'white',
+        }
+      ]
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

tsconfig.base.json

@@ -8,7 +8,8 @@
     "skipLibCheck": true,
     "paths": {
       "@bootwind/card": ["./packages/card/src/index.ts"],
-      "@bootwind/ui": ["./packages/ui/src/index.ts"]
+      "@bootwind/ui": ["./packages/ui/src/index.ts"],
+      "@bootwind/common": ["packages/common/src/index.ts"]
     }
   }
 }

vite.config.ts

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@bootwind/common": path.resolve(__dirname, "./packages/common/src/index.ts")
+    }
+  }
 })