@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/src/index.ts

@@ -1,103 +1,91 @@
-// Atoms
-export { default as Link } from './atoms/Link'
-export type { LinkProps } from './atoms/Link'
-
-export { default as Button } from './atoms/Button'
-export type { ButtonProps } from './atoms/Button'
-
-export { default as Input } from './atoms/Input'
-export type { InputProps } from './atoms/Input'
-
-export { default as Icon } from './atoms/Icon'
-export type { IconProps } from './atoms/Icon'
+export * from '@faststore/components'
 
-export { default as Popover } from './atoms/Popover'
-export type { PopoverProps } from './atoms/Popover'
-
-export { default as Price } from './atoms/Price'
-export type { PriceProps } from './atoms/Price'
-
-export { default as TextArea } from './atoms/TextArea'
-export type { TextAreaProps } from './atoms/TextArea'
+// Atoms
+export { default as Link } from './components/atoms/Link'
+export type { LinkProps } from './components/atoms/Link'
 
-export { default as Checkbox } from './atoms/Checkbox'
-export type { CheckboxProps } from './atoms/Checkbox'
+export { default as Input } from './components/atoms/Input'
+export type { InputProps } from './components/atoms/Input'
 
-export { default as Overlay } from './atoms/Overlay'
-export type { OverlayProps } from './atoms/Overlay'
+export { default as Popover } from './components/atoms/Popover'
+export type { PopoverProps } from './components/atoms/Popover'
 
-export { default as Select } from './atoms/Select'
-export type { SelectProps } from './atoms/Select'
+export { default as Price } from './components/atoms/Price'
+export type { PriceProps } from './components/atoms/Price'
 
-export { default as Radio } from './atoms/Radio'
-export type { RadioProps } from './atoms/Radio'
+export { default as TextArea } from './components/atoms/TextArea'
+export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Badge } from './atoms/Badge'
-export type { BadgeProps } from './atoms/Badge'
+export { default as Overlay } from './components/atoms/Overlay'
+export type { OverlayProps } from './components/atoms/Overlay'
 
-export { default as Slider } from './atoms/Slider'
-export type { SliderProps } from './atoms/Slider'
+export { default as Select } from './components/atoms/Select'
+export type { SelectProps } from './components/atoms/Select'
 
-export { default as List } from './atoms/List'
-export type { ListProps } from './atoms/List'
+export { default as Slider } from './components/atoms/Slider'
+export type { SliderProps } from './components/atoms/Slider'
 
-export { default as Skeleton } from './atoms/Skeleton'
-export type { SkeletonProps } from './atoms/Skeleton'
+export { default as List } from './components/atoms/List'
+export type { ListProps } from './components/atoms/List'
 
-export { default as Spinner } from './atoms/Spinner'
-export type { SpinnerProps } from './atoms/Spinner'
+export { default as Skeleton } from './components/atoms/Skeleton'
+export type { SkeletonProps } from './components/atoms/Skeleton'
 
-export { default as Label } from './atoms/Label'
-export type { LabelProps } from './atoms/Label'
+export { default as Spinner } from './components/atoms/Spinner'
+export type { SpinnerProps } from './components/atoms/Spinner'
 
-export { default as Incentive } from './atoms/Incentive'
-export type { IncentiveProps } from './atoms/Incentive'
+export { default as Incentive } from './components/atoms/Incentive'
+export type { IncentiveProps } from './components/atoms/Incentive'
 
 // Molecules
-export { default as SkuSelector } from './molecules/SkuSelector'
-export type { SkuSelectorProps } from './molecules/SkuSelector'
+export { default as SkuSelector } from './components/molecules/SkuSelector'
+export type { SkuSelectorProps } from './components/molecules/SkuSelector'
 
-export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
+export {
+  default as Gift,
+  GiftContent,
+  GiftImage,
+} from './components/molecules/Gift'
 export type {
   GiftProps,
   GiftContentProps,
   GiftImageProps,
-} from './molecules/Gift'
+} from './components/molecules/Gift'
 
-export { default as ProductTitle } from './molecules/ProductTitle'
-export type { ProductTitleProps } from './molecules/ProductTitle'
+export { default as ProductTitle } from './components/molecules/ProductTitle'
+export type { ProductTitleProps } from './components/molecules/ProductTitle'
 
-export { default as OrderSummary } from './molecules/OrderSummary'
-export type { OrderSummaryProps } from './molecules/OrderSummary'
+export { default as OrderSummary } from './components/molecules/OrderSummary'
+export type { OrderSummaryProps } from './components/molecules/OrderSummary'
 
-export { default as AggregateRating } from './molecules/AggregateRating'
-export type { AggregateRatingProps } from './molecules/AggregateRating'
+export { default as AggregateRating } from './components/molecules/AggregateRating'
+export type { AggregateRatingProps } from './components/molecules/AggregateRating'
 
 export {
   default as ProductCard,
   ProductCardImage,
   ProductCardContent,
   ProductCardActions,
-} from './molecules/ProductCard'
+} from './components/molecules/ProductCard'
 export type {
   ProductCardProps,
   ProductCardImageProps,
   ProductCardContentProps,
   ProductCardActionsProps,
-} from './molecules/ProductCard'
+} from './components/molecules/ProductCard'
 
 export {
   default as Card,
   CardImage,
   CardContent,
   CardActions,
-} from './molecules/Card'
+} from './components/molecules/Card'
 export type {
   CardProps,
   CardImageProps,
   CardContentProps,
   CardActionsProps,
-} from './molecules/Card'
+} from './components/molecules/Card'
 
 export {
   default as CartItem,
@@ -107,7 +95,7 @@ export {
   CartItemPrices,
   CartItemSummary,
   CartItemTitle,
-} from './molecules/CartItem'
+} from './components/molecules/CartItem'
 export type {
   CartItemProps,
   CartItemActionsProps,
@@ -116,63 +104,69 @@ export type {
   CartItemPricesProps,
   CartItemSummaryProps,
   CartItemTitleProps,
-} from './molecules/CartItem'
-
-export { default as Bullets } from './molecules/Bullets'
-export type { BulletsProps } from './molecules/Bullets'
+} from './components/molecules/CartItem'
 
-export { default as SearchInput } from './molecules/SearchInput'
-export type { SearchInputProps, SearchInputRef } from './molecules/SearchInput'
+export { default as Bullets } from './components/molecules/Bullets'
+export type { BulletsProps } from './components/molecules/Bullets'
 
-export { default as Carousel } from './molecules/Carousel'
-export type { CarouselProps } from './molecules/Carousel'
+export { default as SearchInput } from './components/molecules/SearchInput'
+export type {
+  SearchInputProps,
+  SearchInputRef,
+} from './components/molecules/SearchInput'
 
-export { default as IconButton } from './molecules/IconButton'
-export type { IconButtonProps } from './molecules/IconButton'
+export { default as Carousel } from './components/molecules/Carousel'
+export type { CarouselProps } from './components/molecules/Carousel'
 
-export { default as Modal } from './molecules/Modal'
-export type { ModalProps } from './molecules/Modal'
+export { default as Modal } from './components/molecules/Modal'
+export type { ModalProps } from './components/molecules/Modal'
 
 export {
   default as Banner,
   BannerContent,
   BannerImage,
   BannerLink,
-} from './molecules/Banner'
+} from './components/molecules/Banner'
 export type {
   BannerProps,
   BannerContentProps,
   BannerImageProps,
   BannerLinkProps,
-} from './molecules/Banner'
+} from './components/molecules/Banner'
 
-export { default as PaymentMethods } from './molecules/PaymentMethods'
-export type { PaymentMethodsProps } from './molecules/PaymentMethods'
+export { default as PaymentMethods } from './components/molecules/PaymentMethods'
+export type { PaymentMethodsProps } from './components/molecules/PaymentMethods'
 
-export { default as Breadcrumb } from './molecules/Breadcrumb'
-export type { BreadcrumbProps } from './molecules/Breadcrumb'
+export { default as Breadcrumb } from './components/molecules/Breadcrumb'
+export type { BreadcrumbProps } from './components/molecules/Breadcrumb'
 
-export { default as LoadingButton } from './molecules/LoadingButton'
-export type { LoadingButtonProps } from './molecules/LoadingButton'
+export { default as LoadingButton } from './components/molecules/LoadingButton'
+export type { LoadingButtonProps } from './components/molecules/LoadingButton'
 
-export { default as PriceRange } from './molecules/PriceRange'
-export type { PriceRangeProps } from './molecules/PriceRange'
+export { default as PriceRange } from './components/molecules/PriceRange'
+export type { PriceRangeProps } from './components/molecules/PriceRange'
 
-export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
-export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
+export {
+  default as RadioGroup,
+  RadioOption,
+} from './components/molecules/RadioGroup'
+export type {
+  RadioGroupProps,
+  RadioOptionProps,
+} from './components/molecules/RadioGroup'
 
 export {
   default as Accordion,
   AccordionItem,
   AccordionButton,
   AccordionPanel,
-} from './molecules/Accordion'
+} from './components/molecules/Accordion'
 export type {
   AccordionProps,
   AccordionItemProps,
   AccordionButtonProps,
   AccordionPanelProps,
-} from './molecules/Accordion'
+} from './components/molecules/Accordion'
 
 export {
   Table,
@@ -181,7 +175,7 @@ export {
   TableFooter,
   TableHead,
   TableRow,
-} from './molecules/Table'
+} from './components/molecules/Table'
 export type {
   TableProps,
   TableBodyProps,
@@ -189,51 +183,55 @@ export type {
   TableFooterProps,
   TableHeadProps,
   TableRowProps,
-} from './molecules/Table'
+} from './components/molecules/Table'
 
-export { default as Form } from './molecules/Form'
-export type { FormProps } from './molecules/Form'
+export { default as Form } from './components/molecules/Form'
+export type { FormProps } from './components/molecules/Form'
 
-export { default as Alert } from './molecules/Alert'
-export type { AlertProps } from './molecules/Alert'
+export { default as Alert } from './components/molecules/Alert'
+export type { AlertProps } from './components/molecules/Alert'
 
-export { default as QuantitySelector } from './molecules/QuantitySelector'
-export type { QuantitySelectorProps } from './molecules/QuantitySelector'
+export { default as QuantitySelector } from './components/molecules/QuantitySelector'
+export type { QuantitySelectorProps } from './components/molecules/QuantitySelector'
 
 export {
   default as Dropdown,
   DropdownButton,
   DropdownItem,
   DropdownMenu,
-} from './molecules/Dropdown'
+} from './components/molecules/Dropdown'
 export type {
   DropdownProps,
   DropdownButtonProps,
   DropdownItemProps,
   DropdownMenuProps,
-} from './molecules/Dropdown'
+} from './components/molecules/Dropdown'
 
 // Organisms
 export {
   default as OutOfStock,
   OutOfStockTitle,
   OutOfStockMessage,
-} from './organisms/OutOfStock'
+} from './components/organisms/OutOfStock'
 export type {
   OutOfStockProps,
   OutOfStockMessageProps,
   OutOfStockTitleProps,
-} from './organisms/OutOfStock'
+} from './components/organisms/OutOfStock'
 
-export { Tiles, Tile } from './organisms/Tiles'
-export type { TilesProps, TileProps } from './organisms/Tiles'
+export { Tiles, Tile } from './components/organisms/Tiles'
+export type { TilesProps, TileProps } from './components/organisms/Tiles'
 
-export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero'
+export {
+  default as Hero,
+  HeroHeading,
+  HeroImage,
+} from './components/organisms/Hero'
 export type {
   HeroProps,
   HeroHeadingProps,
   HeroImageProps,
-} from './organisms/Hero'
+} from './components/organisms/Hero'
 
 // Hooks
 export { default as useSlider } from './hooks/useSlider'

package/src/styles/base.scss

@@ -0,0 +1,3 @@
+@import "../base/layout";
+@import "../base/tokens";
+@import "../base/typography";

package/src/styles/components.scss

@@ -0,0 +1,10 @@
+// Atoms
+@import "../components/atoms/Badge/styles";
+@import "../components/atoms/Button/styles";
+@import "../components/atoms/Checkbox/styles";
+@import "../components/atoms/Radio/styles";
+
+// Molecules
+@import "../components/molecules/CheckboxField/styles";
+@import "../components/molecules/RadioField/styles";
+@import "../components/molecules/Tag/styles";

package/src/styles/global.scss

@@ -0,0 +1,4 @@
+@import "./utilities";
+@import "./reset";
+@import "./base";
+@import "./components";

package/src/styles/reset.scss

@@ -0,0 +1,54 @@
+@import "~modern-normalize/modern-normalize";
+
+// Reset default styles
+body {
+  padding: 0;
+  margin: 0;
+}
+
+// Remove all of the default margins
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+// Remove heading elements default style
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+// Remove list elements default style
+ol,
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+button {
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html {
+  font-size: 100%;
+}

package/src/styles/utilities.scss

@@ -0,0 +1,75 @@
+/* SQ-DISABLE */
+@use "sass:math";
+/* SQ-ENABLE */
+
+@import "~include-media/dist/include-media";
+
+// Include Media Overwrites //////////////////////////
+
+$breakpoints: (
+  "phone":         320px,
+  "phonemid":      375px,
+  "tablet":        768px,
+  "notebook":      1280px,
+  "desktop":       1440px,
+);
+
+// Px to rem.
+$base: 16px !default;
+
+@function rem($size) {
+  $rem: math.div($size, $base);
+
+  @return #{$rem}rem;
+}
+
+@mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:hover:focus,                              // due to Safari's lack of support
+      &:focus {
+        border-color: $border;
+        outline: none;
+        box-shadow:
+          0 0 0 1px var(--fs-color-body-bkg),
+          0 0 0 var(--fs-border-width-thickest) $outline,
+          inset 0 0 0 var(--fs-border-width) $border;
+      }
+    }
+  }
+
+  &:focus-visible,
+  &:hover:focus-visible {
+    border-color: $border;
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--fs-color-body-bkg),
+      0 0 0 var(--fs-border-width-thickest) $outline,
+      inset 0 0 0 var(--fs-border-width) $border;
+  }
+}
+
+@mixin focus-ring {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--fs-color-body-bkg), 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring);
+}
+
+@mixin focus-ring-visible {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:focus { @include focus-ring; }            // due to Safari's lack of support
+    }
+  }
+  &:focus-visible { @include focus-ring; }
+}
+
+@mixin truncate-title($max-lines: var(--fs-text-max-lines)) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-line-clamp: $max-lines;
+  line-clamp: $max-lines;
+  text-overflow: -o-ellipsis-lastline;
+  text-overflow: ellipsis;
+}

package/src/typings/utils.d.ts

@@ -1,5 +1,5 @@
-import type { ArgType } from '@storybook/react'
+import type { ArgTypes } from '@storybook/react'
 
 export type ComponentArgTypes<T> = {
-  [K in keyof T]: ArgType
+  [K in keyof T]: ArgTypes
 }

package/dist/assets/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ShoppingCart } from './ShoppingCart';
-export { default as X } from './X';

package/dist/assets/index.js

@@ -1,3 +0,0 @@
-export { default as ShoppingCart } from './ShoppingCart';
-export { default as X } from './X';
-//# sourceMappingURL=index.js.map

package/dist/assets/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA"}

package/src/atoms/Badge/Badge.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-
-import Badge from './Badge'
-
-describe('Badge', () => {
-  it('should have `data-fs-badge` attribute', () => {
-    const { getByText } = render(<Badge>-25%</Badge>)
-
-    const renderedBadge = getByText('-25%')
-
-    expect(renderedBadge).toHaveAttribute('data-fs-badge')
-  })
-
-  describe('Accessibility', () => {
-    it('should not have violations', async () => {
-      const { container } = render(<Badge>-25%</Badge>)
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Badge/Badge.tsx

@@ -1,23 +0,0 @@
-import type { ReactNode, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-  children?: ReactNode
-}
-
-const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-  { testId = 'store-badge', children, ...otherProps }: BadgeProps,
-  ref
-) {
-  return (
-    <div ref={ref} data-fs-badge data-testid={testId} {...otherProps}>
-      {children}
-    </div>
-  )
-})
-
-export default Badge

package/src/atoms/Badge/index.ts

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

package/src/atoms/Badge/stories/Badge.mdx

@@ -1,18 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Badge from '../Badge'
-
-# Badge
-
-<Canvas>
-  <Story id="atoms-badge--badge" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Badge} />
-
-## CSS Selectors
-
-```css
-[data-fs-badge] {}
-```

package/src/atoms/Badge/stories/Badge.stories.tsx

@@ -1,37 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../typings/utils'
-import Component from '../Badge'
-import mdx from './Badge.mdx'
-
-interface StoryControls {
-  badgeText: string
-}
-
-const BadgeTemplate: Story<StoryControls> = ({ badgeText }) => (
-  <Component>{badgeText}</Component>
-)
-
-export const Badge = BadgeTemplate.bind({})
-
-const argTypes: ComponentArgTypes<StoryControls> = {
-  badgeText: {
-    name: 'Badge text',
-    control: {
-      type: 'text',
-    },
-    defaultValue: '-25%',
-  },
-}
-
-export default {
-  title: 'Atoms/Badge',
-  component: Badge,
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/atoms/Button/Button.test.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import Button from './Button'
-
-describe('Button', () => {
-  it('`data-fs-button` is present', () => {
-    const { getByText } = render(<Button>Hello World!</Button>)
-
-    expect(getByText('Hello World!')).toHaveAttribute('data-fs-button')
-  })
-})

package/src/atoms/Button/Button.tsx

@@ -1,23 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface ButtonProps<T = HTMLButtonElement>
-  extends ButtonHTMLAttributes<T> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { children, testId = 'store-button', ...otherProps },
-  ref
-) {
-  return (
-    <button ref={ref} data-fs-button data-testid={testId} {...otherProps}>
-      {children}
-    </button>
-  )
-})
-
-export default Button

package/src/atoms/Button/index.ts

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