first

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+lib/
+rubbish/

.nvmrc

@@ -0,0 +1 @@
+16.13.0

.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-scss',
+  ],
+};

.storybook/preview.js

@@ -0,0 +1,15 @@
+export const parameters = {
+  layout: 'centered',
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      order: ['Introduction'],
+    },
+  },
+};

.yarnrc

@@ -0,0 +1 @@
+1.22.17

READMD.md

@@ -0,0 +1,15 @@
+# drcl
+
+yoinked from:
+
+- https://prateeksurana.me/blog/react-component-library-using-storybook-6/
+- https://github.com/prateek3255/my-awesome-component-library
+- https://github.com/MindTheCoin/typescript-storybook-component-library-template/
+
+## fun things to type
+
+```
+yarn build
+yarn storybook
+npm publish
+```

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@davidplease/drcl",
+  "version": "1.0.3",
+  "description": "a react component library",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build": "rollup -c"
+  },
+  "files": [
+    "lib"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "styled-components": "^5.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.3.8",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "babel-loader": "^8.2.2",
+    "css-loader": "5.2.6",
+    "jest": "^27.2.2",
+    "postcss": "^8.4.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "rollup": "^2.57.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.43.5",
+    "sass-loader": "10.1.1",
+    "style-loader": "2.0.0",
+    "styled-components": "^5.3.1",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.4.3"
+  }
+}

rollup.config.js

@@ -0,0 +1,34 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+
+const packageJson = require('./package.json');
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: packageJson.main,
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: packageJson.module,
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+    }),
+    postcss({
+      extensions: ['.css'],
+    }),
+  ],
+};

src/components/Button/Button.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/react/types-6-0';
+import { Story } from '@storybook/react';
+import Button, { ButtonProps } from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+// Create a master template for mapping args to render the Button component
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+// Reuse that template for creating different stories
+export const Primary = Template.bind({});
+Primary.args = { label: 'Primary 😃', size: 'large' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, primary: false, label: 'Secondary 😇' };

src/components/Button/Button.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import './button.scss';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * What foreground color to use
+   */
+  color?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * okay which effect?
+   */
+  effect?: 'none' | 'glow';
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const Button = ({
+  primary = true,
+  backgroundColor = '',
+  color = '',
+  size = 'medium',
+  onClick,
+  label = '',
+
+  effect = 'none',
+}: ButtonProps) => {
+  const mode = primary ? 'drcl-button--primary' : 'drcl-button--secondary';
+
+  return (
+    <button
+      type="button"
+      className={[
+        'drcl-button',
+        `drcl-button--${size}`,
+        `${effect !== 'none' ? `drcl-button--effect--${effect}` : null}`,
+        mode,
+      ].join(' ')}
+      style={{ backgroundColor, color }}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;

src/components/Button/button.scss

@@ -0,0 +1,112 @@
+$bgColor: #611efd;
+$stdRadis: 0.5em;
+
+.drcl-button {
+  font-family: monospace, sans-serif;
+  font-weight: 100;
+  border: 0;
+  border-radius: 0.5em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+
+  &--small {
+    font-size: 0.75rem;
+    padding: 8px 16px;
+  }
+
+  &--medium {
+    font-size: 1rem;
+    padding: 10px 18px;
+  }
+
+  &--large {
+    font-size: 1.5rem;
+    padding: 12px 20px;
+  }
+
+  &--primary {
+    color: white;
+    background-color: $bgColor;
+  }
+
+  &--secondary {
+    color: #333;
+    background-color: transparent;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  }
+
+  &--effect {
+    &--glow {
+      outline: none;
+      position: relative;
+      z-index: 0;
+
+      &:before {
+        // by default don't glow
+        content: '';
+        background: linear-gradient(
+          45deg,
+          #ff0000,
+          #ff7300,
+          #fffb00,
+          #48ff00,
+          #00ffd5,
+          #002bff,
+          #7a00ff,
+          #ff00c8,
+          #ff0000
+        );
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        background-size: 400%;
+        z-index: -1;
+        filter: blur(5px);
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        animation: glowing 20s linear infinite;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+      }
+
+      &:active {
+        // the color when clicked
+        // color: #000;
+      }
+
+      &:active:after {
+        // background: transparent;
+      }
+
+      &:hover:before {
+        opacity: 0.2;
+      }
+
+      &:after {
+        z-index: -1;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        // background-color: $bgColor;
+        left: 0;
+        top: 0;
+        // border-radius: 10px;
+        border-radius: $stdRadis;
+      }
+
+      @keyframes glowing {
+        0% {
+          background-position: 0 0;
+        }
+        50% {
+          background-position: 400% 0;
+        }
+        100% {
+          background-position: 0 0;
+        }
+      }
+    }
+  }
+}

src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

src/index.ts

@@ -0,0 +1,3 @@
+import Button from './components/Button';
+
+export { Button };

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "declarationDir": "./",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "lib"]
+}