@faststore/core 0.3.6 → 0.3.7

package/src/components/ui/Checkbox/Checkbox.tsx

@@ -1,20 +0,0 @@
-import { Checkbox as UICheckbox } from '@faststore/ui'
-import type { CheckboxProps as UICheckboxProps } from '@faststore/ui'
-
-import styles from './checkbox.module.scss'
-
-export type CheckboxProps = {
-  partial?: boolean
-} & UICheckboxProps
-
-function Checkbox({ partial, ...otherProps }: CheckboxProps) {
-  return (
-    <UICheckbox
-      className={styles.fsCheckbox}
-      data-fs-checkbox-partial={partial}
-      {...otherProps}
-    />
-  )
-}
-
-export default Checkbox

package/src/components/ui/Checkbox/checkbox.module.scss

@@ -1,157 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-checkbox {
-  // --------------------------------------------------------
-  // Design Tokens for Checkbox
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-checkbox-width                        : 1.25rem;
-  --fs-checkbox-height                       : var(--fs-checkbox-width);
-
-  --fs-checkbox-border-width                 : var(--fs-border-width);
-  --fs-checkbox-border-radius                : var(--fs-border-radius);
-  --fs-checkbox-border-color                 : var(--fs-border-color);
-  --fs-checkbox-border-color-hover           : var(--fs-border-color-active);
-
-  --fs-checkbox-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
-
-  --fs-checkbox-bkg-color-hover              : var(--fs-color-primary-bkg-light);
-  --fs-checkbox-shadow-hover                 : 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active);
-
-  // Checked
-  --fs-checkbox-checked-bkg-color            : var(--fs-color-primary-bkg);
-  --fs-checkbox-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
-  --fs-checkbox-checked-border-color-hover   : var(--fs-border-color-hover);
-  --fs-checkbox-checked-shadow-hover         : 0 0 0 var(--fs-checkbox-border-width) var(--fs-checkbox-checked-border-color-hover);
-
-  // Disabled
-  --fs-checkbox-disabled-bkg-color           : var(--fs-color-disabled-bkg);
-  --fs-checkbox-disabled-border-width        : var(--fs-checkbox-border-width);
-  --fs-checkbox-disabled-border-color        : var(--fs-border-color-disabled);
-  --fs-checkbox-disabled-text-color          : var(--fs-color-disabled-text);
-
-  // Partial
-  --fs-checkbox-partial-bkg-color            : var(--fs-color-body-bkg);
-  --fs-checkbox-partial-bkg-color-hover      : var(--fs-color-primary-bkg-light);
-  --fs-checkbox-partial-border-width         : var(--fs-checkbox-border-width);
-  --fs-checkbox-partial-border-color         : var(--fs-color-primary-bkg);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--fs-checkbox-width);
-  height: var(--fs-checkbox-height);
-  cursor: pointer;
-  border: var(--fs-checkbox-border-width) solid var(--fs-checkbox-border-color);
-  border-radius: var(--fs-checkbox-border-radius);
-  outline: none;
-  transition: var(--fs-checkbox-transition);
-  appearance: none;
-
-  @include input-focus-ring;
-
-  &::before {
-    position: absolute;
-    top: 0.188rem;
-    width: 0.375rem;
-    height: 0.625rem;
-    content: "";
-    border: var(--fs-border-width-thick) solid var(--fs-color-text-inverse);
-    border-top: 0;
-    border-left: 0;
-    border-radius: var(--fs-border-width);
-    opacity: 0;
-    transform: rotate(45deg);
-  }
-
-  &:hover:not(:disabled) {
-    background-color: var(--fs-checkbox-bkg-color-hover);
-  }
-
-  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
-    border-color: var(--fs-checkbox-border-color-hover);
-    box-shadow: var(--fs-checkbox-shadow-hover);
-  }
-
-  &:checked {
-    background-color: var(--fs-checkbox-checked-bkg-color);
-    border: none;
-
-    &::before {
-      opacity: 1;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--fs-checkbox-checked-bkg-color-hover);
-    }
-
-    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
-      border-color: var(--fs-checkbox-checked-border-color-hover);
-      box-shadow: var(--fs-checkbox-checked-shadow-hover);
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background-color: var(--fs-checkbox-disabled-bkg-color);
-    border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
-
-    &::before {
-      border-color: var(--fs-checkbox-disabled-border-color);
-    }
-
-    &:hover {
-      background-color: var(--fs-checkbox-disabled-bkg-color);
-      border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
-      box-shadow: none;
-
-      &::before {
-        border-color: var(--fs-checkbox-disabled-border-color);
-      }
-    }
-
-    + label {
-      color: var(--fs-checkbox-disabled-text-color);
-    }
-  }
-
-  &[data-fs-checkbox-partial="true"] {
-    background-color: var(--fs-checkbox-partial-bkg-color);
-    border: var(--fs-checkbox-partial-border-width) solid var(--fs-checkbox-partial-border-color);
-
-    &::before {
-      position: absolute;
-      top: auto;
-      width: 0.625rem;
-      height: 0;
-      content: "";
-      border-width: 0;
-      border-bottom: var(--fs-checkbox-border-width) solid var(--fs-color-primary-bkg);
-      border-radius: var(--fs-border-width);
-      opacity: 1;
-      transform: rotate(0deg);
-    }
-
-    &:checked {
-      &:hover:not(:disabled) {
-        background-color: var(--fs-checkbox-partial-bkg-color-hover);
-      }
-    }
-
-    &:hover {
-      background-color: var(--fs-checkbox-partial-bkg-color-hover);
-      box-shadow: var(--fs-checkbox-shadow-hover);
-    }
-
-    &:disabled {
-      background-color: var(--fs-checkbox-disabled-bkg-color);
-      border: var(--fs-checkbox-disabled-border-width) solid var(--fs-checkbox-disabled-border-color);
-    }
-  }
-}

package/src/components/ui/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Checkbox'
-export type { CheckboxProps } from './Checkbox'

package/src/components/ui/InputText/InputText.stories.mdx

@@ -1,311 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import InputText from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Atoms/InputText"
-  component={InputText}
-  argTypes={{
-    actionable: {
-      type: { name: 'boolean' },
-    },
-    disabled: {
-      type: { name: 'boolean' },
-    },
-    id: {
-      type: { name: 'string', required: true },
-    },
-    inputRef: {
-      control: { disable: true },
-    },
-  }}
-/>
-
-export const Template = (args) => {
-  return <InputText {...args} />
-}
-
-<header>
-
-# Input Text
-
-Input Text are text fields used to get user inputs.
-
-</header>
-
-## Overview
-
-The `InputText` component uses [FastStore UI Input Text](https://www.faststore.dev/reference/ui/atoms/Input) as base.
-
-<Canvas isColumn>
-  <Story
-    name="overview-default"
-    args={{
-      id: 'overview-default',
-      label: 'Label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-error"
-    args={{
-      id: 'overview-error',
-      label: 'Input w/ Error Message',
-      error: 'Error Message',
-      disabled: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-actionable"
-    args={{
-      id: 'overview-actionable',
-      label: 'Input w/ Action',
-      actionable: true,
-      disabled: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-actionable-error"
-    args={{
-      id: 'overview-actionable-error',
-      label: 'Input w/ Action and Error',
-      actionable: true,
-      error: 'Error Message',
-      disabled: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-disabled"
-    args={{
-      id: 'overview-disabled',
-      label: 'Input Disabled',
-      actionable: false,
-      disabled: true,
-      value: 'Input Text',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import InputText from '../components/ui/InputText'`
-
-<Canvas>
-  <Story
-    name="input-default"
-    args={{
-      id: 'input-default',
-      label: 'Label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="input-default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-input-padding"
-    value="var(--fs-spacing-2) var(--fs-spacing-2) 0"
-  />
-  <TokenRow token="--fs-input-height" value="var(--fs-control-tap-size)" />
-  <TokenDivider />
-  <TokenRow token="--fs-input-box-shadow" value="none" />
-  <TokenRow
-    token="--fs-input-box-shadow-hover"
-    value="0 0 0 var(--fs-border-width) var(--fs-border-color-active)"
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-input-border-radius" value="var(--fs-border-radius)" />
-  <TokenRow token="--fs-input-border-width" value="var(--fs-border-width)" />
-  <TokenRow
-    token="--fs-input-border-color"
-    value="var(--fs-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-input-border-color-hover"
-    value="var(--fs-border-color-active)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-input-text-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow token="--fs-input-text-size" value="var(--fs-text-size-body)" />
-  <TokenDivider />
-  <TokenRow token="--fs-input-line-height" value="1.25" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-input-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-input-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-input-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Label
-
-<TokenTable>
-  <TokenRow token="--fs-input-label-padding" value="0 var(--fs-spacing-2)" />
-  <TokenRow
-    token="--fs-input-label-color"
-    value="var(--fs-color-text-light)"
-    isColor
-  />
-  <TokenRow token="--fs-input-label-size" value="var(--fs-text-size-tiny)" />
-</TokenTable>
-
----
-
-## Variants
-
-### Actionable
-
-<Canvas>
-  <Story
-    name="input-actionable"
-    args={{
-      id: 'input-actionable',
-      disabled: false,
-      label: 'Input w/ Action',
-      actionable: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Actionable w/ Error
-
-<Canvas>
-  <Story
-    name="input-actionable-error"
-    args={{
-      id: 'input-actionable-error',
-      disabled: false,
-      label: 'Input w/ Action and Error',
-      error: 'Error Message',
-      actionable: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Error
-
-<Canvas>
-  <Story
-    name="input-error"
-    args={{
-      id: 'input-error',
-      disabled: false,
-      label: 'Input w/ Error Message',
-      error: 'Error Message',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-   <TokenRow
-    token="--fs-input-error-message-margin-top"
-    value="var(--fs-spacing-0)"
-  />
-  <TokenRow
-    token="--fs-input-error-message-size"
-    value="var(--fs-text-size-legend)"
-  />
-  <TokenRow token="--fs-input-error-message-line-height" value="1.1" />
-  <TokenRow
-    token="--fs-input-error-message-color"
-    value="var(--fs-color-danger-text)"
-    isColor
-  />
-
-  <TokenDivider />
-  <TokenRow
-    token="--fs-input-error-border-color"
-    value="var(--fs-color-danger-border)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-input-error-box-shadow"
-    value="0 0 0 var(--fs-border-width) var(--fs-input-error-border-color)"
-  />
-  <TokenRow
-    token="--fs-input-error-focus-ring"
-    value="var(--fs-color-focus-ring-danger)"
-    isColor
-  />
-</TokenTable>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="input-disabled"
-    args={{
-      id: 'input-disabled',
-      disabled: true,
-      label: 'Disabled Input',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-input-disabled-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-input-disabled-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-input-disabled-border-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-input-disabled-border-color"
-    value="var(--fs-border-color)"
-    isColor
-  />
-</TokenTable>

package/src/components/ui/InputText/InputText.tsx

@@ -1,128 +0,0 @@
-import { Input as UIInput, Label as UILabel } from '@faststore/ui'
-import type { MutableRefObject } from 'react'
-import type { InputProps } from '@faststore/ui'
-
-import Button from 'src/components/ui/Button'
-import Icon from 'src/components/ui/Icon'
-
-import styles from './input-text.module.scss'
-
-type DefaultProps = {
-  /**
-   * ID to identify input and corresponding label.
-   */
-  id: string
-  /**
-   * The text displayed to identify input text.
-   */
-  label: string
-  /**
-   * The error message is displayed when an error occurs.
-   */
-  error?: string
-  /**
-   * Component's ref.
-   */
-  inputRef?: MutableRefObject<HTMLInputElement | null>
-  /**
-   * Specifies that the whole input component should be disabled.
-   */
-  disabled?: boolean
-}
-
-type ActionableInputText =
-  | {
-      actionable?: never
-      onSubmit?: never
-      onClear?: never
-      buttonActionText?: string
-      displayClearButton?: never
-    }
-  | {
-      /**
-       * Adds a Button to the component.
-       */
-      actionable: true
-      /**
-       * Callback function when button is clicked. Required for actionable input.
-       */
-      onSubmit: () => void
-      /**
-       * Callback function when clear button is clicked. Required for actionable input.
-       */
-      onClear: () => void
-      /**
-       * The text displayed on the Button. Suggestion: maximum 9 characters.
-       */
-      buttonActionText?: string
-      /**
-       * Boolean that controls the clear button.
-       */
-      displayClearButton?: boolean
-    }
-
-export type InputTextProps = DefaultProps &
-  Omit<InputProps, 'disabled' | 'onSubmit'> &
-  ActionableInputText
-
-const InputText = ({
-  id,
-  label,
-  type = 'text',
-  error,
-  displayClearButton,
-  actionable,
-  buttonActionText = 'Apply',
-  onSubmit,
-  onClear,
-  placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
-  inputRef,
-  disabled,
-  value,
-  ...otherProps
-}: InputTextProps) => {
-  const shouldDisplayError = !disabled && error && error !== ''
-  const shouldDisplayButton = actionable && !disabled && value !== ''
-
-  return (
-    <div
-      className={styles.fsInputText}
-      data-fs-input-text
-      data-fs-input-text-actionable={actionable}
-      data-fs-input-text-error={error && error !== ''}
-    >
-      <UIInput
-        id={id}
-        type={type}
-        value={value}
-        ref={inputRef}
-        disabled={disabled}
-        placeholder={placeholder}
-        {...otherProps}
-      />
-      <UILabel htmlFor={id}>{label}</UILabel>
-
-      {shouldDisplayButton &&
-        (displayClearButton || error ? (
-          <Button
-            data-fs-button-size="small"
-            aria-label="Clear Field"
-            icon={<Icon name="XCircle" width={20} height={20} />}
-            onClick={() => {
-              onClear?.()
-              inputRef?.current?.focus()
-            }}
-          />
-        ) : (
-          <Button variant="tertiary" size="small" onClick={onSubmit}>
-            {buttonActionText}
-          </Button>
-        ))}
-      {shouldDisplayError && (
-        <span data-fs-input-text-error-message>{error}</span>
-      )}
-    </div>
-  )
-}
-
-export default InputText

package/src/components/ui/InputText/index.ts

@@ -1,2 +0,0 @@
-export { default } from './InputText'
-export type { InputTextProps } from './InputText'