fix new component gen

bin/newComponent/index.cjs

@@ -1,5 +1,5 @@
 const prompts = require('prompts');
-const { pascalCase } = require('change-case');
+const changeCase = require('change-case');
 const path = require('path');
 const fs = require('fs-extra');
 const glob = require('tiny-glob');
@@ -10,15 +10,23 @@ const LIB = path.join(ROOT, 'src/components');
 const TEMPLATE = path.join(__dirname, 'template');
 
 const makeNewComponent = async () => {
-  const { name } = await prompts({
+  const { name, folder } = await prompts([{
     type: 'text',
     name: 'name',
     message: 'What should we call your new component, e.g., ImagePack?',
-  });
+  }, {
+    type: 'text',
+    name: 'folder',
+    message: 'What folder should we put it in, e.g., Graphics?',
+    initial: 'Graphics',
+  }]);
 
-  if (!name) return;
+  if (!name || !folder) return;
 
-  const componentName = pascalCase(name);
+  const componentName = changeCase.pascalCase(name);
+  const componentNameSlug = componentName.toLowerCase();
+  const componentFolder = folder;
+  const componentFolderSlug = folder.toLowerCase().replace(' ', '-');
   const componentDir = path.join(LIB, componentName);
 
   if (fs.existsSync(componentDir)) {
@@ -31,14 +39,25 @@ const makeNewComponent = async () => {
   const files = await glob('**/*', { cwd: TEMPLATE, filesOnly: true });
 
   for (const file of files) {
-    const content = fs.readFileSync(path.join(TEMPLATE, file), 'utf8');
-    const writeContent = content.replace(/YourComponent/g, componentName);
     const writePath = path.join(
       LIB,
       file.replace(/YourComponent/g, componentName)
     );
+    
     fs.ensureDirSync(path.dirname(writePath));
-    fs.writeFileSync(writePath, writeContent);
+
+    if (path.extname(file) === '.jpg') {
+      fs.copyFileSync(path.join(TEMPLATE, file), writePath);
+      continue;
+    } else {
+      const content = fs.readFileSync(path.join(TEMPLATE, file), 'utf8');
+      const writeContent = content
+        .replace(/YourComponentSlug/g, componentNameSlug)
+        .replace(/YourComponent/g, componentName)
+        .replace(/ComponentFolderSlug/g, componentFolderSlug)
+        .replace(/ComponentFolder/g, componentFolder);
+      fs.writeFileSync(writePath, writeContent);
+    }
   }
 
   console.log(

bin/newComponent/template/YourComponent/YourComponent.stories.svelte

@@ -1,19 +1,14 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
+<script context="module" lang="ts">
+  import YourComponent from './YourComponent.svelte';
   // Don't lose the "?raw" in markdown imports!
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
 
-  import YourComponent from './YourComponent.svelte';
-
   import { withComponentDocs } from '$docs/utils/withParams.js';
 
-  // 🖼️ You can import images you need in stories directly in code!
-  // @ts-ignore img
-  import SharkImg from './stories/shark.jpg';
-
-  const metaProps = {
+  export const meta = {
+    title: 'Components/ComponentFolder/YourComponent',
+    component: YourComponent,
     ...withComponentDocs(componentDocs),
     // https://storybook.js.org/docs/svelte/essentials/controls
     argTypes: {
@@ -25,11 +20,13 @@
   };
 </script>
 
-<Meta
-  title="Components/YourComponent"
-  component="{YourComponent}"
-  {...metaProps}
-/>
+<script lang="ts">
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+
+  // 🖼️ You can import images you need in stories directly in code!
+  // @ts-ignore img
+  import SharkImg from './stories/shark.jpg';
+</script>
 
 <Template let:args>
   <YourComponent {...args} />

bin/newComponent/template/YourComponent/YourComponent.svelte

@@ -1,4 +1,4 @@
-<!-- @component `YourComponent` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-YourComponent--default) -->
+<!-- @component `YourComponent` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ComponentFolderSlug-YourComponentSlug--docs) -->
 <script lang="ts">
   /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
 
@@ -27,12 +27,13 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  export let cls: string = '';
+  let cls: string = '';
+  export { cls as class };
 
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block {width} {id} cls="photo {cls}">
+<Block {width} {id} class="photo {cls}">
   <div
     style:background-image="{`url(${src})`}"
     style:height="{`${height}px`}"

src/docs/contributing/quickstart.mdx

@@ -28,7 +28,7 @@ This library includes a basic template for creating and documenting your compone
 Just run...
 
 ```
-yarn new
+pnpm new
 ```
 
 ... which will create a new directory for your component and copy over an example Svelte component and story page.
@@ -36,7 +36,7 @@ yarn new
 To start developing your component, start the dev server with...
 
 ```
-yarn start
+pnpm start
 ```
 
 When you're ready to share your chart, commit your branch to GitHub, make a PR and we'll get it published!

src/docs/intro.mdx

@@ -22,7 +22,7 @@ Svelte components, SCSS and more you can use in graphics projects.
 1. Install
 
 ```bash
-yarn add @reuters-graphics/graphics-components
+pnpm i @reuters-graphics/graphics-components
 ```
 
 2. Checkout the [guides](?path=/docs/guides-using-these-docs--page), if you haven't, or dive straight into the docs to start using components.

tsconfig.json

@@ -38,5 +38,5 @@
     "*.cjs",
     "src/docs/**/*.css"
   ],
-  "exclude": ["dist", "eslint.config.js"]
+  "exclude": ["dist", "eslint.config.js", "bin/newComponent/template/**/*"]
 }