caplink-saas-ui-shared-component-library 0.0.1 → 0.0.2

package/README.md

@@ -24,7 +24,28 @@ import { Button } from '@caplink/saas-ui-shared-component-library';
 
 ## Development
 
-To develop the components, you can run the Storybook server:
+### Components
+
+All the components are located in the 'component-library' folder. Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
+
+An expected component development workflow would be:
+
+1. Create a new folder for the component
+2. Create the component file (e.g. MyComponent.js)
+3. Create a story file (e.g. MyComponent.stories.js)
+4. Create a test file (e.g. MyComponent.spec.js)
+5. Create a style file (e.g. MyComponent.css) (if needed, we use tailwindcss for styles)
+6. If it's a complex component, create a Cypress test file (e.g. MyComponent.spec.js in the 'cypress' folder)
+
+### Folder structure
+
+- All the components are located in the '/component-library' folder.
+- Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
+- Cypress tests are located in the 'cypress' folder and should follow the same folder structure as the components.
+
+### Storybook
+
+We use Storybook to develop and test the components. To start the Storybook server, run:
 
 ```bash
 npm run storybook
@@ -32,9 +53,7 @@ npm run storybook
 
 This will start the Storybook server and open a browser window with the Storybook UI. You can use this to develop and test the components.
 
-### Folder structure
-
-All the components are located in the 'component-library' folder.
+This is the gallery of components that we use to develop and test the components. It's also used to generate the documentation for the components, so it's important to keep it up to date and encompassing relevant states and use cases within the stories.
 
 ## Testing
 

package/component-library/examples/button/Button.spec.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { Button } from "./Button";
+
+// Test example using tsx files and components
+
+describe("Button", () => {
+  it("renders the button in the primary state", () => {
+    render(
+      <Button
+        primary
+        label="Button"
+        backgroundColor={"#cccccc"}
+        size={"large"}
+      />
+    );
+    const button = screen.getByRole("button", { name: /Button/i });
+    expect(button.className).toContain("storybook-button--primary");
+  });
+});

package/component-library/examples/button/Button.tsx

@@ -0,0 +1,62 @@
+import PropTypes from "prop-types";
+import React from "react";
+import "./button.css";
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
+  return (
+    <button
+      type="button"
+      className={[
+        "w-64", // Working Tailwind CSS example
+        "text-3xl",
+        "storybook-button",
+        `storybook-button--${size}`,
+        mode,
+      ].join(" ")}
+      {...props}
+    >
+      {label}
+      <style>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: "medium",
+  onClick: undefined,
+};

package/component-library/examples/button/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

package/component-library/examples/header/Header.tsx

@@ -0,0 +1,82 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import { Button } from "../button/Button";
+import "./header.css";
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button
+              size="small"
+              onClick={onLogout}
+              label="Log out"
+              primary
+              backgroundColor
+            />
+          </>
+        ) : (
+          <>
+            <Button
+              size="small"
+              onClick={onLogin}
+              label="Log in"
+              primary={false}
+              backgroundColor
+            />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+              backgroundColor
+            />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};

package/component-library/examples/header/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

package/component-library/examples/index.d.ts

@@ -0,0 +1,5 @@
+import { Button } from "./button/Button";
+import { Header } from "./header/Header";
+import { Page } from "./page/Page";
+
+export { Button, Header, Page };

package/component-library/examples/page/Page.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+import { Header } from "../header/Header";
+import "./page.css";
+
+export const Page = () => {
+  const [user, setUser] = React.useState<any>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: "Jane Doe" })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: "Jane Doe" })}
+      />
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{" "}
+          <a
+            href="https://componentdriven.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <strong>component-driven</strong>
+          </a>{" "}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review
+          page states without needing to navigate to them in your app. Here are
+          some handy patterns for managing page data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose
+            such data from the "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock
+            these services out using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{" "}
+          <a
+            href="https://storybook.js.org/tutorials/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Storybook tutorials
+          </a>
+          . Read more in the{" "}
+          <a
+            href="https://storybook.js.org/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with
+          the{" "}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 12 12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/component-library/examples/page/page.css

@@ -0,0 +1,69 @@
+.storybook-page {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+.storybook-page h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+.storybook-page ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/component-library/index.d.ts

@@ -0,0 +1,9 @@
+import { Button, Header, Page } from "./examples";
+
+export namespace Examples {
+  export {
+    Button as ExampleButton,
+    Header as ExampleHeader,
+    Page as ExamplePage,
+  };
+}

package/component-library/index.ts

@@ -0,0 +1,5 @@
+import * as Examples from "./examples";
+
+export default {
+  Examples,
+};

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Examples = require("./examples");
+exports.default = {
+    Examples: Examples,
+};

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "caplink-saas-ui-shared-component-library",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A shared UI component library for React projects from Caplink",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build": "tsc"
   },
   "files": [
-    "dist"
+    "dist",
+    "component-library"
   ],
   "keywords": [],
   "author": "",