component : GhostNavbar

package.json

@@ -64,6 +64,9 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^7.0.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",

rollup.config.js

@@ -0,0 +1,47 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from "rollup-plugin-postcss";
+//NEW
+import { terser } from "rollup-plugin-terser";
+
+
+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: [
+      // NEW
+      peerDepsExternal(),
+
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      postcss(),
+
+      // NEW
+      terser(),
+    ],
+  },
+  {
+    input: "dist/esm/types/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+];

src/Button/Button.tsx → src/GhostNavbar/GhostNavbar.tsx

@@ -17,7 +17,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   styles?: Styles;
 }
 
-export const Button = (props: Props) => {
+export const GhostNavbar = (props: Props) => {
   const { styles, children } = props;
 
   var cssVariables = {

src/Button/sass/style.scss → src/GhostNavbar/sass/style.scss

@@ -6,7 +6,7 @@
   font-size: 12.5px;
   &__checkbox {
     display: none;
-  }
+  } 
 
   &__button {
     background-color: $color-white;
@@ -102,6 +102,8 @@
   & ul {
     @include centerItem;
     list-style: none;
+    display: flex;
+    flex-direction: column;
     & a {
       text-decoration: none;
     }

src/Button/style.css → src/GhostNavbar/style.css

@@ -73,7 +73,9 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    list-style: none; }
+    list-style: none;
+    display: flex;
+    flex-direction: column; }
     .navigation ul a {
       text-decoration: none; }
   .navigation li {

src/index.tsx

@@ -1,15 +1 @@
-import React, { FC, HTMLAttributes, ReactChild } from 'react';
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  /** custom content, defaults to 'the snozzberries taste like snozzberries' */
-  children?: ReactChild;
-}
-
-// Please do not use types off of a default export module or else Storybook Docs will suffer.
-// see: https://github.com/storybookjs/storybook/issues/9556
-/**
- * A custom Thing component. Neat!
- */
-export const Thing: FC<Props> = ({ children }) => {
-  return <div>{children || `the snozzberries taste like snozzberries`}</div>;
-};
+export * from "./GhostNavbar/GhostNavbar";

stories/GhostNavbar.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/react';
+import React from "react";
+import { GhostNavbar } from '../src/GhostNavbar/GhostNavbar';
+
+const meta: Meta = {
+    title: 'Ghost Navbar',
+    component: GhostNavbar,
+  };
+
+  export default meta
+
+  export const Default = ()=> <GhostNavbar styles={{navigationBackground:{backgroundColor: 'red'}}}/>

tsdx.config.js

@@ -0,0 +1,13 @@
+const postcss = require('rollup-plugin-postcss');
+
+module.exports = {
+  rollup(config, options) {
+    config.plugins.push(
+      postcss({
+        inject: false,
+        extract: !!options.writeMeta,
+      }),
+    );
+    return config;
+  },
+};