@crystallize/design-system 1.4.0 → 1.4.1

package/src/select/select-item.tsx

@@ -0,0 +1,18 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+
+export type SelectItemRef = HTMLDivElement;
+export type SelectItemProps = ComponentProps<typeof SelectPrimitives.Item>;
+
+export const SelectItem = forwardRef<SelectItemRef, SelectItemProps>((props, ref) => {
+  const { children, ...delegated } = props;
+
+  return (
+    <SelectPrimitives.Item className="c-select-item" ref={ref} {...delegated}>
+      <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
+      <SelectPrimitives.ItemIndicator />
+    </SelectPrimitives.Item>
+  );
+});
+
+SelectItem.displayName = 'SelectItem';

package/src/select/select-root.tsx

@@ -0,0 +1,50 @@
+import { ComponentProps, forwardRef } from 'react';
+import * as SelectPrimitives from '@radix-ui/react-select';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { Icon } from '../iconography';
+
+const selectTriggerStyles = cva('c-select-trigger', {
+  variants: {
+    size: {
+      xs: 'c-select-trigger-xs',
+      sm: 'c-select-trigger-sm',
+      md: 'c-select-trigger-md',
+      lg: 'c-select-trigger-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+export type SelectRef = HTMLButtonElement;
+export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> &
+  VariantProps<typeof selectTriggerStyles> & {
+    disabled?: boolean;
+    id?: string;
+    placeholder?: string;
+  };
+
+export const SelectContainer = forwardRef<SelectRef, SelectProps>(
+  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+    return (
+      <SelectPrimitives.Root {...delegated}>
+        <SelectPrimitives.Trigger ref={ref} className={selectTriggerStyles({ size })} disabled={disabled} id={id}>
+          <SelectPrimitives.Value placeholder={<span className="c-select-value">{placeholder ?? 'Select...'}</span>} />
+          <Icon.Arrow />
+        </SelectPrimitives.Trigger>
+
+        <SelectPrimitives.Portal>
+          <SelectPrimitives.Content className="c-select-content">
+            <SelectPrimitives.ScrollUpButton />
+            <SelectPrimitives.Viewport className="c-select-viewport">{children}</SelectPrimitives.Viewport>
+            <SelectPrimitives.ScrollDownButton />
+          </SelectPrimitives.Content>
+        </SelectPrimitives.Portal>
+      </SelectPrimitives.Root>
+    );
+  },
+);
+
+SelectContainer.displayName = 'Select';

package/src/select/select.css

@@ -0,0 +1,44 @@
+.c-select-trigger {
+  @apply inline-flex cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded border-0 bg-elevate px-4 text-sm font-medium text-gray shadow;
+
+  &:disabled {
+    @apply cursor-default opacity-50;
+  }
+
+  &-xs {
+    @apply h-6;
+  }
+
+  &-sm {
+    @apply h-9 text-sm;
+  }
+
+  &-md {
+    @apply h-11 text-base;
+  }
+
+  &-lg {
+    @apply h-14 text-lg;
+  }
+}
+
+.c-select-value {
+  @apply italic text-gray-500-400;
+}
+
+.c-select-content {
+  @apply overflow-hidden rounded bg-elevate text-gray shadow;
+}
+
+.c-select-viewport {
+  @apply py-2;
+}
+
+.c-select-item {
+  @apply flex cursor-pointer items-center whitespace-nowrap px-6 py-2 font-medium text-gray;
+
+  &:hover,
+  &:focus {
+    @apply bg-gray-50-900 outline-none;
+  }
+}

package/src/select/select.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import type { Meta } from '@storybook/react';
+
+import { Select } from './select';
+import { Label } from '../label';
+
+export default {
+  title: 'Components/Select',
+  parameters: {
+    backgrounds: { default: 'gray' },
+  },
+} as Meta<typeof Select.Container>;
+
+export const Example = () => {
+  return (
+    <Select.Container>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};
+
+export const Uncontrolled = () => {
+  return (
+    <Select.Container>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};
+
+export const Controlled = () => {
+  const [value, setValue] = useState('react');
+
+  return (
+    <Select.Container value={value} onValueChange={setValue}>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};
+
+export const WithLabel = () => {
+  const [value, setValue] = useState('react');
+
+  return (
+    <div className="flex flex-col items-start space-y-2">
+      <Label htmlFor="with-label-c1">Select framework</Label>
+      <Select.Container id="with-label-c1" value={value} onValueChange={setValue}>
+        <Select.Item value="react">React</Select.Item>
+        <Select.Item value="vue">Vue</Select.Item>
+        <Select.Item value="svelte">Svelte</Select.Item>
+        <Select.Item value="angular">Angular</Select.Item>
+      </Select.Container>
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <Select.Container disabled>
+      <Select.Item value="react">React</Select.Item>
+      <Select.Item value="vue">Vue</Select.Item>
+      <Select.Item value="svelte">Svelte</Select.Item>
+      <Select.Item value="angular">Angular</Select.Item>
+    </Select.Container>
+  );
+};

package/src/select/select.ts

@@ -0,0 +1,9 @@
+import { SelectItem } from './select-item';
+import { SelectContainer } from './select-root';
+
+import './select.css';
+
+export const Select = {
+  Container: SelectContainer,
+  Item: SelectItem,
+};

package/src/slider/Slider.stories.tsx

@@ -0,0 +1,54 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Slider } from '.';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [25],
+    max: 100,
+    orientation: 'vertical',
+    step: 1,
+  },
+};
+
+export const TransparentRange: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [25],
+    max: 100,
+    step: 1,
+    transparentRange: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<number[]>([25]);
+
+    return (
+      <div className="space-y-6">
+        <Slider aria-label="volume" step={1} max={100} onValueChange={setValue} value={value} />
+        <pre>{value}</pre>
+      </div>
+    );
+  },
+};

package/src/slider/index.ts

@@ -0,0 +1 @@
+export { Slider } from './slider';

package/src/slider/slider.css

@@ -0,0 +1,27 @@
+.c-slider-root {
+  @apply relative flex w-52 touch-none select-none items-center;
+  @apply data-[orientation='horizontal']:h-5;
+  @apply data-[orientation='vertical']:h-28 data-[orientation='vertical']:w-5 data-[orientation='vertical']:flex-col;
+}
+
+.c-slider-track {
+  @apply relative grow rounded-full bg-gray-100-800;
+  @apply data-[orientation='horizontal']:h-[3px];
+  @apply data-[orientation='vertical']:w-[3px];
+}
+
+.c-slider-range {
+  @apply absolute rounded-full bg-gray-600-300;
+  @apply data-[orientation="horizontal"]:h-full;
+  @apply data-[orientation="vertical"]:w-full;
+}
+
+.c-slider-range-transparent {
+  @apply bg-transparent;
+}
+
+.c-slider-thumb {
+  @apply block h-5 w-5 rounded-xl bg-gray-600-300 shadow;
+  @apply hover:bg-gray-700-200;
+  @apply focus:shadow-lg focus:outline-none;
+}

package/src/slider/slider.tsx

@@ -0,0 +1,20 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cx } from 'class-variance-authority';
+import { forwardRef } from 'react';
+
+import './slider.css';
+
+type SliderProps = SliderPrimitive.SliderProps & {
+  transparentRange?: boolean;
+};
+
+export const Slider = forwardRef<HTMLSpanElement, SliderProps>(({ className, transparentRange, ...delegated }, ref) => {
+  return (
+    <SliderPrimitive.Root className={cx('c-slider-root', className)} ref={ref} {...delegated}>
+      <SliderPrimitive.Track className="c-slider-track">
+        <SliderPrimitive.Range className={`c-slider-range ${transparentRange ? 'c-slider-range-transparent' : ''}`} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="c-slider-thumb" />
+    </SliderPrimitive.Root>
+  );
+});

package/src/spinner/Spinner.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Spinner } from '.';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      defaultValue: 30,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/spinner/index.tsx

@@ -0,0 +1,48 @@
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+
+import './spinner.css';
+
+const realSize = 40;
+
+type SpinnerProps = ComponentPropsWithRef<'div'> & {
+  children?: ReactNode;
+  className?: string;
+  color?: string;
+  size?: number;
+  strokeSize?: number;
+};
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ children, className, color = 'currentColor', size = 30, strokeSize, ...delegated }, ref) => {
+    const viewSize = size || realSize;
+    const sizeHalf = realSize / 2;
+
+    return (
+      <div ref={ref} className={cx('c-spinner', className)} data-testid="loading-spinner" {...delegated}>
+        <svg viewBox={`0 0 ${realSize} ${realSize}`} x="0px" y="0px" style={{ width: viewSize, height: viewSize }}>
+          <circle
+            cx="20"
+            cy="20"
+            r="18"
+            style={{
+              stroke: color,
+              strokeWidth: strokeSize ? strokeSize : viewSize / 10,
+              strokeLinecap: 'round',
+              strokeDasharray: size < 16 ? size * 6 : size * 3.5,
+              transformOrigin: `${sizeHalf}px ${sizeHalf}px 0`,
+            }}
+            className="c-spinner-artifact"
+          />
+        </svg>
+        {children && (
+          <span className="c-spinner-children" style={{ fontSize: size ? `${size * 0.75}px` : '1em' }}>
+            {children}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = 'Spinner';

package/src/spinner/spinner.css

@@ -0,0 +1,11 @@
+.c-spinner {
+  @apply inline-flex items-center;
+
+  &-artifact {
+    @apply animate-spin fill-transparent;
+  }
+
+  &-children {
+    @apply ml-[15px] inline-block;
+  }
+}

package/src/tag/Tag.stories.tsx

@@ -0,0 +1,32 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Tag } from '.';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {
+    children: 'EUR',
+  },
+};
+
+export const Elevate: Story = {
+  args: {
+    children: 'EUR',
+    variant: 'elevate',
+  },
+};
+
+export const DarkMode: Story = {
+  args: {
+    children: '%',
+    variant: 'elevate',
+    className: 'c-dark',
+  },
+};

package/src/tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from './tag';

package/src/tag/tag.css

@@ -0,0 +1,7 @@
+.c-tag {
+  @apply inline-flex items-center rounded border border-solid border-gray-200-700 bg-purple-50-900 p-1 text-center text-xs font-medium text-gray-700-200 shadow-sm;
+}
+
+.c-tag-elevate {
+  @apply bg-elevate;
+}

package/src/tag/tag.tsx

@@ -0,0 +1,27 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+import './tag.css';
+
+type TagStylesProps = VariantProps<typeof tagStyles>;
+const tagStyles = cva('c-tag', {
+  variants: {
+    variant: {
+      default: '',
+      elevate: 'c-tag-elevate',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type TagProps = ComponentProps<'span'> & TagStylesProps;
+
+export function Tag({ children, className, variant, ...delegated }: TagProps) {
+  return (
+    <span className={tagStyles({ className, variant })} {...delegated}>
+      {children}
+    </span>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.cjs

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colorsPlugin = require('./plugins/colors');
+
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: ['./src/**/*.tsx'],
+  safelist: ['c-dark'],
+  experimental: {
+    optimizeUniversalDefaults: true,
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        serif: ["'Roboto Slab'", ...defaultTheme.fontFamily.serif],
+      },
+      colors: {
+        // Some nice-to-have colors
+        transparent: 'transparent',
+        inherit: 'inherit',
+      },
+      keyframes: {
+        spin: {
+          '0%': {
+            transform: 'rotate(0deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+          '50%': {
+            transform: 'rotate(720deg)',
+            strokeDashoffset: 125.6, // 40 * 3.14
+          },
+          '100%': {
+            transform: 'rotate(1080deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+        },
+      },
+      animation: {
+        spin: 'spin 2s linear infinite',
+      },
+      boxShadow: {
+        DEFAULT: '0 2px 4px rgba(130,138,144,0.15)',
+      },
+    },
+  },
+  plugins: [colorsPlugin],
+};

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 deekshasharma
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,87 +0,0 @@
-# React component library for Crystallize using TypeScript and Storybook
-
-This React component library is published to NPM.
-
-## Start the project
-
-```bash
-npm start # or yarn start
-```
-
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-Then run either Storybook or the example playground:
-
-> NOTE:
->
-> 1. Install the peer dependencies from the `package.json` before running this project.
->
-> 2. Stories should reference the components as if using the library. This has been aliased in the tsconfig and the storybook webpack config as a helper.
-
-### Install dependencies
-
-Then run the example inside another:
-
-```bash
-yarn add @crystallize/ui styled-components
-```
-
-Note: You also need React to be able to work with this library.
-
-### How to import and use Button component
-
-```js
-import {Button} from "@crystallize/ui";
-
-function App() {
-  return (
-    <div className="App" style={{justifyContent: "space-between", alignItems: "center", marginTop: "10vh"}}>
-      <Button color={"primary"} variant="filled" size={"large"}>Add to Cart</Button>
-    </div>
-  );
-}
-```
-
-Jest tests are set up to run with `npm test` or `yarn test`.
-
-### Bundle analysis
-
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/example
-  index.html
-  index.tsx       # test your component here in a demo app
-  package.json
-  tsconfig.json
-/src
-  index.tsx       # Main file to export the components
-/test             # Jest tests
-/stories          # Stories for the components
-
-/.storybook       # Storybook consfiguration files
-  main.js
-  preview.js
-.gitignore
-package.json
-README.md
-tsconfig.json
-```
-
-### How to import and use Typography component
-
-```js
-import {Typography} from "@crystallize/ui";
-
-function App() {
-    return (
-        <div className="App" style={{justifyContent: "space-between", alignItems: "center", marginTop: "10vh"}}>
-            <Typography color={"primary"} style={"h3"} align={"center"}>Headless e-Commerce is the future!</Typography>
-        </div>
-    );
-}
-```

package/dist/components/Button.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface ButtonProps {
-    color?: 'primary' | 'secondary' | 'default';
-    variant?: 'filled' | 'outlined' | 'text';
-    size?: 'small' | 'medium' | 'large';
-    onClick?: () => void;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    children?: React.ReactNode;
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Checkbox.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-declare type ColorType = 'primary' | 'secondary';
-declare type CheckboxSizeType = 'small' | 'medium' | 'large';
-export interface CheckboxProps {
-    checked: boolean;
-    color?: ColorType;
-    disabled?: boolean;
-    id?: string;
-    name?: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    size?: CheckboxSizeType;
-}
-export interface CustomCheckboxProps {
-    color?: ColorType;
-    checked: boolean;
-    disabled: boolean;
-    size: CheckboxSizeType;
-}
-export declare enum checkboxColors {
-    primary = "primary",
-    secondary = "secondary"
-}
-export declare enum checkboxSizes {
-    small = "small",
-    medium = "medium",
-    large = "large"
-}
-export declare const Checkbox: React.FC<CheckboxProps>;
-export {};

package/dist/components/Typography.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface TypographyProps {
-    color?: 'primary' | 'secondary' | 'primaryText' | 'secondaryText' | 'error';
-    style?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline';
-    underline?: boolean;
-    bold?: boolean;
-    display?: 'inline' | 'block' | 'inherit';
-    gutter?: boolean;
-    align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
-    ellipsis?: boolean;
-    textParagraph?: boolean;
-    children?: React.ReactNode;
-}
-export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLSpanElement>>;