2.0.1

.ddev/config.yaml

@@ -24,7 +24,7 @@ hooks:
     - exec: pm2 start --name frontend node_modules/.bin/next -- dev
       service: web
       # pm2 does not live in the node path, so have to call binary directly
-    - exec: pm2 start --name storybook node_modules/.bin/storybook -- dev -p 6006
+    - exec: pm2 start --name storybook node_modules/.bin/storybook -- dev --no-open -p 6006
       service: web
 
 # Key features of ddev's config.yaml:

.eslintrc.json

@@ -31,7 +31,7 @@
   },
   "overrides": [
     {
-      "files": ["**/*.stories.tsx"],
+      "files": ["**/*.stories.tsx", "**/*Args.tsx"],
       "rules": {
         "@next/next/no-img-element": "off",
         "@typescript-eslint/no-unsafe-assignment": "off",

.stylelintignore

@@ -0,0 +1,3 @@
+# Build files
+.next/
+storybook-static/

README.project.md

@@ -171,6 +171,11 @@ Runs `tsc --noEmit`, which will compile the TypeScript code without emitting fil
 * Starting in Next.js v9.4, TypeScript errors do not show up in your browser when running the dev server (i.e. `npm run dev`). However, TS errors will prevent `next build` (i.e. `npm run build`) from running successfully. You can run `npm run lint` and `npm run tsc` to check for issues, which will give you lint and TS errors that will most likely cause your builds to fail. Note also that if you have [`husky`](https://typicode.github.io/husky/#/) installed, these will automatically run when you attempt to commit to a branch.
 * The current favicon implementation will probably not display correctly locally in Chrome (v94), but does display correctly in Firefox and Safari. Note that the favicon _does_ display correctly once deployed. Not sure why.
 
+### Vendor Cascade Layer
+A cascade layer ([https://developer.mozilla.org/en-US/docs/Web/CSS/@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)) for thrid-party css is available called vendor.
+
+CSS can be added to this layer using @import. Ex: `@import "@thirdparty/dist/css/thirdparty-core.min.css" layer(vendor);`
+This can be added within the files for component and layout styles using the third-party package.
 
 ## Helpful tips
 

lib/plop-templates/Data.hbs

@@ -1 +1,5 @@
----
+import { {{> propsName }} } from './{{ componentName }}';
+
+const {{> argsName }} = {} satisfies {{> propsName }};
+
+export default {{> argsName }};

lib/plop-templates/Story.hbs

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import {{> componentAlias }} from './{{ componentName }}';
-import data from './{{ kebabCase componentName }}.yml';
+import {{> argsName }} from './{{> argsName }}';
 
 const meta: Meta<typeof {{> componentAlias }}> = {
   title: '{{ titleCase (cascadeLayer componentFolder) }}/{{ componentTitle }}',
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof {{> componentAlias }}>;
 
 const Default: Story = {
   args: {
-    ...data,
+    ...{{> argsName }},
   },
 };
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.