Reanimate as TS and use tailwind-react-primitives base lib

.circleci/config.yml

@@ -5,24 +5,17 @@ version: 2
 defaults: &defaults
   working_directory: ~/tailwind-react-ui
   docker:
-    - image: circleci/node:stretch
-
-setupGit: &setupGit
-  run: |
-    git config user.email "$GH_EMAIL" &&
-    git config user.name "$GH_USERNAME"
+    - image: circleci/node:lts
 
 jobs:
-  build:
+  install:
     <<: *defaults
     steps:
       - checkout
 
-      # Download and cache dependencies
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-{{ checksum "package-lock.json" }}
             - v1-dependencies-
 
       - run:
@@ -32,7 +25,17 @@ jobs:
       - save_cache:
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+          key: v1-dependencies-{{ checksum "package-lock.json" }}
+
+      - persist_to_workspace:
+          root: ~/tailwind-react-ui
+          paths: .
+
+  test:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/tailwind-react-ui
 
       - run:
           name: Lint code
@@ -42,6 +45,12 @@ jobs:
           name: Run unit tests
           command: npm test
 
+  build:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/tailwind-react-ui
+
       - run:
           name: Run build
           command: npm run build
@@ -51,67 +60,47 @@ jobs:
           command: npm run docs
 
       - persist_to_workspace:
-          root: ./
+          root: ~/tailwind-react-ui
           paths: .
 
-  deploy-and-publish:
+  publish:
     <<: *defaults
     steps:
       - attach_workspace:
-          at: ./
+          at: ~/tailwind-react-ui
 
       - run:
           name: Deploy to GitHub
           command: npm run docs:deploy
 
       - run:
           name: Authenticate with registry
-          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/tailwind-react-ui/.npmrc
 
       - run:
           name: Publish package
           command: npm publish
 
-  greenkeeperUpdateLockFile:
-    <<: *defaults
-    steps:
-      - checkout
-
-      - restore_cache:
-          keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-            - v1-dependencies-
-
-      - run:
-          name: Update package-lock.json
-          command: npm install
-
-      - <<: *setupGit
-
-      - run:
-          name: Commit lockfile if changed
-          command: |
-            if ! git diff-index --quiet HEAD --; then
-              git add package-lock.json &&
-              git commit -m "chore(package): update lockfile [skip ci]" &&
-              export URL=$(echo $CIRCLE_REPOSITORY_URL | cut -c 4- | tr : /) &&
-              git push https://${GH_TOKEN}${URL} $CIRCLE_BRANCH --quiet
-            fi
-
 workflows:
   version: 2
 
-  build-and-deploy:
+  ci:
     jobs:
-      - build:
+      - install:
           filters:
             tags:
               only: /^v.*/
-      - greenkeeperUpdateLockFile:
+      - test:
+          requires:
+            - install
+      - build:
+          requires:
+            - install
           filters:
-            branches:
-              only: /^greenkeeper\/.*/
-      - deploy-and-publish:
+            tags:
+              only: /^v.*/
+      - publish:
+          context: npm
           requires:
             - build
           filters:

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: [
+    'react-app',
+    'plugin:jsx-a11y/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+    'prettier/react',
+  ],
+  plugins: ['jsx-a11y'],
+}

.gitignore

@@ -65,12 +65,12 @@ stats
 
 # build directories
 /dist
-/components
-/plugins
-/tools
 
 # Idea directory
 .idea
 
 # Styleguide
 styleguide
+
+# Build cache
+.cache

.nvmrc

@@ -1 +1 @@
-v8.11.3
+lts/*

README.md

@@ -54,61 +54,75 @@ Tailwind React UI's suite of components are highly composable allowing for a lar
 ### Using Utility Components
 
 ```jsx
-<Box maxW="md" m={{ x: 'auto' }}>
-  <Box border shadow bg="white">
-    <Box p={4}>
-      <Text is="h1" text={['blue', 'xxl']} m={{ b: 4 }}>
-        Hello World
-      </Text>
+import { Box, Flex, Text, Touchable } from 'tailwind-react-primitives'
+;<>
+  <Box maxW="md" m={{ x: 'auto' }}>
+    <Box border shadow bg="white">
+      <Box p={4}>
+        <Text is="h1" text={['blue', 'xxl']} m={{ b: 4 }}>
+          Hello World
+        </Text>
+      </Box>
+      <Flex items="end" wrap reverse>
+        <Touchable
+          p={{ x: 4, y: 2 }}
+          border={[true, 'transparent']}
+          bg="blue"
+          bg-hocus="blue-dark"
+          text="white"
+          w="full"
+          w-sm="1/5"
+        >
+          Foo
+        </Touchable>
+        <Touchable
+          p={{ x: 4, y: 2 }}
+          border={[true, 'blue']}
+          text="blue"
+          text-hocus="white"
+          bg-hocus="blue"
+          w="full"
+          w-sm="1/5"
+        >
+          Bar
+        </Touchable>
+      </Flex>
     </Box>
-    <Flex items="end" wrap reverse>
-      <Touchable
-        p={{ x: 4, y: 2 }}
-        border={[true, 'transparent']}
-        bg="blue"
-        bg-hocus="blue-dark"
-        text="white"
-        w="full"
-        w-sm="1/5"
-      >
-        Foo
-      </Touchable>
-      <Touchable
-        p={{ x: 4, y: 2 }}
-        border={[true, 'blue']}
-        text="blue"
-        text-hocus="white"
-        bg-hocus="blue"
-        w="full"
-        w-sm="1/5"
-      >
-        Bar
-      </Touchable>
-    </Flex>
   </Box>
-</Box>
+</>
 ```
 
 ### Using UI Components
 
 ```jsx
-<Container maxW="md">
-  <Card border shadow>
-    <CardBody>
-      <Title size={6} text="blue">
-        Hello World
-      </Title>
-    </CardBody>
-    <CardFooter wrap>
-      <FillButton brand="primary" w="full" w-sm="1/5">
-        Foo
-      </FillButton>
-      <OutlineButton brand="primary" w="full" w-sm="1/5">
-        Bar
-      </OutlineButton>
-    </CardFooter>
-  </Card>
-</Container>
+import {
+  Container,
+  Card,
+  CardBody,
+  CardFooter,
+  Title,
+  FillButton,
+  OutlineButton,
+} from 'tailwind-react-ui'
+;<>
+  <Container maxW="md">
+    <Card border shadow>
+      <CardBody>
+        <Title size={6} text="blue">
+          Hello World
+        </Title>
+      </CardBody>
+      <CardFooter wrap>
+        <FillButton brand="primary" w="full" w-sm="1/5">
+          Foo
+        </FillButton>
+        <OutlineButton brand="primary" w="full" w-sm="1/5">
+          Bar
+        </OutlineButton>
+      </CardFooter>
+    </Card>
+  </Container>
+</>
 ```
 
 ## Useful Links

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+        targets: '>2%',
+      },
+    ],
+  ],
+}

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/src/**/*.(spec|test).{ts,tsx,js,jsx}'],
+  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx,js,jsx}'],
+  testURL: 'http://localhost',
+}