imbric-theme 0.1.0

package/atoms/Picture/Picture.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+import styles from './Picture.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Picture = ({
+  getStyles,
+  src,
+  width,
+  height,
+  isRounded,
+  withBorder,
+  isHref,
+}) => (
+  <picture
+    className={getStyles('picture', {
+      'is-rounded': isRounded,
+      'with-border': withBorder,
+    })}
+  >
+    <Link href={isHref} passHref>
+      <img src={src} style={{ height, maxWidth: width }} />
+    </Link>
+
+  </picture>
+)
+
+Picture.propTypes = {
+  src: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  isRounded: PropTypes.bool,
+  withBorder: PropTypes.bool,
+  isHref: PropTypes.any
+}
+
+Picture.defaultProps = {
+  height: 'auto',
+  withBorder: false,
+  getStyles: () => { },
+  isHref: ''
+}
+
+export default withStyles(styles)(Picture)

package/atoms/Picture/Picture.module.css

@@ -0,0 +1,16 @@
+.picture {
+  user-select: none;
+}
+
+.picture img {
+  display: block;
+  width: 100%;
+}
+
+.is-rounded img {
+  border-radius: var(--border-radius-full);
+}
+
+.with-border img {
+  border: var(--picture-border);
+}

package/atoms/Picture/Picture.stories.js

@@ -0,0 +1,32 @@
+import { Picture, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Picture, styles)
+
+export default {
+  title: 'Atoms/Picture',
+  component: Picture,
+  args: {
+    src: 'https://picsum.photos/id/1033/400/400',
+    width: 200,
+  },
+  argTypes: {
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Rounded = Template.bind({})
+Rounded.args = { isRounded: true }
+
+export const Border = Template.bind({})
+Border.args = { withBorder: true }
+
+export const Height = Template.bind({})
+Height.args = { src: 'https://picsum.photos/id/1033/400/800', height: 400 }
+
+export const Width = Template.bind({})
+Width.args = { src: 'https://picsum.photos/id/1033/800/400', width: 400 }

package/atoms/Picture/__snapshots__/Picture.stories.js.snap

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Picture Border 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture with-border"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Height 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/800"
+      style={
+        Object {
+          "height": 400,
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Rounded 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture is-rounded"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Width 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture"
+  >
+    <img
+      src="https://picsum.photos/id/1033/800/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 400,
+        }
+      }
+    />
+  </picture>
+</div>
+`;

package/atoms/Picture/index.js

@@ -0,0 +1,2 @@
+export { default, Picture } from './Picture'
+export { default as styles } from './Picture.module.css'

package/atoms/Tab/Tab.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Tab.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const Tab = ({ getStyles, children, activeTab, viewTab, onClick }) => {
+
+  if (viewTab) {
+    return (
+      <>
+        <li className={getStyles('tab', { 'active': activeTab })} onClick={onClick && handleClick({ onClick })}>
+          {children}
+        </li>
+      </>
+    )
+
+  } else {
+    null
+  }
+}
+
+Tab.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  activeTab: PropTypes.bool.isRequired,
+  viewTab: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+Tab.defaultProps = {
+  getStyles: () => { },
+  onClick: () => { },
+}
+
+export default withStyles(styles)(Tab)

package/atoms/Tab/Tab.module.css

@@ -0,0 +1,17 @@
+.tab {
+  display: flex;
+  font-size: var(--font-size-base);
+  cursor: pointer;
+  color: var(--color-font-highlight);
+  padding: 1.1em 1.5em;
+}
+
+.tab:hover {
+  color: var(--color-primary);
+  border-bottom: 2px solid  var(--color-primary);
+}
+
+.tab.active {
+  color: var(--color-primary);
+  border-bottom: 2px solid  var(--color-primary);
+}

package/atoms/Tab/Tab.stories.js

@@ -0,0 +1,27 @@
+import { Tab, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Tab, styles)
+const ListTemplate = getListTemplate(Tab, styles)
+
+export default {
+  title: 'Atoms/Tab',
+  component: Tab,
+  args: {
+    children: 'Taksee',
+    activeTab: false,
+    viewTab: true,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/atoms/Tab/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/atoms/Tab/index.js

@@ -0,0 +1,3 @@
+export { default, Tab } from './Tab'
+export { options } from './constants'
+export { default as styles } from './Tab.module.css'

package/atoms/Textarea/Textarea.js

@@ -0,0 +1,137 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import ReactTooltip from 'react-tooltip'
+import styles from './Textarea.module.css'
+import withStyles from '../../hocs/withStyles'
+
+const DEFAULT_TEXTAREA_ROWS = 5
+
+import Icon from '../../atoms/Icon'
+
+export const Textarea = ({
+  children,
+  rows,
+  placeholder,
+  onChange,
+  getStyles,
+  value,
+  id,
+  disabled,
+  viewBoxCopyCode,
+  txtBtnCopyCode,
+  txtTootipCopyCode,
+}) => {
+
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+  const handleClick = async () => {
+
+    // // Select the text field
+    // txtTootipCopyCode.select()
+    // txtTootipCopyCode.setSelectionRange(0, 99999) // For mobile devices
+
+    // // Copy the text inside the text field
+    // navigator.clipboard.writeText(txtTootipCopyCode.value)
+
+    // // Alert the copied text
+    // alert("Copied the text: " + txtTootipCopyCode.value)
+
+
+
+
+    try {
+      await navigator.clipboard.writeText(txtTootipCopyCode);
+      console.log('Content copied to clipboard');
+      /* Resolved - text copied to clipboard successfully */
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+      /* Rejected - text failed to copy to the clipboard */
+    }
+
+
+
+
+  }
+
+  return (
+    <>
+      {viewBoxCopyCode ?
+        <>
+          <span
+            data-tip
+            data-for='tooltipCopyCode'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            style={{ width: 'max-content', display: 'block' }}
+          >
+            <>
+              <div className={getStyles('boxCopyCode')}>
+                <Icon
+                  name="infoExampleCode"
+                />
+                <div className={getStyles('btnCopyCode')} onClick={handleClick}>
+                  {txtBtnCopyCode}
+                </div>
+              </div>
+            </>
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='tooltipCopyCode' type='error'>
+              <span>{txtTootipCopyCode}</span>
+            </ReactTooltip>
+          ) : null}
+
+        </>
+
+        : null}
+      <textarea
+        id={id}
+        className={getStyles('textarea')}
+        rows={rows}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={value}
+        disabled={disabled}
+      >
+        {children}
+      </textarea>
+    </>
+  )
+}
+
+Textarea.propTypes = {
+  children: PropTypes.node,
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  rows: PropTypes.number,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  viewBoxCopyCode: PropTypes.bool,
+  txtBtnCopyCode: PropTypes.string,
+  txtTootipCopyCode: PropTypes.string,
+}
+
+Textarea.defaultProps = {
+  getStyles: () => { },
+  onChange: () => { },
+  rows: DEFAULT_TEXTAREA_ROWS,
+  id: '',
+  disabled: false,
+  viewBoxCopyCode: false,
+  txtBtnCopyCode: 'COPIAR',
+  txtTootipCopyCode: 'yeeeee'
+}
+
+export default withStyles(styles)(Textarea)

package/atoms/Textarea/Textarea.module.css

@@ -0,0 +1,54 @@
+.textarea {
+  display: flex;
+  width: 100%;
+  /* min-height: 100px; */
+  padding: 20px;
+  border: var(--border-width-thin) solid var(--color-cool-gray-200);
+  background: var(--input-background);
+  border-radius: var(--textarea-border-radius);
+  box-shadow: var(--box-shadow-sm);
+  color: var(--color-font-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--paragraph-font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  resize: vertical;
+}
+
+.textarea::placeholder {
+  color: var(--color-font-highlight);
+}
+
+.textarea:focus {
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+}
+
+.textarea:disabled {
+  background-color: hsl(0, 0%, 95%);
+  border-color: hsl(0, 0%, 90%);
+}
+
+.boxCopyCode {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  /* margin-top: -44px; */
+  /* position: absolute; */
+  /* top: 108px;
+  right: 24px; */
+}
+
+.btnCopyCode {
+  font-size: 10px;
+  border: 1px solid var(--color-font-base);
+  padding: 3px;
+  border-radius: 3px;
+  color: var(--color-font-base);
+}
+
+.btnCopyCode:hover {
+  border: 1px solid var(--color-font-base);
+  color: #fff;
+  background-color: var(--color-font-base);
+}

package/atoms/Textarea/Textarea.stories.js

@@ -0,0 +1,16 @@
+import { Textarea, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Textarea, styles)
+
+export default {
+  title: 'Atoms/Textarea',
+  component: Textarea,
+  args: {
+    placeholder:
+      'Country speed seat newfound ah stained Gundabad stinking runt.',
+  },
+}
+
+export const Default = Template.bind({})

package/atoms/Textarea/__snapshots__/Textarea.stories.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Textarea Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <textarea
+    className="textarea"
+    onChange={[Function]}
+    placeholder="Country speed seat newfound ah stained Gundabad stinking runt."
+    rows={5}
+  />
+</div>
+`;

package/atoms/Textarea/index.js

@@ -0,0 +1,2 @@
+export { default, Textarea } from './Textarea'
+export { default as styles } from './Textarea.module.css'

package/atoms/Toggle/Toggle.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Toggle.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Toggle = ({ getStyles, onChangeCheckbox, disabled, id, checked, name }) => {
+
+  // const [isChecked, setIsChecked] = useState(false);
+
+  // const handleOnChange = () => {
+  //   setIsChecked(!isChecked)
+  // };
+
+
+  return <div className={getStyles('toggle')}>
+
+    <input
+      type="checkbox"
+      id={id}
+      name={name}
+      disabled={disabled}
+      // checked={isChecked || checked}
+      checked={checked}
+      onChange={(e) => {
+        // handleOnChange()
+        onChangeCheckbox(e)
+      }}
+      className={getStyles('toggle-item')}
+    />
+    <label htmlFor={id} className={getStyles('checkbox-custom-label')}></label>
+
+
+  </div>
+}
+
+Toggle.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onChangeCheckbox: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+}
+
+Toggle.defaultProps = {
+  getStyles: () => { },
+  onChangeCheckbox: () => { },
+  id: 'toggle',
+  name: 'toggle',
+  checked: false,
+  disabled: false,
+}
+
+
+export default withStyles(styles)(Toggle)

package/atoms/Toggle/Toggle.module.css

@@ -0,0 +1,41 @@
+.toggle {
+  display: flex;
+}
+
+.toggle-item {
+  opacity: 0;
+  width: 3em;
+  height: 1.4em;
+  position: absolute;
+  z-index: 1;
+  cursor: pointer;
+}
+.toggle-item + .checkbox-custom-label {
+  display: flex;
+  width: 4em;
+  height: 2em;
+  background: #aaa;
+  border-radius: 50px;
+  position: relative;
+  transition: all .3s ease;
+  cursor: pointer;
+  box-shadow: inset 0 0 5px #222;
+}
+.toggle-item + .checkbox-custom-label:after {
+  content: '';
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  background: #fff;
+  border-radius: 50%;
+  top: .25em;
+  left: .25em;
+  transition: all .2s ease;
+}
+.toggle-item:checked + .checkbox-custom-label {
+  background: var(--color-tertiary);
+  box-shadow: inset 0 0 5px rgb(95, 95, 95);
+}
+.toggle-item:checked + .checkbox-custom-label:after {
+  left: 2.3em;
+}