Component extraction [ In progress ]

.storybook/main.js

@@ -0,0 +1,43 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  features: {
+    interactionsDebugger: true,
+  },
+  framework: "@storybook/react",
+  webpackFinal: async (config, { configType }) => {
+    // Make whatever fine-grained changes you need
+    // config.module.rules.push({
+    //   test: /\.scss$/,
+    //   use: ["style-loader", "css-loader", "sass-loader"],
+    //   include: path.resolve(__dirname, "../"),
+    // });
+
+    config.module.rules.push({
+      test: /\.pcss$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: {
+              localIdentName: "[name]__[local]",
+            },
+            importLoaders: 1,
+          },
+        },
+        "sass-loader",
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+
+    // Return the altered config
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -1,3 +1,13 @@
 # RebelCode React Library
 
 A library of React components, hooks, and other utilities that are used in RebelCode's projects.
+
+## Setup
+To install packages, run [ for best results use yarn  ]
+- yarn
+
+To start storybook, run 
+- yarn storybook
+
+To build package, run [ cmd throws some errors which is currently being worked on ]
+- yarn build

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      '@babel/preset-react', 
+      '@babel/preset-typescript',
+    ],
+  };

components/Alert/Alert.pcss

@@ -0,0 +1,213 @@
+.message {
+  align-items: stretch;
+  justify-content: center;
+  position: relative;
+  padding: 5px 7px;
+  line-height: 18px;
+  font-size: 13px;
+  background: #fff;
+  border: 1px solid;
+  border-radius: 3px;
+
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+}
+
+.centered {
+  padding: 5px 25px;
+}
+
+.shaking {
+  animation-name: shake-animation;
+  animation-duration: 0.2s;
+}
+
+.dashicon {
+  width: 16px !important;
+  height: 16px !important;
+  font-size: 16px !important;
+  line-height: 16px !important;
+  margin-top: 1px;
+}
+
+.icon {
+  composes: dashicon;
+  margin-right: 8px;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.logo {
+  composes: icon;
+
+  & img {
+    width: 18px;
+    height: 18px;
+    max-width: unset;
+  }
+}
+
+.content {
+  display: block;
+}
+
+.dismiss-btn {
+  position: absolute;
+  top: 5px;
+  right: 7px;
+  color: #333;
+  padding: 0 !important;
+  border: 0;
+  border-radius: 100px;
+  background: transparent;
+  box-sizing: border-box;
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 1px currentColor;
+  }
+
+  & :global(.dashicon) {
+    transform: translateX(1px);
+  }
+}
+
+
+@keyframes shake-animation {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    transform: translateX(0);
+  }
+  30%, 70% {
+    transform: translateX(-2px);
+  }
+  10%, 50%, 90% {
+    transform: translateX(2px);
+  }
+}
+
+/*
+ * COLOR VARIATIONS
+ *----------------------------
+ */
+
+/* SUCCESS */
+.success {
+  composes: message;
+  background: #ecf4eb;
+  box-shadow: 0 1px 2px rgba(37, 85, 31, 0.15);
+  border-color: rgba(61, 142, 52, 0.4);
+
+  & .icon, & .dismiss-btn {
+    color: #2e6b27;
+  }
+
+  & .content {
+    color: #122b10;
+  }
+}
+
+/* INFO */
+.info {
+  composes: message;
+  background: #e8f5f7;
+  box-shadow: 0 1px 2px rgba(14, 91, 107, 0.15);
+  border-color: rgba(24, 152, 178, 0.4);
+
+  & .icon, & .dismiss-btn {
+    color: #127286;
+  }
+
+  & .content {
+    color: #072e35;
+  }
+}
+
+/* WARNING */
+.warning {
+  composes: message;
+  background: #fff4e6;
+  box-shadow: 0 1px 2px rgba(153, 88, 0, 0.15);
+  border-color: rgba(255, 147, 0, 0.4);
+
+  & .icon, & .dismiss-btn {
+    color: #bf6e00;
+  }
+
+  & .content {
+    color: #4d2c00;
+  }
+}
+
+/* PREMIUM */
+.premium {
+  composes: message;
+  background: rgba(221, 35, 75, .1);
+  border-color: var(--sli-pro);
+
+  & .icon, & .dismiss-btn, & .content {
+    color: var(--sli-quasi-black);
+  }
+
+  & a {
+    color: #000 !important;
+    font-weight: 600;
+  }
+}
+
+/* PRO TIP */
+.pro-tip {
+  composes: message;
+  background: #eeeffa;
+  box-shadow: 0 1px 2px rgba(53, 57, 123, 0.15);
+  border-color: rgba(89, 95, 205, 0.4);
+
+  & .icon, & .dismiss-btn {
+    color: #43479a;
+  }
+
+  & .content {
+    color: #1b1d3e;
+  }
+}
+
+/* ERROR */
+.error {
+  composes: message;
+  background: #fbe9ec;
+  box-shadow: 0 1px 2px rgba(130, 22, 40, 0.15);
+  border-color: rgba(216, 36, 66, 0.4);
+
+  & .icon, & .dismiss-btn {
+    color: #a21b32;
+  }
+
+  & .content {
+    color: #410b14;
+  }
+}
+
+
+/* GREY */
+.grey {
+  composes: message;
+  background: var(--sli-wp-grey);
+  box-shadow: 0 1px 2px rgba(120, 120, 120, 0.15);
+  border-color: var(--sli-line-color);
+
+  & .icon, & .dismiss-btn {
+    color: #555;
+  }
+
+  & .content {
+    color: #222;
+  }
+}

components/Alert/index.tsx

@@ -0,0 +1,89 @@
+import React, { CSSProperties, ReactNode } from "react";
+import css from "./Alert.pcss";
+import { classList } from "../../utils/classes";
+import { Dashicon, DashiconTy } from "../Dashicon";
+
+type AlertType =
+  | "success"
+  | "info"
+  | "pro-tip"
+  | "premium"
+  | "warning"
+  | "error"
+  | "grey";
+
+export type Props = {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  type: AlertType;
+  showIcon?: boolean;
+  shake?: boolean;
+  centered?: boolean;
+  isDismissible?: boolean;
+  onDismiss?: () => void;
+};
+
+export function Alert({
+  className,
+  style,
+  children,
+  type,
+  showIcon,
+  shake,
+  centered,
+  isDismissible,
+  onDismiss,
+}: Props) {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  const handleClick = () => {
+    if (isDismissible) {
+      setDismissed(true);
+      onDismiss && onDismiss();
+    }
+  };
+
+  const fullClassName = classList(
+    css[type],
+    (shake && css.shaking||""),
+   ( centered && css.centered||""),
+    className as string
+  );
+
+  return dismissed ? null : (
+    <div className={fullClassName} style={style} aria-label="Alert">
+      {showIcon && (
+        <Dashicon className={css.icon} icon={getIconFor(type)} />
+      )}
+
+      <div className={css.content}>{children}</div>
+
+      {isDismissible && (
+        <button className={css.dismissBtn} onClick={handleClick}>
+          <Dashicon icon="no" className={css.dashicon} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Retrieves the appropriate dashicon for a given message type.
+ *
+ * @param type
+ */
+function getIconFor(type: AlertType): DashiconTy {
+  switch (type) {
+    case "success":
+      return "yes-alt";
+    case "pro-tip":
+      return "lightbulb";
+    case "error":
+    case "warning":
+      return "warning";
+    case "info":
+    default:
+      return "info";
+  }
+}