+ twin, + rollup terser, +emotion styled (#2)

Co-authored-by: david <[email protected]>
Reviewed-on: https://git.poyner.page/david/drcl/pulls/2
Co-authored-by: david <[email protected]>
Co-committed-by: david <[email protected]>

.babelrc

@@ -4,7 +4,12 @@
       "@babel/preset-react",
       { "runtime": "automatic", "importSource": "@emotion/react" }
     ],
+    "@babel/preset-typescript",
     "@emotion/babel-preset-css-prop"
   ],
-  "plugins": ["@emotion/babel-plugin"]
+  "plugins": [
+    "@emotion/babel-plugin",
+    "babel-plugin-twin",
+    "babel-plugin-macros"
+  ]
 }

.storybook/main.ts

@@ -1,4 +1,32 @@
+const path = require('path');
+const fs = require('fs');
+
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      '@emotion/core': getPackageDir('@emotion/react'),
+      '@emotion/styled': getPackageDir('@emotion/styled'),
+    };
+    return config;
+  },
 };
+
+// Fix for package resolution
+function getPackageDir(filepath) {
+  let currDir = path.dirname(require.resolve(filepath));
+  while (true) {
+    if (fs.existsSync(path.join(currDir, 'package.json'))) {
+      return currDir;
+    }
+    const { dir, root } = path.parse(currDir);
+    if (dir === root) {
+      throw new Error(
+        `Could not find package.json in the parent directories starting from ${filepath}.`
+      );
+    }
+    currDir = dir;
+  }
+}

README.md

@@ -2,13 +2,6 @@
 
 # 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/
-- https://github.com/kraftdorian/react-ts-rollup-starter-lib/blob/master/package.json
-
 ## fun things to type
 
 ```
@@ -16,3 +9,16 @@ yarn build
 yarn storybook
 yarn publish
 ```
+
+## things to do
+
+- add type when publish
+-
+
+things 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/
+- https://github.com/kraftdorian/react-ts-rollup-starter-lib/blob/master/package.json
+- https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion

package.json

@@ -1,16 +1,21 @@
 {
   "name": "@davidplease/drcl",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "description": "a react component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
+  "babelMacros": {
+    "twin": {
+      "config": "./tailwind.config.js",
+      "preset": "emotion"
+    }
+  },
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build": "rollup -c",
-    "test": "jest "
+    "build": "rollup -c"
   },
   "files": [
     "lib"
@@ -23,28 +28,25 @@
     "@emotion/babel-plugin": "^11.3.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@storybook/addon-actions": "^6.4.7",
-    "@storybook/addon-essentials": "^6.4.7",
-    "@storybook/addon-links": "^6.4.7",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.7",
-    "@types/jest": "^27.0.2",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/react": "^6.4.9",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "babel-loader": "^8.2.2",
-    "jest": "^27.2.2",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-twin": "^1.0.2",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
     "rollup": "^2.57.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "ts-jest": "^27.0.5",
+    "rollup-plugin-terser": "^7.0.2",
+    "twin.macro": "^2.8.2",
     "typescript": "^4.4.3"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.7.0"
   }
 }

rollup.config.ts

@@ -1,11 +1,15 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
 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 babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
 
 const packageJson = require('./package.json');
 
+const config = {
+  extensions: ['.ts', '.tsx'],
+};
+
 export default {
   input: 'src/index.ts',
   output: [
@@ -13,22 +17,23 @@ export default {
       file: packageJson.main,
       format: 'cjs',
       sourcemap: true,
+      plugins: [terser()],
     },
     {
       file: packageJson.module,
       format: 'esm',
       sourcemap: true,
+      plugins: [terser()],
     },
   ],
   external: ['react'],
   plugins: [
     peerDepsExternal(),
-    resolve(),
+    resolve({ extensions: config.extensions }),
     commonjs(),
-    typescript({
-      tsconfig: './tsconfig.json',
-    }),
     babel({
+      extensions: config.extensions,
+      include: ['src/**'],
       exclude: 'node_modules/**',
     }),
   ],

src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import { css, CSSObject } from '@emotion/react';
 import { BUTTON_CONST } from './ButtonConsts';
+
 export interface ButtonProps {
   /**
    * how important is the BUTTON

src/components/StyledButton/StyledButton.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react/types-6-0';
+import { Story } from '@storybook/react';
+import StyledButton from './StyledButton';
+
+export default {
+  title: 'Components/StyledButton',
+  component: StyledButton,
+} as Meta;
+
+// Create a master template for mapping args to render the Button component
+const Template: Story = (args) => <StyledButton {...args} />;
+
+// Reuse that template for creating different stories
+export const Primary = Template.bind({});
+Primary.args = { label: 'Primary 😃', size: 'lg' };
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  ...Primary.args,
+  variant: 'secondary',
+  label: 'Secondary 😇',
+  size: 'lg',
+};
+
+export const isSmall = Template.bind({});
+isSmall.args = { label: 'isSmall 😃', isSmall };

src/components/StyledButton/StyledButton.tsx

@@ -0,0 +1,30 @@
+import tw, { styled, css, theme } from 'twin.macro';
+
+const StyledButton = styled.button(({ variant, isSmall }) => [
+  // The common button styles added with the tw import
+  tw`px-8 py-2 rounded focus:outline-none transform duration-75`,
+
+  // Use the variant grouping feature to add variants to multiple classes
+  tw`hocus:(scale-105 text-yellow-400)`,
+
+  // Use props to conditionally style your components
+  variant === 'primary' && tw`bg-black text-white border-black`,
+
+  // Combine regular css with tailwind classes within backticks
+  variant === 'secondary' && [
+    css`
+      box-shadow: 0 0.1em 0 0 rgba(0, 0, 0, 0.25);
+    `,
+    tw`border-2 border-yellow-600`,
+  ],
+
+  // Conditional props can be used
+  isSmall ? tw`text-sm` : tw`text-lg`,
+
+  // The theme import can supply values from your tailwind.config.js
+  css`
+    color: ${theme`colors.white`};
+  `,
+]);
+
+export default StyledButton;

src/components/StyledButton/index.ts

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

src/index.ts

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

tailwind.config.ts

@@ -0,0 +1,11 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        electric: '#db00ff',
+        ribbon: '#0047ff',
+      },
+    },
+  },
+  plugins: [],
+};

tsconfig.json

@@ -20,6 +20,6 @@
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react"
   },
-  "include": ["./src"],
+  "include": ["./src", "./types"],
   "exclude": ["node_modules", "lib", "./src/**/*.stories.tsx"]
 }

types/twin.d.ts

@@ -0,0 +1,9 @@
+import 'twin.macro';
+import styledImport from '@emotion/styled';
+import { css as cssImport } from '@emotion/react';
+
+declare module 'twin.macro' {
+  // The styled and css imports
+  const styled: typeof styledImport;
+  const css: typeof cssImport;
+}