Merge pull request #200 from reuters-graphics/docs-review

Removes Google docs-specific examples and utils
reuters-graphics · Nov 21, 2024 · e5cf216 · e5cf216
2 parents 0f2efef + dd48a37
commit e5cf216
Show file tree

Hide file tree

Showing 59 changed files with 349 additions and 829 deletions.
diff --git a/.changeset/strong-plants-worry.md b/.changeset/strong-plants-worry.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': major
+---
+
+Removes Google Docs-based utils in favour of ArchieML/RNGS.io examples.
diff --git a/.storybook/preview.scss b/.storybook/preview.scss
@@ -34,7 +34,7 @@ div.sbdocs-content {
   }
 
   .docblock-source {
-    margin: 1rem 0;
+    margin: 1rem 0 2.5rem;
   }
 
   & > div > :where(p, ul, ol),
@@ -130,10 +130,6 @@ div.sbdocs-content {
   }
 }
 
-.sbdocs.sbdocs-wrapper {
-  padding-top: 1rem;
-}
-
 div.reset-article {
   width: calc(100% + 30px);
   margin-left: -15px;

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -18,7 +18,6 @@ const preview: Preview = {
   decorators: [() => Wrapper],
   tags: ['autodocs'],
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     viewMode: 'docs',
     previewTabs: { 'storybook/docs/panel': { index: -1 } },
     controls: {
@@ -41,7 +40,7 @@ const preview: Preview = {
           [
             'Using these docs',
             'Using with the Graphics Kit',
-            'Using with Google docs',
+            'Using with ArchieML docs',
             'Customising components with SCSS',
             '*',
             'Getting help',

diff --git a/bin/newComponent/index.cjs b/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,26 @@ const LIB = path.join(ROOT, 'src/components');
 const TEMPLATE = path.join(__dirname, 'template');
 
 const makeNewComponent = async () => {
-  const { name } = await prompts({
-    type: 'text',
-    name: 'name',
-    message: 'What should we call your new component, e.g., ImagePack?',
-  });
+  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 +42,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(

diff --git a/bin/newComponent/template/YourComponent/YourComponent.stories.svelte b/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} />

diff --git a/bin/newComponent/template/YourComponent/YourComponent.svelte b/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`}"

diff --git a/eslint.config.js b/eslint.config.js
@@ -15,6 +15,7 @@ export default [
       'bin/css-to-js/',
       'bin/newComponent/',
       '.svelte-kit/',
+      'src/docs/guides/archieml.mdx',
     ],
   },
   ...svelte,

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "svelte": ">=4"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.9",
+    "@changesets/cli": "^2.27.10",
     "@chromatic-com/storybook": "^1.7.0",
     "@reuters-graphics/yaks-eslint": "^0.0.6",
     "@reuters-graphics/yaks-prettier": "^0.0.4",
@@ -69,7 +69,7 @@
     "@types/gtag.js": "^0.0.12",
     "@types/lodash-es": "^4.17.12",
     "@types/mdx": "^2.0.5",
-    "@types/node": "^22.4.2",
+    "@types/node": "^22.9.1",
     "@types/prompts": "^2.4.9",
     "@types/proper-url-join": "^2.1.1",
     "@types/pym.js": "^1.3.2",
@@ -80,9 +80,9 @@
     "css": "^3.0.0",
     "css-color-converter": "^2.0.0",
     "deep-object-diff": "^1.1.9",
-    "eslint": "^9.9.0",
+    "eslint": "9.14.0",
     "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.37.2",
     "fs-extra": "^11.1.1",
     "kleur": "^4.1.5",
     "knip": "^5.27.2",
@@ -101,7 +101,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.0",
-    "sass": "^1.77.8",
+    "sass": "^1.81.0",
     "storybook": "^8.4.4",
     "svelte": "^4.2.18",
     "svelte-loader": "^3.2.3",