removes new component CLI
This commit is contained in:
hobbes7878
parent
70672e7a59
commit
cdd4b31a06
6 changed files with 0 additions and 199 deletions
|
|
@ -1,71 +0,0 @@
|
|||
const prompts = require('prompts');
|
||||
const changeCase = require('change-case');
|
||||
const path = require('path');
|
||||
const fs = require('fs-extra');
|
||||
const glob = require('tiny-glob');
|
||||
const { cyan, green, bold } = require('kleur');
|
||||
|
||||
const ROOT = path.resolve(__dirname, '../../');
|
||||
const LIB = path.join(ROOT, 'src/components');
|
||||
const TEMPLATE = path.join(__dirname, 'template');
|
||||
|
||||
const makeNewComponent = async () => {
|
||||
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 || !folder) return;
|
||||
|
||||
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)) {
|
||||
console.log('Oops! That component already exists. Try another name?');
|
||||
return;
|
||||
}
|
||||
|
||||
fs.mkdirSync(componentDir);
|
||||
|
||||
const files = await glob('**/*', { cwd: TEMPLATE, filesOnly: true });
|
||||
|
||||
for (const file of files) {
|
||||
const writePath = path.join(
|
||||
LIB,
|
||||
file.replace(/YourComponent/g, componentName)
|
||||
);
|
||||
|
||||
fs.ensureDirSync(path.dirname(writePath));
|
||||
|
||||
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(
|
||||
`${green('✔')} ${bold('Your component is ready at:')}\n📁 ${cyan(`src/components/${bold(componentName)}/${componentName}.svelte`)}`
|
||||
);
|
||||
};
|
||||
|
||||
makeNewComponent();
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script 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 { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
export const meta = {
|
||||
title: 'Components/ComponentFolder/YourComponent',
|
||||
component: YourComponent,
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
{#snippet children({ args })}
|
||||
<YourComponent {...args} />
|
||||
{/snippet}
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
width: 'normal',
|
||||
src: SharkImg,
|
||||
altText: "Duh dum! It's a shark!!",
|
||||
}}
|
||||
/>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
|
||||
<!-- @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! */
|
||||
|
||||
/**
|
||||
* A source for the image.
|
||||
* @required
|
||||
*/
|
||||
export let src: string;
|
||||
|
||||
/**
|
||||
* AltText for the image.
|
||||
* @required
|
||||
*/
|
||||
export let altText: string;
|
||||
|
||||
/** Height of the image. */
|
||||
export let height: number = 500;
|
||||
|
||||
// You can declare custom types to help users implement your component.
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
||||
/** Width of the component within the text well. */
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
||||
/** Add an ID to target with SCSS. */
|
||||
export let id: string = '';
|
||||
|
||||
/** Add a class to target with SCSS. */
|
||||
let cls: string = '';
|
||||
export { cls as class };
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
<Block {width} {id} class="photo {cls}">
|
||||
<div
|
||||
style:background-image={`url(${src})`}
|
||||
style:height={`${height}px`}
|
||||
></div>
|
||||
<p class="visually-hidden">{altText}</p>
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
div {
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.visually-hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
> **Welcome to your new component!** Use this template to build your component and customise its storybook.
|
||||
|
||||
- Build your component in `YourComponent/YourComponent.svelte`.
|
||||
- Write your component's storybook in `YourComponent/YourComponent.stories.svelte`.
|
||||
- Don't forget to add your component to `src/index.js`:
|
||||
|
||||
```javascript
|
||||
// ...
|
||||
export { default as YourComponent } from './components/YourComponent/YourComponent.svelte';
|
||||
```
|
||||
|
||||
- Commit your component to a new branch and push it to GitHub! 🏁
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { YourComponent } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
|
||||
<YourComponent />
|
||||
```
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 237 KiB |
|
|
@ -15,7 +15,6 @@
|
|||
},
|
||||
"scripts": {
|
||||
"start": "storybook dev -p 3000",
|
||||
"new": "node ./bin/newComponent/index.cjs",
|
||||
"lint": "eslint --fix",
|
||||
"format": "prettier . --write",
|
||||
"build": "rimraf ./dist && svelte-package -i ./src && publint",
|
||||
|
|
|
|||
Loading…
Reference in a new issue