script-kit

pixesl-to-rem.js

// Name: Pixels to Rem
/*
# Pixels to rems converter

- This script converts pixels to rems and copies the result to the clipboard
- It uses the entered base/root font size to calculate the conversion
- The default root font size is 16px

## Author: @shawnsandy 

### Install this script
- make sure you have the latest version of Script Kit
- [Click here to install pixels to rem](https://scriptkit.com/api/new?name=pixesl-to-rem&url=https://gist.githubusercontent.com/shawn-sandy/501cfa165f2bac06747e74bfa1e00cc4/raw/efdc8b810fccd3c6178585ad99ce566d6d938cdd/pixesl-to-rem.js)

*/

import "@johnlindquist/kit"

const pixels = await arg("Enter pixels unit to convert to rems:", md("- Example 32 will be converted to 2rem and copied to your clipboard"))




const rootSize = await arg("Enter the base/root font size in pixels (default is 16):", md("- Optional -- defaults 16 if not value is entered"))

// Convert pixels to rem
const pixelToRem = (pixels, rootSize) => {
  const rootFontSize = rootSize ? parseFloat(rootSize) : parseFloat(16);
  return pixels / rootFontSize;
};

// Call the conversion function
const remValue = pixelToRem(parseFloat(pixels), rootSize);

// Copy the result to clipboard

if (pixels === '') { 
   say(`Error: Enter a value to convert to rems`);
   await div(md(`Error: Enter a value to convert to rems`))
} else {
    say(`${pixels} pixels is equivalent to ${remValue} rem.`);
   clipboard.writeText(`${remValue.toString()}rem`);  
  
//   display remValue;
await div(md(`
## Your request has been converted and copied to your clipboard

${pixels}px is equivalent to ${remValue}rems.

Enjoy!
`));
}

react-component-template.js

/*
# React component template

- Opens the built-in editor where you can tab through template variables for lightning-fast text generation
- Submitting (`cmd+s`) the template will paste the current text into the window behind Kit.app

### Install this script
- make sure you have the latest version of Script Kit
- [Click here to install pixels to rem](https://scriptkit.com/api/new?name=pixesl-to-rem&url=https://gist.githubusercontent.com/shawn-sandy/501cfa165f2bac06747e74bfa1e00cc4/raw/efdc8b810fccd3c6178585ad99ce566d6d938cdd/pixesl-to-rem.js)
*/

// Name: react component template
// Description: Generates a react template starter w/prop-types
// Author: Shawn Sandy
// Twitter: @shawnsandy

import "@johnlindquist/kit"

let result = await template(`
import React from 'react'

export type \${1:COMPONENT_NAME}Props = {
    children: React.ReactNode
}

const defaultStyles = {}

const \${1:COMPONENT_NAME} = ({children, ...props}: \${1:COMPONENT_NAME}Props) => {
    return (
        <\${2:div} {...props}>
            {children}
        </\${2:div}>
    )
}

export default \${1:COMPONENT_NAME}
\${1:COMPONENT_NAME}.displayName = '\${1:COMPONENT_NAME}'
\${1:COMPONENT_NAME}.styles = defaultStyles
`)

setSelectedText(result)

react-storybook-template.js

/**
 # Generates a react storybook starter template

 - Opens the built-in editor where you can tab through template variables for lightning-fast text generation
- Submitting (`cmd+s`) the template will paste the current text into the window behind Kit.app
- Enjoy!
### Install this script
- make sure you have the latest version of Script Kit
- [Click here to install React storybook template](https://scriptkit.com/api/new?name=react-storybook-template&url=https://gist.githubusercontent.com/shawn-sandy/80ce01ad867a59962fb7af4cd69bef3d/raw/b6b9ea0df3a68cadd5a974b331cebc4a85a2da2e/react-storybook.js)
 */

// Name: react storybook template
// Description: Generates a react storybook template starter
// Author: Shawn Sandy
// Twitter: @shawnsandy

import "@johnlindquist/kit"

let result = await template(
  `
import { StoryObj, Meta } from '@storybook/react'
import { within, userEvent, screen } from '@storybook/testing-library'
import { expect } from '@storybook/jest'

import \${1:component} from '\${2:import_path}'

const meta: Meta<typeof \${1:component}> = {
  title: '\${3:FP.REACT Components}',
  component: \${1:component},
  parameters: {
    docs: {
      description: {
        component:
          '\${1: component} description here...',
      },
    },
  },
  args: {
    // @ts-ignore
    children: 'Link'
  },
} as Story;

export default meta
type Story = StoryObj<typeof \${1:component} >

export const \${1:component}Component: Story = {
  args: {},
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    expect(canvas.getByText(/link/i)).toBeInTheDocument()
  },
}
`)

setSelectedText(result)

react-storybook.js

/**
 # Generates a react storybook starter template

 - Opens the built-in editor where you can tab through template variables for lightning-fast text generation
- Submitting (`cmd+s`) the template will paste the current text into the window behind Kit.app
- Enjoy!
### Install this script
- make sure you have the latest version of Script Kit
- [Click here to install React storybook template](https://scriptkit.com/api/new?name=react-storybook-template&url=https://gist.githubusercontent.com/shawn-sandy/80ce01ad867a59962fb7af4cd69bef3d/raw/b6b9ea0df3a68cadd5a974b331cebc4a85a2da2e/react-storybook.js)
 */

// Name: react storybook template
// Description: Generates a react storybook template starter
// Author: Shawn Sandy
// Twitter: @shawnsandy

import "@johnlindquist/kit"

let result = await template(
    `
import { StoryObj, Meta } from '@storybook/react'
import { within, userEvent, screen } from '@storybook/testing-library'
import { expect } from '@storybook/jest'

import \${1:component} from '\${2:import_path}'

const meta: Meta<typeof \${1:component}> = {
  title: '\${3:menu_title}',
  component: \${1:component},
  args: {
    // @ts-ignore
    children: 'Link'
  },
}

export default meta
type Story = StoryObj<typeof Link>

export const \${1:component}Component: Story = {
  args: {},
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    expect(canvas).toBeInTheDocument()
  },
}
`)

setSelectedText(result)

Pixels to rems converter

• This script converts pixels to rems and copies the result to the clipboard
• It uses the entered base/root font size to calculate the conversion
• The default root font size is 16px

Author: @shawnsandy

Install this script

• make sure you have the latest version of Script Kit installed
• Click here to install pixels to rem
• View the source code

React storybook starter template

• Opens the built-in editor where you can tab through template variables for lightning-fast text generation
• Submitting (cmd+s) the template will paste the current text into the window behind Kit.app
• Enjoy!

Install this script

• make sure you have the latest version of Script Kit installed
• Click here to install React storybook template

React component template

• Opens the built-in editor where you can tab through template variables for lightning-fast text generation
• Submitting (cmd+s) the template will paste the current text into the window behind Kit.app

Install this script

• make sure you have the latest version of Script Kit
• Click here to install react component template

// Name: react component template
// Description: Generates a react template starter w/prop-types
// Author: Shawn Sandy
// Twitter: @shawnsandy