Module

.eslintignore

@@ -1,2 +1 @@
 .circleci
-lib

.eslintrc

@@ -5,10 +5,5 @@
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
-  },
-  "settings": {
-    "import/resolver": {
-      "babel-module": {}
-    }
   }
 }

.husky/pre-commit

@@ -2,5 +2,3 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npm run lint
-npm run build
-git add lib

.npmignore

@@ -22,6 +22,21 @@
 # Deps
 .depsrc
 
+# Build
+build
+gulpfile.*
+
+# Jest
+__tests__
+jest.config.cjs
+
+# Coverage
+.coverage
+
 # Storybook
 .storybook
 stories
+
+# TypeScript
+tsconfig.json
+jsconfig.json

.storybook/main.mjs

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+
+export default {
+  stories: [
+    '../stories/**/*.stories.jsx'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}

.storybook/manager.mjs

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import { themes } from '@storybook/theming'
+
+addons.setConfig({
+  theme: themes.light
+})

.storybook/preview-head.html

@@ -0,0 +1,54 @@
+<style type="text/css">
+
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+ul.tab-group {
+  list-style-type: none;
+
+  background-color: #444444;
+  border-radius: 4px;
+  border-bottom: 2px solid #222222;
+  display: block;
+
+  margin: 0;
+  padding: 0;
+}
+
+li.tab {
+  cursor: pointer;
+
+  display: inline-block;
+  background-color: transparent;
+  color: white;
+
+  border-radius: 0;
+
+  border-bottom: 2px solid #222222;
+
+  margin: 0 0 -2px 0;
+  padding: .5rem 1rem;
+
+  height: calc(100% + 2px);
+}
+
+li.tab.selected {
+  display: inline-block;
+  background-color: white;
+  color: #222222;
+
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+
+  border-top: 2px solid #222222;
+  border-right: 2px solid #222222;
+  border-bottom: 2px solid white;
+  border-left: 2px solid #222222;
+}
+
+div.tab-panel {
+  padding: 1rem;
+}
+
+</style>

.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/preview.mjs

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+
+export default {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+}

README.md

@@ -47,7 +47,7 @@ Content can be declared either as children or as the return of a function assign
 
 If your component extends `PureComponent` or is presentational, you might prefer to declare content as children.
 
-Otherwise, you might prefer to assign a function to the `render` prop, so that rendering is deferred until the tab is selected.
+Otherwise, you can assign a function to the `render` prop, so that rendering is deferred until the tab is selected.
 
 ### Content as children
 
@@ -99,7 +99,7 @@ Similarly, they can be declared in any combination.
 
 ## Demonstrating _react-tab-set_
 
-[Example `Storybooks` are available on GitHub](https://github.com/sequencemedia/react-tab-set).
+[Example `Storybooks` are available](https://github.com/sequencemedia/react-tab-set).
 
 Clone the repository, then:
 

babel.config.js → babel.config.cjs

@@ -41,8 +41,6 @@ module.exports = (api) => {
   if (api) api.cache.using(env)
 
   return {
-    compact: true,
-    comments: false,
     presets
   }
 }

index.mjs

@@ -0,0 +1 @@
+export * from './src/index.cjs'