@spark-ui/cli-utils 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2023-02-14)
+
+### Features
+
+- **cli-utils:** add cli command to generate new components ([4e79fa1](https://github.com/adevinta/spark/commit/4e79fa19c2e84f98ac8fd7f9b75ecfaab2ea8227))
+- **cli-utils:** fix typo ([afcaf10](https://github.com/adevinta/spark/commit/afcaf1088284a7c87e7fdc8d36331ea4ab7571c8))
+- **cli-utils:** trigger script from bin alias ([c81f054](https://github.com/adevinta/spark/commit/c81f054ef2fb004203da3e5b77c02e4a83e2c191))
+- **cli-utils:** update code and files structure ([be32555](https://github.com/adevinta/spark/commit/be325553849c51667ca1dad24042b8305775212f))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bin/spark-generate.mjs

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+import { fileURLToPath } from 'node:url'
+import { program } from 'commander'
+import glob from 'glob'
+import { pascalCase } from 'pascal-case'
+import { log, showError, writeFile } from '../utils.js'
+
+const BASE_DIR = process.cwd()
+const WORDS_ONLY_REGEX = /^[A-Za-z-]*$/
+
+program
+  .option('-D, --description <description>', 'Description of this component')
+  .on('--help', () => {
+    console.log('Examples:')
+    console.log('  $ spark generate button')
+    console.log('  $ spark generate button -D "My button description"')
+    console.log('  $ spark generate button --description "My button description"')
+    console.log('  $ spark generate --help')
+  })
+  .parse(process.argv)
+
+const [component] = program.args
+const { description = '' } = program.opts()
+
+if (!component) {
+  showError('Argument "component" must be defined!')
+}
+if (!WORDS_ONLY_REGEX.test(component)) {
+  showError('"component" name must contain letters and dash symbols only')
+}
+
+const componentDir = `/packages/components/${component}/`
+const componentPath = `${BASE_DIR}${componentDir}`
+const templatesPattern = fileURLToPath(new URL('../templates/**/*.js', import.meta.url))
+
+glob(templatesPattern, async (err, res) => {
+  if (err) showError(err)
+  if (res) {
+    const templateContents = res.map(templatePath =>
+      import(templatePath).then(module => ({
+        path: templatePath
+          .replace(/(.*)\/templates\//, componentPath)
+          .replace('Component', pascalCase(component))
+          .replaceAll(/\[|\]|\.js$/g, ''),
+        content: module.default({ component, description }),
+      }))
+    )
+
+    const filesToWrite = await Promise.all(templateContents)
+
+    Promise.all(filesToWrite.map(writeFile)).then(() => {
+      log('All component files have been properly written!')
+    })
+  }
+})

package/bin/spark.mjs

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import { program } from 'commander'
+import { createRequire } from 'module'
+
+const require = createRequire(import.meta.url)
+const { version } = require('../package.json')
+
+program.version(version, '--version')
+
+program.command('generate <component>', 'Generate a component scaffolding').alias('g')
+
+program.parse(process.argv)

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@spark-ui/cli-utils",
+  "version": "1.1.0",
+  "description": "Spark CLI utils",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "spark": "./bin/spark.mjs",
+    "spark-generate": "./bin/spark-generate.mjs"
+  },
+  "type": "module",
+  "devDependencies": {
+    "chalk": "5.2.0",
+    "commander": "10.0.0",
+    "fs-extra": "11.1.0",
+    "glob": "8.1.0",
+    "pascal-case": "3.1.2"
+  },
+  "gitHead": "18ed2818aad6616ab8abea5a94c7b165995e8b01"
+}

package/templates/[.npmignore].js

@@ -0,0 +1,3 @@
+export default () => `src
+**/*.stories.*
+`

package/templates/[package.json].js

@@ -0,0 +1,15 @@
+export default ({ component, description }) => `{
+  "name": "@spark-ui/${component}",
+  "version": "1.0.0",
+  "description": "${description}",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  }
+}
+`

package/templates/[tsconfig.json].js

@@ -0,0 +1,8 @@
+export default () => `{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declarationDir": "./dist",
+    "rootDir": "./src"
+  }
+}
+`

package/templates/[vite.config.ts].js

@@ -0,0 +1,7 @@
+export default () => `import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(name)
+`

package/templates/src/[Component.stories.mdx].js

@@ -0,0 +1,40 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ component, description }) => {
+  const componentName = pascalCase(component)
+
+  return `import { ArgsTable, Meta, Story } from '@storybook/addon-docs'
+import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
+import { StoryHeading } from '@docs/helpers/StoryHeading'
+
+import { ${componentName} } from '.'
+
+import * as stories from './${componentName}.stories'
+
+<Meta title="Components/Misc/${componentName}" component={${componentName}} />
+
+# ${componentName}
+
+${description}
+
+<StoryHeading label="Install" />
+
+\`\`\`
+npm install @spark-ui/${component}
+\`\`\`
+
+<StoryHeading label="Import" />
+
+\`\`\`
+import { ${componentName} } from "@spark-ui/${component}"
+\`\`\`
+
+<StoryHeading label="Props" />
+
+<ArgsTable of={${componentName}} />
+
+<StoryHeading label="Variants" />
+
+<Story name="default" story={stories.Default} />
+`
+}

package/templates/src/[Component.stories.tsx].js

@@ -0,0 +1,16 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ component, description }) => {
+  const componentName = pascalCase(component)
+
+  return `import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
+
+import { ${componentName} } from '.'
+
+export const Default = () => (
+  <ReactLiveBlock scope={{ ${componentName} }}>
+    <${componentName}>Hello World!</${componentName}>
+  </ReactLiveBlock>
+)
+`
+}

package/templates/src/[Component.test.tsx].js

@@ -0,0 +1,34 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ component }) => {
+  const componentName = pascalCase(component)
+
+  return `import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { ${componentName} } from './${componentName}'
+
+describe('${componentName}', () => {
+  it('should render', () => {
+    render(<${componentName}>Hello World!</${componentName}>)
+
+    expect(screen.getByText('Hello World!')).toBeInTheDocument()
+  })
+
+  it('should trigger click event', async () => {
+    const user = userEvent.setup()
+    const clickEvent = vi.fn()
+
+    // Given
+    render(<div onClick={clickEvent}>Hello World!</div>)
+
+    // When
+    await user.click(screen.getByText('Hello World!'))
+
+    // Then
+    expect(clickEvent).toHaveBeenCalledTimes(1)
+  })
+})
+`
+}

package/templates/src/[Component.tsx].js

@@ -0,0 +1,14 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ component }) => {
+  const componentName = pascalCase(component)
+
+  return `import { ComponentPropsWithoutRef, PropsWithChildren } from 'react'
+
+export type ${componentName}Props = ComponentPropsWithoutRef<'div'>
+
+export function ${componentName}(props: PropsWithChildren<${componentName}Props>) {
+  return <div {...props} />
+}
+`
+}

package/templates/src/[Component.variants.tsx].js

@@ -0,0 +1,8 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ component }) => {
+  const componentName = pascalCase(component)
+
+  return `
+`
+}

package/templates/src/[index.tsx].js

@@ -0,0 +1,8 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ component }) => {
+  const componentName = pascalCase(component)
+
+  return `export { ${componentName} } from './${componentName}'
+`
+}

package/utils.js

@@ -0,0 +1,17 @@
+import fs from 'node:fs'
+
+import chalk from 'chalk'
+import fse from 'fs-extra'
+
+export const log = msg => console.log(chalk.gray(msg)) // eslint-disable-line no-console
+
+export const showError = (msg, foreignProgram) => {
+  console.error(chalk.red(`✖ Error: ${msg}\n`))
+  process.exit(1)
+}
+
+export const writeFile = ({ path, content }) =>
+  fse
+    .outputFile(path, content)
+    .then(() => log(`Created ${path}`))
+    .catch(() => showError(`Failed creating ${path}`))