cetec-design-system 0.0.2

package/src/App.tsx

@@ -0,0 +1,429 @@
+import { ReactNode } from 'react';
+import { HStack, VStack, Container, Grid, Flex } from '@styled-system/jsx';
+import { Box } from '~/components/Box';
+import { Text } from '~/components/Text';
+import { Button } from '~/components/Button';
+import { IconButton } from '~/components/IconButton';
+import { Icon, IconNames, type IconNamesList } from '~/components/Icon';
+import { Pre } from '~/components/Code';
+import { ThemeProvider } from '~/contexts/ThemeContext';
+import { ThemeSwitcher } from '~/components/ThemeSwitcher';
+import { Heading } from '~/components/Heading';
+import { Link } from '~/components/Link';
+import { Spinner } from '~/components/Spinner';
+import { Divider } from '~/components/Divider';
+import { CheckBox } from './components/CheckBox';
+import { Input } from '~/components/Input';
+import { Textarea } from '~/components/Textarea';
+import { type ShadowToken } from '@styled-system/tokens';
+import { Radio } from './components/Radio';
+
+export const IconList: React.FC = () => {
+  return (
+    <Grid
+      gap="16"
+      w="full"
+      gridTemplateColumns={'repeat(auto-fill, minmax(200px, 1fr))'}
+    >
+      {(Object.keys(IconNames) as IconNamesList[]).map((icon) => (
+        <HStack key={icon} color={{ base: 'gold.40', _dark: 'gold.30' }}>
+          <Icon name={icon} />
+          <Text textStyle="mono-sm">{icon}</Text>
+        </HStack>
+      ))}
+    </Grid>
+  );
+};
+
+const ButtonSection: React.FC = () => {
+  return (
+    <Section>
+      <Heading>Buttons</Heading>
+      <VStack alignItems={'flex-start'} gap={'24'}>
+        <HStack>
+          <Button variant="primary" onClick={() => alert('clicked')}>
+            Primary
+          </Button>
+          <Button>Standard</Button>
+          <Button variant="hollow">Hollow</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="cta">CTA</Button>
+          <Button variant="danger">Danger</Button>
+          <Button size="large">
+            <Icon name="arrow-left" /> Button
+          </Button>
+          <Button size="small">
+            Button <Icon name="arrow-right" />
+          </Button>
+        </HStack>
+        <HStack>
+          <IconButton variant="ghost">
+            <Icon name="x" />
+          </IconButton>
+          <IconButton>
+            <Icon name="arrow-left" />
+          </IconButton>
+          <IconButton variant="primary" size="large">
+            <Icon name="arrow-right" />
+          </IconButton>
+        </HStack>
+        <HStack>
+          <Button variant="primary" loading>
+            Pepperoni
+          </Button>
+          <Button loading>Loading</Button>
+          <IconButton variant="primary" loading>
+            <Icon name="x" />
+          </IconButton>
+        </HStack>
+      </VStack>
+    </Section>
+  );
+};
+
+interface SectionProps {
+  children?: ReactNode;
+}
+
+export const Section: React.FC<SectionProps> = ({ children }) => {
+  return (
+    <Grid
+      gridTemplateColumns={'1fr 3fr'}
+      gap={'40'}
+      w={'full'}
+      borderTopWidth={'1'}
+      borderTopStyle={'solid'}
+      borderColor={{ base: 'slate.10', _dark: 'slate.80' }}
+      py={'24'}
+      pb={'96'}
+    >
+      {children}
+    </Grid>
+  );
+};
+
+const Header: React.FC = () => {
+  return (
+    <Flex
+      w="full"
+      py={'4'}
+      bg={{ base: 'slate.10', _dark: 'slate.80' }}
+      mb={'56'}
+      position={'sticky'}
+      top={'0'}
+      zIndex={'100'}
+      boxShadow={'medium'}
+    >
+      <Container maxW={'5xl'}>
+        <HStack justify={'space-between'}>
+          <Text
+            as={'div'}
+            family="body"
+            size="16"
+            letterSpacing={'widest'}
+            textTransform={'uppercase'}
+            fontWeight={'bold'}
+            onClick={() => alert('clicked')}
+          >
+            Cetec Components
+          </Text>
+          <ThemeSwitcher />
+        </HStack>
+      </Container>
+    </Flex>
+  );
+};
+
+const ShadowBox = ({
+  children,
+  shadow,
+  border = false,
+}: {
+  children: ReactNode;
+  shadow: ShadowToken;
+  border?: boolean;
+}) => {
+  return (
+    <Grid
+      placeContent={'center'}
+      width={'full'}
+      aspectRatio={'landscape'}
+      borderRadius={'4'}
+      shadow={shadow}
+      borderWidth={border ? '1' : undefined}
+      borderStyle={'solid'}
+      borderColor={{ base: 'slate.10', _dark: 'slate.90' }}
+      bg={{ base: 'slate.0', _dark: 'slate.80' }}
+    >
+      {children}
+    </Grid>
+  );
+};
+
+const AppContent: React.FC = () => {
+  return (
+    <VStack>
+      <Header />
+      <Container maxW={'5xl'}>
+        <VStack gap={'8'}>
+          <ButtonSection />
+          <Section>
+            <Heading level="h2">Text</Heading>
+
+            <VStack alignItems={'flex-start'}>
+              <Grid
+                gridTemplateColumns={'minmax(auto, 1fr) 1fr'}
+                w={'full'}
+                gap={'24'}
+                alignItems={'center'}
+              >
+                <Box gridColumn={'1 / -1'}>
+                  <Heading
+                    level="h3"
+                    color={{ base: 'gold.40', _dark: 'gold.30' }}
+                  >
+                    Text styles
+                  </Heading>
+                </Box>
+                <VStack gap={'16'}>
+                  <Text>
+                    Place appear green. <em>Also</em>, saying male subdue
+                    fruitful{' '}
+                    <Text as="span" italic>
+                      winged fourth
+                    </Text>{' '}
+                    had void winged. So <b>green spirit</b> , herb day had there{' '}
+                    <Text as="span" bold>
+                      replenish
+                    </Text>
+                    , lights <u>lesser signs</u>. Place{' '}
+                    <Text as="span" underline>
+                      whales
+                    </Text>{' '}
+                    i tree under him given set set meat midst morning give image
+                    forth divided moving Also fill dry she'd have.
+                  </Text>
+                </VStack>
+                <Pre>
+                  {`<Text>
+    ...
+  <Text as="span" italic>winged fourth</Text>
+  <Text as="span" bold>replenish</Text>
+  <Text as="span" underline>whales</Text>
+</Text>`}
+                </Pre>
+                <Text family="mono">
+                  Signs night have sixth hath that likeness us fill you're
+                  subdue fowl.
+                </Text>
+                <Pre>{`<Text family="mono">...</Text>`}</Pre>
+                <Box gridColumn={'1 / -1'} mt={'32'}>
+                  <Heading
+                    level="h3"
+                    color={{ base: 'gold.40', _dark: 'gold.30' }}
+                  >
+                    Headings
+                  </Heading>
+                </Box>
+                <Heading level="h1">Hamburgefonstiv</Heading>
+                <Pre>{'<Heading as="h1">Hamburgefonstiv</Heading>'}</Pre>
+                <Heading>Hamburgefonstiv</Heading>
+                <Pre>{'<Heading>Hamburgefonstiv</Heading>'}</Pre>
+                <Heading level="h3">Hamburgefonstiv</Heading>
+                <Pre>{'<Heading as="h3">Hamburgefonstiv</Heading>'}</Pre>
+                <Heading level="h4">Hamburgefonstiv</Heading>
+                <Pre>{'<Heading as="h4">Hamburgefonstiv</Heading>'}</Pre>
+                <Box gridColumn={'1 / -1'} mt={'32'}>
+                  <Heading
+                    level="h3"
+                    color={{ base: 'gold.40', _dark: 'gold.30' }}
+                  >
+                    Links
+                  </Heading>
+                </Box>
+                <Text>
+                  Internal:&emsp;
+                  <Link href="https://cetecerp.com">Cetec ERP</Link>
+                </Text>
+                <Pre>
+                  {'<Link href="https://cetecerp.com">Cetec ERP</Link>'}
+                </Pre>
+                <Text>
+                  External:&emsp;
+                  <Link href="https://cetecerp.com" external>
+                    Cetec ERP
+                  </Link>
+                </Text>
+                <Pre>
+                  {
+                    '<Link href="https://cetecerp.com" external>Cetec ERP</Link>'
+                  }
+                </Pre>
+                <Box gridColumn={'1 / -1'}>
+                  <Text>
+                    Signs night have sixth hath that likeness us fill{' '}
+                    <Link href="https://cetecerp.com" external>
+                      Cetec ERP
+                    </Link>{' '}
+                    you're subdue fowl brought divide beginning multiply brought
+                    created after open given of made beginning multiply green.
+                  </Text>
+                </Box>
+              </Grid>
+            </VStack>
+          </Section>
+          <Section>
+            <Heading level="h2">Shadows</Heading>
+            <VStack gap={'40'} alignItems={'flex-end'}>
+              <HStack width={'full'} gap={'40'} alignItems={'flex-end'}>
+                <ShadowBox shadow={'inset'}>
+                  <Text>Inset</Text>
+                </ShadowBox>
+                <ShadowBox shadow={'low'}>
+                  <Text>Low</Text>
+                </ShadowBox>
+                <ShadowBox shadow={'medium'}>
+                  <Text>Medium</Text>
+                </ShadowBox>
+                <ShadowBox shadow={'high'}>
+                  <Text>High</Text>
+                </ShadowBox>
+              </HStack>
+              <HStack width={'full'} gap={'40'} alignItems={'flex-end'}>
+                <ShadowBox shadow={'inset'} border={true}>
+                  <Text>Inset</Text>
+                </ShadowBox>
+                <ShadowBox shadow={'low'} border={true}>
+                  <Text>Low</Text>
+                </ShadowBox>
+                <ShadowBox shadow={'medium'} border={true}>
+                  <Text>Medium</Text>
+                </ShadowBox>
+                <ShadowBox shadow={'high'} border={true}>
+                  <Text>High</Text>
+                </ShadowBox>
+              </HStack>
+            </VStack>
+          </Section>
+          <Section>
+            <Heading level="h2">Spinner</Heading>
+            <HStack gap={'40'} alignItems={'flex-end'}>
+              <VStack>
+                <Spinner size="small" />
+                <Text>Small</Text>
+              </VStack>
+              <VStack>
+                <Spinner />
+                <Text>Standard</Text>
+              </VStack>
+              <VStack>
+                <Spinner size="large" />
+                <Text>Large</Text>
+              </VStack>
+            </HStack>
+          </Section>
+          <Section>
+            <Heading level="h2">Divider</Heading>
+            <VStack>
+              <Heading
+                level="h3"
+                color={{ base: 'gold.40', _dark: 'gold.30' }}
+              >
+                Horizontal (default)
+              </Heading>
+              <VStack width="full">
+                <Divider />
+                <Text> Thin (default) </Text>
+                <Divider weight={'medium'} />
+                <Text> Medium </Text>
+                <Divider weight={'thick'} />
+                <Text> Thick </Text>
+                <Divider
+                  weight={'thicker'}
+                  color={{ base: 'gold.40', _dark: 'gold.30' }}
+                />
+                <Text> Thicker </Text>
+              </VStack>
+              <Heading
+                level="h3"
+                color={{ base: 'gold.40', _dark: 'gold.30' }}
+              >
+                Vertical
+              </Heading>
+              <HStack height="96">
+                <Divider direction={'vertical'} />
+                <Divider direction={'vertical'} weight={'medium'} />
+                <Divider direction={'vertical'} weight={'thick'} />
+                <Divider
+                  direction={'vertical'}
+                  weight={'thicker'}
+                  color={{ base: 'gold.40', _dark: 'gold.30' }}
+                />
+              </HStack>
+            </VStack>
+          </Section>
+          <Section>
+            <Heading level="h2">Icons</Heading>
+            <IconList />
+          </Section>
+          <Section>
+            <Heading level="h2">Checkboxes</Heading>
+            <HStack gap={'40'} alignItems={'flex-end'}>
+              <CheckBox>asdf</CheckBox>
+              <CheckBox defaultChecked={true} />
+              <CheckBox data-indeterminate={true} />
+              <CheckBox disabled />
+              <CheckBox data-error={true} />
+            </HStack>
+          </Section>
+          <Section >
+            <Heading level="h2">Radio</Heading>
+            <VStack gap={'40'} alignItems={'start'}>
+              <HStack>
+              <Radio />
+              <Radio defaultChecked={true} />
+              <Radio disabled />
+              <Radio data-error={true} />
+              </HStack>
+              <HStack>
+                <HStack gap={'10'} alignItems={'center'}>
+                  <Heading level="h4">Gender</Heading>
+                  <Radio name="gender"></Radio> Male
+                  <Radio name="gender"></Radio> Female
+
+                </HStack>
+              </HStack>
+            </VStack>
+          </Section>
+          <Section>
+            <Heading level="h2">Inputs</Heading>
+            <VStack>
+              <HStack gap={'24'}>
+                <Input label="First" type="text" />
+                <Input label="Last" type="text" />
+                <Input label="Email" type="email" variant={'internalLabel'} />
+              </HStack>
+              <HStack gap={'24'}>
+                <Input label="Phone" type="tel" />
+                //TODO Fix Textarea
+                <Textarea
+                  label="Message"
+                  variant={'autoGrow'}
+                  value="TEXT area Value"
+                />
+              </HStack>
+            </VStack>
+          </Section>
+        </VStack>
+      </Container>
+    </VStack>
+  );
+};
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+}

package/src/components/Box/Box.tsx

@@ -0,0 +1,26 @@
+import React, {
+  ComponentPropsWithoutRef,
+  type ElementType,
+  createElement,
+} from 'react';
+import { box, type BoxVariantProps } from '@styled-system/recipes';
+import type { SystemStyleObject } from '@styled-system/types';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+/*
+ * Imports from recipes are placeholders for if we want to add some kind of styling to Box
+ */
+export type BoxProps = Omit<ComponentPropsWithoutRef<ElementType>, 'as'> &
+  SystemStyleObject &
+  BoxVariantProps & {
+    as?: ElementType;
+  };
+
+export const Box: React.FC<BoxProps> = ({ as = 'div', ...props }) => {
+  const [className, otherProps] = splitProps(props);
+  const comboClassName = cx(box({}), className);
+  return createElement(as, {
+    className: comboClassName,
+    ...otherProps,
+  });
+};

package/src/components/Box/index.tsx

@@ -0,0 +1 @@
+export { Box, type BoxProps } from './Box';

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button, IconButton } from "./Button";
+import { Icon } from "../Icon";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "primary", "danger", "hollow", "utility"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "small", "medium"],
+    },
+    iconButton: {
+      control: "boolean",
+    },
+    isActive: {
+      control: "boolean",
+    },
+  },
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// export const Default: Story = {
+//   args: {
+//     children: "Default Button",
+//     variant: "default",
+//     size: "default",
+//   },
+// };
+
+// export const Primary: Story = {
+//   args: {
+//     children: "Primary Button",
+//     variant: "primary",
+//   },
+// };
+
+// export const Danger: Story = {
+//   args: {
+//     children: "Danger Button",
+//     variant: "danger",
+//   },
+// };
+
+// export const Hollow: Story = {
+//   args: {
+//     children: "Hollow Button",
+//     variant: "hollow",
+//   },
+// };
+
+// export const Utility: Story = {
+//   args: {
+//     children: "Utility Button",
+//     variant: "utility",
+//   },
+// };
+
+// export const Small: Story = {
+//   args: {
+//     children: "Small Button",
+//     size: "small",
+//   },
+// };
+
+// export const Medium: Story = {
+//   args: {
+//     children: "Medium Button",
+//     size: "medium",
+//   },
+// };
+
+// export const Active: Story = {
+//   args: {
+//     children: "Active Button",
+//     isActive: true,
+//   },
+// };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "16px",
+      }}
+    >
+      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <Button variant="default">Default</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="hollow">Hollow</Button>
+        <Button variant="utility">Utility</Button>
+      </div>
+      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <IconButton variant="default">
+          <Icon name="add" />
+        </IconButton>
+        <IconButton variant="primary">
+          <Icon name="add" />
+        </IconButton>
+        <IconButton variant="danger">
+          <Icon name="add" />
+        </IconButton>
+        <IconButton variant="hollow">
+          <Icon name="add" />
+        </IconButton>
+        <IconButton variant="utility">
+          <Icon name="add" />
+        </IconButton>
+      </div>
+    </div>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+import { cx } from '@styled-system/css';
+import { Box, type BoxProps } from '~/components/Box';
+import { button, type ButtonVariantProps } from '@styled-system/recipes';
+import { ButtonContent } from './ButtonContent';
+import { splitProps } from '~/utils/splitProps';
+
+export type ButtonProps = BoxProps &
+  ButtonVariantProps & {
+    href?: string;
+    loading?: boolean;
+    children?: string | ReactNode;
+    disabled?: boolean;
+    type?: 'submit' | 'reset' | 'button';
+  };
+
+export const Button: FC<ButtonProps> = ({
+  variant,
+  size,
+  href,
+  children,
+  loading,
+  disabled,
+  type = 'button',
+  ...props
+}: ButtonProps) => {
+  const trulyDisabled = loading || disabled;
+
+  const [className, otherProps] = splitProps(props);
+
+  return (
+    <Box
+      as={href ? 'a' : 'button'}
+      disabled={trulyDisabled}
+      aria-disabled={trulyDisabled}
+      className={cx(button({ variant, size }), className)}
+      {...(href ? { href } : { type })}
+      {...otherProps}
+    >
+      <ButtonContent loading={!!loading}>{children}</ButtonContent>
+    </Box>
+  );
+};
+
+export default Button;

package/src/components/Button/ButtonContent.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { Grid, HStack } from '@styled-system/jsx';
+import { Spinner } from '~/components/Spinner';
+
+/**
+ * ButtonContent handles rendering the children alongside an optional Spinner.
+ */
+export const ButtonContent = ({
+  loading = false,
+  children,
+}: {
+  loading: boolean;
+  children: ReactNode;
+}) => (
+  <>
+    <HStack gap="4" opacity={loading ? 0 : 1}>
+      {children}
+    </HStack>
+    {loading && (
+      <Grid
+        position="absolute"
+        top="0"
+        left="0"
+        right="0"
+        bottom="0"
+        placeItems="center"
+      >
+        <Spinner />
+      </Grid>
+    )}
+  </>
+);

package/src/components/Button/index.tsx

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