carbon-components-solid - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

CHANGELOG.md

@@ -10,2 +10,17 @@ # Changelog
 
+## [0.0.7](https://gitlab.com/mneumann_ntecs/carbon-components-solid/-/tree/v0.0.7) - 2020-12-26
+
+**Features**
+
+- Added `ContentSwitcher` and `Switch` components.
+
+- Added `Grid`, `Row` and `Column` components.
+
+- Added `Slider` component.
+
+**Breaking Changes**
+
+- `TextInput`: Renamed `model` prop to `value`. There is no good reason why you
+  would want to use a `TextInput` without a backing signal.
+
 ## [0.0.6](https://gitlab.com/mneumann_ntecs/carbon-components-solid/-/tree/v0.0.6) - 2020-12-19
@@ -12,0 +27,0 @@

package.json

 {
   "name": "carbon-components-solid",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "Apache-2.0",
@@ -38,3 +38,3 @@ "author": "Michael Neumann",
     "babel-loader": "^8.2.2",
-    "babel-preset-solid": "^0.23.4",
+    "babel-preset-solid": "^0.23.5",
     "carbon-components": "10.25.0",
@@ -45,3 +45,3 @@ "node-sass": "^5.0.0",
     "rollup": "^2.35.1",
-    "solid-js": "^0.23.4",
+    "solid-js": "^0.23.5",
     "solid-scripts": "0.0.49",
@@ -48,0 +48,0 @@ "typescript": "4.1.2"

README.md

@@ -50,2 +50,5 @@ # Carbon Components for Solid (WIP)
 * ClickableTile
+* [Slider](https://mneumann_ntecs.gitlab.io/carbon-components-solid/storybook/?path=/story/slider--default)
+* [Grid](https://mneumann_ntecs.gitlab.io/carbon-components-solid/storybook/?path=/story/grid--default)
+* [ContentSwitcher](https://mneumann_ntecs.gitlab.io/carbon-components-solid/storybook/?path=/story/contentswitcher--default)
 
@@ -52,0 +55,0 @@ Custom components (not directly found in carbon-components-svelte):

src/components/index.ts

@@ -67,1 +67,10 @@ export { Button } from "./Button/Button";
 export { Link } from "./Link/Link";
+
+export { Slider } from "./Slider/Slider";
+
+export { Grid } from "./Grid/Grid";
+export { Row } from "./Grid/Row";
+export { Column } from "./Grid/Column";
+
+export { ContentSwitcher } from "./ContentSwitcher/ContentSwitcher";
+export { Switch } from "./ContentSwitcher/Switch";

src/components/Loading/Loading.stories.js

@@ -7,5 +7,6 @@ export default {
 
-export const default_with_overlay = () => <Loading />;
-export const no_overlay = () => <Loading withOverlay={false} />;
-export const small_size = () => <Loading withOverlay={false} small />;
-export const inactive = () => <Loading active={false} />;
+export const DefaultWithOverlay = () => <Loading />;
+export const NoOverlay = () => <Loading withOverlay={false} />;
+export const SmallSize = () => <Loading withOverlay={false} small />;
+export const Inactive = () => <Loading active={false} />;
+export const WithDescription = () => <Loading description="Loading..." />;

src/components/Modal/Modal.stories.js

@@ -6,7 +6,14 @@ export default {
 import { Modal } from "./Modal";
-import { Button } from "../Button/Button";
-import { Form } from "../Form/Form";
+import {
+  Button,
+  Form,
+  Link,
+  InlineLoading,
+  InlineNotification,
+  Loading,
+  TextInput,
+  Checkbox,
+} from "../index";
 import { Example as TextInputExample } from "../TextInput/TextInput.stories";
-import { createSignal } from "solid-js";
-import { InlineLoading } from "../InlineLoading/InlineLoading";
+import { createSignal, createState, createMemo } from "solid-js";
 
@@ -45,2 +52,158 @@ export const Example = () => {
 
+export const SignupExample = () => {
+  const [isOpen, setOpen] = createSignal(true);
+  const open = () => setOpen(true);
+  const close = () => setOpen(false);
+
+  const [state, setState] = createState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    agreeTos: false,
+  });
+
+  const [visited, setVisited] = createState({
+    firstName: false,
+    lastName: false,
+    email: false,
+    password: false,
+    agreeTos: false,
+  });
+
+  const errors = {
+    firstName: createMemo(() =>
+      state.firstName.length === 0 ? ["First name required"] : []
+    ),
+    lastName: createMemo(() =>
+      state.lastName.length === 0 ? ["Last name required"] : []
+    ),
+    email: createMemo(() =>
+      state.email.length === 0 ? ["Email address required"] : []
+    ),
+    agreeTos: createMemo(() => (!state.agreeTos ? ["Check to continue"] : [])),
+  };
+
+  const submitEnabled = createMemo(
+    () =>
+      errors.firstName().length === 0 &&
+      errors.lastName().length === 0 &&
+      errors.email().length === 0 &&
+      errors.agreeTos().length === 0
+  );
+
+  const [isSubmitting, setSubmitting] = createSignal(false);
+  const [hasRemoteErrors, setRemoteErrors] = createSignal(false);
+
+  const onSubmit = () => {
+    setRemoteErrors(false);
+    setSubmitting(true);
+    // Simulate API call
+    setTimeout(() => {
+      setSubmitting(false);
+      setRemoteErrors(true);
+    }, 1500);
+  };
+
+  return (
+    <>
+      <Button onClick={open}>Open Signup</Button>
+
+      <Modal
+        size="sm"
+        open={isOpen()}
+        modalHeading="Signup for an Account"
+        hasForm
+        primaryButtonText="Create Account"
+        secondaryButtonText="Cancel"
+        onOpen={open}
+        onClose={close}
+        onSubmit={onSubmit}
+        onClickSecondaryButton={close}
+        primaryButtonDisabled={!submitEnabled()}
+      >
+        <p style="margin-bottom: 2rem">
+          If you already have an account, <Link href="/login">Login</Link>.
+        </p>
+
+        {isSubmitting() ? (
+          <Loading description="Submitting Registration" />
+        ) : undefined}
+
+        <Form>
+          <div style="min-height: 5.25rem">
+            <TextInput
+              labelText="First name"
+              placeholder="Enter first name"
+              value={() => [
+                () => state["firstName"],
+                (v) => setState("firstName", v),
+              ]}
+              invalid={visited.firstName && errors.firstName().length > 0}
+              invalidText={errors.firstName().join(". ")}
+              onBlur={() => setVisited("firstName", true)}
+              required
+            />
+          </div>
+
+          <div style="margin-top: 0.25rem; min-height: 5.25rem">
+            <TextInput
+              labelText="Last name"
+              placeholder="Enter last name"
+              value={() => [
+                () => state["lastName"],
+                (v) => setState("lastName", v),
+              ]}
+              invalid={visited.lastName && errors.lastName().length > 0}
+              invalidText={errors.lastName().join(". ")}
+              onBlur={() => setVisited("lastName", true)}
+              required
+            />
+          </div>
+
+          <div style="margin-top: 0.25rem; height: 5.25rem">
+            <TextInput
+              type="email"
+              labelText="Email"
+              placeholder="Enter your email address"
+              value={() => [() => state["email"], (v) => setState("email", v)]}
+              invalid={visited.email && errors.email().length > 0}
+              invalidText={errors.email().join(". ")}
+              onBlur={() => setVisited("email", true)}
+              required
+            />
+          </div>
+
+          <div style="margin-top: 0.25rem; min-height: 3.125rem;">
+            <Checkbox
+              labelText={
+                <span>
+                  I hereby agree to the{" "}
+                  <Link href="/terms">Terms of Service</Link>
+                </span>
+              }
+              checked={state.agreeTos}
+              setChecked={(v) => setState("agreeTos", v)}
+              invalid={visited.agreeTos && errors.agreeTos().length > 0}
+              invalidText={errors.agreeTos().join(". ")}
+              onBlur={() => setVisited("agreeTos", true)}
+            />
+          </div>
+        </Form>
+
+        <div style="min-height: 4.5rem; overflow: hidden;">
+          <Show when={hasRemoteErrors()}>
+            <InlineNotification
+              lowContrast
+              kind="error"
+              title="Registration failed!"
+              subtitle="Please retry"
+            />
+          </Show>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
 export const WithInlineLoadingOnSubmit = () => {
@@ -50,3 +213,5 @@ const [isOpen, setOpen] = createSignal(true);
   const close = () => setOpen(false);
-  const [primaryButtonText, setPrimaryButtonText] = createSignal("Create Account");
+  const [primaryButtonText, setPrimaryButtonText] = createSignal(
+    "Create Account"
+  );
   const [primaryButtonDisabled, setPrimaryButtonDisabled] = createSignal(false);
@@ -69,7 +234,13 @@
         onSubmit={() => {
-          setPrimaryButtonText(<InlineLoading style="margin-left: 1rem" status="active" description="Submitting" />);
+          setPrimaryButtonText(
+            <InlineLoading
+              style="margin-left: 1rem"
+              status="active"
+              description="Submitting"
+            />
+          );
           setPrimaryButtonDisabled(true);
           setTimeout(() => {
-           setPrimaryButtonText("Create Account");
-           setPrimaryButtonDisabled(false);
+            setPrimaryButtonText("Create Account");
+            setPrimaryButtonDisabled(false);
           }, 3000);
@@ -76,0 +247,0 @@ }}

src/components/TextInput/PasswordInput.stories.js

@@ -8,2 +8,69 @@ export default {
 
+export const Sizes = () => (
+  <>
+    <PasswordInput labelText="Small (sm)" size="sm" />
+    <PasswordInput labelText="Default" />
+    <PasswordInput labelText="Extra large (xl)" size="xl" />
+  </>
+);
+
+export const WithLabel = () => (
+  <PasswordInput labelText="This is the label" placeholder="Enter..." />
+);
+
+export const HiddenLabel = () => (
+  <PasswordInput
+    labelText="This is the label"
+    hideLabel
+    placeholder="Enter..."
+  />
+);
+
+export const WithHelperText = () => (
+  <PasswordInput helperText="This is the helper text" placeholder="Enter..." />
+);
+
+export const LabelAndHelperText = () => (
+  <PasswordInput
+    labelText="This is the label"
+    helperText="This is the helper text"
+    placeholder="Enter..."
+  />
+);
+
+export const Light = () => (
+  <PasswordInput light labelText="This is the label" placeholder="Enter..." />
+);
+
+export const Invalid = () => (
+  <PasswordInput
+    labelText="This is the label"
+    invalid
+    invalidText="Invalid text"
+    placeholder="Enter..."
+  />
+);
+
+export const Warn = () => (
+  <PasswordInput
+    labelText="This is the label"
+    warn
+    warnText="Warn text"
+    placeholder="Enter..."
+  />
+);
+
+export const Inline = () => (
+  <PasswordInput inline labelText="This is the label" />
+);
+
+export const InlineInvalid = () => (
+  <PasswordInput
+    inline
+    labelText="This is the label"
+    invalid
+    invalidText="Invalid text"
+  />
+);
+
 export const Example = () => {
@@ -18,5 +85,5 @@ const [password, setPassword] = createSignal("");
       invalidText="Minimum 4 characters"
-      value={[password, setPassword]}
+      value={() => [password, setPassword]}
     />
   );
 };

src/components/TextInput/TextInput.stories.js

@@ -8,2 +8,81 @@ export default {
 
+export const Sizes = () => (
+  <>
+    <TextInput labelText="Small (sm)" size="sm" />
+    <TextInput labelText="Default" />
+    <TextInput labelText="Extra large (xl)" size="xl" />
+  </>
+);
+
+export const WithLabel = () => (
+  <TextInput labelText="This is the label" placeholder="Enter..." />
+);
+
+export const HiddenLabel = () => (
+  <TextInput labelText="This is the label" hideLabel placeholder="Enter..." />
+);
+
+export const WithHelperText = () => (
+  <TextInput helperText="This is the helper text" placeholder="Enter..." />
+);
+
+export const LabelAndHelperText = () => (
+  <TextInput
+    labelText="This is the label"
+    helperText="This is the helper text"
+    placeholder="Enter..."
+  />
+);
+
+export const Light = () => (
+  <TextInput light labelText="This is the label" placeholder="Enter..." />
+);
+
+export const Invalid = () => (
+  <TextInput
+    labelText="This is the label"
+    invalid
+    invalidText="Invalid text"
+    placeholder="Enter..."
+  />
+);
+
+export const Warn = () => (
+  <TextInput
+    labelText="This is the label"
+    warn
+    warnText="Warn text"
+    placeholder="Enter..."
+  />
+);
+
+export const Fluid = () => (
+  <form class="bx--form bx--form--fluid">
+    <TextInput fluid placeholder="..." labelText="This is the label" />
+  </form>
+);
+
+export const FluidInvalid = () => (
+  <form class="bx--form bx--form--fluid">
+    <TextInput
+      fluid
+      invalid
+      invalidText="INVALID"
+      placeholder="..."
+      labelText="This is the label"
+    />
+  </form>
+);
+
+export const Inline = () => <TextInput inline labelText="This is the label" />;
+
+export const InlineInvalid = () => (
+  <TextInput
+    inline
+    labelText="This is the label"
+    invalid
+    invalidText="Invalid text"
+  />
+);
+
 export const Example = () => {
@@ -27,3 +106,3 @@ const [firstName, setFirstName] = createSignal("");
         warnText="More than 10 characters"
-        model={() => [firstName, setFirstName]}
+        value={() => [firstName, setFirstName]}
       />
@@ -37,3 +116,3 @@ <TextInput
         invalidText="Required"
-        model={() => [lastName, setLastName]}
+        value={() => [lastName, setLastName]}
       />
@@ -49,3 +128,3 @@
         onBlur={() => setLastNameVisited(true)}
-        model={() => [lastNameBlur, setLastNameBlur]}
+        value={() => [lastNameBlur, setLastNameBlur]}
       />
@@ -52,0 +131,0 @@ </>

src/utils.ts

@@ -10,2 +10,8 @@ import { splitProps, assignProps } from "solid-js";
 
+export type Signal<T> = [() => T, (v: T) => T];
+
+export function clamp(val: number, min: number, max: number): number {
+  return Math.max(min, Math.min(val, max));
+}
+
 export function extractProps(allProps, ownPropsDefaults) {
@@ -12,0 +18,0 @@ const ownKeys = Object.keys(

No alert changes

Improved metrics

Total package byte prevSize

2899160

increased by1.98%

Number of package files

128

increased by11.3%

Lines of code

30121

increased by6.52%

Number of lines in readme file

61

increased by5.17%

No dependency changes