Merge pull request #77 from louffee/develop

Publish Oct 6th Version

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  "configurations": [
+    {
+      "name": "Launch Storybook on Chrome",
+      "request": "launch",
+      "type": "chrome",
+      "url": "http://localhost:6006",
+      "webRoot": "${workspaceFolder}",
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "outputCapture": "console",
+      "preLaunchTask": "Launch Storybook"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "terminal.integrated.defaultProfile.linux": "bash",
+  "terminal.integrated.defaultProfile.osx": "zsh"
+}

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "command": "yarn run storybook",
+      "label": "Launch Storybook",
+      "type": "shell",
+      "icon": {
+        "color": "terminal.ansiCyan",
+        "id": "book"
+      }
+    }
+  ]
+}

packages/@louffee-backdrop/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@louffee/canada-backdrop",
+  "version": "0.4.0",
+  "description": "The backdrop component designed and used @ Louffee.",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/types/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "repository": "[email protected]:louffee/canada-design-system.git",
+  "author": "Louffee Dev. Team <[email protected]>",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "@types/react": "^18.0.15"
+  },
+  "peerDependencies": {
+    "@louffee/canada-style-system": "*",
+    "react": "^18.2.0"
+  },
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.js"
+  },
+  "dependencyLevel": 3,
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@louffee-backdrop/src/Backdrop.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { styled } from '@louffee/canada-style-system'
+import { useClasses } from '@louffee/canada-global-hooks'
+
+import type BackdropProps from './BackdropProps'
+
+// MARK: - Styles
+type BackdropRootProps = Required<Pick<BackdropProps, 'isBlurry' | 'zIndex' | 'blur'>>
+const BackdropRoot = styled('div')<BackdropRootProps>(({ isBlurry, zIndex, blur }) => ({
+  position: 'fixed',
+  inset: 0,
+  zIndex,
+
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+
+  ...(isBlurry && {
+    backdropFilter: `blur(${blur}px)`,
+  }),
+}))
+
+const Backdrop = React.memo<BackdropProps>(({ isBlurry = false, zIndex = 'auto', blur = 2, className }) => {
+  const classes = useClasses('louffee-backdrop', className)
+
+  return <BackdropRoot isBlurry={isBlurry} zIndex={zIndex} blur={blur} className={classes} />
+})
+
+Backdrop.displayName = 'Backdrop'
+
+export default Backdrop

packages/@louffee-backdrop/src/BackdropBlur.ts

@@ -0,0 +1,3 @@
+type BackdropBlur = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+
+export default BackdropBlur

packages/@louffee-backdrop/src/BackdropProps.ts

@@ -0,0 +1,47 @@
+import type * as React from 'react'
+
+import type BackdropBlur from './BackdropBlur'
+
+type HTMLDivElementAttributes = React.HTMLAttributes<HTMLDivElement>
+
+interface BackdropProps extends HTMLDivElementAttributes {
+  /**
+   * Boolean which determines whether the backdrop will apply a blur effect to
+   * contain the content behind it or not.
+   *
+   * @default false
+   */
+  isBlurry?: boolean
+
+  /**
+   * The **`z-index`** CSS property sets the z-order of a positioned element and
+   * its descendants or flex items. Overlapping elements with a larger z-index cover
+   * those with a smaller one.
+   *
+   * **Syntax**: `auto | <integer>`
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+   */
+  zIndex?: React.CSSProperties['zIndex']
+
+  /**
+   * Number from 1 to 10 which determine the degree of blur applied to the backdrop.
+   *
+   * **Warning**: This property only takes effect whether the {@link isBlurry} is
+   * set to `true`.
+   *
+   * @see {@link BackdropBlur}
+   * @see https://developer.mozilla.org/docs/Web/CSS/backdrop-filter
+   *
+   * @default 2
+   */
+  blur?: BackdropBlur
+}
+
+export default BackdropProps

packages/@louffee-card/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@louffee/canada-card",
+  "version": "0.4.0",
+  "description": "The card component designed and used @ Louffee.",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/types/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "repository": "[email protected]:louffee/canada-design-system.git",
+  "author": "Louffee Dev. Team <[email protected]>",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "@types/react": "^18.0.15"
+  },
+  "peerDependencies": {
+    "@louffee/canada-style-system": "*",
+    "@louffee/canada-typography": "*",
+    "react": "^18.2.0"
+  },
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.js"
+  },
+  "dependencyLevel": 4,
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@louffee-card/src/Card.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { styled } from '@louffee/canada-style-system'
+import { useClasses } from '@louffee/canada-global-hooks'
+
+import type CardProps from './CardProps'
+
+// MARK: - Styles
+type CardRootProps = Required<Pick<CardProps, 'radii' | 'elevation'>>
+const CardRoot = styled('div')<CardRootProps>(({ theme, radii, elevation }) => ({
+  backgroundColor: theme.colors.white,
+
+  borderRadius: theme.radii[radii],
+  boxShadow: theme.shadows[elevation],
+
+  padding: theme.spacing.extraLarge,
+}))
+
+// MARK: - JSX
+const Card = React.memo<CardProps>(({ children, radii, elevation, className, ...attributes }) => {
+  const classes = useClasses('louffee-card', className)
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <CardRoot className={classes} radii={radii} elevation={elevation} {...attributes}>
+      {children}
+    </CardRoot>
+  )
+})
+
+Card.displayName = 'Card'
+
+export default Card

packages/@louffee-card/src/CardElevation.ts

@@ -0,0 +1,5 @@
+import type { LouThemeSchema } from '@louffee/canada-style-system'
+
+type CardElevation = keyof LouThemeSchema['shadows']
+
+export default CardElevation

packages/@louffee-card/src/CardProps.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react'
+
+import type CardRadii from './CardRadii'
+import type CardElevation from './CardElevation'
+
+type HTMLDivElementAttributes = React.HTMLAttributes<HTMLDivElement>
+
+interface CardProps extends HTMLDivElementAttributes {
+  children: React.ReactNode
+
+  elevation?: CardElevation
+  radii?: CardRadii
+}
+
+export default CardProps

packages/@louffee-card/src/CardRadii.ts

@@ -0,0 +1,5 @@
+import type { LouThemeSchema } from '@louffee/canada-style-system'
+
+type CardRadii = keyof LouThemeSchema['radii']
+
+export default CardRadii

packages/@louffee-card/src/index.ts

@@ -0,0 +1,4 @@
+export { default } from './Card'
+export type { default as CardElevation } from './CardElevation'
+export type { default as CardProps } from './CardProps'
+export type { default as CardRadii } from './CardRadii'

packages/@louffee-circular-progress/src/CircularProgress.tsx

@@ -3,6 +3,7 @@ import { styled, keyframes, type LouThemeSchema } from '@louffee/canada-style-sy
 
 import type CircularProgressProps from './CircularProgressProps'
 
+// MARK: - Styles
 const rotateKeyframes = keyframes({
   '100%': {
     transform: 'rotate(360deg)',
@@ -62,6 +63,7 @@ const Circle = styled('circle')(({ theme }) => {
   }
 })
 
+// MARK: - JSX
 const CircularProgress: React.FC<CircularProgressProps> = ({ thickness = 5, size = 100, radii = 20 }) => (
   <Loader size={size}>
     <Circle

packages/@louffee-sidebar/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@louffee/canada-sidebar",
+  "version": "0.4.0",
+  "description": "The sidebar component used @ Louffee.",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/types/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "repository": "[email protected]:louffee/canada-design-system.git",
+  "author": "Louffee Dev. Team <[email protected]>",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "@types/react": "^18.0.15"
+  },
+  "peerDependencies": {
+    "@louffee/canada-global-hooks": "*",
+    "@louffee/canada-react-utils": "*",
+    "@louffee/canada-style-system": "*",
+    "@louffee/canada-typography": "*",
+    "@louffee/canada-tooltip": "*",
+    "react": "^18.2.0"
+  },
+  "bundledDependencies": [],
+  "scripts": {
+    "build": "rimraf build && rollup -c ../../rollup.config.js"
+  },
+  "dependencyLevel": 4,
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@louffee-sidebar/src/Sidebar.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import Typography from '@louffee/canada-typography'
+import { styled } from '@louffee/canada-style-system'
+import { useDeveloperChecks, useClasses } from '@louffee/canada-global-hooks'
+
+import renderSidebarItem from './renderSidebarItem'
+import type SidebarProps from './SidebarProps'
+
+// MARK: - Styles
+const Column = styled('aside')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing.extraSmall,
+
+  padding: theme.spacing.small,
+  borderRadius: theme.radii.medium,
+
+  backgroundColor: theme.colors.grey[99],
+}))
+
+// MARK: - JSX
+const Sidebar = ({
+  selectedItem,
+  items,
+  title,
+  className,
+  onSelect,
+  ...attributes
+}: SidebarProps): React.ReactElement => {
+  useDeveloperChecks({ selectedItem, items }, (componentProps) => {
+    if (!Array.isArray(componentProps.items)) {
+      return {
+        type: 'error',
+        message: 'Sidebar: the "items" prop should be an array of SidebarContentItem.',
+      }
+    }
+
+    if (typeof componentProps.selectedItem === 'number') {
+      if (items.length === 0) {
+        return {
+          type: 'error',
+          message: 'Sidebar: the "selectedItem" is defined but there is no elements in the items property array.',
+        }
+      }
+
+      if (componentProps.items.length < componentProps.selectedItem) {
+        return {
+          type: 'error',
+          message: [
+            'Sidebar: The selectedItem is out of the range of the items property array.',
+            `Meanwhile the items.length corresponds to ${componentProps.items.length}, the selectedItem index is ${componentProps.selectedItem}.`,
+          ].join(' '),
+        }
+      }
+    }
+  })
+
+  const rootClasses = useClasses('louffee-sidebar', className)
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Column className={rootClasses} {...attributes}>
+      {typeof title === 'string' ? <Typography variant='labelMedium'>{title}</Typography> : title}
+      {items.map((contentItem, index) =>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        renderSidebarItem({ selectedItem, index, onSelect: onSelect as any, ...contentItem }),
+      )}
+    </Column>
+  )
+}
+
+export default Sidebar

packages/@louffee-sidebar/src/SidebarContentItem.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react'
+import type { IconName } from '@louffee/canada-icon'
+
+type HTMLDivAttributes = React.HTMLAttributes<HTMLDivElement>
+type OmittedHTMLDivAttributes = Omit<HTMLDivAttributes, 'children'>
+
+interface SidebarContentItem extends OmittedHTMLDivAttributes {
+  label: React.ReactNode | ((props: { selected: boolean }) => React.ReactNode)
+  icon?: React.ReactNode | IconName | ((props: { selected: boolean }) => React.ReactNode | IconName)
+}
+
+export default SidebarContentItem