contentoh-components-library 21.1.97 → 21.2.0

package/src/components/atoms/Graphic/styles.js

@@ -1,4 +1,3 @@
 import styled from "styled-components";
 
-export const Container = styled.div`
-`;
+export const Container = styled.div``;

package/src/components/atoms/MetricCard/MetricCard.stories.js

@@ -0,0 +1,14 @@
+import { MetricCard } from "./index";
+
+export default {
+  title: "Components/atoms/MetricCard",
+  component: MetricCard,
+};
+
+const Template = (args) => <MetricCard {...args} />;
+export const MetricCardDefault = Template.bind({});
+
+MetricCardDefault.args = {
+  label: "Productos Totales",
+  number: 2367,
+};

package/src/components/atoms/MetricCard/index.js

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+
+export const MetricCard = ({ label, number }) => {
+  return (
+    <Container>
+      <p>{label}</p>
+      <p>{number}</p>
+    </Container>
+  );
+};

package/src/components/atoms/MetricCard/styles.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  padding: 10px 20px;
+  border: 1px solid ${GlobalColors.s3};
+  width: fit-content;
+  text-align: center;
+  border-radius: 10px;
+
+  p {
+    color: #000;
+    font-size: 25px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 25px;
+    font-feature-settings: "pnum", "lnum";
+
+    &:first-of-type {
+      color: ${GlobalColors.s3};
+      font-family: ${FontFamily.Raleway};
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 13px;
+    }
+
+    & + * {
+      margin-top: 3px;
+    }
+  }
+`;

package/src/components/atoms/MetricSelect/MetricSelect.stories.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { MetricSelect } from ".";
+
+export default {
+  title: "Components/atoms/MetricSelect",
+  component: MetricSelect,
+};
+
+const Template = (args) => {
+  const [optionSelected, setSelectedOption] = useState("Semana actual");
+  const onChange = (e) => {
+    setSelectedOption(e.target.value);
+  };
+  return (
+    <MetricSelect
+      {...args}
+      optionSelected={optionSelected}
+      onChange={onChange}
+    />
+  );
+};
+export const MetricSelectDefault = Template.bind({});
+MetricSelectDefault.args = {
+  options: [
+    "12/12/12",
+    "12/12/13",
+    "12/12/14",
+    "12/12/15",
+    "12/12/16",
+    "12/12/17",
+    "12/12/18",
+    "12/12/19",
+    "12/12/20",
+    "12/12/21",
+    "12/12/22",
+  ],
+};

package/src/components/atoms/MetricSelect/index.js

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+
+export const MetricSelect = ({
+  options,
+  optionSelected,
+  onChange,
+  label,
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      <select value={optionSelected} onChange={onChange}>
+        <option value="">{label}</option>
+        {options?.map((option) => (
+          <option key={option.name} value={option.id}>
+            {option.name}
+          </option>
+        ))}
+      </select>
+    </Container>
+  );
+};

package/src/components/atoms/MetricSelect/styles.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.s2};
+  width: fit-content;
+  display: block;
+  padding-right: 10px;
+  border-radius: 5px;
+
+  select {
+    color: ${GlobalColors.s4};
+    outline: none;
+    padding: 10px;
+    background-color: transparent;
+    border: none;
+    option:first-of-type {
+    }
+  }
+`;

package/src/components/organisms/Calendar/Calendar.stories.js

@@ -0,0 +1,10 @@
+import { Calendar } from ".";
+
+export default {
+  title: "Components/organisms/Calendar",
+  component: Calendar,
+};
+
+const Template = (args) => <Calendar {...args} />;
+export const CalendarDefault = Template.bind({});
+CalendarDefault.args = {};

package/src/components/organisms/Calendar/index.js

@@ -0,0 +1,17 @@
+import { Container } from "./styles";
+import DatePicker from "react-datepicker";
+import { useState } from "react";
+
+export const Calendar = ({ onChange, startDate, endDate }) => {
+  return (
+    <Container>
+      <DatePicker
+        selected={startDate}
+        onChange={onChange}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+      />
+    </Container>
+  );
+};