Creating a Storybook Lerna package

Phil Ramirez — Thu, 11 Mar 2021 16:56:52 +0000

Setup

I'm writing this assuming you have knowledge and familiarity with setting up Lerna. Also, the scenario here is assuming you have a bunch of reusable components in their own dedicated package. Let me know if you have questions on steps that I cover at a high level.

Setup checklist

Repo is setup

mkdir superDuperRepo
git init
git add .

Lerna as a dev dependency

yarn init
yarn add lerna --dev
lerna init

lerna.json

// superDuperRepo/lerna.json

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

package.json

// superDuperRepo/package.json

{
  "name": "superDuperRepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Drop reusable components in their own package

superDuperRepo/packages/reusableComponents

Add storybook as a package

lerna create storybook
cd packages/storybook
npx sb init // delete boilerplate stories
yarn add react
yarn add react-dom

Yarn workspaces

yarn config set workspaces-experimental true

Add reusable components package to the storybook package

lerna add landing --scope=storybook --dev

Resolving reusable components package files

// superDuperRepo/packages/storybook/.storybook/webpack.config.js

const path = require("path")

module.exports = ({ config }) => {
  // a bunch of other rules here

  config.resolve.modules = [
    path.resolve(__dirname, "..", "..", "reusableComponents", "src"),
    "node_modules",
  ]

  /*
  // Alternately, for an alias:
  config.resolve.alias: {
    "@styles": path.resolve(__dirname, "..", "src", "styles")
  }
   */

  return config
}

Creating the story

// superDuperRepo/packages/storybook/stories/Button.stories.jsx

import React from 'react'
import Button from 'reusableComponents/src/Button'

export default {
  component: Button,
  title: 'Reusable Components/Button',
}

const Template = args => <Button {...args} />

export const Default = Template.bind({})

Default.args = {
  title: 'Submit'
}

Run Storybook

yarn storybook

Conclusion

At this point you should be able to run storybook and view the single story (especially if you deleted the boilerplate stories). It'd be lovely if there was an automated way of creating stories for all the components that I have. Still trying to figure that one out.

Helpful troubleshooting notes

lerna list
lerna bootstrap
lerna link
lerna changed
yarn workspaces info

Lawyer Cat Zoom Filter Software

Phil Ramirez — Wed, 10 Feb 2021 14:19:52 +0000

How to Use a Cat Filter Like the One in the Viral Zoom Courtroom Video

Lawrence Hurley

@lawrencehurley

“I’m here live, I’m not a cat,” says lawyer after Zoom filter mishap

“I can see that,” responds judge

18:26 PM - 09 Feb 2021

TLDR
Here is the link

Viral 'I'm not a cat' filter is decades-old software.

Last night right before I fell asleep, I thought to myself (probably like thousands of others)

HOW DO I GET THAT FILTER?

Unfortunately, it can't be run on Mac OS and looks like it has been designed to work on Windows 2000, XP, and Vista. From a security perspective I wouldn't touch the software. Here are a couple of snap filters that you can use for snap camera, but without the worried-wondering eyes it doesn't have the same effect.

DEV Community: Phil Ramirez