@agility/plenum-ui 2.0.0-rc13 → 2.0.0-rc14

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributeAnchorTarget } from "react";
+import React, { HTMLAttributeAnchorTarget } from "react";
 import { UnifiedIconName, IDynamicIconProps } from "../../icons";
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
-export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     /** Is the button a Primary CTA, alternative or danger button? */
     actionType?: BTNActionType;
     /** How lg should the button be? - Defaults to 'base'. */

package/dist/types/stories/atoms/buttons/Capsule/Capsule.d.ts

@@ -3,7 +3,7 @@ import { BTNActionType } from "../Button/Button";
 /**
  * Capsule Style Button
  */
-export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ICapsuleProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     /** Is the button a Primary CTA, alternative or danger button? */
     actionType: BTNActionType;
     /** How lg should the button be? - Defaults to 'base'. */

package/dist/types/stories/atoms/icons/DynamicIcon.d.ts

@@ -11,7 +11,7 @@ export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
 export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;
     className?: ClassNameWithAutocomplete;
     outline?: boolean;

package/dist/types/stories/atoms/icons/TablerIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TablerIconName } from "./tablerIconNames";
 import { ClassNameWithAutocomplete } from "@/utils/types";
-export interface ITablerIconProps extends React.ComponentProps<"i"> {
+export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: TablerIconName;
     className?: ClassNameWithAutocomplete;
 }

package/dist/types/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
     display: string;
 }
 export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc13",
+	"version": "2.0.0-rc14",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,12 +17,14 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./dist/lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/tailwind.css",
 		"build:tsc": "yarn node build.js",
+		"Xbuild:rollup": "rollup -c",
 		"prepare": "yarn build",
-		"build": "npm run clean && npm-run-all -s \"build:*\" ",
+		"build": "yarn clean && npm-run-all -s \"build:*\" ",
 		"clean": "rimraf dist",
-		"create-component": "node scripts/create-component.js"
+		"create-component": "node scripts/create-component.js",
+		"buildsh": "./scripts/build.sh --external:react --external:react-dom"
 	},
 	"devDependencies": {
 		"@floating-ui/react": "^0.25.0",
@@ -30,6 +32,9 @@
 		"@headlessui/tailwindcss": "^0.1.2",
 		"@heroicons/react": "^1.0.5",
 		"@next/font": "^13.4.12",
+		"@rollup/plugin-commonjs": "^21.0.1",
+		"@rollup/plugin-node-resolve": "^13.1.3",
+		"@rollup/plugin-typescript": "^11.1.2",
 		"@storybook/addon-designs": "^7.0.1",
 		"@storybook/addon-essentials": "^7.1.1",
 		"@storybook/addon-interactions": "^7.1.1",
@@ -45,6 +50,7 @@
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/node": "18.11.18",
+		"acorn-jsx": "^5.3.2",
 		"autoprefixer": "^10.4.13",
 		"classnames": "^2.3.2",
 		"concurrently": "^7.6.0",
@@ -52,6 +58,7 @@
 		"eslint": "8.32.0",
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
+		"fast-glob": "^3.3.1",
 		"next": "13.1.6",
 		"npm-dts": "^1.3.12",
 		"npm-run-all": "^4.1.5",
@@ -59,8 +66,26 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
+		"rimraf": "^5.0.1",
+		"rollup": "3.28.0",
+		"rollup-plugin-dts": "^5.3.1",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-typescript2": "^0.35.0",
 		"storybook": "^7.1.1",
 		"tailwindcss": "^3.2.4",
 		"typescript": "^5.1.6"
+	},
+	"peerDependencies": {
+		"@floating-ui/react": "^0.25.0",
+		"@headlessui/react": "^1.7.10",
+		"@headlessui/tailwindcss": "^0.1.2",
+		"@heroicons/react": "^1.0.5",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"classnames": "^2.3.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-icons": "^4.10.1"
 	}
 }

package/rollup.config.mjs

@@ -0,0 +1,42 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+
+const config = [
+	{
+
+		input: 'stories/index.ts',
+
+		output: [
+			{
+				file: "lib/index.js",
+				format: 'cjs',
+				sourcemap: true
+			},
+			{
+				file: "lib/index.esm.js",
+				format: 'esm',
+				sourcemap: true
+			}
+		],
+		external: ["react", "react-dom"],
+		plugins: [
+			peerDepsExternal(),
+			resolve(),
+			commonjs(),
+			typescript({
+				tsconfig: "./tsconfig.lib.json",
+			})
+		]
+	},
+	{
+		input: "lib/esm/types/index.d.ts",
+		output: [{ file: "dist/index.d.ts", format: "esm" }],
+		plugins: [dts()],
+		external: ["react", "react-dom"],
+	},
+];
+
+export default config;

package/scripts/build.sh

@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+set -e
+
+SCRIPT_DIR=$(cd ${0%/*} && pwd -P)
+
+# Known variables
+SRC='./stories'
+DST='./dist'
+name="plenum-ui"
+input="./${SRC}/index.ts"
+
+# Find executables
+esbuild=$(yarn bin esbuild)
+tsc=$(yarn bin tsc)
+resolver="${SCRIPT_DIR}/resolve-files.js"
+rewriteImports="${SCRIPT_DIR}/rewrite-imports.js"
+
+# Setup shared options for esbuild
+sharedOptions=()
+sharedOptions+=("--platform=browser")
+sharedOptions+=("--target=es2019")
+
+# Generate actual builds
+# ESM
+resolverOptions=()
+resolverOptions+=($SRC)
+resolverOptions+=('/**/*.{ts,tsx}')
+resolverOptions+=('--ignore=.test.,__mocks__')
+INPUT_FILES=$($resolver ${resolverOptions[@]})
+
+NODE_ENV=production  $esbuild $INPUT_FILES --format=esm --outdir=$DST               --outbase=$SRC --minify --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} &
+NODE_ENV=production  $esbuild $input       --format=esm --outfile=$DST/$name.esm.js --outbase=$SRC --minify --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} &
+
+# Common JS
+NODE_ENV=production  $esbuild $input --format=cjs --outfile=$DST/$name.prod.cjs --minify --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="false" ${sharedOptions[@]} $@ &
+NODE_ENV=development $esbuild $input --format=cjs --outfile=$DST/$name.dev.cjs           --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER="false" --define:__DEV__="true" ${sharedOptions[@]} $@ &
+
+# Generate types
+tsc --emitDeclarationOnly --project tsconfig.lib.json --outDir $DST &
+
+# Copy build files over
+cp -rf ./build/ $DST
+
+# Wait for all the scripts to finish
+wait
+
+# Rewrite ESM imports 😤
+$rewriteImports "$DST" '/**/*.js'
+$rewriteImports "$DST" '/**/*.d.ts'
+
+# Remove test related files
+rm -rf `$resolver "$DST" '/**/*.{test,__mocks__,}.*'`
+rm -rf `$resolver "$DST" '/**/test-utils/*'`

package/scripts/resolve-files.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+let fastGlob = require('fast-glob')
+
+let parts = process.argv.slice(2)
+let [args, flags] = parts.reduce(
+	([args, flags], part) => {
+		if (part.startsWith('--')) {
+			flags[part.slice(2, part.indexOf('='))] = part.slice(part.indexOf('=') + 1)
+		} else {
+			args.push(part)
+		}
+		return [args, flags]
+	},
+	[[], {}]
+)
+
+flags.ignore = flags.ignore ?? ''
+flags.ignore = flags.ignore.split(',').filter(Boolean)
+
+console.log(
+	fastGlob
+		.sync(args.join(''))
+		.filter((file) => {
+			for (let ignore of flags.ignore) {
+				if (file.includes(ignore)) {
+					return false
+				}
+			}
+			return true
+		})
+		.join('\n')
+)

package/scripts/rewrite-imports.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+let fs = require('fs')
+let path = require('path')
+let fastGlob = require('fast-glob')
+
+console.time('Rewrote imports in')
+fastGlob.sync([process.argv.slice(2).join('')]).forEach((file) => {
+	file = path.resolve(process.cwd(), file)
+	let content = fs.readFileSync(file, 'utf8')
+	let result = content.replace(/(import|export)([^"']*?)(["'])\.(.*?)\3/g, (full, a, b, _, d) => {
+		// For idempotency reasons, if `.js` already exists, then we can skip this. This allows us to
+		// run this script over and over again without adding .js files every time.
+		if (d.endsWith('.js')) {
+			return full
+		}
+
+		return `${a}${b}'.${d}.js'`
+	})
+	if (result !== content) {
+		fs.writeFileSync(file, result, 'utf8')
+	}
+})
+console.timeEnd('Rewrote imports in')

package/stories/atoms/buttons/Button/Button.tsx

@@ -1,12 +1,13 @@
 import Loader from "stories/atoms/loaders/Loader"
 import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
+import React, { HTMLAttributeAnchorTarget } from "react"
 import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 
 // import Loader from "../loaders/loader/Loader"
 
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
-export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface IButtonProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType?: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -6,7 +6,8 @@ import { UnifiedIconName } from "../../icons/DynamicIcon"
 /**
  * Capsule Style Button
  */
-export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ICapsuleProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-// TODO: Fix heroicons support 
+// TODO: Fix heroicons support
 import * as SolidIcons from "@heroicons/react/solid"
 import * as OutlineIcons from "@heroicons/react/outline"
 import * as TablerIconComponents from "@tabler/icons-react"
@@ -31,7 +31,7 @@ export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconNam
 	return isTablerIcon(name) || isFAIcon(name)
 }
 
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean

package/stories/atoms/icons/TablerIcon.tsx

@@ -3,7 +3,7 @@ import { TablerIconName } from "./tablerIconNames"
 import * as TablerIcons from "@tabler/icons-react"
 import { ClassNameWithAutocomplete } from "@/utils/types"
 
-export interface ITablerIconProps extends React.ComponentProps<"i"> {
+export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName
 	className?: ClassNameWithAutocomplete
 }

package/stories/atoms/loaders/Loader.tsx

@@ -1,15 +1,21 @@
 import React from "react"
-import classNames, { default as cn } from "classnames"
+import { default as cn } from "classnames"
 
 export interface ILoaderProps {
 	className?: string
 }
 const Loader: React.FC<ILoaderProps> = ({ className }) => {
-  const outerLoaderStyles = cn(
-    "rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
-    className ? className : "border-purple-700 border-r-gray-200"
-  )
-  return <i className={outerLoaderStyles} role="status" />
+	return (
+		<>
+			<i
+				className={cn(
+					"rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
+					className ? className : "border-purple-700 border-r-gray-200"
+				)}
+				role="status"
+			/>
+		</>
+	)
 }
 
 export default Loader

package/stories/molecules/inputs/textArea/TextArea.tsx

@@ -51,29 +51,16 @@ const Textarea: React.FC<ITextareaProps> = ({
 	rows = 12,
 	cols = 48,
 	onChange,
-	value: externalValue,
+	value,
 	placeholder,
 	className,
 	ref,
 	...rest
 }) => {
 	const uniqueID = useId()
-	const [value, setValue] = useState<string | undefined>(externalValue || defaultValue || "")
-	const handleOnchange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-		const targetValue = e.currentTarget.value
-		typeof onChange === "function" && onChange(targetValue)
-		setValue(targetValue)
-	}
 
 	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
 
-	useEffect(() => {
-		//if the external value is updated by the parent component, reset the value in here...
-		if (externalValue !== undefined && externalValue !== null) {
-			setValue(externalValue)
-		}
-	}, [externalValue])
-
 	if (!id) id = `ta-${uniqueID}`
 
 	if (!label) {
@@ -81,7 +68,12 @@ const Textarea: React.FC<ITextareaProps> = ({
 			<textarea
 				ref={ref}
 				maxLength={maxLength}
-				onChange={handleOnchange}
+				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+					const targetValue = e.target.value
+					if (onChange) {
+						onChange(targetValue)
+					}
+				}}
 				rows={rows}
 				name={name}
 				id={id}
@@ -120,7 +112,12 @@ const Textarea: React.FC<ITextareaProps> = ({
 				<textarea
 					ref={ref}
 					maxLength={maxLength}
-					onChange={handleOnchange}
+					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const targetValue = e.target.value
+						if (onChange) {
+							onChange(targetValue)
+						}
+					}}
 					rows={rows}
 					name={name}
 					id={id}

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
 
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
 	display: string
 }
 
@@ -22,42 +22,44 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
 
 	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			<InputField
-				id={id}
-				isError={isError}
-				value={value}
-				handleChange={(v) => {
-					setHasValue(!!v)
-					if (handleChange) handleChange(v)
-				}}
-				{...input}
-			/>
-			<label
-				className={cn(
-					"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
-					hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
-					"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
-					"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+		<>
+			<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+				<InputField
+					id={id}
+					isError={isError}
+					value={value}
+					handleChange={(v) => {
+						setHasValue(!!v)
+						if (handleChange) handleChange(v)
+					}}
+					{...input}
+				/>
+				<label
+					className={cn(
+						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+						"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
 
-					isError && "!text-red-600"
-				)}
-				htmlFor={id}
-			>
-				{label.display}
-				{required && <span className="text-red-600 ml-1">*</span>}
-			</label>
-
-			<div className="flex flex-row space-x-3">
-				<div className="grow transition-all">
-					{message && (
-						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
-							{message}
-						</span>
+						isError && "!text-red-600"
 					)}
+					htmlFor={id}
+				>
+					{label.display}
+					{required && <span className="text-red-600 ml-1">*</span>}
+				</label>
+
+				<div className="flex flex-row space-x-3">
+					<div className="grow transition-all">
+						{message && (
+							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+								{message}
+							</span>
+						)}
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	)
 }
 

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx

@@ -13,7 +13,7 @@ export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
 }
 
 const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAnimatedLabelTextAreaProps) => {
-	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
+	const { id, containerStyles, message, required, isError, label, value, handleChange, onChange, ...input } = props
 
 	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
 
@@ -23,11 +23,11 @@ const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAn
 				id={id}
 				isError={isError}
 				value={value}
+				{...input}
 				onChange={(v) => {
 					setHasValue(!!v)
 					if (handleChange) handleChange(v)
 				}}
-				{...input}
 				label={undefined}
 			/>
 			<label
@@ -41,7 +41,7 @@ const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAn
 				)}
 				htmlFor={id}
 			>
-				{label}
+				{label} {`${hasValue}`}
 				{required && <span className="text-red-600 ml-1">*</span>}
 			</label>
 

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -215,7 +215,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 																		setActiveItem(key)
 																		onClick && onClick()
 																	},
-																	key,
+																	key: key,
 																	className: cn(itemClass, "w-full"),
 																	...rest
 																}}

package/stories/organisms/index.ts

@@ -17,4 +17,12 @@ export type {
 	IFormInputWithAddonsProps,
 	ITextInputSelectProps
 }
-export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect }
+export {
+	AnimatedLabelInput,
+	AnimatedLabelTextArea,
+	ButtonDropdown,
+	Dropdown,
+	EmptySectionPlaceholder,
+	FormInputWithAddons,
+	TextInputSelect
+}

package/tsconfig.lib.json

@@ -3,17 +3,24 @@
 		"declaration": true,
 		"declarationDir": "./dist/types",
 		"outDir": "./dist",
-		"module": "esnext",
+		"module": "ESNext",
 		"rootDir": "./",
-		"target": "es2021",
+		"target": "ESNext",
 		"esModuleInterop": true,
 		"moduleResolution": "node",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./*"]
+			"@/*": [
+				"./*"
+			]
 		},
 		"jsx": "react-jsx"
 	},
-	"include": ["stories/**/*.ts", "utils/**/*.ts"],
-	"exclude": ["node_modules"]
-}
+	"include": [
+		"stories/**/*.ts",
+		"utils/**/*.ts"
+	],
+	"exclude": [
+		"node_modules"
+	]
+}

package/stories/layouts/CardLayout/CardLayout.stories.tsx

@@ -1,18 +0,0 @@
-
-import type { Meta, StoryObj } from "@storybook/react"
-import CardLayout, { ICardLayoutProps } from "./CardLayout"
-
-const meta: Meta<typeof CardLayout> = {
-  title: "Design System/layouts/CardLayout",
-  component: CardLayout,
-  tags: ["autodocs"],
-  argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof CardLayout>
-export const DefaultCardLayoutStory: Story = {
-	args: {
-		
-	}
-}

package/stories/layouts/CardLayout/CardLayout.tsx

@@ -1,22 +0,0 @@
-
-import React from  "react"
-import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
-
-export interface ICardLayoutProps {}
-
-const CardLayout: React.FC<ICardLayoutProps> = ({}) => {
-  return (
-   <EmptySectionPlaceholder
-			{...{
-				icon: {
-					icon: "IconCode"
-				},
-				mutedText: "Coming Soon! 🚧",
-				primaryMessage: "We're working on this component. Be sure to check back soon!",
-				actions: []
-			}}
-		/>
-  )
-};
-
-export default CardLayout;

package/stories/layouts/CardLayout/index.tsx

@@ -1,3 +0,0 @@
-
-export { default } from './CardLayout';
-export * from './CardLayout';