@cashub/ui 0.22.9 → 0.22.10

package/src/form/SwitchButton.js

@@ -1,86 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const SwitchButton = ({
-  htmlFor,
-  text,
-  disabled,
-  checked = false,
-  onChange,
-}) => {
-  return (
-    <Label htmlFor={htmlFor} disabled={disabled}>
-      <Checkbox
-        onChange={() => {
-          onChange(checked ? 0 : 1);
-        }}
-        checked={checked}
-        type='checkbox'
-        id={htmlFor}
-        disabled={disabled}
-      />
-      <Switch>
-        <SwitchTrack checked={checked} />
-        <SwitchThumb checked={checked} />
-        {text}
-      </Switch>
-    </Label>
-  );
-};
-
-const Label = styled.label`
-  display: inline-block;
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `}
-`;
-
-const Checkbox = styled.input`
-  display: none;
-`;
-
-const Switch = styled.span`
-  color: var(--font-on-background);
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      opacity: 0.5;
-    `}
-`;
-
-const SwitchTrack = styled.div`
-  position: relative;
-  width: 32px;
-  height: 16px;
-  border-radius: var(--border-radius);
-  background: ${({ checked }) => {
-    return !checked ? 'var(--color-grey)' : 'var(--color-primary)';
-  }};
-  opacity: 0.5;
-  margin-right: calc(var(--spacing-xs) + 12px);
-  left: ${({ checked }) => (checked ? '0' : '12px')};
-`;
-
-const SwitchThumb = styled.span`
-  width: 24px;
-  height: 24px;
-  background: var(--color-grey);
-  border-radius: var(--border-radius-round);
-  position: absolute;
-  transition: 0.3s;
-
-  ${({ checked }) => {
-    return !checked
-      ? 'left: 0;'
-      : 'left: 20px;  background: var(--color-primary);';
-  }}
-`;
-
-export default SwitchButton;

package/src/form/Textarea.js

@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-import inputPlaceholder from '../styles/mixin/inputPlaceholder';
-import scrollbar from '../styles/mixin/scrollbar';
-
-const Textarea = styled.textarea`
-  display: block;
-  width: 100%;
-  border: var(--border-width) solid var(--border-color);
-  padding: 10px var(--spacing-s);
-  border-radius: var(--border-radius);
-  background: transparent;
-  color: var(--font-on-background);
-  transition: 0.3s;
-  line-height: 1.5;
-
-  /* disable resize because currently cannot fully control the resizer element */
-  resize: none;
-
-  ${scrollbar}
-
-  &:focus {
-    border: var(--border-width) solid var(--color-primary);
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  ${inputPlaceholder`
-    color: var(--font-on-mute);
-  `}
-`;
-
-export default Textarea;

package/src/form/TreeView.js

@@ -1,77 +0,0 @@
-import styled from 'styled-components';
-import Label from './Label';
-import Checkbox from './Checkbox';
-import Input from './Input';
-import { FlexContainer } from '../container';
-
-const TreeView = ({ data, onChange, onBlur }) => {
-  const renderList = (data, parentPath = []) => {
-    return (
-      <UnorderedList>
-        {data.map((item) => {
-          const id = `${parentPath.join('')}${item.id}`.replace(/\s/g, '');
-          const currentPath = parentPath.concat(item.id);
-
-          return (
-            <li key={item.id}>
-              {item.type === 'checkbox' && (
-                <Checkbox
-                  noMargin
-                  htmlFor={id}
-                  checked={item.value}
-                  text={item.text}
-                  onChange={(event) => {
-                    onChange(event, currentPath);
-                  }}
-                  disabled={item.disabled}
-                />
-              )}
-
-              {item.type === 'text' && (
-                <FlexContainer alignCenter>
-                  <Label noMarginBottom htmlFor={id}>
-                    {item.text}
-                  </Label>
-                  &nbsp;
-                  <Input
-                    autoWidth
-                    type='text'
-                    id={id}
-                    value={item.value}
-                    onChange={(event) => {
-                      onChange(event, currentPath);
-                    }}
-                    onBlur={(event) => {
-                      onBlur(event, currentPath);
-                    }}
-                    disabled={item.disabled}
-                  />
-                </FlexContainer>
-              )}
-
-              {item.children?.length > 0
-                ? renderList(item.children, parentPath.concat(item.id))
-                : null}
-            </li>
-          );
-        })}
-      </UnorderedList>
-    );
-  };
-
-  return renderList(data);
-};
-
-const UnorderedList = styled.ul`
-  color: var(--font-on-background);
-
-  ul {
-    margin-left: var(--spacing-s);
-  }
-
-  li {
-    margin-top: var(--spacing-xs);
-  }
-`;
-
-export default TreeView;

package/src/form/__stories__/Checkbox.stories.js

@@ -1,63 +0,0 @@
-import Checkbox from '../Checkbox';
-import { useState, useEffect } from 'react';
-
-const metadata = {
-  title: 'Form/Checkbox',
-  component: Checkbox,
-  decorators: [
-    (Story) => (
-      <div style={{ border: '2px solid #000' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    text: {
-      description: 'Checkbox text',
-    },
-    checked: {
-      description: 'choice checked or unchecked ',
-    },
-    noMargin: {
-      description: 'no margin',
-    },
-    fontSizeBig: {
-      description: 'font size',
-    },
-    onChange: {
-      description: 'onChange event',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(args.checked);
-  }, [args.checked]);
-
-  return (
-    <Checkbox
-      {...args}
-      onChange={() => {
-        setChecked(!checked);
-        onChange();
-      }}
-      checked={checked}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'Email',
-  disabled: false,
-  checked: false,
-  noMargin: false,
-  fontSizeBig: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/FormItem.stories.js

@@ -1,28 +0,0 @@
-import FormItem from '../FormItem';
-import Label from '../Label';
-import Textarea from '../Textarea';
-
-const metadata = {
-  title: 'Form/FormItem',
-  component: FormItem,
-};
-
-// fix:Stories for multiple components(adjust import Button.stories.js)
-// const Template = (args) => (
-//   <FormItem {...args}>
-//     <Label htmlFor="description">Description</Label>
-//     <Textarea id="description" rows="4" value="Content" maxLength="512" />
-//   </FormItem>
-// );
-// export const Default = Template.bind({});
-// Default.args = {};
-
-const Default = () => (
-  <FormItem>
-    <Label htmlFor='description'>Description</Label>
-    <Textarea id='description' rows='4' value='Content' maxLength='512' />
-  </FormItem>
-);
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Input.stories.js

@@ -1,30 +0,0 @@
-import Input from '../Input';
-
-const metadata = {
-  title: 'Form/Input',
-  component: Input,
-  argTypes: {
-    borderRadiusS: {
-      description: 'border radius size',
-    },
-    alignCenter: {
-      description: 'text align center',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Input {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Please fill up content',
-  disabled: false,
-  hidden: false,
-  borderRadiusS: false,
-  alignCenter: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Label.stories.js

@@ -1,38 +0,0 @@
-import Label from '../Label';
-
-const metadata = {
-  title: 'Form/Label',
-  component: Label,
-  decorators: [
-    (Story) => (
-      <div style={{ border: '2px solid #000' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    children: {
-      description: 'Label content',
-    },
-    required: {
-      description: 'required field ',
-    },
-    noMarginBottom: {
-      description: 'remove margin bottom',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Label {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'Label Text',
-  required: false,
-  noMarginBottom: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/MutedText.stories.js

@@ -1,27 +0,0 @@
-import MutedText from '../MutedText';
-
-const metadata = {
-  title: 'Form/MutedText',
-  component: MutedText,
-  argTypes: {
-    children: {
-      description: 'MutedText contents',
-    },
-    alignRight: {
-      description: 'text align right',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <MutedText {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'MutedText',
-  alignRight: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/RadioButton.stories.js

@@ -1,48 +0,0 @@
-import { useState, useEffect } from 'react';
-import RadioButton from '../RadioButton';
-
-const metadata = {
-  title: 'Form/RadioButton',
-  component: RadioButton,
-  argTypes: {
-    text: {
-      description: 'RadioButton name',
-    },
-    checked: {
-      description: 'choice checked or unchecked ',
-    },
-    onChange: {
-      description: 'onChange event',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(args.checked);
-  }, [args.checked]);
-
-  return (
-    <RadioButton
-      {...args}
-      onChange={() => {
-        setChecked(!checked);
-        onChange();
-      }}
-      checked={checked}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'All User',
-  disabled: false,
-  checked: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Searchbox.stories.js

@@ -1,24 +0,0 @@
-import Searchbox from '../Searchbox';
-
-const metadata = {
-  title: 'Form/Searchbox',
-  component: Searchbox,
-  argTypes: {
-    onSearch: {
-      description: 'onSearch is a function',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Searchbox {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  autoFocus: false,
-  border: true,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Slider.stories.js

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import Slider from '../Slider';
-
-const metadata = {
-  title: 'Form/Slider',
-  component: Slider,
-  argTypes: {
-    value: {
-      description: 'The initial value of the control',
-    },
-    min: {
-      description: 'The lowest value in the range of permitted values',
-    },
-    max: {
-      description: 'The greatest value in the range of permitted values',
-    },
-    onChange: {
-      description:
-        "This event is fired when the user modifies the element's value",
-    },
-    onBlur: {
-      desctiption: 'This event is fires when the element has lost focus',
-    },
-  },
-};
-
-const Template = ({ value, onChange, ...args }) => {
-  const [currentValue, setCurrentValue] = useState(value);
-
-  const handleChange = (event) => {
-    setCurrentValue(event.target.value);
-    onChange(event);
-  };
-
-  return <Slider value={currentValue} onChange={handleChange} {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  value: 10,
-  min: 0,
-  max: 50,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/SwitchButton.stories.js

@@ -1,48 +0,0 @@
-import SwitchButton from '../SwitchButton';
-import { useState, useEffect } from 'react';
-
-const metadata = {
-  title: 'Form/SwitchButton',
-  component: SwitchButton,
-  argTypes: {
-    text: {
-      description: 'SwitchButton item',
-    },
-    checked: {
-      description: 'choice checked or unchecked ',
-    },
-    onChange: {
-      description: 'onChange event',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(args.checked);
-  }, [args.checked]);
-
-  return (
-    <SwitchButton
-      {...args}
-      onChange={() => {
-        setChecked(!checked);
-        onChange();
-      }}
-      checked={checked}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'Life Service',
-  disabled: false,
-  checked: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/Textarea.stories.js

@@ -1,19 +0,0 @@
-import Textarea from '../Textarea';
-
-const metadata = {
-  title: 'Form/Textarea',
-  component: Textarea,
-};
-
-const Template = (args) => {
-  return <Textarea {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Please fill up content',
-  disabled: false,
-};
-
-export default metadata;
-export { Default };

package/src/form/__stories__/TreeView.stories.js

@@ -1,76 +0,0 @@
-import TreeView from '../TreeView';
-
-const metadata = {
-  title: 'Form/TreeView',
-  component: TreeView,
-  argTypes: {
-    data: {
-      description: '',
-    },
-    onChange: {
-      description:
-        "This event is fired when the user modifies the element's value",
-    },
-    onBlur: {
-      desctiption: 'This event is fires when the element has lost focus',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <TreeView {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  data: [
-    {
-      id: 'Parent Checkbox',
-      text: 'Parent Checkbox',
-      type: 'checkbox',
-      disabled: false,
-      value: true,
-      children: [
-        {
-          id: 'Child Checkbox 1',
-          text: 'Child Checkbox 1',
-          type: 'checkbox',
-          disabled: false,
-          value: true,
-        },
-        {
-          id: 'Child Checkbox 2',
-          text: 'Child Checkbox 2 (Disabled)',
-          type: 'checkbox',
-          disabled: true,
-          value: false,
-        },
-        {
-          id: 'Child Input 1',
-          text: 'Child Input 1',
-          type: 'text',
-          disabled: false,
-          value: '',
-        },
-        {
-          id: 'Child Input 2',
-          text: 'Child Input 2 (Disabled)',
-          type: 'text',
-          disabled: true,
-          value: '',
-        },
-      ],
-    },
-    { id: 'Input', text: 'Input', type: 'text', disabled: false, value: '' },
-    {
-      id: 'Checkbox',
-      text: 'Checkbox',
-      type: 'checkbox',
-      disabled: false,
-      value: true,
-    },
-  ],
-};
-
-export default metadata;
-export { Default };