@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/components/Layout/Layout.stories.tsx

@@ -1,412 +0,0 @@
-import React from 'react'
-import type { Meta } from '@storybook/react'
-
-import { Layout } from '.'
-
-import type { BoxProps } from './Box'
-import type { SidebarProps } from './Sidebar'
-import type { StackProps } from './Stack'
-import type { SwitcherProps } from './Switcher'
-import type { GridProps } from './Grid'
-
-export default {
-  title: 'Components/Layout',
-  component: Layout,
-} as Meta
-
-export function Playground(): JSX.Element {
-  return (
-    <Layout.Stack>
-      <Layout.Group>
-        <Layout.Stack className="p-10 bg-danger-light w-60">
-          <p>Item 1</p>
-        </Layout.Stack>
-
-        <Layout.Stack className="p-10 bg-success-light w-60">
-          <p>Item 2</p>
-        </Layout.Stack>
-
-        <Layout.Stack className="p-10 bg-warning-light w-60">
-          <p>Item 3</p>
-        </Layout.Stack>
-      </Layout.Group>
-
-      <Layout.Group>
-        <Layout.Stack className="p-10 bg-danger-light w-60">
-          <p>Item 1</p>
-        </Layout.Stack>
-
-        <Layout.Stack className="p-10 bg-success-light w-60">
-          <p>Item 2</p>
-        </Layout.Stack>
-
-        <Layout.Stack className="p-10 bg-warning-light w-60">
-          <p>Item 3</p>
-        </Layout.Stack>
-      </Layout.Group>
-
-      <Layout.Box
-        background="neutral-white"
-        padding="m"
-        borderRadius="s"
-        borderWidth="thin"
-        borderColor="neutral-light"
-      >
-        <p>Box</p>
-      </Layout.Box>
-    </Layout.Stack>
-  )
-}
-
-Playground.args = {
-  space: 'm',
-}
-
-export function Stack(args: StackProps): JSX.Element {
-  return (
-    <Layout.Stack {...args}>
-      <div className="p-10 border-2 bg-danger-light w-80">1</div>
-      <div className="p-10 border-2 bg-success-light w-80">2</div>
-      <div className="p-10 border-2 bg-warning-light w-80">3</div>
-    </Layout.Stack>
-  )
-}
-
-Stack.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Layout.Stack />\`
-The Stack component will pile up its children adding a equal margin between them. Using it we ensure standard white space between elements, and avoid :first-child or :last-child redundant margins.
-
-**Props**
-
-| Prop   | Type                            | Default | Description                            |
-|--------|---------------------------------|---------|----------------------------------------|
-| space | none, 2xs, xs, s, m, l, xl, 2xl, 3xl | m       | The space between the sibling elements |
-
-\`\`\`jsx
-<Layout.Stack>
-  <div className="p-10 border-2 bg-danger-light w-80">1</div>
-  <div className="p-10 border-2 bg-success-light w-80">2</div>
-  <div className="p-10 border-2 bg-warning-light w-80">3</div>
-</Layout.Stack>
-\`\`\`
-`,
-    },
-  },
-}
-
-Stack.argTypes = {
-  space: {
-    control: {
-      type: 'select',
-      options: ['none', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'],
-    },
-  },
-  justify: {
-    control: {
-      type: 'select',
-      options: [
-        'center',
-        'flex-start',
-        'flex-end',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ],
-    },
-  },
-  align: {
-    control: {
-      type: 'select',
-      options: ['center', 'flex-start', 'flex-end', 'stretch'],
-    },
-  },
-}
-Stack.args = {
-  space: 'm',
-  justify: 'flex-start',
-  align: 'flex-start',
-}
-
-export function Group(args: BoxProps): JSX.Element {
-  return (
-    <Layout.Group {...args}>
-      <Layout.Stack className="p-10 bg-danger-light w-60">
-        <p>Item 1</p>
-      </Layout.Stack>
-
-      <Layout.Stack className="p-10 bg-success-light w-60">
-        <p>Item 2</p>
-      </Layout.Stack>
-
-      <Layout.Stack className="p-10 bg-warning-light w-60">
-        <p>Item 3</p>
-      </Layout.Stack>
-
-      <Layout.Stack className="p-10 bg-neutral w-60">
-        <p>Item 4</p>
-      </Layout.Stack>
-    </Layout.Group>
-  )
-}
-
-Group.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Layout.Group />\`
-
-The Group component is a Flex container, used to group elements horizontally that can wrap onto multiple lines depending on screen size.
-
-**Props**
-
-| Prop     | Type                                                                    | Default    | Description                            |
-|----------|-------------------------------------------------------------------------|------------|----------------------------------------|
-| space   | none, 2xs, xs, s, m, l, xl, 2xl, 3xl                                         | m          | The space between the sibling elements |
-| justify | center, flex-start, flex-end, space-between, space-around, space-evenly | flex-start | The css justify property               |
-| align   | center, flex-start, flex-end, stretch                                   | flex-start | The css align property                 |
-
-\`\`\`jsx
-<Layout.Group>
-  <Layout.Stack className="p-10 bg-danger-light w-60">
-    <p>Item 1</p>
-  </Layout.Stack>
-
-  <Layout.Stack className="p-10 bg-success-light w-60">
-    <p>Item 2</p>
-  </Layout.Stack>
-
-  <Layout.Stack className="p-10 bg-warning-light w-60">
-    <p>Item 3</p>
-  </Layout.Stack>
-
-  <Layout.Stack className="p-10 bg-neutral w-60">
-    <p>Item 4</p>
-  </Layout.Stack>
-</Layout.Group>
-\`\`\`
-`,
-    },
-  },
-}
-
-Group.argTypes = {
-  space: {
-    control: {
-      type: 'select',
-      options: ['none', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'],
-    },
-  },
-  justify: {
-    control: {
-      type: 'select',
-      options: [
-        'center',
-        'flex-start',
-        'flex-end',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ],
-    },
-  },
-  align: {
-    control: {
-      type: 'select',
-      options: ['center', 'flex-start', 'flex-end', 'stretch'],
-    },
-  },
-}
-Group.args = {
-  space: 'm',
-  justify: 'flex-start',
-  align: 'flex-start',
-}
-
-export function Box(args: BoxProps): JSX.Element {
-  return (
-    <Layout.Box {...args}>
-      <p>Box content</p>
-    </Layout.Box>
-  )
-}
-
-Box.args = {
-  background: 'neutral-white',
-  padding: 'm',
-  borderRadius: 's',
-  borderWidth: 'thin',
-  borderColor: 'neutral-light',
-}
-
-Box.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Layout.Box />\`
-
-The Box component can be used to delimit the content between some textual flow.
-
-**Props**
-
-| Prop          | Type                                                          | Default       | Description                         |
-|---------------|---------------------------------------------------------------|---------------|-------------------------------------|
-| padding      | none, 2xs, xs, s, m, l, xl, 2xl, 3xl                               | m             | The padding applied to the Box      |
-| background   | transparent, neutral-white, neutral-lighter, neutral-lightest | transparent   | The Box background                  |
-| borderRadius | none, s, m, l                                                 | s             | The border radius value for the Box |
-| borderColor  | neutral-darker, neutral-light, neutral-white                  | neutral-light | The Box border-color                |
-| borderWidth  | medium, thin, none                                            | none          | The Box border width                |
-| textAlign    | left, center, right                                           | left          | The Box text align                  |
-
-\`\`\`jsx
-<Layout.Box>
-  Box content
-</Layout.Box>
-\`\`\`
-`,
-    },
-  },
-}
-
-export function Sidebar(args: SidebarProps): JSX.Element {
-  return (
-    <Layout.Sidebar {...args}>
-      <img src="https://via.placeholder.com/150" />
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aperiam optio
-        necessitatibus ducimus voluptate, illo mollitia omnis eaque aliquam in dolore quia alias
-        voluptatibus corporis nisi voluptatem facilis architecto corrupti!
-      </p>
-    </Layout.Sidebar>
-  )
-}
-
-Sidebar.args = {
-  space: 'm',
-  reversed: false,
-  sideWidth: 'auto',
-  minContentWidth: '50%',
-}
-
-Sidebar.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Layout.Sidebar />\`
-
-The Sidebar component can be used to align two components side-by-side and wrap them in two rows respecting the container's width.
-
-**Props**
-
-| Prop             | Type                            | Default | Description                                                              |
-|------------------|---------------------------------|---------|--------------------------------------------------------------------------|
-| space           | none, 2xs, xs, s, m, l, xl, 2xl, 3xl | m       | The space between the sibling elements                                   |
-| reversed        | boolean                         | false   | Reverse the side of the sidebar                                          |
-| sideWidth       | string                          | auto    | The width of the sidebar                                                 |
-| minContentWidth | string (percentage)             | 50%     | The minimum width of the content element in the horizontal configuration |
-
-\`\`\`jsx
-<Layout.Sidebar>
-  <img src="https://via.placeholder.com/150" />
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aperiam optio
-    necessitatibus ducimus voluptate, illo mollitia omnis eaque aliquam in dolore quia alias
-    voluptatibus corporis nisi voluptatem facilis architecto corrupti!
-  </p>
-</Layout.Sidebar>
-\`\`\`
-`,
-    },
-  },
-}
-
-export function Switcher(args: SwitcherProps): JSX.Element {
-  return (
-    <Layout.Switcher {...args}>
-      <div className="p-10 bg-danger-light w-60"></div>
-      <div className="p-10 bg-danger-light w-60"></div>
-      <div className="p-10 bg-danger-light w-60"></div>
-      <div className="p-10 bg-danger-light w-60"></div>
-    </Layout.Switcher>
-  )
-}
-
-Switcher.args = {
-  space: 's',
-  threshold: '10rem',
-  limit: 4,
-}
-
-Switcher.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Layout.Switcher />\`
-
-The Switcher component can be used as a flexbox container that can switch between horizontal and vertical layout. Its children will layout horizontally above the threshold passed and will layout vertically when there is no more space available.
-
-**Props**
-
-| Prop       | Type                            | Default | Description                                              |
-|------------|---------------------------------|---------|----------------------------------------------------------|
-| space     | none, 2xs, xs, s, m, l, xl, 2xl, 3xl | m       | The space between the sibling elements                   |
-| threshold | string (css rem value)          | 10rem   | A css rem value representing the container breakpoint    |
-| limit     | number                          | 4       | The max number of items allowed in the horizontal layout |
-
-\`\`\`jsx
-<Layout.Switcher>
-  <div className="p-10 bg-danger-light w-60"></div>
-  <div className="p-10 bg-danger-light w-60"></div>
-  <div className="p-10 bg-danger-light w-60"></div>
-</Layout.Switcher>
-\`\`\`
-`,
-    },
-  },
-}
-
-export function Grid(args: GridProps): JSX.Element {
-  return (
-    <Layout.Grid {...args} style={{ width: '50vw' }}>
-      <div className="p-10 bg-danger-light"></div>
-      <div className="p-10 bg-success-light"></div>
-      <div className="p-10 bg-warning-light"></div>
-      <div className="p-10 bg-neutral-light"></div>
-    </Layout.Grid>
-  )
-}
-
-Grid.args = {
-  space: 's',
-  minColumnWidth: '5rem',
-}
-
-Grid.parameters = {
-  docs: {
-    description: {
-      story: `
-#### \`<Layout.Grid />\`
-
-The Grid component can be used as a grid container able to lay out items that are automtically reorganized according to the space available.
-
-**Props**
-
-| Prop       | Type                                | Default | Description                                              |
-|------------|-------------------------------------|---------|----------------------------------------------------------|
-| \`space\`     | none, 2xs, xs, s, m, l, xl, 2xl, 3xl | \`m\`       | The space between the sibling elements                   |
-| \`minColumnWidth\` | string (css px/rem value)       | \`50%\`   | A css value representing the minimum grid column width   |
-
-\`\`\`jsx
-<Layout.Grid>
-  <div className="p-10 bg-danger-light"></div>
-  <div className="p-10 bg-success-light"></div>
-  <div className="p-10 bg-warning-light"></div>
-  <div className="p-10 bg-neutral-light"></div>
-</Layout.Grid>
-\`\`\`
-`,
-    },
-  },
-}

package/src/components/Layout/Layout.tsx

@@ -1,19 +0,0 @@
-import { Group } from './Group'
-import { Stack } from './Stack'
-import { Box } from './Box'
-import { Sidebar } from './Sidebar'
-import { Switcher } from './Switcher'
-import { Grid } from './Grid'
-
-const Layout = (): null => {
-  return null
-}
-
-Layout.Group = Group
-Layout.Stack = Stack
-Layout.Box = Box
-Layout.Sidebar = Sidebar
-Layout.Switcher = Switcher
-Layout.Grid = Grid
-
-export default Layout

package/src/components/Layout/Layout.types.ts

@@ -1,9 +0,0 @@
-export type Spacing = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl'
-export type JustifyValue =
-  | 'center'
-  | 'flex-start'
-  | 'flex-end'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-export type AlignValue = 'center' | 'flex-start' | 'flex-end' | 'stretch'

package/src/components/Layout/Layout.utils.ts

@@ -1,20 +0,0 @@
-import { css } from 'styled-components'
-
-import type { FlattenInterpolation } from 'styled-components'
-import type { ThemedProps } from 'theming'
-
-import conditional, { whenProps } from 'tools/conditional'
-
-export const getSpace = (prop: string): FlattenInterpolation<ThemedProps> => css`
-  ${conditional({
-    'space-none': whenProps({ [prop]: 'none' }),
-    'space-2xs': whenProps({ [prop]: '2xs' }),
-    'space-xs': whenProps({ [prop]: 'xs' }),
-    'space-s': whenProps({ [prop]: 's' }),
-    'space-m': whenProps({ [prop]: 'm' }),
-    'space-l': whenProps({ [prop]: 'l' }),
-    'space-xl': whenProps({ [prop]: 'xl' }),
-    'space-2xl': whenProps({ [prop]: '2xl' }),
-    'space-3xl': whenProps({ [prop]: '3xl' }),
-  })}
-`

package/src/components/Layout/Sidebar.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import conditional, { whenProps } from 'tools/conditional'
-import prop from 'tools/prop'
-
-import type { Spacing } from './Layout.types'
-import { getSpace } from './Layout.utils'
-
-import type { HTMLAttributes } from 'react'
-
-export interface SidebarProps extends HTMLAttributes<HTMLElement> {
-  space?: Spacing
-  reversed?: boolean
-  sideWidth?: string
-  minContentWidth?: string
-}
-
-const SidebarContainer = styled.div<{
-  $space: SidebarProps['space']
-  $reversed: SidebarProps['reversed']
-  $sideWidth: SidebarProps['sideWidth']
-  $minContentWidth: SidebarProps['minContentWidth']
-}>`
-  display: flex;
-  flex-wrap: wrap;
-
-  gap: ${getSpace('$space')};
-
-  &
-    > ${conditional({
-      ':first-child': whenProps({ $reversed: false }),
-      ':last-child': whenProps({ $reversed: true }),
-    })} {
-    flex-basis: ${prop('$sideWidth')};
-    flex-grow: 1;
-  }
-
-  &
-    > ${conditional({
-      ':first-child': whenProps({ $reversed: true }),
-      ':last-child': whenProps({ $reversed: false }),
-    })} {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-width: ${prop('$minContentWidth')};
-  }
-`
-
-/**
- * Sidebar layout component.
- * @param {SidebarProps} props
- */
-export function Sidebar(props: SidebarProps): JSX.Element {
-  const {
-    minContentWidth = '50%',
-    reversed = false,
-    sideWidth = 'auto',
-    space = 'm',
-    children,
-    ...rest
-  } = props
-
-  return (
-    <SidebarContainer
-      $minContentWidth={minContentWidth}
-      $reversed={reversed}
-      $sideWidth={sideWidth}
-      $space={space}
-      {...rest}
-    >
-      {children}
-    </SidebarContainer>
-  )
-}

package/src/components/Layout/Stack.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import type { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-import conditional, { whenProps } from 'tools/conditional'
-
-import { getSpace } from './Layout.utils'
-import type { Spacing, JustifyValue, AlignValue } from './Layout.types'
-
-export interface StackProps extends HTMLAttributes<HTMLElement> {
-  space?: Spacing
-  justify?: JustifyValue
-  align?: AlignValue
-  as?: string | React.ComponentType<any>
-}
-
-export const StackContainer = styled.div<{
-  $space: StackProps['space']
-  $justify: StackProps['justify']
-  $align: StackProps['align']
-}>`
-  display: flex;
-  flex-direction: column;
-
-  align-items: ${conditional({
-    center: whenProps({ $align: 'center' }),
-    'flex-start': whenProps({ $align: 'flex-start' }),
-    'flex-end': whenProps({ $align: 'flex-end' }),
-    stretch: whenProps({ $align: 'stretch' }),
-  })};
-
-  justify-content: ${conditional({
-    center: whenProps({ $justify: 'center' }),
-    'flex-start': whenProps({ $justify: 'flex-start' }),
-    'flex-end': whenProps({ $justify: 'flex-end' }),
-    'space-between': whenProps({ $justify: 'space-between' }),
-    'space-around': whenProps({ $justify: 'space-around' }),
-    'space-evenly': whenProps({ $justify: 'space-evenly' }),
-  })};
-
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  & > * + * {
-    margin-top: ${getSpace('$space')};
-  }
-`
-
-/**
- * Stack layout component.
- * @param {StackProps} props
- */
-export function Stack(props: StackProps): JSX.Element {
-  const { space = 'm', justify = 'flex-start', align = 'stretch', children, ...rest } = props
-
-  return (
-    <StackContainer $space={space} $justify={justify} $align={align} {...rest}>
-      {children}
-    </StackContainer>
-  )
-}

package/src/components/Layout/Switcher.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import prop from 'tools/prop'
-
-import type { Spacing } from './Layout.types'
-import { getSpace } from './Layout.utils'
-
-import type { HTMLAttributes } from 'react'
-
-export interface SwitcherProps extends HTMLAttributes<HTMLElement> {
-  space?: Spacing
-  threshold?: string
-  limit?: number
-}
-
-const SwitcherContainer = styled.div<{
-  $space: SwitcherProps['space']
-  $threshold: SwitcherProps['threshold']
-  $limit: SwitcherProps['limit']
-}>`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${getSpace('$space')};
-
-  > * {
-    flex-basis: calc((${prop('$threshold')} - 100%) * 999);
-    flex-grow: 1;
-  }
-
-  & > :nth-last-child(n + ${prop('$limit')}),
-  & > :nth-last-child(n + ${prop('$limit')}) ~ * {
-    flex-basis: 100%;
-  }
-`
-
-/**
- * Switcher layout component.
- * @param {SwitcherProps} props
- */
-export function Switcher(props: SwitcherProps): JSX.Element {
-  const { limit = 4, space = 's', threshold = '10rem', children, ...rest } = props
-
-  return (
-    <SwitcherContainer $space={space} $threshold={threshold} $limit={limit + 1} {...rest}>
-      {children}
-    </SwitcherContainer>
-  )
-}

package/src/components/Layout/index.tsx

@@ -1,8 +0,0 @@
-export { default as Layout } from './Layout'
-
-export { Group } from './Group'
-export { Stack } from './Stack'
-export { Box } from './Box'
-export { Sidebar } from './Sidebar'
-export { Switcher } from './Switcher'
-export { Grid } from './Grid'

package/src/components/Link/Link.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import Link, { LinkProps } from './Link'
-import type { Meta } from '@storybook/react'
-
-export default {
-  title: 'Components/Link',
-  component: Link,
-  argTypes: {},
-} as Meta
-
-export function Playground(args: LinkProps): JSX.Element {
-  return (
-    <div className="flex flex-row space-x-2">
-      <Link {...args} href="https://www.google.com">
-        Google
-      </Link>
-      <Link {...args} href="https://www.nytimes.com">
-        NY Times
-      </Link>
-    </div>
-  )
-}