@edvisor/product-language 0.2.0 → 0.3.1

package/src/lib/components/molecules/button/stories/components.tsx

@@ -1,86 +0,0 @@
-
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { InputField } from '../../../input-field'
-import { Button, ButtonPrimary } from '../button'
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [invalid, setInvalid] = useState(false);
-
-<form onSubmit={(e) => e.preventDefault()}>
-  <label htmlFor="country_code">Country code:</label>
-  <InputField 
-    type="text" 
-    placeholder="Enter a country code..."
-    id="country_code"
-    name="country_code"
-    pattern="[A-Za-z]{3}"
-    onInvalid={setInvalid}
-    invalid={invalid}
-    onChange={() => setInvalid(false)}
-    title="Three letter country code"
-    required
-  />
-  <div style={{display:'flex', gap:'8px'}}>
-    <ButtonBasic type="reset">Clear</ButtonBasic>
-    <ButtonPrimary type="submit">Send</ButtonPrimary>
-  </div>
-</form>  
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        ButtonBasic: Button,
-        ButtonPrimary
-      },
-    }}
-  />
-)
-
-export const DisabledLoadingExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [invalid, setInvalid] = useState(false);
-const [disabled, setDisabled] = useState(true);
-const [loading, setLoading] = useState(false);
-
-<form onSubmit={(e) => {
-  e.preventDefault();
-  setLoading(true)
-  setTimeout(() => setLoading(false), 2000)
-}}>
-  <label htmlFor="country_code">Country code:</label>
-  <InputField 
-    type="text" 
-    placeholder="Enter a country code..."
-    id="country_code"
-    name="country_code"
-    pattern="[A-Za-z]{3}"
-    onInvalid={setInvalid}
-    invalid={invalid}
-    onChange={() => { 
-      setInvalid(false);
-      setDisabled(false); 
-    }}
-    title="Three letter country code"
-    required
-  />
-  <div style={{display:'flex', gap:'8px'}}>
-    <ButtonPrimary type="submit" disabled={disabled} loading={loading}>Send</ButtonPrimary>
-  </div>
-</form>  
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        ButtonBasic: Button,
-        ButtonPrimary
-      },
-    }}
-  />
-)

package/src/lib/components/molecules/index.ts

@@ -1,3 +0,0 @@
-export * from './avatar'
-export * from './button'
-export * from './input-checkbox'

package/src/lib/components/molecules/input-checkbox/index.tsx

@@ -1 +0,0 @@
-export * from './input-checkbox'

package/src/lib/components/molecules/input-checkbox/input-checkbox.test.tsx

@@ -1,34 +0,0 @@
-import {render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { InputCheckbox } from './input-checkbox'
-
-describe('InputCheckbox Tests', () => {
-  it('should render the component and handle event after click', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <InputCheckbox
-        label='My Checkbox'
-        onChange={spyOnChange}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('checkbox')
-    expect(screen.getByText('My Checkbox')).toBeInTheDocument()
-    expect(myComponent).toBeInTheDocument()
-
-    await userEvent.click(myComponent)
-
-    expect(spyOnChange).toHaveBeenCalled()
-  })
-  it('should not render the component if dont receive a label', async () => {
-    const { container } = render(
-      <InputCheckbox
-        label=''
-      />
-    )
-
-
-    expect(container).toBeEmptyDOMElement()
-  })
-})

package/src/lib/components/molecules/input-checkbox/input-checkbox.tsx

@@ -1,50 +0,0 @@
-import { useState } from 'react'
-import styled from 'styled-components'
-import { FC, isDefined, isEmpty, Nothing } from '@helpers'
-import { Margin } from '@foundations'
-import { Checkbox, ICheckboxProps } from '../../checkbox'
-import { Label1 } from 'components/typography'
-import { Flex } from 'components/layout'
-
-const Text = styled(Label1)`
-  margin-left: ${Margin.s};
-  user-select: none;
-`
-const Wrapper = styled(Flex)`
-  width: 100%;
-  align-items: center;
-`
-interface IInputCheckboxProps {
-  label: string
-}
-
-export type IInputCheckbox = IInputCheckboxProps & ICheckboxProps
-
-export const InputCheckbox: FC<IInputCheckbox> = (props) => {
-  const { onChange, label = '', disabled = false, error = false, checked = false } = props
-  const [isChecked, setIsChecked] = useState(checked)
-  if (isEmpty(label)) {
-    return <Nothing />
-  }
-
-  const handleOnChange = () => {
-    setIsChecked(!isChecked)
-    if(isDefined(onChange)){
-      onChange(!isChecked)
-    }
-  }
-
-  return (
-    <Wrapper>
-      <Checkbox
-        {...props}
-        onChange={handleOnChange}
-        onClick={handleOnChange}
-        disabled={disabled}
-        error={error}
-        checked={isChecked}
-      />
-      <Text>{label}</Text>
-    </Wrapper>
-  )
-}

package/src/lib/components/molecules/input-checkbox/stories/components.tsx

@@ -1,36 +0,0 @@
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { InputCheckbox } from '../index'
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [withError, setWithError] = useState(false);
-
-<form onSubmit={(e) => {
-    e.preventDefault()
-    console.log('form submitted')
-  }}
->
-  <InputCheckbox
-    onInvalid={(e) => {
-      setWithError(true)
-    }}
-    error={withError}
-    onChange={(e) => {
-      console.log('at stories', e)
-      setWithError(false)
-    }}
-    label="My label"
-    required />
-  <input type="submit"/>
-</form>
-`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputCheckbox,
-      },
-    }}
-  />
-)

package/src/lib/components/molecules/input-checkbox/stories/index.tsx

@@ -1 +0,0 @@
-export * from './components'

package/src/lib/components/molecules/input-checkbox/stories/input-checkbox.stories.mdx

@@ -1,51 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { InputCheckbox } from '../index'
-import { PlainHTMLFormExample } from './index'
-
-<Meta
-  title="Components/InputCheckbox"
-  component={InputCheckbox}
-/>
-
-# InputCheckbox
-
-This is a molecule, composed by the atoms checkbox input and typography as well.
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
-
-## How to use
-
-```javascript
-// Import the component
-import { InputCheckbox } from './index'
-
-
-// Render the component sending the required parameters
-<InputCheckbox label="MY-TEXT-HERE" />
-```
-
-## Examples
-
-<Canvas>
-  <InputCheckbox label="My label" onChange={(e) => console.log('at stories', e)} />
-  <InputCheckbox label="My label" disabled />
-  <InputCheckbox label="My label" error />
-  <InputCheckbox label="My label" checked />
-  <InputCheckbox label="My label" error checked />
-</Canvas>
-
-
-## API
-You can send all the possible values from Checkbox component.
-Also, you can sen this parameters:
-
-
-| Name | Type | Description | Required (Y/N)|
-| ---- | ----- | ------ | ------- |
-| `label` | `string` | `The label from the checkbox` | `Y` |
-| `onChange` | `event` | `You can listen the changes from the component` | `N` |
-
-
-## Playground
-
-<PlainHTMLFormExample />

package/src/lib/components/organisms/index.ts

@@ -1 +0,0 @@
-export * from './multi-choice-list'

package/src/lib/components/organisms/multi-choice-list/index.tsx

@@ -1 +0,0 @@
-export * from './multi-choice-list'

package/src/lib/components/organisms/multi-choice-list/multi-choice-list.test.tsx

@@ -1,33 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { MultiChoiceList } from './multi-choice-list'
-
-describe('MultiChoiceList Tests', () => {
-  it('should render the amount of checkbox matching with the options size', async () => {
-    render(
-      <MultiChoiceList options={[
-        {
-          label: 'My Awesome label',
-          id: 'My checkbox 1',
-          checked: true,
-          error: true,
-          helpfulMessage: 'Alternative text here',
-        },
-        {
-          label: 'My Awesome label',
-          id: 'My checkbox 2'
-        },
-      ]}
-      />
-    )
-
-    expect(screen.getByText('Alternative text here')).toBeInTheDocument()
-    expect(screen.getAllByRole('checkbox').length).toBe(2)
-  })
-  it('should not render anything if dont send valid options', async () => {
-    render(
-      <MultiChoiceList options={[]}
-      />
-    )
-    expect(screen.queryAllByRole('checkbox').length).toBe(0)
-  })
-})

package/src/lib/components/organisms/multi-choice-list/multi-choice-list.tsx

@@ -1,53 +0,0 @@
-import styled from 'styled-components'
-import { FC, isDefined, isEmpty, Nothing } from '@helpers'
-import { Text , Margin } from '@foundations'
-import { Flex } from 'components/layout'
-import { Label1 } from 'components/typography'
-import { InputCheckbox, IInputCheckbox } from '../../molecules/input-checkbox'
-
-const HelpfulMessage = styled(Label1)`
-  margin-top: ${Margin.xxs};
-  margin-left: ${Margin.xl};
-  color: ${Text.Subdued};
-  user-select: none;
-`
-const Group = styled(Flex)`
-  width: 100%;
-  flex-direction: column;
-  gap: 18px;
-`
-interface IOption extends IInputCheckbox {
-  id: string
-  helpfulMessage?: string
-}
-interface IMultiChoiceList {
-  options: IOption[]
-}
-
-export const MultiChoiceList: FC<IMultiChoiceList> = (props: IMultiChoiceList) => {
-  const { options } = props
-
-  if (isEmpty(options)) {
-    return <Nothing />
-  }
-  return (
-    <Group role="group">
-      {options.map((option:IOption) => (
-        <div key={option.id}>
-          <InputCheckbox
-            aria-describedby={isDefined(option.helpfulMessage)
-              ? `${option.id}-id`
-              : ''
-            }
-            {...option}
-          />
-          {isDefined(option.helpfulMessage) && (
-            <HelpfulMessage id={`${option.id}-id`}>
-              {option.helpfulMessage}
-            </HelpfulMessage>
-          )}
-        </div>
-      ))}
-    </Group>
-  )
-}

package/src/lib/components/organisms/multi-choice-list/stories/components.tsx

@@ -1,126 +0,0 @@
-import { Body, Heading4 } from '@components'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { MultiChoiceList } from '../index'
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [withError, setWithError] = useState(false);
-
-<form onSubmit={(e) => {
-    e.preventDefault()
-    console.log('form submitted')
-  }}
->
-  <MultiChoiceList options={[
-    {
-      label: "My Awesome label",
-      id: 'My checkbox 1',
-      required: true,
-      error: withError,
-      helpfulMessage: 'Alternative text here',
-      onInvalid: function(e){
-        setWithError(true);
-      },
-      onChange: function(e){
-        console.log('at stories', e);
-        setWithError(false);
-      }
-    },
-    {
-      label: "My Awesome label",
-      id: 'My checkbox 2',
-      checked: true,
-      helpfulMessage: 'Alternative text here',
-    },
-  ]}
-  />
-  <input type="submit"/>
-</form>
-`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        MultiChoiceList,
-      },
-    }}
-  />
-)
-
-export const ExampleWithStateManagement = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const Locations = [
-  {
-    label: "Vancouver, BC",
-    id: 1,
-  },
-  {
-    label: "Toronto, ON",
-    id: 2,
-  },
-  {
-    label: "Quebec, QC",
-    id: 3,
-  },
-  {
-    label: "Montreal, QC",
-    id: 4,
-  },
-];
-const [locations, setLocations] = useState([]);
-const [withError, setWithError] = useState(false);
-
-const options = Locations.map((location) => {
-  return {
-    ...location,
-    checked: locations.find((l) => l.id === location.id),
-    onChange: (checked) => {
-      if (checked) {
-        setLocations([
-          ...locations,
-          location,
-        ])
-      } else {
-        const i = locations.findIndex((l) => l.id === location.id)
-        locations.splice(i, 1)
-        setLocations([
-          ...locations
-        ])
-      }
-    }
-  }
-});
-
-<>
-  <form onSubmit={(e) => {
-      e.preventDefault()
-      console.log('locations', locations)
-    }}
-  >
-    <MultiChoiceList options={options}
-    />
-    <input type="submit"/>
-  </form>
-  <div>
-    <Heading4>Your Selection</Heading4>
-    {locations.map((location) => {
-      return (
-        <Body key={location.id}>{location.label}</Body>
-      )
-    })}
-  </div>
-</>
-`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        MultiChoiceList,
-        Heading4,
-        Body,
-      },
-    }}
-  />
-)

package/src/lib/components/organisms/multi-choice-list/stories/index.tsx

@@ -1 +0,0 @@
-export * from './components'

package/src/lib/components/organisms/multi-choice-list/stories/multi-choice-list.stories.mdx

@@ -1,99 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { MultiChoiceList } from '../index'
-import { PlainHTMLFormExample, ExampleWithStateManagement } from './index'
-
-<Meta
-  title="Components/MultiChoiceList"
-  component={MultiChoiceList}
-/>
-
-# MultiChoiceList
-
-This is a organism, composed by checkbox molecule and some atoms.
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1097%3A2349)
-
-## How to use
-
-```javascript
-// Import the component
-import { MultiChoiceList } from './index'
-
-
-// Render the component sending the required parameters
-<MultiChoiceList options={[
-  {
-    label: 'My Awesome label',
-    checked: true,
-    id: '1',
-  }]
-/>
-```
-## Examples
-
-<Canvas>
-  <MultiChoiceList options={[
-    {
-      label: "My Awesome label",
-      checked: true,
-      id: '1',
-    },
-    {
-      label: "My label",
-      id: '2',
-    },
-    {
-      label: "My label",
-      id: '3',
-    },
-    {
-      label: "My label",
-      id: '4',
-    },
-  ]}/>
-</Canvas>
-
-Also, you can send the altive text in order to helping user
-<Canvas>
-  <MultiChoiceList options={[
-    {
-      label: "My Awesome label",
-      id: 'My checkbox 1',
-      checked: true,
-      error: true,
-      helpfulMessage: 'Alternative text here',
-    },
-    {
-      label: "My Awesome label",
-      id: 'My checkbox 2',
-      helpfulMessage: 'Alternative text here',
-    },
-    {
-      label: "My Awesome label",
-      id: 'My checkbox 3',
-      helpfulMessage: 'Alternative text here',
-    }
-  ]}/>
-</Canvas>
-
-
-## API
-This component receive a list (`options` parameter) from N amount of Checkbox if you'd like to render.
-So all the possible values from Checkbox component can be passed here.
-Also, you can sen this parameters:
-
-| Name | Type | Description | Required (Y/N)|
-| ---- | ----- | ------ | ----- |
-| `id` | `string` | `The id from each checkbox in the list` | `Y` |
-| `helpfulMessage` | `string` | `Message that will be render bellow each checkbox field` | `N` |
-
-## Playground
-
-<PlainHTMLFormExample />
-
-### With State Management Example
-
-<ExampleWithStateManagement />
-
-## Changelog
- - Offer the "indeterminate" behavior to render this list nesting

package/src/lib/components/spinner/index.tsx

@@ -1 +0,0 @@
-export * from './spinner'

package/src/lib/components/spinner/spinner-size-flags.tsx

@@ -1,39 +0,0 @@
-import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
-
-const enum SpinnerSize {
-  small = 1,
-  medium = 2,
-  large = 4,
-}
-
-type SpinnerSizes<T> = MappedEnum<typeof SpinnerSize, T>
-
-function toSpinner(n: number): SpinnerSize {
-  switch (n) {
-    case SpinnerSize.small:
-      return SpinnerSize.small
-    case SpinnerSize.medium:
-      return SpinnerSize.medium
-    case SpinnerSize.large:
-      return SpinnerSize.large
-    default:
-      return SpinnerSize.medium
-  }
-}
-
-const SpinnerValues = {
-  [SpinnerSize.small]: '18px',
-  [SpinnerSize.medium]: '40px',
-  [SpinnerSize.large]: '60px',
-}
-
-export type SpinnerProps = Partial<RequireOnlyOne<SpinnerSizes<boolean>>> &
-  PropsWithChildren
-
-export function getValuesBySize(props: SpinnerProps): string {
-  return SpinnerValues[
-    toSpinner(
-      bitwiseOr([props.small, props.medium, props.large])
-    )
-  ]
-}

package/src/lib/components/spinner/spinner.test.tsx

@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { Spinner } from './index'
-
-describe('Spinner Tests', () => {
-  describe('Spinner Tests', () => {
-    it('should render the Spinner with default size', async () => {
-      render(
-        <Spinner />
-      )
-
-      const spinner = screen.getByRole('progressbar')
-
-      expect(spinner).toBeInTheDocument()
-      expect(spinner).toHaveStyle('height: 40px')
-      
-    })
-
-    it('should render the Spinner with small size', async () => {
-      render(
-        <Spinner small/>
-      )
-
-      const spinner = screen.getByRole('progressbar')
-
-      expect(spinner).toBeInTheDocument()
-      expect(spinner).toHaveStyle('height: 18px')
-      
-    })
-
-  })
-})