Box Component / Stitches Setup

.nvmrc

@@ -1 +1 @@
-lts/carbon
+lts/fermium

package.json

@@ -70,5 +70,8 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "@stitches/react": "^0.1.9"
   }
 }

src/components/Box.tsx

@@ -0,0 +1,7 @@
+import { styled } from '../stitches.config';
+
+const Box = styled('div', {
+  boxSizing: 'border-box',
+});
+
+export default Box;

src/index.ts

@@ -0,0 +1,9 @@
+export { default as Box } from './components/Box';
+export {
+  styled,
+  css,
+  theme,
+  getCssString,
+  global,
+  keyframes,
+} from './stitches.config';

src/stitches.config.ts

@@ -0,0 +1,22 @@
+import { createCss } from '@stitches/react';
+
+export const {
+  styled,
+  css,
+  global,
+  keyframes,
+  getCssString,
+  theme,
+} = createCss({
+  theme: {
+    space: {
+      0: '0px', // 0
+      1: 'clamp(0.25rem, 0.15rem + 0.49vw, 0.50rem)', // 4-8
+      2: 'clamp(0.50rem, 0.30rem + 0.98vw, 1.00rem)', // 8-16
+      3: 'clamp(1.13rem, 0.98rem + 0.73vw, 1.50rem)', // 18-24
+      4: 'clamp(2.75rem, 1.68rem + 5.37vw, 5.50rem)', // 44-88
+      5: 'clamp(5.50rem, 3.35rem + 10.73vw, 11.00rem)', // 88-176
+      6: 'clamp(11.00rem, 6.71rem + 21.46vw, 22.00rem)', // 176-352
+    },
+  },
+});

stories/Thing.stories.tsx → stories/Box.stories.tsx

@@ -1,25 +1,26 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Thing, Props } from '../src';
+import Box from '../src/components/Box';
 
 const meta: Meta = {
-  title: 'Welcome',
-  component: Thing,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
+  title: 'Box',
+  component: Box,
 };
 
 export default meta;
 
-const Template: Story<Props> = args => <Thing {...args} />;
+const Template: Story = () => (
+  <Box>
+    <Box
+      css={{
+        marginBottom: '$6',
+      }}
+    >
+      This is a box
+    </Box>
+    <Box>This is another box</Box>
+  </Box>
+);
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing