diff --git a/.nvmrc b/.nvmrc index 5debbed..518633e 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/carbon +lts/fermium diff --git a/example/.npmignore b/example/.npmignore deleted file mode 100644 index 587e4ec..0000000 --- a/example/.npmignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules -.cache -dist \ No newline at end of file diff --git a/example/index.html b/example/index.html deleted file mode 100644 index 547e2e0..0000000 --- a/example/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Playground - - - -
- - - diff --git a/example/index.tsx b/example/index.tsx deleted file mode 100644 index 73387c6..0000000 --- a/example/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import 'react-app-polyfill/ie11'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { Thing } from '../.'; - -const App = () => { - return ( -
- -
- ); -}; - -ReactDOM.render(, document.getElementById('root')); diff --git a/example/package.json b/example/package.json deleted file mode 100644 index a50960f..0000000 --- a/example/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "example", - "version": "1.0.0", - "main": "index.js", - "license": "MIT", - "scripts": { - "start": "parcel index.html", - "build": "parcel build index.html" - }, - "dependencies": { - "react-app-polyfill": "^1.0.0" - }, - "alias": { - "react": "../node_modules/react", - "react-dom": "../node_modules/react-dom/profiling", - "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" - }, - "devDependencies": { - "@types/react": "^16.9.11", - "@types/react-dom": "^16.8.4", - "parcel": "^1.12.3", - "typescript": "^3.4.5" - } -} diff --git a/example/tsconfig.json b/example/tsconfig.json deleted file mode 100644 index 1e2e4fd..0000000 --- a/example/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "allowSyntheticDefaultImports": false, - "target": "es5", - "module": "commonjs", - "jsx": "react", - "moduleResolution": "node", - "noImplicitAny": false, - "noUnusedLocals": false, - "noUnusedParameters": false, - "removeComments": true, - "strictNullChecks": true, - "preserveConstEnums": true, - "sourceMap": true, - "lib": ["es2015", "es2016", "dom"], - "types": ["node"] - } -} diff --git a/package-lock.json b/package-lock.json index c384225..9be8840 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "@mojotech/mojo-ui", "version": "1.12.0", "license": "ISC", + "dependencies": { + "@stitches/react": "^0.1.9" + }, "devDependencies": { "@babel/core": "^7.14.0", "@size-limit/preset-small-lib": "^4.10.2", @@ -2906,6 +2909,22 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/@stitches/core": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@stitches/core/-/core-0.1.9.tgz", + "integrity": "sha512-70gVb0uhgV6BOJmloirWEGZmofk/Hzr5yWlub1rtm4CvimD3Xl5xr9fVkjcTu+REC6ILCJCnlEP4WmilTfXNOA==" + }, + "node_modules/@stitches/react": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@stitches/react/-/react-0.1.9.tgz", + "integrity": "sha512-yK4ZAdkuOiOum+bfPYlDNS9UI/Tm9JYsYNMUWLB3uAy+7tvSYfB4cVYkXwFuiKxis03woATTZTe6IlTb+LXm+A==", + "dependencies": { + "@stitches/core": "^0.1.9" + }, + "peerDependencies": { + "react": ">=17.0.0 <19.0.0" + } + }, "node_modules/@storybook/addon-actions": { "version": "6.2.9", "dev": true, @@ -13290,7 +13309,6 @@ }, "node_modules/js-tokens": { "version": "4.0.0", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -13823,7 +13841,6 @@ }, "node_modules/loose-envify": { "version": "1.4.0", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -14723,7 +14740,6 @@ }, "node_modules/object-assign": { "version": "4.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -16444,7 +16460,6 @@ }, "node_modules/react": { "version": "17.0.2", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -23698,6 +23713,19 @@ } } }, + "@stitches/core": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@stitches/core/-/core-0.1.9.tgz", + "integrity": "sha512-70gVb0uhgV6BOJmloirWEGZmofk/Hzr5yWlub1rtm4CvimD3Xl5xr9fVkjcTu+REC6ILCJCnlEP4WmilTfXNOA==" + }, + "@stitches/react": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@stitches/react/-/react-0.1.9.tgz", + "integrity": "sha512-yK4ZAdkuOiOum+bfPYlDNS9UI/Tm9JYsYNMUWLB3uAy+7tvSYfB4cVYkXwFuiKxis03woATTZTe6IlTb+LXm+A==", + "requires": { + "@stitches/core": "^0.1.9" + } + }, "@storybook/addon-actions": { "version": "6.2.9", "dev": true, @@ -30887,8 +30915,7 @@ "dev": true }, "js-tokens": { - "version": "4.0.0", - "dev": true + "version": "4.0.0" }, "js-yaml": { "version": "3.14.1", @@ -31251,7 +31278,6 @@ }, "loose-envify": { "version": "1.4.0", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -31877,8 +31903,7 @@ "dev": true }, "object-assign": { - "version": "4.1.1", - "dev": true + "version": "4.1.1" }, "object-copy": { "version": "0.1.0", @@ -33025,7 +33050,6 @@ }, "react": { "version": "17.0.2", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index 452bb50..643f53b 100644 --- a/package.json +++ b/package.json @@ -70,5 +70,8 @@ "tsdx": "^0.14.1", "tslib": "^2.2.0", "typescript": "^4.2.4" + }, + "dependencies": { + "@stitches/react": "^0.1.9" } } diff --git a/src/components/Box.tsx b/src/components/Box.tsx new file mode 100644 index 0000000..26dab8f --- /dev/null +++ b/src/components/Box.tsx @@ -0,0 +1,7 @@ +import { styled } from '../stitches.config'; + +const Box = styled('div', { + boxSizing: 'border-box', +}); + +export default Box; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..3c4924a --- /dev/null +++ b/src/index.ts @@ -0,0 +1,9 @@ +export { default as Box } from './components/Box'; +export { + styled, + css, + theme, + getCssString, + global, + keyframes, +} from './stitches.config'; diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 4487cc0..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FC, HTMLAttributes, ReactChild } from 'react'; - -export interface Props extends HTMLAttributes { - /** custom content, defaults to 'the snozzberries taste like snozzberries' */ - children?: ReactChild; -} - -// Please do not use types off of a default export module or else Storybook Docs will suffer. -// see: https://github.com/storybookjs/storybook/issues/9556 -/** - * A custom Thing component. Neat! - */ -export const Thing: FC = ({ children }) => { - return
{children || `the snozzberries taste like snozzberries`}
; -}; diff --git a/src/stitches.config.ts b/src/stitches.config.ts new file mode 100644 index 0000000..58b34b1 --- /dev/null +++ b/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 + }, + }, +}); diff --git a/stories/Thing.stories.tsx b/stories/Box.stories.tsx similarity index 56% rename from stories/Thing.stories.tsx rename to stories/Box.stories.tsx index 3e9f7e6..aa820ae 100644 --- a/stories/Thing.stories.tsx +++ b/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 = args => ; +const Template: Story = () => ( + + + This is a box + + This is another 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 diff --git a/test/blah.test.tsx b/test/blah.test.tsx deleted file mode 100644 index dd73ee4..0000000 --- a/test/blah.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import * as ReactDOM from 'react-dom'; -import { Default as Thing } from '../stories/Thing.stories'; - -describe('Thing', () => { - it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); - }); -});